revspec 0.1.0

package/src/tui/comment-input.ts

@@ -0,0 +1,189 @@
+import {
+  BoxRenderable,
+  TextRenderable,
+  TextareaRenderable,
+  ScrollBoxRenderable,
+  type CliRenderer,
+  type KeyEvent,
+} from "@opentui/core";
+import type { Thread } from "../protocol/types";
+import { theme } from "./theme";
+
+export interface CommentInputOptions {
+  renderer: CliRenderer;
+  line: number;
+  existingThread: Thread | null;
+  onSubmit: (text: string) => void;
+  onResolve: () => void;
+  onCancel: () => void;
+}
+
+export interface CommentInputOverlay {
+  container: BoxRenderable;
+  cleanup: () => void;
+}
+
+const MAX_CONTEXT_LENGTH = 80;
+
+/**
+ * Create a unified comment/thread overlay.
+ * - New comment: just a text input
+ * - Existing thread: scrollable conversation + reply input + resolve action
+ *
+ * Tab submits, Ctrl+R resolves, Esc cancels.
+ */
+export function createCommentInput(opts: CommentInputOptions): CommentInputOverlay {
+  const { renderer, line, existingThread, onSubmit, onResolve, onCancel } = opts;
+
+  const hasThread = existingThread && existingThread.messages.length > 0;
+  const label = existingThread
+    ? `Thread #${existingThread.id} (line ${line}) [${existingThread.status.toUpperCase()}]`
+    : `New comment on line ${line}`;
+
+  // Larger overlay for threads with conversation, smaller for new comments
+  const overlayHeight = hasThread ? "80%" : 10;
+
+  const container = new BoxRenderable(renderer, {
+    position: "absolute",
+    top: hasThread ? "5%" : "30%",
+    left: "10%",
+    width: "80%",
+    height: overlayHeight,
+    zIndex: 100,
+    backgroundColor: theme.base,
+    border: true,
+    borderStyle: "single",
+    borderColor: theme.borderComment,
+    title: ` ${label} `,
+    flexDirection: "column",
+    padding: 1,
+  });
+
+  // Show full thread conversation in a scrollable area
+  if (hasThread) {
+    const scrollBox = new ScrollBoxRenderable(renderer, {
+      width: "100%",
+      flexGrow: 1,
+      flexShrink: 1,
+      scrollY: true,
+      scrollX: false,
+    });
+
+    const lines: string[] = [];
+    for (const msg of existingThread!.messages) {
+      const authorLabel = msg.author === "human" ? "You" : " AI";
+      lines.push(`${authorLabel}:`);
+      for (const textLine of msg.text.split("\n")) {
+        lines.push(`  ${textLine}`);
+      }
+      lines.push("");
+    }
+
+    const messageText = new TextRenderable(renderer, {
+      content: lines.join("\n"),
+      width: "100%",
+      fg: theme.text,
+      wrapMode: "word",
+    });
+
+    scrollBox.add(messageText);
+    container.add(scrollBox);
+
+    // Scroll to bottom to show latest message
+    setTimeout(() => {
+      scrollBox.scrollTo(scrollBox.scrollHeight);
+      renderer.requestRender();
+    }, 0);
+  }
+
+  // Separator between conversation and input
+  if (hasThread) {
+    const sep = new TextRenderable(renderer, {
+      content: " Reply:",
+      width: "100%",
+      height: 1,
+      fg: theme.subtext,
+      wrapMode: "none",
+    });
+    container.add(sep);
+  }
+
+  const textarea = new TextareaRenderable(renderer, {
+    width: "100%",
+    height: hasThread ? 4 : undefined,
+    flexGrow: hasThread ? 0 : 1,
+    backgroundColor: theme.surface0,
+    textColor: theme.text,
+    focusedBackgroundColor: theme.surface0,
+    focusedTextColor: theme.text,
+    wrapMode: "word",
+    placeholder: hasThread ? "Type your reply..." : "Type your comment...",
+    placeholderColor: theme.overlay,
+    initialValue: "",
+  });
+
+  // Hint line — show resolve option only for existing threads
+  const hintText = hasThread
+    ? " [Tab] submit  [Ctrl+R] resolve  [Esc] cancel"
+    : " [Tab] submit  [Esc] cancel";
+
+  const hint = new TextRenderable(renderer, {
+    content: hintText,
+    width: "100%",
+    height: 1,
+    fg: theme.hintFg,
+    bg: theme.hintBg,
+    wrapMode: "none",
+    truncate: true,
+  });
+
+  container.add(textarea);
+  container.add(hint);
+
+  // Focus textarea
+  setTimeout(() => {
+    textarea.focus();
+    renderer.requestRender();
+  }, 0);
+
+  let submitted = false;
+
+  const keyHandler = (key: KeyEvent) => {
+    if (key.name === "escape") {
+      key.preventDefault();
+      key.stopPropagation();
+      onCancel();
+      return;
+    }
+    // Tab submits
+    if (key.name === "tab") {
+      key.preventDefault();
+      key.stopPropagation();
+      if (submitted) return;
+      submitted = true;
+      const text = textarea.plainText.trim();
+      if (text.length > 0) {
+        onSubmit(text);
+      } else {
+        onCancel();
+      }
+      return;
+    }
+    // Ctrl+R resolves thread (only for existing threads)
+    if (key.ctrl && key.name === "r" && hasThread) {
+      key.preventDefault();
+      key.stopPropagation();
+      onResolve();
+      return;
+    }
+  };
+
+  renderer.keyInput.on("keypress", keyHandler);
+
+  function cleanup(): void {
+    renderer.keyInput.off("keypress", keyHandler);
+    textarea.destroy();
+  }
+
+  return { container, cleanup };
+}

