diffity 0.1.0

package/packages/ui/src/hooks/use-diff-staleness.ts

@@ -0,0 +1,58 @@
+import { useEffect, useRef, useState } from 'react';
+import { fetchDiffFingerprint } from '../lib/api';
+
+const POLL_INTERVAL = 3000;
+
+export function useDiffStaleness(ref?: string, enabled = true) {
+  const [isStale, setIsStale] = useState(false);
+  const baselineRef = useRef<string | null>(null);
+
+  function resetStaleness() {
+    baselineRef.current = null;
+    setIsStale(false);
+  }
+
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    let timer: ReturnType<typeof setTimeout>;
+    let cancelled = false;
+
+    async function poll() {
+      if (cancelled) {
+        return;
+      }
+
+      try {
+        const fingerprint = await fetchDiffFingerprint(ref);
+
+        if (cancelled) {
+          return;
+        }
+
+        if (baselineRef.current === null) {
+          baselineRef.current = fingerprint;
+        } else if (fingerprint !== baselineRef.current) {
+          setIsStale(true);
+        }
+      } catch {
+        // ignore fetch errors
+      }
+
+      if (!cancelled) {
+        timer = setTimeout(poll, POLL_INTERVAL);
+      }
+    }
+
+    poll();
+
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [ref, enabled]);
+
+  return { isStale, resetStaleness };
+}

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

@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query';
+import { diffOptions } from '../queries/diff';
+
+export function useDiff(hideWhitespace = false, ref?: string) {
+  const { data, isLoading, error } = useQuery(diffOptions(hideWhitespace, ref));
+
+  return {
+    data: data ?? null,
+    loading: isLoading,
+    error: error?.message ?? null,
+  };
+}

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

