mcpField
A
agent-sessions-layout

agent-sessions-layout

github.com/microsoftデザイン・UI194.4k911 回インストール今日更新
リポジトリ

agent-sessions-layout について

Agents ワークベンチのレイアウトを変更するコントリビューター向けのガイドラインです。正式な仕様の確認と更新、構造上の規則の順守、ビルドおよび動作確認を重視します。

主な機能

  1. 01レイアウト仕様の事前確認
  2. 02コードと LAYOUT.md の同期
  3. 03レイアウトとコンポーネントの規則
  4. 04主要な実装ファイルの一覧
  5. 05ビルドと動作の確認項目

活用シーン

  1. 01Agents ワークベンチのレイアウト変更を計画
  2. 02プロジェクト規則に沿ってレイアウト変更をレビュー
  3. 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 とイベント
  • エージェントセッションのパーツクラスとストレージキー
  • ワークベンチへの追加機能とライフサイクル
  • CSS クラスとファイル構成

2. 仕様との同期を保つ

レイアウトの実装を変更する場合は、必ず変更内容を LAYOUT.md に反映してください。仕様は常にコードと一致している必要があります。以下の変更が含まれます。

  • パーツの追加/削除、または位置の変更
  • デフォルトの表示設定やサイズの変更
  • 新しいアクション、メニュー、追加機能の追加
  • グリッド構造の変更
  • タイトルバーの設定変更
  • 新しい CSS クラスの追加、またはファイル構成の変更

LAYOUT.md の末尾にある改訂履歴テーブルに、変更内容を説明する日付入りの項目を追加してください。

3. 実装の原則

変更を提案または実装する際は、仕様に記載された次のルールに従ってください。

  1. 固定位置を維持する — 設定による位置のカスタマイズは追加しないでください
  2. パネルは右側セクションの幅全体に広げる — グリッド構造では、パネルはチャットバーと補助バーの下だけに配置されます
  3. サイドバーは高さ全体に広げる — サイドバーはメインコンテンツのブランチにあり、上から下まで広がります
  4. 新しいパーツは右側セクションに追加する — 新しいパーツは、チャットバーと補助バーに並ぶ水平ブランチに追加してください
  5. 何もしないメソッドを維持する — 未対応の機能(Zen モード、中央揃えレイアウトなど)は、エラーをスローせず、何もしない実装のままにしてください
  6. ペインコンポジットのライフサイクルを管理する — パーツの表示/非表示を切り替える際は、関連するペインコンポジットも管理してください
  7. エージェントセッションのパーツを使用する — 新しいパーツ機能は、標準のワークベンチパーツではなく、エージェントセッションのパーツクラス(SidebarPart、AuxiliaryBarPart、PanelPart、ChatBarPart、ProjectBarPart)に実装してください
  8. 個別のストレージキーを使用する — 通常のワークベンチ状態との競合を避けるため、エージェントセッションのパーツには独自のストレージキー(workbench.agentsession. または workbench.chatbar. を接頭辞とするもの)を使用してください
  9. エージェントセッションのメニュー ID を使用する — アクションには、共有の MenuId.* 定数ではなく、sessions/browser/menus.ts の Menus.* メニュー ID を使用してください

4. 主なファイル

ファイル用途
sessions/LAYOUT.md正式なレイアウト仕様
sessions/browser/workbench.tsメインのレイアウト実装(Workbench クラス)
sessions/browser/menus.tsエージェントメニューの ID(Menus エクスポート)
sessions/browser/layoutActions.tsレイアウト操作(サイドバー、パネル、セカンダリサイドバーの切り替え)
sessions/browser/paneCompositePartService.tsAgenticPaneCompositePartService
sessions/browser/media/style.cssレイアウト固有のスタイル
sessions/browser/parts/parts.tsAgenticParts 列挙型
sessions/browser/parts/titlebarPart.tsタイトルバーのパーツ、MainTitlebarPart、AuxiliaryTitlebarPart、TitleService
sessions/browser/parts/sidebarPart.tsサイドバーのパーツ(フッターと macOS のトラフィックライト用スペーサーを含む)
sessions/browser/parts/chatBarPart.tsチャットバーのパーツ
sessions/browser/parts/auxiliaryBarPart.ts補助バーのパーツ(スクリプト実行ドロップダウンを含む)
sessions/browser/parts/panelPart.tsパネルのパーツ
sessions/browser/parts/projectBarPart.tsプロジェクトバーのパーツ(フォルダー項目、アイコンのカスタマイズ)
sessions/contrib/configuration/browser/configuration.contribution.tsモーダルエディターのオーバーレイ用に workbench.editor.useModal を 'all' に設定
sessions/contrib/sessions/browser/sessionsTitleBarWidget.tsタイトルバーウィジェットとエージェント選択
sessions/contrib/chat/browser/runScriptAction.tsタイトルバー用のスクリプト実行分割ボタン
sessions/contrib/accountMenu/browser/account.contribution.tsサイドバーフッター用のアカウントウィジェット
sessions/electron-browser/parts/titlebarPart.tsデスクトップ(Electron)のタイトルバーのパーツ

5. 変更のテスト

レイアウトコードを変更した後は、次の項目を確認してください。

  1. VS Code - Build タスクでビルドがエラーなく完了することを確認します
  2. グリッド構造が仕様書の視覚的な表現と一致していることを確認します
  3. パーツの表示切り替え(表示/非表示/最大化)が正しく動作することを確認します
  4. エディターが ModalEditorPart オーバーレイで開き、適切に閉じることをテストします
  5. アカウントウィジェットを含むサイドバーフッターが表示されることを確認します

コメント