Add fullscreen review panel for show_changes

package.json

@@ -28,7 +28,7 @@
     "dev": "node scripts/dev-server.mjs",
     "postinstall": "node scripts/fix-node-pty-permissions.mjs",
     "start": "node dist/cli.js serve",
-    "test": "tsx src/config.test.ts && tsx src/ui/card-types.test.ts && tsx src/ui/patch-display.test.ts && tsx src/ui/tool-display.test.ts && tsx src/apply-patch.test.ts && tsx src/process-platform.test.ts && tsx src/process-sessions.test.ts && tsx src/local-agent-runtime.test.ts && tsx src/local-agent-adapters.test.ts && tsx src/local-agent-availability.test.ts && tsx src/local-agent-profiles.test.ts && tsx src/local-agent-targets.test.ts && tsx src/local-agent-store.test.ts && tsx src/roots.test.ts && tsx src/skills.test.ts && tsx src/workspaces.test.ts && tsx src/review-checkpoints.test.ts && tsx src/oauth-store.test.ts && tsx src/cli.test.ts",
+    "test": "tsx src/config.test.ts && tsx src/ui/card-types.test.ts && tsx src/ui/patch-display.test.ts && tsx src/ui/tool-display.test.ts && tsx src/ui/review-model.test.ts && tsx src/apply-patch.test.ts && tsx src/process-platform.test.ts && tsx src/process-sessions.test.ts && tsx src/local-agent-runtime.test.ts && tsx src/local-agent-adapters.test.ts && tsx src/local-agent-availability.test.ts && tsx src/local-agent-profiles.test.ts && tsx src/local-agent-targets.test.ts && tsx src/local-agent-store.test.ts && tsx src/roots.test.ts && tsx src/skills.test.ts && tsx src/workspaces.test.ts && tsx src/review-checkpoints.test.ts && tsx src/oauth-store.test.ts && tsx src/cli.test.ts",
     "typecheck": "tsc -p tsconfig.json --noEmit"
   },
   "keywords": [],
@@ -44,6 +44,7 @@
     "@openai/codex-sdk": "^0.142.5",
     "@opencode-ai/sdk": "^1.17.13",
     "@pierre/diffs": "^1.2.5",
+    "@pierre/trees": "1.0.0-beta.5",
     "better-sqlite3": "^12.10.0",
     "diff": "^8.0.3",
     "drizzle-orm": "^0.45.2",

src/ui/review-file-body.tsx

@@ -0,0 +1,20 @@
+import type { FileDiffOptions } from "@pierre/diffs";
+import { FileDiff } from "@pierre/diffs/react";
+import type { ReviewFileEntry } from "./review-model.js";
+import { StatusLine } from "./review-status-line.js";
+
+export function ReviewFileBody({
+  entry,
+  options,
+}: {
+  entry: ReviewFileEntry;
+  options: FileDiffOptions<undefined>;
+}) {
+  if (!entry.fileDiff) {
+    return (
+      <StatusLine message="This file changed without a textual diff that can be rendered." />
+    );
+  }
+
+  return <FileDiff fileDiff={entry.fileDiff} options={options} className="pierre-diff" />;
+}

src/ui/review-file-tree.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useMemo } from "react";
+import type { GitStatusEntry } from "@pierre/trees";
+import { FileTree, useFileTree } from "@pierre/trees/react";
+import type { ReviewFileEntry } from "./review-model.js";
+
+export function ReviewFileTree({
+  entries,
+  selectedPath,
+  onSelect,
+}: {
+  entries: ReviewFileEntry[];
+  selectedPath?: string;
+  onSelect(path: string): void;
+}) {
+  const paths = useMemo(() => entries.map((entry) => entry.path), [entries]);
+  const pathSet = useMemo(() => new Set(paths), [paths]);
+  const gitStatus = useMemo<GitStatusEntry[]>(
+    () => entries.map((entry) => ({ path: entry.path, status: entry.status })),
+    [entries],
+  );
+  const { model } = useFileTree({
+    paths,
+    gitStatus,
+    flattenEmptyDirectories: true,
+    initialExpansion: "open",
+    search: paths.length > 8,
+    onSelectionChange(selectedPaths) {
+      const path = selectedPaths.find((candidate) => pathSet.has(candidate));
+      if (path) onSelect(path);
+    },
+  });
+
+  useEffect(() => {
+    if (!selectedPath) return;
+    for (const path of model.getSelectedPaths()) {
+      if (path !== selectedPath) model.getItem(path)?.deselect();
+    }
+    model.getItem(selectedPath)?.select();
+    model.scrollToPath(selectedPath, { focus: false });
+  }, [model, selectedPath]);
+
+  return <FileTree model={model} className="review-file-tree" />;
+}

src/ui/review-fullscreen.tsx