@@ -0,0 +1,190 @@
+import { useState, useEffect, useCallback } from 'react';
+import { createHighlighter, type Highlighter, type BundledLanguage } from 'shiki';
+
+const LANG_MAP: Record<string, BundledLanguage> = {
+  ts: 'typescript',
+  tsx: 'tsx',
+  js: 'javascript',
+  jsx: 'jsx',
+  json: 'json',
+  css: 'css',
+  html: 'html',
+  md: 'markdown',
+  mdx: 'mdx',
+  py: 'python',
+  rb: 'ruby',
+  rs: 'rust',
+  go: 'go',
+  java: 'java',
+  sh: 'bash',
+  bash: 'bash',
+  zsh: 'bash',
+  fish: 'fish',
+  ps1: 'powershell',
+  yml: 'yaml',
+  yaml: 'yaml',
+  xml: 'xml',
+  svg: 'xml',
+  sql: 'sql',
+  graphql: 'graphql',
+  gql: 'graphql',
+  dockerfile: 'dockerfile',
+  toml: 'toml',
+  ini: 'ini',
+  lua: 'lua',
+  c: 'c',
+  cpp: 'cpp',
+  cc: 'cpp',
+  cxx: 'cpp',
+  h: 'c',
+  hpp: 'cpp',
+  cs: 'csharp',
+  swift: 'swift',
+  kt: 'kotlin',
+  kts: 'kotlin',
+  scala: 'scala',
+  vue: 'vue',
+  svelte: 'svelte',
+  php: 'php',
+  r: 'r',
+  scss: 'scss',
+  less: 'less',
+  sass: 'sass',
+  styl: 'stylus',
+  dart: 'dart',
+  ex: 'elixir',
+  exs: 'elixir',
+  erl: 'erlang',
+  hs: 'haskell',
+  clj: 'clojure',
+  cljs: 'clojure',
+  pl: 'perl',
+  pm: 'perl',
+  zig: 'zig',
+  nim: 'nim',
+  ml: 'ocaml',
+  mli: 'ocaml',
+  fs: 'fsharp',
+  fsx: 'fsharp',
+  groovy: 'groovy',
+  gradle: 'groovy',
+  tf: 'hcl',
+  hcl: 'hcl',
+  proto: 'protobuf',
+  prisma: 'prisma',
+  astro: 'astro',
+  m: 'objective-c',
+  mm: 'objective-cpp',
+  tex: 'latex',
+  latex: 'latex',
+  diff: 'diff',
+  patch: 'diff',
+  nginx: 'nginx',
+  conf: 'ini',
+  cfg: 'ini',
+  env: 'dotenv',
+  bat: 'bat',
+  cmd: 'bat',
+  asm: 'asm',
+  s: 'asm',
+  jsonc: 'jsonc',
+  json5: 'json5',
+  csv: 'csv',
+  tsv: 'csv',
+  wasm: 'wasm',
+  ejs: 'html',
+  hbs: 'handlebars',
+  pug: 'pug',
+  jade: 'pug',
+  rst: 'rst',
+  jl: 'julia',
+  v: 'v',
+  sol: 'solidity',
+  glsl: 'glsl',
+  hlsl: 'hlsl',
+  wgsl: 'wgsl',
+};
+
+const FILENAME_MAP: Record<string, BundledLanguage> = {
+  dockerfile: 'dockerfile',
+  makefile: 'makefile',
+  cmakelists: 'cmake',
+  gemfile: 'ruby',
+  rakefile: 'ruby',
+  justfile: 'just',
+  vagrantfile: 'ruby',
+};
+
+function getLang(filePath: string): BundledLanguage | null {
+  const ext = filePath.split('.').pop()?.toLowerCase() || '';
+  const fileName = filePath.split('/').pop()?.toLowerCase() || '';
+
+  const fileNameMatch = FILENAME_MAP[fileName];
+  if (fileNameMatch) {
+    return fileNameMatch;
+  }
+
+  return LANG_MAP[ext] || null;
+}
+
+const ALL_LANGS: BundledLanguage[] = [
+  ...new Set([
+    ...Object.values(LANG_MAP),
+    ...Object.values(FILENAME_MAP),
+  ]),
+];
+
+let highlighterPromise: Promise<Highlighter> | null = null;
+
+function getHighlighter(): Promise<Highlighter> {
+  if (!highlighterPromise) {
+    highlighterPromise = createHighlighter({
+      themes: ['github-light', 'github-dark'],
+      langs: ALL_LANGS,
+    });
+  }
+  return highlighterPromise;
+}
+
+export interface HighlightedTokens {
+  tokens: { text: string; color?: string }[];
+}
+
+export function useHighlighter() {
+  const [highlighter, setHighlighter] = useState<Highlighter | null>(null);
+
+  useEffect(() => {
+    getHighlighter().then(setHighlighter);
+  }, []);
+
+  const highlight = useCallback((code: string, filePath: string, theme: 'light' | 'dark'): HighlightedTokens[] | null => {
+    if (!highlighter) {
+      return null;
+    }
+
+    const lang = getLang(filePath);
+    if (!lang) {
+      return null;
+    }
+
+    const shikiTheme = theme === 'dark' ? 'github-dark' : 'github-light';
+
+    try {
+      const result = highlighter.codeToTokens(code, {
+        lang,
+        theme: shikiTheme,
+      });
+
+      return result.tokens.map(line => ({
+        tokens: line.map(token => ({
+          text: token.content,
+          color: token.color,
+        })),
+      }));
+    } catch {
+      return null;
+    }
+  }, [highlighter]);
+
+  return { highlight, ready: highlighter !== null };
+}

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

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

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

@@ -0,0 +1,55 @@
+import { useEffect, useRef } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+
+interface KeyboardActions {
+  onNextFile: () => void;
+  onPrevFile: () => void;
+  onNextHunk: () => void;
+  onPrevHunk: () => void;
+  onToggleCollapse: () => void;
+  onCollapseAll: () => void;
+  onToggleReviewed: () => void;
+  onUnifiedView: () => void;
+  onSplitView: () => void;
+  onShowHelp: () => void;
+  onFocusSearch: () => void;
+  onEscape: () => void;
+}
+
+const HOTKEY_OPTIONS = { preventDefault: true };
+
+function isInputFocused(): boolean {
+  const tag = document.activeElement?.tagName;
+  return tag === 'INPUT' || tag === 'TEXTAREA';
+}
+
+export function useKeyboard(actions: KeyboardActions) {
+  const actionsRef = useRef(actions);
+  actionsRef.current = actions;
+
+  useHotkeys('j', actions.onNextFile, HOTKEY_OPTIONS);
+  useHotkeys('k', actions.onPrevFile, HOTKEY_OPTIONS);
+  useHotkeys('n', actions.onNextHunk, HOTKEY_OPTIONS);
+  useHotkeys('p', actions.onPrevHunk, HOTKEY_OPTIONS);
+  useHotkeys('x', actions.onToggleCollapse, HOTKEY_OPTIONS);
+  useHotkeys('shift+x', actions.onCollapseAll, HOTKEY_OPTIONS);
+  useHotkeys('r', actions.onToggleReviewed, HOTKEY_OPTIONS);
+  useHotkeys('u', actions.onUnifiedView, HOTKEY_OPTIONS);
+  useHotkeys('s', actions.onSplitView, HOTKEY_OPTIONS);
+  useHotkeys('escape', actions.onEscape, { enableOnFormTags: ['INPUT', 'TEXTAREA'] });
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === '/' && !isInputFocused()) {
+        e.preventDefault();
+        actionsRef.current.onFocusSearch();
+      }
+      if (e.key === '?' && !isInputFocused()) {
+        e.preventDefault();
+        actionsRef.current.onShowHelp();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+}

