mergie-cli 0.1.0

package/src/web/components/RangeSelector.tsx

@@ -0,0 +1,141 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { toInclusive, toRange } from "@/web/lib/rangeMap.ts";
+import { rangeCoverageLabel } from "@/web/lib/rangeCoverage.ts";
+import { formatCommitTime } from "@/web/lib/time.ts";
+import { useEscToClose } from "@/web/lib/useEscToClose.ts";
+import { isRangeReviewed, isStale } from "@/domain/ranges.ts";
+import { CommitRail } from "./CommitRail.tsx";
+import { CheckIcon, ChevronDownIcon, ChevronRightIcon } from "./Icons.tsx";
+import type { CommitInfo } from "@/services/git.ts";
+import type { ReviewedRangeRow } from "@/db/repositories/reviewedRanges.ts";
+import type { RangeSel } from "../state/useReview.ts";
+
+/**
+ * Commit-range selector. A compact summary chip shows the current range as a
+ * coverage label ("All N commits" / "K of N commits") plus the newest commit's
+ * subject; hovering the chip reveals the SHA range. Clicking it opens a panel
+ * with a visual commit rail for changing the selection (applied live). The
+ * panel closes on outside-click or Esc, keeping the current selection.
+ * Presented inclusively (first..last commit included) and mapped internally to
+ * the exclusive baseline→end range.
+ */
+export function RangeSelector(props: {
+  baselineSha: string | null;
+  commits: CommitInfo[];
+  range: RangeSel | null;
+  onChange: (r: RangeSel) => void;
+  onMarkReviewed: () => void;
+  onUnmarkReviewed: () => void;
+  reviewedRanges: ReviewedRangeRow[];
+}): React.JSX.Element {
+  const { baselineSha, commits, range, onChange, onMarkReviewed, onUnmarkReviewed, reviewedRanges } = props;
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const onEsc = useCallback(() => setOpen((o) => (o ? false : o)), []);
+  useEscToClose(onEsc);
+
+  // Close when clicking anywhere outside this selector (chip + panel). Bound
+  // only while open; a pointerdown listener fires before the click, so a
+  // selection inside the panel is never swallowed.
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (e: PointerEvent): void => {
+      const target: Node | null = e.target instanceof Node ? e.target : null;
+      if (target && rootRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [open]);
+
+  if (!range || baselineSha === null || commits.length === 0) {
+    return <div className="range-selector">Loading range…</div>;
+  }
+
+  const shas: string[] = commits.map((c) => c.sha);
+  const sel = toInclusive(range, shas, baselineSha);
+  const fromC = commits[sel.fromIndex];
+  const toC = commits[sel.toIndex];
+  if (!fromC || !toC) return <div className="range-selector">Loading range…</div>;
+
+  const count: number = sel.toIndex - sel.fromIndex + 1;
+  const coverage: string = rangeCoverageLabel({ fromIndex: sel.fromIndex, toIndex: sel.toIndex, total: commits.length });
+  const shaRange = `${fromC.shortSha} → ${toC.shortSha}`;
+  const alreadyReviewed: boolean = isRangeReviewed(
+    { startSha: range.start, endSha: range.end },
+    reviewedRanges.map((r) => ({ startSha: r.startSha, endSha: r.endSha, createdAt: r.createdAt })),
+  );
+  const select = (fromIndex: number, toIndex: number): void =>
+    onChange(toRange({ fromIndex, toIndex }, shas, baselineSha));
+
+  return (
+    <div className="range-selector" ref={rootRef}>
+      <button
+        type="button"
+        className="range-chip"
+        title={`${shaRange}\n${toC.subject}`}
+        onClick={() => setOpen((o) => !o)}
+      >
+        <span className="range-chip-coverage">{coverage}</span>
+        <span className="range-chip-sep">·</span>
+        <span className="range-chip-subject">{toC.subject}</span>
+        <span className="chip-caret">{open ? <ChevronDownIcon size={13} /> : <ChevronRightIcon size={13} />}</span>
+      </button>
+
+      {open && (
+        <div className="range-panel">
+          <CommitRail commits={commits} fromIndex={sel.fromIndex} toIndex={sel.toIndex} onSelect={select} />
+          <p className="range-caption">
+            {count === 1 ? (
+              <>
+                This commit: <span className="range-caption-subject">“{toC.subject}”</span>{" "}
+                ({toC.authorName}, {formatCommitTime(toC.isoDate)}) <code>{toC.shortSha}</code>.
+              </>
+            ) : (
+              <>
+                From <span className="range-caption-subject">“{fromC.subject}”</span> ({fromC.authorName},{" "}
+                {formatCommitTime(fromC.isoDate)}) <code>{fromC.shortSha}</code>{" "}
+                to <span className="range-caption-subject">“{toC.subject}”</span>{" "}
+                ({formatCommitTime(toC.isoDate)}) <code>{toC.shortSha}</code>.
+              </>
+            )}
+            {sel.fromIndex === 0
+              ? " Diff is from the start of the PR."
+              : ` Diff shows changes made after ${commits[sel.fromIndex - 1]?.shortSha ?? "the baseline"}.`}
+          </p>
+          <div className="range-panel-actions">
+            {alreadyReviewed ? (
+              <button type="button" className="range-reviewed-badge" title="Reviewed — click to un-mark this range" onClick={onUnmarkReviewed}>
+                <CheckIcon size={14} /> Range reviewed
+              </button>
+            ) : (
+              <button type="button" className="btn btn-sm" onClick={onMarkReviewed}>Mark range reviewed</button>
+            )}
+            <span className="reviewed-count">{reviewedRanges.length} reviewed</span>
+          </div>
+          {reviewedRanges.length > 0 && (
+            <ul className="reviewed-list">
+              {reviewedRanges.map((r) => {
+                const stale: boolean = isStale({ startSha: r.startSha, endSha: r.endSha }, { baselineSha, commits: shas });
+                return (
+                  <li key={`${r.startSha}-${r.endSha}`}>
+                    <button
+                      type="button"
+                      className="reviewed-range"
+                      disabled={stale}
+                      title={stale ? "A commit in this range no longer exists (force-push/rebase)" : "Select this reviewed range"}
+                      onClick={() => onChange({ start: r.startSha, end: r.endSha })}
+                    >
+                      <code>{r.startSha.slice(0, 7)}</code> → <code>{r.endSha.slice(0, 7)}</code>
+                    </button>
+                    {stale && <span className="badge stale">stale</span>}
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/web/components/ResultsList.tsx

@@ -0,0 +1,159 @@
+import { useEffect, useRef, useState } from "react";
+import { CodePreview } from "./CodePreview.tsx";
+import { FileIcon, InfoIcon } from "./Icons.tsx";
+import { Tooltip } from "./Tooltip.tsx";
+import { filterCodeResults, type CodeResultFilters } from "@/web/lib/filterCodeResults.ts";
+import { dedupeResults } from "@/web/lib/dedupeResults.ts";
+import { resultCountLabel } from "@/web/lib/resultCountLabel.ts";
+import type { CodeResult } from "@/services/symbols.ts";
+
+/** A location to open in a file view. */
+export interface OpenLocation {
+  /** Repo-relative file path. */
+  path: string;
+  /** 1-based line to center on. */
+  line: number;
+  /** Commit SHA the result was found at. */
+  sha: string;
+}
+
+/** Header context describing what produced the results. */
+export interface ResultsHeader {
+  /** Human label of the action, e.g. "Definition", "Usages", "Search". */
+  op: string;
+  /** The looked-up term / query. */
+  term: string;
+  /** Optional scope label (checkout side, e.g. "head"). */
+  scope?: string;
+  /** The file the lookup was scoped to ("" / undefined = repo-wide). */
+  scopeFile?: string;
+}
+
+/** Longer explanation shown in the usages-accuracy tooltip. */
+const USAGES_CAVEAT =
+  "Usages are found by scanning for references and may be incomplete — re-exports, dynamic calls, and references in other files can be missed. Treat the list as a starting point, not an exhaustive set.";
+
+/**
+ * The shared results surface: a header, a filters row, and a keyboard-navigable
+ * list of {@link CodePreview} items each with a "View file" action. Results are
+ * deduped by `(path, line)` (scopes joined) before display, then narrowed by
+ * the active filters with a live count. Handles empty / loading / error states,
+ * including a bad-regex message. Reused by the rail Search tab and (Phase D) the
+ * navigator results frame.
+ */
+export function ResultsList(props: {
+  /** The raw results to show. */
+  results: CodeResult[];
+  /** True while a lookup is running. */
+  loading: boolean;
+  /** A user-facing error, or null. */
+  error: string | null;
+  /** The active filters (controlled). */
+  filters: CodeResultFilters;
+  /** Update the filters. */
+  onFilters: (f: CodeResultFilters) => void;
+  /** The SHA results were found at (passed through to `onOpen`). */
+  sha: string;
+  /** Header context. */
+  header: ResultsHeader;
+  /** Open a result's location in a file view. */
+  onOpen: (loc: OpenLocation) => void;
+  /** Dismiss the surface (Esc). */
+  onClose: () => void;
+  /** Re-run the lookup repo-wide (shown as "search everywhere" when scoped). */
+  onBroaden?: () => void;
+}): React.JSX.Element {
+  const { results, loading, error, filters, onFilters, sha, header, onOpen, onClose, onBroaden } = props;
+  const deduped: CodeResult[] = dedupeResults(results);
+  const shown: CodeResult[] = filterCodeResults(deduped, filters);
+  const [focus, setFocus] = useState(0);
+  const listRef = useRef<HTMLUListElement>(null);
+
+  // Keep focus in range as the filtered list changes.
+  useEffect(() => { setFocus((f) => Math.min(f, Math.max(0, shown.length - 1))); }, [shown.length]);
+
+  const open = (r: CodeResult): void => onOpen({ path: r.path, line: r.line, sha });
+
+  const onKey = (e: React.KeyboardEvent): void => {
+    if (e.key === "ArrowDown") { e.preventDefault(); setFocus((f) => Math.min(f + 1, shown.length - 1)); }
+    else if (e.key === "ArrowUp") { e.preventDefault(); setFocus((f) => Math.max(f - 1, 0)); }
+    else if (e.key === "Enter") { const r = shown[focus]; if (r) open(r); }
+    else if (e.key === "Escape") { onClose(); }
+  };
+
+  return (
+    <div className="results-list" onKeyDown={onKey} tabIndex={-1}>
+      <header className="results-header">
+        <strong>{header.op}</strong>
+        <code>{header.term}</code>
+        {header.scope && <span className="symbol-side-tag">{header.scope}</span>}
+        {header.scopeFile && (
+          <span className="results-scope">
+            in <code>{header.scopeFile}</code>
+            {onBroaden && (
+              <button type="button" className="btn btn-ghost btn-sm" onClick={onBroaden}>Search everywhere</button>
+            )}
+          </span>
+        )}
+        <span className="results-count">{resultCountLabel(deduped.length, shown.length)}</span>
+      </header>
+      {header.op === "Usages" && (
+        <p className="results-note">
+          <Tooltip label={USAGES_CAVEAT} placement="bottom">
+            <button type="button" className="results-note-info" aria-label="About usages accuracy"><InfoIcon size={13} /></button>
+          </Tooltip>
+          Usages are best-effort — some references may be missing.
+        </p>
+      )}
+      <div className="results-filters">
+        <input
+          type="text"
+          placeholder="Filter by path…"
+          value={filters.pathText ?? ""}
+          onChange={(e) => onFilters({ ...filters, pathText: e.target.value })}
+        />
+        <input
+          type="text"
+          placeholder="Filter by code…"
+          value={filters.codeText ?? ""}
+          onChange={(e) => onFilters({ ...filters, codeText: e.target.value })}
+        />
+        <label className="results-toggle">
+          <input
+            type="checkbox"
+            checked={filters.excludeTestsGenerated ?? false}
+            onChange={(e) => onFilters({ ...filters, excludeTestsGenerated: e.target.checked })}
+          />
+          Exclude tests/generated
+        </label>
+      </div>
+      {loading && <div className="diff-loading"><span className="chat-spinner" aria-hidden="true" /> Running…</div>}
+      {!loading && error && <p className="notice results-error">{error}</p>}
+      {!loading && !error && shown.length === 0 && (
+        <div className="empty-state">
+          <FileIcon size={32} />
+          <p className="empty-state-title">{deduped.length === 0 ? "No results" : "No matches"}</p>
+          {deduped.length > 0 && <p className="empty-state-hint">No results match these filters.</p>}
+        </div>
+      )}
+      {!loading && !error && shown.length > 0 && (
+        <ul className="results-items" ref={listRef}>
+          {shown.map((r, i) => (
+            <li
+              key={`${r.path}:${r.line}`}
+              className={i === focus ? "results-item focused" : "results-item"}
+              onMouseEnter={() => setFocus(i)}
+            >
+              <div className="results-item-loc">
+                <code>{r.path}:{r.line}</code>
+                {r.scope && <span className="results-item-scope">{r.scope}</span>}
+                <button type="button" className="btn btn-ghost btn-sm" onClick={() => open(r)}>View file</button>
+              </div>
+              <CodePreview result={r} />
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

package/src/web/components/ReviewView.tsx

@@ -0,0 +1,308 @@
+import { useEffect, useState } from "react";
+import { trpc } from "../trpc.ts";
+import { useReview, type ReviewState, type RangeSel } from "../state/useReview.ts";
+import { useCodeSearch, type MenuOp, type SearchSide } from "../state/useCodeSearch.ts";
+import { useChat, type ChatState } from "../state/useChat.ts";
+import { visibleFiles } from "@/web/lib/visibleFiles.ts";
+import { reviewProgress } from "@/web/lib/reviewProgress.ts";
+import { usePersistedToggles, hideWhitespaceStorageKey } from "@/web/lib/togglePrefs.ts";
+import { usePersistedFlag } from "@/web/lib/persistedFlag.ts";
+import { usePageTitle } from "@/web/lib/usePageTitle.ts";
+import { Toolbar } from "./Toolbar.tsx";
+import { Tooltip } from "./Tooltip.tsx";
+import { RangeSelector } from "./RangeSelector.tsx";
+import { FileTree, fileSectionId } from "./FileTree.tsx";
+import { HunkCard } from "./HunkCard.tsx";
+import { FileNavigator } from "./FileNavigator.tsx";
+import { IdentifierMenuPortal } from "./IdentifierMenuPortal.tsx";
+import { useIdentifierMenu } from "@/web/lib/useIdentifierMenu.ts";
+import type { NavFrame } from "@/web/lib/navStack.ts";
+import { ChatPanel } from "./ChatPanel.tsx";
+import { AiReviewModal } from "./AiReviewModal.tsx";
+import { AiReviewIndicator } from "./AiReviewIndicator.tsx";
+import { RightRail } from "./RightRail.tsx";
+import { SwitchPrModal } from "./SwitchPrModal.tsx";
+import { CopyIconButton } from "./CopyIconButton.tsx";
+import type { RailTab } from "@/web/lib/railState.ts";
+import {
+  RefreshIcon, SparkleIcon, ExternalIcon, FileIcon, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon,
+} from "./Icons.tsx";
+import type { FileView } from "@/daemon/reviewService.ts";
+
+/** localStorage key for the global left-sidebar collapsed layout preference. */
+const LEFT_SIDEBAR_COLLAPSED_KEY = "mergie:leftSidebarCollapsed";
+
+/** Circumference of the progress ring (radius 14) — used to drive its fill. */
+const RING_CIRCUMFERENCE = 2 * Math.PI * 14;
+
+/** Read an initial range from the URL (`?start=&end=`), if both are present. */
+function initialRangeFromUrl(): { start: string; end: string } | null {
+  const params = new URLSearchParams(window.location.search);
+  const start = params.get("start");
+  const end = params.get("end");
+  return start && end ? { start, end } : null;
+}
+
+/** The full review-core screen for one PR. */
+export function ReviewView(props: { prId: string }): React.JSX.Element {
+  const [hideWhitespace, setHideWhitespace] = usePersistedFlag(hideWhitespaceStorageKey(props.prId), false);
+  const review = useReview(props.prId, initialRangeFromUrl(), hideWhitespace);
+  const codeSearch = useCodeSearch(props.prId, {
+    headSha: () => review.range?.end ?? "",
+    baseSha: () => review.range?.start ?? "",
+  });
+  const chat = useChat(props.prId, () => review.range);
+  const [query, setQuery] = useState("");
+  const [toggles, setToggles] = usePersistedToggles(props.prId);
+  const [sidebarCollapsed, setSidebarCollapsed] = usePersistedFlag(LEFT_SIDEBAR_COLLAPSED_KEY, false);
+  // The frame the file navigator is seeded with; null = navigator closed.
+  const [navOrigin, setNavOrigin] = useState<NavFrame | null>(null);
+  const diffMenu = useIdentifierMenu();
+  // The AI-review popup target: null = closed. Holds the range to review, which
+  // is normally the current range but can be a different range when opened from
+  // the "review ready" header indicator.
+  const [reviewing, setReviewing] = useState<RangeSel | null>(null);
+  const [railTab, setRailTab] = useState<RailTab | null>(null);
+  const [pickerOpen, setPickerOpen] = useState(false);
+  // Hunks temporarily forced visible (jumped to from the comments panel even
+  // though a view toggle would otherwise hide them). Does not touch the range.
+  const [revealedHunks, setRevealedHunks] = useState<ReadonlySet<string>>(new Set());
+  const revealHunk = (hunkHash: string): void => setRevealedHunks((s) => new Set(s).add(hunkHash));
+  // Hunk/file "View file" opens the navigator on a diff frame; the rail's
+  // results "View file" opens it on a file frame (see onOpenNavFile below).
+  const openFile = (path: string, anchorLine: number | null): void => setNavOrigin({ kind: "diff", path, anchorLine });
+
+  // A reveal is transient: once the user changes the range or their view
+  // toggles, normal visibility rules reapply and the revealed hunk hides again.
+  const rangeKey: string = `${review.range?.start ?? ""}:${review.range?.end ?? ""}`;
+  const toggleKey: string = JSON.stringify(toggles);
+  useEffect(() => { setRevealedHunks(new Set()); }, [rangeKey, toggleKey]);
+
+  const pickSymbol = (op: MenuOp, side: SearchSide): void => {
+    if (diffMenu.menu) {
+      setRailTab("search");
+      codeSearch.runFromMenu(op, diffMenu.menu.term, side, diffMenu.menu.file);
+    }
+    diffMenu.close();
+  };
+  const health = trpc.health.useQuery();
+  const pr = health.data?.prs.find((p) => p.id === props.prId);
+  usePageTitle(pr ? `${pr.owner}/${pr.repo} #${pr.number} — ${pr.title}` : null);
+  const files: FileView[] = visibleFiles(review.files, query, toggles, revealedHunks);
+  // Progress counts the whole on-screen range, so view filters don't skew it.
+  const progress = reviewProgress(review.files);
+  const remaining: number = progress.total - progress.viewed;
+  const progressPct: number = progress.total > 0 ? progress.viewed / progress.total : 0;
+  const allReviewed: boolean = progress.total > 0 && remaining === 0;
+
+  return (
+    <div className="review">
+      <header className="review-header">
+        <div className="review-header-bar">
+          <div className="review-title">
+            <div className="review-title-row">
+              <strong>{pr ? `${pr.owner}/${pr.repo} #${pr.number}` : props.prId}</strong>
+              {pr && (
+                <span className="pr-link-group">
+                  <a
+                    className="review-nav-link"
+                    href={`https://github.com/${pr.owner}/${pr.repo}/pull/${pr.number}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Open on GitHub <ExternalIcon size={12} />
+                  </a>
+                  <CopyIconButton
+                    text={`https://github.com/${pr.owner}/${pr.repo}/pull/${pr.number}`}
+                    label="Copy PR URL"
+                  />
+                </span>
+              )}
+            </div>
+            <span className="pr-subtitle">{pr?.title}</span>
+            {pr && (
+              <div className="pr-branches">
+                <code className="branch-name">{pr.baseRef}</code>
+                <CopyIconButton text={pr.baseRef} label="Copy base branch name" size={12} />
+                <span className="branch-arrow" aria-label="merges from">←</span>
+                <code className="branch-name">{pr.headRef}</code>
+                <CopyIconButton text={pr.headRef} label="Copy head branch name" size={12} />
+              </div>
+            )}
+          </div>
+          <div className="review-actions">
+            <div className="review-action-group">
+              <button type="button" className="btn" onClick={() => setPickerOpen(true)} title="Switch to another pull request">
+                <ChevronDownIcon size={12} /> Switch PR
+              </button>
+              <button type="button" className="btn" disabled={review.refreshing} onClick={review.refreshPr} title="Re-fetch the PR for new commits">
+                <RefreshIcon size={14} /> {review.refreshing ? "Refreshing…" : "Refresh PR"}
+              </button>
+              <button type="button" className="btn btn-accent" disabled={!review.range} onClick={() => review.range && setReviewing(review.range)}>
+                <SparkleIcon size={14} /> AI review
+              </button>
+              <AiReviewIndicator prId={props.prId} onOpen={(r) => setReviewing(r)} />
+            </div>
+            <span className="review-action-divider" />
+            <RangeSelector
+              baselineSha={review.baselineSha}
+              commits={review.commits}
+              range={review.range}
+              onChange={review.setRange}
+              onMarkReviewed={review.markReviewed}
+              onUnmarkReviewed={review.unmarkReviewed}
+              reviewedRanges={review.reviewedRanges}
+            />
+          </div>
+        </div>
+      </header>
+      <div className="review-body">
+        <aside className={sidebarCollapsed ? "sidebar collapsed" : "sidebar"}>
+          {/* Always-present top row: the "View" heading (hidden when collapsed)
+              shares one line with the collapse/expand chevron, so there is no
+              empty band above the switches and the toggle stays visible in both
+              states. */}
+          <div className="sidebar-header">
+            {progress.total > 0 ? (
+              <div
+                className="review-ring-group"
+                role="img"
+                aria-label={allReviewed
+                  ? "All hunks reviewed"
+                  : `${remaining} of ${progress.total} hunks left to review`}
+              >
+                <div className={allReviewed ? "review-ring done" : "review-ring"}>
+                  <svg width="34" height="34" viewBox="0 0 34 34" aria-hidden="true">
+                    <circle className="review-ring-track" cx="17" cy="17" r="14" strokeWidth="3.5" />
+                    <circle
+                      className="review-ring-fill"
+                      cx="17" cy="17" r="14" strokeWidth="3.5"
+                      style={{ strokeDasharray: RING_CIRCUMFERENCE, strokeDashoffset: RING_CIRCUMFERENCE * (1 - progressPct) }}
+                    />
+                  </svg>
+                  <span className="review-ring-num">{allReviewed ? "✓" : remaining}</span>
+                </div>
+                <span className="review-ring-caption">
+                  {allReviewed ? "All reviewed" : `${remaining === 1 ? "hunk" : "hunks"} left`}
+                </span>
+              </div>
+            ) : (
+              <h2 className="sidebar-heading">View</h2>
+            )}
+            <Tooltip label={sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"} placement="bottom">
+              <button
+                type="button"
+                className="sidebar-toggle"
+                aria-label={sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+                aria-expanded={!sidebarCollapsed}
+                onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+              >
+                {sidebarCollapsed ? <ChevronRightIcon size={16} /> : <ChevronLeftIcon size={16} />}
+              </button>
+            </Tooltip>
+          </div>
+          {/* Kept mounted while collapsed (hidden via CSS) so the filter text and
+              switch states are never lost across a collapse/expand. */}
+          <div className="sidebar-content">
+            <Toolbar toggles={toggles} onChange={setToggles} hideWhitespace={hideWhitespace} onHideWhitespaceChange={setHideWhitespace} />
+            <FileTree files={files} query={query} onQuery={setQuery} />
+          </div>
+        </aside>
+        <main className="diff-area" onMouseUp={diffMenu.onMouseUp}>
+          {review.loading && (
+            <div className="diff-loading"><span className="chat-spinner" aria-hidden="true" /> Loading diff…</div>
+          )}
+          {!review.loading && files.length === 0 && (
+            <div className="empty-state">
+              <FileIcon size={36} />
+              <p className="empty-state-title">No files to show</p>
+              <p className="empty-state-hint">Nothing matches the current range and view filters.</p>
+            </div>
+          )}
+          {files.map((f) => (
+            <section key={f.newPath} id={fileSectionId(f.newPath)} className="file-section">
+              <h2 className="file-heading">
+                <span className="file-heading-name">{f.newPath}</span>
+                <CopyIconButton text={f.newPath} label="Copy file path" size={12} />
+                <small>{f.status}{f.isLockfile ? " · lock" : ""}</small>
+                <span className="file-heading-actions">
+                  {!f.isBinary && f.hunks.length > 0 && (
+                    <button type="button" className="btn btn-ghost btn-sm" onClick={() => openFile(f.newPath, null)}>View file</button>
+                  )}
+                  <button type="button" className="btn btn-ghost btn-sm" onClick={() => chat.open({ kind: "file", ref: f.newPath, label: f.newPath })}>
+                    <SparkleIcon size={12} /> Ask AI
+                  </button>
+                </span>
+              </h2>
+              {renderFileBody(f, review, openFile, chat, revealedHunks)}
+            </section>
+          ))}
+        </main>
+        <ChatPanel chat={chat} />
+        <RightRail
+          prId={props.prId}
+          active={railTab}
+          onActiveChange={setRailTab}
+          rangeFiles={review.files}
+          renderedFiles={files}
+          baselineSha={review.baselineSha ?? ""}
+          onReveal={revealHunk}
+          prBody={pr?.body ?? ""}
+          codeSearch={codeSearch}
+          onOpenFile={(f) => setNavOrigin({ kind: "file", path: f.path, sha: f.sha, line: f.line })}
+        />
+      </div>
+      <IdentifierMenuPortal menu={diffMenu.menu} onPick={pickSymbol} onClose={diffMenu.close} />
+      {pickerOpen && (
+        <SwitchPrModal currentPrId={props.prId} onClose={() => setPickerOpen(false)} />
+      )}
+      {reviewing && (
+        <AiReviewModal prId={props.prId} range={reviewing} onClose={() => setReviewing(null)} />
+      )}
+      {navOrigin && review.range && (
+        <FileNavigator
+          prId={props.prId}
+          origin={navOrigin}
+          range={review.range}
+          hideWhitespace={hideWhitespace}
+          onClose={() => setNavOrigin(null)}
+        />
+      )}
+    </div>
+  );
+}
+
+/** Render a file's hunks, or a placeholder for binary / no-change files. */
+function renderFileBody(
+  file: FileView,
+  review: ReviewState,
+  openFile: (path: string, anchorLine: number | null) => void,
+  chat: ChatState,
+  revealedHunks: ReadonlySet<string>,
+): React.JSX.Element {
+  if (file.isBinary) return <p className="notice">Binary file — not shown.</p>;
+  if (file.hunks.length === 0) return <p className="notice">No textual changes.</p>;
+  const endSha: string = review.range?.end ?? "";
+  return (
+    <>
+      {file.hunks.map((h) => (
+        <HunkCard
+          key={h.hash}
+          path={file.newPath}
+          hunk={h}
+          endSha={endSha}
+          revealed={revealedHunks.has(h.hash)}
+          onToggleViewed={(v) => review.toggleHunkViewed(h.hash, v)}
+          addComment={review.addComment}
+          editComment={review.editComment}
+          deleteComment={review.deleteComment}
+          onViewFile={(line) => openFile(file.newPath, line)}
+          previewPost={review.previewPost}
+          postComment={review.postComment}
+          replyToThread={review.replyToThread}
+          onAskAi={() => chat.open({ kind: "hunk", ref: h.hash, label: `hunk · ${file.newPath}` })}
+        />
+      ))}
+    </>
+  );
+}