revspec 0.3.0 → 0.5.0

package/src/tui/comment-input.ts

@@ -2,12 +2,12 @@ import {
   BoxRenderable,
   TextRenderable,
   TextareaRenderable,
-  ScrollBoxRenderable,
   type CliRenderer,
   type KeyEvent,
 } from "@opentui/core";
 import type { Thread, Message } from "../protocol/types";
-import { theme } from "./theme";
+import { theme } from "./ui/theme";
+import { createDialog } from "./ui/dialog";
 
 export interface CommentInputOptions {
   renderer: CliRenderer;
@@ -42,30 +42,140 @@ function createThreadView(
   onResolve: () => void,
   onCancel: () => void,
 ): CommentInputOverlay {
-  const container = new BoxRenderable(renderer, {
-    position: "absolute",
-    top: "5%",
-    left: "10%",
+  const title = thread.id
+    ? `Thread #${thread.id} (line ${line})`
+    : `New comment on line ${line}`;
+
+  const normalHints = [
+    { key: "NORMAL", action: "" },
+    { key: "c", action: "reply" },
+    { key: "r", action: "resolve" },
+    { key: "Esc/q", action: "close" },
+  ];
+  const insertHints = [
+    { key: "INSERT", action: "" },
+    { key: "Tab", action: "send" },
+    { key: "Esc", action: "back" },
+  ];
+
+  // --- State ---
+  let mode: "normal" | "insert" = "insert";
+
+  // Build the textarea now (we need it in the key handler closure)
+  const textarea = new TextareaRenderable(renderer, {
+    width: "100%",
+    height: 4,
+    flexGrow: 0,
+    flexShrink: 0,
+    backgroundColor: theme.backgroundElement,
+    textColor: theme.textDim,
+    focusedBackgroundColor: theme.backgroundPanel,
+    focusedTextColor: theme.text,
+    wrapMode: "word",
+    placeholder: "Press c to reply...",
+    placeholderColor: theme.textDim,
+    initialValue: "",
+  });
+
+  // Register our comprehensive key handler FIRST (before createDialog) so it
+  // fires before the dialog's Esc handler and can stopPropagation in insert mode.
+  const keyHandler = (key: KeyEvent) => {
+    if (mode === "insert") {
+      // --- INSERT MODE ---
+      if (key.name === "escape") {
+        key.preventDefault();
+        key.stopPropagation();
+        enterNormal();
+        return;
+      }
+      if (key.name === "tab") {
+        key.preventDefault();
+        key.stopPropagation();
+        const text = textarea.plainText.trim();
+        if (text.length === 0) return;
+        onSubmit(text);
+        appendToConversation({ author: "reviewer", text, ts: Date.now() });
+        textarea.selectAll();
+        textarea.deleteChar();
+        enterNormal();
+        return;
+      }
+      // All other keys: let textarea handle them (don't preventDefault)
+      return;
+    }
+
+    // --- NORMAL MODE (textarea blurred, all keys are ours) ---
+    key.preventDefault();
+    key.stopPropagation();
+
+    switch (key.name) {
+      case "escape":
+      case "q":
+        onCancel();
+        return;
+
+      case "c":
+        enterInsert();
+        return;
+
+      case "r":
+        onResolve();
+        return;
+
+      case "j":
+      case "down":
+        scrollBox.scrollBy({ x: 0, y: 1 });
+        renderer.requestRender();
+        return;
+
+      case "k":
+      case "up":
+        scrollBox.scrollBy({ x: 0, y: -1 });
+        renderer.requestRender();
+        return;
+
+      case "d":
+        if (key.ctrl) {
+          scrollBox.scrollBy({ x: 0, y: 5 });
+          renderer.requestRender();
+        }
+        return;
+
+      case "u":
+        if (key.ctrl) {
+          scrollBox.scrollBy({ x: 0, y: -5 });
+          renderer.requestRender();
+        }
+        return;
+
+      case "g":
+        if (key.shift) {
+          // G = go to bottom
+          scrollBox.scrollTo(scrollBox.scrollHeight);
+          renderer.requestRender();
+        }
+        // TODO: gg = go to top (needs double-tap tracking)
+        return;
+    }
+  };
+
+  renderer.keyInput.on("keypress", keyHandler);
+
+  // Now create the dialog (its Esc handler registers after ours)
+  // Pass no-op onDismiss — we handle all keys ourselves above.
+  const dialog = createDialog({
+    renderer,
+    title,
     width: "80%",
     height: "85%",
-    zIndex: 100,
-    backgroundColor: theme.base,
-    border: true,
-    borderStyle: "single",
-    borderColor: theme.borderComment,
-    title: thread.id ? ` Thread #${thread.id} (line ${line}) ` : ` New comment on line ${line} `,
-    flexDirection: "column",
-    padding: 1,
+    borderColor: theme.blue,
+    onDismiss: onCancel,
+    hints: insertHints,
   });
 
-  // --- Top: scrollable conversation history ---
-  const scrollBox = new ScrollBoxRenderable(renderer, {
-    width: "100%",
-    flexGrow: 1,
-    flexShrink: 1,
-    scrollY: true,
-    scrollX: false,
-  });
+
+  // --- Scrollable conversation history ---
+  const scrollBox = dialog.content;
 
   function renderMessage(msg: Message): BoxRenderable {
     const isReviewer = msg.author === "reviewer";
@@ -87,7 +197,7 @@ function createThreadView(
       content: tsStr ? `${label}  ${tsStr}` : label,
       width: "100%",
       height: 1,
-      fg: theme.subtext,
+      fg: theme.textMuted,
       wrapMode: "none",
     });
     msgBox.add(header);
@@ -107,64 +217,32 @@ function createThreadView(
   for (const msg of thread.messages) {
     scrollBox.add(renderMessage(msg));
   }
-  container.add(scrollBox);
 
   // --- Separator ---
   const sep = new TextRenderable(renderer, {
     content: "\u2500".repeat(40),
     width: "100%",
     height: 1,
-    fg: theme.surface1,
+    fg: theme.backgroundElement,
     wrapMode: "none",
   });
-  container.add(sep);
+  dialog.container.add(sep);
 
-  // --- Bottom: textarea (visible in both modes, focused only in insert) ---
-  const textarea = new TextareaRenderable(renderer, {
-    width: "100%",
-    height: 4,
-    flexGrow: 0,
-    flexShrink: 0,
-    backgroundColor: theme.surface1,
-    textColor: theme.overlay,
-    focusedBackgroundColor: theme.surface0,
-    focusedTextColor: theme.text,
-    wrapMode: "word",
-    placeholder: "Press c to reply...",
-    placeholderColor: theme.overlay,
-    initialValue: "",
-  });
-  container.add(textarea);
-
-  // --- Hint bar (changes with mode) ---
-  const hintNormal = " [c] reply  [r] resolve  [Esc] close";
-  const hintInsert = " [Tab] send  [Esc] back";
-
-  const hint = new TextRenderable(renderer, {
-    content: hintInsert,
-    width: "100%",
-    height: 1,
-    fg: theme.hintFg,
-    bg: theme.hintBg,
-    wrapMode: "none",
-    truncate: true,
-  });
-  container.add(hint);
-
-  // --- State ---
-  let mode: "normal" | "insert" = "insert";
+  // --- Textarea (visible in both modes, focused only in insert) ---
+  dialog.container.add(textarea);
 
+  // --- Mode helpers (need dialog.setHints available) ---
   function enterInsert(): void {
     mode = "insert";
     textarea.focus();
-    hint.content = hintInsert;
+    dialog.setHints(insertHints);
     renderer.requestRender();
   }
 
   function enterNormal(): void {
     mode = "normal";
     textarea.blur();
-    hint.content = hintNormal;
+    dialog.setHints(normalHints);
     renderer.requestRender();
   }
 
@@ -192,89 +270,13 @@ function createThreadView(
     }, 50);
   }
 
-  const keyHandler = (key: KeyEvent) => {
-    if (mode === "insert") {
-      // --- INSERT MODE ---
-      if (key.name === "escape") {
-        key.preventDefault(); key.stopPropagation();
-        enterNormal();
-        return;
-      }
-      if (key.name === "tab") {
-        key.preventDefault(); key.stopPropagation();
-        const text = textarea.plainText.trim();
-        if (text.length === 0) return;
-        onSubmit(text);
-        appendToConversation({ author: "reviewer", text, ts: Date.now() });
-        textarea.selectAll();
-        textarea.deleteChar();
-        enterNormal();
-        return;
-      }
-      // All other keys: let textarea handle them (don't preventDefault)
-      return;
-    }
-
-    // --- NORMAL MODE (textarea blurred, all keys are ours) ---
-    key.preventDefault(); key.stopPropagation();
-
-    switch (key.name) {
-      case "escape":
-      case "q":
-        onCancel();
-        return;
-
-      case "c":
-        enterInsert();
-        return;
-
-      case "r":
-        onResolve();
-        return;
-
-      case "j":
-      case "down":
-        scrollBox.scrollBy({ x: 0, y: 1 });
-        renderer.requestRender();
-        return;
-
-      case "k":
-      case "up":
-        scrollBox.scrollBy({ x: 0, y: -1 });
-        renderer.requestRender();
-        return;
-
-      case "d":
-        if (key.ctrl) {
-          // Use same scrollBy as j/k, just more lines
-          scrollBox.scrollBy({ x: 0, y: 5 });
-          renderer.requestRender();
-        }
-        return;
-
-      case "u":
-        if (key.ctrl) {
-          scrollBox.scrollBy({ x: 0, y: -5 });
-          renderer.requestRender();
-        }
-        return;
-
-      case "g":
-        if (key.shift) {
-          // G = go to bottom
-          scrollBox.scrollTo(scrollBox.scrollHeight);
-          renderer.requestRender();
-        }
-        // TODO: gg = go to top (needs double-tap tracking)
-        return;
-    }
-  };
-
-  renderer.keyInput.on("keypress", keyHandler);
-
   return {
-    container,
-    cleanup() { renderer.keyInput.off("keypress", keyHandler); textarea.destroy(); },
+    container: dialog.container,
+    cleanup() {
+      renderer.keyInput.off("keypress", keyHandler);
+      dialog.cleanup();
+      textarea.destroy();
+    },
     threadId: thread.id,
     addMessage(msg: Message) { appendToConversation(msg); },
   };

package/src/tui/confirm.ts

@@ -1,20 +1,21 @@
 import {
-  BoxRenderable,
   TextRenderable,
   type CliRenderer,
   type KeyEvent,
 } from "@opentui/core";
-import { theme } from "./theme";
+import { theme } from "./ui/theme";
+import { createDialog } from "./ui/dialog";
 
 export interface ConfirmOptions {
   renderer: CliRenderer;
   message: string;
+  title?: string;
   onConfirm: () => void;
   onCancel: () => void;
 }
 
 export interface ConfirmOverlay {
-  container: BoxRenderable;
+  container: import("@opentui/core").BoxRenderable;
   cleanup: () => void;
 }
 
@@ -24,70 +25,55 @@ export interface ConfirmOverlay {
  * y → confirm, n/Esc → cancel
  */
 export function createConfirm(opts: ConfirmOptions): ConfirmOverlay {
-  const { renderer, message, onConfirm, onCancel } = opts;
+  const { renderer, message, title = "Confirm", onConfirm, onCancel } = opts;
 
-  // Centered dialog
-  const container = new BoxRenderable(renderer, {
-    position: "absolute",
+  const dialog = createDialog({
+    renderer,
+    title,
+    width: "50%",
+    height: 9,
     top: "35%",
     left: "25%",
-    width: "50%",
-    height: 7,
-    zIndex: 100,
-    backgroundColor: theme.base,
-    border: true,
-    borderStyle: "single",
-    borderColor: theme.borderConfirm,
-    title: " Confirm ",
-    flexDirection: "column",
-    padding: 1,
-    alignItems: "center",
-    justifyContent: "center",
+    borderColor: theme.warning,
+    onDismiss: onCancel,
+    hints: [
+      { key: "y", action: "yes" },
+      { key: "n/Esc", action: "no" },
+    ],
   });
 
   const msgText = new TextRenderable(renderer, {
     content: message,
     width: "100%",
-    height: 1,
     fg: theme.text,
-    wrapMode: "none",
-    truncate: true,
+    wrapMode: "word",
   });
 
-  const hint = new TextRenderable(renderer, {
-    content: " [y] yes  [n/Esc] no",
-    width: "100%",
-    height: 1,
-    fg: theme.hintFg,
-    bg: theme.hintBg,
-    wrapMode: "none",
-    truncate: true,
-  });
+  dialog.content.add(msgText);
 
-  container.add(msgText);
-  container.add(hint);
-
-  // Key handler
-  const keyHandler = (key: KeyEvent) => {
+  const extraKeyHandler = (key: KeyEvent) => {
     if (key.name === "y") {
       key.preventDefault();
       key.stopPropagation();
       onConfirm();
       return;
     }
-    if (key.name === "n" || key.name === "escape") {
+    if (key.name === "n") {
       key.preventDefault();
       key.stopPropagation();
       onCancel();
       return;
     }
+    // Esc is handled by dialog's built-in handler (calls onDismiss = onCancel)
   };
 
-  renderer.keyInput.on("keypress", keyHandler);
-
-  function cleanup(): void {
-    renderer.keyInput.off("keypress", keyHandler);
-  }
+  renderer.keyInput.on("keypress", extraKeyHandler);
 
-  return { container, cleanup };
+  return {
+    container: dialog.container,
+    cleanup() {
+      dialog.cleanup();
+      renderer.keyInput.off("keypress", extraKeyHandler);
+    },
+  };
 }

package/src/tui/help.ts

@@ -1,20 +1,43 @@
 import {
-  BoxRenderable,
-  ScrollBoxRenderable,
   TextRenderable,
   type CliRenderer,
   type KeyEvent,
+  type ScrollBoxRenderable,
 } from "@opentui/core";
-import { theme } from "./theme";
+import { theme } from "./ui/theme";
+import { createDialog } from "./ui/dialog";
 
 export interface HelpOverlay {
-  container: BoxRenderable;
+  container: import("@opentui/core").BoxRenderable;
   cleanup: () => void;
 }
 
+function addHelpSection(container: ScrollBoxRenderable, renderer: CliRenderer, title: string, lines: string[]): void {
+  // Blank line before section
+  container.add(new TextRenderable(renderer, { content: "", width: "100%", height: 1, wrapMode: "none" }));
+  // Section header in blue
+  container.add(new TextRenderable(renderer, {
+    content: `  ${title}`,
+    width: "100%",
+    height: 1,
+    fg: theme.blue,
+    wrapMode: "none",
+  }));
+  // Content lines
+  for (const line of lines) {
+    container.add(new TextRenderable(renderer, {
+      content: line,
+      width: "100%",
+      height: 1,
+      fg: theme.text,
+      wrapMode: "none",
+    }));
+  }
+}
+
 /**
  * Create a help overlay popup showing all keybindings.
- * Dismissable with `?` or `Esc`.
+ * Dismissable with `?`, `q`, or `Esc`.
  */
 export function createHelp(opts: {
   renderer: CliRenderer;
@@ -23,11 +46,32 @@ export function createHelp(opts: {
 }): HelpOverlay {
   const { renderer, version, onClose } = opts;
 
-  const helpText = [
-    "",
-    `  revspec v${version}`,
-    "",
-    "  Navigation",
+  const dialog = createDialog({
+    renderer,
+    title: "Help",
+    width: "60%",
+    height: Math.min(26, renderer.height - 2),
+    top: "10%",
+    left: "20%",
+    borderColor: theme.info,
+    onDismiss: onClose,
+    hints: [
+      { key: "q/?/Esc", action: "close" },
+      { key: "j/k", action: "scroll" },
+    ],
+  });
+
+  // Version header
+  dialog.content.add(new TextRenderable(renderer, { content: "", width: "100%", height: 1, wrapMode: "none" }));
+  dialog.content.add(new TextRenderable(renderer, {
+    content: `  revspec v${version}`,
+    width: "100%",
+    height: 1,
+    fg: theme.textMuted,
+    wrapMode: "none",
+  }));
+
+  addHelpSection(dialog.content, renderer, "Navigation", [
     "  j/k       Down/up",
     "  gg        Go to first line / scroll to top",
     "  G         Go to last line / scroll to bottom",
@@ -37,74 +81,29 @@ export function createHelp(opts: {
     "  Esc       Clear search highlights",
     "  ]t/[t     Next/prev thread",
     "  ]r/[r     Next/prev unread thread",
-    "",
-    "  Review",
+  ]);
+
+  addHelpSection(dialog.content, renderer, "Review", [
     "  c         Comment / view thread / reply",
     "  r         Resolve thread",
     "  R         Resolve all pending",
-    "  dd        Delete draft comment (double-tap)",
+    "  dd        Delete thread (with confirm)",
     "  l         List threads",
     "  a         Approve spec",
-    "",
-    "  Commands",
+  ]);
+
+  addHelpSection(dialog.content, renderer, "Commands", [
     "  :w        Show save status",
-    "  :q        Save and quit",
+    "  :q        Quit (blocks if unsaved)",
     "  :wq       Save and quit",
     "  :q!       Quit without saving",
-    "",
-  ].join("\n");
-
-  // Overlay container - centered popup
-  const container = new BoxRenderable(renderer, {
-    position: "absolute",
-    top: "10%",
-    left: "20%",
-    width: "60%",
-    height: Math.min(26, renderer.height - 2),
-    zIndex: 100,
-    backgroundColor: theme.base,
-    border: true,
-    borderStyle: "single",
-    borderColor: theme.borderThread,
-    title: " Help ",
-    flexDirection: "column",
-    padding: 0,
-  });
-
-  const scrollBox = new ScrollBoxRenderable(renderer, {
-    width: "100%",
-    flexGrow: 1,
-    flexShrink: 1,
-    scrollY: true,
-    scrollX: false,
-    backgroundColor: theme.base,
-  });
-
-  const content = new TextRenderable(renderer, {
-    content: helpText,
-    width: "100%",
-    fg: theme.text,
-    wrapMode: "none",
-  });
-
-  scrollBox.add(content);
-
-  const hint = new TextRenderable(renderer, {
-    content: " [q/?/Esc] close  [j/k] scroll",
-    width: "100%",
-    height: 1,
-    fg: theme.hintFg,
-    bg: theme.hintBg,
-    wrapMode: "none",
-    truncate: true,
-  });
+  ]);
 
-  container.add(scrollBox);
-  container.add(hint);
+  // Trailing blank line
+  dialog.content.add(new TextRenderable(renderer, { content: "", width: "100%", height: 1, wrapMode: "none" }));
 
-  // Key handler
-  const keyHandler = (key: KeyEvent) => {
-    if (key.name === "escape" || key.name === "q" || key.sequence === "?") {
+  const extraKeyHandler = (key: KeyEvent) => {
+    if (key.name === "q" || key.sequence === "?") {
       key.preventDefault();
       key.stopPropagation();
       onClose();
@@ -113,24 +112,26 @@ export function createHelp(opts: {
     if (key.name === "j" || key.name === "down") {
       key.preventDefault();
       key.stopPropagation();
-      scrollBox.scrollBy(1);
+      dialog.content.scrollTo(Math.min(dialog.content.scrollTop + 1, dialog.content.scrollHeight));
       renderer.requestRender();
       return;
     }
     if (key.name === "k" || key.name === "up") {
       key.preventDefault();
       key.stopPropagation();
-      scrollBox.scrollBy(-1);
+      dialog.content.scrollTo(Math.max(dialog.content.scrollTop - 1, 0));
       renderer.requestRender();
       return;
     }
   };
 
-  renderer.keyInput.on("keypress", keyHandler);
+  renderer.keyInput.on("keypress", extraKeyHandler);
 
-  function cleanup(): void {
-    renderer.keyInput.off("keypress", keyHandler);
-  }
-
-  return { container, cleanup };
+  return {
+    container: dialog.container,
+    cleanup() {
+      dialog.cleanup();
+      renderer.keyInput.off("keypress", extraKeyHandler);
+    },
+  };
 }