revspec 0.7.3 → 0.8.1

package/README.md

@@ -30,11 +30,11 @@ Install the `/revspec` skill for Claude Code:
 /plugin install revspec
 ```
 
-Or manually (symlink, stays updated with repo):
+Or manually (clone + symlink, stays updated with `git pull`):
 
 ```bash
-mkdir -p ~/.claude/skills
-ln -sfn /path/to/revspec/skills/revspec ~/.claude/skills/revspec
+git clone https://github.com/icyrainz/revspec.git ~/.local/share/revspec
+ln -sfn ~/.local/share/revspec/skills/revspec ~/.claude/skills/revspec
 ```
 
 ## Usage

package/package.json

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

package/src/state/review-state.ts

@@ -113,6 +113,36 @@ export class ReviewState {
     return this.threads.reduce((max, t) => (t.line > max.line ? t : max)).line;
   }
 
+  nextHeading(level: number): number | null {
+    const prefix = "#".repeat(level) + " ";
+    const guard = "#".repeat(level + 1);
+    for (let i = this.cursorLine; i < this.specLines.length; i++) {
+      const line = this.specLines[i];
+      if (line.startsWith(prefix) && !line.startsWith(guard)) return i + 1;
+    }
+    // Wrap: search from top
+    for (let i = 0; i < this.cursorLine - 1; i++) {
+      const line = this.specLines[i];
+      if (line.startsWith(prefix) && !line.startsWith(guard)) return i + 1;
+    }
+    return null;
+  }
+
+  prevHeading(level: number): number | null {
+    const prefix = "#".repeat(level) + " ";
+    const guard = "#".repeat(level + 1);
+    for (let i = this.cursorLine - 2; i >= 0; i--) {
+      const line = this.specLines[i];
+      if (line.startsWith(prefix) && !line.startsWith(guard)) return i + 1;
+    }
+    // Wrap: search from bottom
+    for (let i = this.specLines.length - 1; i >= this.cursorLine; i--) {
+      const line = this.specLines[i];
+      if (line.startsWith(prefix) && !line.startsWith(guard)) return i + 1;
+    }
+    return null;
+  }
+
   canApprove(): boolean {
     // No threads = clean approval (spec is good as-is)
     if (this.threads.length === 0) return true;

package/src/tui/app.ts

@@ -27,6 +27,7 @@ import { createConfirm } from "./confirm";
 import { createHelp } from "./help";
 import { createSpinner } from "./spinner";
 import { createKeybindRegistry, type KeyBinding } from "./ui/keybinds";
+import { theme } from "./ui/theme";
 
 export async function runTui(
   specFile: string,
@@ -123,6 +124,40 @@ export async function runTui(
   // Command mode state
   let commandBuffer: string | null = null;
 
+  // Jump list — mirrors vim's :jumps behavior.
+  // pushJump() is called BEFORE each big jump to record the departure position.
+  // Ctrl+O traverses backward, Ctrl+I forward. Making a new jump while in the
+  // middle of the list discards forward history (same as vim).
+  const jumpList: number[] = [1];
+  let jumpIndex: number = 0;
+  const MAX_JUMP_LIST = 50;
+
+  function pushJump(): void {
+    const cur = state.cursorLine;
+    // Discard forward history when making a new jump from the middle
+    if (jumpIndex < jumpList.length - 1) {
+      jumpList.splice(jumpIndex + 1);
+    }
+    // Don't push duplicate of the list tail
+    if (jumpList.length > 0 && jumpList[jumpList.length - 1] === cur) return;
+    jumpList.push(cur);
+    if (jumpList.length > MAX_JUMP_LIST) jumpList.shift();
+    jumpIndex = jumpList.length - 1;
+  }
+
+  function savePrevPosition(): void {
+    pushJump();
+  }
+
+  // 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);
+      if (row >= targetRow) return i + 1;
+    }
+    return state.lineCount;
+  }
+
   // Active spec poll interval (for submit spinner leak prevention)
   let activeSpecPoll: ReturnType<typeof setInterval> | null = null;
 
@@ -188,7 +223,7 @@ export async function runTui(
       const { open, pending } = state.activeThreadCount();
       const total = open + pending;
       if (total > 0) {
-        setBottomBarMessage(bottomBar, ` \u26a0 ${total} unresolved thread(s). Use :q! to force quit`);
+        setBottomBarMessage(bottomBar, `${total} unresolved thread(s). Use :q! to force quit`, "warn");
         renderer.requestRender();
         setTimeout(() => { refreshPager(); }, 2000);
         return "stay";
@@ -203,12 +238,13 @@ export async function runTui(
     // :{N} — jump to line number
     const lineNum = parseInt(cmd, 10);
     if (!isNaN(lineNum) && lineNum > 0) {
+      savePrevPosition();
       state.cursorLine = Math.min(lineNum, state.lineCount);
       ensureCursorVisible();
       refreshPager();
       return "stay";
     }
-    setBottomBarMessage(bottomBar, ` Unknown command: ${cmd}`);
+    setBottomBarMessage(bottomBar, `Unknown command: ${cmd}`, "warn");
     renderer.requestRender();
     setTimeout(() => { refreshPager(); }, 1500);
     return "stay";
@@ -257,6 +293,7 @@ export async function runTui(
         dismissOverlay();
       },
       onCancel: () => {
+        if (existingThread) state.markRead(existingThread.id);
         dismissOverlay();
       },
     });
@@ -271,6 +308,7 @@ export async function runTui(
       cursorLine: state.cursorLine,
       onResult: (lineNumber: number, query: string) => {
         searchQuery = query;
+        savePrevPosition();
         state.cursorLine = lineNumber;
         dismissOverlay();
         ensureCursorVisible();
@@ -289,6 +327,7 @@ export async function runTui(
       renderer,
       threads: state.threads,
       onSelect: (lineNumber: number) => {
+        savePrevPosition();
         state.cursorLine = lineNumber;
         dismissOverlay();
         ensureCursorVisible();
@@ -390,6 +429,16 @@ export async function runTui(
     { key: "[t", action: "prev-thread" },
     { key: "]r", action: "next-unread" },
     { key: "[r", action: "prev-unread" },
+    { key: "]1", action: "next-h1" },
+    { key: "[1", action: "prev-h1" },
+    { key: "]2", action: "next-h2" },
+    { key: "[2", action: "prev-h2" },
+    { key: "]3", action: "next-h3" },
+    { key: "[3", action: "prev-h3" },
+    { key: "''", action: "jump-back" },
+    { key: "H", action: "screen-top" },
+    { key: "M", action: "screen-middle" },
+    { key: "L", action: "screen-bottom" },
     { key: "zz", action: "center-cursor" },
     { key: "?", action: "help" },
     { key: "/", action: "search" },
@@ -398,6 +447,10 @@ export async function runTui(
   const keybinds = createKeybindRegistry(bindings, 300);
 
   refreshPager();
+  if (state.threads.length === 0) {
+    setBottomBarMessage(bottomBar, "Navigate to a line and press c to start reviewing", "info");
+    renderer.requestRender();
+  }
   renderer.start();
 
   // 8. Set up keybinding handler
@@ -460,6 +513,38 @@ export async function runTui(
         return;
       }
 
+      // Ctrl+O: jump back in jump list
+      if (key.ctrl && key.name === "o") {
+        // Starting backward traversal from head — save current position first
+        // (without splicing forward history, unlike pushJump)
+        if (jumpIndex === jumpList.length - 1) {
+          const cur = state.cursorLine;
+          if (jumpList[jumpIndex] !== cur) {
+            jumpList.push(cur);
+            if (jumpList.length > MAX_JUMP_LIST) jumpList.shift();
+            jumpIndex = jumpList.length - 1;
+          }
+        }
+        if (jumpIndex > 0) {
+          jumpIndex--;
+          state.cursorLine = Math.min(jumpList[jumpIndex], state.lineCount);
+          ensureCursorVisible();
+          refreshPager();
+        }
+        return;
+      }
+
+      // Ctrl+I / Tab: jump forward in jump list
+      if ((key.ctrl && key.name === "i") || key.name === "tab") {
+        if (jumpIndex < jumpList.length - 1) {
+          jumpIndex++;
+          state.cursorLine = Math.min(jumpList[jumpIndex], state.lineCount);
+          ensureCursorVisible();
+          refreshPager();
+        }
+        return;
+      }
+
       // Escape clears search highlights
       if (key.name === "escape") {
         if (searchQuery) {
@@ -512,11 +597,13 @@ export async function runTui(
           break;
         }
         case "goto-bottom":
+          savePrevPosition();
           state.cursorLine = state.lineCount;
           ensureCursorVisible();
           refreshPager();
           break;
         case "goto-top":
+          savePrevPosition();
           state.cursorLine = 1;
           ensureCursorVisible();
           refreshPager();
@@ -533,29 +620,47 @@ export async function runTui(
           if (searchQuery) {
             const match = findNextMatch(state.specLines, searchQuery, state.cursorLine, 1);
             if (match !== null) {
+              const wrapped = match <= state.cursorLine;
+              savePrevPosition();
               state.cursorLine = match;
               ensureCursorVisible();
+              refreshPager();
+              if (wrapped) {
+                setBottomBarMessage(bottomBar, "Search wrapped to top", "info");
+                renderer.requestRender();
+                setTimeout(() => { refreshPager(); }, 1200);
+              }
+            } else {
+              refreshPager();
             }
           } else {
-            setBottomBarMessage(bottomBar, " No active search \u2014 use / to search");
+            setBottomBarMessage(bottomBar, "No active search \u2014 use / to search");
             renderer.requestRender();
             setTimeout(() => { refreshPager(); }, 1500);
           }
-          refreshPager();
           break;
         case "search-prev":
           if (searchQuery) {
             const match = findNextMatch(state.specLines, searchQuery, state.cursorLine, -1);
             if (match !== null) {
+              const wrapped = match >= state.cursorLine;
+              savePrevPosition();
               state.cursorLine = match;
               ensureCursorVisible();
+              refreshPager();
+              if (wrapped) {
+                setBottomBarMessage(bottomBar, "Search wrapped to bottom", "info");
+                renderer.requestRender();
+                setTimeout(() => { refreshPager(); }, 1200);
+              }
+            } else {
+              refreshPager();
             }
           } else {
-            setBottomBarMessage(bottomBar, " No active search \u2014 use / to search");
+            setBottomBarMessage(bottomBar, "No active search \u2014 use / to search");
             renderer.requestRender();
             setTimeout(() => { refreshPager(); }, 1500);
           }
-          refreshPager();
           break;
         case "comment":
           showCommentInput();
@@ -571,14 +676,13 @@ export async function runTui(
             state.markRead(thread.id);
             appendEvent(jsonlPath, { type: wasResolved ? "unresolve" : "resolve", threadId: thread.id, author: "reviewer", ts: Date.now() });
             refreshPager();
-            const msg = wasResolved
-              ? ` \u21a9 Reopened thread #${thread.id}`
-              : ` \u2714 Resolved thread #${thread.id}`;
-            setBottomBarMessage(bottomBar, msg);
+            setBottomBarMessage(bottomBar,
+              wasResolved ? `Reopened thread #${thread.id}` : `Resolved thread #${thread.id}`,
+              "success");
             renderer.requestRender();
             setTimeout(() => { refreshPager(); }, 1500);
           } else {
-            setBottomBarMessage(bottomBar, " No thread on this line");
+            setBottomBarMessage(bottomBar, "No thread on this line");
             renderer.requestRender();
             setTimeout(() => { refreshPager(); }, 1500);
           }
