diffity 0.1.0

package/packages/ui/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@diffity/ui",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.2.1",
+    "@tanstack/react-query": "^5.90.21",
+    "@tanstack/react-virtual": "^3.13.22",
+    "clsx": "^2.1.1",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-hotkeys-hook": "^5.2.4",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
+    "shiki": "^4.0.2",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.1"
+  },
+  "devDependencies": {
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "@vitejs/plugin-react": "latest",
+    "typescript": "latest",
+    "vite": "latest",
+    "vitest": "^4.1.0"
+  }
+}

package/packages/ui/public/brand.svg

@@ -0,0 +1,12 @@
+<svg width="411" height="395" viewBox="0 0 411 395" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .bubble { fill: white; }
+  .text { fill: black; }
+  @media (prefers-color-scheme: light) {
+    .bubble { fill: black; }
+    .text { fill: white; }
+  }
+</style>
+<path class="bubble" d="M0.0505394 178.855C6.76429 71.9657 97.6316 0 205.839 0C315.66 0 410.839 71.6797 410.839 166.889C410.839 253.623 331.853 320.83 234.765 332.109L262.001 369.673C265.392 374.351 265.873 380.536 263.247 385.684C260.621 390.831 255.332 394.072 249.553 394.072C185.518 394.072 123.058 374.827 76.4811 338.337C29.5845 301.595 -0.929973 247.475 0.0216367 179.605C0.0253267 179.355 0.0347544 179.105 0.0505394 178.855Z"/>
+<path class="text" d="M122.036 232.224C110.816 232.224 101.942 228.654 95.414 221.514C88.988 214.374 85.775 203.919 85.775 190.149C85.775 180.969 87.101 173.676 89.753 168.27C92.405 162.864 96.077 159.039 100.769 156.795C105.563 154.449 110.969 153.276 116.987 153.276C122.393 153.276 126.779 153.939 130.145 155.265C133.511 156.591 136.163 158.835 138.101 161.997C137.387 159.855 136.826 157.866 136.418 156.03C136.112 154.092 135.857 151.848 135.653 149.298C135.551 146.748 135.5 143.484 135.5 139.506V126.348C135.5 118.392 138.917 114.414 145.751 114.414C153.197 114.414 156.92 118.392 156.92 126.348V191.067C156.92 204.837 153.86 215.139 147.74 221.973C141.62 228.807 133.052 232.224 122.036 232.224ZM120.965 213.864C125.249 213.864 128.564 212.334 130.91 209.274C133.358 206.214 134.582 200.502 134.582 192.138C134.582 186.528 134.021 182.295 132.899 179.439C131.879 176.481 130.349 174.441 128.309 173.319C126.269 172.197 123.821 171.636 120.965 171.636C118.109 171.636 115.661 172.197 113.621 173.319C111.581 174.441 110 176.481 108.878 179.439C107.858 182.295 107.348 186.528 107.348 192.138C107.348 200.502 108.521 206.214 110.867 209.274C113.315 212.334 116.681 213.864 120.965 213.864ZM184.448 140.118C180.674 140.118 177.512 138.894 174.962 136.446C172.412 133.998 171.137 130.989 171.137 127.419C171.137 123.645 172.412 120.534 174.962 118.086C177.512 115.638 180.674 114.414 184.448 114.414C188.324 114.414 191.486 115.638 193.934 118.086C196.484 120.534 197.759 123.645 197.759 127.419C197.759 130.989 196.484 133.998 193.934 136.446C191.486 138.894 188.324 140.118 184.448 140.118ZM195.464 221.973C195.464 228.807 191.894 232.224 184.754 232.224C181.286 232.224 178.532 231.408 176.492 229.776C174.452 228.042 173.432 225.441 173.432 221.973V163.68C173.432 160.416 174.248 157.866 175.88 156.03C177.614 154.194 180.47 153.276 184.448 153.276C188.426 153.276 191.231 154.194 192.863 156.03C194.597 157.866 195.464 160.416 195.464 163.68V221.973ZM228.501 232.224C224.523 232.224 221.667 231.102 219.933 228.858C218.301 226.512 217.485 223.605 217.485 220.137V173.013H215.343C207.795 173.013 204.021 169.953 204.021 163.833C204.021 157.611 207.795 154.5 215.343 154.5H217.485V153.888C217.485 142.056 220.035 132.519 225.135 125.277C230.235 118.035 238.038 114.414 248.544 114.414C248.646 114.414 248.748 114.414 248.85 114.414H249.003C249.309 114.414 249.615 114.414 249.921 114.414C258.285 114.516 264.354 115.689 268.128 117.933C272.004 120.177 273.942 123.594 273.942 128.184C273.942 131.55 273.024 133.794 271.188 134.916C269.454 135.936 267.006 136.446 263.844 136.446C261.09 136.446 258.744 136.242 256.806 135.834C254.97 135.324 252.573 134.967 249.615 134.763H248.697C244.617 134.763 241.965 136.344 240.741 139.506C239.517 142.566 238.905 146.34 238.905 150.828V154.5H247.626C254.562 154.5 258.03 157.611 258.03 163.833C258.03 169.953 254.562 173.013 247.626 173.013H238.905V220.137C238.905 224.319 237.987 227.379 236.151 229.317C234.417 231.255 231.867 232.224 228.501 232.224ZM288.715 232.224C284.737 232.224 281.881 231.102 280.147 228.858C278.515 226.512 277.699 223.605 277.699 220.137V173.013H275.557C268.009 173.013 264.235 169.953 264.235 163.833C264.235 157.611 268.009 154.5 275.557 154.5H277.699V153.888C277.699 142.056 280.249 132.519 285.349 125.277C290.449 118.035 298.252 114.414 308.758 114.414C308.86 114.414 308.962 114.414 309.064 114.414H309.217C309.523 114.414 309.829 114.414 310.135 114.414C318.499 114.516 324.568 115.689 328.342 117.933C332.218 120.177 334.156 123.594 334.156 128.184C334.156 131.55 333.238 133.794 331.402 134.916C329.668 135.936 327.22 136.446 324.058 136.446C321.304 136.446 318.958 136.242 317.02 135.834C315.184 135.324 312.787 134.967 309.829 134.763H308.911C304.831 134.763 302.179 136.344 300.955 139.506C299.731 142.566 299.119 146.34 299.119 150.828V154.5H307.84C314.776 154.5 318.244 157.611 318.244 163.833C318.244 169.953 314.776 173.013 307.84 173.013H299.119V220.137C299.119 224.319 298.201 227.379 296.365 229.317C294.631 231.255 292.081 232.224 288.715 232.224Z"/>
+</svg>

