revspec 0.2.2 → 0.4.0

package/src/tui/pager.ts

@@ -3,12 +3,12 @@ import type { Thread } from "../protocol/types";
 import {
   ScrollBoxRenderable,
   TextRenderable,
-  MarkdownRenderable,
-  SyntaxStyle,
-  parseColor,
+  TextNodeRenderable,
+  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;
 
@@ -26,90 +26,206 @@ function threadHint(thread: Thread): string {
   return text.slice(0, MAX_HINT_LENGTH - 1) + "\u2026";
 }
 
+// --- Plain text builder (for tests) ---
+
 /**
- * Build plain text line-mode content (for commenting).
- * Each line: cursor marker + lineNum + content + thread indicator + hint.
+ * Build plain text line-mode content (for testing / plain fallback).
  */
 export function buildPagerContent(state: ReviewState, searchQuery?: string | null, unreadThreadIds?: ReadonlySet<string>): string {
   const lines: string[] = [];
-
   for (let i = 0; i < state.specLines.length; i++) {
     const lineNum = i + 1;
     const thread = state.threadAtLine(lineNum);
     const isCursor = lineNum === state.cursorLine;
-
     const prefix = isCursor ? ">" : " ";
     let specText = state.specLines[i];
-
     if (searchQuery) {
       const regex = new RegExp(searchQuery.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gi");
       specText = specText.replace(regex, (match) => `>>${match}<<`);
     }
+    let indicator = " ";
+    if (thread) {
+      const isUnread = unreadThreadIds && unreadThreadIds.has(thread.id);
+      if (isUnread) {
+        indicator = "\u2588";
+      } else if (thread.status === "resolved") {
+        indicator = "\u2713";
+      } else {
+        indicator = "\u258c";
+      }
+    }
+    lines.push(`${prefix}${indicator}${padLineNum(lineNum)}  ${specText}`);
+  }
+  return lines.join("\n");
+}
+
+// --- Styled node builder ---
+
+/**
+ * Build styled line-mode content using TextNodeRenderable.
+ * Inline markdown is parsed and styled per line.
+ * Line numbers and thread hints are dimmed.
+ */
+export function buildPagerNodes(lineNode: TextRenderable, state: ReviewState, searchQuery?: string | null, unreadThreadIds?: ReadonlySet<string>): void {
+  lineNode.clear();
+
+  // 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++) {
+    if (state.specLines[i].trimStart().startsWith("|") && !tableBlocks.has(i)) {
+      const block = collectTable(state.specLines, i);
+      // Mark all lines in this block
+      for (let j = 0; j < block.lines.length; j++) {
+        tableBlocks.set(i + j, block);
+      }
+    }
+  }
+
+  for (let i = 0; i < state.specLines.length; i++) {
+    const lineNum = i + 1;
+    const thread = state.threadAtLine(lineNum);
+    const isCursor = lineNum === state.cursorLine;
+
+    const prefix = isCursor ? ">" : " ";
+    const specText = state.specLines[i];
 
     // Thread indicator — gutter bar on the left
     let indicator = " ";
+    let indicatorColor: string = theme.textDim;
     if (thread) {
       const isUnread = unreadThreadIds && unreadThreadIds.has(thread.id);
       if (isUnread) {
         indicator = "\u2588"; // █ full block — unread reply
+        indicatorColor = theme.yellow;
       } else if (thread.status === "resolved") {
         indicator = "\u2713"; // ✓ resolved
+        indicatorColor = theme.green;
       } else {
         indicator = "\u258c"; // ▌ half block — has thread
+        indicatorColor = theme.blue;
       }
     }
 
-    let line = `${prefix}${indicator}${padLineNum(lineNum)}  ${specText}`;
+    // Check for table context before rendering gutter
+    const tableBlock = tableBlocks.get(i);
+    const isTable = tableBlock && !searchQuery;
+    const relIdx = isTable ? i - tableBlock.startIndex : -1;
 
-    // No inline preview — the gutter indicator (▌/█/✓) is enough.
-    // Press c to open the thread and see the full conversation.
+    // Top border before first table row (on its own visual line with blank gutter)
+    if (isTable && relIdx === 0) {
+      lineNode.add(TextNodeRenderable.fromString("        ", { fg: theme.textDim }));
+      renderTableBorder(lineNode, tableBlock.colWidths, "top");
+      lineNode.add(TextNodeRenderable.fromString("\n", {}));
+    }
 
-    lines.push(line);
-  }
+    // Gutter: cursor + indicator + line number (dimmed)
+    lineNode.add(TextNodeRenderable.fromString(
+      `${prefix}`,
+      { fg: isCursor ? theme.text : theme.textDim, bg: isCursor ? theme.backgroundElement : undefined }
+    ));
+    lineNode.add(TextNodeRenderable.fromString(
+      indicator,
+      { fg: indicatorColor, bg: isCursor ? theme.backgroundElement : undefined }
+    ));
+    lineNode.add(TextNodeRenderable.fromString(
+      `${padLineNum(lineNum)}  `,
+      { fg: theme.textDim, attributes: TextAttributes.DIM, bg: isCursor ? theme.backgroundElement : undefined }
+    ));
+
+    // Spec text — table or regular markdown
+    if (isTable) {
+      if (relIdx === tableBlock.separatorIndex) {
+        // Separator row → box-drawing line
+        renderTableSeparator(lineNode, tableBlock.colWidths);
+      } else {
+        // Header (before separator) or data (after separator)
+        const isHeader = tableBlock.separatorIndex >= 0 && relIdx < tableBlock.separatorIndex;
+        const cells = parseTableCells(specText);
+        renderTableRow(lineNode, cells, tableBlock.colWidths, isHeader);
+      }
 
-  return lines.join("\n");
+      // 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.textDim }));
+        renderTableBorder(lineNode, tableBlock.colWidths, "bottom");
+      }
+    } else if (searchQuery) {
+      // 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, isCursor ? theme.backgroundElement : undefined);
+    }
+
+    // Thread hint (dimmed, inline)
+    if (thread && thread.messages.length > 0) {
+      const hint = threadHint(thread);
+      lineNode.add(TextNodeRenderable.fromString(
+        `  \u00ab ${hint}`,
+        { fg: theme.textDim, attributes: TextAttributes.DIM, bg: isCursor ? theme.backgroundElement : undefined }
+      ));
+    }
+
+    // Newline between lines (except last)
+    if (i < state.specLines.length - 1) {
+      lineNode.add(TextNodeRenderable.fromString("\n", {}));
+    }
+  }
 }
 
