Render fullscreen reviews with Pierre file tree

Author: Waishnav

package-lock.json

@@ -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",

package.json

@@ -1,8 +1,15 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { createRoot } from "react-dom/client";
-import { parsePatchFiles, type FileDiffMetadata, type FileDiffOptions } from "@pierre/diffs";
+import type { FileDiffOptions } from "@pierre/diffs";
 import { FileDiff } from "@pierre/diffs/react";
+import type { GitStatusEntry } from "@pierre/trees";
+import { FileTree, useFileTree } from "@pierre/trees/react";
 import type { HostContext, ToolResultCard } from "./card-types.js";
+import {
+  buildReviewFileEntries,
+  initialReviewPath,
+  type ReviewFileEntry,
+} from "./review-model.js";
 
 type ThemeType = "light" | "dark";
 
@@ -41,27 +48,30 @@ function ReviewPayload({
   hostContext,
   errorMessage = null,
   visibleFileCount,
+  presentation = "inline",
 }: PayloadRendererOptions) {
-  const patch = card.payload?.patch;
   const themeType: ThemeType = hostContext?.theme === "light" ? "light" : "dark";
-  const files = useMemo(() => parseFiles(patch), [patch]);
-  const visibleFiles = typeof visibleFileCount === "number"
-    ? files.slice(0, visibleFileCount)
-    : files;
+  const entries = useMemo(() => buildReviewFileEntries(card), [card]);
   const [openFiles, setOpenFiles] = useState(() => new Set<string>());
 
   if (errorMessage) return <StatusLine message={errorMessage} tone="error" />;
-  if (!patch) return <StatusLine message="Diff payload is not available." />;
-  if (files.length === 0) return <StatusLine message="No diff hunks to review." />;
+  if (!card.payload?.patch) return <StatusLine message="Diff payload is not available." />;
+  if (entries.length === 0) return <StatusLine message="No diff hunks to review." />;
 
   const options = diffOptions(themeType);
+  if (presentation === "fullscreen") {
+    return <FullscreenReview entries={entries} options={options} />;
+  }
+
+  const visibleEntries = typeof visibleFileCount === "number"
+    ? entries.slice(0, visibleFileCount)
+    : entries;
 
   return (
     <div className="review-diff">
       <div className="review-diff-files">
-        {visibleFiles.map((fileDiff, index) => {
-          const key = fileDiff.cacheKey ?? `${fileDiff.prevName ?? ""}->${fileDiff.name}-${index}`;
-          const stats = diffStats(fileDiff);
+        {visibleEntries.map((entry) => {
+          const key = entry.path;
           const isOpen = openFiles.has(key);
 
           return (
@@ -80,15 +90,13 @@ function ReviewPayload({
                   setOpenFiles(next);
                 }}
               >
-                <span className="review-diff-file-name">{fileDiff.name}</span>
+                <span className="review-diff-file-name">{entry.path}</span>
                 <span className="review-diff-file-stats">
-                  <span className="add">+{stats.additions}</span>
-                  <span className="remove">-{stats.removals}</span>
+                  <span className="add">+{entry.additions}</span>
+                  <span className="remove">-{entry.removals}</span>
                 </span>
               </button>
-              {isOpen ? (
-                <FileDiff fileDiff={fileDiff} options={options} className="pierre-diff" />
-              ) : null}
+              {isOpen ? <ReviewFileBody entry={entry} options={options} /> : null}
             </div>
           );
         })}
@@ -97,19 +105,116 @@ function ReviewPayload({
   );
 }
 
-function parseFiles(patch: string | undefined): FileDiffMetadata[] {
-  if (!patch) return [];
-  return parsePatchFiles(patch, "review", true).flatMap((parsedPatch) => parsedPatch.files);
+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>
+  );
 }
 
-function diffStats(fileDiff: FileDiffMetadata): { additions: number; removals: number } {
-  return fileDiff.hunks.reduce(
-    (stats, hunk) => ({
-      additions: stats.additions + hunk.additionLines,
-      removals: stats.removals + hunk.deletionLines,
-    }),
-    { additions: 0, removals: 0 },
+function ReviewFileTree({
+  entries,
+  selectedPath,
+  onSelect,
+}: {
+  entries: ReviewFileEntry[];
+  selectedPath?: string;
+  onSelect(path: string): void;
+}) {
+  const paths = useMemo(() => entries.map((entry) => entry.path), [entries]);
+  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) => paths.includes(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" />;
+}
+
+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" />;
 }
 
 function diffOptions(themeType: ThemeType): FileDiffOptions<undefined> {