package/packages/ui/public/favicon.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 411 395">
+  <style>
+    .bubble { fill: black }
+    .symbol { fill: white }
+    @media (prefers-color-scheme: dark) {
+      .bubble { fill: white }
+      .symbol { fill: black }
+    }
+  </style>
+  <path class="bubble" d="M0.0505394 178.855C6.76429 71.9657 97.6316 0 205.839 0C315.66 0 410.839 71.6797 410.839 166.889C410.839 253.623 331.853 320.83 234.765 332.109L262.001 369.673C265.392 374.351 265.873 380.536 263.247 385.684C260.621 390.831 255.332 394.072 249.553 394.072C185.518 394.072 123.058 374.827 76.4811 338.337C29.5845 301.595 -0.929973 247.475 0.0216367 179.605C0.0253267 179.355 0.0347544 179.105 0.0505394 178.855Z"/>
+  <g transform="translate(-12, 0)">
+  <path class="symbol" d="M166.35 159.819C160.895 159.819 156.496 158.51 153.152 155.893C149.984 153.101 148.401 149.001 148.401 143.592C148.401 138.008 149.984 133.908 153.152 131.291C156.496 128.673 160.895 127.365 166.35 127.365H200.666V109.829C200.666 104.245 201.986 99.8831 204.626 96.7424C207.442 93.6016 211.577 92.0312 217.032 92.0312C222.664 92.0312 226.799 93.6016 229.439 96.7424C232.079 99.8831 233.399 104.245 233.399 109.829V127.365H267.451C273.082 127.365 277.481 128.673 280.649 131.291C283.817 133.908 285.401 138.008 285.401 143.592C285.401 149.001 283.817 153.101 280.649 155.893C277.481 158.51 273.082 159.819 267.451 159.819H233.399V180.234C233.399 185.643 232.079 190.005 229.439 193.32C226.799 196.461 222.664 198.031 217.032 198.031C211.577 198.031 207.442 196.461 204.626 193.32C201.986 190.005 200.666 185.643 200.666 180.234V159.819H166.35Z"/>
+  <path class="symbol" d="M154.152 243.16C157.496 245.741 161.895 247.031 167.35 247.031H268.451C274.082 247.031 278.481 245.741 281.649 243.16C284.817 240.408 286.401 236.365 286.401 231.031C286.401 225.526 284.817 221.483 281.649 218.902C278.481 216.322 274.082 215.031 268.451 215.031H167.35C161.895 215.031 157.496 216.322 154.152 218.902C150.984 221.483 149.401 225.526 149.401 231.031C149.401 236.365 150.984 240.408 154.152 243.16Z"/>
+  </g>
+</svg>