-function createMarkdownStyle(): SyntaxStyle {
-  return SyntaxStyle.fromStyles({
-    default: { fg: parseColor(theme.text) },
-    "markup.heading": { fg: parseColor(theme.blue), bold: true },
-    "markup.heading.1": { fg: parseColor(theme.blue), bold: true },
-    "markup.heading.2": { fg: parseColor(theme.blue), bold: true },
-    "markup.heading.3": { fg: parseColor(theme.mauve), bold: true },
-    "markup.heading.4": { fg: parseColor(theme.mauve) },
-    "markup.heading.5": { fg: parseColor(theme.mauve) },
-    "markup.heading.6": { fg: parseColor(theme.mauve) },
-    "markup.bold": { fg: parseColor(theme.text), bold: true },
-    "markup.strong": { fg: parseColor(theme.text), bold: true },
-    "markup.italic": { fg: parseColor(theme.text), italic: true },
-    "markup.link": { fg: parseColor(theme.blue) },
-    "markup.link.url": { fg: parseColor(theme.blue) },
-    "markup.list": { fg: parseColor(theme.yellow) },
-    "markup.raw": { fg: parseColor(theme.green) },
-    "markup.raw.inline": { fg: parseColor(theme.green) },
-    "string": { fg: parseColor(theme.green) },
-    "comment": { fg: parseColor(theme.overlay) },
-    "punctuation.special": { fg: parseColor(theme.overlay) },
-  });
+// --- Visual row offset calculation ---
+
+/**
+ * Count extra visual lines (table borders) before a given spec line index.
+ * Used to map spec line numbers to actual visual rows in the rendered content.
+ */
+export function countExtraVisualLines(specLines: string[], cursorIndex: number): number {
+  let extra = 0;
+  let i = 0;
+  while (i < specLines.length) {
+    if (specLines[i].trimStart().startsWith("|")) {
+      const tableStart = i;
+      while (i < specLines.length && specLines[i].trimStart().startsWith("|")) {
+        i++;
+      }
+      const tableEnd = i; // first line AFTER the table
+
+      // Top border: rendered before first table row
+      if (cursorIndex >= tableStart) extra++;
+      // Bottom border: rendered after last table row
+      if (cursorIndex >= tableEnd) extra++;
+      continue;
+    }
+    i++;
+  }
+  return extra;
 }
 
+// --- Pager components ---
+
 export interface PagerComponents {
   scrollBox: ScrollBoxRenderable;
-  /** Plain text node for line mode */
   lineNode: TextRenderable;
-  /** Rendered markdown node for reading mode */
-  markdownNode: MarkdownRenderable;
-  /** Current mode */
-  mode: "markdown" | "line";
 }
 
 /**
- * Create the pager with both a markdown view and a line-mode view.
- * Only one is visible at a time. Toggle with `m`.
+ * Create the pager — single styled line-mode view with inline markdown.
  */
 export function createPager(renderer: CliRenderer): PagerComponents {
-  // Line mode (default) — plain text with line numbers, cursor, thread indicators
   const lineNode = new TextRenderable(renderer, {
     content: "",
     width: "100%",
@@ -118,51 +234,15 @@ export function createPager(renderer: CliRenderer): PagerComponents {
     bg: theme.base,
   });
 
-  // Markdown mode — rendered markdown, full-width, beautiful reading
-  const markdownNode = new MarkdownRenderable(renderer, {
-    content: "",
-    width: "100%",
-    syntaxStyle: createMarkdownStyle(),
-    conceal: true,
-    visible: false, // hidden by default — line mode is default
-  });
-
-  // Scrollable container
   const scrollBox = new ScrollBoxRenderable(renderer, {
     width: "100%",
     flexGrow: 1,
-    flexShrink: 1,
     scrollY: true,
     scrollX: true,
     backgroundColor: theme.base,
   });
 
-  scrollBox.add(markdownNode);
   scrollBox.add(lineNode);
 
-  return { scrollBox, lineNode, markdownNode, mode: "line" };
-}
-
-/**
- * Toggle between markdown and line mode.
- */
-export function togglePagerMode(pager: PagerComponents): void {
-  if (pager.mode === "markdown") {
-    pager.mode = "line";
-    pager.markdownNode.visible = false;
-    pager.lineNode.visible = true;
-  } else {
-    pager.mode = "markdown";
-    pager.lineNode.visible = false;
-    pager.markdownNode.visible = true;
-  }
-}
-
-/**
- * Switch to line mode (for commenting).
- */
-export function ensureLineMode(pager: PagerComponents): void {
-  if (pager.mode !== "line") {
-    togglePagerMode(pager);
-  }
+  return { scrollBox, lineNode };
 }

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,87 +1,130 @@
-import { TextRenderable, type CliRenderer } from "@opentui/core";
+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 {
-  bar: TextRenderable;
+  box: BoxRenderable;
+  text: TextRenderable;
 }
 
 export interface BottomBarComponents {
-  bar: TextRenderable;
+  box: BoxRenderable;
+  text: TextRenderable;
 }
 
 /**
- * Build the top bar text: filename + thread summary.
+ * Build the top bar with styled TextNodes.
  */
-export function buildTopBarText(
+export function buildTopBar(
+  bar: TopBarComponents,
   specFile: string,
   state: ReviewState,
   unreadCount?: number,
   specChanged?: boolean,
-  mode?: "markdown" | "line"
-): string {
+): void {
+  const t = bar.text;
+  t.clear();
   const name = basename(specFile);
-  const modeLabel = mode === "markdown" ? "[md]" : mode === "line" ? "[line]" : "";
   const { open, pending } = state.activeThreadCount();
-  const parts: string[] = [];
-  if (open > 0) parts.push(`${open} open`);
-  if (pending > 0) parts.push(`${pending} pending`);
-  const threadSummary =
-    parts.length > 0 ? `Threads: ${parts.join(", ")}` : "No active threads";
-  let result = ` ${name}  ${modeLabel}  |  ${threadSummary}`;
+
+  // Filename — bold
+  t.add(TextNodeRenderable.fromString(` ${name}`, { fg: theme.text, attributes: TextAttributes.BOLD }));
+
+  t.add(TextNodeRenderable.fromString("  \u00b7  ", { fg: theme.textDim }));
+
+  // Thread summary
+  if (open > 0 || pending > 0) {
+    const parts: string[] = [];
+    if (open > 0) parts.push(`${open} open`);
+    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.textMuted }));
+  }
+
+  // Unread replies
   if (unreadCount && unreadCount > 0) {
-    result += ` | ${unreadCount} new repl${unreadCount === 1 ? "y" : "ies"}`;
+    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 }
+    ));
   }
