diffity 0.1.0

package/packages/ui/src/components/file-block.tsx

@@ -0,0 +1,536 @@
+import { useState, useMemo, useCallback } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import type { DiffHunk } from '@diffity/parser';
+import type { DiffFile, DiffLine as DiffLineType } from '@diffity/parser';
+import type { SyntaxToken } from '../lib/syntax-token';
+import type { HighlightedTokens } from '../hooks/use-highlighter';
+import type { CommentSide, LineSelection } from '../types/comment';
+import { type ViewMode, getFilePath, buildChangeGroupPatch, extractLinesFromDiff } from '../lib/diff-utils';
+import { revertHunk as apiRevertHunk } from '../lib/api';
+import { ConfirmDialog } from './ui/confirm-dialog';
+import { computeGaps, createContextLines, getExpandRange, type ExpandableGap } from '../lib/context-expansion';
+import { fileContentOptions } from '../queries/file';
+import type { CommentActions } from '../hooks/use-comment-actions';
+import type { CommentThread } from '../types/comment';
+import { GENERAL_THREAD_FILE_PATH } from '../types/comment';
+import { useLineSelection } from '../hooks/use-line-selection';
+import { useCopy } from '../hooks/use-copy';
+import { CopyIcon } from './icons/copy-icon';
+import { CheckIcon } from './icons/check-icon';
+import { CommentIcon } from './icons/comment-icon';
+import { DiffStats } from './diff-stats';
+import { Badge } from './ui/badge';
+import { IconButton } from './ui/icon-button';
+import { StatusBadge } from './ui/status-badge';
+import { HunkWithGap } from './hunk-with-gap';
+import { OrphanedThreads } from './orphaned-threads';
+import { ThreadBadge } from './ui/thread-badge';
+import { buildExpansionSyntaxMap, renderExpansionRows } from './render-expansion-rows';
+import { ExpandRow } from './expand-row';
+
+export const LARGE_DIFF_LINE_THRESHOLD = 200;
+
+const DEFAULT_AUTHOR = { name: 'You', type: 'user' as const };
+
+function getTotalLineCount(file: DiffFile): number {
+  let count = 0;
+  for (const hunk of file.hunks) {
+    count += hunk.lines.length;
+  }
+  return count;
+}
+
+interface FileBlockProps {
+  file: DiffFile;
+  viewMode: ViewMode;
+  collapsed: boolean;
+  onToggleCollapse: (path: string) => void;
+  reviewed: boolean;
+  onReviewedChange: (path: string, reviewed: boolean) => void;
+  highlightLine?: (code: string) => HighlightedTokens[] | null;
+  baseRef?: string;
+  canRevert?: boolean;
+  onRevert?: () => void;
+  threads: CommentThread[];
+  commentsEnabled: boolean;
+  commentActions: CommentActions;
+  onAddThread: CommentActions['addThread'];
+  pendingSelection: LineSelection | null;
+  onPendingSelectionChange: (selection: LineSelection | null) => void;
+  highlighted?: boolean;
+  onHighlightEnd?: () => void;
+}
+
+interface GapExpansion {
+  fromTop: number;
+  fromBottom: number;
+  linesFromTop: DiffLineType[];
+  linesFromBottom: DiffLineType[];
+}
+
+export function FileBlock(props: FileBlockProps) {
+  const {
+    file, viewMode, collapsed, onToggleCollapse, reviewed, onReviewedChange, highlightLine, baseRef, canRevert, onRevert,
+    threads: allThreads, commentsEnabled, commentActions, onAddThread: rawAddThread, pendingSelection, onPendingSelectionChange,
+    highlighted, onHighlightEnd,
+  } = props;
+
+  const totalLines = getTotalLineCount(file);
+  const isLargeDiff = totalLines >= LARGE_DIFF_LINE_THRESHOLD;
+
+  const [largeDiffExpanded, setLargeDiffExpanded] = useState(false);
+  const [expansions, setExpansions] = useState<Map<string, GapExpansion>>(new Map());
+  const [loadingGap, setLoadingGap] = useState<string | null>(null);
+
+  const filePath = getFilePath(file);
+  const showRename = file.status === 'renamed' && file.oldPath !== file.newPath;
+  const isNewFile = file.status === 'added';
+
+  const queryClient = useQueryClient();
+  const fileContentPath = file.oldPath || filePath;
+  const fileLineCount = file.oldFileLineCount ?? null;
+
+  const { copied: pathCopied, copy: copyPath } = useCopy();
+
+  const [confirmRevertChange, setConfirmRevertChange] = useState<{ hunk: DiffHunk; startIndex: number; endIndex: number } | null>(null);
+
+  const handleRevertChange = useCallback(async (info: { hunk: DiffHunk; startIndex: number; endIndex: number }) => {
+    setConfirmRevertChange(null);
+    const patch = buildChangeGroupPatch(file, info.hunk, info.startIndex, info.endIndex);
+    await apiRevertHunk(patch);
+    onRevert?.();
+  }, [file, onRevert]);
+
+
+  const { addReply, resolveThread, unresolveThread, dismissThread, deleteComment, deleteThread } = commentActions;
+
+  const getOriginalCode = useCallback((side: CommentSide, startLine: number, endLine: number) => {
+    return extractLinesFromDiff(file.hunks, side, startLine, endLine);
+  }, [file.hunks]);
+
+  const addThread = useCallback((fp: string, side: CommentSide, startLine: number, endLine: number, body: string, author: import('../types/comment').CommentAuthor) => {
+    const anchorContent = extractLinesFromDiff(file.hunks, side, startLine, endLine);
+    rawAddThread(fp, side, startLine, endLine, body, author, anchorContent || undefined);
+  }, [rawAddThread, file.hunks]);
+
+  const allFileThreads = useMemo(() => {
+    return allThreads.filter(t => t.filePath === filePath && t.filePath !== GENERAL_THREAD_FILE_PATH);
+  }, [allThreads, filePath]);
+
+  const { anchoredThreads: fileThreads, orphanedThreads } = useMemo(() => {
+    const diffLineNumbers = new Set<string>();
+    for (const hunk of file.hunks) {
+      for (const line of hunk.lines) {
+        if (line.oldLineNumber !== null) {
+          diffLineNumbers.add(`old:${line.oldLineNumber}`);
+        }
+        if (line.newLineNumber !== null) {
+          diffLineNumbers.add(`new:${line.newLineNumber}`);
+        }
+      }
+    }
+
+    const anchored: typeof allFileThreads = [];
+    const orphaned: typeof allFileThreads = [];
+    for (const thread of allFileThreads) {
+      let isInDiff = false;
+      for (let line = thread.startLine; line <= thread.endLine; line++) {
+        if (diffLineNumbers.has(`${thread.side}:${line}`)) {
+          isInDiff = true;
+          break;
+        }
+      }
+
+      if (isInDiff) {
+        anchored.push(thread);
+      } else {
+        orphaned.push(thread);
+      }
+    }
+
+    return { anchoredThreads: anchored, orphanedThreads: orphaned };
+  }, [allFileThreads, file.hunks]);
+
+  const handleSelectionComplete = useCallback((selection: LineSelection) => {
+    if (!commentsEnabled) {
+      return;
+    }
+    onPendingSelectionChange(selection);
+  }, [onPendingSelectionChange, commentsEnabled]);
+
+  const { isLineInSelection, handleLineMouseDown, handleLineMouseEnter } = useLineSelection({
+    filePath,
+    onSelectionComplete: handleSelectionComplete,
+  });
+
+  const handleCommentClickFn = useCallback((line: number, side: CommentSide) => {
+    onPendingSelectionChange({
+      filePath,
+      side,
+      startLine: line,
+      endLine: line,
+    });
+  }, [filePath, onPendingSelectionChange]);
+
+  const handleCommentClick = commentsEnabled ? handleCommentClickFn : undefined;
+
+  const handleCancelPending = useCallback(() => {
+    onPendingSelectionChange(null);
+  }, [onPendingSelectionChange]);
+
+  const isLineSelected = useCallback((line: number, side: CommentSide) => {
+    if (isLineInSelection(line, side)) {
+      return true;
+    }
+    if (pendingSelection && pendingSelection.filePath === filePath && pendingSelection.side === side) {
+      return line >= pendingSelection.startLine && line <= pendingSelection.endLine;
+    }
+    for (const thread of fileThreads) {
+      if (thread.side === side && line >= thread.startLine && line <= thread.endLine && thread.status === 'open') {
+        return true;
+      }
+    }
+    return false;
+  }, [isLineInSelection, pendingSelection, filePath, fileThreads]);
+
+
+  const syntaxMap = useMemo(() => {
+    if (!highlightLine) {
+      return undefined;
+    }
+
+    const map = new Map<string, SyntaxToken[]>();
+
+    for (const hunk of file.hunks) {
+      for (const line of hunk.lines) {
+        const highlighted = highlightLine(line.content);
+        if (highlighted && highlighted.length > 0) {
+          const num = line.type === 'delete' ? line.oldLineNumber : line.newLineNumber;
+          const key = `${line.type}-${num}`;
+          map.set(key, highlighted[0].tokens);
+        }
+      }
+    }
+
+    return map;
+  }, [file, highlightLine]);
+
+  const gaps = useMemo(() => {
+    if (isNewFile) {
+      return [];
+    }
+    return computeGaps(file.hunks, fileLineCount);
+  }, [file.hunks, fileLineCount, isNewFile]);
+
+  const gapMap = useMemo(() => {
+    const map = new Map<string, ExpandableGap>();
+    for (const gap of gaps) {
+      map.set(gap.id, gap);
+    }
+    return map;
+  }, [gaps]);
+
+  const handleExpand = useCallback(async (gap: ExpandableGap, direction: 'up' | 'down' | 'all') => {
+    setLoadingGap(gap.id);
+
+    const lines = await queryClient.ensureQueryData(
+      fileContentOptions(fileContentPath, true, baseRef)
+    );
+
+    setExpansions(prev => {
+      const next = new Map(prev);
+      const existing = next.get(gap.id) || { fromTop: 0, fromBottom: 0, linesFromTop: [], linesFromBottom: [] };
+      const newOffset = gap.newStart - gap.oldStart;
+      const range = getExpandRange(gap, direction, existing);
+
+      if (!range) {
+        return prev;
+      }
+
+      const contextLines = createContextLines(lines, range.oldStart, range.oldEnd, newOffset);
+
+      if (direction === 'all') {
+        next.set(gap.id, {
+          fromTop: gap.oldEnd - gap.oldStart + 1,
+          fromBottom: 0,
+          linesFromTop: contextLines,
+          linesFromBottom: [],
+        });
+      } else if (direction === 'down') {
+        const newExpansion = {
+          ...existing,
+          fromTop: existing.fromTop + (range.oldEnd - range.oldStart + 1),
+          linesFromTop: [...existing.linesFromTop, ...contextLines],
+        };
+        next.set(gap.id, newExpansion);
+      } else {
+        const newExpansion = {
+          ...existing,
+          fromBottom: existing.fromBottom + (range.oldEnd - range.oldStart + 1),
+          linesFromBottom: [...contextLines, ...existing.linesFromBottom],
+        };
+        next.set(gap.id, newExpansion);
+      }
+
+      return next;
+    });
+
+    setLoadingGap(null);
+  }, [fileContentPath, queryClient, baseRef]);
+
+  const getGapRemaining = useCallback((gap: ExpandableGap): { total: number; up: number; down: number } => {
+    const expansion = expansions.get(gap.id);
+    if (!expansion) {
+      return { total: gap.totalLines, up: gap.totalLines, down: gap.totalLines };
+    }
+    const total = Math.max(0, gap.totalLines - expansion.fromTop - expansion.fromBottom);
+    const up = Math.max(0, gap.totalLines - expansion.fromTop);
+    const down = Math.max(0, gap.totalLines - expansion.fromBottom);
+    return { total, up, down };
+  }, [expansions]);
+
+  const getExpandControlsForHunk = useCallback((hunkIndex: number) => {
+    let gap: ExpandableGap | undefined;
+    let position: 'top' | 'between' = 'between';
+
+    if (hunkIndex === 0) {
+      gap = gapMap.get('top');
+      position = 'top';
+    } else {
+      gap = gapMap.get(`between-${hunkIndex - 1}`);
+      position = 'between';
+    }
+
+    if (!gap) {
+      return undefined;
+    }
+
+    const remaining = getGapRemaining(gap);
+    const wasExpanded = expansions.has(gap.id);
+
+    return {
+      position,
+      remainingLines: remaining.total,
+      remainingUp: remaining.up,
+      remainingDown: remaining.down,
+      loading: loadingGap === gap.id,
+      wasExpanded,
+      onExpand: (dir: 'up' | 'down' | 'all') => handleExpand(gap, dir),
+    };
+  }, [gapMap, getGapRemaining, loadingGap, handleExpand, expansions]);
+
+  const total = file.additions + file.deletions;
+  const addBlocks = total > 0 ? Math.round((file.additions / total) * Math.min(5, total)) : 0;
+  const delBlocks = total > 0 ? Math.min(5, total) - addBlocks : 0;
+  const neutralBlocks = 5 - addBlocks - delBlocks;
+
+  const bottomGap = gapMap.get('bottom');
+  const bottomRemaining = bottomGap ? getGapRemaining(bottomGap).total : 0;
+
+  const filePendingSelection = pendingSelection && pendingSelection.filePath === filePath ? pendingSelection : null;
+
+  return (
+    <div
+      className={`border rounded-lg mx-4 my-3 overflow-hidden ${highlighted ? 'animate-flash-highlight-border' : 'border-border'}`}
+      id={`file-${encodeURIComponent(filePath)}`}
+      onAnimationEnd={onHighlightEnd}
+    >
+      <div
+        className={`group flex items-center gap-2 px-3 py-1.5 border-border text-xs sticky top-0 z-10 shadow-sticky ${highlighted ? 'animate-flash-highlight' : 'bg-bg-secondary'}`}
+      >
+        <IconButton
+          className="text-[10px] w-4 h-4 shrink-0"
+          onClick={() => onToggleCollapse(filePath)}
+          title={collapsed ? 'Expand' : 'Collapse'}
+        >
+          {collapsed ? '\u25b6' : '\u25bc'}
+        </IconButton>
+        <button
+          className="font-mono text-xs truncate text-left cursor-pointer hover:text-accent transition-colors"
+          onClick={() => onToggleCollapse(filePath)}
+        >
+          {showRename ? (
+            <>
+              <span className="line-through text-text-muted">{file.oldPath}</span>
+              <span className="text-text-muted"> → </span>
+              <span>{file.newPath}</span>
+            </>
+          ) : (
+            filePath
+          )}
+        </button>
+        <button
+          onClick={() => copyPath(filePath)}
+          className="shrink-0 text-text-muted hover:text-text transition-colors cursor-pointer"
+          title="Copy file path"
+        >
+          {pathCopied ? (
+            <CheckIcon className="w-3 h-3 text-added" />
+          ) : (
+            <CopyIcon className="w-3 h-3" />
+          )}
+        </button>
+        {file.status !== 'modified' && <StatusBadge status={file.status} />}
+        {file.isBinary && <Badge className="bg-bg-tertiary text-text-muted">Binary</Badge>}
+        <div className="ml-auto flex items-center gap-2.5 shrink-0">
+          {(fileThreads.length + orphanedThreads.length) > 0 && (
+            <span className="text-[11px] text-text-muted flex items-center gap-1">
+              <CommentIcon className="w-3 h-3" />
+              {fileThreads.length + orphanedThreads.length}
+              {orphanedThreads.length > 0 && (
+                <ThreadBadge variant="outdated" size="sm">
+                  {orphanedThreads.length} outdated
+                </ThreadBadge>
+              )}
+            </span>
+          )}
+          <div className="flex items-center gap-1.5">
+            <DiffStats additions={file.additions} deletions={file.deletions} />
+            <div className="flex gap-px">
+              {Array.from({ length: addBlocks }).map((_, i) => (
+                <span key={`a${i}`} className="w-1.5 h-1.5 rounded-sm bg-added" />
+              ))}
+              {Array.from({ length: delBlocks }).map((_, i) => (
+                <span key={`d${i}`} className="w-1.5 h-1.5 rounded-sm bg-deleted" />
+              ))}
+              {Array.from({ length: neutralBlocks }).map((_, i) => (
+                <span key={`n${i}`} className="w-1.5 h-1.5 rounded-sm bg-border" />
+              ))}
+            </div>
+          </div>
+          <label className="flex items-center gap-1.5 text-[11px] text-text-muted cursor-pointer select-none hover:text-text transition-colors">
+            <input
+              type="checkbox"
+              checked={reviewed}
+              onChange={() => onReviewedChange(filePath, !reviewed)}
+              className="accent-added cursor-pointer w-3 h-3"
+            />
+            Viewed
+          </label>
+        </div>
+      </div>
+      {!collapsed && (
+        <div>
+          {file.isBinary ? (
+            <div className="p-4 text-center text-text-muted italic">Binary file not shown</div>
+          ) : file.hunks.length === 0 ? (
+            <div className="p-4 text-center text-text-muted italic">
+              {file.oldMode && file.newMode
+                ? `File mode changed from ${file.oldMode} to ${file.newMode}`
+                : 'No content changes'}
+            </div>
+          ) : isLargeDiff && !largeDiffExpanded ? (
+            <div className="flex items-center justify-center gap-3 py-6 px-4 text-sm text-text-muted">
+              <span>Large diff not rendered — {totalLines} lines</span>
+              <button
+                className="text-accent hover:underline cursor-pointer font-medium"
+                onClick={() => setLargeDiffExpanded(true)}
+              >
+                Load diff
+              </button>
+            </div>
+          ) : (
+            <>
+            <OrphanedThreads
+              threads={orphanedThreads}
+              onDeleteComment={deleteComment}
+              onDeleteThread={deleteThread}
+            />
+            <table className="w-full border-collapse table-fixed">
+              {viewMode === 'split' ? (
+                <colgroup>
+                  <col className="w-12.5" />
+                  <col className="w-[calc(50%-50px)]" />
+                  <col className="w-12.5" />
+                  <col />
+                </colgroup>
+              ) : (
+                <colgroup>
+                  <col className="w-12.5" />
+                  <col className="w-12.5" />
+                  <col className="w-5" />
+                  <col />
+                </colgroup>
+              )}
+              {file.hunks.map((hunk, i) => {
+                const betweenGap = i > 0 ? gapMap.get(`between-${i - 1}`) : undefined;
+                const betweenExpansion = betweenGap ? expansions.get(betweenGap.id) : undefined;
+                const topExpansion = i === 0 ? expansions.get('top') : undefined;
+
+                return (
+                  <HunkWithGap
+                    key={i}
+                    hunk={hunk}
+                    viewMode={viewMode}
+                    syntaxMap={syntaxMap}
+                    expandControls={getExpandControlsForHunk(i)}
+                    topExpansionLines={i === 0 ? [...(topExpansion?.linesFromTop ?? []), ...(topExpansion?.linesFromBottom ?? [])] : undefined}
+                    gapExpansion={betweenExpansion}
+                    gapId={betweenGap?.id}
+                    highlightLine={highlightLine}
+                    threads={fileThreads}
+                    pendingSelection={filePendingSelection}
+                    currentAuthor={DEFAULT_AUTHOR}
+                    isLineSelected={isLineSelected}
+                    onLineMouseDown={handleLineMouseDown}
+                    onLineMouseEnter={handleLineMouseEnter}
+                    onCommentClick={handleCommentClick}
+                    onAddThread={addThread}
+                    onReply={addReply}
+                    onResolve={resolveThread}
+                    onUnresolve={unresolveThread}
+                    onDeleteComment={deleteComment}
+                    onDeleteThread={deleteThread}
+                    onCancelPending={handleCancelPending}
+                    filePath={filePath}
+                    onRevertChange={canRevert ? (h: DiffHunk, startIndex: number, endIndex: number) => setConfirmRevertChange({ hunk: h, startIndex, endIndex }) : undefined}
+                    getOriginalCode={getOriginalCode}
+                  />
+                );
+              })}
+              {bottomGap && (() => {
+                const bottomExpansion = expansions.get('bottom');
+                const bottomLines = [
+                  ...(bottomExpansion?.linesFromTop ?? []),
+                  ...(bottomExpansion?.linesFromBottom ?? []),
+                ];
+                const bottomSyntaxMap = buildExpansionSyntaxMap(bottomLines, highlightLine);
+                const bottomCommentProps = {
+                  isLineSelected, onLineMouseDown: handleLineMouseDown, onLineMouseEnter: handleLineMouseEnter,
+                  onCommentClick: handleCommentClick, threads: fileThreads, pendingSelection: filePendingSelection,
+                  currentAuthor: DEFAULT_AUTHOR, onAddThread: addThread, onReply: addReply,
+                  onResolve: resolveThread, onUnresolve: unresolveThread, onDeleteComment: deleteComment,
+                  onDeleteThread: deleteThread, onCancelPending: handleCancelPending, filePath,
+                  getOriginalCode,
+                };
+                return (
+                  <tbody>
+                    {bottomExpansion?.linesFromTop && bottomExpansion.linesFromTop.length > 0 &&
+                      renderExpansionRows(bottomExpansion.linesFromTop, viewMode, 'bottom-top', bottomSyntaxMap, bottomCommentProps)}
+                    <ExpandRow
+                      position="bottom"
+                      remainingLines={bottomRemaining}
+                      loading={loadingGap === 'bottom'}
+                      onExpand={(dir) => handleExpand(bottomGap, dir)}
+                    />
+                    {bottomExpansion?.linesFromBottom && bottomExpansion.linesFromBottom.length > 0 &&
+                      renderExpansionRows(bottomExpansion.linesFromBottom, viewMode, 'bottom-bot', bottomSyntaxMap, bottomCommentProps)}
+                  </tbody>
+                );
+              })()}
+            </table>
+            </>
+          )}
+        </div>
+      )}
+      {confirmRevertChange && (
+        <ConfirmDialog
+          title="Undo change"
+          message="This will undo the selected change. This cannot be undone."
+          onConfirm={() => handleRevertChange(confirmRevertChange)}
+          onCancel={() => setConfirmRevertChange(null)}
+        />
+      )}
+    </div>
+  );
+}