package/packages/ui/src/app.tsx

@@ -0,0 +1,14 @@
+import { useSearchParams } from './hooks/use-search-params';
+import { DiffPage } from './components/diff-page';
+
+export function App() {
+  const { ref, theme, view } = useSearchParams();
+
+  return (
+    <DiffPage
+      refParam={ref ?? 'work'}
+      initialTheme={theme}
+      initialViewMode={view}
+    />
+  );
+}

package/packages/ui/src/components/comment-bubble.tsx

@@ -0,0 +1,78 @@
+import type { Comment } from '../types/comment';
+import { TrashIcon } from './icons/trash-icon';
+import { MarkdownContent } from './markdown-content';
+
+interface CommentBubbleProps {
+  comment: Comment;
+  onDelete: () => void;
+}
+
+function formatRelativeTime(dateStr: string): string {
+  const date = new Date(dateStr);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffSec = Math.floor(diffMs / 1000);
+  const diffMin = Math.floor(diffSec / 60);
+  const diffHr = Math.floor(diffMin / 60);
+  const diffDays = Math.floor(diffHr / 24);
+
+  if (diffSec < 60) {
+    return 'just now';
+  }
+  if (diffMin < 60) {
+    return `${diffMin}m ago`;
+  }
+  if (diffHr < 24) {
+    return `${diffHr}h ago`;
+  }
+  if (diffDays < 30) {
+    return `${diffDays}d ago`;
+  }
+  return date.toLocaleDateString();
+}
+
+function AuthorAvatar(props: { name: string; avatarUrl?: string; type: 'user' | 'agent' }) {
+  const { name, avatarUrl, type } = props;
+
+  if (avatarUrl) {
+    return (
+      <img src={avatarUrl} alt={name} className="w-5 h-5 rounded-full" />
+    );
+  }
+
+  const bgColor = type === 'agent' ? 'bg-accent' : 'bg-text-muted';
+  const initial = name.charAt(0).toUpperCase();
+
+  return (
+    <div className={`w-5 h-5 rounded-full ${bgColor} flex items-center justify-center text-white text-[10px] font-medium`}>
+      {initial}
+    </div>
+  );
+}
+
+export function CommentBubble(props: CommentBubbleProps) {
+  const { comment, onDelete } = props;
+
+  return (
+    <div className="px-3 py-2 border-b border-border last:border-b-0 group">
+      <div className="flex items-center gap-2 mb-1">
+        <AuthorAvatar name={comment.author.name} avatarUrl={comment.author.avatarUrl} type={comment.author.type} />
+        <span className="text-xs font-semibold text-text">{comment.author.name}</span>
+        {comment.author.type === 'agent' && (
+          <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-accent/15 text-accent font-medium">bot</span>
+        )}
+        <span className="text-[11px] text-text-muted">{formatRelativeTime(comment.createdAt)}</span>
+        <button
+          onClick={onDelete}
+          className="ml-auto text-text-muted hover:text-deleted opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
+          title="Delete comment"
+        >
+          <TrashIcon className="w-3.5 h-3.5" />
+        </button>
+      </div>
+      <div className="text-sm text-text pl-7">
+        <MarkdownContent content={comment.body} />
+      </div>
+    </div>
+  );
+}

