revspec 0.8.3 → 0.8.5

package/package.json

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

package/src/tui/app.ts

@@ -108,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
@@ -118,12 +124,21 @@ 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);
     // Don't overwrite transient messages (welcome hint, warnings) during navigation
     if (!messageTimer) {
-      const hasThread = !!state.threadAtLine(state.cursorLine);
-      buildBottomBar(bottomBar, commandBuffer, hasThread);
+      const curThread = state.threadAtLine(state.cursorLine);
+      if (curThread && curThread.messages.length > 0 && commandBuffer === null) {
+        // Show thread preview in bottom bar
+        const first = curThread.messages[0].text.replace(/\n/g, " ");
+        const replies = curThread.messages.length - 1;
+        const preview = first.length > 60 ? first.slice(0, 59) + "\u2026" : first;
+        const replyStr = replies > 0 ? ` (${replies} repl${replies === 1 ? "y" : "ies"})` : "";
+        setBottomBarMessage(bottomBar, `${preview}${replyStr} [${curThread.status}]`);
+      } else {
+        buildBottomBar(bottomBar, commandBuffer, !!curThread);
+      }
     }
     renderer.requestRender();
   }
@@ -171,7 +186,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;
@@ -219,7 +234,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
 
@@ -254,6 +269,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) {
@@ -338,8 +360,11 @@ export async function runTui(
         searchQuery = query;
         savePrevPosition();
         state.cursorLine = lineNumber;
-        dismissOverlay();
         ensureCursorVisible();
+        dismissOverlay(); // calls refreshPager with cursor + scroll already set
+      },
+      onPreview: (query: string | null) => {
+        searchQuery = query;
         refreshPager();
       },
       onCancel: () => {
@@ -636,7 +661,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));

package/src/tui/help.ts

@@ -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/pager.ts

@@ -7,7 +7,7 @@ import {
   type CliRenderer,
 } from "@opentui/core";
 import { theme } from "./ui/theme";
-import { parseMarkdownLine, addSegments, collectTable, renderTableBorder, renderTableSeparator, renderTableRow, parseTableCells, type TableBlock } from "./ui/markdown";
+import { parseMarkdownLine, addSegments, collectTable, renderTableBorder, renderTableSeparator, renderTableRow, parseTableCells, type TableBlock, type StyledSegment } from "./ui/markdown";
 
 // --- Plain text builder (for tests) ---
 
@@ -53,20 +53,92 @@ 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 {
+/**
+ * Wrap pre-parsed markdown segments at the given width.
+ * Breaks at segment boundaries when possible, word boundaries within segments otherwise.
+ * Returns an array of segment arrays (one per visual line).
+ */
+function wrapSegments(segments: StyledSegment[], width: number): StyledSegment[][] {
+  if (width <= 0) return [segments];
+  // Check total length
+  let totalLen = 0;
+  for (const s of segments) totalLen += s.text.length;
+  if (totalLen <= width) return [segments];
+
+  const lines: StyledSegment[][] = [];
+  let curLine: StyledSegment[] = [];
+  let curWidth = 0;
+
+  for (const seg of segments) {
+    if (curWidth + seg.text.length <= width) {
+      curLine.push(seg);
+      curWidth += seg.text.length;
+      continue;
+    }
+    // Segment doesn't fit — break it at word boundaries
+    let remaining = seg.text;
+    while (remaining.length > 0) {
+      const avail = width - curWidth;
+      if (remaining.length <= avail) {
+        curLine.push({ ...seg, text: remaining });
+        curWidth += remaining.length;
+        break;
+      }
+      if (avail > 0) {
+        let breakAt = remaining.lastIndexOf(" ", avail);
+        if (breakAt <= 0) breakAt = avail; // hard break
+        curLine.push({ ...seg, text: remaining.slice(0, breakAt) });
+        remaining = remaining.slice(breakAt).replace(/^ /, "");
+      }
+      lines.push(curLine);
+      curLine = [];
+      curWidth = 0;
+    }
+  }
+  if (curLine.length > 0) lines.push(curLine);
+  return lines;
+}
+
+/**
+ * Word-wrap a raw string (for countExtraVisualLines estimation).
+ */
+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;
+    lines.push(remaining.slice(0, breakAt));
+    remaining = remaining.slice(breakAt).replace(/^ /, "");
+  }
+  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
+  // Skip lines inside fenced code blocks — pipes in code are not tables
   const tableBlocks = new Map<number, TableBlock>();
