revspec 0.8.2 → 0.8.4

package/README.md

@@ -94,7 +94,7 @@ Opens a TUI with vim-style navigation. Press `c` on any line to open a thread an
 The thread popup has two vim-style modes, indicated by border color and label:
 
 - **Insert mode** (green border) — type your comment, `Tab` sends, `Esc` switches to normal mode
-- **Normal mode** (blue border) — `j/k` and `Ctrl+D/U` scroll the conversation, `gg/G` top/bottom, `c` to reply, `r` to resolve, `q/Esc` to close
+- **Normal mode** (blue border) — `j/k` and `Ctrl+D/U` scroll the conversation, `gg/G` top/bottom, `i/c` to reply, `r` to resolve, `q/Esc` to close
 
 ### Markdown rendering
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "revspec",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "description": "Terminal-based spec review tool with real-time AI conversation",
   "type": "module",
   "license": "MIT",

package/src/tui/app.ts

@@ -61,9 +61,12 @@ export async function runTui(
 
   // Create and start the live watcher
   const liveWatcher: LiveWatcher = createLiveWatcher(jsonlPath, (ownerEvents) => {
+    let lastReplyThread: { id: string; line: number } | null = null;
     for (const event of ownerEvents) {
       if (event.type === "reply" && event.threadId && event.text) {
         state.addOwnerReply(event.threadId, event.text, event.ts);
+        const thread = state.threads.find((t) => t.id === event.threadId);
+        if (thread) lastReplyThread = { id: thread.id, line: thread.line };
         // If the thread popup is open for this thread, push the message in
         if (activeOverlay?.addMessage && activeOverlay?.threadId === event.threadId) {
           activeOverlay.addMessage({ author: "owner", text: event.text, ts: event.ts });
@@ -71,6 +74,10 @@ export async function runTui(
       }
     }
     refreshPager();
+    // Flash notification for AI replies when not viewing that thread
+    if (lastReplyThread && activeOverlay?.threadId !== lastReplyThread.id) {
+      showTransient(`AI replied on line ${lastReplyThread.line}`, "info");
+    }
   });
   liveWatcher.start();
 
@@ -101,6 +108,12 @@ export async function runTui(
   rootBox.add(bottomBar.box);
   renderer.root.add(rootBox);
 
+  // Wrap mode state
+  let wrapEnabled = false;
+  function currentWrapWidth(): number {
+    return wrapEnabled ? renderer.width : 0;
+  }
+
   // 7. Initial render
   function refreshPager(): void {
     // Spec mutation guard
@@ -111,10 +124,13 @@ export async function runTui(
       }
     } catch {}
 
-    buildPagerNodes(pager.lineNode, state, searchQuery, state.unreadThreadIds);
+    buildPagerNodes(pager.lineNode, state, searchQuery, state.unreadThreadIds, currentWrapWidth());
     buildTopBar(topBar, specFile, state, state.unreadCount(), specMtimeChanged);
-    const hasThread = !!state.threadAtLine(state.cursorLine);
-    buildBottomBar(bottomBar, commandBuffer, hasThread);
+    // Don't overwrite transient messages (welcome hint, warnings) during navigation
+    if (!messageTimer) {
+      const hasThread = !!state.threadAtLine(state.cursorLine);
+      buildBottomBar(bottomBar, commandBuffer, hasThread);
+    }
     renderer.requestRender();
   }
 
@@ -161,7 +177,7 @@ export async function runTui(
   // Map visual row back to spec line number (for H/M/L)
   function visualRowToSpecLine(targetRow: number): number {
     for (let i = 0; i < state.specLines.length; i++) {
-      const row = i + countExtraVisualLines(state.specLines, i);
+      const row = i + countExtraVisualLines(state.specLines, i, currentWrapWidth());
       if (row >= targetRow) return i + 1;
     }
     return state.lineCount;
@@ -209,7 +225,7 @@ export async function runTui(
   // Helper: scroll pager to ensure cursor line is visible
   function ensureCursorVisible(): void {
     // Map spec line to visual row, accounting for table border extra lines
-    const extra = countExtraVisualLines(state.specLines, state.cursorLine - 1);
+    const extra = countExtraVisualLines(state.specLines, state.cursorLine - 1, currentWrapWidth());
     const cursorRow = state.cursorLine - 1 + extra;
     const viewportHeight = Math.max(1, renderer.height - 2); // minus top + bottom bar
 
@@ -244,6 +260,13 @@ export async function runTui(
       exitTui(resolve, "session-end");
       return "exit";
     }
+    // :wrap — toggle line wrapping
+    if (cmd === "wrap") {
+      wrapEnabled = !wrapEnabled;
+      refreshPager();
+      showTransient(wrapEnabled ? "Line wrap on" : "Line wrap off", "info");
+      return "stay";
+    }
     // :{N} — jump to line number
     const lineNum = parseInt(cmd, 10);
     if (!isNaN(lineNum) && lineNum > 0) {
@@ -291,13 +314,24 @@ export async function runTui(
         }
       },
       onResolve: () => {
+        let didResolve = false;
         if (existingThread) {
           const wasResolved = existingThread.status === "resolved";
+          didResolve = !wasResolved;
           state.resolveThread(existingThread.id);
           state.markRead(existingThread.id);
           appendEvent(jsonlPath, { type: wasResolved ? "unresolve" : "resolve", threadId: existingThread.id, author: "reviewer", ts: Date.now() });
         }
         dismissOverlay();
+        // Auto-advance to next thread only when resolving (not reopening)
+        if (didResolve) {
+          const nextLine = state.nextThread();
+          if (nextLine !== null) {
+            state.cursorLine = nextLine;
+            ensureCursorVisible();
+          }
+        }
+        refreshPager();
       },
       onCancel: () => {
         if (existingThread) state.markRead(existingThread.id);
@@ -455,8 +489,7 @@ export async function runTui(
 
   refreshPager();
   if (state.threads.length === 0) {
-    setBottomBarMessage(bottomBar, "Navigate to a line and press c to comment  |  ? for help", "info");
-    renderer.requestRender();
+    showTransient("Navigate to a line and press c to comment  |  ? for help", "info", 8000);
   }
   renderer.start();
 
@@ -616,7 +649,7 @@ export async function runTui(
           refreshPager();
           break;
         case "center-cursor": {
-          const extra = countExtraVisualLines(state.specLines, state.cursorLine - 1);
+          const extra = countExtraVisualLines(state.specLines, state.cursorLine - 1, currentWrapWidth());
           const cursorRow = state.cursorLine - 1 + extra;
           const halfView = Math.floor(pageSize() / 2);
           pager.scrollBox.scrollTo(Math.max(0, cursorRow - halfView));
@@ -763,6 +796,9 @@ export async function runTui(
                   liveWatcher.start();
                   dismissOverlay();
                   searchQuery = null;
+                  jumpList.length = 0;
+                  jumpList.push(1);
+                  jumpIndex = 0;
                   ensureCursorVisible();
                   refreshPager();
                   showTransient("Spec rewritten \u2014 review cleared", "success", 2500);
@@ -773,18 +809,7 @@ export async function runTui(
           break;
         case "approve":
           unresolvedGate(() => {
-            const confirmOverlay = createConfirm({
-              renderer,
-              message: "Approve spec and proceed to implementation?",
-              onConfirm: () => {
-                dismissOverlay();
-                exitTui(resolve, "approve");
-              },
-              onCancel: () => {
-                dismissOverlay();
-              },
-            });
-            showOverlay(confirmOverlay);
+            exitTui(resolve, "approve");
           });
           break;
         case "next-thread": {

package/src/tui/help.ts

@@ -78,7 +78,7 @@ export function createHelp(opts: {
 
   addHelpSection(dialog.content, renderer, "Thread Popup", [
     "  New thread: INSERT mode (green border) — type and Tab to send.",
-    "  Existing thread: NORMAL mode (blue border) — read conversation,",
+    "  Existing thread: NORMAL mode (blue border) — scroll conversation,",
     "  c to reply, r to resolve, q/Esc to close.",
   ]);
 
@@ -114,6 +114,7 @@ export function createHelp(opts: {
     "  :q/:wq    Quit (warns if unresolved)",
     "  :q!       Force quit",
     "  :{N}      Jump to line N",
+    "  :wrap     Toggle line wrapping",
     "  Ctrl+C    Force quit",
   ]);
 

package/src/tui/live-watcher.ts

@@ -15,14 +15,16 @@ export function createLiveWatcher(
   let pollTimer: ReturnType<typeof setInterval> | null = null
 
   function check() {
-    const { events, newOffset } = readEventsFromOffset(jsonlPath, offset)
-    if (events.length > 0) {
-      offset = newOffset
-      const ownerEvents = events.filter((e) => e.author === "owner")
-      if (ownerEvents.length > 0) {
-        onOwnerEvents(ownerEvents)
+    try {
+      const { events, newOffset } = readEventsFromOffset(jsonlPath, offset)
+      if (events.length > 0) {
+        offset = newOffset
+        const ownerEvents = events.filter((e) => e.author === "owner")
+        if (ownerEvents.length > 0) {
+          onOwnerEvents(ownerEvents)
+        }
       }
-    }
+    } catch {}
   }
 
   return {

package/src/tui/pager.ts

@@ -1,5 +1,4 @@
 import type { ReviewState } from "../state/review-state";
-import type { Thread } from "../protocol/types";
 import {
   ScrollBoxRenderable,
   TextRenderable,
@@ -10,16 +9,6 @@ import {
 import { theme } from "./ui/theme";
 import { parseMarkdownLine, addSegments, collectTable, renderTableBorder, renderTableSeparator, renderTableRow, parseTableCells, type TableBlock } from "./ui/markdown";
 
-const MAX_HINT_LENGTH = 40;
-
-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";
-}
-
 // --- Plain text builder (for tests) ---
 
 /**
@@ -64,13 +53,33 @@ export function buildPagerContent(state: ReviewState, searchQuery?: string | nul
  * 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 {
+/**
+ * Word-wrap a string at the given width, breaking at word boundaries.
+ */
+function wordWrap(text: string, width: number): string[] {
+  if (width <= 0 || text.length <= width) return [text];
+  const lines: string[] = [];
+  let remaining = text;
+  while (remaining.length > width) {
+    let breakAt = remaining.lastIndexOf(" ", width);
+    if (breakAt <= 0) breakAt = width; // no space found — hard break
+    lines.push(remaining.slice(0, breakAt));
+    remaining = remaining.slice(breakAt).replace(/^ /, ""); // trim leading space on continuation
+  }
+  if (remaining.length > 0) lines.push(remaining);
+  return lines;
+}
+
+export function buildPagerNodes(lineNode: TextRenderable, state: ReviewState, searchQuery?: string | null, unreadThreadIds?: ReadonlySet<string>, wrapWidth?: number): 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);
+  const gutterWidth = 2 + numWidth + 2; // prefix(1) + indicator(1) + numWidth + spaces(2)
+  // Blank gutter for table borders and wrap continuations
+  const gutterBlank = " ".repeat(gutterWidth);
+  // Available content width for wrapping
+  const contentWidth = wrapWidth && wrapWidth > gutterWidth ? wrapWidth - gutterWidth : 0;
 
   // Pre-scan for table blocks so we can calculate column widths
   const tableBlocks = new Map<number, TableBlock>();
@@ -127,7 +136,7 @@ export function buildPagerNodes(lineNode: TextRenderable, state: ReviewState, se
     // Gutter: cursor + indicator + line number (dimmed)
     lineNode.add(TextNodeRenderable.fromString(
       `${prefix}`,
-      { fg: isCursor ? theme.yellow : theme.textDim, bg: isCursor ? theme.backgroundElement : undefined }
+      { fg: isCursor ? theme.mauve : theme.textDim, bg: isCursor ? theme.backgroundElement : undefined }
     ));
     lineNode.add(TextNodeRenderable.fromString(
       indicator,
@@ -171,7 +180,10 @@ export function buildPagerNodes(lineNode: TextRenderable, state: ReviewState, se
         lineNode.add(TextNodeRenderable.fromString(gutterBlank, { fg: theme.textDim }));
         renderTableBorder(lineNode, tableBlock.colWidths, "bottom");
       }
-    } else if (searchQuery && specText.toLowerCase().includes(searchQuery.toLowerCase())) {
+    } else if (searchQuery && (() => {
+      const cs = searchQuery !== searchQuery.toLowerCase();
+      return cs ? specText.includes(searchQuery) : specText.toLowerCase().includes(searchQuery.toLowerCase());
+    })()) {
       // Line contains search match — show colored match segments (no markdown styling)
       const escaped = searchQuery.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
       const caseSensitive = searchQuery !== searchQuery.toLowerCase();
@@ -187,21 +199,23 @@ export function buildPagerNodes(lineNode: TextRenderable, state: ReviewState, se
           lineNode.add(TextNodeRenderable.fromString(part, { fg: theme.text, bg: isCursor ? theme.backgroundElement : undefined }));
         }
       }
+    } else if (contentWidth > 0 && specText.length > contentWidth) {
+      // Wrap long lines — first chunk gets markdown, continuations get blank gutter + markdown
+      const chunks = wordWrap(specText, contentWidth);
+      const segments = parseMarkdownLine(chunks[0]);
+      addSegments(lineNode, segments, theme.text, isCursor ? theme.backgroundElement : undefined);
+      for (let c = 1; c < chunks.length; c++) {
+        lineNode.add(TextNodeRenderable.fromString("\n", {}));
+        lineNode.add(TextNodeRenderable.fromString(gutterBlank, { fg: theme.textDim }));
+        const contSegments = parseMarkdownLine(chunks[c]);
+        addSegments(lineNode, contSegments, theme.text, 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", {}));
@@ -212,10 +226,14 @@ export function buildPagerNodes(lineNode: TextRenderable, state: ReviewState, se
 // --- Visual row offset calculation ---
 
 /**
- * Count extra visual lines (table borders) before a given spec line index.
+ * Count extra visual lines (table borders + word wrap) 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 {
+export function countExtraVisualLines(specLines: string[], cursorIndex: number, wrapWidth?: number): number {
+  const numWidth = Math.max(String(specLines.length).length, 3);
+  const gutterWidth = 2 + numWidth + 2;
+  const contentWidth = wrapWidth && wrapWidth > gutterWidth ? wrapWidth - gutterWidth : 0;
+
   let extra = 0;
   let i = 0;
   while (i < specLines.length) {
@@ -232,6 +250,10 @@ export function countExtraVisualLines(specLines: string[], cursorIndex: number):
       if (cursorIndex >= tableEnd) extra++;
       continue;
     }
+    // Word wrap: count extra continuation lines
+    if (contentWidth > 0 && i < cursorIndex && specLines[i].length > contentWidth) {
+      extra += wordWrap(specLines[i], contentWidth).length - 1;
+    }
     i++;
   }
   return extra;
@@ -260,7 +282,7 @@ export function createPager(renderer: CliRenderer): PagerComponents {
     width: "100%",
     flexGrow: 1,
     scrollY: true,
-    scrollX: true,
+    scrollX: false,
     backgroundColor: theme.base,
   });
 

package/src/tui/spinner.ts

@@ -6,7 +6,7 @@ import {
 } from "@opentui/core";
 import { theme } from "./ui/theme";
 
-const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+const SPINNER_FRAMES = ["|", "/", "-", "\\"];
 
 export interface SpinnerOverlay {
   container: BoxRenderable;

package/src/tui/status-bar.ts

@@ -33,16 +33,16 @@ export function buildTopBar(
   // 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 }));
+  // Thread progress — shown when threads exist
+  if (state.threads.length > 0) {
+    const resolved = state.threads.filter((t) => t.status === "resolved").length;
+    const total = state.threads.length;
+    t.add(TextNodeRenderable.fromString("  \u00b7  ", { fg: theme.textDim }));
+    if (resolved === total) {
+      t.add(TextNodeRenderable.fromString(`${resolved}/${total} resolved`, { fg: theme.green }));
+    } else {
+      t.add(TextNodeRenderable.fromString(`${resolved}/${total} resolved`, { fg: theme.yellow }));
+    }
   }
 
   // Unread replies
@@ -50,7 +50,7 @@ export function buildTopBar(
     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 }
+      { fg: theme.yellow, attributes: TextAttributes.BOLD }
     ));
   }
 
@@ -66,6 +66,16 @@ export function buildTopBar(
     : `${Math.round(((state.cursorLine - 1) / (state.lineCount - 1)) * 100)}%`;
   t.add(TextNodeRenderable.fromString("  \u00b7  ", { fg: theme.textDim }));
   t.add(TextNodeRenderable.fromString(`L${state.cursorLine}/${state.lineCount} ${posLabel}`, { fg: theme.textMuted }));
+
+  // Current section breadcrumb — nearest heading above cursor
+  for (let i = state.cursorLine - 1; i >= 0; i--) {
+    const match = state.specLines[i].match(/^(#{1,3})\s+(.+)/);
+    if (match) {
+      t.add(TextNodeRenderable.fromString("  \u00b7  ", { fg: theme.textDim }));
+      t.add(TextNodeRenderable.fromString(match[2].trim(), { fg: theme.textDim, attributes: TextAttributes.ITALIC }));
+      break;
+    }
+  }
 }
 
 export type MessageIcon = "warn" | "success" | "info";

package/src/tui/thread-list.ts

@@ -57,7 +57,11 @@ function buildTitle(threads: Thread[], mode: FilterMode): string {
 }
 
 function threadsToOptions(threads: Thread[]) {
-  return threads.map((t) => {
+  const STATUS_ORDER: Record<string, number> = { open: 0, pending: 1, resolved: 2 };
+  const sorted = [...threads].sort((a, b) =>
+    (STATUS_ORDER[a.status] ?? 3) - (STATUS_ORDER[b.status] ?? 3) || a.line - b.line
+  );
+  return sorted.map((t) => {
     const icon = STATUS_ICONS[t.status];
     return {
       name: `${icon} #${t.id} line ${t.line}: ${previewText(t)}`,

package/src/tui/ui/markdown.ts

@@ -29,7 +29,7 @@ export function parseInlineMarkdown(text: string): StyledSegment[] {
   //   7: ~~strikethrough~~
   //   8: [link text](url) — display text only
   //   9: `code`
-  const regex = /(\*\*\*(.+?)\*\*\*|\*\*(.+?)\*\*|\*(.+?)\*|__(.+?)__|_(.+?)_|~~(.+?)~~|\[([^\]]+)\]\([^)]+\)|`([^`]+)`)/g;
+  const regex = /(\*\*\*(.+?)\*\*\*|\*\*(.+?)\*\*|\*(.+?)\*|(?<!\w)__(.+?)__(?!\w)|(?<!\w)_(.+?)_(?!\w)|~~(.+?)~~|\[([^\]]+)\]\([^)]+\)|`([^`]+)`)/g;
   let pos = 0;
   let match;
   while ((match = regex.exec(text)) !== null) {
@@ -82,7 +82,7 @@ export function parseMarkdownLine(line: string): StyledSegment[] {
   const headingMatch = line.match(/^(#{1,6})\s+(.*)/);
   if (headingMatch) {
     const level = headingMatch[1].length;
-    const color = level <= 2 ? theme.blue : theme.mauve;
+    const color = level <= 2 ? theme.blue : level === 3 ? theme.mauve : theme.textMuted;
     // Parse inline markdown within heading text
     const inner = parseInlineMarkdown(headingMatch[2]);
     return inner.map((s) => ({