revspec 0.4.0 → 0.6.0

package/src/tui/help.ts

@@ -2,6 +2,7 @@ import {
   TextRenderable,
   type CliRenderer,
   type KeyEvent,
+  type ScrollBoxRenderable,
 } from "@opentui/core";
 import { theme } from "./ui/theme";
 import { createDialog } from "./ui/dialog";
@@ -11,6 +12,29 @@ export interface HelpOverlay {
   cleanup: () => void;
 }
 
+function addHelpSection(container: ScrollBoxRenderable, renderer: CliRenderer, title: string, lines: string[]): void {
+  // Blank line before section
+  container.add(new TextRenderable(renderer, { content: "", width: "100%", height: 1, wrapMode: "none" }));
+  // Section header in blue
+  container.add(new TextRenderable(renderer, {
+    content: `  ${title}`,
+    width: "100%",
+    height: 1,
+    fg: theme.blue,
+    wrapMode: "none",
+  }));
+  // Content lines
+  for (const line of lines) {
+    container.add(new TextRenderable(renderer, {
+      content: line,
+      width: "100%",
+      height: 1,
+      fg: theme.text,
+      wrapMode: "none",
+    }));
+  }
+}
+
 /**
  * Create a help overlay popup showing all keybindings.
  * Dismissable with `?`, `q`, or `Esc`.
@@ -22,65 +46,84 @@ export function createHelp(opts: {
 }): HelpOverlay {
   const { renderer, version, onClose } = opts;
 
-  const helpText = [
-    "",
-    `  revspec v${version}`,
-    "",
-    "  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",
-    "  Esc       Clear search highlights",
-    "  ]t/[t     Next/prev thread",
-    "  ]r/[r     Next/prev unread thread",
-    "",
-    "  Review",
-    "  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        Show save status",
-    "  :q        Save and quit",
-    "  :wq       Save and quit",
-    "  :q!       Quit without saving",
-    "",
-  ].join("\n");
-
   const dialog = createDialog({
     renderer,
     title: "Help",
     width: "60%",
-    height: Math.min(26, renderer.height - 2),
+    height: Math.min(34, renderer.height - 2),
     top: "10%",
     left: "20%",
     borderColor: theme.info,
     onDismiss: onClose,
     hints: [
+      { key: "j/k", action: "navigate" },
       { key: "q/?/Esc", action: "close" },
-      { key: "j/k", action: "scroll" },
     ],
   });
 
-  const content = new TextRenderable(renderer, {
-    content: helpText,
+  // Version header
+  dialog.content.add(new TextRenderable(renderer, { content: "", width: "100%", height: 1, wrapMode: "none" }));
+  dialog.content.add(new TextRenderable(renderer, {
+    content: `  revspec v${version}`,
     width: "100%",
-    fg: theme.text,
+    height: 1,
+    fg: theme.textMuted,
     wrapMode: "none",
-  });
+  }));
+
+  addHelpSection(dialog.content, renderer, "Quick Start", [
+    "  Navigate to a line and press c to comment.",
+    "  The AI replies in real-time via the thread popup.",
+    "  Press r to resolve threads, a to approve the spec.",
+    "  Use :wq to save and quit when done reviewing.",
+  ]);
+
+  addHelpSection(dialog.content, renderer, "Thread Popup", [
+    "  Opens in INSERT mode — type and press Tab to send.",
+    "  Press Esc for NORMAL mode — scroll with j/k/gg/G,",
+    "  c to reply, r to resolve, q to close.",
+  ]);
+
+  addHelpSection(dialog.content, renderer, "Navigation", [
+    "  j/k       Down/up",
+    "  gg/G      Top/bottom",
+    "  Ctrl+d/u  Half page down/up",
+    "  zz        Center cursor line",
+    "  /         Search (smartcase)",
+    "  n/N       Next/prev match",
+    "  Esc       Clear search",
+    "  ]t/[t     Next/prev thread",
+    "  ]r/[r     Next/prev unread",
+  ]);
+
+  addHelpSection(dialog.content, renderer, "Review", [
+    "  c         Comment / view thread",
+    "  r         Resolve thread (toggle)",
+    "  R         Resolve all pending",
+    "  dd        Delete thread",
+    "  T         List threads",
+    "  a         Approve spec",
+  ]);
+
+  addHelpSection(dialog.content, renderer, "Commands", [
+    "  :w        Merge to review JSON",
+    "  :wq       Merge and quit",
+    "  :q        Quit (blocks if unmerged)",
+    "  :q!       Quit without merging",
+    "  :{N}      Jump to line N",
+    "  Ctrl+C    Quit without merging",
+  ]);
 
-  dialog.content.add(content);
+  // Trailing blank line
+  dialog.content.add(new TextRenderable(renderer, { content: "", width: "100%", height: 1, wrapMode: "none" }));
+
+  let pendingG: ReturnType<typeof setTimeout> | null = null;
 
   const extraKeyHandler = (key: KeyEvent) => {
     if (key.name === "q" || key.sequence === "?") {
       key.preventDefault();
       key.stopPropagation();
+      if (pendingG) { clearTimeout(pendingG); pendingG = null; }
       onClose();
       return;
     }
@@ -98,6 +141,47 @@ export function createHelp(opts: {
       renderer.requestRender();
       return;
     }
+    // G = goto bottom
+    if (key.name === "g" && key.shift) {
+      key.preventDefault();
+      key.stopPropagation();
+      if (pendingG) { clearTimeout(pendingG); pendingG = null; }
+      dialog.content.scrollTo(dialog.content.scrollHeight);
+      renderer.requestRender();
+      return;
+    }
+    // gg = goto top
+    if (key.name === "g" && !key.shift && !key.ctrl) {
+      key.preventDefault();
+      key.stopPropagation();
+      if (pendingG) {
+        clearTimeout(pendingG);
+        pendingG = null;
+        dialog.content.scrollTo(0);
+        renderer.requestRender();
+      } else {
+        pendingG = setTimeout(() => { pendingG = null; }, 300);
+      }
+      return;
+    }
+    // Ctrl+D = half page down
+    if (key.ctrl && key.name === "d") {
+      key.preventDefault();
+      key.stopPropagation();
+      const half = Math.max(1, Math.floor((renderer.height - 4) / 2));
+      dialog.content.scrollTo(Math.min(dialog.content.scrollTop + half, dialog.content.scrollHeight));
+      renderer.requestRender();
+      return;
+    }
+    // Ctrl+U = half page up
+    if (key.ctrl && key.name === "u") {
+      key.preventDefault();
+      key.stopPropagation();
+      const half = Math.max(1, Math.floor((renderer.height - 4) / 2));
+      dialog.content.scrollTo(Math.max(dialog.content.scrollTop - half, 0));
+      renderer.requestRender();
+      return;
+    }
   };
 
   renderer.keyInput.on("keypress", extraKeyHandler);
@@ -105,6 +189,7 @@ export function createHelp(opts: {
   return {
     container: dialog.container,
     cleanup() {
+      if (pendingG) clearTimeout(pendingG);
       dialog.cleanup();
       renderer.keyInput.off("keypress", extraKeyHandler);
     },

package/src/tui/pager.ts

@@ -12,12 +12,6 @@ import { parseMarkdownLine, addSegments, collectTable, renderTableBorder, render
 
 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];
@@ -32,6 +26,7 @@ function threadHint(thread: Thread): string {
  * 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;
@@ -40,7 +35,8 @@ export function buildPagerContent(state: ReviewState, searchQuery?: string | nul
     const prefix = isCursor ? ">" : " ";
     let specText = state.specLines[i];
     if (searchQuery) {
-      const regex = new RegExp(searchQuery.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gi");
+      const csSensitive = searchQuery !== searchQuery.toLowerCase();
+      const regex = new RegExp(searchQuery.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), csSensitive ? "g" : "gi");
       specText = specText.replace(regex, (match) => `>>${match}<<`);
     }
     let indicator = " ";
@@ -54,7 +50,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");
 }
@@ -69,6 +67,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++) {
@@ -81,6 +84,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);
@@ -113,7 +119,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.textDim }));
+      lineNode.add(TextNodeRenderable.fromString(gutterBlank, { fg: theme.textDim }));
       renderTableBorder(lineNode, tableBlock.colWidths, "top");
       lineNode.add(TextNodeRenderable.fromString("\n", {}));
     }
@@ -127,13 +133,28 @@ export function buildPagerNodes(lineNode: TextRenderable, state: ReviewState, se
       indicator,
       { fg: indicatorColor, bg: isCursor ? theme.backgroundElement : undefined }
     ));
+    const numStr = String(lineNum);
+    const paddedNum = " ".repeat(numWidth - numStr.length) + numStr;
     lineNode.add(TextNodeRenderable.fromString(
-      `${padLineNum(lineNum)}  `,
+      `${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);
@@ -147,13 +168,14 @@ 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.textDim }));
+        lineNode.add(TextNodeRenderable.fromString(gutterBlank, { 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 caseSensitive = searchQuery !== searchQuery.toLowerCase();
+      const searchRegex = new RegExp(`(${escaped})`, caseSensitive ? "g" : "gi");
       const parts = specText.split(searchRegex);
       for (let p = 0; p < parts.length; p++) {
         const part = parts[p];

package/src/tui/search.ts

@@ -83,18 +83,23 @@ export function createSearch(opts: SearchOptions): SearchOverlay {
     if (key.name === "return") {
       key.preventDefault();
       key.stopPropagation();
-      const query = input.value.trim().toLowerCase();
-      if (query.length === 0) {
+      const raw = input.value.trim();
+      if (raw.length === 0) {
         onCancel();
         return;
       }
 
+      // Smartcase: if query has any uppercase, case-sensitive; otherwise case-insensitive
+      const caseSensitive = raw !== raw.toLowerCase();
+      const query = caseSensitive ? raw : raw.toLowerCase();
+
       // 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
+        const line = caseSensitive ? specLines[i] : specLines[i].toLowerCase();
+        if (line.includes(query)) {
+          onResult(i + 1, raw); // 1-based line number + original query (preserves case for n/N)
           return;
         }
       }

package/src/tui/status-bar.ts

@@ -2,7 +2,7 @@ import { BoxRenderable, TextRenderable, TextNodeRenderable, TextAttributes, type
 import type { ReviewState } from "../state/review-state";
 import { basename } from "path";
 import { theme } from "./ui/theme";
-import { buildHints } from "./ui/hint-bar";
+import { buildHints, type Hint } from "./ui/hint-bar";
 
 export interface TopBarComponents {
   box: BoxRenderable;
@@ -64,23 +64,33 @@ export function buildTopBar(
   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 = [
-    { key: "j/k", action: "move" },
+  const hints: Hint[] = [
+    { key: "j/k", action: "navigate" },
     { key: "c", action: "comment" },
-    { key: "r", action: "resolve" },
-    { key: "/", action: "search" },
-    { key: "?", action: "help" },
   ];
+  if (hasThread) {
+    hints.push({ key: "r", action: "resolve" });
+  }
+  hints.push({ key: "?", action: "help" });
   buildHints(t, hints);
 }
 

package/src/tui/thread-list.ts

@@ -24,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";

package/src/tui/ui/keybinds.ts

@@ -53,6 +53,7 @@ export function createKeybindRegistry(bindings: KeyBinding[], timeout = 500): Ke
 
   function match(key: KeyEvent): string | null {
     const keyStr = keyToString(key);
+    let skipSequenceCheck = false;
 
     if (sequence) {
       const seq = sequence.first + keyStr;
@@ -61,6 +62,7 @@ export function createKeybindRegistry(bindings: KeyBinding[], timeout = 500): Ke
 
       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
@@ -69,8 +71,8 @@ export function createKeybindRegistry(bindings: KeyBinding[], timeout = 500): Ke
       if (action) return action;
     }
 
-    // Check if this starts a sequence (but not if ctrl is held)
-    if (!key.ctrl && sequenceStarters.has(keyStr)) {
+    // 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),

package/src/tui/ui/markdown.ts

@@ -14,13 +14,22 @@ export interface StyledSegment {
 }
 
 /**
- * Parse inline markdown (bold, italic, code) into styled segments.
+ * 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[] = [];
-  // Order matters: **bold** before *italic*
-  const regex = /(\*\*(.+?)\*\*|\*(.+?)\*|`([^`]+)`)/g;
+  // 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) {
@@ -28,14 +37,29 @@ export function parseInlineMarkdown(text: string): StyledSegment[] {
       segments.push({ text: text.slice(pos, match.index) });
     }
     if (match[2] !== undefined) {
-      // **bold**
-      segments.push({ text: match[2], attributes: TextAttributes.BOLD });
+      // ***bold italic***
+      segments.push({ text: match[2], attributes: TextAttributes.BOLD | TextAttributes.ITALIC });
     } else if (match[3] !== undefined) {
-      // *italic*
-      segments.push({ text: match[3], attributes: TextAttributes.ITALIC });
+      // **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[4], fg: theme.green });
+      segments.push({ text: match[9], fg: theme.mauve });
     }
     pos = match.index + match[0].length;
   }
@@ -86,6 +110,18 @@ export function parseMarkdownLine(line: string): StyledSegment[] {
     ];
   }
 
+  // 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) {
@@ -137,10 +173,15 @@ export function parseTableCells(line: string): string[] {
 
 /** 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
+  // 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;
 }