revspec 0.3.0 → 0.4.0

package/src/tui/pager.ts

@@ -7,7 +7,8 @@ import {
   TextAttributes,
   type CliRenderer,
 } from "@opentui/core";
-import { theme } from "./theme";
+import { theme } from "./ui/theme";
+import { parseMarkdownLine, addSegments, collectTable, renderTableBorder, renderTableSeparator, renderTableRow, parseTableCells, type TableBlock } from "./ui/markdown";
 
 const MAX_HINT_LENGTH = 40;
 
@@ -25,250 +26,6 @@ function threadHint(thread: Thread): string {
   return text.slice(0, MAX_HINT_LENGTH - 1) + "\u2026";
 }
 
-// --- Inline markdown parser ---
-
-interface StyledSegment {
-  text: string;
-  fg?: string;
-  attributes?: number;
-}
-
-/**
- * Parse inline markdown (bold, italic, code) into styled segments.
- * Strips syntax markers and returns display text with style info.
- */
-function parseInlineMarkdown(text: string): StyledSegment[] {
-  const segments: StyledSegment[] = [];
-  // Order matters: **bold** before *italic*
-  const regex = /(\*\*(.+?)\*\*|\*(.+?)\*|`([^`]+)`)/g;
-  let pos = 0;
-  let match;
-  while ((match = regex.exec(text)) !== null) {
-    if (match.index > pos) {
-      segments.push({ text: text.slice(pos, match.index) });
-    }
-    if (match[2] !== undefined) {
-      // **bold**
-      segments.push({ text: match[2], attributes: TextAttributes.BOLD });
-    } else if (match[3] !== undefined) {
-      // *italic*
-      segments.push({ text: match[3], attributes: TextAttributes.ITALIC });
-    } else if (match[4] !== undefined) {
-      // `code`
-      segments.push({ text: match[4], fg: theme.green });
-    }
-    pos = match.index + match[0].length;
-  }
-  if (pos < text.length) {
-    segments.push({ text: text.slice(pos) });
-  }
-  if (segments.length === 0) {
-    segments.push({ text });
-  }
-  return segments;
-}
-
-/**
- * Parse a full line of markdown into styled segments.
- * Handles block-level syntax (headings, lists, blockquotes, hr)
- * and delegates inline content to parseInlineMarkdown.
- */
-function parseMarkdownLine(line: string): StyledSegment[] {
-  // Heading: # ... ###### (strip markers, bold + colored)
-  const headingMatch = line.match(/^(#{1,6})\s+(.*)/);
-  if (headingMatch) {
-    const level = headingMatch[1].length;
-    const color = level <= 2 ? theme.blue : theme.mauve;
-    // Parse inline markdown within heading text
-    const inner = parseInlineMarkdown(headingMatch[2]);
-    return inner.map((s) => ({
-      ...s,
-      fg: s.fg ?? color,
-      attributes: (s.attributes ?? 0) | TextAttributes.BOLD,
-    }));
-  }
-
-  // Horizontal rule: --- or *** or ___
-  if (/^(\s*[-*_]\s*){3,}$/.test(line)) {
-    return [{ text: "\u2500".repeat(40), fg: theme.overlay, attributes: TextAttributes.DIM }];
-  }
-
-  // Blockquote: > text
-  if (line.startsWith("> ")) {
-    const inner = parseInlineMarkdown(line.slice(2));
-    return [
-      { text: "\u2502 ", fg: theme.overlay },
-      ...inner.map((s) => ({
-        ...s,
-        fg: s.fg ?? theme.overlay,
-        attributes: (s.attributes ?? 0) | TextAttributes.ITALIC,
-      })),
-    ];
-  }
-
-  // Unordered list: - item, * item, + item
-  const ulMatch = line.match(/^(\s*)([-*+])\s+(.*)/);
-  if (ulMatch) {
-    return [
-      { text: ulMatch[1] + "\u2022 ", fg: theme.yellow },
-      ...parseInlineMarkdown(ulMatch[3]),
-    ];
-  }
-
-  // Ordered list: 1. item
-  const olMatch = line.match(/^(\s*)(\d+)\.\s+(.*)/);
-  if (olMatch) {
-    return [
-      { text: `${olMatch[1]}${olMatch[2]}. `, fg: theme.yellow },
-      ...parseInlineMarkdown(olMatch[3]),
-    ];
-  }
-
-  // Regular line — parse inline markdown only
-  return parseInlineMarkdown(line);
-}
-
-/**
- * Add styled segments as TextNodeRenderable children to a parent.
- */
-function addSegments(parent: TextRenderable, segments: StyledSegment[], defaultFg: string): void {
-  for (const seg of segments) {
-    const node = TextNodeRenderable.fromString(seg.text, {
-      fg: seg.fg ?? defaultFg,
-      attributes: seg.attributes,
-    });
-    parent.add(node);
-  }
-}
-
-// --- Table rendering ---
-
-const SEPARATOR_RE = /^\|[\s:]*-+[\s:]*(\|[\s:]*-+[\s:]*)*\|?\s*$/;
-
-/** Split a table row into trimmed cell values (strips outer pipes). */
-function parseTableCells(line: string): string[] {
-  const trimmed = line.trim();
-  // Remove leading/trailing pipes and split
-  const inner = trimmed.startsWith("|") ? trimmed.slice(1) : trimmed;
-  const withoutTrailing = inner.endsWith("|") ? inner.slice(0, -1) : inner;
-  return withoutTrailing.split("|").map((c) => c.trim());
-}
-
-/** Compute the display width of a string (strips inline markdown markers). */
-function displayWidth(text: string): number {
-  // Remove **bold**, *italic*, `code` markers to get display length
-  return text
-    .replace(/\*\*(.+?)\*\*/g, "$1")
-    .replace(/\*(.+?)\*/g, "$1")
-    .replace(/`([^`]+)`/g, "$1")
-    .length;
-}
-
-interface TableBlock {
-  startIndex: number;
-  lines: string[];
-  separatorIndex: number; // relative to startIndex, -1 if none
-  colWidths: number[];
-}
-
-/** Scan ahead from a starting `|` line and collect the full table block. */
-function collectTable(specLines: string[], start: number): TableBlock {
-  const lines: string[] = [];
-  let i = start;
-  while (i < specLines.length && specLines[i].trimStart().startsWith("|")) {
-    lines.push(specLines[i]);
-    i++;
-  }
-
-  // Find separator row
-  let separatorIndex = -1;
-  for (let j = 0; j < lines.length; j++) {
-    if (SEPARATOR_RE.test(lines[j])) {
-      separatorIndex = j;
-      break;
-    }
-  }
-
-  // Calculate column widths from all non-separator rows
-  const allCells = lines
-    .filter((_, j) => j !== separatorIndex)
-    .map(parseTableCells);
-  const maxCols = Math.max(...allCells.map((r) => r.length), 0);
-  const colWidths: number[] = new Array(maxCols).fill(0);
-  for (const row of allCells) {
-    for (let c = 0; c < row.length; c++) {
-      colWidths[c] = Math.max(colWidths[c], displayWidth(row[c]));
-    }
-  }
-  // Minimum width of 3 per column
-  for (let c = 0; c < colWidths.length; c++) {
-    colWidths[c] = Math.max(colWidths[c], 3);
-  }
-
-  return { startIndex: start, lines, separatorIndex, colWidths };
-}
-
-/** Render a table separator row with box-drawing characters. */
-function renderTableSeparator(parent: TextRenderable, colWidths: number[]): void {
-  const parts = colWidths.map((w) => "\u2500".repeat(w + 2));
-  const line = "\u251c" + parts.join("\u253c") + "\u2524";
-  parent.add(TextNodeRenderable.fromString(line, { fg: theme.overlay }));
-}
-
-/** Render a table data/header row with padded, styled cells. */
-function renderTableRow(
-  parent: TextRenderable,
-  cells: string[],
-  colWidths: number[],
-  isHeader: boolean,
-): void {
-  for (let c = 0; c < colWidths.length; c++) {
-    const cellText = c < cells.length ? cells[c] : "";
-    const dw = displayWidth(cellText);
-    const padding = Math.max(0, colWidths[c] - dw);
-
-    // Left border
-    parent.add(TextNodeRenderable.fromString(
-      c === 0 ? "\u2502 " : " \u2502 ",
-      { fg: theme.overlay }
-    ));
-
-    // Cell content — parse inline markdown, apply header bold
-    const segments = parseInlineMarkdown(cellText);
-    for (const seg of segments) {
-      const attrs = isHeader
-        ? (seg.attributes ?? 0) | TextAttributes.BOLD
-        : seg.attributes;
-      parent.add(TextNodeRenderable.fromString(seg.text, {
-        fg: seg.fg ?? theme.text,
-        attributes: attrs,
-      }));
-    }
-
-    // Padding
-    if (padding > 0) {
-      parent.add(TextNodeRenderable.fromString(" ".repeat(padding), {}));
-    }
-  }
-  // Right border
-  parent.add(TextNodeRenderable.fromString(
-    " \u2502",
-    { fg: theme.overlay }
-  ));
-}
-
-/** Render a top or bottom border for the table. */
-function renderTableBorder(parent: TextRenderable, colWidths: number[], position: "top" | "bottom"): void {
-  const [left, mid, right] = position === "top"
-    ? ["\u250c", "\u252c", "\u2510"]
-    : ["\u2514", "\u2534", "\u2518"];
-  const parts = colWidths.map((w) => "\u2500".repeat(w + 2));
-  parent.add(TextNodeRenderable.fromString(
-    left + parts.join(mid) + right,
-    { fg: theme.overlay }
-  ));
-}
-
 // --- Plain text builder (for tests) ---
 
 /**
@@ -334,7 +91,7 @@ export function buildPagerNodes(lineNode: TextRenderable, state: ReviewState, se
 
     // Thread indicator — gutter bar on the left
     let indicator = " ";
-    let indicatorColor = theme.overlay;
+    let indicatorColor: string = theme.textDim;
     if (thread) {
       const isUnread = unreadThreadIds && unreadThreadIds.has(thread.id);
       if (isUnread) {
@@ -356,7 +113,7 @@ export function buildPagerNodes(lineNode: TextRenderable, state: ReviewState, se
 
     // Top border before first table row (on its own visual line with blank gutter)
     if (isTable && relIdx === 0) {
-      lineNode.add(TextNodeRenderable.fromString("        ", { fg: theme.overlay }));
+      lineNode.add(TextNodeRenderable.fromString("        ", { fg: theme.textDim }));
       renderTableBorder(lineNode, tableBlock.colWidths, "top");
       lineNode.add(TextNodeRenderable.fromString("\n", {}));
     }
@@ -364,15 +121,15 @@ export function buildPagerNodes(lineNode: TextRenderable, state: ReviewState, se
     // Gutter: cursor + indicator + line number (dimmed)
     lineNode.add(TextNodeRenderable.fromString(
       `${prefix}`,
-      { fg: isCursor ? theme.text : theme.overlay }
+      { fg: isCursor ? theme.text : theme.textDim, bg: isCursor ? theme.backgroundElement : undefined }
     ));
     lineNode.add(TextNodeRenderable.fromString(
       indicator,
-      { fg: indicatorColor }
+      { fg: indicatorColor, bg: isCursor ? theme.backgroundElement : undefined }
     ));
     lineNode.add(TextNodeRenderable.fromString(
       `${padLineNum(lineNum)}  `,
-      { fg: theme.overlay, attributes: TextAttributes.DIM }
+      { fg: theme.textDim, attributes: TextAttributes.DIM, bg: isCursor ? theme.backgroundElement : undefined }
     ));
 
     // Spec text — table or regular markdown
@@ -390,18 +147,28 @@ export function buildPagerNodes(lineNode: TextRenderable, state: ReviewState, se
       // Bottom border after last row (on its own visual line with blank gutter)
       if (relIdx === tableBlock.lines.length - 1) {
         lineNode.add(TextNodeRenderable.fromString("\n", {}));
-        lineNode.add(TextNodeRenderable.fromString("        ", { fg: theme.overlay }));
+        lineNode.add(TextNodeRenderable.fromString("        ", { fg: theme.textDim }));
         renderTableBorder(lineNode, tableBlock.colWidths, "bottom");
       }
     } else if (searchQuery) {
-      // When searching, show raw text with search markers (no markdown styling)
-      const regex = new RegExp(searchQuery.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gi");
-      const highlighted = specText.replace(regex, (match) => `>>${match}<<`);
-      lineNode.add(TextNodeRenderable.fromString(highlighted, { fg: theme.text }));
+      // When searching, show colored match segments (no markdown styling)
+      const escaped = searchQuery.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      const searchRegex = new RegExp(`(${escaped})`, "gi");
+      const parts = specText.split(searchRegex);
+      for (let p = 0; p < parts.length; p++) {
+        const part = parts[p];
+        if (part.length === 0) continue;
+        const isMatch = p % 2 === 1; // split with capture group: [before, match, between, match, after]
+        if (isMatch) {
+          lineNode.add(TextNodeRenderable.fromString(part, { fg: theme.base, bg: theme.yellow, attributes: TextAttributes.BOLD }));
+        } else {
+          lineNode.add(TextNodeRenderable.fromString(part, { fg: theme.text, bg: isCursor ? theme.backgroundElement : undefined }));
+        }
+      }
     } else {
       // Parse and render inline markdown
       const segments = parseMarkdownLine(specText);
-      addSegments(lineNode, segments, theme.text);
+      addSegments(lineNode, segments, theme.text, isCursor ? theme.backgroundElement : undefined);
     }
 
     // Thread hint (dimmed, inline)
@@ -409,7 +176,7 @@ export function buildPagerNodes(lineNode: TextRenderable, state: ReviewState, se
       const hint = threadHint(thread);
       lineNode.add(TextNodeRenderable.fromString(
         `  \u00ab ${hint}`,
-        { fg: theme.overlay, attributes: TextAttributes.DIM }
+        { fg: theme.textDim, attributes: TextAttributes.DIM, bg: isCursor ? theme.backgroundElement : undefined }
       ));
     }
 

package/src/tui/search.ts

@@ -5,7 +5,7 @@ import {
   type CliRenderer,
   type KeyEvent,
 } from "@opentui/core";
-import { theme } from "./theme";
+import { theme } from "./ui/theme";
 
 export interface SearchOptions {
   renderer: CliRenderer;
@@ -36,7 +36,7 @@ export function createSearch(opts: SearchOptions): SearchOverlay {
     width: "100%",
     height: 1,
     zIndex: 100,
-    backgroundColor: theme.surface0,
+    backgroundColor: theme.backgroundPanel,
     flexDirection: "row",
     alignItems: "center",
   });
@@ -47,7 +47,7 @@ export function createSearch(opts: SearchOptions): SearchOverlay {
     width: 3,
     height: 1,
     fg: theme.yellow,
-    bg: theme.surface0,
+    bg: theme.backgroundPanel,
     wrapMode: "none",
   });
 
@@ -55,12 +55,12 @@ export function createSearch(opts: SearchOptions): SearchOverlay {
   const input = new InputRenderable(renderer, {
     width: "100%",
     flexGrow: 1,
-    backgroundColor: theme.surface0,
+    backgroundColor: theme.backgroundPanel,
     textColor: theme.text,
-    focusedBackgroundColor: theme.surface1,
+    focusedBackgroundColor: theme.backgroundElement,
     focusedTextColor: theme.text,
     placeholder: "Search...",
-    placeholderColor: theme.overlay,
+    placeholderColor: theme.textDim,
   });
 
   container.add(label);

package/src/tui/status-bar.ts

@@ -1,7 +1,8 @@
 import { BoxRenderable, TextRenderable, TextNodeRenderable, TextAttributes, type CliRenderer } from "@opentui/core";
 import type { ReviewState } from "../state/review-state";
 import { basename } from "path";
-import { theme } from "./theme";
+import { theme } from "./ui/theme";
+import { buildHints } from "./ui/hint-bar";
 
 export interface TopBarComponents {
   box: BoxRenderable;
@@ -31,7 +32,7 @@ export function buildTopBar(
   // Filename — bold
   t.add(TextNodeRenderable.fromString(` ${name}`, { fg: theme.text, attributes: TextAttributes.BOLD }));
 
-  t.add(TextNodeRenderable.fromString("  |  ", { fg: theme.overlay }));
+  t.add(TextNodeRenderable.fromString("  \u00b7  ", { fg: theme.textDim }));
 
   // Thread summary
   if (open > 0 || pending > 0) {
@@ -40,12 +41,12 @@ export function buildTopBar(
     if (pending > 0) parts.push(`${pending} pending`);
     t.add(TextNodeRenderable.fromString(parts.join(", "), { fg: theme.yellow }));
   } else {
-    t.add(TextNodeRenderable.fromString("No active threads", { fg: theme.subtext }));
+    t.add(TextNodeRenderable.fromString("No active threads", { fg: theme.textMuted }));
   }
 
   // Unread replies
   if (unreadCount && unreadCount > 0) {
-    t.add(TextNodeRenderable.fromString("  |  ", { fg: theme.overlay }));
+    t.add(TextNodeRenderable.fromString("  \u00b7  ", { fg: theme.textDim }));
     t.add(TextNodeRenderable.fromString(
       `${unreadCount} new repl${unreadCount === 1 ? "y" : "ies"}`,
       { fg: theme.green, attributes: TextAttributes.BOLD }
@@ -54,13 +55,13 @@ export function buildTopBar(
 
   // Spec changed warning
   if (specChanged) {
-    t.add(TextNodeRenderable.fromString("  |  ", { fg: theme.overlay }));
+    t.add(TextNodeRenderable.fromString("  \u00b7  ", { fg: theme.textDim }));
     t.add(TextNodeRenderable.fromString("!! Spec changed externally", { fg: theme.red, attributes: TextAttributes.BOLD }));
   }
 
   // Cursor position
-  t.add(TextNodeRenderable.fromString("  |  ", { fg: theme.overlay }));
-  t.add(TextNodeRenderable.fromString(`L${state.cursorLine}/${state.lineCount}`, { fg: theme.subtext }));
+  t.add(TextNodeRenderable.fromString("  \u00b7  ", { fg: theme.textDim }));
+  t.add(TextNodeRenderable.fromString(`L${state.cursorLine}/${state.lineCount}`, { fg: theme.textMuted }));
 }
 
 /**
@@ -80,15 +81,7 @@ export function buildBottomBar(bar: BottomBarComponents, commandBuffer: string |
     { key: "/", action: "search" },
     { key: "?", action: "help" },
   ];
-  t.add(TextNodeRenderable.fromString(" ", {}));
-  for (let i = 0; i < hints.length; i++) {
-    const h = hints[i];
-    t.add(TextNodeRenderable.fromString(`[${h.key}]`, { fg: theme.blue }));
-    t.add(TextNodeRenderable.fromString(` ${h.action}`, { fg: theme.subtext }));
-    if (i < hints.length - 1) {
-      t.add(TextNodeRenderable.fromString("  ", {}));
-    }
-  }
+  buildHints(t, hints);
 }
 
 /**
@@ -98,9 +91,7 @@ export function createTopBar(renderer: CliRenderer): TopBarComponents {
   const box = new BoxRenderable(renderer, {
     width: "100%",
     height: 1,
-    backgroundColor: theme.base,
-    border: ["bottom"],
-    borderColor: theme.surface1,
+    backgroundColor: theme.backgroundPanel,
   });
 
   const text = new TextRenderable(renderer, {
@@ -123,7 +114,7 @@ export function createBottomBar(renderer: CliRenderer): BottomBarComponents {
     width: "100%",
     height: 1,
     flexShrink: 0,
-    backgroundColor: theme.surface0,
+    backgroundColor: theme.backgroundPanel,
   });
 
   const text = new TextRenderable(renderer, {

package/src/tui/thread-list.ts

@@ -1,13 +1,12 @@
 import {
-  BoxRenderable,
   TextRenderable,
   SelectRenderable,
   SelectRenderableEvents,
   type CliRenderer,
-  type KeyEvent,
 } from "@opentui/core";
 import type { Thread } from "../protocol/types";
-import { theme, STATUS_ICONS } from "./theme";
+import { theme, STATUS_ICONS } from "./ui/theme";
+import { createDialog } from "./ui/dialog";
 
 export interface ThreadListOptions {
   renderer: CliRenderer;
@@ -17,7 +16,7 @@ export interface ThreadListOptions {
 }
 
 export interface ThreadListOverlay {
-  container: BoxRenderable;
+  container: import("@opentui/core").BoxRenderable;
   cleanup: () => void;
 }
 
@@ -44,21 +43,22 @@ export function createThreadList(opts: ThreadListOptions): ThreadListOverlay {
     (t) => t.status === "open" || t.status === "pending"
   );
 
-  // Overlay container
-  const container = new BoxRenderable(renderer, {
-    position: "absolute",
-    top: "15%",
-    left: "15%",
+  const count = activeThreads.length;
+
+  const dialog = createDialog({
+    renderer,
+    title: `Threads (${count} active)`,
     width: "70%",
     height: "60%",
-    zIndex: 100,
-    backgroundColor: theme.base,
-    border: true,
-    borderStyle: "single",
-    borderColor: theme.borderList,
-    title: ` Threads (${activeThreads.length} active) `,
-    flexDirection: "column",
-    padding: 1,
+    top: "15%",
+    left: "15%",
+    borderColor: theme.mauve,
+    onDismiss: onCancel,
+    hints: [
+      { key: "j/k", action: "navigate" },
+      { key: "Enter", action: "jump" },
+      { key: "Esc", action: "close" },
+    ],
   });
 
   if (activeThreads.length === 0) {
@@ -66,10 +66,10 @@ export function createThreadList(opts: ThreadListOptions): ThreadListOverlay {
       content: "No active threads. Press [Esc] to close.",
       width: "100%",
       height: 1,
-      fg: theme.overlay,
+      fg: theme.textDim,
       wrapMode: "none",
     });
-    container.add(emptyMsg);
+    dialog.content.add(emptyMsg);
   } else {
     // Build select options from threads
     const selectOptions = activeThreads.map((t) => {
@@ -86,19 +86,19 @@ export function createThreadList(opts: ThreadListOptions): ThreadListOverlay {
       flexGrow: 1,
       options: selectOptions,
       selectedIndex: 0,
-      backgroundColor: theme.base,
+      backgroundColor: theme.backgroundPanel,
       textColor: theme.text,
-      focusedBackgroundColor: theme.base,
+      focusedBackgroundColor: theme.backgroundPanel,
       focusedTextColor: theme.text,
-      selectedBackgroundColor: theme.surface1,
+      selectedBackgroundColor: theme.backgroundElement,
       selectedTextColor: "#f5c2e7",
-      descriptionColor: theme.overlay,
-      selectedDescriptionColor: theme.subtext,
+      descriptionColor: theme.textDim,
+      selectedDescriptionColor: theme.textMuted,
       showDescription: true,
       wrapSelection: true,
     });
 
-    container.add(select);
+    dialog.content.add(select);
 
     // Focus the select so it handles j/k navigation
     renderer.focusRenderable(select);
@@ -112,34 +112,8 @@ export function createThreadList(opts: ThreadListOptions): ThreadListOverlay {
     });
   }
 
-  // Hint bar
-  const hint = new TextRenderable(renderer, {
-    content: " [j/k] navigate  [Enter] jump  [Esc] close",
-    width: "100%",
-    height: 1,
-    fg: theme.hintFg,
-    bg: theme.hintBg,
-    wrapMode: "none",
-    truncate: true,
-  });
-
-  container.add(hint);
-
-  // Key handler for Esc
-  const keyHandler = (key: KeyEvent) => {
-    if (key.name === "escape") {
-      key.preventDefault();
-      key.stopPropagation();
-      onCancel();
-      return;
-    }
+  return {
+    container: dialog.container,
+    cleanup: dialog.cleanup,
   };
-
-  renderer.keyInput.on("keypress", keyHandler);
-
-  function cleanup(): void {
-    renderer.keyInput.off("keypress", keyHandler);
-  }
-
-  return { container, cleanup };
 }