diffity 0.1.0

package/packages/ui/src/lib/file-tree.ts

@@ -0,0 +1,122 @@
+import type { DiffFile } from '@diffity/parser';
+import { getFilePath } from './diff-utils';
+
+export interface FileNode {
+  type: 'file';
+  name: string;
+  path: string;
+  file: DiffFile;
+}
+
+export interface DirNode {
+  type: 'dir';
+  name: string;
+  path: string;
+  children: TreeNode[];
+}
+
+export type TreeNode = FileNode | DirNode;
+
+function getOrCreateDir(children: TreeNode[], name: string, path: string): DirNode {
+  let dir = children.find(c => c.type === 'dir' && c.name === name) as DirNode | undefined;
+  if (!dir) {
+    dir = { type: 'dir', name, path, children: [] };
+    children.push(dir);
+  }
+  return dir;
+}
+
+export function buildFileTree(files: DiffFile[]): TreeNode[] {
+  const root: TreeNode[] = [];
+
+  for (const file of files) {
+    const fullPath = getFilePath(file);
+    const parts = fullPath.split('/');
+
+    let currentChildren = root;
+    for (let i = 0; i < parts.length - 1; i++) {
+      const dirPath = parts.slice(0, i + 1).join('/');
+      const dir = getOrCreateDir(currentChildren, parts[i], dirPath);
+      currentChildren = dir.children;
+    }
+
+    currentChildren.push({
+      type: 'file',
+      name: parts[parts.length - 1],
+      path: fullPath,
+      file,
+    });
+  }
+
+  return root;
+}
+
+export function collapseSingleChildDirs(nodes: TreeNode[]): TreeNode[] {
+  return nodes.map(node => {
+    if (node.type !== 'dir') {
+      return node;
+    }
+
+    let current = node;
+    let collapsedName = current.name;
+
+    while (current.children.length === 1 && current.children[0].type === 'dir') {
+      current = current.children[0] as DirNode;
+      collapsedName += '/' + current.name;
+    }
+
+    return {
+      type: 'dir' as const,
+      name: collapsedName,
+      path: current.path,
+      children: collapseSingleChildDirs(current.children),
+    };
+  });
+}
+
+export function sortTree(nodes: TreeNode[]): TreeNode[] {
+  const sorted = [...nodes].sort((a, b) => {
+    if (a.type !== b.type) {
+      return a.type === 'dir' ? -1 : 1;
+    }
+    return a.name.localeCompare(b.name);
+  });
+
+  return sorted.map(node => {
+    if (node.type === 'dir') {
+      return { ...node, children: sortTree(node.children) };
+    }
+    return node;
+  });
+}
+
+export function filterTree(nodes: TreeNode[], search: string): TreeNode[] {
+  const lower = search.toLowerCase();
+  const result: TreeNode[] = [];
+
+  for (const node of nodes) {
+    if (node.type === 'file') {
+      if (node.path.toLowerCase().includes(lower)) {
+        result.push(node);
+      }
+    } else {
+      const filteredChildren = filterTree(node.children, search);
+      if (filteredChildren.length > 0) {
+        result.push({ ...node, children: filteredChildren });
+      }
+    }
+  }
+
+  return result;
+}
+
+export function collectAllDirPaths(nodes: TreeNode[]): string[] {
+  const paths: string[] = [];
+  for (const node of nodes) {
+    if (node.type === 'dir') {
+      paths.push(node.path);
+      paths.push(...collectAllDirPaths(node.children));
+    }
+  }
+  return paths;
+}

package/packages/ui/src/lib/query-client.ts

@@ -0,0 +1,10 @@
+import { QueryClient } from '@tanstack/react-query';
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      refetchOnWindowFocus: false,
+    },
+  },
+});

package/packages/ui/src/lib/render-content.tsx

@@ -0,0 +1,23 @@
+import type { DiffLine } from '@diffity/parser';
+import { WordDiff } from '../components/word-diff';
+import type { SyntaxToken } from '../lib/syntax-token';
+
+export function renderContent(line: DiffLine, syntaxTokens?: SyntaxToken[]) {
+  if (line.wordDiff && line.wordDiff.length > 0) {
+    return <WordDiff line={line} syntaxTokens={syntaxTokens} />;
+  }
+
+  if (syntaxTokens && syntaxTokens.length > 0) {
+    return (
+      <>
+        {syntaxTokens.map((token, i) => (
+          <span key={i} style={token.color ? { color: token.color } : undefined}>
+            {token.text}
+          </span>
+        ))}
+      </>
+    );
+  }
+
+  return <span>{line.content || '\n'}</span>;
+}

package/packages/ui/src/lib/syntax-token.ts