package/packages/ui/src/components/comment-form-row.tsx

@@ -0,0 +1,58 @@
+import type { CommentAuthor, CommentSide } from '../types/comment';
+import { CommentForm } from './comment-form';
+
+interface CommentFormRowProps {
+  colSpan: number;
+  filePath: string;
+  side: CommentSide;
+  startLine: number;
+  endLine: number;
+  currentAuthor: CommentAuthor;
+  onSubmit: (filePath: string, side: CommentSide, startLine: number, endLine: number, body: string, author: CommentAuthor) => void;
+  onCancel: () => void;
+  viewMode?: 'unified' | 'split';
+}
+
+export function CommentFormRow(props: CommentFormRowProps) {
+  const { colSpan, filePath, side, startLine, endLine, currentAuthor, onSubmit, onCancel, viewMode } = props;
+
+  const lineLabel = startLine === endLine
+    ? `${startLine}`
+    : `${startLine} to ${endLine}`;
+
+  const formContent = (
+    <div className="max-w-[700px]">
+      <CommentForm
+        onSubmit={(body) => onSubmit(filePath, side, startLine, endLine, body, currentAuthor)}
+        onCancel={onCancel}
+        lineLabel={`Add a comment on line${startLine !== endLine ? 's' : ''} ${lineLabel}`}
+      />
+    </div>
+  );
+
+  if (viewMode === 'split') {
+    return (
+      <tr>
+        {side === 'old' ? (
+          <>
+            <td colSpan={colSpan} className="px-4 py-3 bg-bg-secondary">{formContent}</td>
+            <td colSpan={colSpan} className="bg-bg-secondary"></td>
+          </>
+        ) : (
+          <>
+            <td colSpan={colSpan} className="bg-bg-secondary"></td>
+            <td colSpan={colSpan} className="px-4 py-3 bg-bg-secondary border-l border-border">{formContent}</td>
+          </>
+        )}
+      </tr>
+    );
+  }
+
+  return (
+    <tr>
+      <td colSpan={colSpan} className="px-4 py-3 bg-bg-secondary">
+        {formContent}
+      </td>
+    </tr>
+  );
+}

package/packages/ui/src/components/comment-form.tsx