+
+  // Spec changed warning
   if (specChanged) {
-    result += ` | !! Spec changed externally`;
+    t.add(TextNodeRenderable.fromString("  \u00b7  ", { fg: theme.textDim }));
+    t.add(TextNodeRenderable.fromString("!! Spec changed externally", { fg: theme.red, attributes: TextAttributes.BOLD }));
   }
-  result += `  |  L${state.cursorLine}/${state.lineCount}`;
-  return result;
+
+  // Cursor position
+  t.add(TextNodeRenderable.fromString("  \u00b7  ", { fg: theme.textDim }));
+  t.add(TextNodeRenderable.fromString(`L${state.cursorLine}/${state.lineCount}`, { fg: theme.textMuted }));
 }
 
 /**
- * Build the bottom bar text: keybinding hints.
- * Contextually shows command buffer when in command mode.
- * Prepends mode indicator when provided.
+ * Build the bottom bar with styled TextNodes.
  */
-export function buildBottomBarText(commandBuffer: string | null): string {
+export function buildBottomBar(bar: BottomBarComponents, commandBuffer: string | null): void {
+  const t = bar.text;
+  t.clear();
   if (commandBuffer !== null) {
-    return ` :${commandBuffer}`;
+    t.add(TextNodeRenderable.fromString(` :${commandBuffer}`, { fg: theme.text }));
+    return;
   }
-  return ` [j/k] move  [c] comment  [r] resolve  [/] search  [?] help`;
+  const hints = [
+    { key: "j/k", action: "move" },
+    { key: "c", action: "comment" },
+    { key: "r", action: "resolve" },
+    { key: "/", action: "search" },
+    { key: "?", action: "help" },
+  ];
+  buildHints(t, hints);
 }
 
 /**
- * Create the top status bar.
+ * Create the top status bar (BoxRenderable with backgroundColor for full-width fill).
  */
 export function createTopBar(renderer: CliRenderer): TopBarComponents {
-  const bar = new TextRenderable(renderer, {
-    content: "",
+  const box = new BoxRenderable(renderer, {
     width: "100%",
     height: 1,
-    bg: theme.surface0,
+    backgroundColor: theme.backgroundPanel,
+  });
+
+  const text = new TextRenderable(renderer, {
+    content: "",
+    width: "100%",
     fg: theme.text,
     wrapMode: "none",
     truncate: true,
   });
 
-  return { bar };
+  box.add(text);
+  return { box, text };
 }
 
 /**
  * Create the bottom status bar.
  */
 export function createBottomBar(renderer: CliRenderer): BottomBarComponents {
-  const bar = new TextRenderable(renderer, {
-    content: "",
+  const box = new BoxRenderable(renderer, {
     width: "100%",
     height: 1,
-    bg: theme.surface0,
+    flexShrink: 0,
+    backgroundColor: theme.backgroundPanel,
+  });
+
+  const text = new TextRenderable(renderer, {
+    content: "",
+    width: "100%",
     fg: theme.text,
     wrapMode: "none",
     truncate: true,
   });
 
-  return { bar };
+  box.add(text);
+  return { box, text };
 }

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 };
 }