zidane-ui 9.0.4 → 9.1.3

package/src/files/DiffsTab.tsx

@@ -1,590 +0,0 @@
-/**
- * Diffs tab: what changed. Two sources behind a segmented switch:
- *
- *   Session  edits the agent made in this session (from the transcript),
- *            one DiffView per change, grouped by file; only when the scope
- *            is bound to a session
- *   Working  `git diff HEAD` + untracked files for the scope's folder, live
- *            (refreshed after tool results in the folder, and git moves)
- *
- * Toolbar: file list, unified / split, wrap. The file list is a tree
- * (`DiffFileTree`); clicking a file scrolls its diff into view. An app opens
- * it on the working tree (the desktop app's git bar) with `workingTreeRequest`.
- *
- * Without a host `workingTreeDiff` there is no Working source: a bound
- * scope shows its session's edits only.
- */
-import { memo, useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from 'react';
-
-import { useAppearanceReducedMotion as useReducedMotion } from '../appearance/AppearanceProvider';
-import { DiffScroller, DiffView, type DiffStyle, type FileDiffMetadata } from '../code/editor/DiffView';
-import { FileIcon, TreeChevron } from '../code/editor/FileIcon';
-import { diffLines } from '../code/editor/find/find-model';
-import { FindBar } from '../code/editor/find/FindBar';
-import { settleScroll } from '../code/editor/find/settle-scroll';
-import { useFind } from '../code/editor/find/useFind';
-import { parseFilePatch } from '../code/editor/patch-parse';
-import { DiffCounts } from '../components/PanelRows';
-import { IconToggle } from '../components/IconToggle';
-import { PanelEmpty, PanelLoading } from '../components/PanelEmpty';
-import { Segmented, type SegmentedOption } from '../components/Segmented';
-import { DiffFileTree } from '../session/DiffFileTree';
-import { buildDiffTree, fileOrder, relativeTo, visibleRows, type DiffListFile } from '../session/headless/diff-tree';
-import { collectSessionDiffs, fileDiffCounts, groupByPath } from '../session/headless/session-diffs';
-import { usePanelVisible } from '../workspace/panel-visibility';
-import { useFilesHost } from './FilesProvider';
-import type { FilesScope, TextMatchOptions } from './headless/host';
-import { nameMatches } from './headless/name-match';
-import { matchRanges } from './headless/search';
-import { filesRootOf, steppedIndex, type FilesChatTarget } from './headless/view';
-import { isMediaDiff, MediaDiff } from './MediaDiff';
-import { ReviewableDiff } from './ReviewableDiff';
-import { SearchPanel, type SearchLine } from './SearchPanel';
-import {
-  FilesChatContext,
-  useNoEdits,
-  useNoKeyScope,
-  type FilesKeyScopeHook,
-  type SessionEditsHook,
-} from './tab-hooks';
-import { useFilesDiagnostics } from './useFilesDiagnostics';
-import { useFilesLabels } from './useFilesLabels';
-import { useWorkingTreeDiff } from './working-tree-diff';
-
-type Source = 'session' | 'working';
-
-/** Search in changes stops here (as search in files does in main). */
-const MAX_SEARCH_LINES = 2000;
-
-// The file tree's icons: the Files tab's sprite set.
-const renderFileIcon = (path: string) => <FileIcon path={path} />;
-const renderChevron = (open: boolean) => <TreeChevron open={open} className="text-[var(--zg-text-muted)]" />;
-
-/** Props for {@link DiffsTab}. */
-export interface DiffsTabProps {
-  /** The folder the tab works from; bound to a session, it shows that session's edits too. */
-  scope: FilesScope;
-  /** The bound session's edit events (a hook). Without it, the Session source is empty. */
-  useEdits?: SessionEditsHook;
-  /** Registers the tab's next / previous / close / find keys (a hook). */
-  useKeyScope?: FilesKeyScopeHook;
-  /** The chat review comments go to (`null`: shown disabled). */
-  chat?: FilesChatTarget | null;
-  /** A count the app bumps to open the working tree (the git bar's changes); 0: none asked. */
-  workingTreeRequest?: number;
-  /** The tab took `workingTreeRequest`: the app clears it. */
-  onWorkingTreeTaken?: () => void;
-  /** Makes the worker that parses working-tree patches (it answers `parseWorkingTree`). Default: parse on this thread. */
-  createParseWorker?: () => Worker;
-  /** Classes on the root. */
-  className?: string;
-  /** Styles on the root. */
-  style?: CSSProperties;
-}
-
-/**
- * The Diffs tab: the session's edits and the working tree against HEAD, a file tree beside virtualised diffs with
- * review comments, find in diffs and search in changes, over the {@link FilesProvider}'s host.
- *
- * @param props - The scope, the app's hooks, chat target and requests.
- */
-export function DiffsTab({
-  scope,
-  useEdits = useNoEdits,
-  useKeyScope = useNoKeyScope,
-  chat = null,
-  workingTreeRequest = 0,
-  onWorkingTreeTaken,
-  createParseWorker,
-  className,
-  style,
-}: DiffsTabProps) {
-  const host = useFilesHost();
-  const labels = useFilesLabels();
-  const bound = typeof scope.session === 'string';
-  const hasWorking = host.workingTreeDiff !== undefined;
-  const edits = useEdits(bound ? scope.session! : null);
-  // A sandbox session's files are addressed by its virtual root (the host routes it there).
-  const cwd = filesRootOf(scope) || null;
-  // Opened from the git bar's changes: straight onto the working tree, no flash of Session.
-  // Without a session there is no Session source: the working tree it is.
-  const [picked, setSource] = useState<Source>(() => (workingTreeRequest > 0 || !bound ? 'working' : 'session'));
-  const source: Source = bound && hasWorking ? picked : bound ? 'session' : 'working';
-  useEffect(() => {
-    if (!workingTreeRequest) return;
-    onWorkingTreeTaken?.();
-    // eslint-disable-next-line react-hooks/set-state-in-effect -- follows a new input once, as the desktop app measured it
-    setSource('working');
-    // The app's callback is not an input: only a new request acts.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [workingTreeRequest]);
-  const sourceOptions = useMemo<readonly SegmentedOption<Source>[]>(
-    () => [
-      { value: 'session', label: labels.filesSourceSession },
-      { value: 'working', label: labels.filesSourceWorking },
-    ],
-    [labels],
-  );
-  const [diffStyle, setDiffStyle] = useState<DiffStyle>('unified');
-  const [wrap, setWrap] = useState(false);
-  const [listOpen, setListOpen] = useState(true);
-  const anchors = useRef(new Map<string, HTMLElement>());
-
-  // Session source.
-  const sessionEntries = useMemo(() => collectSessionDiffs(edits), [edits]);
-  const sessionGroups = useMemo(() => groupByPath(sessionEntries), [sessionEntries]);
-
-  // Working-tree source: settled, single-flight, parsed in a worker, paused while hidden.
-  const tabShown = usePanelVisible();
-  const working = useWorkingTreeDiff(scope, tabShown && source === 'working', createParseWorker);
-
-  const list = useMemo<DiffListFile[]>(
-    () =>
-      source === 'session'
-        ? sessionGroups.map((g) => ({ key: g.path, added: g.added, removed: g.removed }))
-        : (working ?? []).map((f) => ({
-            key: f.name,
-            ...(f.prevName && f.prevName !== f.name ? { prevPath: f.prevName } : {}),
-            ...fileDiffCounts(f),
-          })),
-    [source, sessionGroups, working],
-  );
-  // The list as a tree; the diff column and stepping follow its file order.
-  const tree = useMemo(() => buildDiffTree(list, cwd), [list, cwd]);
-  const order = useMemo(() => fileOrder(tree).map((f) => f.key), [tree]);
-  const orderedSession = useMemo(() => {
-    const byKey = new Map(sessionGroups.map((g) => [g.path, g]));
-    return order.flatMap((k) => byKey.get(k) ?? []);
-  }, [order, sessionGroups]);
-  const orderedWorking = useMemo(() => {
-    const byKey = new Map((working ?? []).map((f) => [f.name, f]));
-    return order.flatMap((k) => byKey.get(k) ?? []);
-  }, [order, working]);
-  const [collapsed, setCollapsed] = useState<ReadonlySet<string>>(() => new Set());
-  const rows = useMemo(() => visibleRows(tree, collapsed), [tree, collapsed]);
-  const toggleDir = useCallback(
-    (path: string) =>
-      setCollapsed((prev) => {
-        const next = new Set(prev);
-        if (!next.delete(path)) next.add(path);
-        return next;
-      }),
-    [],
-  );
-
-  const stats = {
-    files: list.length,
-    added: list.reduce((n, f) => n + f.added, 0),
-    removed: list.reduce((n, f) => n + f.removed, 0),
-  };
-
-  const scroller = useRef<HTMLDivElement | null>(null);
-  const reducedMotion = useReducedMotion();
-  // Lands in one click: re-aims every frame while the diffs above render (`settle-scroll`).
-  const stopScroll = useRef<(() => void) | null>(null);
-  const scrollTo = (key: string) => {
-    const root = scroller.current;
-    if (!root) return;
-    stopScroll.current?.();
-    stopScroll.current = settleScroll(root, () => anchors.current.get(key), {
-      offset: 0,
-      smooth: !reducedMotion,
-    });
-  };
-  useEffect(() => () => stopScroll.current?.(), []);
-  /*
-   * Every file whose diff is at least partly in the viewport, for the list
-   * highlight. Tracking only the one at the top marked a single file while
-   * several were on screen, which misread as "you are looking at this one".
-   * An observer (not onScroll) also catches diffs that grow as they render,
-   * a resized pane, and the first paint before any scroll.
-   */
-  const [visible, setVisible] = useState<ReadonlySet<string>>(() => new Set());
-  /*
-   * Re-subscribe whenever the anchor ELEMENTS (or the scroller) change, not
-   * just the keys: switching source or a loading flash remounts them under
-   * the same keys. Checked every commit; the comparison is O(files).
-   */
-  const observed = useRef<{ root: Element; keyOf: Map<Element, string>; observer: IntersectionObserver } | null>(null);
-  // eslint-disable-next-line react-hooks/exhaustive-deps -- runs every commit on purpose: the observed elements can change under the same keys
-  useEffect(() => {
-    const root = scroller.current;
-    const cur = observed.current;
-    if (
-      cur &&
-      cur.root === root &&
-      cur.keyOf.size === anchors.current.size &&
-      [...anchors.current].every(([key, el]) => cur.keyOf.get(el) === key)
-    )
-      return;
-    cur?.observer.disconnect();
-    observed.current = null;
-    setVisible((prev) => (prev.size === 0 ? prev : new Set()));
-    if (!root) return;
-    const keyOf = new Map<Element, string>();
-    for (const [key, el] of anchors.current) keyOf.set(el, key);
-    const shown = new Set<string>();
-    const observer = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          const key = keyOf.get(entry.target);
-          if (key === undefined) continue;
-          if (entry.isIntersecting) shown.add(key);
-          else shown.delete(key);
-        }
-        // Only a real change re-renders the tab (an entry flip-flopping within one batch is none).
-        setVisible((prev) =>
-          prev.size === shown.size && [...shown].every((k) => prev.has(k)) ? prev : new Set(shown),
-        );
-      },
-      // Files touch edge to edge: a file scrolled just out above shares the
-      // pane's top edge, which would still count as intersecting.
-      { root, rootMargin: '-1px 0px 0px 0px' },
-    );
-    for (const el of keyOf.keys()) observer.observe(el);
-    observed.current = { root, keyOf, observer };
-  });
-  // Forget the observer too: StrictMode's simulated unmount runs this and then
-  // the effect above again, which would otherwise keep the disconnected one.
-  useEffect(
-    () => () => {
-      observed.current?.observer.disconnect();
-      observed.current = null;
-    },
-    [],
-  );
-  /*
-   * The file list follows the diffs: when the highlighted rows leave the
-   * list's own scroll box (a long list capped at 30% height), scroll it so
-   * they are in view: the whole highlighted run when it fits, its first row
-   * otherwise. Only the list's scrollTop moves (`scrollIntoView` would also
-   * scroll the panel), and never while the user is browsing the list, so
-   * they aren't yanked back. Browsing is the pointer moving over the list,
-   * read live: a pointer that merely rests where the list appeared (the
-   * panel menu's item sat there) is not browsing, and a list replaced under
-   * the pointer (no leave event) cannot leave a stale flag behind. Leaving
-   * the list catches up: the diffs may have moved while it was held.
-   */
-  const listRef = useRef<HTMLUListElement | null>(null);
-  const listBrowsed = useRef(false);
-  const [listLeft, setListLeft] = useState(0);
-  const onListBrowse = useCallback((browsing: boolean) => {
-    if (listBrowsed.current && !browsing) setListLeft((n) => n + 1);
-    listBrowsed.current = browsing;
-  }, []);
-  useEffect(() => {
-    const ul = listRef.current;
-    const browsing = listBrowsed.current && ul?.matches(':hover');
-    if (!ul || !listOpen || browsing || visible.size === 0) return;
-    // Highlighted rows: files on screen, and collapsed folders holding one.
-    const lit = [...ul.querySelectorAll(':scope > li:has(> [data-active])')] as HTMLElement[];
-    const first = lit[0];
-    const last = lit[lit.length - 1];
-    if (!first || !last) return;
-    // Row offsets relative to the list's content box (the ul isn't positioned).
-    const top = first.offsetTop - ul.offsetTop;
-    const bottom = last.offsetTop - ul.offsetTop + last.offsetHeight;
-    const pad = 8;
-    const viewTop = ul.scrollTop;
-    const viewBottom = viewTop + ul.clientHeight;
-    let next: number | null = null;
-    if (bottom - top > ul.clientHeight - pad * 2 || top < viewTop + pad) next = top - pad;
-    else if (bottom > viewBottom - pad) next = bottom - ul.clientHeight + pad;
-    if (next === null) return;
-    next = Math.max(0, Math.min(next, ul.scrollHeight - ul.clientHeight));
-    if (Math.abs(next - viewTop) < 1) return;
-    ul.scrollTo({ top: next, behavior: reducedMotion ? 'auto' : 'smooth' });
-  }, [visible, rows, listOpen, reducedMotion, listLeft]);
-  const anchorRef = (key: string) => (el: HTMLElement | null) => {
-    if (el) anchors.current.set(key, el);
-    else anchors.current.delete(key);
-  };
-
-  // Tool findings per changed file ("did this edit introduce errors?"). The
-  // working-tree source re-checks after each tool result via `working`; the
-  // session source via the event count.
-  const filePaths = useMemo(
-    () => (source === 'session' ? sessionGroups.map((g) => g.path) : (working ?? []).map((f) => f.name)),
-    [source, sessionGroups, working],
-  );
-  const findings = useFilesDiagnostics(cwd, filePaths, source === 'session' ? edits.length : working);
-
-  // ⌘F: find in the diffs shown, in tree order (`code/find`). A match's part is `<file key>#<diff index>`.
-  const findParts = () =>
-    source === 'session'
-      ? orderedSession.flatMap((g) =>
-          g.entries.map((e, j) => {
-            const diff = parseSessionPatch(e.id, e.patch);
-            return { part: `${g.path}#${j}`, lines: diff ? diffLines(diff) : [] };
-          }),
-        )
-      : orderedWorking.map((f) => ({ part: `${f.name}#0`, lines: diffLines(f) }));
-  const find = useFind({
-    parts: findParts,
-    version: source === 'session' ? orderedSession : orderedWorking,
-    surfaces: () =>
-      [...anchors.current].flatMap(([key, section]) =>
-        [...section.querySelectorAll('diffs-container')].flatMap((host, j) =>
-          host.shadowRoot ? [{ part: `${key}#${j}`, root: host.shadowRoot }] : [],
-        ),
-      ),
-    scroller: () => scroller.current,
-    fallback: (m) => anchors.current.get(m.part.slice(0, m.part.lastIndexOf('#'))),
-    smooth: !reducedMotion,
-  });
-
-  // ⌘⇧F: search the changed files (names and diff lines), in place of the file tree.
-  // A result opens ⌘F's bar on that match, so the highlight and next / previous carry on.
-  const [searchOpen, setSearchOpen] = useState(false);
-  const [searchAsk, setSearchAsk] = useState(0);
-  const findPartsRef = useRef(findParts);
-  // eslint-disable-next-line react-hooks/refs -- a latest-value ref: written in render, read by callbacks and effects
-  findPartsRef.current = findParts;
-  const searchNames = useCallback(
-    (query: string, opts: TextMatchOptions) =>
-      nameMatches(
-        order.map((k) => relativeTo(cwd, k)),
-        query,
-        opts,
-      ),
-    [order, cwd],
-  );
-  const searchContents = useCallback(
-    async (query: string, opts: TextMatchOptions) => {
-      const matches: SearchLine[] = [];
-      let capped = false;
-      for (const { part, lines } of findPartsRef.current()) {
-        const path = relativeTo(cwd, part.slice(0, part.lastIndexOf('#')));
-        for (const l of lines) {
-          const ranges = matchRanges(l.text, query, opts);
-          if (ranges.length === 0) continue;
-          if (matches.length >= MAX_SEARCH_LINES) {
-            capped = true;
-            break;
-          }
-          matches.push({ path, line: l.line, text: l.text, ranges, part, side: l.side });
-        }
-        if (capped) break;
-      }
-      return { matches, capped, engine: 'none' as const };
-    },
-    [cwd],
-  );
-  const { jumpTo } = find;
-  const openSearchLine = useCallback(
-    (m: SearchLine, query: string, opts: TextMatchOptions) =>
-      jumpTo(query, opts, { part: m.part ?? '', side: m.side ?? 'new', line: m.line, start: m.ranges[0]?.start ?? 0 }),
-    [jumpTo],
-  );
-  const openSearchFile = useCallback(
-    (path: string) => {
-      const key = order.find((k) => relativeTo(cwd, k) === path);
-      if (key) scrollTo(key);
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- scrollTo reads refs
-    [order, cwd],
-  );
-  const closeSearch = useCallback(() => setSearchOpen(false), []);
-
-  // ⌥⌘← / ⌥⌘→ jump between the changed files (`tab-scopes`); ctrl+w closes the Diffs tab.
-  const current = useRef<string | null>(null);
-  const rootRef = useRef<HTMLDivElement>(null);
-  useKeyScope(rootRef, {
-    step: (direction) => {
-      const keys = order;
-      const from =
-        current.current && keys.includes(current.current) ? current.current : keys.find((k) => visible.has(k));
-      const next = steppedIndex(from ? keys.indexOf(from) : -1, keys.length, direction);
-      if (next < 0) return false;
-      current.current = keys[next]!;
-      scrollTo(keys[next]!);
-      return true;
-    },
-    // Nothing of its own to close, and ctrl+w inside Diffs leaves the tab open.
-    close: () => true,
-    find: (mode) => {
-      if (order.length === 0) return false;
-      if (mode === 'files') {
-        setListOpen(true);
-        setSearchOpen(true);
-        setSearchAsk((n) => n + 1);
-      } else {
-        find.show();
-      }
-      return true;
-    },
-  });
-
-  return (
-    <FilesChatContext.Provider value={chat}>
-      <div ref={rootRef} className={`flex-1 min-h-0 flex flex-col${className ? ` ${className}` : ''}`} style={style}>
-        <div
-          role="toolbar"
-          aria-label={labels.filesDiffsToolbar}
-          className="shrink-0 flex items-center gap-2 px-2 h-10"
-        >
-          {bound && hasWorking ? (
-            <Segmented
-              size="sm"
-              ariaLabel={labels.filesDiffSource}
-              value={source}
-              onChange={setSource}
-              options={sourceOptions}
-            />
-          ) : (
-            <span className="zg-meta px-1">{bound ? labels.filesSourceSession : labels.filesSourceWorking}</span>
-          )}
-          {stats.files > 0 && <DiffCounts added={stats.added} removed={stats.removed} />}
-          <div className="zg-segment ml-auto shrink-0">
-            {list.length > 0 && (
-              <IconToggle
-                active={listOpen}
-                onClick={() => setListOpen((v) => !v)}
-                icon="i-ph-list-bullets"
-                label={listOpen ? labels.filesHideFileList : labels.filesShowFileList}
-                badge={String(list.length)}
-              />
-            )}
-            <IconToggle
-              active={diffStyle === 'split'}
-              onClick={() => setDiffStyle((s) => (s === 'split' ? 'unified' : 'split'))}
-              icon="i-ph-columns"
-              label={labels.filesSplit}
-            />
-            <IconToggle
-              active={wrap}
-              onClick={() => setWrap((w) => !w)}
-              icon="i-ph-text-align-left"
-              label={labels.filesWrap}
-            />
-          </div>
-        </div>
-
-        {source === 'working' && working === null ? (
-          <PanelLoading />
-        ) : list.length === 0 ? (
-          source === 'session' ? (
-            <PanelEmpty icon="i-ph-git-diff" title={labels.filesNoChangesYet} hint={labels.filesNoChangesHint} />
-          ) : (
-            <PanelEmpty
-              icon="i-ph-git-diff"
-              title={
-                cwd
-                  ? hasWorking
-                    ? labels.filesWorkingTreeClean
-                    : labels.filesNoWorkingTree
-                  : bound
-                    ? labels.filesSessionNoFolder
-                    : labels.filesNoFolder
-              }
-            />
-          )
-        ) : (
-          <>
-            {/* File list stays put; only the diffs below scroll. Capped so a long
-              list never swallows the viewport; collapsible from the toolbar (grid-rows tween). */}
-            <div className={`zg-collapse shrink-0 ${searchOpen ? 'max-h-[45%]' : 'max-h-[30%]'}`} data-open={listOpen}>
-              {/* Padding-free grid child so 0fr really reaches 0; the list inside carries the chrome. */}
-              <div className="min-h-0 overflow-hidden flex flex-col">
-                {searchOpen ? (
-                  <SearchPanel
-                    label={labels.filesSearchInChanges}
-                    asked={searchAsk}
-                    names={searchNames}
-                    search={searchContents}
-                    onOpenFile={openSearchFile}
-                    onOpenLine={openSearchLine}
-                    onClose={closeSearch}
-                  />
-                ) : (
-                  <DiffFileTree
-                    rows={rows}
-                    visible={visible}
-                    collapsed={collapsed}
-                    findings={findings}
-                    onToggle={toggleDir}
-                    onOpen={scrollTo}
-                    fileIcon={renderFileIcon}
-                    chevron={renderChevron}
-                    listRef={listRef}
-                    onBrowse={onListBrowse}
-                  />
-                )}
-              </div>
-            </div>
-            {/* pierre's Virtualizer is the scroll box: every diff inside renders only
-              its lines near the viewport, so a large tree opens and scrolls in frames.
-              Files run edge to edge, a hairline between them, each header sticking to
-              the top while its file scrolls (no clipping ancestor, or sticky stops). */}
-            <div
-              className="relative flex-1 min-h-0 flex flex-col"
-              ref={(el) => {
-                scroller.current = (el?.firstElementChild as HTMLDivElement | null) ?? null;
-              }}
-            >
-              <DiffScroller className="flex-1 min-h-0 overflow-y-auto" contentClassName="flex flex-col">
-                {source === 'session'
-                  ? orderedSession.map((g) => (
-                      <section key={g.path} ref={anchorRef(g.path)} data-diff-key={g.path} className="zg-diff-file">
-                        {g.entries.map((e) => (
-                          <div key={e.id} className="zg-diff-edit">
-                            <SessionDiff id={e.id} patch={e.patch} diffStyle={diffStyle} wrap={wrap} />
-                          </div>
-                        ))}
-                      </section>
-                    ))
-                  : orderedWorking.map((f) => (
-                      <section key={f.name} ref={anchorRef(f.name)} data-diff-key={f.name} className="zg-diff-file">
-                        {/* A changed image or video: before and after, in place of git's "Binary files differ". */}
-                        {cwd && host.mediaUrl && isMediaDiff(f) ? (
-                          <MediaDiff file={f} cwd={cwd} />
-                        ) : (
-                          <ReviewableDiff fileDiff={f} diffStyle={diffStyle} wrap={wrap} />
-                        )}
-                      </section>
-                    ))}
-              </DiffScroller>
-              <FindBar find={find} label={labels.filesFindInDiffs} />
-            </div>
-          </>
-        )}
-      </div>
-    </FilesChatContext.Provider>
-  );
-}
-
-/**
- * One agent edit, parsed once so it gets the same review interactions as a
- * working-tree diff. Falls back to the plain view if pierre cannot parse it.
- */
-const SessionDiff = memo(function SessionDiff({
-  id,
-  patch,
-  diffStyle,
-  wrap,
-}: {
-  id: string;
-  patch: string;
-  diffStyle: DiffStyle;
-  wrap: boolean;
-}) {
-  const fileDiff = useMemo(() => parseSessionPatch(id, patch), [id, patch]);
-  if (!fileDiff) return <DiffView patch={patch} diffStyle={diffStyle} wrap={wrap} />;
-  return <ReviewableDiff fileDiff={fileDiff} diffStyle={diffStyle} wrap={wrap} />;
-});
-
-/** Parsed once per edit: the diff column and find both read it. */
-const parsedPatches = new Map<string, { patch: string; diff: FileDiffMetadata | null }>();
-function parseSessionPatch(id: string, patch: string): FileDiffMetadata | null {
-  const hit = parsedPatches.get(id);
-  if (hit && hit.patch === patch) return hit.diff;
-  let diff: FileDiffMetadata | null = null;
-  try {
-    diff = parseFilePatch(patch, `${id}:`) ?? null;
-  } catch {
-    diff = null;
-  }
-  if (parsedPatches.size > 2000) parsedPatches.clear();
-  parsedPatches.set(id, { patch, diff });
-  return diff;
-}