DiscordSign up
SKILLS.SH

agent-sessions-layout

Agents workbench layout — covers the fixed layout structure, grid configuration, part visibility, editor modal, titlebar, sidebar footer, and implementation…

INSTALLATION
npx skills add https://github.com/microsoft/vscode --skill agent-sessions-layout
Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

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. or workbench.chatbar.) to avoid conflicts with regular workbench state
  • 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)

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 - Build task
  • 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 ModalEditorPart overlay and that it closes properly
  • Verify sidebar footer renders with account widget
BrowserAct

Let your agent run on any real-world website

Bypass CAPTCHA & anti-bot for free. Start local, scale to cloud.

Explore BrowserAct Skills →

Related skills

find-skills
2/3

Discover and install specialized agent skills from the open ecosystem when users need extended capabilities. Helps identify relevant skills by domain and task when users ask "how do I do X" or "find a skill for X" Integrates with the Skills CLI ( npx skills find , npx skills add ) to search, verify, and install packages from the skills.sh directory Recommends skills based on install count, source reputation, and GitHub stars to ensure quality before suggesting installation Presents skill options with install commands and links to skills.sh for user review and one-click installation

Verified authorvercel-labs
SKILLS.SH
1.5M19.6K
2026-05-22
vercel-react-best-practices
3/3

React and Next.js performance optimization guide with 64 prioritized rules across 8 categories. Organized by impact level, from critical waterfalls and bundle optimization down to advanced patterns, each rule includes incorrect/correct code examples and explanations Covers eight domains: async patterns, bundle size, server-side caching, client-side data fetching, re-render optimization, rendering performance, JavaScript efficiency, and advanced patterns Designed for use during component writing, code review, refactoring, and performance audits on React and Next.js applications Each rule has a prefix code (e.g., async-parallel , bundle-barrel-imports ) for easy reference in automated tooling and documentation

Verified authorvercel-labs
SKILLS.SH
389K26.9K
2026-05-22
azure-validate
2/3

Pre-deployment validation for Azure infrastructure, configuration, and permissions before deployment. Requires .azure/plan.md from a prior azure-prepare run; stops immediately if the plan is missing Executes recipe-specific validation commands (azd provision, bicep build, terraform validate) and records proof in the plan document Performs build verification, configuration checks, and permission validation; blocks deployment if any check fails Only authorized method to set plan status to Validated ; must be followed by azure-deploy skill to execute the actual deployment

Verified authormicrosoft
SKILLS.SH
324K1.1K
2026-05-22
appinsights-instrumentation
3/3

Guidance and reference material for instrumenting webapps with Azure Application Insights. Covers SDK setup, telemetry patterns, and configuration for ASP.NET Core and Node.js applications hosted in Azure Distinguishes between this skill (reference and guidance) and azure-prepare (actual implementation); invoke azure-prepare when the user wants to add instrumentation to their project Provides auto-instrumentation guidance for C# ASP.NET Core apps in Azure App Service, plus manual instrumentation paths for creating App Insights resources via Bicep templates or Azure CLI Includes language-specific code modification guides for ASP.NET Core, Node.js, and Python, plus quick references for OpenTelemetry SDKs and exporters

Verified authormicrosoft
SKILLS.SH
324K1.1K
2026-05-22

Stop writing automation&scrapers

Install the CLI. Run your first Skill in 30 seconds. Scale when you're ready.

Start free
free · no credit card