botholomew 0.16.0 → 0.16.3

package/src/tui/components/ContextPanel.tsx

@@ -1,4 +1,4 @@
-import { Box, Text, useInput, useStdout } from "ink";
+import { Box, Text, useInput } from "ink";
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import { getDbPath } from "../../constants.ts";
 import {
@@ -24,6 +24,8 @@ import { isMarkdownPath, renderMarkdown } from "../markdown.ts";
 import { theme } from "../theme.ts";
 import { useDeleteConfirm } from "../useDeleteConfirm.ts";
 import { useLatestRef } from "../useLatestRef.ts";
+import { useTerminalSize } from "../useTerminalSize.ts";
+import { wrapDetailLines } from "../wrapDetail.ts";
 import { DeleteArmedBanner } from "./DeleteArmedBanner.tsx";
 import { Scrollbar } from "./Scrollbar.tsx";
 
@@ -39,8 +41,8 @@ export const ContextPanel = memo(function ContextPanel({
   projectDir,
   isActive,
 }: ContextPanelProps) {
-  const { stdout } = useStdout();
-  const termRows = stdout?.rows ?? 24;
+  const { rows: termRows, cols: termCols } = useTerminalSize();
+  const detailWidth = Math.max(1, termCols - SIDEBAR_WIDTH - 5);
 
   const [currentPath, setCurrentPath] = useState("");
   const [entries, setEntries] = useState<ContextEntry[]>([]);
@@ -150,8 +152,8 @@ export const ContextPanel = memo(function ContextPanel({
     const body = isMarkdownPath(fileContent.path)
       ? renderMarkdown(fileContent.content)
       : fileContent.content;
-    return body.split("\n");
-  }, [fileContent, selectedEntry]);
+    return wrapDetailLines(body, detailWidth);
+  }, [fileContent, selectedEntry, detailWidth]);
 
   const visibleDetailRows = Math.max(1, visibleRows - 2);
   const maxDetailScroll = Math.max(0, detailLines.length - visibleDetailRows);

package/src/tui/components/MessageList.tsx

@@ -18,6 +18,9 @@ interface MessageListProps {
   isLoading: boolean;
   activeToolCalls: ToolCallData[];
   preparingTool: { id: string; name: string } | null;
+  /** Timestamp the current streaming bubble started. Stable across token flushes
+   * so the displayed time doesn't flicker on every re-render. */
+  streamStartedAt: Date | null;
 }
 
 function formatTime(date: Date): string {
@@ -124,11 +127,46 @@ export const MessageBubble = memo(function MessageBubble({
   );
 });
 
+const ActiveToolsBox = memo(function ActiveToolsBox({
+  toolCalls,
+}: {
+  toolCalls: ToolCallData[];
+}) {
+  if (toolCalls.length === 0) return null;
+  return (
+    <Box
+      flexDirection="column"
+      marginLeft={1}
+      borderStyle="round"
+      borderColor={theme.accentBorder}
+      paddingX={1}
+    >
+      {toolCalls.map((tc) => (
+        <ToolCall key={tc.id} tool={tc} />
+      ))}
+    </Box>
+  );
+});
+
+const StreamingMarkdown = memo(function StreamingMarkdown({
+  text,
+}: {
+  text: string;
+}) {
+  const rendered = useMemo(() => renderMarkdown(text), [text]);
+  return (
+    <Box marginLeft={1}>
+      <Text>{rendered}</Text>
+    </Box>
+  );
+});
+
 export function MessageList({
   streamingText,
   isLoading,
   activeToolCalls,
   preparingTool,
+  streamStartedAt,
 }: MessageListProps) {
   return (
     <>
@@ -139,26 +177,10 @@ export function MessageList({
             <Text bold color="green">
               Botholomew
             </Text>
-            <Text dimColor> {formatTime(new Date())}</Text>
+            <Text dimColor> {formatTime(streamStartedAt ?? new Date())}</Text>
           </Box>
-          {activeToolCalls.length > 0 && (
-            <Box
-              flexDirection="column"
-              marginLeft={1}
-              borderStyle="round"
-              borderColor={theme.accentBorder}
-              paddingX={1}
-            >
-              {activeToolCalls.map((tc) => (
-                <ToolCall key={tc.id} tool={tc} />
-              ))}
-            </Box>
-          )}
-          {streamingText && (
-            <Box marginLeft={1}>
-              <Text>{renderMarkdown(streamingText)}</Text>
-            </Box>
-          )}
+          <ActiveToolsBox toolCalls={activeToolCalls} />
+          {streamingText && <StreamingMarkdown text={streamingText} />}
         </Box>
       )}
 
@@ -173,14 +195,15 @@ export function MessageList({
 
       {isLoading &&
         !preparingTool &&
-        !streamingText &&
         (activeToolCalls.length === 0 ||
           activeToolCalls.every((tc) => !tc.running)) && (
           <Box marginTop={1}>
             <Text color={theme.accent}>
               <Spinner type="dots" />
             </Text>
-            <Text dimColor> Thinking...</Text>
+            <Text dimColor>
+              {streamingText ? " Streaming..." : " Thinking..."}
+            </Text>
           </Box>
         )}
     </>

package/src/tui/components/SchedulePanel.tsx

@@ -1,4 +1,4 @@
-import { Box, Text, useInput, useStdout } from "ink";
+import { Box, Text, useInput } from "ink";
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import type { Schedule } from "../../schedules/schema.ts";
 import {
@@ -14,6 +14,8 @@ import {
 import { ansi, theme } from "../theme.ts";
 import { useDeleteConfirm } from "../useDeleteConfirm.ts";
 import { useLatestRef } from "../useLatestRef.ts";
+import { useTerminalSize } from "../useTerminalSize.ts";
+import { wrapDetailLines } from "../wrapDetail.ts";
 import { DeleteArmedBanner } from "./DeleteArmedBanner.tsx";
 import { Scrollbar } from "./Scrollbar.tsx";
 
@@ -88,8 +90,8 @@ export const SchedulePanel = memo(function SchedulePanel({
   projectDir,
   isActive,
 }: SchedulePanelProps) {
-  const { stdout } = useStdout();
-  const termRows = stdout?.rows ?? 24;
+  const { rows: termRows, cols: termCols } = useTerminalSize();
+  const detailWidth = Math.max(1, termCols - SIDEBAR_WIDTH - 5);
   const [schedules, setSchedules] = useState<Schedule[]>([]);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [detailScroll, setDetailScroll] = useState(0);
@@ -133,8 +135,8 @@ export const SchedulePanel = memo(function SchedulePanel({
   }, [selectedSchedule]);
 
   const detailLines = useMemo(
-    () => renderedDetail.split("\n"),
-    [renderedDetail],
+    () => wrapDetailLines(renderedDetail, detailWidth),
+    [renderedDetail, detailWidth],
   );
 
   const visibleRows = Math.max(1, termRows - 6);

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/components/TaskPanel.tsx

@@ -1,4 +1,4 @@
-import { Box, Text, useInput, useStdout } from "ink";
+import { Box, Text, useInput } from "ink";
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import {
   TASK_PRIORITIES,
@@ -14,6 +14,8 @@ import {
 import { ansi, theme } from "../theme.ts";
 import { useDeleteConfirm } from "../useDeleteConfirm.ts";
 import { useLatestRef } from "../useLatestRef.ts";
+import { useTerminalSize } from "../useTerminalSize.ts";
+import { wrapDetailLines } from "../wrapDetail.ts";
 import { DeleteArmedBanner } from "./DeleteArmedBanner.tsx";
 import { Scrollbar } from "./Scrollbar.tsx";
 
@@ -121,8 +123,8 @@ export const TaskPanel = memo(function TaskPanel({
   projectDir,
   isActive,
 }: TaskPanelProps) {
-  const { stdout } = useStdout();
-  const termRows = stdout?.rows ?? 24;
+  const { rows: termRows, cols: termCols } = useTerminalSize();
+  const detailWidth = Math.max(1, termCols - SIDEBAR_WIDTH - 5);
   const [tasks, setTasks] = useState<Task[]>([]);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [detailScroll, setDetailScroll] = useState(0);
@@ -173,8 +175,8 @@ export const TaskPanel = memo(function TaskPanel({
   }, [selectedTask]);
 
   const detailLines = useMemo(
-    () => renderedDetail.split("\n"),
-    [renderedDetail],
+    () => wrapDetailLines(renderedDetail, detailWidth),
+    [renderedDetail, detailWidth],
   );
 
   const visibleRows = Math.max(1, termRows - 6);

package/src/tui/components/ThreadPanel.tsx

@@ -1,4 +1,4 @@
-import { Box, Text, useInput, useStdout } from "ink";
+import { Box, Text, useInput } from "ink";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   deleteThread,
@@ -17,6 +17,8 @@ import {
 import { ansi, theme } from "../theme.ts";
 import { useDeleteConfirm } from "../useDeleteConfirm.ts";
 import { useLatestRef } from "../useLatestRef.ts";
+import { useTerminalSize } from "../useTerminalSize.ts";
+import { wrapDetailLines } from "../wrapDetail.ts";
 import { DeleteArmedBanner } from "./DeleteArmedBanner.tsx";
 import { Scrollbar } from "./Scrollbar.tsx";
 
@@ -162,8 +164,8 @@ export const ThreadPanel = memo(function ThreadPanel({
   activeThreadId,
   isActive,
 }: ThreadPanelProps) {
-  const { stdout } = useStdout();
-  const termRows = stdout?.rows ?? 24;
+  const { rows: termRows, cols: termCols } = useTerminalSize();
+  const detailWidth = Math.max(1, termCols - SIDEBAR_WIDTH - 5);
   const [threads, setThreads] = useState<Thread[]>([]);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [detailScroll, setDetailScroll] = useState(0);
@@ -299,8 +301,8 @@ export const ThreadPanel = memo(function ThreadPanel({
   }, [selectedDetail, activeThreadId]);
 
   const detailLines = useMemo(
-    () => renderedDetail.split("\n"),
-    [renderedDetail],
+    () => wrapDetailLines(renderedDetail, detailWidth),
+    [renderedDetail, detailWidth],
   );
 
   const visibleRows = Math.max(1, termRows - 6);

package/src/tui/components/ToolCall.tsx

@@ -1,4 +1,5 @@
 import { Box, Text } from "ink";
+import { memo } from "react";
 import { theme } from "../theme.ts";
 import { parseSleepInput, SleepProgress } from "./SleepProgress.tsx";
 
@@ -48,7 +49,7 @@ interface ToolCallProps {
   tool: ToolCallData;
 }
 
-export function ToolCall({ tool }: ToolCallProps) {
+export const ToolCall = memo(function ToolCall({ tool }: ToolCallProps) {
   const { displayName, displayInput } = resolveToolDisplay(
     tool.name,
     tool.input,
@@ -122,4 +123,4 @@ export function ToolCall({ tool }: ToolCallProps) {
       ))}
     </Box>
   );
-}
+});

package/src/tui/components/ToolPanel.tsx

@@ -1,4 +1,4 @@
-import { Box, Text, useInput, useStdout } from "ink";
+import { Box, Text, useInput } from "ink";
 import { memo, useEffect, useMemo, useState } from "react";
 import {
   detailPaneBorderProps,
@@ -7,6 +7,8 @@ import {
 } from "../listDetailKeys.ts";
 import { ansi, theme } from "../theme.ts";
 import { useLatestRef } from "../useLatestRef.ts";
+import { useTerminalSize } from "../useTerminalSize.ts";
+import { wrapDetailLines } from "../wrapDetail.ts";
 import { Scrollbar } from "./Scrollbar.tsx";
 import { resolveToolDisplay, type ToolCallData } from "./ToolCall.tsx";
 
@@ -109,8 +111,10 @@ export const ToolPanel = memo(function ToolPanel({
   toolCalls,
   isActive,
 }: ToolPanelProps) {
-  const { stdout } = useStdout();
-  const termRows = stdout?.rows ?? 24;
+  const { rows: termRows, cols: termCols } = useTerminalSize();
+  // Detail-pane content width: total cols minus sidebar, minus 4 chars of
+  // border+padding on the right pane, minus 1 col for the scrollbar.
+  const detailWidth = Math.max(1, termCols - SIDEBAR_WIDTH - 5);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [detailScroll, setDetailScroll] = useState(0);
   const [focus, setFocus] = useState<FocusState>("list");
@@ -133,8 +137,8 @@ export const ToolPanel = memo(function ToolPanel({
   }, [selectedTool]);
 
   const detailLines = useMemo(
-    () => renderedDetail.split("\n"),
-    [renderedDetail],
+    () => wrapDetailLines(renderedDetail, detailWidth),
+    [renderedDetail, detailWidth],
   );
 
   // Visible area for sidebar and detail

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,
+    ],
+  );
+}