revspec 0.3.0 → 0.5.0

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;
 }
 
@@ -25,7 +24,7 @@ const MAX_PREVIEW_LENGTH = 50;
 
 function previewText(thread: Thread): string {
   if (thread.messages.length === 0) return "(empty)";
-  const last = thread.messages[thread.messages.length - 1];
+  const last = thread.messages[0];
   const text = last.text.replace(/\n/g, " ");
   if (text.length <= MAX_PREVIEW_LENGTH) return text;
   return text.slice(0, MAX_PREVIEW_LENGTH - 1) + "\u2026";
@@ -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 };
 }

package/src/tui/ui/dialog.ts

@@ -0,0 +1,106 @@
+import {
+  BoxRenderable,
+  ScrollBoxRenderable,
+  TextRenderable,
+  type CliRenderer,
+  type KeyEvent,
+} from "@opentui/core";
+import { theme } from "./theme";
+import { buildHints, type Hint } from "./hint-bar";
+
+export interface DialogOptions {
+  renderer: CliRenderer;
+  title: string;
+  width?: string | number;
+  height?: string | number;
+  top?: string | number;
+  left?: string | number;
+  borderColor?: string;
+  onDismiss: () => void;
+  hints?: Hint[];
+}
+
+export interface DialogComponents {
+  container: BoxRenderable;
+  content: ScrollBoxRenderable;
+  hintText: TextRenderable;
+  setHints: (hints: Hint[]) => void;
+  cleanup: () => void;
+}
+
+export function createDialog(opts: DialogOptions): DialogComponents {
+  const {
+    renderer, title, onDismiss,
+    width = "80%", height = "85%",
+    top = "5%", left = "10%",
+    borderColor = theme.border,
+    hints = [],
+  } = opts;
+
+  const container = new BoxRenderable(renderer, {
+    position: "absolute",
+    top,
+    left,
+    width,
+    height,
+    zIndex: 100,
+    backgroundColor: theme.backgroundPanel,
+    border: true,
+    borderStyle: "single",
+    borderColor,
+    title: ` ${title} `,
+    flexDirection: "column",
+    paddingLeft: 1,
+    paddingRight: 1,
+    paddingTop: 1,
+  });
+
+  const content = new ScrollBoxRenderable(renderer, {
+    width: "100%",
+    flexGrow: 1,
+    flexShrink: 1,
+    scrollY: true,
+    scrollX: false,
+  });
+  container.add(content);
+
+  const hintBox = new BoxRenderable(renderer, {
+    width: "100%",
+    height: 1,
+    flexShrink: 0,
+    backgroundColor: theme.backgroundElement,
+  });
+  const hintText = new TextRenderable(renderer, {
+    content: "",
+    width: "100%",
+    fg: theme.textMuted,
+    wrapMode: "none",
+    truncate: true,
+  });
+  hintBox.add(hintText);
+  container.add(hintBox);
+
+  if (hints.length > 0) {
+    buildHints(hintText, hints);
+  }
+
+  function setHints(newHints: Hint[]): void {
+    buildHints(hintText, newHints);
+    renderer.requestRender();
+  }
+
+  const keyHandler = (key: KeyEvent) => {
+    if (key.name === "escape" || (key.ctrl && key.name === "c")) {
+      key.preventDefault();
+      key.stopPropagation();
+      onDismiss();
+    }
+  };
+  renderer.keyInput.on("keypress", keyHandler);
+
+  function cleanup(): void {
+    renderer.keyInput.off("keypress", keyHandler);
+  }
+
+  return { container, content, hintText, setHints, cleanup };
+}

package/src/tui/ui/hint-bar.ts

@@ -0,0 +1,20 @@
+import { TextRenderable, TextNodeRenderable } from "@opentui/core";
+import { theme } from "./theme";
+
+export interface Hint {
+  key: string;
+  action: string;
+}
+
+export function buildHints(text: TextRenderable, hints: Hint[]): void {
+  text.clear();
+  text.add(TextNodeRenderable.fromString(" ", {}));
+  for (let i = 0; i < hints.length; i++) {
+    const h = hints[i];
+    text.add(TextNodeRenderable.fromString(`[${h.key}]`, { fg: theme.blue }));
+    text.add(TextNodeRenderable.fromString(` ${h.action}`, { fg: theme.textMuted }));
+    if (i < hints.length - 1) {
+      text.add(TextNodeRenderable.fromString("  ", {}));
+    }
+  }
+}

