PluginBench
Skill
Official
Pass
Audit score 90

agent-sessions-layout

microsoft/vscode

How to install agent-sessions-layout

npx skills add https://github.com/microsoft/vscode --skill agent-sessions-layout
Claude Code
Cursor
Windsurf
Cline
Full instructions (SKILL.md)

Source of truth, from microsoft/vscode.


name: agent-sessions-layout description: 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.

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

FilePurpose
sessions/LAYOUT.mdAuthoritative layout specification
sessions/browser/workbench.tsMain layout implementation (Workbench class)
sessions/browser/menus.tsAgents menu IDs (Menus export)
sessions/browser/layoutActions.tsLayout actions (toggle sidebar, panel, secondary sidebar)
sessions/browser/paneCompositePartService.tsAgenticPaneCompositePartService
sessions/browser/media/style.cssLayout-specific styles
sessions/browser/parts/parts.tsAgenticParts enum
sessions/browser/parts/titlebarPart.tsTitlebar part, MainTitlebarPart, AuxiliaryTitlebarPart, TitleService
sessions/browser/parts/sidebarPart.tsSidebar part (with footer and macOS traffic light spacer)
sessions/browser/parts/chatBarPart.tsChat Bar part
sessions/browser/parts/auxiliaryBarPart.tsAuxiliary Bar part (with run script dropdown)
sessions/browser/parts/panelPart.tsPanel part
sessions/browser/parts/projectBarPart.tsProject Bar part (folder entries, icon customization)
sessions/contrib/configuration/browser/configuration.contribution.tsSets workbench.editor.useModal to 'all' for modal editor overlay
sessions/contrib/sessions/browser/sessionsTitleBarWidget.tsTitle bar widget and agent picker
sessions/contrib/chat/browser/runScriptAction.tsRun script split button for titlebar
sessions/contrib/accountMenu/browser/account.contribution.tsAccount widget for sidebar footer
sessions/electron-browser/parts/titlebarPart.tsDesktop (Electron) titlebar part

5. Testing Changes

After modifying layout code:

  1. Verify the build compiles without errors via the VS Code - Build task
  2. Ensure the grid structure matches the spec's visual representation
  3. Confirm part visibility toggling works correctly (show/hide/maximize)
  4. Test that editors open in the ModalEditorPart overlay and that it closes properly
  5. Verify sidebar footer renders with account widget

Related skills

More from microsoft/vscode and the wider catalog.

FI

fix-errors

Official
microsoft/vscode

Guidelines for fixing unhandled errors from the VS Code error telemetry dashboard. Use when investigating error-telemetry issues with stack traces, error messages, and hit/user counts. Covers tracing data flow through call stacks, identifying producers of invalid data vs. consumers that crash, enriching error messages for telemetry diagnosis, and avoiding common anti-patterns like silently swallowing errors.

1.8k installs
AZ

azure-pipelines

Official
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.

1.8k installs
AC

accessibility

Official
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.

1.7k installsAudited
ME

memory-leak-audit

Official
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.

1.7k installs
SE

sessions

Official
microsoft/vscode

Agents window architecture — covers the agents-first app, layering, folder structure, chat widget, menus, contributions, entry points, and development guidelines. Use when implementing features or fixing issues in the Agents window.

1.7k installsAudited
HY

hygiene

Official
microsoft/vscode

Use when making code changes to ensure they pass VS Code's hygiene checks. Covers the pre-commit hook, unicode restrictions, string quoting rules, copyright headers, indentation, formatting, ESLint, and stylelint. Run the hygiene check before declaring work complete.

1.7k installs