GitLab Review Workspace

GitLabのMerge Requestを、VS Codeから離れずに確認・レビューするための拡張機能です。変更ファイル、コミット、ディスカッション、ローカル編集を1つのレビュー環境にまとめます。

[!NOTE] GitLab Review Workspaceはコミュニティ製の非公式拡張です。GitLab Inc.による公式製品ではありません。

主な機能

• Activity BarのGitLab ReviewからMRを選択・更新
• 変更ファイルと差分統計をツリー表示
• MR全体またはコミット単位で変更を確認
• 新しいpushを検出し、前回のheadから追加された変更だけを比較
• コミット差分を閲覧し、現在のMR差分へ戻ってコメント
• 差分行のクリック・ドラッグ選択からディスカッションを作成
• VS Code標準diff editorでMR差分を開き、Comment APIからディスカッションを作成・返信
• コメントの返信、編集、Resolve/Reopen
• Changed filesをパスと状態（新規push・未解決・ローカル編集）で絞り込み
• MR内のレビューコメントを本文・投稿者・ファイルパスで検索
• GitLab Todo通知から対象MRへ移動
• ソース/ターゲットブランチのファイルツリーを閲覧
• レビュー用のローカル編集を保存し、MR差分と区別して表示
• 通信失敗時にも直近のレビューを表示する限定キャッシュ

画面構成

• My work: 自分の作業一覧からレビューするMRを選択
• Sidebar: 選択したMRの変更ファイル、コミット、レビュースレッドを移動
• VS Code diff editor: 主なレビュー画面。標準のコードナビゲーションとComment APIによるインラインディスカッション
• Review file panel（Legacy Viewer）: MR差分・コミット差分、ローカル差分、インラインディスカッション、ローカル編集
• Branch file editor: GitLab上のブランチファイルを読み取り専用で表示

サイドバーの変更ファイルまたはレビュースレッドを選ぶと、標準diff editorで対象ファイルを開き、スレッドの行までスクロールします。従来のReview file panelも残してあり、GitLab Review: Open Review File in Legacy Viewerから開けます。

標準diff editorのコメント入力ではMarkdownを利用できます。画像は入力欄への貼り付けでGitLabへアップロードしてMarkdownを挿入するほか、Attach Image and Commentでファイルを選択し、現在の本文と画像をまとめて投稿できます。

異なるMRや差分版の入力を保持していて貼り付け先を確定できない場合、画像貼り付けは無効になります。その場合は投稿先の入力欄でAttach Image and Commentを使用してください。

表示中の差分は接続先・MR・SHAに固定されます。接続先や差分が変わった場合は古い入力からの投稿を止め、本文を残します。過去コミットは閲覧用で、現在のMR差分を開いてから新規コメントを作成します。レビュー進捗の割合や確認済み管理は現在の画面には表示しません。

旧バージョンのホスト未分離キャッシュは自動移行せず、MRを再取得します。保存済みの旧ローカル編集は削除しません。GitLab Review: Recover Local Drafts from Earlier Versionsで内容を開き、対象を確認してコピーできます。

必要環境

• VS Code 1.97以降
• GitLab CLI (glab)
• glab auth login済みのGitLabアカウント

拡張機能はGitLabトークンを保存しません。認証はglabとOSの資格情報ストアに委ねます。

インストール

Visual Studio MarketplaceからGitLab Review Workspaceを検索してインストールします。

コマンドラインからインストールする場合は次を実行します。

code --install-extension ota-takeru.gitlab-review-workspace

GitHub Releasesで配布している.vsixを使う場合は、VS CodeのExtensionsビュー右上の…からInstall from VSIX...を選択してください。

インストール後、glab auth loginを実行してからActivity BarのGitLab Reviewを開いてください。

セットアップ

開発環境をセットアップする場合は次を実行します。

npm ci
npm run check
npm test

VS Codeでこのフォルダを開き、Run and DebugからRun Extensionを実行します。起動したExtension Development HostでActivity BarのGitLab Reviewを開いてください。

glabが未ログインの場合は、サイドバーのSign inから統合ターミナルでログインを開始できます。

設定

保存済みの選択もprojectId・mergeRequestIidの指定もない場合は、Open My workから対象MRを選択します。

gitlabReview.gitlabBaseUrlを設定しない場合は、glab auth status --allで認証済みのホストを自動検出します。複数のホストがある場合は、ワークスペースのGitリモートと一致するホストを優先します。必要に応じて、https://gitlab.example.com:8443/gitlabのようなURLを明示設定することもできます。

サポート

不具合報告・機能要望はGitHub Issuesへお願いします。報告時にアクセストークン、Authorizationヘッダー、認証情報、非公開MRの内容を貼り付けないでください。

詳細はSUPPORT.mdを参照してください。

開発コマンド

out/とmedia/webview/のJavaScript/CSSは生成物です。直接編集せず、src/またはwebview/を変更して再ビルドしてください。

プロジェクト構成

src/
  extension.ts            VS Code拡張のエントリーポイント
  reviewStore.ts          MR状態、更新、キャッシュ、楽観的更新
  gitlabApi.ts            glab経由のGitLab APIアクセス
  sidebarProvider.ts      Sidebar Webviewのホスト
  reviewFilePanel.ts      レビューファイルパネルのホスト
  nativeReviewEditor.ts   VS Code標準diffとComment APIのホスト
  commitDiffPanel.ts      コミット差分パネルのホスト
  webviewProtocol.ts      HostとWebview間のメッセージ契約
  test/                   Nodeテスト
webview/
  sidebar/                Sidebar Vueアプリ
  review-file/            レビュー差分Vueアプリ
  commit-diff/            コミット差分Vueアプリ
  common/                 共通コンポーネント、テーマ、VS Code APIラッパー
media/
  gitlab-review.svg       Activity Barアイコン
  gitlab-review.png       Marketplaceアイコン
  webview/                Vite生成物
docs/
  DEVELOPMENT.md          開発・デバッグ・検証手順
  UI_DESIGN.md            UI設計契約と視覚QA基準
  CODEX_TASKS.md          新規Codexチャット用の依頼テンプレート

アーキテクチャ

flowchart LR
  VSCode["VS Code commands / views"] --> Host["Extension Host"]
  Host --> Store["ReviewStore"]
  Store --> API["GitLabReviewClient"]
  API --> Glab["glab CLI"]
  Glab --> GitLab["GitLab API"]
  Store --> Protocol["Typed webview messages"]
  Store --> Native["VS Code diff / Comment API"]
  Protocol --> Sidebar["Sidebar Vue app"]
  Protocol --> Review["Review file Vue app (MR / commit diff)"]

HostとWebview間ではsrc/webviewProtocol.tsの型付きメッセージのみを使います。HTML断片や認証情報をWebviewへ渡さないでください。

Codexで作業する場合

リポジトリ直下のAGENTS.mdは、新規Codexチャットで自動的に読み込まれる永続ガイダンスです。タスク固有の目的、再現手順、制約、完了条件だけを新しいチャットで追加してください。

依頼文の例はdocs/CODEX_TASKS.mdにあります。UI変更ではdocs/ui/project-profile.yaml、docs/ui/visual-quality.md、該当する画面ブリーフを読み、$ui-reviewによる変更前の独立評価、上位3件までの修正、npm run ui:captureが生成するデザインボードでの同条件比較を依頼してください。

詳細ドキュメント

• 開発・検証ガイド
• UIデザイン契約
• プロジェクトUIプロファイル
• 視覚品質契約
• 画面別UIブリーフ
• Storybook・エージェントUI検証
• Codexタスクテンプレート
• 変更履歴