package/packages/ui/src/hooks/use-line-selection.ts

@@ -0,0 +1,157 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import type { CommentSide, LineSelection } from '../types/comment';
+
+interface UseLineSelectionOptions {
+  filePath: string;
+  onSelectionComplete: (selection: LineSelection) => void;
+}
+
+interface UseLineSelectionReturn {
+  selectionState: {
+    side: CommentSide;
+    anchorLine: number;
+    currentLine: number;
+  } | null;
+  handleLineMouseDown: (line: number, side: CommentSide) => void;
+  handleLineMouseEnter: (line: number, side: CommentSide) => void;
+  isLineInSelection: (line: number, side: CommentSide) => boolean;
+  getSelectionRange: () => { startLine: number; endLine: number; side: CommentSide } | null;
+}
+
+function getLineNumberFromPoint(x: number, y: number): number | null {
+  const el = document.elementFromPoint(x, y);
+  if (!el) {
+    return null;
+  }
+
+  const td = el.closest('td');
+  if (!td) {
+    return null;
+  }
+
+  const text = td.textContent?.trim();
+  if (!text) {
+    return null;
+  }
+
+  const num = parseInt(text, 10);
+  if (isNaN(num)) {
+    return null;
+  }
+
+  return num;
+}
+
+export function useLineSelection(options: UseLineSelectionOptions): UseLineSelectionReturn {
+  const { filePath, onSelectionComplete } = options;
+  const [selectionState, setSelectionState] = useState<{
+    side: CommentSide;
+    anchorLine: number;
+    currentLine: number;
+  } | null>(null);
+  const isDragging = useRef(false);
+  const anchorX = useRef(0);
+  const selectionRef = useRef(selectionState);
+  selectionRef.current = selectionState;
+
+  const handleLineMouseDown = useCallback((line: number, side: CommentSide) => {
+    isDragging.current = true;
+    anchorX.current = 0;
+    setSelectionState({ side, anchorLine: line, currentLine: line });
+  }, []);
+
+  const handleLineMouseEnter = useCallback((line: number, side: CommentSide) => {
+    if (!isDragging.current || !selectionRef.current) {
+      return;
+    }
+    if (side !== selectionRef.current.side) {
+      return;
+    }
+    setSelectionState(prev => {
+      if (!prev) {
+        return prev;
+      }
+      return { ...prev, currentLine: line };
+    });
+  }, []);
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isDragging.current) {
+        return;
+      }
+
+      if (anchorX.current === 0) {
+        anchorX.current = e.clientX;
+      }
+
+      const lineNum = getLineNumberFromPoint(anchorX.current, e.clientY);
+      if (lineNum !== null) {
+        setSelectionState(prev => {
+          if (!prev || prev.currentLine === lineNum) {
+            return prev;
+          }
+          return { ...prev, currentLine: lineNum };
+        });
+      }
+    };
+
+    const handleMouseUp = () => {
+      const state = selectionRef.current;
+      if (!isDragging.current || !state) {
+        isDragging.current = false;
+        return;
+      }
+      isDragging.current = false;
+
+      const startLine = Math.min(state.anchorLine, state.currentLine);
+      const endLine = Math.max(state.anchorLine, state.currentLine);
+
+      onSelectionComplete({
+        filePath,
+        side: state.side,
+        startLine,
+        endLine,
+      });
+      setSelectionState(null);
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [filePath, onSelectionComplete]);
+
+  const isLineInSelection = useCallback((line: number, side: CommentSide) => {
+    if (!selectionState) {
+      return false;
+    }
+    if (side !== selectionState.side) {
+      return false;
+    }
+    const start = Math.min(selectionState.anchorLine, selectionState.currentLine);
+    const end = Math.max(selectionState.anchorLine, selectionState.currentLine);
+    return line >= start && line <= end;
+  }, [selectionState]);
+
+  const getSelectionRange = useCallback(() => {
+    if (!selectionState) {
+      return null;
+    }
+    return {
+      startLine: Math.min(selectionState.anchorLine, selectionState.currentLine),
+      endLine: Math.max(selectionState.anchorLine, selectionState.currentLine),
+      side: selectionState.side,
+    };
+  }, [selectionState]);
+
+  return {
+    selectionState,
+    handleLineMouseDown,
+    handleLineMouseEnter,
+    isLineInSelection,
+    getSelectionRange,
+  };
+}

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

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

