botholomew 0.16.2 → 0.16.3

package/src/tui/components/TabBar.tsx

@@ -10,7 +10,7 @@ const TABS: { id: TabId; label: string; key: string }[] = [
   { id: 2, label: "Tools", key: "^o" },
   { id: 3, label: "Context", key: "^n" },
   { id: 4, label: "Tasks", key: "^t" },
-  { id: 5, label: "Threads", key: "^r" },
+  { id: 5, label: "Threads", key: "^e" },
   { id: 6, label: "Schedules", key: "^s" },
   { id: 7, label: "Workers", key: "^w" },
   { id: 8, label: "Help", key: "^g" },

package/src/tui/components/TabPanels.tsx

@@ -0,0 +1,108 @@
+import { Box } from "ink";
+import type { ContextUsage } from "../../chat/usage.ts";
+import { ContextPanel } from "./ContextPanel.tsx";
+import { HelpPanel } from "./HelpPanel.tsx";
+import { SchedulePanel } from "./SchedulePanel.tsx";
+import type { TabId } from "./TabBar.tsx";
+import { TaskPanel } from "./TaskPanel.tsx";
+import { ThreadPanel } from "./ThreadPanel.tsx";
+import type { ToolCallData } from "./ToolCall.tsx";
+import { ToolPanel } from "./ToolPanel.tsx";
+import { WorkerPanel } from "./WorkerPanel.tsx";
+
+interface TabPanelsProps {
+  activeTab: TabId;
+  projectDir: string;
+  threadId: string;
+  allToolCalls: ToolCallData[];
+  workerRunning: boolean;
+  usage: ContextUsage | null;
+}
+
+// Tabs 2–8. The chat tab (1) is structurally different (`maxHeight` clipping,
+// streaming props) and stays inline in App.tsx. All panels stay mounted to
+// avoid expensive remount cycles — `display="none"` hides inactive panels
+// from layout without destroying them.
+//
+// `flexGrow={1}` fills the root (which is pinned to `rows` on these tabs)
+// minus the footer's actual height, so the panel always reaches the top of
+// the viewport — no scrollback leak above the panel regardless of footer
+// height.
+export function TabPanels({
+  activeTab,
+  projectDir,
+  threadId,
+  allToolCalls,
+  workerRunning,
+  usage,
+}: TabPanelsProps) {
+  return (
+    <>
+      <Box
+        display={activeTab === 2 ? "flex" : "none"}
+        flexDirection="column"
+        flexGrow={1}
+        overflow="hidden"
+      >
+        <ToolPanel toolCalls={allToolCalls} isActive={activeTab === 2} />
+      </Box>
+      <Box
+        display={activeTab === 3 ? "flex" : "none"}
+        flexDirection="column"
+        flexGrow={1}
+        overflow="hidden"
+      >
+        <ContextPanel projectDir={projectDir} isActive={activeTab === 3} />
+      </Box>
+      <Box
+        display={activeTab === 4 ? "flex" : "none"}
+        flexDirection="column"
+        flexGrow={1}
+        overflow="hidden"
+      >
+        <TaskPanel projectDir={projectDir} isActive={activeTab === 4} />
+      </Box>
+      <Box
+        display={activeTab === 5 ? "flex" : "none"}
+        flexDirection="column"
+        flexGrow={1}
+        overflow="hidden"
+      >
+        <ThreadPanel
+          projectDir={projectDir}
+          activeThreadId={threadId}
+          isActive={activeTab === 5}
+        />
+      </Box>
+      <Box
+        display={activeTab === 6 ? "flex" : "none"}
+        flexDirection="column"
+        flexGrow={1}
+        overflow="hidden"
+      >
+        <SchedulePanel projectDir={projectDir} isActive={activeTab === 6} />
+      </Box>
+      <Box
+        display={activeTab === 7 ? "flex" : "none"}
+        flexDirection="column"
+        flexGrow={1}
+        overflow="hidden"
+      >
+        <WorkerPanel projectDir={projectDir} isActive={activeTab === 7} />
+      </Box>
+      <Box
+        display={activeTab === 8 ? "flex" : "none"}
+        flexDirection="column"
+        flexGrow={1}
+        overflow="hidden"
+      >
+        <HelpPanel
+          projectDir={projectDir}
+          threadId={threadId}
+          workerRunning={workerRunning}
+          usage={usage}
+        />
+      </Box>
+    </>
+  );
+}

package/src/tui/handleSubmit.ts

@@ -0,0 +1,206 @@
+import {
+  type Dispatch,
+  type MutableRefObject,
+  type SetStateAction,
+  useCallback,
+} from "react";
+import {
+  abortActiveStream,
+  type ChatSession,
+  clearChatSession,
+} from "../chat/session.ts";
+import type { ContextUsage } from "../chat/usage.ts";
+import { handleSlashCommand } from "../skills/commands.ts";
+import type { ChatMessage } from "./components/MessageList.tsx";
+import type { QueueEntry } from "./hooks/useMessageQueue.ts";
+import { msgId } from "./messages.ts";
+
+interface UseChatSubmitParams {
+  sessionRef: MutableRefObject<ChatSession | null>;
+  queueRef: MutableRefObject<QueueEntry[]>;
+  processingRef: MutableRefObject<boolean>;
+  clearingRef: MutableRefObject<boolean>;
+  syncQueue: () => void;
+  processQueue: () => Promise<void>;
+  performShutdown: () => Promise<void>;
+  clearStreamingState: () => void;
+  setMessages: Dispatch<SetStateAction<ChatMessage[]>>;
+  setInputValue: Dispatch<SetStateAction<string>>;
+  setInputHistory: Dispatch<SetStateAction<string[]>>;
+  setMessagesEpoch: Dispatch<SetStateAction<number>>;
+  setChatTitle: (t: string | undefined) => void;
+  setClearing: Dispatch<SetStateAction<boolean>>;
+  setUsage: Dispatch<SetStateAction<ContextUsage | null>>;
+}
+
+export function useChatSubmit({
+  sessionRef,
+  queueRef,
+  processingRef,
+  clearingRef,
+  syncQueue,
+  processQueue,
+  performShutdown,
+  clearStreamingState,
+  setMessages,
+  setInputValue,
+  setInputHistory,
+  setMessagesEpoch,
+  setChatTitle,
+  setClearing,
+  setUsage,
+}: UseChatSubmitParams): (text: string) => Promise<void> {
+  return useCallback(
+    async (text: string) => {
+      const trimmed = text.trim();
+      if (!trimmed || !sessionRef.current) return;
+      // /clear is mid-flight: don't queue against the old thread id.
+      if (clearingRef.current) return;
+
+      setInputValue("");
+
+      if (trimmed === "/help") {
+        const skills = sessionRef.current.skills;
+        const lines: string[] = [
+          "For the full keyboard reference, switch to the Help tab (`Ctrl+g`) — this message lists chat commands only.",
+          "",
+          "Slash commands:",
+          "  /help           Show this message",
+          "  /skills         List available skills",
+          "  /clear          End current thread and start a new one",
+          "  /exit           End the chat session",
+        ];
+        if (skills.size > 0) {
+          lines.push("", "Skills:");
+          for (const [skillName, skill] of skills) {
+            lines.push(
+              `  /${skillName.padEnd(14)} ${skill.description || "(no description)"}`,
+            );
+          }
+        } else {
+          lines.push("", "Skills:", "  (none — add .md files to skills/)");
+        }
+
+        const helpMsg: ChatMessage = {
+          id: msgId(),
+          role: "system",
+          content: lines.join("\n"),
+          timestamp: new Date(),
+        };
+        setMessages((prev) => [...prev, helpMsg]);
+        return;
+      }
+
+      if (trimmed.startsWith("/")) {
+        const skills = sessionRef.current.skills;
+        const handled = handleSlashCommand(trimmed, {
+          skills,
+          addSystemMessage: (content) => {
+            const msg: ChatMessage = {
+              id: msgId(),
+              role: "system",
+              content,
+              timestamp: new Date(),
+            };
+            setMessages((prev) => [...prev, msg]);
+          },
+          queueUserMessage: (content, opts) => {
+            setInputHistory((prev) => [...prev, trimmed]);
+            queueRef.current.push({
+              display: opts?.display ?? content,
+              content,
+            });
+            syncQueue();
+            processQueue();
+          },
+          exit: () => void performShutdown(),
+          clearChat: () => {
+            const session = sessionRef.current;
+            if (!session) return;
+            // Drain any queued messages so they don't leak into the new thread.
+            queueRef.current.length = 0;
+            syncQueue();
+            // Abort any in-flight stream synchronously so its callbacks stop
+            // firing before we reset UI state. clearChatSession also calls
+            // this, but doing it here lets us start the wait-for-quiesce
+            // poll below immediately rather than waiting on the
+            // createThread/endThread round trip first.
+            abortActiveStream(session);
+            // Block new submissions until the new thread id is in place —
+            // otherwise the user's first post-/clear message races the
+            // async createThread, runs against the old thread id, and is
+            // then wiped by setMessages([sys]) below.
+            clearingRef.current = true;
+            setClearing(true);
+            void (async () => {
+              // Wait for any in-flight processQueue iteration to finish so
+              // its trailing `finalizeSegment` can't race our state reset
+              // and re-add the previous thread's assistant message after
+              // the UI has been cleared. (Issue #190.)
+              while (processingRef.current) {
+                await new Promise((r) => setTimeout(r, 10));
+              }
+              try {
+                const { previousThreadId, newThreadId } =
+                  await clearChatSession(session);
+                // Ink's <Static> writes messages to terminal scrollback and
+                // can't un-write them, so setMessages alone leaves the old
+                // lines visible. Clear the terminal (including scrollback)
+                // and bump the epoch key on <Static> to force a fresh mount.
+                process.stdout.write("\x1b[2J\x1b[3J\x1b[H");
+                setMessages([
+                  {
+                    id: msgId(),
+                    role: "system",
+                    content: `Started a new chat thread (${newThreadId}). Previous thread saved — resume with: botholomew chat --thread-id ${previousThreadId}`,
+                    timestamp: new Date(),
+                  },
+                ]);
+                setMessagesEpoch((n) => n + 1);
+                setChatTitle(undefined);
+                clearStreamingState();
+                setUsage(null);
+              } catch (err) {
+                setMessages((prev) => [
+                  ...prev,
+                  {
+                    id: msgId(),
+                    role: "system",
+                    content: `Failed to clear chat: ${err}`,
+                    timestamp: new Date(),
+                  },
+                ]);
+              } finally {
+                clearingRef.current = false;
+                setClearing(false);
+              }
+            })();
+          },
+        });
+        if (handled) return;
+      }
+
+      setInputHistory((prev) => [...prev, trimmed]);
+      queueRef.current.push({ display: trimmed, content: trimmed });
+      syncQueue();
+      processQueue();
+    },
+    [
+      sessionRef,
+      queueRef,
+      processingRef,
+      clearingRef,
+      syncQueue,
+      processQueue,
+      performShutdown,
+      clearStreamingState,
+      setMessages,
+      setInputValue,
+      setInputHistory,
+      setMessagesEpoch,
+      setChatTitle,
+      setClearing,
+      setUsage,
+    ],
+  );
+}

package/src/tui/hooks/useAppKeybindings.ts

@@ -0,0 +1,166 @@
+import { useInput } from "ink";
+import {
+  type Dispatch,
+  type MutableRefObject,
+  type SetStateAction,
+  useCallback,
+  useRef,
+} from "react";
+import { abortActiveStream, type ChatSession } from "../../chat/session.ts";
+import type { SlashCommand } from "../../skills/commands.ts";
+import type { TabId } from "../components/TabBar.tsx";
+import { TAB_BY_CTRL_KEY } from "../keys.ts";
+import { getSlashMatches } from "../slashCompletion.ts";
+import type { QueueEntry } from "./useMessageQueue.ts";
+
+interface UseAppKeybindingsParams {
+  activeTab: TabId;
+  setActiveTab: Dispatch<SetStateAction<TabId>>;
+  performShutdown: () => Promise<void>;
+  sessionRef: MutableRefObject<ChatSession | null>;
+  processingRef: MutableRefObject<boolean>;
+  queueRef: MutableRefObject<QueueEntry[]>;
+  queuedMessages: string[];
+  selectedQueueIndex: number;
+  setSelectedQueueIndex: Dispatch<SetStateAction<number>>;
+  setInputValue: Dispatch<SetStateAction<string>>;
+  syncQueue: () => void;
+  slashCommandsRef: MutableRefObject<SlashCommand[]>;
+  inputValueRef: MutableRefObject<string>;
+  markActivityRef: MutableRefObject<() => void>;
+}
+
+export function useAppKeybindings({
+  activeTab,
+  setActiveTab,
+  performShutdown,
+  sessionRef,
+  processingRef,
+  queueRef,
+  queuedMessages,
+  selectedQueueIndex,
+  setSelectedQueueIndex,
+  setInputValue,
+  syncQueue,
+  slashCommandsRef,
+  inputValueRef,
+  markActivityRef,
+}: UseAppKeybindingsParams): void {
+  // Stable refs for the input handler — same pattern as InputBar to prevent
+  // Ink's useInput from re-registering stdin listeners on every render.
+  const activeTabRef = useRef(activeTab);
+  const queuedMessagesRef = useRef(queuedMessages);
+  const selectedQueueIndexRef = useRef(selectedQueueIndex);
+  activeTabRef.current = activeTab;
+  queuedMessagesRef.current = queuedMessages;
+  selectedQueueIndexRef.current = selectedQueueIndex;
+
+  const handler = useCallback(
+    // biome-ignore lint/suspicious/noExplicitAny: Ink's Key type is not exported
+    (input: string, key: any) => {
+      markActivityRef.current();
+
+      // Ctrl+C exits. Routed through performShutdown so the in-flight LLM
+      // stream is aborted and mcpx is closed before we unmount Ink — without
+      // that, one Ctrl-C prints the goodbye but the process stays pinned by
+      // the open HTTPS socket and a second Ctrl-C is needed.
+      if (input === "c" && key.ctrl) {
+        void performShutdown();
+        return;
+      }
+
+      // Ctrl+<letter> jumps directly to a tab from any tab. On Chat, only
+      // suppress these if the slash-autocomplete popup needs the keystroke
+      // (Ctrl combos don't drive the popup, but keep the guard symmetric
+      // with the previous Tab-cycle behavior).
+      if (key.ctrl) {
+        const tabForKey = TAB_BY_CTRL_KEY[input];
+        if (tabForKey !== undefined) {
+          if (activeTabRef.current === 1) {
+            const popupOpen = getSlashMatches(
+              inputValueRef.current,
+              slashCommandsRef.current,
+            );
+            if (popupOpen) return;
+            // Ctrl+E edits a queued message when one is selected; only
+            // fall through to the Threads tab-jump when the queue is empty.
+            if (input === "e" && queuedMessagesRef.current.length > 0) {
+              // handled by the queue keybindings block below
+            } else {
+              setActiveTab(tabForKey);
+              return;
+            }
+          } else {
+            setActiveTab(tabForKey);
+            return;
+          }
+        }
+      }
+
+      const tab = activeTabRef.current;
+
+      // Esc on Chat tab while a turn is in flight: steer / interrupt.
+      // Calls MessageStream.abort() at the SDK layer; tools already running
+      // finish normally, but no further LLM turn is started.
+      if (key.escape && tab === 1 && processingRef.current) {
+        const session = sessionRef.current;
+        if (session) {
+          abortActiveStream(session);
+          return;
+        }
+      }
+
+      // Queue manipulation keybindings (only when queue has items on Chat tab)
+      const queue = queuedMessagesRef.current;
+      if (tab === 1 && queue.length > 0 && key.ctrl) {
+        if (input === "j") {
+          setSelectedQueueIndex((i) => Math.min(i + 1, queue.length - 1));
+          return;
+        }
+        if (input === "k") {
+          setSelectedQueueIndex((i) => Math.max(i - 1, 0));
+          return;
+        }
+        if (input === "x") {
+          queueRef.current.splice(selectedQueueIndexRef.current, 1);
+          syncQueue();
+          return;
+        }
+        if (input === "e") {
+          const [msg] = queueRef.current.splice(
+            selectedQueueIndexRef.current,
+            1,
+          );
+          syncQueue();
+          if (msg) {
+            setInputValue(msg.display);
+          }
+          return;
+        }
+      }
+
+      if (tab !== 1) {
+        // Escape returns to chat
+        if (key.escape) {
+          setActiveTab(1);
+          return;
+        }
+      }
+    },
+    [
+      performShutdown,
+      sessionRef,
+      processingRef,
+      queueRef,
+      setActiveTab,
+      setSelectedQueueIndex,
+      setInputValue,
+      syncQueue,
+      slashCommandsRef,
+      inputValueRef,
+      markActivityRef,
+    ],
+  );
+
+  useInput(handler);
+}

package/src/tui/hooks/useCaptureTabCycle.ts

@@ -0,0 +1,28 @@
+import { type Dispatch, type SetStateAction, useEffect } from "react";
+import type { TabId } from "../components/TabBar.tsx";
+
+// Capture-mode tab auto-cycle. Under VHS/ttyd the Tab key doesn't reliably
+// reach Ink, so a docs tape can't drive the tab tour by keystroke. When
+// BOTHOLOMEW_CAPTURE_TAB_CYCLE is set, schedule timers that walk through
+// every tab so a single recording can show all panels.
+//
+// Format: "dwellMs" or "dwellMs:startDelayMs". The optional start delay
+// lets a tape finish a streamed chat reply before the cycle kicks in.
+export function useCaptureTabCycle(
+  setActiveTab: Dispatch<SetStateAction<TabId>>,
+): void {
+  useEffect(() => {
+    const spec = process.env.BOTHOLOMEW_CAPTURE_TAB_CYCLE;
+    if (!spec) return;
+    const [dwellRaw, delayRaw] = spec.split(":");
+    const dwellMs = Number.parseInt(dwellRaw ?? "", 10) || 2500;
+    const startDelayMs = Number.parseInt(delayRaw ?? "", 10) || 0;
+    const sequence: TabId[] = [2, 3, 4, 5, 6, 7, 8, 1];
+    const timers = sequence.map((tab, i) =>
+      setTimeout(() => setActiveTab(tab), startDelayMs + dwellMs * (i + 1)),
+    );
+    return () => {
+      for (const t of timers) clearTimeout(t);
+    };
+  }, [setActiveTab]);
+}

package/src/tui/hooks/useChatSession.ts

@@ -0,0 +1,151 @@
+import { useApp } from "ink";
+import {
+  type Dispatch,
+  type MutableRefObject,
+  type SetStateAction,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import {
+  abortActiveStream,
+  type ChatSession,
+  endChatSession,
+  startChatSession,
+} from "../../chat/session.ts";
+import { getThread } from "../../threads/store.ts";
+import type { ChatMessage } from "../components/MessageList.tsx";
+import { msgId } from "../messages.ts";
+import { restoreMessagesFromInteractions } from "../restoreMessages.ts";
+import { ansi } from "../theme.ts";
+
+interface UseChatSessionParams {
+  projectDir: string;
+  resumeThreadId: string | undefined;
+  initialPrompt: string | undefined;
+  setMessages: Dispatch<SetStateAction<ChatMessage[]>>;
+  setError: Dispatch<SetStateAction<string | null>>;
+}
+
+interface UseChatSessionResult {
+  sessionRef: MutableRefObject<ChatSession | null>;
+  ready: boolean;
+  splashDone: boolean;
+  performShutdown: () => Promise<void>;
+}
+
+export function useChatSession({
+  projectDir,
+  resumeThreadId,
+  initialPrompt,
+  setMessages,
+  setError,
+}: UseChatSessionParams): UseChatSessionResult {
+  const { exit } = useApp();
+  const [ready, setReady] = useState(false);
+  const skipSplash = !!(resumeThreadId || initialPrompt);
+  const [splashDone, setSplashDone] = useState(skipSplash);
+  const sessionRef = useRef<ChatSession | null>(null);
+  const shuttingDownRef = useRef(false);
+
+  // Initialize session
+  useEffect(() => {
+    let cancelled = false;
+
+    startChatSession(projectDir, resumeThreadId)
+      .then(async (session) => {
+        if (cancelled) {
+          endChatSession(session);
+          return;
+        }
+        sessionRef.current = session;
+
+        if (resumeThreadId) {
+          // Always hydrate on resume so the Tools tab and chat history
+          // pick up prior tool_use/tool_result rows from the CSV — even if
+          // the thread has no plain message-kind interactions yet.
+          const threadData = await getThread(
+            session.projectDir,
+            session.threadId,
+          );
+          if (threadData) {
+            setMessages(
+              restoreMessagesFromInteractions(threadData.interactions),
+            );
+          }
+        }
+
+        setMessages((prev) => [
+          ...prev,
+          {
+            id: msgId(),
+            role: "system" as const,
+            content:
+              "Switch panels with Ctrl+<letter> (^a chat · ^o tools · ^n context · ^t tasks · ^r threads · ^s schedules · ^w workers) — `?` for help. Type /help for commands.",
+            timestamp: new Date(),
+          },
+        ]);
+
+        setReady(true);
+      })
+      .catch((err) => {
+        setError(`Failed to start session: ${err}`);
+      });
+
+    return () => {
+      cancelled = true;
+      // Fire-and-forget safety net: only triggers when unmount happens via a
+      // path that didn't go through performShutdown (which nulls sessionRef
+      // first). React doesn't await unmount cleanups, so the goodbye lands
+      // before mcpx finishes closing — that's fine for non-Ctrl-C paths.
+      if (sessionRef.current) {
+        const session = sessionRef.current;
+        const threadId = session.threadId;
+        abortActiveStream(session);
+        void endChatSession(session);
+        process.stderr.write(
+          `\nThread: ${threadId}\nResume with: ${ansi.success}botholomew chat --thread-id ${threadId}${ansi.reset}\nBye!\n`,
+        );
+      }
+    };
+  }, [projectDir, resumeThreadId, setMessages, setError]);
+
+  const performShutdown = useCallback(async () => {
+    if (shuttingDownRef.current) {
+      // Second Ctrl-C while cleanup is in flight — give the user an escape
+      // hatch. 130 = standard SIGINT exit code.
+      process.exit(130);
+    }
+    shuttingDownRef.current = true;
+
+    const session = sessionRef.current;
+    // Null the ref so the useEffect cleanup that runs on Ink unmount becomes
+    // a no-op — otherwise it would double-print the goodbye and double-close
+    // the mcpx client.
+    sessionRef.current = null;
+
+    if (session) {
+      const threadId = session.threadId;
+      abortActiveStream(session);
+      try {
+        await endChatSession(session);
+      } catch {
+        // Best-effort: the user pressed Ctrl-C, surfacing a stack trace here
+        // would just hide the goodbye line.
+      }
+      process.stderr.write(
+        `\nThread: ${threadId}\nResume with: ${ansi.success}botholomew chat --thread-id ${threadId}${ansi.reset}\nBye!\n`,
+      );
+    }
+    exit();
+  }, [exit]);
+
+  // Minimum splash screen duration
+  useEffect(() => {
+    const timer = setTimeout(() => setSplashDone(true), 2000);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return { sessionRef, ready, splashDone, performShutdown };
+}