revspec 0.2.2 → 0.4.0

package/src/tui/app.ts

@@ -13,10 +13,10 @@ import { mergeJsonlIntoReview } from "../protocol/live-merge";
 import type { Thread } from "../protocol/types";
 import { ReviewState } from "../state/review-state";
 import { createLiveWatcher, type LiveWatcher } from "./live-watcher";
-import { buildPagerContent, createPager, togglePagerMode, ensureLineMode, type PagerComponents } from "./pager";
+import { buildPagerNodes, createPager, countExtraVisualLines, type PagerComponents } from "./pager";
 import {
-  buildTopBarText,
-  buildBottomBarText,
+  buildTopBar,
+  buildBottomBar,
   createTopBar,
   createBottomBar,
   type TopBarComponents,
@@ -28,11 +28,13 @@ import { createSearch } from "./search";
 import { createThreadList } from "./thread-list";
 import { createConfirm } from "./confirm";
 import { createHelp } from "./help";
+import { createKeybindRegistry, type KeyBinding } from "./ui/keybinds";
 
 export async function runTui(
   specFile: string,
   reviewPath: string,
-  draftPath: string
+  draftPath: string,
+  version?: string
 ): Promise<void> {
   // 1. Read spec file into lines
   const specContent = readFileSync(specFile, "utf8");
@@ -99,21 +101,20 @@ export async function runTui(
     useMouse: false,
   });
 
-  // 6. Build layout: top bar, pager, bottom bar in a column
+  // 6. Build layout (opencode pattern): flex column, scrollbox fills middle
   const rootBox = new BoxRenderable(renderer, {
-    width: "100%",
-    height: "100%",
+    flexGrow: 1,
     flexDirection: "column",
+    width: "100%",
   });
 
   const topBar: TopBarComponents = createTopBar(renderer);
   const pager: PagerComponents = createPager(renderer);
   const bottomBar: BottomBarComponents = createBottomBar(renderer);
 
-  rootBox.add(topBar.bar);
+  rootBox.add(topBar.box);
   rootBox.add(pager.scrollBox);
-  rootBox.add(bottomBar.bar);
-
+  rootBox.add(bottomBar.box);
   renderer.root.add(rootBox);
 
   // 7. Initial render
@@ -126,13 +127,9 @@ export async function runTui(
       }
     } catch {}
 
-    if (pager.mode === "line") {
-      pager.lineNode.content = buildPagerContent(state, searchQuery, state.unreadThreadIds);
-    } else {
-      pager.markdownNode.content = state.specLines.join("\n");
-    }
-    topBar.bar.content = buildTopBarText(specFile, state, state.unreadCount(), specMtimeChanged, pager.mode);
-    bottomBar.bar.content = buildBottomBarText(commandBuffer);
+    buildPagerNodes(pager.lineNode, state, searchQuery, state.unreadThreadIds);
+    buildTopBar(topBar, specFile, state, state.unreadCount(), specMtimeChanged);
+    buildBottomBar(bottomBar, commandBuffer);
     renderer.requestRender();
   }
 
