revspec 0.2.2 → 0.4.0

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,104 @@
+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);
+
+    if (sequence) {
+      const seq = sequence.first + keyStr;
+      clearTimeout(sequence.timer);
+      sequence = null;
+
+      const action = sequenceBindings.get(seq);
+      if (action) return action;
+    }
+
+    // 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)
+    if (!key.ctrl && 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,251 @@
+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, code) into styled segments.
+ * Strips syntax markers and returns display text with style info.
+ */
+export 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.
+ */
+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,
+      })),
+    ];
+  }
+
+  // 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 **bold**, *italic*, `code` markers to get display length
+  return text
+    .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 }
+  ));
+}

package/src/tui/ui/theme.ts

@@ -0,0 +1,49 @@
+export const theme = {
+  // Surfaces
+  base: "#1e1e2e",
+  backgroundPanel: "#313244",
+  backgroundElement: "#45475a",
+
+  // Text hierarchy
+  text: "#cdd6f4",
+  textMuted: "#a6adc8",
+  textDim: "#6c7086",
+
+  // Semantic accents
+  blue: "#89b4fa",
+  green: "#a6e3a1",
+  red: "#f38ba8",
+  yellow: "#f9e2af",
+  mauve: "#cba6f7",
+
+  // Borders
+  border: "#45475a",
+  borderAccent: "#89b4fa",
+
+  // Status
+  success: "#a6e3a1",
+  warning: "#f9e2af",
+  error: "#f38ba8",
+  info: "#89b4fa",
+} as const;
+
+export const STATUS_ICONS: Record<string, string> = {
+  open: "\u258c",     // ▌ half block
+  pending: "\u25cb",  // ○ circle
+  resolved: "\u2713", // ✓ checkmark
+  outdated: "\u223c", // ∼ tilde
+};
+
+export const SPLIT_BORDER = {
+  topLeft: " ",
+  topRight: " ",
+  bottomLeft: " ",
+  bottomRight: " ",
+  horizontal: " ",
+  vertical: "\u2503",
+  topT: " ",
+  bottomT: " ",
+  leftT: "\u2503",
+  rightT: " ",
+  cross: " ",
+} as const;

package/test/tui/ui/keybinds.test.ts

@@ -0,0 +1,71 @@
+import { describe, expect, it } from "bun:test";
+import { createKeybindRegistry } from "../../../src/tui/ui/keybinds";
+
+function makeKey(name: string, opts: { ctrl?: boolean; shift?: boolean; sequence?: string } = {}): any {
+  return { name, ctrl: opts.ctrl ?? false, shift: opts.shift ?? false, sequence: opts.sequence ?? name };
+}
+
+describe("createKeybindRegistry", () => {
+  it("matches single keys", () => {
+    const reg = createKeybindRegistry([
+      { key: "j", action: "down" },
+      { key: "k", action: "up" },
+    ]);
+    expect(reg.match(makeKey("j"))).toBe("down");
+    expect(reg.match(makeKey("k"))).toBe("up");
+    expect(reg.match(makeKey("x"))).toBeNull();
+    reg.destroy();
+  });
+
+  it("matches ctrl keys", () => {
+    const reg = createKeybindRegistry([
+      { key: "C-d", action: "half-page-down" },
+    ]);
+    expect(reg.match(makeKey("d", { ctrl: true }))).toBe("half-page-down");
+    expect(reg.match(makeKey("d"))).toBeNull();
+    reg.destroy();
+  });
+
+  it("matches shift keys", () => {
+    const reg = createKeybindRegistry([
+      { key: "G", action: "goto-bottom" },
+      { key: "R", action: "resolve-all" },
+    ]);
+    expect(reg.match(makeKey("g", { shift: true }))).toBe("goto-bottom");
+    expect(reg.match(makeKey("r", { shift: true }))).toBe("resolve-all");
+    reg.destroy();
+  });
+
+  it("matches two-key sequences", () => {
+    const reg = createKeybindRegistry([
+      { key: "gg", action: "goto-top" },
+      { key: "dd", action: "delete" },
+    ]);
+    expect(reg.match(makeKey("g"))).toBeNull();
+    expect(reg.pending()).toBe("g...");
+    expect(reg.match(makeKey("g"))).toBe("goto-top");
+    expect(reg.pending()).toBeNull();
+    reg.destroy();
+  });
+
+  it("clears sequence on invalid second key", () => {
+    const reg = createKeybindRegistry([
+      { key: "gg", action: "goto-top" },
+      { key: "j", action: "down" },
+    ]);
+    expect(reg.match(makeKey("g"))).toBeNull();
+    expect(reg.match(makeKey("x"))).toBeNull();
+    expect(reg.match(makeKey("j"))).toBe("down");
+    reg.destroy();
+  });
+
+  it("handles bracket sequences", () => {
+    const reg = createKeybindRegistry([
+      { key: "]t", action: "next-thread" },
+      { key: "[t", action: "prev-thread" },
+    ]);
+    expect(reg.match(makeKey("]", { sequence: "]" }))).toBeNull();
+    expect(reg.match(makeKey("t"))).toBe("next-thread");
+    reg.destroy();
+  });
+});

package/src/tui/theme.ts

@@ -1,34 +0,0 @@
-export const theme = {
-  // Base surfaces
-  base:     "#1e1e2e",
-  surface0: "#313244",
-  surface1: "#45475a",
-
-  // Text hierarchy
-  text:     "#cdd6f4",
-  subtext:  "#a6adc8",
-  overlay:  "#6c7086",
-
-  // Semantic accents
-  blue:     "#89b4fa",
-  green:    "#a6e3a1",
-  red:      "#f38ba8",
-  yellow:   "#f9e2af",
-  mauve:    "#cba6f7",
-
-  // Derived roles
-  borderComment:  "#89b4fa",
-  borderThread:   "#f9e2af",   // yellow for informational view
-  borderList:     "#cba6f7",
-  borderConfirm:  "#f38ba8",
-  borderSearch:   "#89b4fa",
-  hintFg:         "#6c7086",
-  hintBg:         "#313244",
-} as const;
-
-export const STATUS_ICONS: Record<string, string> = {
-  open: "\u258c",     // ▌ half block
-  pending: "\u258c",  // ▌ half block
-  resolved: "\u2713", // ✓ checkmark
-  outdated: "\u258c", // ▌ half block
-};