@@ -0,0 +1,67 @@
+import { useEffect, useState } from "react";
+import type { FileDiffOptions } from "@pierre/diffs";
+import { ReviewFileBody } from "./review-file-body.js";
+import { ReviewFileTree } from "./review-file-tree.js";
+import {
+  initialReviewPath,
+  type ReviewFileEntry,
+} from "./review-model.js";
+import { StatusLine } from "./review-status-line.js";
+
+export function FullscreenReview({
+  entries,
+  options,
+}: {
+  entries: ReviewFileEntry[];
+  options: FileDiffOptions<undefined>;
+}) {
+  const [selectedPath, setSelectedPath] = useState(() => initialReviewPath(entries));
+
+  useEffect(() => {
+    setSelectedPath((currentPath) => initialReviewPath(entries, currentPath));
+  }, [entries]);
+
+  const selectedEntry = entries.find((entry) => entry.path === selectedPath) ?? entries[0];
+
+  return (
+    <div className="review-workspace">
+      <section className="review-selected-file">
+        <header className="review-selected-file-header">
+          <div className="review-selected-file-title">
+            <strong title={selectedEntry?.path}>{selectedEntry?.path}</strong>
+            {selectedEntry?.previousPath && selectedEntry.previousPath !== selectedEntry.path ? (
+              <span title={selectedEntry.previousPath}>from {selectedEntry.previousPath}</span>
+            ) : null}
+          </div>
+          {selectedEntry ? (
+            <span className="review-diff-file-stats" aria-label="Selected file diff statistics">
+              <span className="add">+{selectedEntry.additions}</span>
+              <span className="remove">-{selectedEntry.removals}</span>
+            </span>
+          ) : null}
+        </header>
+        <div className="review-selected-file-body">
+          {selectedEntry ? (
+            <ReviewFileBody entry={selectedEntry} options={options} />
+          ) : (
+            <StatusLine message="Select a changed file to review it." />
+          )}
+        </div>
+      </section>
+
+      <aside className="review-file-tree-panel" aria-label="Changed files">
+        <div className="review-file-tree-header">
+          <strong>Changed files</strong>
+          <span>{entries.length}</span>
+        </div>
+        <div className="review-file-tree-body">
+          <ReviewFileTree
+            entries={entries}
+            selectedPath={selectedEntry?.path}
+            onSelect={setSelectedPath}
+          />
+        </div>
+      </aside>
+    </div>
+  );
+}

src/ui/review-model.test.ts

@@ -0,0 +1,79 @@
+import assert from "node:assert/strict";
+import {
+  buildReviewFileEntries,
+  initialReviewPath,
+  reviewFileStatus,
+} from "./review-model.js";
+
+const patch = [
+  "diff --git a/src/old.ts b/src/new.ts",
+  "similarity index 80%",
+  "rename from src/old.ts",
+  "rename to src/new.ts",
+  "index 1111111..2222222 100644",
+  "--- a/src/old.ts",
+  "+++ b/src/new.ts",
+  "@@ -1 +1 @@",
+  "-old value",
+  "+new value",
+  "diff --git a/README.md b/README.md",
+  "index 3333333..4444444 100644",
+  "--- a/README.md",
+  "+++ b/README.md",
+  "@@ -1 +1,2 @@",
+  " title",
+  "+details",
+  "",
+].join("\n");
+
+const entries = buildReviewFileEntries({
+  tool: "show_changes",
+  files: [
+    {
+      path: "src/new.ts",
+      previousPath: "src/old.ts",
+      type: "rename-changed",
+      additions: 1,
+      removals: 1,
+    },
+  ],
+  payload: { patch },
+});
+
+assert.equal(entries.length, 2);
+assert.deepEqual(
+  entries.map(({ path, previousPath, additions, removals, status }) => ({
+    path,
+    previousPath,
+    additions,
+    removals,
+    status,
+  })),
+  [
+    {
+      path: "src/new.ts",
+      previousPath: "src/old.ts",
+      additions: 1,
+      removals: 1,
+      status: "renamed",
+    },
+    {
+      path: "README.md",
+      previousPath: undefined,
+      additions: 1,
+      removals: 0,
+      status: "modified",
+    },
+  ],
+);
+assert.ok(entries.every((entry) => entry.fileDiff));
+
+assert.equal(reviewFileStatus("new"), "added");
+assert.equal(reviewFileStatus("deleted"), "deleted");
+assert.equal(reviewFileStatus("rename-pure"), "renamed");
+assert.equal(reviewFileStatus("change"), "modified");
+
+assert.equal(initialReviewPath(entries), "src/new.ts");
+assert.equal(initialReviewPath(entries, "README.md"), "README.md");
+assert.equal(initialReviewPath(entries, "missing.ts"), "src/new.ts");
+assert.equal(initialReviewPath([]), undefined);