关于 agent-sessions-layout
为修改 Agents 工作台布局的贡献者提供规范,强调先阅读并同步更新权威布局说明,并遵循结构约定,通过构建和行为检查验证改动。
主要功能
- 01要求先阅读布局规范
- 02保持 LAYOUT.md 与代码同步
- 03规定布局和组件约定
- 04列出关键实现文件
- 05提供构建与行为检查
适用场景
- 01规划 Agents 工作台布局改动
- 02按项目规则审查布局贡献
- 03验证可见性切换和模态编辑器行为
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ microsoft/ vscode --skill agent-sessions-layout安装后在 Claude Code 中输入/agent-sessions-layout确认已加载。
详细介绍
处理 Agents 工作台布局时,请始终遵循以下指南:
1. 先阅读规范
Agents 布局的权威规范位于:
src/vs/sessions/LAYOUT.md
在修改布局代码之前,请先阅读并理解当前规范。其中定义了:
- 固定的布局结构(网格树、部件位置、默认大小)
- 包含和排除的部件及其默认可见性
- 标题栏配置和自定义菜单 ID
- 编辑器模态叠加层的行为和尺寸
- 部件可见性 API 和事件
- Agent 会话部件类和存储键
- 工作台扩展和生命周期
- CSS 类和文件结构
2. 保持规范同步
如果修改布局实现,必须更新 LAYOUT.md,以反映这些更改。规范应始终与代码保持一致,包括:
- 添加或移除部件,或更改其位置
- 更改默认可见性或尺寸
- 添加新操作、菜单或扩展
- 修改网格结构
- 更改标题栏配置
- 添加新的 CSS 类或更改文件结构
更新 LAYOUT.md 底部的修订历史表格,添加一条带日期的记录来说明更改内容。
3. 实现原则
提出或实现更改时,请遵循规范中的以下规则:
- 保持固定位置 — 不要添加基于设置的位置自定义功能
- 面板必须横跨右侧区域的宽度 — 网格结构将面板放在仅位于聊天栏和辅助栏下方的位置
- 侧边栏横跨整个高度 — 侧边栏位于主内容分支中,从顶部延伸到底部
- 新部件放在右侧区域 — 任何新部件都应添加到与聊天栏和辅助栏并列的水平分支中
- 保留空操作方法 — 不支持的功能(禅模式、居中布局等)应继续保持空操作,不要抛出错误
- 处理窗格组合项的生命周期 — 隐藏或显示部件时,管理关联的窗格组合项
- 使用 Agent 会话部件 — 新部件功能应放在 Agent 会话部件类(
SidebarPart、AuxiliaryBarPart、PanelPart、ChatBarPart、ProjectBarPart)中,而不是标准工作台部件中 - 使用独立的存储键 — Agent 会话部件使用自己的存储键(前缀为
workbench.agentsession.或workbench.chatbar.),以避免与常规工作台状态冲突 - 使用 Agent 会话菜单 ID — 操作应使用
Menus.*菜单 ID(来自sessions/browser/menus.ts),而不是共享的MenuId.*常量
4. 关键文件
| 文件 | 用途 |
|---|---|
sessions/LAYOUT.md | 权威布局规范 |
sessions/browser/workbench.ts | 主要布局实现(Workbench 类) |
sessions/browser/menus.ts | Agents 菜单 ID(Menus 导出项) |
sessions/browser/layoutActions.ts | 布局操作(切换侧边栏、面板、辅助侧边栏) |
sessions/browser/paneCompositePartService.ts | AgenticPaneCompositePartService |
sessions/browser/media/style.css | 布局专属样式 |
sessions/browser/parts/parts.ts | AgenticParts 枚举 |
sessions/browser/parts/titlebarPart.ts | 标题栏部件、MainTitlebarPart、AuxiliaryTitlebarPart、TitleService |
sessions/browser/parts/sidebarPart.ts | 侧边栏部件(含页脚和 macOS 交通灯间隔区) |
sessions/browser/parts/chatBarPart.ts | Chat Bar 部件 |
sessions/browser/parts/auxiliaryBarPart.ts | Auxiliary Bar 部件(含运行脚本下拉菜单) |
sessions/browser/parts/panelPart.ts | 面板部件 |
sessions/browser/parts/projectBarPart.ts | Project Bar 部件(文件夹条目、图标自定义) |
sessions/contrib/configuration/browser/configuration.contribution.ts | 将 workbench.editor.useModal 设为 'all',启用模态编辑器覆盖层 |
sessions/contrib/sessions/browser/sessionsTitleBarWidget.ts | 标题栏小部件和 Agent 选择器 |
sessions/contrib/chat/browser/runScriptAction.ts | 标题栏的运行脚本分割按钮 |
sessions/contrib/accountMenu/browser/account.contribution.ts | 侧边栏页脚的账户小部件 |
sessions/electron-browser/parts/titlebarPart.ts | 桌面版(Electron)标题栏部件 |
5. 测试更改
修改布局代码后:
- 通过
VS Code - Build任务确认构建无错误 - 确保网格结构与规范中的视觉表示一致
- 确认部件可见性切换(显示/隐藏/最大化)正常工作
- 测试编辑器能否在
ModalEditorPart覆盖层中打开并正常关闭 - 确认侧边栏页脚能正确显示账户小部件
评论
支持 Markdown