Description
セッション中にエージェントが行ったファイル変更を VS Code のエディタ領域に専用の WebviewPanel タブとして表示し、GitHub PR レビューのようにインラインコメント(範囲選択対応)を付けて、レビューをチャットに一括送信する機能を追加する。
差分はリアルタイムで更新され、コメントが付いた行が変更された場合は GitHub と同様に「Outdated」として扱う。
Motivation
現在、エージェントのファイル変更に対するフィードバックはチャット入力欄に手動でテキストを記述して送信するしかない。変更が複数ファイルにまたがる場合、どのファイルのどの行についてのコメントかを伝えるのが煩雑になる。GitHub の PR レビューのように特定行にコメントを付けて一括送信できれば、フィードバックの精度と効率が大幅に向上する。
Proposed Solution
アーキテクチャ
Extension Host から WebviewPanel に直接 SSE イベントを転送する(チャット Webview と同じパターン)。Extension Host → Webview の一方通行アーキテクチャを維持する。
OpenCode サーバー → Extension Host → チャット Webview
→ レビュー Panel(直接イベント転送)
レビュータブの起動(2つのエントリーポイント)
A. 入力エリアからの全差分レビュー
- チャット入力欄の上部ツールバーに「Diff Review」アイコンボタンを配置(差分がある場合のみ表示)
- クリックで VS Code のエディタ領域にレビュー専用 WebviewPanel タブを開く
- セッションの全ファイル変更を表示
B. FileChangesHeader からのファイル単位レビュー
- FileChangesHeader の各ファイル行に「Review」ボタンを追加
- クリックで対象ファイルにフォーカスした状態のレビュータブを開く(他ファイルもスクロールで閲覧可能)
差分のリアルタイム更新
- Extension Host が
session.diff イベントをレビューパネルにも転送
- diff が更新されるたびにレビューパネルの表示をリアルタイムで反映
- 初回表示時は
getSessionDiff API で現時点の差分を取得
差分の表示
- ファイルツリー(左サイド)+ 差分ビュー(メイン領域)のレイアウト
- 全ファイル縦並び表示モードをデフォルトとする
- 行番号付き unified diff 形式
GitHub スタイルのインラインコメント
- 単一行コメント: 差分行の行番号をクリック → その行の下にコメント入力欄が展開
- 範囲選択コメント: 複数行をドラッグ選択 → 選択範囲の末尾にコメント入力欄が展開
- 「Add comment」「Cancel」ボタン付き
- コメント追加済みの行にはコメントバッジ表示(編集・削除可能)
Outdated コメント(diff リアルタイム更新との両立)
- コメントが付いた行の内容が diff 更新で変更された場合、そのコメントを 「Outdated」マーク付きで折りたたみ表示
- コメント自体は消えない(レビュー内容は保持)
- Submit Review 時に Outdated コメントも含めて送信(Outdated であることを明示)
レビューの一括送信(Submit Review)
- レビュータブ下部に Submit Review エリア(コメント数バッジ・総合コメント入力欄・送信ボタン)
- 全コメントをフォーマットして 1 つのチャットメッセージとして送信
- 送信後タブは自動クローズ
送信フォーマット例:
## Code Review
### src/handler.ts (L42)
この変数名はもう少し具体的にした方がいい
### src/utils.ts (L15-L20)
エラーハンドリングが足りない
### src/old-file.ts (L8) [Outdated]
この関数は不要では?
### 総合コメント
全体的に良いが、上記の点を修正してほしい
コメントの永続化
Acceptance Criteria
関連リソース
- 外部仕様書:
.ktmage/project/external-spec/diff-review.md
Description
セッション中にエージェントが行ったファイル変更を VS Code のエディタ領域に専用の WebviewPanel タブとして表示し、GitHub PR レビューのようにインラインコメント(範囲選択対応)を付けて、レビューをチャットに一括送信する機能を追加する。
差分はリアルタイムで更新され、コメントが付いた行が変更された場合は GitHub と同様に「Outdated」として扱う。
Motivation
現在、エージェントのファイル変更に対するフィードバックはチャット入力欄に手動でテキストを記述して送信するしかない。変更が複数ファイルにまたがる場合、どのファイルのどの行についてのコメントかを伝えるのが煩雑になる。GitHub の PR レビューのように特定行にコメントを付けて一括送信できれば、フィードバックの精度と効率が大幅に向上する。
Proposed Solution
アーキテクチャ
Extension Host から WebviewPanel に直接 SSE イベントを転送する(チャット Webview と同じパターン)。Extension Host → Webview の一方通行アーキテクチャを維持する。
レビュータブの起動(2つのエントリーポイント)
A. 入力エリアからの全差分レビュー
B. FileChangesHeader からのファイル単位レビュー
差分のリアルタイム更新
session.diffイベントをレビューパネルにも転送getSessionDiffAPI で現時点の差分を取得差分の表示
GitHub スタイルのインラインコメント
Outdated コメント(diff リアルタイム更新との両立)
レビューの一括送信(Submit Review)
送信フォーマット例:
コメントの永続化
Acceptance Criteria
関連リソース
.ktmage/project/external-spec/diff-review.md