@@ -0,0 +1,4 @@
+export interface SyntaxToken {
+  text: string;
+  color?: string;
+}

package/packages/ui/src/main.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { queryClient } from './lib/query-client';
+import { App } from './app';
+import './styles/app.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
+  </React.StrictMode>
+);

package/packages/ui/src/queries/commits.ts

@@ -0,0 +1,9 @@
+import { queryOptions } from '@tanstack/react-query';
+import { fetchCommits } from '../lib/api';
+
+export function commitsOptions() {
+  return queryOptions({
+    queryKey: ['commits'],
+    queryFn: () => fetchCommits(0, 10),
+  });
+}

package/packages/ui/src/queries/diff.ts

@@ -0,0 +1,9 @@
+import { queryOptions } from '@tanstack/react-query';
+import { fetchDiff } from '../lib/api';
+
+export function diffOptions(hideWhitespace: boolean, ref?: string) {
+  return queryOptions({
+    queryKey: ['diff', hideWhitespace, ref ?? null],
+    queryFn: () => fetchDiff(hideWhitespace, ref),
+  });
+}

package/packages/ui/src/queries/file.ts

@@ -0,0 +1,10 @@
+import { queryOptions } from '@tanstack/react-query';
+import { fetchFileContent } from '../lib/api';
+
+export function fileContentOptions(filePath: string, enabled: boolean, ref?: string) {
+  return queryOptions({
+    queryKey: ['file-content', filePath, ref],
+    queryFn: () => fetchFileContent(filePath, ref),
+    enabled,
+  });
+}

package/packages/ui/src/queries/info.ts

@@ -0,0 +1,9 @@
+import { queryOptions } from '@tanstack/react-query';
+import { fetchRepoInfo } from '../lib/api';
+
+export function repoInfoOptions(ref?: string) {
+  return queryOptions({
+    queryKey: ['repo-info', ref],
+    queryFn: () => fetchRepoInfo(ref),
+  });
+}

package/packages/ui/src/queries/overview.ts

@@ -0,0 +1,9 @@
+import { queryOptions } from '@tanstack/react-query';
+import { fetchOverview } from '../lib/api';
+
+export function overviewOptions() {
+  return queryOptions({
+    queryKey: ['overview'],
+    queryFn: fetchOverview,
+  });
+}

package/packages/ui/src/styles/app.css

