agent-sessions-layout
Agents workbench layout — covers the fixed layout structure, grid configuration, part visibility, editor modal, titlebar, sidebar footer, and implementation requirements. Use when implementing features or fixing issues in the Agents workbench layout.
- Installs
- 911
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/microsoft/vscode --skill agent-sessions-layout- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads agent-sessions-layout automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
When working on the Agents workbench layout, always follow these guidelines:
1. Read the Specification First
The authoritative specification for the Agents layout lives at:
src/vs/sessions/LAYOUT.md
Before making any changes to the layout code, read and understand the current spec. It defines:
- The fixed layout structure (grid tree, part positions, default sizes)
- Which parts are included/excluded and their visibility defaults
- Titlebar configuration and custom menu IDs
- Editor modal overlay behavior and sizing
- Part visibility API and events
- Agent session part classes and storage keys
- Workbench contributions and lifecycle
- CSS classes and file structure
2. Keep the Spec in Sync
If you modify the layout implementation, you must update LAYOUT.md to reflect those changes. The spec should always match the code. This includes:
- Adding/removing parts or changing their positions
- Changing default visibility or sizing
- Adding new actions, menus, or contributions
- Modifying the grid structure
- Changing titlebar configuration
- Adding new CSS classes or file structure changes
Update the Revision History table at the bottom of LAYOUT.md with a dated entry describing what changed.
3. Implementation Principles
When proposing or implementing changes, follow these rules from the spec:
- Maintain fixed positions — Do not add settings-based position customization
- Panel must span the right section width — The grid structure places the panel below Chat Bar and Auxiliary Bar only
- Sidebar spans full height — Sidebar is in the main content branch, spanning from top to bottom
- New parts go in the right section — Any new parts should be added to the horizontal branch alongside Chat Bar and Auxiliary Bar
- Preserve no-op methods — Unsupported features (zen mode, centered layout, etc.) should remain as no-ops, not throw errors
- Handle pane composite lifecycle — When hiding/showing parts, manage the associated pane composites
- Use agent session parts — New part functionality goes in the agent session part classes (
SidebarPart,AuxiliaryBarPart,PanelPart,ChatBarPart,ProjectBarPart), not the standard workbench parts - Use separate storage keys — Agent session parts use their own storage keys (prefixed with
workbench.agentsession.orworkbench.chatbar.) to avoid conflicts with regular workbench state - Use agent session menu IDs — Actions should use
Menus.*menu IDs (fromsessions/browser/menus.ts), not sharedMenuId.*constants
4. Key Files
| File | Purpose |
|---|---|
sessions/LAYOUT.md | Authoritative layout specification |
sessions/browser/workbench.ts | Main layout implementation (Workbench class) |
sessions/browser/menus.ts | Agents menu IDs (Menus export) |
sessions/browser/layoutActions.ts | Layout actions (toggle sidebar, panel, secondary sidebar) |
sessions/browser/paneCompositePartService.ts | AgenticPaneCompositePartService |
sessions/browser/media/style.css | Layout-specific styles |
sessions/browser/parts/parts.ts | AgenticParts enum |
sessions/browser/parts/titlebarPart.ts | Titlebar part, MainTitlebarPart, AuxiliaryTitlebarPart, TitleService |
sessions/browser/parts/sidebarPart.ts | Sidebar part (with footer and macOS traffic light spacer) |
sessions/browser/parts/chatBarPart.ts | Chat Bar part |
sessions/browser/parts/auxiliaryBarPart.ts | Auxiliary Bar part (with run script dropdown) |
sessions/browser/parts/panelPart.ts | Panel part |
sessions/browser/parts/projectBarPart.ts | Project Bar part (folder entries, icon customization) |
sessions/contrib/configuration/browser/configuration.contribution.ts | Sets workbench.editor.useModal to 'all' for modal editor overlay |
sessions/contrib/sessions/browser/sessionsTitleBarWidget.ts | Title bar widget and agent picker |
sessions/contrib/chat/browser/runScriptAction.ts | Run script split button for titlebar |
sessions/contrib/accountMenu/browser/account.contribution.ts | Account widget for sidebar footer |
sessions/electron-browser/parts/titlebarPart.ts | Desktop (Electron) titlebar part |
5. Testing Changes
After modifying layout code:
- Verify the build compiles without errors via the
VS Code - Buildtask - Ensure the grid structure matches the spec's visual representation
- Confirm part visibility toggling works correctly (show/hide/maximize)
- Test that editors open in the
ModalEditorPartoverlay and that it closes properly - Verify sidebar footer renders with account widget
FAQ
What does the agent-sessions-layout skill do?
Agents workbench layout — covers the fixed layout structure, grid configuration, part visibility, editor modal, titlebar, sidebar footer, and implementation requirements. Use when implementing features or fixing issues in the Agents workbench layout.
How do I install agent-sessions-layout?
Run npx skills add https://github.com/microsoft/vscode --skill agent-sessions-layout in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/agent-sessions-layout/ (personal) or .claude/skills/agent-sessions-layout/ (project).
Which AI agents can use agent-sessions-layout?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is agent-sessions-layout safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains agent-sessions-layout?
It is published by microsoft in microsoft/vscode, and it is an official skill from the maker of the technology it covers. It has 911 recorded installs.
More from microsoft/vscode
memory-leak-audit
microsoft/vscode
Audit code for memory leaks and disposable issues. Use when reviewing event listeners, DOM handlers, lifecycle callbacks, or fixing leak reports. Covers addDisposableListener, Event.once, MutableDisposable, DisposableStore, and onWillDispose patterns.
azure-pipelines
microsoft/vscode
Use when validating Azure DevOps pipeline changes for the VS Code build. Covers queueing builds, checking build status, viewing logs, and iterating on pipeline YAML changes without waiting for full CI runs.
accessibility
microsoft/vscode
Primary accessibility skill for VS Code. REQUIRED for new feature and contribution work, and also applies to updates of existing UI. Covers accessibility help dialogs, accessible views, verbosity settings, signals, ARIA announcements, keyboard navigation, and ARIA labels/roles.
sessions
microsoft/vscode
Core principles and workflow router for changes to the Agents Window under src/vs/sessions.
author-contributions
microsoft/vscode
Identify all files a specific author contributed to on a branch vs its upstream, tracing code through renames. Use when asked who edited what, what code an author contributed, or to audit authorship before a merge. This skill should be run as a subagent — it performs many git operations and returns a concise table.
update-screenshots
microsoft/vscode
Update the committed blocks-ci screenshot hashes after the "Screenshots & Tests" check fails, or investigate a screenshot diff reported on a PR. Use when asked to update, accept, or refresh component screenshot baselines from CI. This skill should be run as a subagent.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.