package/packages/ui/src/components/file-tree-item.tsx

@@ -0,0 +1,84 @@
+import type { TreeNode } from '../lib/file-tree';
+import { cn } from '../lib/cn';
+import { DiffStats } from './diff-stats';
+import { StatusBadge } from './ui/status-badge';
+import { ChevronIcon } from './icons/chevron-icon';
+import { FolderIcon } from './icons/folder-icon';
+import { CommentIcon } from './icons/comment-icon';
+
+interface FileTreeItemProps {
+  node: TreeNode;
+  depth: number;
+  activeFile: string | null;
+  reviewedFiles: Set<string>;
+  filesWithComments: Set<string>;
+  expandedDirs: Set<string>;
+  onToggleDir: (path: string) => void;
+  onFileClick: (path: string) => void;
+}
+
+export function FileTreeItem(props: FileTreeItemProps) {
+  const { node, depth, activeFile, reviewedFiles, filesWithComments, expandedDirs, onToggleDir, onFileClick } = props;
+  const paddingLeft = depth * 12 + 8;
+
+  if (node.type === 'dir') {
+    const isExpanded = expandedDirs.has(node.path);
+    return (
+      <>
+        <button
+          className="flex items-center gap-1.5 w-full py-1 pr-2 text-left text-[13px] hover:bg-hover cursor-pointer"
+          style={{ paddingLeft: `${paddingLeft}px` }}
+          onClick={() => onToggleDir(node.path)}
+        >
+          <ChevronIcon expanded={isExpanded} />
+          <FolderIcon open={isExpanded} />
+          <span className="truncate font-medium text-text-secondary">{node.name}</span>
+        </button>
+        {isExpanded && node.children.map(child => (
+          <FileTreeItem
+            key={child.path}
+            node={child}
+            depth={depth + 1}
+            activeFile={activeFile}
+            reviewedFiles={reviewedFiles}
+            filesWithComments={filesWithComments}
+            expandedDirs={expandedDirs}
+            onToggleDir={onToggleDir}
+            onFileClick={onFileClick}
+          />
+        ))}
+      </>
+    );
+  }
+
+  const isActive = activeFile === node.path;
+  const isReviewed = reviewedFiles.has(node.path);
+  const hasComments = filesWithComments.has(node.path);
+
+  return (
+    <button
+      className={cn(
+        'flex items-center gap-1.5 w-full py-1 pr-2 text-left text-[13px] cursor-pointer border-l-2',
+        isActive
+          ? 'bg-active border-l-accent'
+          : 'border-l-transparent hover:bg-hover',
+        isReviewed && 'opacity-50'
+      )}
+      style={{ paddingLeft: `${paddingLeft + 15}px` }}
+      onClick={() => onFileClick(node.path)}
+    >
+      <StatusBadge status={node.file.status} compact />
+      <span className={cn('flex-1 min-w-0 truncate', isReviewed && 'line-through')}>
+        {node.name}
+      </span>
+      {hasComments && (
+        <CommentIcon className="w-3 h-3 text-accent shrink-0" />
+      )}
+      {isReviewed ? (
+        <span className="text-added text-[10px] shrink-0" title="Viewed">&#10003;</span>
+      ) : (
+        <DiffStats additions={node.file.additions} deletions={node.file.deletions} />
+      )}
+    </button>
+  );
+}

