Skip to content

[Feature] セッション差分レビュー — GitHub スタイルのインラインコメント付きコードレビュー #65

@ktmage

Description

@ktmage

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

  • レビュー WebviewPanel が VS Code エディタ領域にタブとして開くこと
  • Extension Host から直接 SSE イベントを受け取り、差分がリアルタイムで更新されること
  • 単一行・範囲選択の両方でインラインコメントを追加できること
  • diff 更新でコメント付き行が変わった場合、Outdated として折りたたみ表示されること
  • Submit Review で全コメントがフォーマットされてチャットに送信されること
  • ビルド・テスト・リンタが全てパスすること

関連リソース

  • 外部仕様書: .ktmage/project/external-spec/diff-review.md

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions