Agent Sessions Layout
Ship or repair the VS Code Agents workbench layout while staying aligned with the authoritative LAYOUT.md spec.
Overview
agent-sessions-layout is an agent skill for the Build phase that keeps VS Code Agents workbench layout changes aligned with src/vs/sessions/LAYOUT.md.
Install
npx skills add https://github.com/microsoft/vscode --skill agent-sessions-layoutWhat is this skill?
- Requires reading src/vs/sessions/LAYOUT.md before any layout change
- Covers fixed grid tree, default sizes, and part visibility API/events
- Documents titlebar menus, editor modal overlay sizing, and CSS/file structure
- Mandates updating LAYOUT.md and Revision History when implementation changes
- Lists agent session part classes, storage keys, and workbench lifecycle contributions
Adoption & trust: 914 installs on skills.sh; 186k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are changing agent session UI in VS Code but lack a enforced map of grid parts, visibility defaults, and spec updates.
Who is it for?
Engineers implementing or fixing the Agents sessions workbench inside the VS Code codebase.
Skip if: Builders who only need generic VS Code extension UI patterns without the sessions layout spec.
When should I use this skill?
Implementing features or fixing issues in the Agents workbench layout.
What do I get? / Deliverables
Layout code, CSS classes, and LAYOUT.md—including revision history—stay synchronized with the documented workbench structure.
- Layout implementation changes
- Updated LAYOUT.md with revision history
Recommended Skills
Journey fit
Workbench grid, part visibility, titlebar, and editor modal work lives in product code during the Build phase. The skill targets agent session parts, contributions, and layout APIs—not a standalone web app UI.
How it compares
Use instead of ad-hoc layout tweaks that never update the canonical LAYOUT.md specification.
Common Questions / FAQ
Who is agent-sessions-layout for?
It is for developers maintaining the VS Code Agents workbench layout—grid, parts, titlebar, and modal editor—in the microsoft/vscode sessions tree.
When should I use agent-sessions-layout?
Use it during Build when adding agent-session parts, changing default visibility or sizing, fixing layout bugs, or updating workbench contributions tied to agent sessions.
Is agent-sessions-layout safe to install?
Review the Security Audits panel on this Prism page and treat the skill as filesystem-oriented editor guidance; it does not grant network access by itself.
SKILL.md
READMESKILL.md - Agent Sessions Layout
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: 1. **Maintain fixed positions** — Do not add settings-based position customization 2. **Panel must span the right section width** — The grid structure places the panel below Chat Bar and Auxiliary Bar only 3. **Sidebar spans full height** — Sidebar is in the main content branch, spanning from top to bottom 4. **New parts go in the right section** — Any new parts should be added to the horizontal branch alongside Chat Bar and Auxiliary Bar 5. **Preserve no-op methods** — Unsupported features (zen mode, centered layout, etc.) should remain as no-ops, not throw errors 6. **Handle pane composite lifecycle** — When hiding/showing parts, manage the associated pane composites 7. **Use agent session parts** — New part functionality goes in the agent session part classes (`SidebarPart`, `AuxiliaryBarPart`, `PanelPart`, `ChatBarPart`, `ProjectBarPart`), not the standard workbench parts 8. **Use separate storage keys** — Agent session parts use their own storage keys (prefixed with `workbench.agentsession.` or `workbench.chatbar.`) to avoid conflicts with regular workbench state 9. **Use agent session menu IDs** — Actions should use `Menus.*` menu IDs (from `sessions/browser/menus.ts`), not shared `MenuId.*` 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) | | `session