+  let preScanCodeBlock = false;
   for (let i = 0; i < state.specLines.length; i++) {
+    if (state.specLines[i].trimStart().startsWith("```")) {
+      preScanCodeBlock = !preScanCodeBlock;
+      continue;
+    }
+    if (preScanCodeBlock) continue;
     if (state.specLines[i].trimStart().startsWith("|") && !tableBlocks.has(i)) {
       const block = collectTable(state.specLines, i);
-      // Mark all lines in this block
       for (let j = 0; j < block.lines.length; j++) {
         tableBlocks.set(i + j, block);
       }
@@ -180,9 +252,20 @@ export function buildPagerNodes(lineNode: TextRenderable, state: ReviewState, se
         }
       }
     } else {
-      // Parse and render inline markdown
+      // Parse inline markdown, then wrap if needed
       const segments = parseMarkdownLine(specText);
-      addSegments(lineNode, segments, theme.text, isCursor ? theme.backgroundElement : undefined);
+      const bg = isCursor ? theme.backgroundElement : undefined;
+      if (contentWidth > 0 && specText.length > contentWidth) {
+        const wrapped = wrapSegments(segments, contentWidth);
+        addSegments(lineNode, wrapped[0], theme.text, bg);
+        for (let c = 1; c < wrapped.length; c++) {
+          lineNode.add(TextNodeRenderable.fromString("\n", {}));
+          lineNode.add(TextNodeRenderable.fromString(gutterBlank, { fg: theme.textDim }));
+          addSegments(lineNode, wrapped[c], theme.text, bg);
+        }
+      } else {
+        addSegments(lineNode, segments, theme.text, bg);
+      }
     }
 
     // Newline between lines (except last)
@@ -195,14 +278,24 @@ 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;
+  let inCode = false;
   while (i < specLines.length) {
-    if (specLines[i].trimStart().startsWith("|")) {
+    if (specLines[i].trimStart().startsWith("```")) {
+      inCode = !inCode;
+      i++;
+      continue;
+    }
+    if (!inCode && specLines[i].trimStart().startsWith("|")) {
       const tableStart = i;
       while (i < specLines.length && specLines[i].trimStart().startsWith("|")) {
         i++;
@@ -215,6 +308,10 @@ export function countExtraVisualLines(specLines: string[], cursorIndex: number):
       if (cursorIndex >= tableEnd) extra++;
       continue;
     }
+    // Word wrap: count extra continuation lines (not in code blocks — those render unwrapped)
+    if (!inCode && contentWidth > 0 && i < cursorIndex && specLines[i].length > contentWidth) {
+      extra += wordWrap(specLines[i], contentWidth).length - 1;
+    }
     i++;
   }
   return extra;
@@ -243,7 +340,7 @@ export function createPager(renderer: CliRenderer): PagerComponents {
     width: "100%",
     flexGrow: 1,
     scrollY: true,
-    scrollX: true,
+    scrollX: false,
     backgroundColor: theme.base,
   });
 

package/src/tui/search.ts

@@ -1,6 +1,7 @@
 import {
   BoxRenderable,
   InputRenderable,
+  InputRenderableEvents,
   TextRenderable,
   type CliRenderer,
   type KeyEvent,
@@ -12,6 +13,7 @@ export interface SearchOptions {
   specLines: string[];
   cursorLine: number;
   onResult: (lineNumber: number, query: string) => void;
+  onPreview?: (query: string | null) => void;
   onCancel: () => void;
 }
 
@@ -72,6 +74,14 @@ export function createSearch(opts: SearchOptions): SearchOverlay {
     renderer.requestRender();
   }, 0);
 
+  // Incremental search — preview highlights after 3+ characters
+  if (opts.onPreview) {
+    input.on(InputRenderableEvents.INPUT, () => {
+      const raw = input.value.trim();
+      opts.onPreview!(raw.length >= 3 ? raw : null);
+    });
+  }
+
   // Key handler
   const keyHandler = (key: KeyEvent) => {
     if (key.name === "escape") {

package/src/tui/ui/markdown.ts

@@ -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) => ({