package/src/tui/ui/keybinds.ts

@@ -0,0 +1,106 @@
+import type { KeyEvent } from "@opentui/core";
+
+export interface KeyBinding {
+  key: string;
+  action: string;
+}
+
+interface SequenceState {
+  first: string;
+  timer: ReturnType<typeof setTimeout>;
+}
+
+export interface KeybindRegistry {
+  match: (key: KeyEvent) => string | null;
+  pending: () => string | null;
+  destroy: () => void;
+}
+
+export function createKeybindRegistry(bindings: KeyBinding[], timeout = 500): KeybindRegistry {
+  let sequence: SequenceState | null = null;
+
+  const singleBindings = new Map<string, string>();
+  const sequenceBindings = new Map<string, string>();
+
+  // Sequence keys: exactly 2 chars, each is a single printable keystroke.
+  // Named keys like "up", "down" are NOT sequences even though length === 2.
+  // Sequences: "gg", "dd", "]t", "[r" — char + char combos.
+  // We detect named keys by checking: if both chars are lowercase letters AND
+  // the combo is different from char+char (i.e., it's a word), it's a named key.
+  // Simple heuristic: sequences always have either repeated chars or non-alpha first char.
+  const NAMED_KEYS = new Set(["up", "fn"]);
+
+  for (const b of bindings) {
+    if (b.key.length === 2 && !b.key.startsWith("C-") && !NAMED_KEYS.has(b.key)) {
+      sequenceBindings.set(b.key, b.action);
+    } else {
+      singleBindings.set(b.key, b.action);
+    }
+  }
+
+  const sequenceStarters = new Set<string>();
+  for (const key of sequenceBindings.keys()) {
+    sequenceStarters.add(key[0]);
+  }
+
+  function keyToString(key: KeyEvent): string {
+    if (key.ctrl && key.name) return `C-${key.name}`;
+    // For shifted keys, prefer sequence (gives "?", ":", etc.) over name.toUpperCase()
+    if (key.shift && key.sequence) return key.sequence;
+    if (key.shift && key.name) return key.name.toUpperCase();
+    return key.sequence || key.name || "";
+  }
+
+  function match(key: KeyEvent): string | null {
+    const keyStr = keyToString(key);
+    let skipSequenceCheck = false;
+
+    if (sequence) {
+      const seq = sequence.first + keyStr;
+      clearTimeout(sequence.timer);
+      sequence = null;
+
+      const action = sequenceBindings.get(seq);
+      if (action) return action;
+      skipSequenceCheck = true; // Don't start a new sequence with the failed second key
+    }
+
+    // Check ctrl variants first
+    if (key.ctrl && key.name) {
+      const action = singleBindings.get(`C-${key.name}`);
+      if (action) return action;
+    }
+
+    // Check if this starts a sequence (but not if ctrl is held, and not if from failed sequence)
+    if (!key.ctrl && !skipSequenceCheck && sequenceStarters.has(keyStr)) {
+      sequence = {
+        first: keyStr,
+        timer: setTimeout(() => { sequence = null; }, timeout),
+      };
+      return null;
+    }
+
+    // Shift variants
+    if (key.shift && key.name) {
+      const upper = key.name.toUpperCase();
+      const action = singleBindings.get(upper);
+      if (action) return action;
+    }
+
+    return singleBindings.get(keyStr) ?? null;
+  }
+
+  function pendingStr(): string | null {
+    if (!sequence) return null;
+    return `${sequence.first}...`;
+  }
+
+  function destroy(): void {
+    if (sequence) {
+      clearTimeout(sequence.timer);
+      sequence = null;
+    }
+  }
+
+  return { match, pending: pendingStr, destroy };
+}

package/src/tui/ui/markdown.ts

