nitpiq 0.1.0

package/src/tui/demo.ts

@@ -0,0 +1,241 @@
+import type { FileChange, Repo } from "../git/repo";
+import { AuthorHuman, AuthorModel, ThreadOpen, ThreadResolved, type Comment, type ReviewSession, type Thread } from "../review/types";
+
+export interface DemoFile {
+  change: FileChange;
+  content: string;
+  diff: string;
+  threads: Thread[];
+  commentsByThread: Record<string, Comment[]>;
+}
+
+export interface DemoState {
+  repo: Repo;
+  session: ReviewSession;
+  repoFiles: string[];
+  files: DemoFile[];
+  threadCounts: Record<string, number>;
+  status: string;
+  focus: "files" | "diff";
+  showFullFile: boolean;
+  fileCursor: number;
+  diffCursor: number;
+}
+
+export function createDemoState(): DemoState {
+  const session: ReviewSession = {
+    id: "demo-session",
+    repoRoot: "/demo/nitpiq",
+    active: true,
+    createdAt: new Date("2026-03-09T12:00:00Z"),
+    updatedAt: new Date("2026-03-09T12:00:00Z"),
+  };
+
+  const checkoutThread: Thread = {
+    id: "thread-checkout",
+    sessionId: session.id,
+    filePath: "src/checkout/applyCoupon.ts",
+    side: "new",
+    originalLine: 14,
+    lineEnd: 14,
+    currentLine: 14,
+    anchorContent: "  if (!coupon || !cart.total) {",
+    contextBefore: "export function applyCoupon(cart: Cart, coupon?: Coupon) {",
+    contextAfter: "    return cart;\n  }",
+    isOutdated: false,
+    status: ThreadOpen,
+    createdAt: new Date("2026-03-09T12:00:00Z"),
+    updatedAt: new Date("2026-03-09T12:01:00Z"),
+    commentCount: 2,
+    firstComment: "This early return skips invalid coupon telemetry.",
+  };
+
+  const threadsPanel: Thread = {
+    id: "thread-layout",
+    sessionId: session.id,
+    filePath: "src/tui/panels/files.tsx",
+    side: "new",
+    originalLine: 22,
+    lineEnd: 22,
+    currentLine: 22,
+    anchorContent: "      <Text wrap=\"truncate-end\">{label}</Text>",
+    contextBefore: "    <Box flexDirection=\"row\">",
+    contextAfter: "    </Box>",
+    isOutdated: false,
+    status: ThreadResolved,
+    createdAt: new Date("2026-03-09T11:20:00Z"),
+    updatedAt: new Date("2026-03-09T11:45:00Z"),
+    commentCount: 1,
+    firstComment: "Looks better with single-line clipping.",
+  };
+
+  const checkoutComments: Record<string, Comment[]> = {
+    [checkoutThread.id]: [
+      {
+        id: "comment-1",
+        threadId: checkoutThread.id,
+        author: AuthorModel,
+        body: "This early return skips the `trackCouponApplied` call, so invalid coupons won't appear in analytics. Consider emitting a separate `couponRejected` event before returning.",
+        createdAt: new Date("2026-03-09T12:00:00Z"),
+      },
+      {
+        id: "comment-2",
+        threadId: checkoutThread.id,
+        author: AuthorHuman,
+        body: "Good catch — I still want to keep the guard, but I can emit an event before returning.\nI'll add `trackCouponRejected({ code: coupon?.code })` right before the early return.",
+        createdAt: new Date("2026-03-09T12:01:00Z"),
+      },
+      {
+        id: "comment-3a",
+        threadId: checkoutThread.id,
+        author: AuthorModel,
+        body: "That sounds good. Make sure to handle the `coupon?.code` being `undefined` gracefully in the telemetry pipeline.",
+        createdAt: new Date("2026-03-09T12:02:00Z"),
+      },
+    ],
+  };
+
+  const filesComments: Record<string, Comment[]> = {
+    [threadsPanel.id]: [
+      {
+        id: "comment-3",
+        threadId: threadsPanel.id,
+        author: AuthorHuman,
+        body: "Looks better with single-line clipping.",
+        createdAt: new Date("2026-03-09T11:45:00Z"),
+      },
+    ],
+  };
+
+  const checkoutFile: DemoFile = {
+    change: {
+      path: "src/checkout/applyCoupon.ts",
+      oldPath: "",
+      kind: "modified",
+      staged: false,
+      unstaged: true,
+    },
+    content: [
+      "export function applyCoupon(cart: Cart, coupon?: Coupon) {",
+      "  if (!coupon || !cart.total) {",
+      "    return cart;",
+      "  }",
+      "",
+      "  const nextTotal = Math.max(0, cart.total - coupon.amount);",
+      "",
+      "  trackCouponApplied({",
+      "    code: coupon.code,",
+      "    previousTotal: cart.total,",
+      "    nextTotal,",
+      "  });",
+      "",
+      "  return { ...cart, total: nextTotal };",
+      "}",
+    ].join("\n"),
+    diff: [
+      "diff --git a/src/checkout/applyCoupon.ts b/src/checkout/applyCoupon.ts",
+      "index 1234567..89abcde 100644",
+      "--- a/src/checkout/applyCoupon.ts",
+      "+++ b/src/checkout/applyCoupon.ts",
+      "@@ -1,7 +1,14 @@",
+      " export function applyCoupon(cart: Cart, coupon?: Coupon) {",
+      "-  if (!coupon) {",
+      "+  if (!coupon || !cart.total) {",
+      "     return cart;",
+      "   }",
+      " ",
+      "+  const nextTotal = Math.max(0, cart.total - coupon.amount);",
+      "+",
+      "+  trackCouponApplied({",
+      "+    code: coupon.code,",
+      "+    previousTotal: cart.total,",
+      "+    nextTotal,",
+      "+  });",
+      "-  return { ...cart, total: cart.total - coupon.amount };",
+      "+  return { ...cart, total: nextTotal };",
+      " }",
+    ].join("\n"),
+    threads: [checkoutThread],
+    commentsByThread: checkoutComments,
+  };
+
+  const filesPaneFile: DemoFile = {
+    change: {
+      path: "src/tui/panels/files.tsx",
+      oldPath: "",
+      kind: "modified",
+      staged: true,
+      unstaged: false,
+    },
+    content: [
+      "export function FileRow({ active, label }: Props) {",
+      "  return (",
+      "    <Box flexDirection=\"row\">",
+      "      <Text color={active ? \"blue\" : undefined}>{active ? \">\" : \" \"}</Text>",
+      "      <Text wrap=\"truncate-end\">{label}</Text>",
+      "    </Box>",
+      "  );",
+      "}",
+    ].join("\n"),
+    diff: [
+      "diff --git a/src/tui/panels/files.tsx b/src/tui/panels/files.tsx",
+      "index abcdef0..1234567 100644",
+      "--- a/src/tui/panels/files.tsx",
+      "+++ b/src/tui/panels/files.tsx",
+      "@@ -2,6 +2,7 @@",
+      "   return (",
+      "     <Box flexDirection=\"row\">",
+      "+      <Text color={active ? \"blue\" : undefined}>{active ? \">\" : \" \"}</Text>",
+      "       <Text wrap=\"truncate-end\">{label}</Text>",
+      "     </Box>",
+      "   );",
+    ].join("\n"),
+    threads: [threadsPanel],
+    commentsByThread: filesComments,
+  };
+
+  const readmeFile: DemoFile = {
+    change: {
+      path: "README.md",
+      oldPath: "",
+      kind: "added",
+      staged: false,
+      unstaged: true,
+    },
+    content: "# Nit Demo\n\nTerminal review UI snapshot mode.",
+    diff: [
+      "diff --git a/README.md b/README.md",
+      "new file mode 100644",
+      "--- /dev/null",
+      "+++ b/README.md",
+      "@@ -0,0 +1,3 @@",
+      "+# Nit Demo",
+      "+",
+      "+Terminal review UI snapshot mode.",
+    ].join("\n"),
+    threads: [],
+    commentsByThread: {},
+  };
+
+  const files = [checkoutFile, filesPaneFile, readmeFile];
+
+  return {
+    repo: {
+      root: "/demo/nitpiq",
+      name: "nitpiq-demo",
+      hasHead: true,
+    },
+    session,
+    repoFiles: files.map((file) => file.change.path),
+    files,
+    threadCounts: {
+      "src/checkout/applyCoupon.ts": 1,
+      "src/tui/panels/files.tsx": 0,
+    },
+    status: "Demo mode - fixed data for UI snapshots",
+    focus: "diff",
+    showFullFile: false,
+    fileCursor: 0,
+    diffCursor: 18,
+  };
+}

