revspec 0.3.0 → 0.5.0

package/src/tui/pager.ts

@@ -7,16 +7,11 @@ 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;
 
-function padLineNum(n: number): string {
-  const s = String(n);
-  if (s.length >= 4) return s;
-  return " ".repeat(4 - s.length) + s;
-}
-
 function threadHint(thread: Thread): string {
   if (thread.messages.length === 0) return "";
   const last = thread.messages[thread.messages.length - 1];
@@ -25,256 +20,13 @@ 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) ---
 
 /**
  * Build plain text line-mode content (for testing / plain fallback).
  */
 export function buildPagerContent(state: ReviewState, searchQuery?: string | null, unreadThreadIds?: ReadonlySet<string>): string {
+  const numWidth = Math.max(String(state.lineCount).length, 3);
   const lines: string[] = [];
   for (let i = 0; i < state.specLines.length; i++) {
     const lineNum = i + 1;
@@ -297,7 +49,9 @@ export function buildPagerContent(state: ReviewState, searchQuery?: string | nul
         indicator = "\u258c";
       }
     }
-    lines.push(`${prefix}${indicator}${padLineNum(lineNum)}  ${specText}`);
+    const numStr = String(lineNum);
+    const padded = " ".repeat(numWidth - numStr.length) + numStr;
+    lines.push(`${prefix}${indicator}${padded}  ${specText}`);
   }
   return lines.join("\n");
 }
@@ -312,6 +66,11 @@ export function buildPagerContent(state: ReviewState, searchQuery?: string | nul
 export function buildPagerNodes(lineNode: TextRenderable, state: ReviewState, searchQuery?: string | null, unreadThreadIds?: ReadonlySet<string>): void {
   lineNode.clear();
 
+  // Calculate dynamic gutter width based on total line count
+  const numWidth = Math.max(String(state.lineCount).length, 3);
+  // Blank gutter for table borders: prefix(1) + indicator(1) + numWidth + spaces(2)
+  const gutterBlank = " ".repeat(2 + numWidth + 2);
+
   // Pre-scan for table blocks so we can calculate column widths
   const tableBlocks = new Map<number, TableBlock>();
   for (let i = 0; i < state.specLines.length; i++) {
@@ -324,6 +83,9 @@ export function buildPagerNodes(lineNode: TextRenderable, state: ReviewState, se
     }
   }
 
+  // Track fenced code block state
+  let inCodeBlock = false;
+
   for (let i = 0; i < state.specLines.length; i++) {
     const lineNum = i + 1;
     const thread = state.threadAtLine(lineNum);
@@ -334,7 +96,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 +118,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(gutterBlank, { fg: theme.textDim }));
       renderTableBorder(lineNode, tableBlock.colWidths, "top");
       lineNode.add(TextNodeRenderable.fromString("\n", {}));
     }
@@ -364,19 +126,34 @@ 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 }
     ));
+    const numStr = String(lineNum);
+    const paddedNum = " ".repeat(numWidth - numStr.length) + numStr;
     lineNode.add(TextNodeRenderable.fromString(
-      `${padLineNum(lineNum)}  `,
-      { fg: theme.overlay, attributes: TextAttributes.DIM }
+      `${paddedNum}  `,
+      { fg: theme.textDim, attributes: TextAttributes.DIM, bg: isCursor ? theme.backgroundElement : undefined }
     ));
 
-    // Spec text — table or regular markdown
-    if (isTable) {
+    // Spec text — fenced code block, table, or regular markdown
+    if (specText.trimStart().startsWith("```")) {
+      inCodeBlock = !inCodeBlock;
+      // Render the fence line itself as dim
+      lineNode.add(TextNodeRenderable.fromString(specText, {
+        fg: theme.textDim,
+        bg: isCursor ? theme.backgroundElement : undefined,
+      }));
+    } else if (inCodeBlock) {
+      // Inside code block — render as green, no markdown parsing
+      lineNode.add(TextNodeRenderable.fromString(specText, {
+        fg: theme.green,
+        bg: isCursor ? theme.backgroundElement : undefined,
+      }));
+    } else if (isTable) {
       if (relIdx === tableBlock.separatorIndex) {
         // Separator row → box-drawing line
         renderTableSeparator(lineNode, tableBlock.colWidths);
@@ -390,18 +167,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(gutterBlank, { 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 +196,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, type Hint } 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,41 +55,45 @@ 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 }));
+}
+
+/**
+ * Set a transient message on the bottom bar (using TextNodes, not .content).
+ */
+export function setBottomBarMessage(bar: BottomBarComponents, message: string, fg?: string): void {
+  const t = bar.text;
+  t.clear();
+  t.add(TextNodeRenderable.fromString(message, { fg: fg ?? theme.text }));
 }
 
 /**
  * Build the bottom bar with styled TextNodes.
  */
-export function buildBottomBar(bar: BottomBarComponents, commandBuffer: string | null): void {
+export function buildBottomBar(bar: BottomBarComponents, commandBuffer: string | null, hasThread?: boolean): void {
   const t = bar.text;
   t.clear();
   if (commandBuffer !== null) {
     t.add(TextNodeRenderable.fromString(` :${commandBuffer}`, { fg: theme.text }));
     return;
   }
-  const hints = [
+  const hints: Hint[] = [
     { key: "j/k", action: "move" },
     { key: "c", action: "comment" },
-    { key: "r", action: "resolve" },
-    { 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("  ", {}));
-    }
+  if (hasThread) {
+    hints.push({ key: "r", action: "resolve" });
+    hints.push({ key: "dd", action: "delete thread" });
   }
+  hints.push({ key: "/", action: "search" });
+  hints.push({ key: "?", action: "help" });
+  buildHints(t, hints);
 }
 
 /**
@@ -98,9 +103,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 +126,7 @@ export function createBottomBar(renderer: CliRenderer): BottomBarComponents {
     width: "100%",
     height: 1,
     flexShrink: 0,
-    backgroundColor: theme.surface0,
+    backgroundColor: theme.backgroundPanel,
   });
 
   const text = new TextRenderable(renderer, {