---
id: daily-agent-sessions-layout
name: "agent-sessions-layout"
url: https://skills.yangsir.net/skill/daily-agent-sessions-layout
author: microsoft
domain: ai-productivity-automation
tags: ["ai-engineering", "prompt-engineering", "automation", "ai-agents"]
install_count: 911
rating: 4.20 (20 reviews)
github: https://github.com/microsoft/vscode
---

# agent-sessions-layout

> agent-sessions-layout，AI Agent Skill，提升工作效率和自动化能力

**Stats**: 911 installs · 4.2/5 (20 reviews)

## Before / After 对比

### Agent界面布局一致性

**Before**:

不同开发者各自实现Agent布局组件，样式和交互不一致，用户学习成本高，每次修改需要同步多个文件。

**After**:

严格遵循LAYOUT.md规范，统一的布局组件和交互模式，自动检查规范遵循情况，确保界面一致性和可维护性。

| Metric | Before | After | Change |
|---|---|---|---|
| 布局一致性得分 | 45% | 98% | +117.8% |
| 跨组件修改时间 | 4小时 | 0.5小时 | -87.5% |

## Readme

# 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:

- **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

Weekly Installs442Repository[microsoft/vscode](https://github.com/microsoft/vscode)GitHub Stars183.5KFirst SeenFeb 17, 2026Security Audits[Gen Agent Trust HubPass](/microsoft/vscode/agent-sessions-layout/security/agent-trust-hub)[SocketPass](/microsoft/vscode/agent-sessions-layout/security/socket)[SnykPass](/microsoft/vscode/agent-sessions-layout/security/snyk)Installed onopencode441gemini-cli441codex441kimi-cli440github-copilot440amp440

---
*Source: https://skills.yangsir.net/skill/daily-agent-sessions-layout*
*Markdown mirror: https://skills.yangsir.net/api/skill/daily-agent-sessions-layout/markdown*