botholomew 0.3.1 → 0.3.2

package/src/tui/components/ContextPanel.tsx

@@ -1,5 +1,5 @@
 import { Box, Text, useInput, useStdout } from "ink";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import type { DbConnection } from "../../db/connection.ts";
 import {
   type ContextItem,
@@ -31,7 +31,10 @@ type Entry = DirEntry | FileEntry;
 // Reserve lines for header, search bar, padding, tab bar, status/input bar
 const CHROME_LINES = 8;
 
-export function ContextPanel({ conn, isActive }: ContextPanelProps) {
+export const ContextPanel = memo(function ContextPanel({
+  conn,
+  isActive,
+}: ContextPanelProps) {
   const { stdout } = useStdout();
   const termRows = stdout?.rows ?? 24;
 
@@ -409,4 +412,4 @@ export function ContextPanel({ conn, isActive }: ContextPanelProps) {
       )}
     </Box>
   );
-}
+});

package/src/tui/components/HelpPanel.tsx

@@ -1,4 +1,5 @@
 import { Box, Text } from "ink";
+import { memo } from "react";
 
 interface HelpPanelProps {
   projectDir: string;
@@ -6,7 +7,7 @@ interface HelpPanelProps {
   daemonRunning: boolean;
 }
 
-export function HelpPanel({
+export const HelpPanel = memo(function HelpPanel({
   projectDir,
   threadId,
   daemonRunning,
@@ -21,7 +22,7 @@ export function HelpPanel({
           {"  "}Tab{"            "}Cycle between tabs
         </Text>
         <Text>
-          {"  "}1-4{"            "}Jump to tab (non-chat tabs)
+          {"  "}1-6{"            "}Jump to tab (non-chat tabs)
         </Text>
         <Text>
           {"  "}Escape{"         "}Return to Chat tab
@@ -79,6 +80,54 @@ export function HelpPanel({
         </Text>
       </Box>
 
+      <Box marginTop={1} flexDirection="column">
+        <Text bold color="cyan">
+          Tasks (Tab 4)
+        </Text>
+        <Text>
+          {"  "}↑/↓{"            "}Navigate task list
+        </Text>
+        <Text>
+          {"  "}Shift+↑/↓{"      "}Scroll detail pane
+        </Text>
+        <Text>
+          {"  "}j / k{"          "}Scroll detail pane
+        </Text>
+        <Text>
+          {"  "}f{"              "}Cycle status filter
+        </Text>
+        <Text>
+          {"  "}p{"              "}Cycle priority filter
+        </Text>
+        <Text>
+          {"  "}r{"              "}Refresh tasks
+        </Text>
+      </Box>
+
+      <Box marginTop={1} flexDirection="column">
+        <Text bold color="cyan">
+          Threads (Tab 5)
+        </Text>
+        <Text>
+          {"  "}↑/↓{"            "}Navigate thread list
+        </Text>
+        <Text>
+          {"  "}Shift+↑/↓{"      "}Scroll detail pane
+        </Text>
+        <Text>
+          {"  "}j / k{"          "}Scroll detail pane
+        </Text>
+        <Text>
+          {"  "}f{"              "}Cycle type filter
+        </Text>
+        <Text>
+          {"  "}d{"              "}Delete thread (with confirmation)
+        </Text>
+        <Text>
+          {"  "}r{"              "}Refresh threads
+        </Text>
+      </Box>
+
       <Box marginTop={1} flexDirection="column">
         <Text bold color="cyan">
           Commands
@@ -114,4 +163,4 @@ export function HelpPanel({
       </Box>
     </Box>
   );
-}
+});

package/src/tui/components/InputBar.tsx

@@ -1,6 +1,12 @@
 import { Box, Text, useInput } from "ink";
-import type { ReactNode } from "react";
-import { useEffect, useRef, useState } from "react";
+import {
+  memo,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 
 interface InputBarProps {
   value: string;
@@ -11,7 +17,7 @@ interface InputBarProps {
   header?: ReactNode;
 }
 
-export function InputBar({
+export const InputBar = memo(function InputBar({
   value,
   onChange,
   onSubmit,
@@ -25,7 +31,24 @@ export function InputBar({
   const savedInput = useRef("");
   const lastActivity = useRef(Date.now());
 
-  // Blink cursor when input is active
+  // Refs for values read inside the input handler — eagerly updated so rapid
+  // keystrokes that arrive before React re-renders always see fresh state.
+  const valueRef = useRef(value);
+  const cursorPosRef = useRef(cursorPos);
+  const historyIndexRef = useRef(historyIndex);
+  const onChangeRef = useRef(onChange);
+  const onSubmitRef = useRef(onSubmit);
+  const historyRef = useRef(history);
+
+  valueRef.current = value;
+  cursorPosRef.current = cursorPos;
+  historyIndexRef.current = historyIndex;
+  onChangeRef.current = onChange;
+  onSubmitRef.current = onSubmit;
+  historyRef.current = history;
+
+  // Blink cursor when input is active — skip ticks while typing so the
+  // cursor stays solid and we avoid unnecessary renders during rapid input.
   useEffect(() => {
     if (disabled) {
       setCursorVisible(true);
@@ -33,85 +56,119 @@ export function InputBar({
     }
     const id = setInterval(() => {
       const elapsed = Date.now() - lastActivity.current;
+      if (elapsed < 530) return; // still typing — keep cursor solid
       const phase = Math.floor(elapsed / 530) % 2 === 0;
-      setCursorVisible(phase);
+      setCursorVisible((prev) => (prev === phase ? prev : phase));
     }, 530);
     return () => clearInterval(id);
   }, [disabled]);
 
-  useInput(
-    (input, key) => {
+  // Stable input handler — the callback reference never changes, which
+  // prevents Ink's useInput from removing/re-adding the stdin listener on
+  // every render. Without this, rapid typing causes listener churn that
+  // overwhelms the event loop and pegs the CPU at 100%.
+  const stableHandler = useCallback(
+    // biome-ignore lint/suspicious/noExplicitAny: Ink's Key type is not exported
+    (input: string, key: any) => {
       if (disabled) return;
       lastActivity.current = Date.now();
-      setCursorVisible(true);
+
+      const val = valueRef.current;
+      const pos = cursorPosRef.current;
+      const hIdx = historyIndexRef.current;
+      const hist = historyRef.current;
 
       // Enter: submit (shift+enter or opt+enter inserts newline)
       if (key.return) {
         if (key.shift || key.meta) {
-          const before = value.slice(0, cursorPos);
-          const after = value.slice(cursorPos);
-          onChange(`${before}\n${after}`);
-          setCursorPos(cursorPos + 1);
+          const before = val.slice(0, pos);
+          const after = val.slice(pos);
+          const newVal = `${before}\n${after}`;
+          const newPos = pos + 1;
+          valueRef.current = newVal;
+          cursorPosRef.current = newPos;
+          onChangeRef.current(newVal);
+          setCursorPos(newPos);
         } else {
+          historyIndexRef.current = -1;
           setHistoryIndex(-1);
           savedInput.current = "";
+          cursorPosRef.current = 0;
           setCursorPos(0);
-          onSubmit(value);
+          onSubmitRef.current(val);
         }
         return;
       }
 
       // Backspace
       if (key.backspace || key.delete) {
-        if (cursorPos > 0) {
-          const before = value.slice(0, cursorPos - 1);
-          const after = value.slice(cursorPos);
-          onChange(before + after);
-          setCursorPos(cursorPos - 1);
+        if (pos > 0) {
+          const before = val.slice(0, pos - 1);
+          const after = val.slice(pos);
+          const newVal = before + after;
+          const newPos = pos - 1;
+          valueRef.current = newVal;
+          cursorPosRef.current = newPos;
+          onChangeRef.current(newVal);
+          setCursorPos(newPos);
         }
         return;
       }
 
       // Left/right arrow for cursor movement
       if (key.leftArrow) {
-        setCursorPos((c) => Math.max(0, c - 1));
+        const newPos = Math.max(0, pos - 1);
+        cursorPosRef.current = newPos;
+        setCursorPos(newPos);
         return;
       }
       if (key.rightArrow) {
-        setCursorPos((c) => Math.min(value.length, c + 1));
+        const newPos = Math.min(val.length, pos + 1);
+        cursorPosRef.current = newPos;
+        setCursorPos(newPos);
         return;
       }
 
       // History navigation
-      if (key.upArrow && history.length > 0) {
-        const nextIndex = historyIndex + 1;
-        if (nextIndex < history.length) {
-          if (historyIndex === -1) {
-            savedInput.current = value;
+      if (key.upArrow && hist.length > 0) {
+        const nextIndex = hIdx + 1;
+        if (nextIndex < hist.length) {
+          if (hIdx === -1) {
+            savedInput.current = val;
           }
+          historyIndexRef.current = nextIndex;
           setHistoryIndex(nextIndex);
-          const entry = history[history.length - 1 - nextIndex];
+          const entry = hist[hist.length - 1 - nextIndex];
           if (entry !== undefined) {
-            onChange(entry);
+            valueRef.current = entry;
+            cursorPosRef.current = entry.length;
+            onChangeRef.current(entry);
             setCursorPos(entry.length);
           }
         }
         return;
       }
 
-      if (key.downArrow && history.length > 0) {
-        if (historyIndex > 0) {
-          const nextIndex = historyIndex - 1;
+      if (key.downArrow && hist.length > 0) {
+        if (hIdx > 0) {
+          const nextIndex = hIdx - 1;
+          historyIndexRef.current = nextIndex;
           setHistoryIndex(nextIndex);
-          const entry = history[history.length - 1 - nextIndex];
+          const entry = hist[hist.length - 1 - nextIndex];
           if (entry !== undefined) {
-            onChange(entry);
+            valueRef.current = entry;
+            cursorPosRef.current = entry.length;
+            onChangeRef.current(entry);
             setCursorPos(entry.length);
           }
-        } else if (historyIndex === 0) {
+        } else if (hIdx === 0) {
+          historyIndexRef.current = -1;
           setHistoryIndex(-1);
-          onChange(savedInput.current);
-          setCursorPos(savedInput.current.length);
+          const saved = savedInput.current;
+          valueRef.current = saved;
+          cursorPosRef.current = saved.length;
+          onChangeRef.current(saved);
+          setCursorPos(saved.length);
         }
         return;
       }
@@ -123,18 +180,25 @@ export function InputBar({
 
       // Regular character input
       if (input) {
-        if (historyIndex !== -1) {
+        if (hIdx !== -1) {
+          historyIndexRef.current = -1;
           setHistoryIndex(-1);
         }
-        const before = value.slice(0, cursorPos);
-        const after = value.slice(cursorPos);
-        onChange(before + input + after);
-        setCursorPos(cursorPos + input.length);
+        const before = val.slice(0, pos);
+        const after = val.slice(pos);
+        const newVal = before + input + after;
+        const newPos = pos + input.length;
+        valueRef.current = newVal;
+        cursorPosRef.current = newPos;
+        onChangeRef.current(newVal);
+        setCursorPos(newPos);
       }
     },
-    { isActive: !disabled },
+    [disabled],
   );
 
+  useInput(stableHandler, { isActive: !disabled });
+
   const isMultiline = value.includes("\n");
   const placeholder = !value && !disabled;
 
@@ -146,25 +210,27 @@ export function InputBar({
       paddingX={1}
     >
       {header}
-      <Box flexDirection="column">
-        <Box>
-          <Text color={disabled ? "gray" : "green"}>{"› "}</Text>
-          {placeholder ? (
-            <Text dimColor>Type a message...</Text>
-          ) : (
-            <Text>
-              {value.slice(0, cursorPos)}
-              <Text inverse={cursorVisible}>{value[cursorPos] ?? " "}</Text>
-              {value.slice(cursorPos + 1)}
-            </Text>
-          )}
-        </Box>
-        {isMultiline && (
+      {!disabled && (
+        <Box flexDirection="column">
           <Box>
-            <Text dimColor> alt+return for newline, return to send</Text>
+            <Text color="green">{"› "}</Text>
+            {placeholder ? (
+              <Text dimColor>Type a message...</Text>
+            ) : (
+              <Text>
+                {value.slice(0, cursorPos)}
+                <Text inverse={cursorVisible}>{value[cursorPos] ?? " "}</Text>
+                {value.slice(cursorPos + 1)}
+              </Text>
+            )}
           </Box>
-        )}
-      </Box>
+          {isMultiline && (
+            <Box>
+              <Text dimColor> alt+return for newline, return to send</Text>
+            </Box>
+          )}
+        </Box>
+      )}
     </Box>
   );
-}
+});

package/src/tui/components/MessageList.tsx

@@ -1,6 +1,6 @@
-import { Box, Text, useInput, useStdout } from "ink";
+import { Box, Static, Text, useStdout } from "ink";
 import Spinner from "ink-spinner";
-import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { memo, useMemo } from "react";
 import { theme } from "../theme.ts";
 import { ToolCall, type ToolCallData } from "./ToolCall.tsx";
 
@@ -17,7 +17,6 @@ interface MessageListProps {
   streamingText: string;
   isLoading: boolean;
   activeToolCalls: ToolCallData[];
-  isActive: boolean;
 }
 
 function formatTime(date: Date): string {
@@ -29,6 +28,27 @@ function padLine(text: string, width: number): string {
   return text + " ".repeat(pad);
 }
 
+function wrapAndPad(text: string, width: number): string {
+  const lines: string[] = [];
+  for (const line of text.split("\n")) {
+    if (line.length <= width) {
+      lines.push(padLine(line, width));
+    } else {
+      let remaining = line;
+      while (remaining.length > width) {
+        let breakAt = remaining.lastIndexOf(" ", width);
+        if (breakAt <= 0) breakAt = width;
+        lines.push(padLine(remaining.slice(0, breakAt), width));
+        remaining = remaining.slice(breakAt).trimStart();
+      }
+      if (remaining.length > 0) {
+        lines.push(padLine(remaining, width));
+      }
+    }
+  }
+  return lines.join("\n");
+}
+
 function renderMarkdown(text: string): string {
   if (!text) return "";
   return Bun.markdown.ansi(text).trimEnd();
@@ -52,7 +72,7 @@ const MessageBubble = memo(function MessageBubble({
   if (message.role === "user") {
     const paddedContent = message.content
       .split("\n")
-      .map((line) => padLine(` ${line}`, cols))
+      .map((line) => wrapAndPad(` ${line}`, cols))
       .join("\n");
     return (
       <Box flexDirection="column" marginTop={1}>
@@ -87,7 +107,7 @@ const MessageBubble = memo(function MessageBubble({
         </Text>
         <Text dimColor> {time}</Text>
       </Box>
-      <Box marginLeft={1} flexDirection="column">
+      <Box marginLeft={1} flexDirection="column" width={cols - 1}>
         {message.toolCalls && message.toolCalls.length > 0 && (
           <Box
             flexDirection="column"
@@ -95,9 +115,10 @@ const MessageBubble = memo(function MessageBubble({
             borderColor="gray"
             paddingX={1}
             marginBottom={0}
+            width="100%"
           >
             {message.toolCalls.map((tc) => (
-              <ToolCall key={`${tc.name}-${tc.input.slice(0, 20)}`} tool={tc} />
+              <ToolCall key={tc.id} tool={tc} />
             ))}
           </Box>
         )}
@@ -107,70 +128,21 @@ const MessageBubble = memo(function MessageBubble({
   );
 });
 
-/** Maximum messages to render at once (performance guard) */
-const MAX_RENDER = 200;
-
 export function MessageList({
   messages,
   streamingText,
   isLoading,
   activeToolCalls,
-  isActive,
 }: MessageListProps) {
-  // scrollBack: number of messages hidden below the viewport.
-  // 0 means "pinned to bottom" (newest messages visible).
-  const [scrollBack, setScrollBack] = useState(0);
-  const prevLen = useRef(messages.length);
-
-  // When new messages arrive and we're pinned to bottom, stay there.
-  // When new messages arrive and we're scrolled up, hold position by
-  // increasing scrollBack so the same messages stay in view.
-  useEffect(() => {
-    const added = messages.length - prevLen.current;
-    if (added > 0 && scrollBack > 0) {
-      setScrollBack((sb) => sb + added);
-    }
-    prevLen.current = messages.length;
-  }, [messages.length, scrollBack]);
-
-  // Scroll input — Shift+↑/↓
-  useInput((_input, key) => {
-    if (!isActive) return;
-
-    if (key.shift && key.upArrow) {
-      setScrollBack((sb) => Math.min(sb + 3, Math.max(0, messages.length - 1)));
-    }
-    if (key.shift && key.downArrow) {
-      setScrollBack((sb) => Math.max(sb - 3, 0));
-    }
-  });
-
-  // Compute the slice of messages to render
-  const visibleMessages = useMemo(() => {
-    if (scrollBack === 0) {
-      // Pinned to bottom — show last MAX_RENDER messages
-      return messages.slice(-MAX_RENDER);
-    }
-    const end = messages.length - scrollBack;
-    const start = Math.max(0, end - MAX_RENDER);
-    return messages.slice(start, Math.max(0, end));
-  }, [messages, scrollBack]);
-
-  const isAtBottom = scrollBack === 0;
-
   return (
-    <Box
-      flexDirection="column"
-      flexGrow={1}
-      overflow="hidden"
-      justifyContent="flex-end"
-    >
-      {visibleMessages.map((msg) => (
-        <MessageBubble key={msg.id} message={msg} />
-      ))}
-
-      {/* Active streaming / tool calls — only shown when pinned to bottom */}
-      {isAtBottom && (streamingText || activeToolCalls.length > 0) && (
+    <>
+      {/* Completed messages — rendered once to terminal scrollback */}
+      <Static items={messages}>
+        {(msg) => <MessageBubble key={msg.id} message={msg} />}
+      </Static>
+
+      {/* Dynamic area — streaming content, managed by Ink */}
+      {(streamingText || activeToolCalls.length > 0) && (
         <Box flexDirection="column" marginTop={1}>
           <Box>
             <Text bold color="green">
@@ -187,7 +159,7 @@ export function MessageList({
               paddingX={1}
             >
               {activeToolCalls.map((tc) => (
-                <ToolCall key={`active-${tc.name}`} tool={tc} />
+                <ToolCall key={tc.id} tool={tc} />
               ))}
             </Box>
           )}
@@ -199,10 +171,10 @@ export function MessageList({
         </Box>
       )}
 
-      {isAtBottom &&
-        isLoading &&
+      {isLoading &&
         !streamingText &&
-        activeToolCalls.length === 0 && (
+        (activeToolCalls.length === 0 ||
+          activeToolCalls.every((tc) => !tc.running)) && (
           <Box marginTop={1}>
             <Text color={theme.accent}>
               <Spinner type="dots" />
@@ -210,13 +182,6 @@ export function MessageList({
             <Text dimColor> Thinking...</Text>
           </Box>
         )}
-
-      {/* Scroll indicator */}
-      {!isAtBottom && (
-        <Box justifyContent="center">
-          <Text dimColor>↓ {scrollBack} more — Shift+↓ to scroll down</Text>
-        </Box>
-      )}
-    </Box>
+    </>
   );
 }

package/src/tui/components/StatusBar.tsx

@@ -3,13 +3,12 @@ import { useEffect, useState } from "react";
 import type { DbConnection } from "../../db/connection.ts";
 import { listTasks } from "../../db/tasks.ts";
 import { getDaemonStatus } from "../../utils/pid.ts";
-import { theme } from "../theme.ts";
 import { LogoChar } from "./Logo.tsx";
 
 interface StatusBarProps {
   projectDir: string;
   conn: DbConnection;
-  isLoading: boolean;
+  chatTitle?: string;
   onDaemonStatusChange?: (running: boolean) => void;
 }
 
@@ -22,7 +21,7 @@ interface Status {
 export function StatusBar({
   projectDir,
   conn,
-  isLoading,
+  chatTitle,
   onDaemonStatusChange,
 }: StatusBarProps) {
   const [status, setStatus] = useState<Status>({
@@ -63,11 +62,13 @@ export function StatusBar({
       <Text bold color="blue">
         Botholomew
       </Text>
-      <Text dimColor> | </Text>
-      {isLoading ? (
-        <Text color={theme.accent}>Working...</Text>
-      ) : (
-        <Text color="green">Ready</Text>
+      {chatTitle && (
+        <>
+          <Text dimColor> | </Text>
+          <Text color="cyan" bold>
+            {chatTitle.length > 30 ? `${chatTitle.slice(0, 29)}…` : chatTitle}
+          </Text>
+        </>
       )}
       <Text dimColor> | </Text>
       {status.daemonRunning ? (

package/src/tui/components/TabBar.tsx

@@ -1,12 +1,14 @@
 import { Box, Text } from "ink";
 
-export type TabId = 1 | 2 | 3 | 4;
+export type TabId = 1 | 2 | 3 | 4 | 5 | 6;
 
 const TABS: { id: TabId; label: string }[] = [
   { id: 1, label: "Chat" },
   { id: 2, label: "Tools" },
   { id: 3, label: "Context" },
-  { id: 4, label: "Help" },
+  { id: 4, label: "Tasks" },
+  { id: 5, label: "Threads" },
+  { id: 6, label: "Help" },
 ];
 
 interface TabBarProps {