@@ -0,0 +1,78 @@
+import { useState, useRef, useEffect } from 'react';
+
+interface CommentFormProps {
+  onSubmit: (body: string) => void;
+  onCancel: () => void;
+  placeholder?: string;
+  submitLabel?: string;
+  autoFocus?: boolean;
+  lineLabel?: string;
+}
+
+export function CommentForm(props: CommentFormProps) {
+  const { onSubmit, onCancel, placeholder = 'Leave a comment', submitLabel = 'Comment', autoFocus = true, lineLabel } = props;
+  const [body, setBody] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (autoFocus && textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, [autoFocus]);
+
+  const handleSubmit = () => {
+    const trimmed = body.trim();
+    if (!trimmed) {
+      return;
+    }
+    onSubmit(trimmed);
+    setBody('');
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      handleSubmit();
+      return;
+    }
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      onCancel();
+    }
+  };
+
+  return (
+    <div className="border border-border rounded-lg overflow-hidden bg-bg">
+      {lineLabel && (
+        <div className="px-3 py-1.5 bg-bg-secondary border-b border-border">
+          <span className="text-xs text-text-secondary font-medium">{lineLabel}</span>
+        </div>
+      )}
+      <textarea
+        ref={textareaRef}
+        value={body}
+        onChange={(e) => setBody(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        rows={3}
+        className="w-full px-3 py-2 text-sm bg-bg text-text resize-y outline-none placeholder:text-text-muted min-h-[80px] font-mono"
+      />
+      <div className="flex items-center gap-2 px-3 py-2 bg-bg-secondary border-t border-border">
+        <div className="flex-1" />
+        <button
+          onClick={onCancel}
+          className="px-3 py-1.5 text-xs font-medium rounded-md border border-border text-text-secondary hover:bg-hover transition-colors cursor-pointer"
+        >
+          Cancel
+        </button>
+        <button
+          onClick={handleSubmit}
+          disabled={!body.trim()}
+          className="px-3 py-1.5 text-xs font-medium rounded-md bg-accent text-white hover:bg-accent-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
+        >
+          {submitLabel}
+        </button>
+      </div>
+    </div>
+  );
+}

package/packages/ui/src/components/comment-line-number.tsx

@@ -0,0 +1,60 @@
+import { cn } from '../lib/cn';
+import { PlusIcon } from './icons/plus-icon';
+
+interface CommentLineNumberProps {
+  lineNumber: number | null;
+  className?: string;
+  isSelected?: boolean;
+  onMouseDown?: () => void;
+  onMouseEnter?: () => void;
+  onCommentClick?: () => void;
+  showCommentButton?: boolean;
+  forceShowButton?: boolean;
+}
+
+const baseClass = 'w-12.5 min-w-12.5 px-2 text-right text-text-muted select-none cursor-pointer align-top text-xs leading-6 relative group/line';
+
+export function CommentLineNumber(props: CommentLineNumberProps) {
+  const { lineNumber, className, isSelected, onMouseDown, onMouseEnter, onCommentClick, showCommentButton, forceShowButton } = props;
+
+  return (
+    <td
+      className={cn(
+        baseClass,
+        className,
+        isSelected && 'bg-diff-comment-gutter',
+      )}
+      onMouseDown={(e) => {
+        if (onMouseDown && lineNumber !== null) {
+          e.preventDefault();
+          onMouseDown();
+        }
+      }}
+      onMouseEnter={() => {
+        if (onMouseEnter && lineNumber !== null) {
+          onMouseEnter();
+        }
+      }}
+    >
+      {showCommentButton && lineNumber !== null && (
+        <button
+          className={cn(
+            'absolute right-[-2px] top-0.5 w-5 h-5 flex items-center justify-center rounded bg-accent text-white cursor-pointer z-10 hover:bg-accent-hover',
+            forceShowButton ? 'opacity-100' : 'opacity-0 group-hover/row:opacity-100 group-hover/line:opacity-100',
+          )}
+          onClick={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            if (onCommentClick) {
+              onCommentClick();
+            }
+          }}
+          title="Add comment"
+        >
+          <PlusIcon className="w-2.5 h-2.5" />
+        </button>
+      )}
+      {lineNumber ?? ''}
+    </td>
+  );
+}

package/packages/ui/src/components/comment-thread.tsx