package/src/tui/diff.ts

@@ -0,0 +1,99 @@
+import type { Thread } from "../review/types";
+
+export type DiffRowKind = "header" | "hunk" | "context" | "add" | "delete" | "meta";
+
+export interface DiffRow {
+  kind: DiffRowKind;
+  text: string;
+  oldLine: number | null;
+  newLine: number | null;
+}
+
+export interface ThreadMarker {
+  thread: Thread;
+  preview: string;
+}
+
+export function parseDiffRows(diffText: string): DiffRow[] {
+  const rows: DiffRow[] = [];
+  let oldLine = 0;
+  let newLine = 0;
+
+  for (const line of diffText.split("\n")) {
+    if (line.startsWith("@@")) {
+      const match = /@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/.exec(line);
+      oldLine = match ? Number(match[1]) : 0;
+      newLine = match ? Number(match[2]) : 0;
+      rows.push({ kind: "hunk", text: line, oldLine: null, newLine: null });
+      continue;
+    }
+
+    if (line.startsWith("diff --git") || line.startsWith("index ") || line.startsWith("--- ") || line.startsWith("+++ ")) {
+      continue;
+    }
+
+    if (line.startsWith("+") && !line.startsWith("+++")) {
+      rows.push({ kind: "add", text: line.slice(1), oldLine: null, newLine });
+      newLine += 1;
+      continue;
+    }
+
+    if (line.startsWith("-") && !line.startsWith("---")) {
+      rows.push({ kind: "delete", text: line.slice(1), oldLine, newLine: null });
+      oldLine += 1;
+      continue;
+    }
+
+    if (line.startsWith(" ")) {
+      rows.push({ kind: "context", text: line.slice(1), oldLine, newLine });
+      oldLine += 1;
+      newLine += 1;
+      continue;
+    }
+
+    rows.push({ kind: "meta", text: line, oldLine: null, newLine: null });
+  }
+
+  return rows;
+}
+
+export function fullFileRows(content: string): DiffRow[] {
+  return content.split("\n").map((line, index) => ({
+    kind: "context",
+    text: line,
+    oldLine: index + 1,
+    newLine: index + 1,
+  }));
+}
+
+export function threadMap(threads: Thread[]): Map<number, ThreadMarker[]> {
+  const map = new Map<number, ThreadMarker[]>();
+  for (const thread of threads) {
+    if (thread.currentLine <= 0) {
+      continue;
+    }
+
+    const preview = thread.firstComment.split("\n")[0] ?? "";
+    const marker: ThreadMarker = { thread, preview };
+    const existing = map.get(thread.currentLine) ?? [];
+    existing.push(marker);
+    map.set(thread.currentLine, existing);
+  }
+  return map;
+}
+
+export function visibleWindow<T>(items: T[], cursor: number, height: number): { start: number; end: number; items: T[] } {
+  if (items.length <= height) {
+    return { start: 0, end: items.length, items };
+  }
+
+  const half = Math.floor(height / 2);
+  let start = Math.max(0, cursor - half);
+  let end = start + height;
+  if (end > items.length) {
+    end = items.length;
+    start = Math.max(0, end - height);
+  }
+
+  return { start, end, items: items.slice(start, end) };
+}