@@ -142,16 +139,6 @@ export async function runTui(
   // Command mode state
   let commandBuffer: string | null = null;
 
-  // Bracket-pending state for ]t / [t / ]r / [r navigation
-  let bracketPending: "]" | "[" | null = null;
-  let bracketPendingTimer: ReturnType<typeof setTimeout> | null = null;
-
-  // Delete-pending state: first `d` sets timer, second `d` within 500ms executes
-  let deletePendingTimer: ReturnType<typeof setTimeout> | null = null;
-
-  // g-pending state: first `g` sets timer, second `g` within 500ms goes to top
-  let gPendingTimer: ReturnType<typeof setTimeout> | null = null;
-
   // Overlay state — when an overlay is active, normal keybindings are blocked.
   // The overlay's own key handlers manage its lifecycle.
   type ActiveOverlay = {
@@ -203,15 +190,16 @@ export async function runTui(
     // Signal to watch process that session has ended
     appendEvent(jsonlPath, { type: "session-end", author: "reviewer", ts: Date.now() });
     liveWatcher.stop();
+    keybinds.destroy();
     renderer.destroy();
     resolve();
   }
 
   // Helper: scroll pager to ensure cursor line is visible
   function ensureCursorVisible(): void {
-    // Each line in the pager is 1 row of text.
-    // The cursor line index (0-based) in the pager is (state.cursorLine - 1).
-    const cursorRow = state.cursorLine - 1;
+    // Map spec line to visual row, accounting for table border extra lines
+    const extra = countExtraVisualLines(state.specLines, state.cursorLine - 1);
+    const cursorRow = state.cursorLine - 1 + extra;
     const viewportHeight = Math.max(1, renderer.height - 2); // minus top + bottom bar
 
     const currentScroll = pager.scrollBox.scrollTop;
@@ -233,7 +221,7 @@ export async function runTui(
     if (cmd === "w") {
       // Merge JSONL -> JSON, stay open
       doMerge();
-      bottomBar.bar.content = " \u2714 Merged to review JSON";
+      bottomBar.text.content = " \u2714 Merged to review JSON";
       renderer.requestRender();
       setTimeout(() => { refreshPager(); }, 1200);
       return "stay";
@@ -246,19 +234,21 @@ export async function runTui(
     if (cmd === "q") {
       // Exit only if merged (no pending changes)
       if (hasPendingChanges()) {
-        bottomBar.bar.content = " Unmerged changes. Use :w to save or :q! to discard";
+        bottomBar.text.content = " Unmerged changes. Use :w to save or :q! to discard";
         renderer.requestRender();
         setTimeout(() => { refreshPager(); }, 2000);
         return "stay";
       }
       appendEvent(jsonlPath, { type: "session-end", author: "reviewer", ts: Date.now() });
       liveWatcher.stop();
+      keybinds.destroy();
       return "exit";
     }
     if (cmd === "q!") {
       // Exit without merging
       appendEvent(jsonlPath, { type: "session-end", author: "reviewer", ts: Date.now() });
       liveWatcher.stop();
+      keybinds.destroy();
       return "exit";
     }
     return "stay"; // unknown command, ignore
@@ -354,6 +344,7 @@ export async function runTui(
   function showHelpOverlay(): void {
     const overlay = createHelp({
       renderer,
+      version: version ?? "?",
       onClose: () => {
         dismissOverlay();
       },
@@ -379,6 +370,35 @@ export async function runTui(
     return null;
   }
 
+  // --- Keybind registry ---
+
+  const bindings: KeyBinding[] = [
+    { key: "j", action: "cursor-down" },
+    { key: "down", action: "cursor-down" },
+    { key: "k", action: "cursor-up" },
+    { key: "up", action: "cursor-up" },
+    { key: "C-d", action: "half-page-down" },
+    { key: "C-u", action: "half-page-up" },
+    { key: "G", action: "goto-bottom" },
+    { key: "gg", action: "goto-top" },
+    { key: "n", action: "search-next" },
+    { key: "N", action: "search-prev" },
+    { key: "c", action: "comment" },
+    { key: "l", action: "thread-list" },
+    { key: "r", action: "resolve" },
+    { key: "R", action: "resolve-all" },
+    { key: "dd", action: "delete-draft" },
+    { key: "a", action: "approve" },
+    { key: "]t", action: "next-thread" },
+    { key: "[t", action: "prev-thread" },
+    { key: "]r", action: "next-unread" },
+    { key: "[r", action: "prev-unread" },
+    { key: "?", action: "help" },
+    { key: "/", action: "search" },
+    { key: ":", action: "command-mode" },
+  ];
+  const keybinds = createKeybindRegistry(bindings);
+
   refreshPager();
   renderer.start();
 
@@ -454,230 +474,140 @@ export async function runTui(
       }
 
       // Normal mode keybindings
-      switch (key.name) {
-        case "j":
-        case "down": {
-          if (pager.mode === "markdown") {
-            pager.scrollBox.scrollBy(1);
-            renderer.requestRender();
-          } else {
-            if (state.cursorLine < state.lineCount) {
-              state.cursorLine++;
-              ensureCursorVisible();
-              refreshPager();
-            }
-          }
-          break;
+      const action = keybinds.match(key);
+
+      // Show pending sequence hint
+      if (!action) {
+        const p = keybinds.pending();
+        if (p) {
+          bottomBar.text.content = ` ${p}`;
+          renderer.requestRender();
         }
-        case "k":
-        case "up": {
-          if (pager.mode === "markdown") {
-            pager.scrollBox.scrollBy(-1);
-            renderer.requestRender();
-          } else {
-            if (state.cursorLine > 1) {
-              state.cursorLine--;
-              ensureCursorVisible();
-              refreshPager();
-            }
+        return;
+      }
+
+      switch (action) {
+        case "cursor-down":
+          if (state.cursorLine < state.lineCount) {
+            state.cursorLine++;
+            ensureCursorVisible();
+            refreshPager();
           }
           break;
-        }
-        case "d": {
-          // Ctrl+D — half page down
-          if (key.ctrl) {
-            if (deletePendingTimer) { clearTimeout(deletePendingTimer); deletePendingTimer = null; }
-            const half = Math.max(1, Math.floor(pageSize() / 2));
-            if (pager.mode === "markdown") {
-              pager.scrollBox.scrollBy(half);
-              renderer.requestRender();
-            } else {
-              state.cursorLine = Math.min(state.cursorLine + half, state.lineCount);
-              ensureCursorVisible();
-              refreshPager();
-            }
-          } else {
-            // d without ctrl — delete draft comment (dd = double-tap within 500ms)
-            ensureLineMode(pager);
+        case "cursor-up":
+          if (state.cursorLine > 1) {
+            state.cursorLine--;
+            ensureCursorVisible();
             refreshPager();
-            const thread = state.threadAtLine(state.cursorLine);
-            if (!thread) break;
-            if (deletePendingTimer) {
-              // Second d within 500ms — execute delete
-              clearTimeout(deletePendingTimer);
-              deletePendingTimer = null;
-              const hadReviewerMsg = thread.messages.some((m) => m.author === "reviewer");
-              if (hadReviewerMsg) {
-                state.deleteLastDraftMessage(thread.id);
-                appendEvent(jsonlPath, { type: "delete", threadId: thread.id, author: "reviewer", ts: Date.now() });
-                refreshPager();
-                bottomBar.bar.content = " \u2714 Deleted draft comment";
-                renderer.requestRender();
-                setTimeout(() => { refreshPager(); }, 1500);
-              } else {
-                bottomBar.bar.content = " No reviewer message to delete";
-                renderer.requestRender();
-                setTimeout(() => { refreshPager(); }, 1500);
-              }
-            } else {
-              // First d — show hint and start timer
-              bottomBar.bar.content = " Press d again to delete";
-              renderer.requestRender();
-              deletePendingTimer = setTimeout(() => {
-                deletePendingTimer = null;
-                refreshPager();
-              }, 500);
-            }
           }
           break;
+        case "half-page-down": {
+          const half = Math.max(1, Math.floor(pageSize() / 2));
+          state.cursorLine = Math.min(state.cursorLine + half, state.lineCount);
+          ensureCursorVisible();
+          refreshPager();
+          break;
         }
-        case "u": {
-          // Ctrl+U — half page up
-          if (key.ctrl) {
-            const half = Math.max(1, Math.floor(pageSize() / 2));
-            if (pager.mode === "markdown") {
-              pager.scrollBox.scrollBy(-half);
-              renderer.requestRender();
-            } else {
-              state.cursorLine = Math.max(state.cursorLine - half, 1);
-              ensureCursorVisible();
-              refreshPager();
-            }
-          }
+        case "half-page-up": {
+          const half = Math.max(1, Math.floor(pageSize() / 2));
+          state.cursorLine = Math.max(state.cursorLine - half, 1);
+          ensureCursorVisible();
+          refreshPager();
           break;
         }
-        case "n": {
-          if (!key.shift) {
-            if (searchQuery) {
-              const match = findNextMatch(state.specLines, searchQuery, state.cursorLine, 1);
-              if (match !== null) {
-                state.cursorLine = match;
-                ensureCursorVisible();
-              }
-            } else {
-              bottomBar.bar.content = " No active search \u2014 use / to search";
-              renderer.requestRender();
-              setTimeout(() => { refreshPager(); }, 1500);
+        case "goto-bottom":
+          state.cursorLine = state.lineCount;
+          ensureCursorVisible();
+          refreshPager();
+          break;
+        case "goto-top":
+          state.cursorLine = 1;
+          ensureCursorVisible();
+          refreshPager();
+          break;
+        case "search-next":
+          if (searchQuery) {
+            const match = findNextMatch(state.specLines, searchQuery, state.cursorLine, 1);
+            if (match !== null) {
+              state.cursorLine = match;
+              ensureCursorVisible();
             }
           } else {
-            // Shift+N = prev search match
-            if (searchQuery) {
-              const match = findNextMatch(state.specLines, searchQuery, state.cursorLine, -1);
-              if (match !== null) {
-                state.cursorLine = match;
-                ensureCursorVisible();
-              }
-            } else {
-              bottomBar.bar.content = " No active search \u2014 use / to search";
-              renderer.requestRender();
-              setTimeout(() => { refreshPager(); }, 1500);
-            }
+            bottomBar.text.content = " No active search \u2014 use / to search";
+            renderer.requestRender();
+            setTimeout(() => { refreshPager(); }, 1500);
           }
           refreshPager();
           break;
-        }
-        case "m": {
-          // Toggle markdown / line mode with scroll position sync
-          const wasMarkdown = pager.mode === "markdown";
-          togglePagerMode(pager);
-          if (wasMarkdown) {
-            // Markdown -> Line: sync scroll position to cursor
-            state.cursorLine = Math.max(1, pager.scrollBox.scrollTop + 1);
-            refreshPager();
-            ensureCursorVisible();
+        case "search-prev":
+          if (searchQuery) {
+            const match = findNextMatch(state.specLines, searchQuery, state.cursorLine, -1);
+            if (match !== null) {
+              state.cursorLine = match;
+              ensureCursorVisible();
+            }
           } else {
-            // Line -> Markdown: approximate scroll to cursor position
-            refreshPager();
-            pager.scrollBox.scrollTo(state.cursorLine - 1);
+            bottomBar.text.content = " No active search \u2014 use / to search";
             renderer.requestRender();
+            setTimeout(() => { refreshPager(); }, 1500);
           }
-          break;
-        }
-        case "c": {
-          // Comment: new or reply — auto-switch to line mode
-          ensureLineMode(pager);
           refreshPager();
+          break;
+        case "comment":
           showCommentInput();
           break;
-        }
-        case "l": {
-          // Thread list
-          ensureLineMode(pager);
-          refreshPager();
+        case "thread-list":
           showThreadListOverlay();
           break;
-        }
-        case "r": {
-          ensureLineMode(pager);
-          refreshPager();
-          if (!key.shift) {
-            // Resolve thread at cursor
-            const thread = state.threadAtLine(state.cursorLine);
-            if (thread) {
-              const wasResolved = thread.status === "resolved";
-              state.resolveThread(thread.id);
-              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}`;
-              bottomBar.bar.content = msg;
-              renderer.requestRender();
-              setTimeout(() => { refreshPager(); }, 1500);
-            }
-          } else {
-            // Shift+R = resolve all pending
-            const { pending } = state.activeThreadCount();
-            const pendingThreads = state.threads.filter(t => t.status === "pending");
-            state.resolveAllPending();
-            for (const t of pendingThreads) {
-              appendEvent(jsonlPath, { type: "resolve", threadId: t.id, author: "reviewer", ts: Date.now() });
-            }
+        case "resolve": {
+          const thread = state.threadAtLine(state.cursorLine);
+          if (thread) {
+            const wasResolved = thread.status === "resolved";
+            state.resolveThread(thread.id);
+            state.markRead(thread.id);
+            appendEvent(jsonlPath, { type: wasResolved ? "unresolve" : "resolve", threadId: thread.id, author: "reviewer", ts: Date.now() });
             refreshPager();
-            bottomBar.bar.content = ` \u2714 Resolved ${pending} pending thread(s)`;
+            const msg = wasResolved
+              ? ` \u21a9 Reopened thread #${thread.id}`
+              : ` \u2714 Resolved thread #${thread.id}`;
+            bottomBar.text.content = msg;
             renderer.requestRender();
             setTimeout(() => { refreshPager(); }, 1500);
           }
           break;
         }
-        case "g": {
-          if (key.shift) {
-            // G (shift+g) — go to last line / scroll to bottom
-            if (pager.mode === "markdown") {
-              pager.scrollBox.scrollTo(pager.scrollBox.scrollHeight);
-              renderer.requestRender();
-            } else {
-              state.cursorLine = state.lineCount;
-              ensureCursorVisible();
-              refreshPager();
-            }
+        case "resolve-all": {
+          const { pending } = state.activeThreadCount();
+          const pendingThreads = state.threads.filter(t => t.status === "pending");
+          state.resolveAllPending();
+          for (const t of pendingThreads) {
+            appendEvent(jsonlPath, { type: "resolve", threadId: t.id, author: "reviewer", ts: Date.now() });
+          }
+          refreshPager();
+          bottomBar.text.content = ` \u2714 Resolved ${pending} pending thread(s)`;
+          renderer.requestRender();
+          setTimeout(() => { refreshPager(); }, 1500);
+          break;
+        }
+        case "delete-draft": {
+          const thread = state.threadAtLine(state.cursorLine);
+          if (!thread) break;
+          const hadReviewerMsg = thread.messages.some((m) => m.author === "reviewer");
+          if (hadReviewerMsg) {
+            state.deleteLastDraftMessage(thread.id);
+            appendEvent(jsonlPath, { type: "delete", threadId: thread.id, author: "reviewer", ts: Date.now() });
+            refreshPager();
+            bottomBar.text.content = " \u2714 Deleted draft comment";
+            renderer.requestRender();
+            setTimeout(() => { refreshPager(); }, 1500);
           } else {
-            // g — first of gg sequence
-            if (gPendingTimer) {
-              // Second g within 500ms — go to first line / scroll to top
-              clearTimeout(gPendingTimer);
-              gPendingTimer = null;
-              if (pager.mode === "markdown") {
-                pager.scrollBox.scrollTo(0);
-                renderer.requestRender();
-              } else {
-                state.cursorLine = 1;
-                ensureCursorVisible();
-                refreshPager();
-              }
-            } else {
-              gPendingTimer = setTimeout(() => {
-                gPendingTimer = null;
-              }, 500);
-            }
+            bottomBar.text.content = " No reviewer message to delete";
+            renderer.requestRender();
+            setTimeout(() => { refreshPager(); }, 1500);
           }
           break;
         }
-        case "a": {
-          // Approve
-          ensureLineMode(pager);
-          refreshPager();
+        case "approve":
           if (state.canApprove()) {
             const confirmOverlay = createConfirm({
               renderer,
@@ -692,105 +622,63 @@ export async function runTui(
               },
             });
             showOverlay(confirmOverlay);
-            return;
           } else {
-            // Show why approval is blocked
             const { open, pending } = state.activeThreadCount();
             const total = open + pending;
-            const msg =
-              total === 0
-                ? "No threads to approve"
-                : `${total} thread${total !== 1 ? "s" : ""} still open/pending`;
-            bottomBar.bar.content = ` \u26a0  ${msg}`;
+            const msg = total === 0
+              ? "No threads to approve"
+              : `${total} thread${total !== 1 ? "s" : ""} still open/pending`;
+            bottomBar.text.content = ` \u26a0  ${msg}`;
             renderer.requestRender();
-            setTimeout(() => {
-              refreshPager();
-            }, 2000);
+            setTimeout(() => { refreshPager(); }, 2000);
           }
           break;
-        }
-        default: {
-          // Handle bracket-pending sequences (]t / [t / ]r / [r)
-          if (bracketPending !== null) {
-            const pending = bracketPending;
-            bracketPending = null;
-            if (bracketPendingTimer) { clearTimeout(bracketPendingTimer); bracketPendingTimer = null; }
-            if (key.name === "t" || key.sequence === "t") {
-              if (pending === "]") {
-                const next = state.nextActiveThread();
-                if (next !== null) {
-                  state.cursorLine = next;
-                  ensureCursorVisible();
-                  refreshPager();
-                }
-              } else {
-                const prev = state.prevActiveThread();
-                if (prev !== null) {
-                  state.cursorLine = prev;
-                  ensureCursorVisible();
-                  refreshPager();
-                }
-              }
-            } else if (key.name === "r" || key.sequence === "r") {
-              if (pending === "]") {
-                const nextLine = state.nextUnreadThread();
-                if (nextLine !== null) {
-                  state.cursorLine = nextLine;
-                  ensureCursorVisible();
-                  refreshPager();
-                }
-              } else {
-                const prevLine = state.prevUnreadThread();
-                if (prevLine !== null) {
-                  state.cursorLine = prevLine;
-                  ensureCursorVisible();
-                  refreshPager();
-                }
-              }
-            }
-            refreshPager(); // clear the bracket hint
-            break;
-          }
-          // Check for "]" or "[" to start bracket sequence
-          if (key.sequence === "]") {
-            bracketPending = "]";
-            bottomBar.bar.content = " ]...";
-            renderer.requestRender();
-            bracketPendingTimer = setTimeout(() => {
-              bracketPending = null;
-              bracketPendingTimer = null;
-              refreshPager();
-            }, 500);
-            break;
-          }
-          if (key.sequence === "[") {
-            bracketPending = "[";
-            bottomBar.bar.content = " [...";
-            renderer.requestRender();
-            bracketPendingTimer = setTimeout(() => {
-              bracketPending = null;
-              bracketPendingTimer = null;
-              refreshPager();
-            }, 500);
-            break;
+        case "next-thread": {
+          const next = state.nextActiveThread();
+          if (next !== null) {
+            state.cursorLine = next;
+            ensureCursorVisible();
+            refreshPager();
           }
-          // Check for "?" to show help overlay
-          if (key.sequence === "?") {
-            showHelpOverlay();
-            break;
+          break;
+        }
+        case "prev-thread": {
+          const prev = state.prevActiveThread();
+          if (prev !== null) {
+            state.cursorLine = prev;
+            ensureCursorVisible();
+            refreshPager();
           }
-          // Check for "/" to enter search mode
-          if (key.sequence === "/") {
-            showSearchOverlay();
-            break;
+          break;
+        }
+        case "next-unread": {
+          const nextLine = state.nextUnreadThread();
+          if (nextLine !== null) {
+            state.cursorLine = nextLine;
+            ensureCursorVisible();
+            refreshPager();
           }
-          // Check for ":" to enter command mode
-          if (key.sequence === ":") {
-            commandBuffer = "";
+          break;
+        }
+        case "prev-unread": {
+          const prevLine = state.prevUnreadThread();
+          if (prevLine !== null) {
+            state.cursorLine = prevLine;
+            ensureCursorVisible();
             refreshPager();
           }
           break;
         }
+        case "help":
+          showHelpOverlay();
+          break;
+        case "search":
+          showSearchOverlay();
+          break;
+        case "command-mode":
+          commandBuffer = "";
+          refreshPager();
+          break;
       }
     });
   });