package/packages/ui/src/components/file-tree.tsx

@@ -0,0 +1,72 @@
+import { useMemo, useState, useCallback, useRef } from 'react';
+import type { DiffFile } from '@diffity/parser';
+import {
+  buildFileTree,
+  collapseSingleChildDirs,
+  sortTree,
+  filterTree,
+  collectAllDirPaths,
+} from '../lib/file-tree';
+import { FileTreeItem } from './file-tree-item';
+
+interface FileTreeProps {
+  files: DiffFile[];
+  search: string;
+  activeFile: string | null;
+  reviewedFiles: Set<string>;
+  filesWithComments: Set<string>;
+  onFileClick: (path: string) => void;
+}
+
+export function FileTree(props: FileTreeProps) {
+  const { files, search, activeFile, reviewedFiles, filesWithComments, onFileClick } = props;
+
+  const tree = useMemo(() => {
+    return sortTree(collapseSingleChildDirs(buildFileTree(files)));
+  }, [files]);
+
+  const prevTreeRef = useRef(tree);
+  const [expandedDirs, setExpandedDirs] = useState<Set<string>>(() => new Set(collectAllDirPaths(tree)));
+
+  if (prevTreeRef.current !== tree) {
+    prevTreeRef.current = tree;
+    setExpandedDirs(new Set(collectAllDirPaths(tree)));
+  }
+
+  const displayTree = useMemo(() => {
+    if (!search) {
+      return tree;
+    }
+    return filterTree(tree, search);
+  }, [tree, search]);
+
+  const handleToggleDir = useCallback((path: string) => {
+    setExpandedDirs(prev => {
+      const next = new Set(prev);
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      return next;
+    });
+  }, []);
+
+  return (
+    <div className="flex-1 overflow-y-auto py-1">
+      {displayTree.map(node => (
+        <FileTreeItem
+          key={node.path}
+          node={node}
+          depth={0}
+          activeFile={activeFile}
+          reviewedFiles={reviewedFiles}
+          filesWithComments={filesWithComments}
+          expandedDirs={expandedDirs}
+          onToggleDir={handleToggleDir}
+          onFileClick={onFileClick}
+        />
+      ))}
+    </div>
+  );
+}