package/src/tui/highlight.ts

@@ -0,0 +1,208 @@
+import pc from "picocolors";
+import { fg, type RGB, type Theme } from "./theme";
+
+interface SyntaxColors {
+  keyword: RGB;
+  string: RGB;
+  comment: RGB;
+  number: RGB;
+  type: RGB;
+  fn: RGB;
+  property: RGB;
+  punctuation: RGB;
+}
+
+const palettes: Record<string, SyntaxColors> = {
+  dark: {
+    keyword: [198, 120, 221],
+    string: [152, 195, 121],
+    comment: [92, 99, 112],
+    number: [209, 154, 102],
+    type: [86, 182, 194],
+    fn: [97, 175, 239],
+    property: [171, 178, 191],
+    punctuation: [140, 140, 140],
+  },
+  catppuccin: {
+    keyword: [203, 166, 247],
+    string: [166, 227, 161],
+    comment: [108, 112, 134],
+    number: [250, 179, 135],
+    type: [148, 226, 213],
+    fn: [137, 180, 250],
+    property: [205, 214, 244],
+    punctuation: [147, 153, 178],
+  },
+  nord: {
+    keyword: [180, 142, 173],
+    string: [163, 190, 140],
+    comment: [76, 86, 106],
+    number: [208, 135, 112],
+    type: [143, 188, 187],
+    fn: [136, 192, 208],
+    property: [216, 222, 233],
+    punctuation: [178, 184, 196],
+  },
+  gruvbox: {
+    keyword: [211, 134, 155],
+    string: [184, 187, 38],
+    comment: [146, 131, 116],
+    number: [254, 128, 25],
+    type: [131, 165, 152],
+    fn: [131, 165, 152],
+    property: [235, 219, 178],
+    punctuation: [168, 153, 132],
+  },
+};
+
+const KEYWORDS = new Set([
+  "if", "else", "elif", "for", "while", "do", "switch", "case", "match",
+  "break", "continue", "return", "yield", "try", "catch", "except",
+  "finally", "throw", "raise", "default", "when",
+  "const", "let", "var", "function", "fn", "func", "def", "class", "struct",
+  "enum", "type", "interface", "trait", "impl", "module", "mod", "package",
+  "namespace", "import", "export", "from", "use", "require", "include",
+  "extends", "implements", "abstract", "override",
+  "new", "delete", "typeof", "instanceof", "in", "of", "is", "as",
+  "async", "await", "static", "readonly", "mut", "pub", "private",
+  "protected", "public", "extern", "unsafe", "declare",
+  "and", "or", "not", "with", "defer", "go", "select", "chan", "range",
+  "true", "false", "null", "nil", "None", "undefined", "void",
+  "self", "this", "super", "Self",
+  "lambda", "pass", "begin", "end", "rescue", "ensure", "loop",
+  "move", "ref", "where", "dyn", "crate", "goto",
+]);
+
+function getSyntax(theme: Theme): SyntaxColors {
+  return palettes[theme.name] ?? palettes["dark"]!;
+}
+
+const cache = new Map<string, string>();
+let cacheTheme = "";
+
+export function clearHighlightCache(): void {
+  cache.clear();
+  cacheTheme = "";
+}
+
+export function highlightLine(line: string, theme: Theme): string {
+  if (theme.name !== cacheTheme) {
+    cache.clear();
+    cacheTheme = theme.name;
+  }
+  const cached = cache.get(line);
+  if (cached !== undefined) return cached;
+  const s = getSyntax(theme);
+  let out = "";
+  let pos = 0;
+  const len = line.length;
+
+  while (pos < len) {
+    const ch = line[pos]!;
+
+    // Line comments: // or --
+    if ((ch === "/" && line[pos + 1] === "/") || (ch === "-" && line[pos + 1] === "-")) {
+      out += fg(s.comment, line.slice(pos));
+      return out;
+    }
+    // Hash comments (only at start-of-content or after whitespace)
+    if (ch === "#" && (pos === 0 || line[pos - 1] === " " || line[pos - 1] === "\t")) {
+      out += fg(s.comment, line.slice(pos));
+      return out;
+    }
+
+    // Block comment within a line: /* ... */
+    if (ch === "/" && line[pos + 1] === "*") {
+      const close = line.indexOf("*/", pos + 2);
+      if (close >= 0) {
+        out += fg(s.comment, line.slice(pos, close + 2));
+        pos = close + 2;
+        continue;
+      }
+      out += fg(s.comment, line.slice(pos));
+      return out;
+    }
+
+    // Strings: "...", '...', `...`
+    if (ch === '"' || ch === "'" || ch === "`") {
+      let end = pos + 1;
+      while (end < len) {
+        if (line[end] === "\\") { end += 2; continue; }
+        if (line[end] === ch) { end++; break; }
+        end++;
+      }
+      out += fg(s.string, line.slice(pos, end));
+      pos = end;
+      continue;
+    }
+
+    // Numbers (not preceded by a letter/underscore)
+    if (/\d/.test(ch) && (pos === 0 || !/[a-zA-Z_$]/.test(line[pos - 1] ?? ""))) {
+      let end = pos;
+      if (ch === "0" && pos + 1 < len && /[xXbBoO]/.test(line[pos + 1]!)) {
+        end += 2;
+        while (end < len && /[0-9a-fA-F_]/.test(line[end]!)) end++;
+      } else {
+        while (end < len && /[0-9_]/.test(line[end]!)) end++;
+        if (end < len && line[end] === ".") {
+          end++;
+          while (end < len && /[0-9_]/.test(line[end]!)) end++;
+        }
+        if (end < len && /[eE]/.test(line[end]!)) {
+          end++;
+          if (end < len && /[+\-]/.test(line[end]!)) end++;
+          while (end < len && /[0-9_]/.test(line[end]!)) end++;
+        }
+      }
+      out += fg(s.number, line.slice(pos, end));
+      pos = end;
+      continue;
+    }
+
+    // Words: identifiers, keywords, types, function calls, decorators
+    if (/[a-zA-Z_$@]/.test(ch)) {
+      let end = pos;
+      const isDecorator = ch === "@";
+      if (isDecorator) end++;
+      while (end < len && /[a-zA-Z0-9_$]/.test(line[end]!)) end++;
+      const word = line.slice(pos, end);
+      const bare = isDecorator ? word.slice(1) : word;
+
+      if (isDecorator) {
+        out += fg(s.keyword, word);
+      } else if (KEYWORDS.has(bare)) {
+        out += fg(s.keyword, word);
+      } else if (/^[A-Z][a-zA-Z0-9]*$/.test(bare) && bare.length > 1) {
+        out += fg(s.type, word);
+      } else if (end < len && line[end] === "(") {
+        out += fg(s.fn, word);
+      } else {
+        out += word;
+      }
+      pos = end;
+      continue;
+    }
+
+    // Punctuation
+    if (/[()[\]{},;.]/.test(ch)) {
+      out += fg(s.punctuation, ch);
+      pos++;
+      continue;
+    }
+
+    // Everything else (operators, whitespace) pass through
+    out += ch;
+    pos++;
+  }
+
+  cache.set(line, out);
+  return out;
+}
+
+export function renderMarkdown(text: string, theme: Theme): string {
+  let result = text;
+  result = result.replace(/`([^`]+)`/g, (_, c: string) => fg(theme.accent, c));
+  result = result.replace(/\*\*(.+?)\*\*/g, (_, b: string) => pc.bold(b));
+  result = result.replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, (_, i: string) => pc.italic(i));
+  return result;
+}

package/src/tui/theme.ts

@@ -0,0 +1,107 @@
+export type RGB = readonly [number, number, number];
+
+export interface Theme {
+  name: string;
+  border: string;
+  borderFocus: string;
+  cursor: RGB;
+  selection: RGB;
+  accent: RGB;
+  add: RGB;
+  addBg: RGB;
+  del: RGB;
+  delBg: RGB;
+  hunk: RGB;
+  thread: RGB;
+  threadBg: RGB;
+  staged: RGB;
+  warning: RGB;
+}
+
+const dark: Theme = {
+  name: "dark",
+  border: "gray",
+  borderFocus: "blue",
+  cursor: [25, 35, 55],
+  selection: [20, 55, 110],
+  accent: [70, 130, 255],
+  add: [80, 200, 80],
+  addBg: [18, 30, 18],
+  del: [240, 80, 80],
+  delBg: [40, 18, 18],
+  hunk: [80, 180, 220],
+  thread: [180, 120, 220],
+  threadBg: [28, 22, 38],
+  staged: [80, 200, 80],
+  warning: [230, 180, 50],
+};
+
+const catppuccin: Theme = {
+  name: "catppuccin",
+  border: "#585b70",
+  borderFocus: "#89b4fa",
+  cursor: [49, 50, 68],
+  selection: [69, 71, 90],
+  accent: [137, 180, 250],
+  add: [166, 227, 161],
+  addBg: [33, 40, 35],
+  del: [243, 139, 168],
+  delBg: [43, 30, 35],
+  hunk: [137, 220, 235],
+  thread: [203, 166, 247],
+  threadBg: [35, 28, 45],
+  staged: [166, 227, 161],
+  warning: [249, 226, 175],
+};
+
+const nord: Theme = {
+  name: "nord",
+  border: "#4c566a",
+  borderFocus: "#88c0d0",
+  cursor: [55, 62, 77],
+  selection: [67, 76, 94],
+  accent: [136, 192, 208],
+  add: [163, 190, 140],
+  addBg: [48, 56, 50],
+  del: [191, 97, 106],
+  delBg: [55, 48, 50],
+  hunk: [136, 192, 208],
+  thread: [180, 142, 173],
+  threadBg: [42, 38, 48],
+  staged: [163, 190, 140],
+  warning: [235, 203, 139],
+};
+
+const gruvbox: Theme = {
+  name: "gruvbox",
+  border: "#504945",
+  borderFocus: "#d79921",
+  cursor: [60, 56, 54],
+  selection: [80, 73, 69],
+  accent: [215, 153, 33],
+  add: [184, 187, 38],
+  addBg: [42, 42, 28],
+  del: [251, 73, 52],
+  delBg: [50, 32, 30],
+  hunk: [131, 165, 152],
+  thread: [211, 134, 155],
+  threadBg: [42, 30, 34],
+  staged: [184, 187, 38],
+  warning: [250, 189, 47],
+};
+
+export const themes: Record<string, Theme> = { dark, catppuccin, nord, gruvbox };
+export const themeNames = Object.keys(themes);
+
+export function getTheme(name?: string): Theme {
+  if (name && name in themes) return themes[name]!;
+  return dark;
+}
+
+export function bg(rgb: RGB, text: string): string {
+  return `\u001b[48;2;${rgb[0]};${rgb[1]};${rgb[2]}m${text}\u001b[49m`;
+}
+
+export function fg(rgb: RGB, text: string): string {
+  return `\u001b[38;2;${rgb[0]};${rgb[1]};${rgb[2]}m${text}\u001b[39m`;
+}