diffity 0.1.0

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

@@ -0,0 +1,246 @@
+import { useState } from 'react';
+import type { ParsedDiff } from '@diffity/parser';
+import { cn } from '../lib/cn';
+import { useCopy } from '../hooks/use-copy';
+import { useThreadNavigation } from '../hooks/use-thread-navigation';
+import { getFilePath } from '../lib/diff-utils';
+import { CopyIcon } from './icons/copy-icon';
+import { CheckIcon } from './icons/check-icon';
+import { ChevronUpIcon } from './icons/chevron-up-icon';
+import { ChevronDownIcon } from './icons/chevron-down-icon';
+import { TrashIcon } from './icons/trash-icon';
+import { UnifiedViewIcon } from './icons/unified-view-icon';
+import { SplitViewIcon } from './icons/split-view-icon';
+import { SunIcon } from './icons/sun-icon';
+import { MoonIcon } from './icons/moon-icon';
+import { EyeIcon } from './icons/eye-icon';
+import { EyeOffIcon } from './icons/eye-off-icon';
+import { KeyboardIcon } from './icons/keyboard-icon';
+import { ConfirmDialog } from './ui/confirm-dialog';
+import { GENERAL_THREAD_FILE_PATH } from '../types/comment';
+import type { ViewMode } from '../lib/diff-utils';
+import type { CommentThread } from '../types/comment';
+import { isThreadResolved } from '../types/comment';
+
+interface ToolbarProps {
+  viewMode: ViewMode;
+  onViewModeChange: (mode: ViewMode) => void;
+  hideWhitespace: boolean;
+  onHideWhitespaceChange: (hide: boolean) => void;
+  theme: 'light' | 'dark';
+  onToggleTheme: () => void;
+  onShowHelp: () => void;
+  diff?: ParsedDiff;
+  diffRef?: string;
+  threads: CommentThread[];
+  onDeleteAllComments: () => void;
+  onScrollToThread: (threadId: string, filePath: string) => void;
+}
+
+function extractCodeContext(diff: ParsedDiff | undefined, filePath: string, side: 'old' | 'new', startLine: number, endLine: number): string[] {
+  if (!diff) {
+    return [];
+  }
+
+  const file = diff.files.find(f => getFilePath(f) === filePath);
+  if (!file) {
+    return [];
+  }
+
+  const lines: string[] = [];
+  for (const hunk of file.hunks) {
+    for (const line of hunk.lines) {
+      const lineNum = side === 'old' ? line.oldLineNumber : line.newLineNumber;
+      if (lineNum !== null && lineNum >= startLine && lineNum <= endLine) {
+        const prefix = line.type === 'add' ? '+' : line.type === 'delete' ? '-' : ' ';
+        lines.push(`${prefix} ${line.content}`);
+      }
+    }
+  }
+
+  return lines;
+}
+
+function formatThreadsForCopy(threads: CommentThread[], diff?: ParsedDiff, diffRef?: string): string {
+  const unresolvedThreads = threads.filter(t => !isThreadResolved(t));
+  if (unresolvedThreads.length === 0) {
+    return '';
+  }
+
+  const parts: string[] = [];
+
+  if (diffRef) {
+    parts.push(`Diff ref: ${diffRef}`);
+    parts.push('');
+  }
+
+  for (const thread of unresolvedThreads) {
+    if (thread.filePath === GENERAL_THREAD_FILE_PATH) {
+      parts.push('## General comment');
+    } else {
+      const lineRange = thread.startLine === thread.endLine
+        ? `${thread.startLine}`
+        : `${thread.startLine}-${thread.endLine}`;
+      const sideDesc = thread.side === 'old' ? 'before change' : 'after change';
+      parts.push(`## ${thread.filePath}:${lineRange} (${sideDesc})`);
+    }
+
+    const codeLines = extractCodeContext(diff, thread.filePath, thread.side, thread.startLine, thread.endLine);
+    if (codeLines.length > 0) {
+      parts.push('```diff');
+      parts.push(...codeLines);
+      parts.push('```');
+    }
+
+    const uniqueAuthors = new Set(thread.comments.map(c => c.author.name));
+    const singleAuthor = uniqueAuthors.size === 1;
+
+    for (const comment of thread.comments) {
+      if (singleAuthor) {
+        parts.push(comment.body);
+      } else {
+        const authorName = comment.author.name === 'You' ? 'User' : comment.author.name;
+        parts.push(`**${authorName}:** ${comment.body}`);
+      }
+    }
+    parts.push('');
+  }
+
+  return parts.join('\n');
+}
+
+export function Toolbar(props: ToolbarProps) {
+  const {
+    viewMode,
+    onViewModeChange,
+    hideWhitespace,
+    onHideWhitespaceChange,
+    theme,
+    onToggleTheme,
+    onShowHelp,
+    diff,
+    diffRef,
+    threads,
+    onDeleteAllComments,
+    onScrollToThread,
+  } = props;
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const { copied, copy } = useCopy();
+  const { currentIndex, count: unresolvedCount, goToPrevious, goToNext } = useThreadNavigation(threads, onScrollToThread);
+
+  const baseBtn = 'px-2.5 py-1 text-xs text-text-secondary transition-colors duration-150 cursor-pointer border';
+  const activeBtn = 'bg-accent text-white border-accent';
+  const inactiveBtn = 'bg-bg hover:bg-hover hover:text-text border-border';
+
+  const iconBtn = 'p-1.5 rounded-md text-text-muted hover:text-text hover:bg-hover transition-colors cursor-pointer';
+
+  return (
+    <div className="flex items-center gap-3 px-4 py-1.5 bg-bg-secondary border-b border-border font-sans text-xs">
+      <div className="flex items-center">
+        <button
+          className={cn(baseBtn, 'flex items-center gap-1.5 rounded-l-md', viewMode === 'unified' ? `${activeBtn} z-10` : inactiveBtn)}
+          onClick={() => onViewModeChange('unified')}
+          title="Unified view (u)"
+        >
+          <UnifiedViewIcon className="w-3.5 h-3.5" />
+          Unified
+        </button>
+        <button
+          className={cn(baseBtn, 'flex items-center gap-1.5 rounded-r-md -ml-px', viewMode === 'split' ? `${activeBtn} z-10` : inactiveBtn)}
+          onClick={() => onViewModeChange('split')}
+          title="Split view (s)"
+        >
+          <SplitViewIcon className="w-3.5 h-3.5" />
+          Split
+        </button>
+      </div>
+      <button
+        className={cn(iconBtn, 'flex items-center gap-1.5 text-xs', hideWhitespace && 'text-accent')}
+        onClick={() => onHideWhitespaceChange(!hideWhitespace)}
+        title={hideWhitespace ? 'Show whitespace' : 'Hide whitespace'}
+      >
+        {hideWhitespace ? <EyeOffIcon className="w-3.5 h-3.5" /> : <EyeIcon className="w-3.5 h-3.5" />}
+        <span className="text-text-secondary">Whitespace</span>
+      </button>
+      <div className="flex items-center gap-0.5">
+        <button
+          className={iconBtn}
+          onClick={onToggleTheme}
+          title={theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'}
+        >
+          {theme === 'light' ? <MoonIcon className="w-3.5 h-3.5" /> : <SunIcon className="w-3.5 h-3.5" />}
+        </button>
+        <button
+          className={iconBtn}
+          onClick={onShowHelp}
+          title="Keyboard shortcuts (?)"
+        >
+          <KeyboardIcon className="w-3.5 h-3.5" />
+        </button>
+      </div>
+      {unresolvedCount > 0 && (
+        <div className="flex items-center gap-2 ml-auto">
+          <div className="flex items-stretch border border-border rounded-md overflow-hidden bg-bg">
+            <span className="flex items-center text-xs text-text-muted px-2 py-1">
+              {currentIndex >= 0
+                ? `${currentIndex + 1} of ${unresolvedCount} ${unresolvedCount === 1 ? 'comment' : 'comments'}`
+                : `${unresolvedCount} ${unresolvedCount === 1 ? 'comment' : 'comments'}`}
+            </span>
+            <button
+              onClick={goToPrevious}
+              className="flex items-center px-1.5 border-l border-border text-text-muted hover:bg-hover hover:text-text transition-colors cursor-pointer"
+              title="Previous comment"
+            >
+              <ChevronUpIcon className="w-3.5 h-3.5" />
+            </button>
+            <button
+              onClick={goToNext}
+              className="flex items-center px-1.5 border-l border-border text-text-muted hover:bg-hover hover:text-text transition-colors cursor-pointer"
+              title="Next comment"
+            >
+              <ChevronDownIcon className="w-3.5 h-3.5" />
+            </button>
+          </div>
+          <div className="flex items-stretch border border-border rounded-md overflow-hidden">
+            <button
+              onClick={() => copy(formatThreadsForCopy(threads, diff, diffRef))}
+              className="flex items-center gap-1.5 px-2.5 py-1 text-xs bg-bg text-text-secondary hover:bg-hover hover:text-text transition-colors cursor-pointer"
+              title="Copy unresolved comments to clipboard"
+            >
+              {copied ? (
+                <>
+                  <CheckIcon className="w-3 h-3 text-added" />
+                  Copied
+                </>
+              ) : (
+                <>
+                  <CopyIcon className="w-3 h-3" />
+                  Copy Comments
+                </>
+              )}
+            </button>
+            <button
+              onClick={() => setShowDeleteConfirm(true)}
+              className="flex items-center px-2 border-l border-border bg-bg text-text-muted hover:bg-hover hover:text-red-500 transition-colors cursor-pointer"
+              title="Delete all comments"
+            >
+              <TrashIcon className="w-3.5 h-3.5" />
+            </button>
+          </div>
+        </div>
+      )}
+      {showDeleteConfirm && (
+        <ConfirmDialog
+          title="Delete all comments"
+          message="Are you sure you want to delete all comments? This action cannot be undone."
+          confirmLabel="Delete all"
+          onConfirm={() => {
+            onDeleteAllComments();
+            setShowDeleteConfirm(false);
+          }}
+          onCancel={() => setShowDeleteConfirm(false)}
+        />
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import { cn } from '../../lib/cn';
+
+interface BadgeProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function Badge(props: BadgeProps) {
+  const { children, className } = props;
+
+  return (
+    <span className={cn('text-xs px-1.5 py-px rounded font-semibold shrink-0', className)}>
+      {children}
+    </span>
+  );
+}

package/packages/ui/src/components/ui/confirm-dialog.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useRef } from 'react';
+
+interface ConfirmDialogProps {
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export function ConfirmDialog(props: ConfirmDialogProps) {
+  const { title, message, confirmLabel = 'Undo', onConfirm, onCancel } = props;
+  const cancelRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    cancelRef.current?.focus();
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onCancel();
+      }
+    };
+    window.addEventListener('keydown', handleKey);
+    return () => window.removeEventListener('keydown', handleKey);
+  }, [onCancel]);
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={onCancel}>
+      <div
+        className="bg-bg border border-border rounded-xl shadow-lg p-5 max-w-sm w-full mx-4"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <h3 className="text-sm font-semibold text-text mb-1.5">{title}</h3>
+        <p className="text-xs text-text-muted mb-4 leading-relaxed">{message}</p>
+        <div className="flex justify-end gap-2">
+          <button
+            ref={cancelRef}
+            onClick={onCancel}
+            className="px-3 py-1.5 text-xs rounded-md border border-border text-text hover:bg-hover cursor-pointer"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={onConfirm}
+            className="px-3 py-1.5 text-xs rounded-md bg-deleted text-white hover:opacity-90 cursor-pointer"
+          >
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/packages/ui/src/components/ui/icon-button.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode, ButtonHTMLAttributes } from 'react';
+import { cn } from '../../lib/cn';
+
+interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+  className?: string;
+}
+
+export function IconButton(props: IconButtonProps) {
+  const { children, className, ...rest } = props;
+
+  return (
+    <button
+      className={cn(
+        'flex items-center justify-center rounded text-text-muted hover:bg-hover hover:text-text cursor-pointer',
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+}

package/packages/ui/src/components/ui/status-badge.tsx

@@ -0,0 +1,57 @@
+import { cn } from '../../lib/cn';
+import { getStatusColor } from '../../lib/diff-utils';
+import { Badge } from './badge';
+
+interface StatusBadgeProps {
+  status: string;
+  compact?: boolean;
+}
+
+function getCompactLabel(status: string): string {
+  switch (status) {
+    case 'added':
+      return 'A';
+    case 'deleted':
+      return 'D';
+    case 'renamed':
+      return 'R';
+    case 'copied':
+      return 'C';
+    default:
+      return 'M';
+  }
+}
+
+function getFullLabel(status: string): string {
+  switch (status) {
+    case 'added':
+      return 'Added';
+    case 'deleted':
+      return 'Deleted';
+    case 'renamed':
+      return 'Renamed';
+    case 'copied':
+      return 'Copied';
+    default:
+      return '';
+  }
+}
+
+export function StatusBadge(props: StatusBadgeProps) {
+  const { status, compact } = props;
+
+  if (compact) {
+    return (
+      <span className={cn('shrink-0 w-[18px] h-[18px] inline-flex items-center justify-center rounded text-[11px] font-bold font-mono', getStatusColor(status))}>
+        {getCompactLabel(status)}
+      </span>
+    );
+  }
+
+  const label = getFullLabel(status);
+  if (!label) {
+    return null;
+  }
+
+  return <Badge className={getStatusColor(status)}>{label}</Badge>;
+}

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

@@ -0,0 +1,35 @@
+import { cn } from '../../lib/cn';
+
+type ThreadBadgeVariant = 'resolved' | 'dismissed' | 'outdated';
+
+interface ThreadBadgeProps {
+  variant: ThreadBadgeVariant;
+  children?: React.ReactNode;
+  size?: 'sm' | 'default';
+}
+
+const variantStyles: Record<ThreadBadgeVariant, string> = {
+  resolved: 'bg-added/20 text-added',
+  dismissed: 'bg-text-muted/20 text-text-muted line-through',
+  outdated: 'bg-orange-100 text-orange-800 dark:bg-orange-900/50 dark:text-orange-200',
+};
+
+const defaultLabels: Record<ThreadBadgeVariant, string> = {
+  resolved: 'Resolved',
+  dismissed: 'Dismissed',
+  outdated: 'Outdated',
+};
+
+export function ThreadBadge(props: ThreadBadgeProps) {
+  const { variant, children, size = 'default' } = props;
+
+  return (
+    <span className={cn(
+      'rounded-full font-medium',
+      size === 'sm' ? 'px-1 py-0.5 text-[9px]' : 'px-1.5 py-0.5 text-[10px]',
+      variantStyles[variant],
+    )}>
+      {children ?? defaultLabels[variant]}
+    </span>
+  );
+}

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

@@ -0,0 +1,126 @@
+import type { DiffLine } from '@diffity/parser';
+import type { SyntaxToken } from '../lib/syntax-token';
+
+interface WordDiffProps {
+  line: DiffLine;
+  syntaxTokens?: SyntaxToken[];
+}
+
+function applySyntaxToText(text: string, offset: number, syntaxTokens: SyntaxToken[]): React.ReactNode[] {
+  const nodes: React.ReactNode[] = [];
+  let textPos = 0;
+  let tokenIdx = 0;
+  let tokenCharPos = 0;
+
+  for (let i = 0; i < syntaxTokens.length; i++) {
+    tokenCharPos += syntaxTokens[i].text.length;
+    if (tokenCharPos > offset) {
+      tokenIdx = i;
+      tokenCharPos = tokenCharPos - syntaxTokens[i].text.length;
+      break;
+    }
+  }
+
+  while (textPos < text.length && tokenIdx < syntaxTokens.length) {
+    const token = syntaxTokens[tokenIdx];
+    const tokenStart = tokenCharPos;
+    const tokenEnd = tokenStart + token.text.length;
+    const overlapStart = Math.max(offset + textPos, tokenStart);
+    const overlapEnd = Math.min(offset + text.length, tokenEnd);
+
+    if (overlapStart >= overlapEnd) {
+      tokenIdx++;
+      tokenCharPos = tokenEnd;
+      continue;
+    }
+
+    const sliceStart = overlapStart - offset;
+    const sliceEnd = overlapEnd - offset;
+    const slice = text.slice(sliceStart, sliceEnd);
+
+    if (sliceStart > textPos) {
+      nodes.push(<span key={`gap-${textPos}`}>{text.slice(textPos, sliceStart)}</span>);
+    }
+
+    nodes.push(
+      <span key={`${tokenIdx}-${sliceStart}`} style={token.color ? { color: token.color } : undefined}>
+        {slice}
+      </span>
+    );
+
+    textPos = sliceEnd;
+
+    if (overlapEnd >= tokenEnd) {
+      tokenIdx++;
+      tokenCharPos = tokenEnd;
+    } else {
+      break;
+    }
+  }
+
+  if (textPos < text.length) {
+    nodes.push(<span key={`rest-${textPos}`}>{text.slice(textPos)}</span>);
+  }
+
+  return nodes;
+}
+
+export function WordDiff(props: WordDiffProps) {
+  const { line, syntaxTokens } = props;
+
+  if (!line.wordDiff || line.wordDiff.length === 0) {
+    return <span>{line.content || '\n'}</span>;
+  }
+
+  let charOffset = 0;
+
+  return (
+    <>
+      {line.wordDiff.map((seg, i) => {
+        const segOffset = charOffset;
+
+        if (seg.type === 'equal') {
+          charOffset += seg.text.length;
+          if (syntaxTokens && syntaxTokens.length > 0) {
+            return <span key={i}>{applySyntaxToText(seg.text, segOffset, syntaxTokens)}</span>;
+          }
+          return <span key={i}>{seg.text}</span>;
+        }
+
+        if (seg.type === 'delete' && line.type === 'delete') {
+          charOffset += seg.text.length;
+          if (syntaxTokens && syntaxTokens.length > 0) {
+            return (
+              <span key={i} className="bg-diff-del-word rounded-sm">
+                {applySyntaxToText(seg.text, segOffset, syntaxTokens)}
+              </span>
+            );
+          }
+          return (
+            <span key={i} className="bg-diff-del-word rounded-sm">
+              {seg.text}
+            </span>
+          );
+        }
+
+        if (seg.type === 'insert' && line.type === 'add') {
+          charOffset += seg.text.length;
+          if (syntaxTokens && syntaxTokens.length > 0) {
+            return (
+              <span key={i} className="bg-diff-add-word rounded-sm">
+                {applySyntaxToText(seg.text, segOffset, syntaxTokens)}
+              </span>
+            );
+          }
+          return (
+            <span key={i} className="bg-diff-add-word rounded-sm">
+              {seg.text}
+            </span>
+          );
+        }
+
+        return null;
+      })}
+    </>
+  );
+}

package/packages/ui/src/hooks/use-comment-actions.ts

@@ -0,0 +1,97 @@
+import { useCallback } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import type { CommentAuthor, CommentSide } from '../types/comment';
+import * as api from '../lib/api';
+
+export function useCommentActions(sessionId: string | null, enabled: boolean) {
+  const queryClient = useQueryClient();
+
+  const invalidateThreads = useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: ['threads', sessionId] });
+  }, [queryClient, sessionId]);
+
+  const addThread = useCallback((filePath: string, side: CommentSide, startLine: number, endLine: number, body: string, author: CommentAuthor, anchorContent?: string) => {
+    if (!enabled || !sessionId) {
+      return;
+    }
+    api.createThread({ sessionId, filePath, side, startLine, endLine, body, author, anchorContent }).then(() => {
+      invalidateThreads();
+    });
+  }, [enabled, sessionId, invalidateThreads]);
+
+  const addReply = useCallback((threadId: string, body: string, author: CommentAuthor) => {
+    if (!enabled) {
+      return;
+    }
+    api.replyToThread(threadId, body, author).then(() => {
+      invalidateThreads();
+    });
+  }, [enabled, invalidateThreads]);
+
+  const resolveThread = useCallback((threadId: string) => {
+    if (!enabled) {
+      return;
+    }
+    api.updateThreadStatus(threadId, 'resolved').then(() => {
+      invalidateThreads();
+    });
+  }, [enabled, invalidateThreads]);
+
+  const unresolveThread = useCallback((threadId: string) => {
+    if (!enabled) {
+      return;
+    }
+    api.updateThreadStatus(threadId, 'open').then(() => {
+      invalidateThreads();
+    });
+  }, [enabled, invalidateThreads]);
+
+  const dismissThread = useCallback((threadId: string) => {
+    if (!enabled) {
+      return;
+    }
+    api.updateThreadStatus(threadId, 'dismissed').then(() => {
+      invalidateThreads();
+    });
+  }, [enabled, invalidateThreads]);
+
+  const deleteComment = useCallback((threadId: string, commentId: string) => {
+    if (!enabled) {
+      return;
+    }
+    api.deleteComment(commentId).then(() => {
+      invalidateThreads();
+    });
+  }, [enabled, invalidateThreads]);
+
+  const deleteThread = useCallback((threadId: string) => {
+    if (!enabled) {
+      return;
+    }
+    api.deleteThread(threadId).then(() => {
+      invalidateThreads();
+    });
+  }, [enabled, invalidateThreads]);
+
+  const deleteAllThreads = useCallback(() => {
+    if (!enabled || !sessionId) {
+      return;
+    }
+    api.deleteAllThreads(sessionId).then(() => {
+      invalidateThreads();
+    });
+  }, [enabled, sessionId, invalidateThreads]);
+
+  return {
+    addThread,
+    addReply,
+    resolveThread,
+    unresolveThread,
+    dismissThread,
+    deleteComment,
+    deleteThread,
+    deleteAllThreads,
+  };
+}
+
+export type CommentActions = ReturnType<typeof useCommentActions>;

package/packages/ui/src/hooks/use-commits.ts

@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query';
+import { commitsOptions } from '../queries/commits';
+
+export function useCommits() {
+  const { data, isLoading, error } = useQuery(commitsOptions());
+
+  return {
+    data: data ?? null,
+    loading: isLoading,
+    error: error?.message ?? null,
+  };
+}

package/packages/ui/src/hooks/use-copy.ts

@@ -0,0 +1,18 @@
+import { useState, useCallback, useRef } from 'react';
+
+export function useCopy(resetDelay = 2000) {
+  const [copied, setCopied] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  const copy = useCallback((text: string) => {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => setCopied(false), resetDelay);
+    });
+  }, [resetDelay]);
+
+  return { copied, copy };
+}