@@ -0,0 +1,292 @@
+import {
+  TextRenderable,
+  TextNodeRenderable,
+  TextAttributes,
+} from "@opentui/core";
+import { theme } from "./theme";
+
+// --- Inline markdown parser ---
+
+export interface StyledSegment {
+  text: string;
+  fg?: string;
+  attributes?: number;
+}
+
+/**
+ * Parse inline markdown (bold italic, bold, italic, code, links, strikethrough) into styled segments.
+ * Strips syntax markers and returns display text with style info.
+ * Order matters: longer patterns first (***bold italic*** before **bold** before *italic*).
+ */
+export function parseInlineMarkdown(text: string): StyledSegment[] {
+  const segments: StyledSegment[] = [];
+  // Groups:
+  //   2: ***bold italic***
+  //   3: **bold**
+  //   4: *italic*
+  //   5: __bold__
+  //   6: _italic_
+  //   7: ~~strikethrough~~
+  //   8: [link text](url) — display text only
+  //   9: `code`
+  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 italic***
+      segments.push({ text: match[2], attributes: TextAttributes.BOLD | TextAttributes.ITALIC });
+    } else if (match[3] !== undefined) {
+      // **bold**
+      segments.push({ text: match[3], attributes: TextAttributes.BOLD });
+    } else if (match[4] !== undefined) {
+      // *italic*
+      segments.push({ text: match[4], attributes: TextAttributes.ITALIC });
+    } else if (match[5] !== undefined) {
+      // __bold__
+      segments.push({ text: match[5], attributes: TextAttributes.BOLD });
+    } else if (match[6] !== undefined) {
+      // _italic_
+      segments.push({ text: match[6], attributes: TextAttributes.ITALIC });
+    } else if (match[7] !== undefined) {
+      // ~~strikethrough~~ — use actual terminal strikethrough + dim
+      segments.push({ text: match[7], fg: theme.textDim, attributes: TextAttributes.STRIKETHROUGH });
+    } else if (match[8] !== undefined) {
+      // [link text](url) — show text in blue + underline
+      segments.push({ text: match[8], fg: theme.blue, attributes: TextAttributes.UNDERLINE });
+    } else if (match[9] !== undefined) {
+      // `code`
+      segments.push({ text: match[9], fg: theme.mauve });
+    }
+    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.
+ */
+export 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.textDim, attributes: TextAttributes.DIM }];
+  }
+
+  // Blockquote: > text
+  if (line.startsWith("> ")) {
+    const inner = parseInlineMarkdown(line.slice(2));
+    return [
+      { text: "\u2502 ", fg: theme.mauve },
+      ...inner.map((s) => ({
+        ...s,
+        fg: s.fg ?? theme.textDim,
+        attributes: (s.attributes ?? 0) | TextAttributes.ITALIC,
+      })),
+    ];
+  }
+
+  // Task list: - [ ] or - [x]
+  const taskMatch = line.match(/^(\s*)[-*+]\s+\[([ xX])\]\s+(.*)/);
+  if (taskMatch) {
+    const checked = taskMatch[2].toLowerCase() === "x";
+    const checkbox = checked ? "\u2611 " : "\u2610 "; // ☑ or ☐
+    const color = checked ? theme.green : theme.textDim;
+    return [
+      { text: taskMatch[1] + checkbox, fg: color },
+      ...parseInlineMarkdown(taskMatch[3]),
+    ];
+  }
+
+  // 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.
+ */
+export function addSegments(parent: TextRenderable, segments: StyledSegment[], defaultFg: string, bg?: string): void {
+  for (const seg of segments) {
+    const node = TextNodeRenderable.fromString(seg.text, {
+      fg: seg.fg ?? defaultFg,
+      attributes: seg.attributes,
+      bg,
+    });
+    parent.add(node);
+  }
+}
+
+// --- Table rendering ---
+
+export const SEPARATOR_RE = /^\|[\s:]*-+[\s:]*(\|[\s:]*-+[\s:]*)*\|?\s*$/;
+
+/** Split a table row into trimmed cell values (strips outer pipes). */
+export 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). */
+export function displayWidth(text: string): number {
+  // Remove all inline markdown markers to get display length
+  return text
+    .replace(/\*\*\*(.+?)\*\*\*/g, "$1")
+    .replace(/\*\*(.+?)\*\*/g, "$1")
+    .replace(/\*(.+?)\*/g, "$1")
+    .replace(/__(.+?)__/g, "$1")
+    .replace(/_(.+?)_/g, "$1")
+    .replace(/~~(.+?)~~/g, "$1")
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
+    .replace(/`([^`]+)`/g, "$1")
+    .length;
+}
+
+export 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. */
+export 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. */
+export 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.textDim }));
+}
+
+/** Render a table data/header row with padded, styled cells. */
+export 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.textDim }
+    ));
+
+    // 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.textDim }
+  ));
+}
+
+/** Render a top or bottom border for the table. */
+export 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.textDim }
+  ));
+}