@@ -0,0 +1,178 @@
+@import "tailwindcss";
+
+@theme {
+  --font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', 'JetBrains Mono',
+    'Consolas', 'Menlo', monospace;
+  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans',
+    Helvetica, Arial, sans-serif;
+
+  --color-bg: #ffffff;
+  --color-bg-secondary: #f6f8fa;
+  --color-bg-tertiary: #eaeef2;
+  --color-border: #d0d7de;
+  --color-border-muted: #d8dee4;
+
+  --color-text: #1f2328;
+  --color-text-secondary: #656d76;
+  --color-text-muted: #8b949e;
+
+  --color-diff-add-bg: #dafbe1;
+  --color-diff-add-line: #ccffd8;
+  --color-diff-add-word: #abf2bc;
+  --color-diff-del-bg: #ffebe9;
+  --color-diff-del-line: #ffd7d5;
+  --color-diff-del-word: #ff818266;
+  --color-diff-hunk-bg: #ddf4ff;
+  --color-diff-hunk-text: #0969da;
+  --color-diff-expanded-bg: #f6fcff;
+  --color-diff-expanded-gutter: #edf7ff;
+  --color-diff-comment-bg: #fff8c5;
+  --color-diff-comment-gutter: #ecd364;
+
+  --color-accent: #0969da;
+  --color-accent-hover: #0550ae;
+
+  --color-added: #1a7f37;
+  --color-deleted: #cf222e;
+  --color-modified: #9a6700;
+  --color-renamed: #0969da;
+
+  --color-hover: rgba(208, 215, 222, 0.32);
+  --color-active: rgba(208, 215, 222, 0.48);
+
+  --shadow-sticky: 0 1px 2px rgba(27, 31, 36, 0.08);
+  --shadow-md: 0 2px 8px rgba(140, 149, 159, 0.12);
+}
+
+[data-theme='dark'] {
+  --color-bg: #171717;
+  --color-bg-secondary: #1a1a1a;
+  --color-bg-tertiary: #262626;
+  --color-border: #262626;
+  --color-border-muted: #1f1f1f;
+
+  --color-text: #e5e5e5;
+  --color-text-secondary: #a3a3a3;
+  --color-text-muted: #737373;
+
+  --color-diff-add-bg: rgba(34, 197, 94, 0.1);
+  --color-diff-add-line: rgba(34, 197, 94, 0.18);
+  --color-diff-add-word: rgba(34, 197, 94, 0.35);
+  --color-diff-del-bg: rgba(239, 68, 68, 0.1);
+  --color-diff-del-line: rgba(239, 68, 68, 0.18);
+  --color-diff-del-word: rgba(239, 68, 68, 0.35);
+  --color-diff-hunk-bg: rgba(96, 165, 250, 0.1);
+  --color-diff-hunk-text: #60a5fa;
+  --color-diff-expanded-bg: rgba(96, 165, 250, 0.05);
+  --color-diff-expanded-gutter: rgba(96, 165, 250, 0.08);
+  --color-diff-comment-bg: rgba(234, 179, 8, 0.1);
+  --color-diff-comment-gutter: rgba(234, 179, 8, 0.3);
+
+  --color-accent: #60a5fa;
+  --color-accent-hover: #93c5fd;
+
+  --color-added: #4ade80;
+  --color-deleted: #f87171;
+  --color-modified: #facc15;
+  --color-renamed: #60a5fa;
+
+  --color-hover: rgba(161, 161, 170, 0.1);
+  --color-active: rgba(161, 161, 170, 0.18);
+
+  --shadow-sticky: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border) var(--color-bg-secondary);
+}
+
+dialog {
+  background: var(--color-bg);
+  color: var(--color-text);
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-bg-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-muted);
+}
+
+@keyframes slide-down {
+  from {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.animate-slide-down {
+  animation: slide-down 0.2s ease-out;
+}
+
+@keyframes flash-highlight {
+  0% {
+    background-color: var(--color-diff-comment-bg);
+  }
+  100% {
+    background-color: var(--color-bg-secondary);
+  }
+}
+
+@keyframes flash-highlight-border {
+  0% {
+    border-color: var(--color-modified);
+  }
+  100% {
+    border-color: var(--color-border);
+  }
+}
+
+.animate-flash-highlight {
+  animation: flash-highlight 1.5s ease-out forwards;
+}
+
+.animate-flash-highlight-border {
+  animation: flash-highlight-border 1.5s ease-out forwards;
+}
+
+@keyframes flash-thread {
+  0% {
+    background-color: var(--color-diff-comment-bg);
+  }
+  100% {
+    background-color: transparent;
+  }
+}
+
+.flash-thread .thread-card {
+  animation: flash-thread 1.5s ease-out forwards;
+}
+
+.diff-empty-cell {
+  background:
+    repeating-linear-gradient(
+      -45deg,
+      transparent,
+      transparent calc(3px * 1.414),
+      var(--color-bg-tertiary) calc(3px * 1.414),
+      var(--color-bg-tertiary) calc(4px * 1.414)
+    ),
+    var(--color-bg-secondary);
+}

package/packages/ui/src/types/comment.ts

@@ -0,0 +1,61 @@
+export const GENERAL_THREAD_FILE_PATH = '__general__';
+
+export interface CommentAuthor {
+  name: string;
+  avatarUrl?: string;
+  type: 'user' | 'agent';
+}
+
+export interface Comment {
+  id: string;
+  author: CommentAuthor;
+  body: string;
+  createdAt: string;
+}
+
+export type CommentSide = 'old' | 'new';
+
+export type ThreadStatus = 'open' | 'resolved' | 'dismissed';
+
+export interface CommentThread {
+  id: string;
+  filePath: string;
+  side: CommentSide;
+  startLine: number;
+  endLine: number;
+  comments: Comment[];
+  status: ThreadStatus;
+  anchorContent?: string;
+  updatedAt?: string;
+  sessionId?: string;
+}
+
+export function isThreadResolved(thread: CommentThread): boolean {
+  return thread.status === 'resolved' || thread.status === 'dismissed';
+}
+
+export interface LineSelection {
+  filePath: string;
+  side: CommentSide;
+  startLine: number;
+  endLine: number;
+}
+
+export interface LineRenderProps {
+  isLineSelected?: (line: number, side: CommentSide) => boolean;
+  onLineMouseDown?: (line: number, side: CommentSide) => void;
+  onLineMouseEnter?: (line: number, side: CommentSide) => void;
+  onCommentClick?: (line: number, side: CommentSide) => void;
+  threads?: CommentThread[];
+  pendingSelection?: LineSelection | null;
+  currentAuthor?: CommentAuthor;
+  onAddThread?: (filePath: string, side: CommentSide, startLine: number, endLine: number, body: string, author: CommentAuthor) => void;
+  onCancelPending?: () => void;
+  filePath?: string;
+  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;
+  getOriginalCode?: (side: CommentSide, startLine: number, endLine: number) => string;
+}

package/packages/ui/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />