首页/AI 效率与自动化/agent-sessions-layout
A

agent-sessions-layout

by @microsoftv
4.2(20)

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

ai-engineeringprompt-engineeringautomationai-agentsGitHub
安装方式
npx skills add https://github.com/microsoft/vscode --skill agent-sessions-layout
compare_arrows

Before / After 效果对比

1 组
使用前

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

使用后

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

SKILL.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:

  • 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 Installs442Repositorymicrosoft/vscodeGitHub Stars183.5KFirst SeenFeb 17, 2026Security AuditsGen Agent Trust HubPassSocketPassSnykPassInstalled onopencode441gemini-cli441codex441kimi-cli440github-copilot440amp440

用户评价 (0)

发表评价

效果
易用性
文档
兼容性

暂无评价

统计数据

安装量911
评分4.2 / 5.0
版本
更新日期2026年10月7日
对比案例1 组

用户评分

4.2(20)
5
30%
4
55%
3
15%
2
0%
1
0%

为此 Skill 评分

0.0

兼容平台

🔧Claude Code

时间线

创建2026年4月9日
最后更新2026年10月7日
🎁 Agent 知识卡片
调研问卷