package/packages/ui/src/hooks/use-review-threads.ts

@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query';
+import { fetchThreads } from '../lib/api';
+import type { CommentThread } from '../types/comment';
+
+export function useReviewThreads(sessionId: string | null | undefined) {
+  return useQuery<CommentThread[]>({
+    queryKey: ['threads', sessionId],
+    queryFn: () => fetchThreads(sessionId!),
+    enabled: !!sessionId,
+    refetchInterval: 2000,
+  });
+}

package/packages/ui/src/hooks/use-search-params.ts

@@ -0,0 +1,26 @@
+import { useState, useEffect } from 'react';
+
+function getParams() {
+  const params = new URLSearchParams(window.location.search);
+  return {
+    ref: params.get('ref'),
+    theme: params.get('theme') as 'light' | 'dark' | null,
+    view: params.get('view') as 'split' | 'unified' | null,
+  };
+}
+
+export function useSearchParams() {
+  const [values, setValues] = useState(getParams);
+
+  useEffect(() => {
+    const handler = () => {
+      setValues(getParams());
+    };
+    window.addEventListener('popstate', handler);
+    return () => {
+      window.removeEventListener('popstate', handler);
+    };
+  }, []);
+
+  return values;
+}

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

@@ -0,0 +1,34 @@
+import { useState, useEffect, useLayoutEffect, useCallback } from 'react';
+
+type Theme = 'light' | 'dark';
+
+function getStoredTheme(): Theme | null {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+  return localStorage.getItem('diffity-theme') as Theme | null;
+}
+
+export function getTheme(): Theme {
+  return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
+}
+
+export function useTheme(initialTheme?: Theme | null) {
+  const [theme, setTheme] = useState<Theme>(
+    () => getStoredTheme() || initialTheme || 'light'
+  );
+
+  useLayoutEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+  }, [theme]);
+
+  const toggleTheme = useCallback(() => {
+    setTheme(prev => {
+      const next = prev === 'light' ? 'dark' : 'light';
+      localStorage.setItem('diffity-theme', next);
+      return next;
+    });
+  }, []);
+
+  return { theme, toggleTheme };
+}

package/packages/ui/src/hooks/use-thread-navigation.ts

@@ -0,0 +1,43 @@
+import { useState, useCallback, useMemo } from 'react';
+import type { CommentThread } from '../types/comment';
+import { isThreadResolved } from '../types/comment';
+
+export function useThreadNavigation(threads: CommentThread[], onScrollToThread: (threadId: string, filePath: string) => void) {
+  const [currentIndex, setCurrentIndex] = useState(-1);
+
+  const unresolvedThreads = useMemo(() => threads.filter(t => !isThreadResolved(t)), [threads]);
+  const count = unresolvedThreads.length;
+
+  const scrollToThread = useCallback((index: number) => {
+    const thread = unresolvedThreads[index];
+    if (!thread) {
+      return;
+    }
+    onScrollToThread(thread.id, thread.filePath);
+  }, [unresolvedThreads, onScrollToThread]);
+
+  const goToPrevious = useCallback(() => {
+    if (count === 0) {
+      return;
+    }
+    const nextIndex = currentIndex <= 0 ? count - 1 : currentIndex - 1;
+    setCurrentIndex(nextIndex);
+    scrollToThread(nextIndex);
+  }, [currentIndex, count, scrollToThread]);
+
+  const goToNext = useCallback(() => {
+    if (count === 0) {
+      return;
+    }
+    const nextIndex = currentIndex >= count - 1 ? 0 : currentIndex + 1;
+    setCurrentIndex(nextIndex);
+    scrollToThread(nextIndex);
+  }, [currentIndex, count, scrollToThread]);
+
+  return {
+    currentIndex,
+    count,
+    goToPrevious,
+    goToNext,
+  };
+}