diffity 0.1.0

package/packages/ui/src/components/dashboard.tsx

@@ -0,0 +1,84 @@
+import { useOverview } from '../hooks/use-overview';
+import { useCommits } from '../hooks/use-commits';
+import { useInfo } from '../hooks/use-info';
+import { OverviewFileList } from './overview-file-list';
+import { CommitList } from './commit-list';
+import { CheckCircleIcon } from './icons/check-circle-icon';
+import { PageLoader } from './skeleton';
+
+interface DashboardProps {
+  onNavigate: (ref: string) => void;
+}
+
+export function Dashboard(props: DashboardProps) {
+  const { onNavigate } = props;
+  const { data: overview, loading: overviewLoading, error } = useOverview();
+  const { data: commitsPage, loading: commitsLoading } = useCommits();
+  const { data: info, loading: infoLoading } = useInfo();
+
+  const anyLoading = overviewLoading || commitsLoading || infoLoading;
+
+  if (error) {
+    return (
+      <div className="flex flex-col min-h-screen bg-bg text-text font-sans">
+        <div className="flex flex-col items-center justify-center p-12 text-deleted text-center">
+          <h2 className="text-xl mb-2">Failed to load overview</h2>
+          <p className="text-text-secondary">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (anyLoading || !overview) {
+    return <PageLoader />;
+  }
+
+  const isClean = overview.files.length === 0;
+
+  return (
+    <div className="flex flex-col min-h-screen bg-bg text-text font-sans">
+      <div className="border-b border-border bg-bg-secondary px-6 py-4">
+        <div className="max-w-4xl mx-auto flex items-center gap-3">
+          {info?.name && (
+            <span className="font-semibold text-lg text-accent">{info.name}</span>
+          )}
+          {info?.branch && (
+            <span className="px-2 py-0.5 bg-diff-hunk-bg text-diff-hunk-text rounded-md font-mono text-xs">
+              {info.branch}
+            </span>
+          )}
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto">
+        <div className="max-w-4xl mx-auto px-6 py-6 space-y-6">
+          {isClean ? (
+            <div className="flex flex-col items-center justify-center py-16 text-text-muted text-center gap-3">
+              <div className="text-added opacity-50 mb-2">
+                <CheckCircleIcon />
+              </div>
+              <h2 className="text-xl text-text-secondary">Working tree is clean</h2>
+              <p>No changes to display.</p>
+            </div>
+          ) : (
+            <OverviewFileList
+              files={overview.files}
+              onViewAll={() => onNavigate('work')}
+            />
+          )}
+
+          <div className="border border-border rounded-lg bg-bg-secondary overflow-hidden">
+            <div className="px-4 py-3 border-b border-border">
+              <h3 className="font-medium text-text">Recent commits</h3>
+            </div>
+            <CommitList
+              initialCommits={commitsPage?.commits ?? []}
+              initialHasMore={commitsPage?.hasMore ?? false}
+              onCommitClick={(hash) => onNavigate(hash)}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/packages/ui/src/components/diff-line.tsx

@@ -0,0 +1,90 @@
+import type { DiffLine as DiffLineType } from '@diffity/parser';
+import { cn } from '../lib/cn';
+import { getLineBg } from '../lib/diff-utils';
+import { renderContent } from '../lib/render-content';
+import type { SyntaxToken } from '../lib/syntax-token';
+import { CommentLineNumber } from './comment-line-number';
+import { UndoIcon } from './icons/undo-icon';
+import type { CommentSide } from '../types/comment';
+
+export type { SyntaxToken };
+
+interface DiffLineProps {
+  line: DiffLineType;
+  syntaxTokens?: SyntaxToken[];
+  expanded?: boolean;
+  isSelected?: boolean;
+  onLineMouseDown?: (line: number, side: CommentSide) => void;
+  onLineMouseEnter?: (line: number, side: CommentSide) => void;
+  onCommentClick?: (line: number, side: CommentSide) => void;
+  onUndo?: () => void;
+}
+
+function getPrefix(type: string): string {
+  switch (type) {
+    case 'add':
+      return '+';
+    case 'delete':
+      return '-';
+    default:
+      return ' ';
+  }
+}
+
+function getPrefixColor(type: string): string {
+  switch (type) {
+    case 'add':
+      return 'text-added';
+    case 'delete':
+      return 'text-deleted';
+    default:
+      return 'text-text-muted';
+  }
+}
+
+export function DiffLine(props: DiffLineProps) {
+  const { line, syntaxTokens, expanded, isSelected, onLineMouseDown, onLineMouseEnter, onCommentClick, onUndo } = props;
+
+  const side: CommentSide = line.type === 'delete' ? 'old' : 'new';
+  const activeLine = side === 'old' ? line.oldLineNumber : line.newLineNumber;
+  const gutterBg = expanded ? 'bg-diff-expanded-gutter' : '';
+
+  return (
+    <tr className={cn('group/row font-mono text-sm leading-6 hover:brightness-[0.97]', expanded ? 'bg-diff-expanded-bg' : getLineBg(line.type))}>
+      <CommentLineNumber
+        lineNumber={line.oldLineNumber}
+        className={cn('border-r border-border-muted', gutterBg)}
+        showCommentButton={!!onCommentClick && line.type === 'delete' && line.oldLineNumber !== null}
+        isSelected={isSelected && side === 'old'}
+        onMouseDown={line.oldLineNumber !== null ? () => onLineMouseDown?.(line.oldLineNumber!, line.type === 'delete' ? 'old' : 'new') : undefined}
+        onMouseEnter={line.oldLineNumber !== null ? () => onLineMouseEnter?.(line.oldLineNumber!, line.type === 'delete' ? 'old' : 'new') : undefined}
+        onCommentClick={line.oldLineNumber !== null && line.type === 'delete' ? () => onCommentClick?.(line.oldLineNumber!, 'old') : undefined}
+      />
+      <CommentLineNumber
+        lineNumber={line.newLineNumber}
+        className={cn('border-r border-border-muted', gutterBg)}
+        showCommentButton={!!onCommentClick && line.type !== 'delete' && line.newLineNumber !== null}
+        isSelected={isSelected && side === 'new'}
+        onMouseDown={line.newLineNumber !== null ? () => onLineMouseDown?.(line.newLineNumber!, line.type === 'delete' ? 'old' : 'new') : undefined}
+        onMouseEnter={line.newLineNumber !== null ? () => onLineMouseEnter?.(line.newLineNumber!, line.type === 'delete' ? 'old' : 'new') : undefined}
+        onCommentClick={line.newLineNumber !== null && line.type !== 'delete' ? () => onCommentClick?.(line.newLineNumber!, 'new') : undefined}
+      />
+      <td className={cn('w-5 min-w-5 px-1 text-center select-none align-top', getPrefixColor(line.type), isSelected && 'bg-diff-comment-bg')}>
+        {getPrefix(line.type)}
+      </td>
+      <td className={cn('px-3 whitespace-pre-wrap break-all relative', isSelected && 'bg-diff-comment-bg')}>
+        <span className="inline">{renderContent(line, syntaxTokens)}</span>
+        {onUndo && (
+          <button
+            onClick={onUndo}
+            className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1 px-2 py-0.5 text-xs rounded bg-deleted/15 text-deleted hover:bg-deleted/25 transition-colors cursor-pointer opacity-0 group-hover/row:opacity-100"
+            title="Undo this change"
+          >
+            <UndoIcon className="w-3 h-3" />
+            Undo
+          </button>
+        )}
+      </td>
+    </tr>
+  );
+}

package/packages/ui/src/components/diff-page.tsx

@@ -0,0 +1,332 @@
+import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useDiff } from '../hooks/use-diff';
+import { useInfo } from '../hooks/use-info';
+import { useTheme } from '../hooks/use-theme';
+import { useKeyboard } from '../hooks/use-keyboard';
+import { useReviewThreads } from '../hooks/use-review-threads';
+import { useCommentActions } from '../hooks/use-comment-actions';
+import { SummaryBar } from './summary-bar';
+import { Toolbar } from './toolbar';
+import { DiffView, type DiffViewHandle } from './diff-view';
+import { Sidebar } from './sidebar';
+import { ShortcutModal } from './shortcut-modal';
+import { StaleDiffBanner } from './stale-diff-banner';
+import { CheckCircleIcon } from './icons/check-circle-icon';
+import { PageLoader } from './skeleton';
+import { useDiffStaleness } from '../hooks/use-diff-staleness';
+import { type ViewMode, getFilePath, getAutoCollapsedPaths, isWorkingTreeRef } from '../lib/diff-utils';
+import { getHunkHeaders, scrollToElement } from '../lib/dom-utils';
+import type { LineSelection } from '../types/comment';
+import { isThreadResolved } from '../types/comment';
+
+interface DiffPageProps {
+  refParam?: string;
+  initialTheme?: 'light' | 'dark' | null;
+  initialViewMode?: 'split' | 'unified' | null;
+}
+
+export function DiffPage(props: DiffPageProps) {
+  const { refParam, initialTheme, initialViewMode } = props;
+
+  const [viewMode, setViewMode] = useState<ViewMode>(initialViewMode || 'split');
+  const [hideWhitespace, setHideWhitespace] = useState(false);
+  const [showHelp, setShowHelp] = useState(false);
+  const { theme, toggleTheme } = useTheme(initialTheme);
+  const { data: diff, loading: diffLoading, error } = useDiff(hideWhitespace, refParam);
+  const { data: info, loading: infoLoading } = useInfo(refParam);
+  const [activeFile, setActiveFile] = useState<string | null>(null);
+  const [reviewedFiles, setReviewedFiles] = useState<Set<string>>(new Set());
+  const [collapsedFiles, setCollapsedFiles] = useState<Set<string>>(new Set());
+  const [pendingSelection, setPendingSelection] = useState<LineSelection | null>(null);
+  const mainRef = useRef<HTMLElement | null>(null);
+  const diffViewRef = useRef<DiffViewHandle>(null);
+  const currentFileIdx = useRef(0);
+  const initializedDiffRef = useRef<typeof diff>(null);
+
+  const reviewsEnabled = !!info?.capabilities?.reviews;
+  const sessionId = info?.sessionId ?? null;
+  const isWorkingTree = isWorkingTreeRef(refParam);
+  const { isStale, resetStaleness } = useDiffStaleness(refParam, isWorkingTree);
+
+  const { data: serverThreads, isFetched: threadsFetched } = useReviewThreads(reviewsEnabled ? sessionId : null);
+  const threads = reviewsEnabled && serverThreads ? serverThreads : [];
+  const commentActions = useCommentActions(sessionId, reviewsEnabled);
+
+  const filesWithComments = useMemo(() => {
+    const paths = new Set<string>();
+    for (const thread of threads) {
+      if (!isThreadResolved(thread)) {
+        paths.add(thread.filePath);
+      }
+    }
+    return paths;
+  }, [threads]);
+
+  const handleAddThread = useCallback((...args: Parameters<typeof commentActions.addThread>) => {
+    commentActions.addThread(...args);
+    setPendingSelection(null);
+  }, [commentActions]);
+
+  useEffect(() => {
+    if (!diff || diff === initializedDiffRef.current) {
+      return;
+    }
+    initializedDiffRef.current = diff;
+
+    const autoCollapsed = getAutoCollapsedPaths(diff.files);
+    if (autoCollapsed.size > 0) {
+      setCollapsedFiles(autoCollapsed);
+    }
+  }, [diff]);
+
+  const handleToggleCollapse = useCallback((path: string) => {
+    setCollapsedFiles((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      return next;
+    });
+  }, []);
+
+  const handleReviewedChange = useCallback((path: string, reviewed: boolean) => {
+    setReviewedFiles((prev) => {
+      const next = new Set(prev);
+      if (reviewed) {
+        next.add(path);
+      } else {
+        next.delete(path);
+      }
+      return next;
+    });
+    if (reviewed) {
+      setCollapsedFiles((prev) => {
+        const next = new Set(prev);
+        next.add(path);
+        return next;
+      });
+    } else {
+      setCollapsedFiles((prev) => {
+        const next = new Set(prev);
+        next.delete(path);
+        return next;
+      });
+    }
+  }, []);
+
+  const getCurrentFilePath = useCallback((): string | null => {
+    if (!diff) {
+      return null;
+    }
+    return getFilePath(diff.files[currentFileIdx.current]);
+  }, [diff]);
+
+  const navigateFile = useCallback((direction: number) => {
+    if (!diff) {
+      return;
+    }
+    const nextIdx = Math.max(0, Math.min(diff.files.length - 1, currentFileIdx.current + direction));
+    currentFileIdx.current = nextIdx;
+    const path = getFilePath(diff.files[nextIdx]);
+    diffViewRef.current?.scrollToFile(path);
+  }, [diff]);
+
+  const navigateHunk = useCallback((direction: number) => {
+    const hunks = getHunkHeaders();
+    if (hunks.length === 0) {
+      return;
+    }
+    let target = direction > 0 ? hunks[0] : hunks[hunks.length - 1];
+
+    for (let i = 0; i < hunks.length; i++) {
+      const rect = hunks[i].getBoundingClientRect();
+      if (direction > 0 && rect.top > 100) {
+        target = hunks[i];
+        break;
+      }
+      if (direction < 0 && rect.top < -10) {
+        target = hunks[i];
+      }
+    }
+
+    scrollToElement(target);
+  }, []);
+
+  useKeyboard({
+    onNextFile: () => navigateFile(1),
+    onPrevFile: () => navigateFile(-1),
+    onNextHunk: () => navigateHunk(1),
+    onPrevHunk: () => navigateHunk(-1),
+    onToggleCollapse: () => {
+      const path = getCurrentFilePath();
+      if (path) {
+        handleToggleCollapse(path);
+      }
+    },
+    onCollapseAll: () => {
+      if (!diff) {
+        return;
+      }
+      const allPaths = diff.files.map((f) => getFilePath(f));
+      const anyExpanded = allPaths.some((p) => !collapsedFiles.has(p));
+      if (anyExpanded) {
+        setCollapsedFiles(new Set(allPaths));
+      } else {
+        setCollapsedFiles(new Set());
+      }
+    },
+    onToggleReviewed: () => {
+      const path = getCurrentFilePath();
+      if (!path) {
+        return;
+      }
+      const wasReviewed = reviewedFiles.has(path);
+      handleReviewedChange(path, !wasReviewed);
+      if (!wasReviewed) {
+        navigateFile(1);
+      }
+    },
+    onUnifiedView: () => setViewMode('unified'),
+    onSplitView: () => setViewMode('split'),
+    onShowHelp: () => setShowHelp(true),
+    onFocusSearch: () => {
+      const input = document.querySelector(
+        'input[placeholder="Filter files..."]',
+      ) as HTMLInputElement;
+      if (input) {
+        input.focus();
+      }
+    },
+    onEscape: () => setShowHelp(false),
+  });
+
+  const queryClient = useQueryClient();
+  const canRevert = useMemo(() => isWorkingTreeRef(refParam), [refParam]);
+
+  const handleRevert = useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: ['diff'] });
+  }, [queryClient]);
+
+  const handleRefreshDiff = useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: ['diff'] });
+    resetStaleness();
+  }, [queryClient, resetStaleness]);
+
+  const handleSidebarFileClick = useCallback((path: string) => {
+    setActiveFile(path);
+    diffViewRef.current?.scrollToFile(path);
+  }, []);
+
+  const handleScrollToThread = useCallback((threadId: string, filePath: string) => {
+    diffViewRef.current?.scrollToThread(threadId, filePath);
+  }, []);
+
+  const handleActiveFileFromScroll = useCallback((path: string) => {
+    setActiveFile(path);
+  }, []);
+
+  if (error) {
+    return (
+      <div className="flex flex-col min-h-screen bg-bg text-text font-sans">
+        <div className="flex flex-col items-center justify-center p-12 text-deleted text-center">
+          <h2 className="text-xl mb-2">Failed to load diff</h2>
+          <p className="text-text-secondary">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  const threadsLoading = reviewsEnabled && !threadsFetched;
+  if ((diffLoading || infoLoading || threadsLoading) && !diff) {
+    return <PageLoader />;
+  }
+
+  if (!info || threadsLoading) {
+    return <PageLoader />;
+  }
+
+  if (diff && diff.files.length === 0 && !diffLoading) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen bg-bg text-text font-sans gap-2">
+        <div className="text-added opacity-40 mb-1">
+          <CheckCircleIcon />
+        </div>
+        <h2 className="text-base font-medium text-text-secondary">No changes found</h2>
+        <p className="text-xs text-text-muted">There are no differences to display.</p>
+        <div className="mt-4 flex flex-col gap-1.5 items-center">
+          <p className="text-xs text-text-muted mb-1">Try one of these</p>
+          <code className="inline-block px-3 py-1 bg-bg-secondary border border-border rounded-md font-mono text-xs text-text">
+            diffity HEAD~1
+          </code>
+          <code className="inline-block px-3 py-1 bg-bg-secondary border border-border rounded-md font-mono text-xs text-text">
+            diffity main..feature
+          </code>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-screen bg-bg text-text font-sans">
+      <SummaryBar
+        diff={diff}
+        repoName={info?.name || null}
+        branch={info?.branch || null}
+        description={info?.description || null}
+      />
+      <Toolbar
+        viewMode={viewMode}
+        onViewModeChange={setViewMode}
+        hideWhitespace={hideWhitespace}
+        onHideWhitespaceChange={setHideWhitespace}
+        theme={theme}
+        onToggleTheme={toggleTheme}
+        onShowHelp={() => setShowHelp(true)}
+        diff={diff || undefined}
+        diffRef={refParam}
+        threads={threads}
+        onDeleteAllComments={commentActions.deleteAllThreads}
+        onScrollToThread={handleScrollToThread}
+      />
+      {isStale && <StaleDiffBanner onRefresh={handleRefreshDiff} />}
+      <div className="flex flex-1 overflow-hidden">
+        <Sidebar
+          files={diff?.files || []}
+          activeFile={activeFile}
+          reviewedFiles={reviewedFiles}
+          filesWithComments={filesWithComments}
+          onFileClick={handleSidebarFileClick}
+        />
+        {diff ? (
+          <DiffView
+            diff={diff}
+            viewMode={viewMode}
+            theme={theme}
+            collapsedFiles={collapsedFiles}
+            onToggleCollapse={handleToggleCollapse}
+            reviewedFiles={reviewedFiles}
+            onReviewedChange={handleReviewedChange}
+            onActiveFileChange={handleActiveFileFromScroll}
+            handle={diffViewRef}
+            baseRef={refParam}
+            canRevert={canRevert}
+            onRevert={handleRevert}
+            scrollRef={(node) => {
+              mainRef.current = node;
+            }}
+            threads={threads}
+            commentsEnabled={reviewsEnabled}
+            commentActions={commentActions}
+            onAddThread={handleAddThread}
+            pendingSelection={pendingSelection}
+            onPendingSelectionChange={setPendingSelection}
+          />
+        ) : null}
+      </div>
+      {showHelp && <ShortcutModal onClose={() => setShowHelp(false)} />}
+    </div>
+  );
+}

package/packages/ui/src/components/diff-stats.tsx

@@ -0,0 +1,20 @@
+interface DiffStatsProps {
+  additions: number;
+  deletions: number;
+  className?: string;
+}
+
+export function DiffStats(props: DiffStatsProps) {
+  const { additions, deletions, className = '' } = props;
+
+  return (
+    <span className={`flex gap-1 shrink-0 font-mono text-xs ${className}`}>
+      {additions > 0 && (
+        <span className="text-added font-semibold">+{additions}</span>
+      )}
+      {deletions > 0 && (
+        <span className="text-deleted font-semibold">-{deletions}</span>
+      )}
+    </span>
+  );
+}