@@ -0,0 +1,209 @@
+import { useState } from 'react';
+import type { CommentThread as CommentThreadType } from '../types/comment';
+import type { CommentAuthor, CommentSide } from '../types/comment';
+import { isThreadResolved } from '../types/comment';
+import { CommentForm } from './comment-form';
+import { CommentBubble } from './comment-bubble';
+import { TrashIcon } from './icons/trash-icon';
+import { CommentIcon } from './icons/comment-icon';
+import { ThreadBadge } from './ui/thread-badge';
+import { cn } from '../lib/cn';
+
+interface CommentThreadProps {
+  thread: CommentThreadType;
+  onReply: (threadId: string, body: string, author: CommentAuthor) => void;
+  onResolve: (threadId: string) => void;
+  onUnresolve: (threadId: string) => void;
+  onDeleteComment: (threadId: string, commentId: string) => void;
+  onDeleteThread: (threadId: string) => void;
+  currentAuthor: CommentAuthor;
+  colSpan: number;
+  viewMode?: 'unified' | 'split';
+  side?: CommentSide;
+  currentCode?: string;
+}
+
+function StatusBadge(props: { status: string }) {
+  const { status } = props;
+
+  switch (status) {
+    case 'resolved':
+      return <ThreadBadge variant='resolved' />;
+    case 'dismissed':
+      return <ThreadBadge variant='dismissed' />;
+    default:
+      return null;
+  }
+}
+
+export function CommentThread(props: CommentThreadProps) {
+  const {
+    thread,
+    onReply,
+    onResolve,
+    onUnresolve,
+    onDeleteComment,
+    onDeleteThread,
+    currentAuthor,
+    colSpan,
+    viewMode,
+    side,
+    currentCode,
+  } = props;
+  const [showReply, setShowReply] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(isThreadResolved(thread));
+
+  const isOutdated =
+    thread.anchorContent && currentCode && thread.anchorContent !== currentCode;
+
+  if (isCollapsed) {
+    const collapsedContent = (
+      <td colSpan={colSpan} className='px-4 py-2 border-l border-border'>
+        <button
+          onClick={() => setIsCollapsed(false)}
+          className='thread-card flex items-center gap-2 text-xs text-text-muted hover:text-text-secondary transition-colors cursor-pointer rounded'
+        >
+          <CommentIcon className='w-4 h-4' />
+          <span>
+            {thread.comments.length} comment
+            {thread.comments.length !== 1 ? 's' : ''}
+          </span>
+          <StatusBadge status={thread.status} />
+          {isOutdated && <ThreadBadge variant='outdated' />}
+        </button>
+      </td>
+    );
+
+    if (viewMode === 'split') {
+      return (
+        <tr data-thread-id={thread.id}>
+          {side === 'old' ? (
+            <>
+              {collapsedContent}
+              <td colSpan={colSpan}></td>
+            </>
+          ) : (
+            <>
+              <td colSpan={colSpan}></td>
+              {collapsedContent}
+            </>
+          )}
+        </tr>
+      );
+    }
+
+    return <tr data-thread-id={thread.id}>{collapsedContent}</tr>;
+  }
+
+  const lineLabel =
+    thread.startLine === thread.endLine
+      ? `Line ${thread.startLine}`
+      : `Lines ${thread.startLine}–${thread.endLine}`;
+
+  const resolved = isThreadResolved(thread);
+
+  const threadContent = (
+    <td
+      colSpan={colSpan}
+      className={cn('px-4 py-3', {
+        'border-l border-border': side === 'new' && viewMode === 'split',
+      })}
+    >
+      <div className='thread-card border border-border rounded-lg overflow-hidden max-w-[700px]'>
+        <div className='flex items-center justify-between px-3 py-1.5 bg-bg-secondary border-b border-border'>
+          <div className='flex items-center gap-2'>
+            <span className='text-[11px] text-text-muted font-mono'>
+              {lineLabel}
+            </span>
+            <StatusBadge status={thread.status} />
+            {isOutdated && <ThreadBadge variant='outdated' />}
+          </div>
+          <div className='flex items-center gap-1'>
+            {resolved ? (
+              <button
+                onClick={() => onUnresolve(thread.id)}
+                className='text-[11px] text-text-muted hover:text-text-secondary transition-colors cursor-pointer'
+              >
+                Reopen
+              </button>
+            ) : (
+              <button
+                onClick={() => {
+                  onResolve(thread.id);
+                  setIsCollapsed(true);
+                }}
+                className='text-[11px] text-text-muted hover:text-text-secondary transition-colors cursor-pointer'
+              >
+                Resolve
+              </button>
+            )}
+            <button
+              onClick={() => setIsCollapsed(true)}
+              className='text-[11px] text-text-muted hover:text-text-secondary transition-colors cursor-pointer ml-2'
+            >
+              Collapse
+            </button>
+            <button
+              onClick={() => onDeleteThread(thread.id)}
+              className='text-text-muted hover:text-deleted transition-colors cursor-pointer ml-1'
+              title='Delete thread'
+            >
+              <TrashIcon className='w-3.5 h-3.5' />
+            </button>
+          </div>
+        </div>
+        <div>
+          {thread.comments.map((comment) => (
+            <CommentBubble
+              key={comment.id}
+              comment={comment}
+              onDelete={() => onDeleteComment(thread.id, comment.id)}
+            />
+          ))}
+        </div>
+        {showReply ? (
+          <div className='px-3 py-2 border-t border-border'>
+            <CommentForm
+              onSubmit={(body) => {
+                onReply(thread.id, body, currentAuthor);
+                setShowReply(false);
+              }}
+              onCancel={() => setShowReply(false)}
+              placeholder='Reply...'
+              submitLabel='Reply'
+            />
+          </div>
+        ) : (
+          <div className='px-3 py-2 border-t border-border'>
+            <button
+              onClick={() => setShowReply(true)}
+              className='text-xs text-accent hover:text-accent-hover transition-colors cursor-pointer'
+            >
+              Reply
+            </button>
+          </div>
+        )}
+      </div>
+    </td>
+  );
+
+  if (viewMode === 'split') {
+    return (
+      <tr data-thread-id={thread.id}>
+        {side === 'old' ? (
+          <>
+            {threadContent}
+            <td colSpan={colSpan}></td>
+          </>
+        ) : (
+          <>
+            <td colSpan={colSpan}></td>
+            {threadContent}
+          </>
+        )}
+      </tr>
+    );
+  }
+
+  return <tr data-thread-id={thread.id}>{threadContent}</tr>;
+}