package/src/tui/confirm.ts

@@ -0,0 +1,93 @@
+import {
+  BoxRenderable,
+  TextRenderable,
+  type CliRenderer,
+  type KeyEvent,
+} from "@opentui/core";
+import { theme } from "./theme";
+
+export interface ConfirmOptions {
+  renderer: CliRenderer;
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export interface ConfirmOverlay {
+  container: BoxRenderable;
+  cleanup: () => void;
+}
+
+/**
+ * Create a confirmation dialog overlay.
+ * Shows a message with [y/n] prompt.
+ * y → confirm, n/Esc → cancel
+ */
+export function createConfirm(opts: ConfirmOptions): ConfirmOverlay {
+  const { renderer, message, onConfirm, onCancel } = opts;
+
+  // Centered dialog
+  const container = new BoxRenderable(renderer, {
+    position: "absolute",
+    top: "35%",
+    left: "25%",
+    width: "50%",
+    height: 7,
+    zIndex: 100,
+    backgroundColor: theme.base,
+    border: true,
+    borderStyle: "single",
+    borderColor: theme.borderConfirm,
+    title: " Confirm ",
+    flexDirection: "column",
+    padding: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  });
+
+  const msgText = new TextRenderable(renderer, {
+    content: message,
+    width: "100%",
+    height: 1,
+    fg: theme.text,
+    wrapMode: "none",
+    truncate: true,
+  });
+
+  const hint = new TextRenderable(renderer, {
+    content: " [y] yes  [n/Esc] no",
+    width: "100%",
+    height: 1,
+    fg: theme.hintFg,
+    bg: theme.hintBg,
+    wrapMode: "none",
+    truncate: true,
+  });
+
+  container.add(msgText);
+  container.add(hint);
+
+  // Key handler
+  const keyHandler = (key: KeyEvent) => {
+    if (key.name === "y") {
+      key.preventDefault();
+      key.stopPropagation();
+      onConfirm();
+      return;
+    }
+    if (key.name === "n" || key.name === "escape") {
+      key.preventDefault();
+      key.stopPropagation();
+      onCancel();
+      return;
+    }
+  };
+
+  renderer.keyInput.on("keypress", keyHandler);
+
+  function cleanup(): void {
+    renderer.keyInput.off("keypress", keyHandler);
+  }
+
+  return { container, cleanup };
+}

package/src/tui/help.ts

@@ -0,0 +1,134 @@
+import {
+  BoxRenderable,
+  ScrollBoxRenderable,
+  TextRenderable,
+  type CliRenderer,
+  type KeyEvent,
+} from "@opentui/core";
+import { theme } from "./theme";
+
+export interface HelpOverlay {
+  container: BoxRenderable;
+  cleanup: () => void;
+}
+
+/**
+ * Create a help overlay popup showing all keybindings.
+ * Dismissable with `?` or `Esc`.
+ */
+export function createHelp(opts: {
+  renderer: CliRenderer;
+  onClose: () => void;
+}): HelpOverlay {
+  const { renderer, onClose } = opts;
+
+  const helpText = [
+    "",
+    "  Navigation",
+    "  j/k       Down/up",
+    "  gg        Go to first line / scroll to top",
+    "  G         Go to last line / scroll to bottom",
+    "  Ctrl+d/u  Half page down/up",
+    "  /         Search",
+    "  n/N       Next/prev search match",
+    "  ]t/[t     Next/prev thread",
+    "",
+    "  View",
+    "  m         Toggle markdown / line mode",
+    "",
+    "  Review (switches to line mode)",
+    "  c         Comment / view thread / reply",
+    "  r         Resolve thread",
+    "  R         Resolve all pending",
+    "  dd        Delete draft comment (double-tap)",
+    "  l         List threads",
+    "  a         Approve spec",
+    "",
+    "  Commands",
+    "  :w        Save draft",
+    "  :q        Quit (blocks if unsaved)",
+    "  :wq       Save and quit",
+    "  :q!       Quit without saving",
+    "",
+  ].join("\n");
+
+  // Overlay container - centered popup
+  const container = new BoxRenderable(renderer, {
+    position: "absolute",
+    top: "10%",
+    left: "20%",
+    width: "60%",
+    height: Math.min(26, renderer.height - 2),
+    zIndex: 100,
+    backgroundColor: theme.base,
+    border: true,
+    borderStyle: "single",
+    borderColor: theme.borderThread,
+    title: " Help ",
+    flexDirection: "column",
+    padding: 0,
+  });
+
+  const scrollBox = new ScrollBoxRenderable(renderer, {
+    width: "100%",
+    flexGrow: 1,
+    flexShrink: 1,
+    scrollY: true,
+    scrollX: false,
+    backgroundColor: theme.base,
+  });
+
+  const content = new TextRenderable(renderer, {
+    content: helpText,
+    width: "100%",
+    fg: theme.text,
+    wrapMode: "none",
+  });
+
+  scrollBox.add(content);
+
+  const hint = new TextRenderable(renderer, {
+    content: " [q/?/Esc] close  [j/k] scroll",
+    width: "100%",
+    height: 1,
+    fg: theme.hintFg,
+    bg: theme.hintBg,
+    wrapMode: "none",
+    truncate: true,
+  });
+
+  container.add(scrollBox);
+  container.add(hint);
+
+  // Key handler
+  const keyHandler = (key: KeyEvent) => {
+    if (key.name === "escape" || key.name === "q" || key.sequence === "?") {
+      key.preventDefault();
+      key.stopPropagation();
+      onClose();
+      return;
+    }
+    if (key.name === "j" || key.name === "down") {
+      key.preventDefault();
+      key.stopPropagation();
+      scrollBox.scrollBy(1);
+      renderer.requestRender();
+      return;
+    }
+    if (key.name === "k" || key.name === "up") {
+      key.preventDefault();
+      key.stopPropagation();
+      scrollBox.scrollBy(-1);
+      renderer.requestRender();
+      return;
+    }
+  };
+
+  renderer.keyInput.on("keypress", keyHandler);
+
+  function cleanup(): void {
+    renderer.keyInput.off("keypress", keyHandler);
+  }
+
+  return { container, cleanup };
+}

package/src/tui/pager.ts

@@ -0,0 +1,158 @@
+import type { ReviewState } from "../state/review-state";
+import type { Thread } from "../protocol/types";
+import {
+  ScrollBoxRenderable,
+  TextRenderable,
+  MarkdownRenderable,
+  SyntaxStyle,
+  parseColor,
+  type CliRenderer,
+} from "@opentui/core";
+import { theme, STATUS_ICONS } from "./theme";
+
+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];
+  const text = last.text.replace(/\n/g, " ");
+  if (text.length <= MAX_HINT_LENGTH) return text;
+  return text.slice(0, MAX_HINT_LENGTH - 1) + "\u2026";
+}
+
+/**
+ * Build plain text line-mode content (for commenting).
+ * Each line: cursor marker + lineNum + content + thread indicator + hint.
+ */
+export function buildPagerContent(state: ReviewState, searchQuery?: string | null): 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 line = `${prefix}${padLineNum(lineNum)}  ${specText}`;
+
+    if (thread) {
+      const icon = STATUS_ICONS[thread.status];
+      const hint = threadHint(thread);
+      line += `  ${icon} ${hint}`;
+    }
+
+    lines.push(line);
+  }
+
+  return lines.join("\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) },
+  });
+}
+
+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`.
+ */
+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%",
+    wrapMode: "none",
+    fg: theme.text,
+    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: false,
+    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);
+  }
+}

package/src/tui/search.ts

@@ -0,0 +1,119 @@
+import {
+  BoxRenderable,
+  InputRenderable,
+  TextRenderable,
+  type CliRenderer,
+  type KeyEvent,
+} from "@opentui/core";
+import { theme } from "./theme";
+
+export interface SearchOptions {
+  renderer: CliRenderer;
+  specLines: string[];
+  cursorLine: number;
+  onResult: (lineNumber: number, query: string) => void;
+  onCancel: () => void;
+}
+
+export interface SearchOverlay {
+  container: BoxRenderable;
+  cleanup: () => void;
+}
+
+/**
+ * Create a search overlay at the bottom of the screen.
+ * On Enter: search forward from cursorLine, wrapping around.
+ * On Escape: cancel.
+ */
+export function createSearch(opts: SearchOptions): SearchOverlay {
+  const { renderer, specLines, cursorLine, onResult, onCancel } = opts;
+
+  // Container bar at bottom
+  const container = new BoxRenderable(renderer, {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    width: "100%",
+    height: 1,
+    zIndex: 100,
+    backgroundColor: theme.surface0,
+    flexDirection: "row",
+    alignItems: "center",
+  });
+
+  // Search label
+  const label = new TextRenderable(renderer, {
+    content: " / ",
+    width: 3,
+    height: 1,
+    fg: theme.yellow,
+    bg: theme.surface0,
+    wrapMode: "none",
+  });
+
+  // Search input
+  const input = new InputRenderable(renderer, {
+    width: "100%",
+    flexGrow: 1,
+    backgroundColor: theme.surface0,
+    textColor: theme.text,
+    focusedBackgroundColor: theme.surface1,
+    focusedTextColor: theme.text,
+    placeholder: "Search...",
+    placeholderColor: theme.overlay,
+  });
+
+  container.add(label);
+  container.add(input);
+
+  // Focus the input after mount (same pattern as comment-input)
+  setTimeout(() => {
+    input.focus();
+    renderer.requestRender();
+  }, 0);
+
+  // Key handler
+  const keyHandler = (key: KeyEvent) => {
+    if (key.name === "escape") {
+      key.preventDefault();
+      key.stopPropagation();
+      onCancel();
+      return;
+    }
+    if (key.name === "return") {
+      key.preventDefault();
+      key.stopPropagation();
+      const query = input.value.trim().toLowerCase();
+      if (query.length === 0) {
+        onCancel();
+        return;
+      }
+
+      // Search forward from cursor, wrapping around
+      const total = specLines.length;
+      for (let offset = 1; offset <= total; offset++) {
+        const i = (cursorLine - 1 + offset) % total;
+        if (specLines[i].toLowerCase().includes(query)) {
+          onResult(i + 1, query); // 1-based line number + query
+          return;
+        }
+      }
+
+      // No match found — show feedback in the input placeholder, keep search open
+      input.placeholder = "No match";
+      input.placeholderColor = theme.red;
+      input.value = "";
+      renderer.requestRender();
+      return;
+    }
+  };
+
+  renderer.keyInput.on("keypress", keyHandler);
+
+  function cleanup(): void {
+    renderer.keyInput.off("keypress", keyHandler);
+    input.destroy();
+  }
+
+  return { container, cleanup };
+}