@@ -592,7 +696,7 @@ export async function runTui(
             appendEvent(jsonlPath, { type: "resolve", threadId: t.id, author: "reviewer", ts: Date.now() });
           }
           refreshPager();
-          setBottomBarMessage(bottomBar, ` \u2714 Resolved ${pending} pending thread(s)`);
+          setBottomBarMessage(bottomBar, `Resolved ${pending} pending thread(s)`, "success");
           renderer.requestRender();
           setTimeout(() => { refreshPager(); }, 1500);
           break;
@@ -600,7 +704,7 @@ export async function runTui(
         case "delete-draft": {
           const thread = state.threadAtLine(state.cursorLine);
           if (!thread) {
-            setBottomBarMessage(bottomBar, " No thread on this line");
+            setBottomBarMessage(bottomBar, "No thread on this line");
             renderer.requestRender();
             setTimeout(() => { refreshPager(); }, 1500);
             break;
@@ -614,7 +718,7 @@ export async function runTui(
               state.deleteThread(thread.id);
               appendEvent(jsonlPath, { type: "delete", threadId: thread.id, author: "reviewer", ts: Date.now() });
               refreshPager();
-              setBottomBarMessage(bottomBar, ` \u2714 Deleted thread #${thread.id}`);
+              setBottomBarMessage(bottomBar, `Deleted thread #${thread.id}`, "success");
               renderer.requestRender();
               setTimeout(() => { refreshPager(); }, 1500);
             },
@@ -627,16 +731,17 @@ export async function runTui(
         }
         case "submit":
           if (state.threads.length === 0) {
-            setBottomBarMessage(bottomBar, " No threads to submit.");
+            setBottomBarMessage(bottomBar, "No threads to submit.");
             renderer.requestRender();
             break;
           }
           unresolvedGate(() => {
             appendEvent(jsonlPath, { type: "submit", author: "reviewer", ts: Date.now() });
 
+            const count = state.threads.length;
             const spinnerOverlay = createSpinner({
               renderer,
-              message: "Waiting for agent to update spec...",
+              message: `Submitting ${count} thread${count === 1 ? "" : "s"}...`,
               onCancel: () => {
                 clearInterval(activeSpecPoll!);
                 activeSpecPoll = null;
@@ -646,7 +751,7 @@ export async function runTui(
                 clearInterval(activeSpecPoll!);
                 activeSpecPoll = null;
                 dismissOverlay();
-                setBottomBarMessage(bottomBar, " \u26a0 Agent did not update spec. Press S to retry.");
+                setBottomBarMessage(bottomBar, "Agent did not update spec. Press S to retry.", "warn");
                 renderer.requestRender();
                 setTimeout(() => { refreshPager(); }, 3000);
               },
@@ -669,6 +774,9 @@ export async function runTui(
                   searchQuery = null;
                   ensureCursorVisible();
                   refreshPager();
+                  setBottomBarMessage(bottomBar, "Spec rewritten \u2014 review cleared", "success");
+                  renderer.requestRender();
+                  setTimeout(() => { refreshPager(); }, 2500);
                 }
               } catch {}
             }, 500);
@@ -693,11 +801,12 @@ export async function runTui(
         case "next-thread": {
           const next = state.nextThread();
           if (next !== null) {
+            savePrevPosition();
             state.cursorLine = next;
             ensureCursorVisible();
             refreshPager();
           } else {
-            setBottomBarMessage(bottomBar, " No threads");
+            setBottomBarMessage(bottomBar, "No threads");
             renderer.requestRender();
             setTimeout(() => { refreshPager(); }, 1500);
           }
@@ -706,11 +815,12 @@ export async function runTui(
         case "prev-thread": {
           const prev = state.prevThread();
           if (prev !== null) {
+            savePrevPosition();
             state.cursorLine = prev;
             ensureCursorVisible();
             refreshPager();
           } else {
-            setBottomBarMessage(bottomBar, " No threads");
+            setBottomBarMessage(bottomBar, "No threads");
             renderer.requestRender();
             setTimeout(() => { refreshPager(); }, 1500);
           }
@@ -719,11 +829,12 @@ export async function runTui(
         case "next-unread": {
           const nextLine = state.nextUnreadThread();
           if (nextLine !== null) {
+            savePrevPosition();
             state.cursorLine = nextLine;
             ensureCursorVisible();
             refreshPager();
           } else {
-            setBottomBarMessage(bottomBar, " No unread replies");
+            setBottomBarMessage(bottomBar, "No unread replies");
             renderer.requestRender();
             setTimeout(() => { refreshPager(); }, 1500);
           }
@@ -732,16 +843,87 @@ export async function runTui(
         case "prev-unread": {
           const prevLine = state.prevUnreadThread();
           if (prevLine !== null) {
+            savePrevPosition();
             state.cursorLine = prevLine;
             ensureCursorVisible();
             refreshPager();
           } else {
-            setBottomBarMessage(bottomBar, " No unread replies");
+            setBottomBarMessage(bottomBar, "No unread replies");
+            renderer.requestRender();
+            setTimeout(() => { refreshPager(); }, 1500);
+          }
+          break;
+        }
+        case "next-h1":
+        case "next-h2":
+        case "next-h3": {
+          const level = parseInt(action.slice(-1));
+          const next = state.nextHeading(level);
+          if (next !== null) {
+            savePrevPosition();
+            state.cursorLine = next;
+            ensureCursorVisible();
+            refreshPager();
+          } else {
+            setBottomBarMessage(bottomBar, `No h${level} headings`);
             renderer.requestRender();
             setTimeout(() => { refreshPager(); }, 1500);
           }
           break;
         }
+        case "prev-h1":
+        case "prev-h2":
+        case "prev-h3": {
+          const level = parseInt(action.slice(-1));
+          const prev = state.prevHeading(level);
+          if (prev !== null) {
+            savePrevPosition();
+            state.cursorLine = prev;
+            ensureCursorVisible();
+            refreshPager();
+          } else {
+            setBottomBarMessage(bottomBar, `No h${level} headings`);
+            renderer.requestRender();
+            setTimeout(() => { refreshPager(); }, 1500);
+          }
+          break;
+        }
+        case "jump-back": {
+          // '' swaps between current position and last jump entry
+          if (jumpList.length > 1) {
+            const cur = state.cursorLine;
+            const prevIdx = jumpIndex > 0 ? jumpIndex - 1 : 0;
+            const target = jumpList[prevIdx];
+            // Record current position at our spot so '' can swap back
+            jumpList[jumpIndex] = cur;
+            jumpIndex = prevIdx;
+            state.cursorLine = Math.min(target, state.lineCount);
+            ensureCursorVisible();
+            refreshPager();
+          }
+          break;
+        }
+        case "screen-top": {
+          const topRow = pager.scrollBox.scrollTop;
+          savePrevPosition();
+          state.cursorLine = visualRowToSpecLine(topRow);
+          refreshPager();
+          break;
+        }
+        case "screen-middle": {
+          const midRow = pager.scrollBox.scrollTop + Math.floor(pageSize() / 2);
+          savePrevPosition();
+          state.cursorLine = visualRowToSpecLine(midRow);
+          refreshPager();
+          break;
+        }
+        case "screen-bottom": {
+          const botRow = pager.scrollBox.scrollTop + pageSize() - 1;
+          savePrevPosition();
+          state.cursorLine = visualRowToSpecLine(botRow);
+          refreshPager();
+          break;
+        }
         case "help":
           showHelpOverlay();
           break;

package/src/tui/comment-input.ts

@@ -168,8 +168,10 @@ function createThreadView(
   const dialog = createDialog({
     renderer,
     title,
-    width: "80%",
-    height: "85%",
+    width: "70%",
+    height: "80%",
+    top: "8%",
+    left: "15%",
     borderColor: theme.blue,
     onDismiss: onCancel,
     hints: insertHints,
@@ -220,18 +222,29 @@ function createThreadView(
     scrollBox.add(renderMessage(msg));
   }
 
-  // --- Separator ---
-  const sep = new TextRenderable(renderer, {
-    content: "\u2500".repeat(40),
+  // --- Layout: pack bottom elements into a single container ---
+  // Outside tmux, opentui's ScrollBox expands over intermediate siblings.
+  // Keeping exactly 2 direct children (ScrollBox + bottomPanel) avoids the issue,
+  // matching the pattern that works in help/thread-list dialogs.
+  dialog.container.remove(dialog.hintBox.id);
+  const bottomPanel = new BoxRenderable(renderer, {
+    width: "100%",
+    height: 6, // separator(1) + textarea(4) + hints(1)
+    flexShrink: 0,
+    flexGrow: 0,
+    flexDirection: "column",
+  });
+  const sep = new BoxRenderable(renderer, {
     width: "100%",
     height: 1,
-    fg: theme.backgroundElement,
-    wrapMode: "none",
+    flexShrink: 0,
+    border: ["top"],
+    borderColor: theme.border,
   });
-  dialog.container.add(sep);
-
-  // --- Textarea (visible in both modes, focused only in insert) ---
-  dialog.container.add(textarea);
+  bottomPanel.add(sep);
+  bottomPanel.add(textarea);
+  bottomPanel.add(dialog.hintBox);
+  dialog.container.add(bottomPanel);
 
   // --- Mode helpers (need dialog.setHints available) ---
   function enterInsert(): void {

package/src/tui/confirm.ts

@@ -31,10 +31,10 @@ export function createConfirm(opts: ConfirmOptions): ConfirmOverlay {
   const dialog = createDialog({
     renderer,
     title,
-    width: "50%",
+    width: "44%",
     height: 9,
-    top: "35%",
-    left: "25%",
+    top: "30%",
+    left: "28%",
     borderColor: theme.warning,
     onDismiss: onCancel,
     hints: CONFIRM_HINTS,

package/src/tui/help.ts

@@ -50,10 +50,10 @@ export function createHelp(opts: {
   const dialog = createDialog({
     renderer,
     title: "Help",
-    width: "60%",
-    height: Math.min(34, renderer.height - 2),
+    width: "64%",
+    height: Math.min(32, renderer.height - 4),
     top: "10%",
-    left: "20%",
+    left: "18%",
     borderColor: theme.info,
     onDismiss: onClose,
     hints: HELP_HINTS,
@@ -92,6 +92,12 @@ export function createHelp(opts: {
     "  Esc       Clear search",
     "  ]t/[t     Next/prev thread",
     "  ]r/[r     Next/prev unread",
+    "  ]1/[1     Next/prev h1 heading",
+    "  ]2/[2     Next/prev h2 heading",
+    "  ]3/[3     Next/prev h3 heading",
+    "  Ctrl+o/i  Jump list back/forward",
+    "  ''        Jump to previous position",
+    "  H/M/L     Screen top/middle/bottom",
   ]);
 
   addHelpSection(dialog.content, renderer, "Review", [
@@ -99,7 +105,7 @@ export function createHelp(opts: {
     "  r         Resolve thread (toggle)",
     "  R         Resolve all pending",
     "  dd        Delete thread",
-    "  t         List threads",
+    "  t         List threads (Ctrl+f to filter)",
     "  S         Submit for rewrite",
     "  A         Approve spec",
   ]);

package/src/tui/pager.ts

@@ -45,7 +45,7 @@ export function buildPagerContent(state: ReviewState, searchQuery?: string | nul
       if (isUnread) {
         indicator = "\u2588";
       } else if (thread.status === "resolved") {
-        indicator = "\u2713";
+        indicator = "=";
       } else {
         indicator = "\u258c";
       }
@@ -104,7 +104,7 @@ export function buildPagerNodes(lineNode: TextRenderable, state: ReviewState, se
         indicator = "\u2588"; // █ full block — unread reply
         indicatorColor = theme.yellow;
       } else if (thread.status === "resolved") {
-        indicator = "\u2713"; // ✓ resolved
+        indicator = "="; // resolved
         indicatorColor = theme.green;
       } else {
         indicator = "\u258c"; // ▌ half block — has thread
@@ -171,8 +171,8 @@ export function buildPagerNodes(lineNode: TextRenderable, state: ReviewState, se
         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)
+    } else if (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();
       const searchRegex = new RegExp(`(${escaped})`, caseSensitive ? "g" : "gi");

package/src/tui/spinner.ts

@@ -51,9 +51,11 @@ export function createSpinner(opts: {
   container.add(text);
 
   let frame = 0;
+  const startTime = Date.now();
   const spinInterval = setInterval(() => {
     frame = (frame + 1) % SPINNER_FRAMES.length;
-    text.content = `${SPINNER_FRAMES[frame]} ${message}`;
+    const elapsed = Math.floor((Date.now() - startTime) / 1000);
+    text.content = `${SPINNER_FRAMES[frame]} ${message} (${elapsed}s)`;
     renderer.requestRender();
   }, 80);
 

package/src/tui/status-bar.ts

@@ -60,18 +60,45 @@ export function buildTopBar(
     t.add(TextNodeRenderable.fromString("!! Spec changed externally", { fg: theme.red, attributes: TextAttributes.BOLD }));
   }
 
-  // Cursor position
+  // Cursor position + scroll percentage
+  const posLabel = state.cursorLine <= 1 ? "Top"
+    : state.cursorLine >= state.lineCount ? "Bot"
+    : `${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}`, { fg: theme.textMuted }));
+  t.add(TextNodeRenderable.fromString(`L${state.cursorLine}/${state.lineCount} ${posLabel}`, { fg: theme.textMuted }));
 }
 
+export type MessageIcon = "warn" | "success" | "info";
+
+const ICON_MAP: Record<MessageIcon, { symbol: string; fg: string }> = {
+  warn:    { symbol: "!", fg: theme.yellow! },
+  success: { symbol: "*", fg: theme.green! },
+  info:    { symbol: "-", fg: theme.blue! },
+};
+
 /**
- * Set a transient message on the bottom bar (using TextNodes, not .content).
+ * Set a transient message on the bottom bar.
+ * With icon: renders as " ⚠ │ message text"
+ * Without icon: renders as " message text"
  */
-export function setBottomBarMessage(bar: BottomBarComponents, message: string, fg?: string): void {
+export function setBottomBarMessage(
+  bar: BottomBarComponents,
+  message: string,
+  iconOrFg?: MessageIcon | string,
+): void {
   const t = bar.text;
   t.clear();
-  t.add(TextNodeRenderable.fromString(message, { fg: fg ?? theme.text }));
+
+  // Detect if it's an icon type or a raw fg color
+  const icon = iconOrFg && iconOrFg in ICON_MAP ? ICON_MAP[iconOrFg as MessageIcon] : null;
+  const fg = icon ? icon.fg : (iconOrFg as string | undefined) ?? theme.text;
+
+  if (icon) {
+    t.add(TextNodeRenderable.fromString(` ${icon.symbol} `, { fg: icon.fg }));
+    t.add(TextNodeRenderable.fromString(message, { fg: fg! }));
+  } else {
+    t.add(TextNodeRenderable.fromString(` ${message}`, { fg: fg! }));
+  }
 }
 
 /**

package/src/tui/thread-list.ts

@@ -24,6 +24,9 @@ export interface ThreadListOverlay {
 
 const MAX_PREVIEW_LENGTH = 50;
 
+type FilterMode = "all" | "active" | "resolved";
+const FILTER_CYCLE: FilterMode[] = ["all", "active", "resolved"];
+
 function previewText(thread: Thread): string {
   if (thread.messages.length === 0) return "(empty)";
   const first = thread.messages[0];
@@ -32,128 +35,179 @@ function previewText(thread: Thread): string {
   return text.slice(0, MAX_PREVIEW_LENGTH - 1) + "\u2026";
 }
 
+function filterThreads(threads: Thread[], mode: FilterMode): Thread[] {
+  switch (mode) {
+    case "active":
+      return threads.filter((t) => t.status === "open" || t.status === "pending");
+    case "resolved":
+      return threads.filter((t) => t.status === "resolved");
+    case "all":
+    default:
+      return threads;
+  }
+}
+
+function buildTitle(threads: Thread[], mode: FilterMode): string {
+  const activeCount = threads.filter(
+    (t) => t.status === "open" || t.status === "pending"
+  ).length;
+  const total = threads.length;
+  const label = mode === "all" ? "all" : mode;
+  return `Threads (${activeCount} active, ${total} total) [${label}]`;
+}
+
+function threadsToOptions(threads: Thread[]) {
+  return threads.map((t) => {
+    const icon = STATUS_ICONS[t.status];
+    return {
+      name: `${icon} #${t.id} line ${t.line}: ${previewText(t)}`,
+      description: `${t.status} - ${t.messages.length} message(s)`,
+      value: t.line,
+    };
+  });
+}
+
 /**
  * Create a thread list overlay showing all threads.
  * Select + Enter: jump to that thread's line.
+ * Ctrl+F: cycle filter (all → active → resolved).
  * Escape: cancel.
  */
 export function createThreadList(opts: ThreadListOptions): ThreadListOverlay {
   const { renderer, threads, onSelect, onCancel } = opts;
 
+  // Exclude outdated threads from the pool
   const allThreads = threads.filter(
     (t) => t.status === "open" || t.status === "pending" || t.status === "resolved"
   );
-  const activeCount = threads.filter(
-    (t) => t.status === "open" || t.status === "pending"
-  ).length;
+
+  let filterIndex = 0;
+  let currentFilter: FilterMode = FILTER_CYCLE[0];
+  let filtered = filterThreads(allThreads, currentFilter);
 
   const dialog = createDialog({
     renderer,
-    title: `Threads (${activeCount} active, ${allThreads.length} total)`,
-    width: "70%",
-    height: "60%",
-    top: "15%",
-    left: "15%",
+    title: buildTitle(allThreads, currentFilter),
+    width: "56%",
+    height: "50%",
+    top: "20%",
+    left: "22%",
     borderColor: theme.mauve,
     onDismiss: onCancel,
     hints: THREAD_LIST_HINTS,
   });
 
-  let keyHandler: ((key: KeyEvent) => void) | null = null;
-
-  if (allThreads.length === 0) {
-    const emptyMsg = new TextRenderable(renderer, {
-      content: "No threads. Press [Esc] to close.",
-      width: "100%",
-      height: 1,
-      fg: theme.textDim,
-      wrapMode: "none",
-    });
-    dialog.content.add(emptyMsg);
-  } else {
-    const selectOptions = allThreads.map((t) => {
-      const icon = STATUS_ICONS[t.status];
-      return {
-        name: `${icon} #${t.id} line ${t.line}: ${previewText(t)}`,
-        description: `${t.status} - ${t.messages.length} message(s)`,
-        value: t.line,
-      };
-    });
-
-    const select = new SelectRenderable(renderer, {
-      width: "100%",
-      flexGrow: 1,
-      options: selectOptions,
-      selectedIndex: 0,
-      backgroundColor: theme.backgroundPanel,
-      textColor: theme.text,
-      focusedBackgroundColor: theme.backgroundPanel,
-      focusedTextColor: theme.text,
-      selectedBackgroundColor: theme.backgroundElement,
-      selectedTextColor: "#f5c2e7",
-      descriptionColor: theme.textDim,
-      selectedDescriptionColor: theme.textMuted,
-      showDescription: true,
-      wrapSelection: true,
-    });
-
-    dialog.content.add(select);
+  const emptyMsg = new TextRenderable(renderer, {
+    content: "No threads. Press [Esc] to close.",
+    width: "100%",
+    height: 1,
+    fg: theme.textDim,
+    wrapMode: "none",
+    visible: filtered.length === 0,
+  });
+  dialog.content.add(emptyMsg);
+
+  const select = new SelectRenderable(renderer, {
+    width: "100%",
+    flexGrow: 1,
+    options: threadsToOptions(filtered),
+    selectedIndex: 0,
+    backgroundColor: theme.backgroundPanel,
+    textColor: theme.text,
+    focusedBackgroundColor: theme.backgroundPanel,
+    focusedTextColor: theme.text,
+    selectedBackgroundColor: theme.backgroundElement,
+    selectedTextColor: "#f5c2e7",
+    descriptionColor: theme.textDim,
+    selectedDescriptionColor: theme.textMuted,
+    showDescription: true,
+    wrapSelection: true,
+    visible: filtered.length > 0,
+  });
+  dialog.content.add(select);
 
+  if (filtered.length > 0) {
     setTimeout(() => {
       renderer.focusRenderable(select);
       renderer.requestRender();
     }, 0);
+  }
+
+  function applyFilter(): void {
+    filtered = filterThreads(allThreads, currentFilter);
+    dialog.container.title = ` ${buildTitle(allThreads, currentFilter)} `;
+    select.options = threadsToOptions(filtered);
+    select.visible = filtered.length > 0;
+    emptyMsg.visible = filtered.length === 0;
+    if (filtered.length === 0) {
+      emptyMsg.content = `No ${currentFilter === "all" ? "" : currentFilter + " "}threads. Press [Ctrl+f] to change filter.`;
+    }
+    if (filtered.length > 0) {
+      setTimeout(() => {
+        renderer.focusRenderable(select);
+        renderer.requestRender();
+      }, 0);
+    }
+    renderer.requestRender();
+  }
 
-    // SelectRenderable ITEM_SELECTED event
-    select.on(SelectRenderableEvents.ITEM_SELECTED, () => {
+  // SelectRenderable ITEM_SELECTED event
+  select.on(SelectRenderableEvents.ITEM_SELECTED, () => {
+    const selected = select.getSelectedOption();
+    if (selected && selected.value != null) {
+      onSelect(selected.value as number);
+    }
+  });
+
+  // Manual key handler — SelectRenderable focus is unreliable
+  const keyHandler = (key: KeyEvent) => {
+    if (key.name === "q") {
+      key.preventDefault();
+      key.stopPropagation();
+      onCancel();
+      return;
+    }
+    // Ctrl+F: cycle filter
+    if (key.ctrl && key.name === "f") {
+      key.preventDefault();
+      key.stopPropagation();
+      filterIndex = (filterIndex + 1) % FILTER_CYCLE.length;
+      currentFilter = FILTER_CYCLE[filterIndex];
+      applyFilter();
+      return;
+    }
+    if (filtered.length === 0) return;
+    if (key.name === "return" || key.name === "y") {
+      key.preventDefault();
+      key.stopPropagation();
       const selected = select.getSelectedOption();
       if (selected && selected.value != null) {
         onSelect(selected.value as number);
       }
-    });
-
-    // Manual key handler — SelectRenderable focus is unreliable
-    keyHandler = (key: KeyEvent) => {
-      if (key.name === "q") {
-        key.preventDefault();
-        key.stopPropagation();
-        onCancel();
-        return;
-      }
-      if (key.name === "return" || key.name === "y") {
-        key.preventDefault();
-        key.stopPropagation();
-        const selected = select.getSelectedOption();
-        if (selected && selected.value != null) {
-          onSelect(selected.value as number);
-        }
-        return;
-      }
-      if (key.name === "j" || key.name === "down") {
-        key.preventDefault();
-        key.stopPropagation();
-        select.moveDown();
-        renderer.requestRender();
-        return;
-      }
-      if (key.name === "k" || key.name === "up") {
-        key.preventDefault();
-        key.stopPropagation();
-        select.moveUp();
-        renderer.requestRender();
-        return;
-      }
-    };
-    renderer.keyInput.on("keypress", keyHandler);
-  }
+      return;
+    }
+    if (key.name === "j" || key.name === "down") {
+      key.preventDefault();
+      key.stopPropagation();
+      select.moveDown();
+      renderer.requestRender();
+      return;
+    }
+    if (key.name === "k" || key.name === "up") {
+      key.preventDefault();
+      key.stopPropagation();
+      select.moveUp();
+      renderer.requestRender();
+      return;
+    }
+  };
+  renderer.keyInput.on("keypress", keyHandler);
 
   return {
     container: dialog.container,
     cleanup() {
       dialog.cleanup();
-      if (keyHandler) {
-        renderer.keyInput.off("keypress", keyHandler);
-      }
+      renderer.keyInput.off("keypress", keyHandler);
     },
   };
 }

package/src/tui/ui/dialog.ts

@@ -23,6 +23,7 @@ export interface DialogOptions {
 export interface DialogComponents {
   container: BoxRenderable;
   content: ScrollBoxRenderable;
+  hintBox: BoxRenderable;
   hintText: TextRenderable;
   setHints: (hints: Hint[]) => void;
   cleanup: () => void;
@@ -102,5 +103,5 @@ export function createDialog(opts: DialogOptions): DialogComponents {
     renderer.keyInput.off("keypress", keyHandler);
   }
 
-  return { container, content, hintText, setHints, cleanup };
+  return { container, content, hintBox, hintText, setHints, cleanup };
 }

package/src/tui/ui/keymap.ts

@@ -37,6 +37,7 @@ export const THREAD_INSERT_HINTS: Hint[] = [
 export const THREAD_LIST_HINTS: Hint[] = [
   { key: "j/k", action: "navigate" },
   { key: "y/Enter", action: "jump" },
+  { key: "Ctrl+f", action: "filter" },
   { key: "q/Esc", action: "close" },
 ];
 

package/src/tui/ui/theme.ts

@@ -29,9 +29,9 @@ export const theme = {
 
 export const STATUS_ICONS: Record<string, string> = {
   open: "\u258c",     // ▌ half block
-  pending: "\u25cb",  // ○ circle
-  resolved: "\u2713", // ✓ checkmark
-  outdated: "\u223c", // ∼ tilde
+  pending: "\u2588",  // █ full block
+  resolved: "=",
+  outdated: "-",
 };
 
 export const SPLIT_BORDER = {