package/packages/ui/src/components/commit-list.tsx

@@ -0,0 +1,100 @@
+import { useState, useCallback, useRef } from 'react';
+import { type Commit, fetchCommits } from '../lib/api';
+
+interface CommitListProps {
+  initialCommits: Commit[];
+  initialHasMore: boolean;
+  onCommitClick: (hash: string) => void;
+}
+
+export function CommitList(props: CommitListProps) {
+  const { initialCommits, initialHasMore, onCommitClick } = props;
+  const [commits, setCommits] = useState(initialCommits);
+  const [hasMore, setHasMore] = useState(initialHasMore);
+  const [loading, setLoading] = useState(false);
+  const [search, setSearch] = useState('');
+  const searchTimeout = useRef<ReturnType<typeof setTimeout>>(null);
+
+  const handleSearch = useCallback((value: string) => {
+    setSearch(value);
+
+    if (searchTimeout.current) {
+      clearTimeout(searchTimeout.current);
+    }
+
+    searchTimeout.current = setTimeout(async () => {
+      setLoading(true);
+      try {
+        const trimmed = value.trim();
+        const page = await fetchCommits(0, 10, trimmed || undefined);
+        setCommits(page.commits);
+        setHasMore(page.hasMore);
+      } finally {
+        setLoading(false);
+      }
+    }, 300);
+  }, []);
+
+  const loadMore = useCallback(async () => {
+    setLoading(true);
+    try {
+      const trimmed = search.trim();
+      const page = await fetchCommits(commits.length, 10, trimmed || undefined);
+      setCommits((prev) => [...prev, ...page.commits]);
+      setHasMore(page.hasMore);
+    } finally {
+      setLoading(false);
+    }
+  }, [commits.length, search]);
+
+  return (
+    <div>
+      <div className="px-4 py-2 border-b border-border">
+        <input
+          type="text"
+          value={search}
+          onChange={(e) => handleSearch(e.target.value)}
+          placeholder="Search commits..."
+          className="w-full text-sm bg-bg border border-border rounded-md px-3 py-1.5 text-text placeholder:text-text-muted focus:outline-none focus:border-accent"
+        />
+      </div>
+      {commits.length === 0 ? (
+        <p className="text-sm text-text-muted px-4 py-3">
+          {search ? 'No matching commits' : 'No recent commits'}
+        </p>
+      ) : (
+        <ul className="divide-y divide-border">
+          {commits.map((commit) => (
+            <li key={commit.hash}>
+              <button
+                onClick={() => onCommitClick(commit.hash)}
+                className="w-full text-left px-4 py-3 hover:bg-bg-tertiary transition-colors flex items-center gap-3"
+              >
+                <code className="text-xs font-mono text-accent shrink-0">
+                  {commit.shortHash}
+                </code>
+                <span className="text-sm text-text truncate flex-1">
+                  {commit.message}
+                </span>
+                <span className="text-xs text-text-muted shrink-0">
+                  {commit.relativeDate}
+                </span>
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+      {hasMore && (
+        <div className="px-4 py-3 border-t border-border">
+          <button
+            onClick={loadMore}
+            disabled={loading}
+            className="text-sm text-accent hover:text-accent/80 transition-colors disabled:opacity-50"
+          >
+            {loading ? 'Loading...' : 'Load more'}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}