Function DiffDialog

src/components/diff/DiffDialog.tsx:55–264

({ messages, onDone }: Props)

}

export function DiffDialog({ messages, onDone }: Props): React.ReactNode {
  const gitDiffData = useDiffData();
  const turnDiffs = useTurnDiffs(messages);

  const [viewMode, setViewMode] = useState<ViewMode>('list');
  const [selectedIndex, setSelectedIndex] = useState<number>(0);
  const [sourceIndex, setSourceIndex] = useState<number>(0);

  const sources: DiffSource[] = useMemo(
    () => [{ type: 'current' }, ...turnDiffs.map((turn): DiffSource => ({ type: 'turn', turn }))],
    [turnDiffs],
  );

  const currentSource = sources[sourceIndex];
  const currentTurn = currentSource?.type === 'turn' ? currentSource.turn : null;

  const diffData = useMemo((): DiffData => {
    return currentTurn ? turnDiffToDiffData(currentTurn) : gitDiffData;
  }, [currentTurn, gitDiffData]);

  const selectedFile = diffData.files[selectedIndex];
  const selectedHunks = useMemo(() => {
    return selectedFile ? diffData.hunks.get(selectedFile.path) || [] : [];
  }, [selectedFile, diffData.hunks]);

  // Clamp sourceIndex when sources shrink (e.g., conversation rewind)
  useEffect(() => {
    if (sourceIndex >= sources.length) {
      setSourceIndex(Math.max(0, sources.length - 1));
    }
  }, [sources.length, sourceIndex]);

  // Reset file selection when source changes
  const prevSourceIndex = useRef(sourceIndex);
  useEffect(() => {
    if (prevSourceIndex.current !== sourceIndex) {
      setSelectedIndex(0);
      prevSourceIndex.current = sourceIndex;
    }
  }, [sourceIndex]);

  // Register as modal overlay so Chat keybindings and CancelRequestHandler
  // are disabled while DiffDialog is showing
  useRegisterOverlay('diff-dialog');

  // Diff dialog navigation keybindings
  // View-mode dependent: left/right arrows have different behavior based on mode
  // (source tab switching vs back navigation), and up/down/enter are
  // context-sensitive to viewMode
  //
  // Note: Escape handling (diff:dismiss) is NOT registered here because Dialog's
  // built-in useKeybinding('confirm:no', handleCancel) already handles it.
  // Having both would be dead code since Dialog's child effect registers first
  // and calls stopImmediatePropagation(). The diff:dismiss binding in
  // defaultBindings.ts is kept for useShortcutDisplay to show the "esc close" hint.
  useKeybindings(
    {
      // Left arrow: in detail mode goes back, in list mode switches source