botholomew 0.15.0 → 0.15.2

package/src/tui/components/HelpPanel.tsx

@@ -1,17 +1,42 @@
 import { Box, Text } from "ink";
 import { memo } from "react";
+import type { ContextUsage } from "../../chat/usage.ts";
 
 interface HelpPanelProps {
   projectDir: string;
   threadId: string;
   workerRunning: boolean;
+  usage?: ContextUsage | null;
+}
+
+function formatK(n: number): string {
+  return n >= 1000 ? `${Math.round(n / 1000)}k` : String(n);
+}
+
+function usageColorFor(pct: number): "red" | "yellow" | "green" {
+  if (pct >= 90) return "red";
+  if (pct >= 70) return "yellow";
+  return "green";
 }
 
 export const HelpPanel = memo(function HelpPanel({
   projectDir,
   threadId,
   workerRunning,
+  usage,
 }: HelpPanelProps) {
+  const pct =
+    usage && usage.max > 0 ? Math.round((usage.used / usage.max) * 100) : null;
+  const breakdownRows: { label: string; tokens: number }[] = usage
+    ? [
+        { label: "Prompts (files)", tokens: usage.breakdown.prompts },
+        { label: "Instructions   ", tokens: usage.breakdown.instructions },
+        { label: "Tools          ", tokens: usage.breakdown.tools },
+        { label: "Messages       ", tokens: usage.breakdown.messages },
+        { label: "Tool I/O       ", tokens: usage.breakdown.toolIo },
+      ]
+    : [];
+  const breakdownTotal = breakdownRows.reduce((s, r) => s + r.tokens, 0);
   return (
     <Box flexDirection="column" flexGrow={1} paddingX={1} overflow="hidden">
       <Box marginTop={1} flexDirection="column">
@@ -40,7 +65,7 @@ export const HelpPanel = memo(function HelpPanel({
           {"  "}Ctrl+w{"         "}Workers
         </Text>
         <Text>
-          {"  "}?{"              "}Help (from any non-chat tab)
+          {"  "}Ctrl+g{"        "}Help (Ctrl+/ also works in most terminals)
         </Text>
         <Text>
           {"  "}Escape{"         "}Return to Chat
@@ -112,18 +137,28 @@ export const HelpPanel = memo(function HelpPanel({
         <Text bold color="cyan">
           Per-panel actions
         </Text>
+        <Text dimColor>
+          {"  "}d delete needs two presses — arms first, confirms second
+          (cancels on any other key or after 3s)
+        </Text>
         <Text>
-          {"  "}Tasks{"          "}f filter · p priority · d delete · r refresh
+          {"  "}Tasks{"          "}f filter · p priority · d delete (×2) · r
+          refresh
         </Text>
         <Text>
-          {"  "}Threads{"        "}f filter · s/ search · w follow · d delete ·
-          r refresh
+          {"  "}Threads{"        "}f filter · s/ search · w follow · d delete
+          (×2) · r refresh
         </Text>
         <Text>
-          {"  "}Schedules{"      "}f filter · e toggle · d delete · r refresh
+          {"  "}Schedules{"      "}f filter · e toggle · d delete (×2) · r
+          refresh
         </Text>
         <Text>
-          {"  "}Workers{"        "}f filter · l toggle log/detail
+          {"  "}Context{"        "}d delete (×2) · r refresh
+        </Text>
+        <Text>
+          {"  "}Workers{"        "}f filter · l toggle log/detail · d delete log
+          (×2, log view)
         </Text>
       </Box>
 
@@ -139,6 +174,38 @@ export const HelpPanel = memo(function HelpPanel({
         </Text>
       </Box>
 
+      <Box marginTop={1} flexDirection="column">
+        <Text bold color="cyan">
+          Context usage
+        </Text>
+        {usage && pct !== null ? (
+          <>
+            <Text>
+              {"  "}Total{"     "}
+              <Text color={usageColorFor(pct)}>
+                {formatK(usage.used)}/{formatK(usage.max)} ({pct}%)
+              </Text>
+            </Text>
+            <Text dimColor>
+              {"  "}Estimate (~4 chars/token, sums to ~{formatK(breakdownTotal)}
+              ):
+            </Text>
+            {breakdownRows.map((row) => (
+              <Text key={row.label}>
+                {"    "}
+                {row.label}
+                {"  "}
+                {formatK(row.tokens)}
+              </Text>
+            ))}
+          </>
+        ) : (
+          <Text dimColor>
+            {"  "}Send a message to see token usage for the next turn.
+          </Text>
+        )}
+      </Box>
+
       <Box marginTop={1} flexDirection="column">
         <Text bold color="cyan">
           System Info

package/src/tui/components/InputBar.tsx

@@ -9,6 +9,7 @@ import {
   useState,
 } from "react";
 import type { SlashCommand } from "../../skills/commands.ts";
+import { useIdle } from "../idle.tsx";
 import { getSlashMatches, shouldSubmitOnEnter } from "../slashCompletion.ts";
 import { SlashCommandPopup } from "./SlashCommandPopup.tsx";
 
@@ -38,6 +39,7 @@ export const InputBar = memo(function InputBar({
   const [popupDismissed, setPopupDismissed] = useState(false);
   const savedInput = useRef("");
   const lastActivity = useRef(Date.now());
+  const { isIdle } = useIdle();
 
   // Refs for values read inside the input handler — eagerly updated so rapid
   // keystrokes that arrive before React re-renders always see fresh state.
@@ -94,7 +96,7 @@ export const InputBar = memo(function InputBar({
   // 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) {
+    if (disabled || isIdle) {
       setCursorVisible(true);
       return;
     }
@@ -105,7 +107,7 @@ export const InputBar = memo(function InputBar({
       setCursorVisible((prev) => (prev === phase ? prev : phase));
     }, 530);
     return () => clearInterval(id);
-  }, [disabled]);
+  }, [disabled, isIdle]);
 
   // Stable input handler — the callback reference never changes, which
   // prevents Ink's useInput from removing/re-adding the stdin listener on
@@ -337,14 +339,14 @@ export const InputBar = memo(function InputBar({
       <Box
         flexDirection="column"
         borderStyle="single"
-        borderColor={disabled ? "gray" : "green"}
+        borderColor={disabled || isIdle ? "gray" : "green"}
         paddingX={1}
       >
         {header}
         {!disabled && (
           <Box flexDirection="column">
             <Box>
-              <Text color="green">{"› "}</Text>
+              <Text color={isIdle ? "gray" : "green"}>{"› "}</Text>
               {placeholder ? (
                 <Text dimColor>Type a message...</Text>
               ) : (

package/src/tui/components/Logo.tsx

@@ -1,5 +1,6 @@
 import { Box, Text } from "ink";
 import { useEffect, useState } from "react";
+import { useIdle } from "../idle.tsx";
 import { theme } from "../theme.ts";
 
 const STARTUP_FRAMES = [
@@ -23,8 +24,10 @@ const IDLE_MS = 2000;
 export function AnimatedLogo() {
   const [frameIndex, setFrameIndex] = useState(0);
   const [startupDone, setStartupDone] = useState(false);
+  const { isIdle } = useIdle();
 
   useEffect(() => {
+    if (isIdle) return;
     const interval = setInterval(
       () => {
         setFrameIndex((prev) => {
@@ -42,20 +45,21 @@ export function AnimatedLogo() {
       startupDone ? IDLE_MS : STARTUP_MS,
     );
     return () => clearInterval(interval);
-  }, [startupDone]);
+  }, [startupDone, isIdle]);
 
   const frames = startupDone ? IDLE_FRAMES : STARTUP_FRAMES;
   // biome-ignore lint: frameIndex is always in bounds
   const frame = frames[frameIndex]!;
+  const color = isIdle ? "gray" : theme.accent;
 
   return (
     <Box flexDirection="column" alignItems="center" justifyContent="center">
       {frame.map((line) => (
-        <Text key={line} color={theme.accent}>
+        <Text key={line} color={color}>
           {line}
         </Text>
       ))}
-      <Text bold color={theme.accent}>
+      <Text bold color={color}>
         Botholomew
       </Text>
       <Text dimColor>Starting chat session...</Text>
@@ -67,13 +71,19 @@ const CHAR_FRAMES = ["{o,o}", "{o,o}", "{-,-}", "{o,o}"];
 
 export function LogoChar() {
   const [frameIndex, setFrameIndex] = useState(0);
+  const { isIdle } = useIdle();
 
   useEffect(() => {
+    if (isIdle) return;
     const interval = setInterval(() => {
       setFrameIndex((prev) => (prev + 1) % CHAR_FRAMES.length);
     }, IDLE_MS);
     return () => clearInterval(interval);
-  }, []);
+  }, [isIdle]);
 
-  return <Text color={theme.accent}>{CHAR_FRAMES[frameIndex]} </Text>;
+  return (
+    <Text color={isIdle ? "gray" : theme.accent}>
+      {CHAR_FRAMES[frameIndex]}{" "}
+    </Text>
+  );
 }

package/src/tui/components/SchedulePanel.tsx

@@ -12,7 +12,9 @@ import {
   handleListDetailKey,
 } from "../listDetailKeys.ts";
 import { ansi, theme } from "../theme.ts";
+import { useDeleteConfirm } from "../useDeleteConfirm.ts";
 import { useLatestRef } from "../useLatestRef.ts";
+import { DeleteArmedBanner } from "./DeleteArmedBanner.tsx";
 import { Scrollbar } from "./Scrollbar.tsx";
 
 interface SchedulePanelProps {
@@ -94,7 +96,6 @@ export const SchedulePanel = memo(function SchedulePanel({
   const [focus, setFocus] = useState<FocusState>("list");
   const [enabledFilter, setEnabledFilter] = useState<boolean | null>(null);
   const [refreshTick, setRefreshTick] = useState(0);
-  const [confirmDelete, setConfirmDelete] = useState(false);
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: refreshTick triggers manual refresh
   useEffect(() => {
@@ -159,25 +160,19 @@ export const SchedulePanel = memo(function SchedulePanel({
   const itemCountRef = useLatestRef(schedules.length);
   const maxDetailScrollRef = useLatestRef(maxDetailScroll);
   const selectedScheduleRef = useLatestRef(selectedSchedule);
-  const confirmDeleteRef = useLatestRef(confirmDelete);
   const focusRef = useLatestRef(focus);
 
+  const deleteConfirm = useDeleteConfirm(() => {
+    const s = selectedScheduleRef.current;
+    if (!s) return;
+    deleteSchedule(projectDir, s.id).then(() => {
+      forceRefresh();
+    });
+  });
+
   useInput(
     (input, key) => {
-      if (confirmDeleteRef.current) {
-        if (input === "y" || input === "d") {
-          const s = selectedScheduleRef.current;
-          if (s) {
-            deleteSchedule(projectDir, s.id).then(() => {
-              forceRefresh();
-            });
-          }
-          setConfirmDelete(false);
-        } else {
-          setConfirmDelete(false);
-        }
-        return;
-      }
+      if (input !== "d") deleteConfirm.cancel();
 
       if (
         handleListDetailKey(input, key, {
@@ -208,7 +203,8 @@ export const SchedulePanel = memo(function SchedulePanel({
         return;
       }
       if (input === "d" && selectedScheduleRef.current) {
-        setConfirmDelete(true);
+        const s = selectedScheduleRef.current;
+        deleteConfirm.pressDelete(s.name);
         return;
       }
       if (input === "r") {
@@ -273,13 +269,6 @@ export const SchedulePanel = memo(function SchedulePanel({
             </Text>
           )}
         </Box>
-        {confirmDelete && selectedSchedule && (
-          <Box paddingX={1}>
-            <Text color="red" bold>
-              Delete schedule? (y/n)
-            </Text>
-          </Box>
-        )}
         {sidebarVisible.map((schedule, vi) => {
           const i = vi + sidebarScrollOffset;
           const isSelected = i === selectedIndex;
@@ -342,10 +331,14 @@ export const SchedulePanel = memo(function SchedulePanel({
             focused={focus === "detail"}
           />
         </Box>
+        <DeleteArmedBanner
+          armed={deleteConfirm.armed}
+          label={deleteConfirm.armedLabel}
+        />
         <Text dimColor>
           {focus === "detail"
             ? "↑↓ scroll · ⇧↑↓ page · g/G top/bot · ← back to list"
-            : "↑↓ select · → enter detail · f filter · e toggle · d delete · r refresh"}
+            : "↑↓ select · → enter detail · f filter · e toggle · d delete (×2) · r refresh"}
         </Text>
       </Box>
     </Box>

package/src/tui/components/SleepProgress.tsx

@@ -1,5 +1,6 @@
 import { Box, Text } from "ink";
 import { useEffect, useState } from "react";
+import { useIdle } from "../idle.tsx";
 import { theme } from "../theme.ts";
 
 interface SleepProgressProps {
@@ -17,11 +18,13 @@ export function SleepProgress({
   reason,
 }: SleepProgressProps) {
   const [now, setNow] = useState(() => Date.now());
+  const { isIdle } = useIdle();
 
   useEffect(() => {
+    if (isIdle) return;
     const id = setInterval(() => setNow(Date.now()), TICK_MS);
     return () => clearInterval(id);
-  }, []);
+  }, [isIdle]);
 
   const totalMs = totalSeconds * 1000;
   const elapsedMs = Math.min(totalMs, Math.max(0, now - startedAt.getTime()));
@@ -34,7 +37,7 @@ export function SleepProgress({
     <Box flexDirection="column">
       <Box>
         <Text dimColor>{"    "}</Text>
-        <Text color={theme.accent}>{bar}</Text>
+        <Text color={isIdle ? "gray" : theme.accent}>{bar}</Text>
         <Text dimColor>
           {" "}
           {elapsedSec}s / {totalSeconds}s

package/src/tui/components/StatusBar.tsx

@@ -2,6 +2,7 @@ import { Box, Text } from "ink";
 import { useEffect, useState } from "react";
 import { listTasks } from "../../tasks/store.ts";
 import { listWorkers } from "../../workers/store.ts";
+import { useIdle } from "../idle.tsx";
 import { LogoChar } from "./Logo.tsx";
 
 interface StatusBarProps {
@@ -32,8 +33,10 @@ export function StatusBar({
     pendingCount: 0,
     inProgressCount: 0,
   });
+  const { isIdle } = useIdle();
 
   useEffect(() => {
+    if (isIdle) return;
     let mounted = true;
 
     // Errors here (e.g. transient DuckDB lock conflicts while a freshly
@@ -66,32 +69,32 @@ export function StatusBar({
       mounted = false;
       clearInterval(interval);
     };
-  }, [projectDir, onWorkerStatusChange]);
+  }, [projectDir, onWorkerStatusChange, isIdle]);
 
   return (
     <Box paddingX={0}>
       <LogoChar />
-      <Text bold color="blue">
+      <Text bold color={isIdle ? "gray" : "blue"}>
         Botholomew
       </Text>
       {chatTitle && (
         <>
           <Text dimColor> | </Text>
-          <Text color="cyan" bold italic>
+          <Text color={isIdle ? "gray" : "cyan"} bold italic>
             {chatTitle.length > 30 ? `${chatTitle.slice(0, 29)}…` : chatTitle}
           </Text>
         </>
       )}
       <Text dimColor> | </Text>
       {status.workerCount > 0 ? (
-        <Text color="green">
+        <Text color={isIdle ? "gray" : "green"}>
           {status.workerCount} worker{status.workerCount === 1 ? "" : "s"}
         </Text>
       ) : (
-        <Text color="yellow">no workers</Text>
+        <Text color={isIdle ? "gray" : "yellow"}>no workers</Text>
       )}
       <Text dimColor> | </Text>
-      <Text>
+      <Text dimColor={isIdle}>
         {status.pendingCount} pending, {status.inProgressCount} active
       </Text>
     </Box>

package/src/tui/components/TabBar.tsx

@@ -2,8 +2,9 @@ import { Box, Text } from "ink";
 
 export type TabId = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 
-// Help uses "?" (no Ctrl) because Ctrl+H is delivered as backspace by most
-// terminals. The other panels use Ctrl+<letter>.
+// Help uses Ctrl+G rather than Ctrl+H because most terminals deliver Ctrl+H
+// as backspace. Ctrl+G also catches the Ctrl+/ keystroke on terminals that
+// map it to BEL (0x07) — most macOS terminals do.
 const TABS: { id: TabId; label: string; key: string }[] = [
   { id: 1, label: "Chat", key: "^a" },
   { id: 2, label: "Tools", key: "^o" },
@@ -12,14 +13,30 @@ const TABS: { id: TabId; label: string; key: string }[] = [
   { id: 5, label: "Threads", key: "^r" },
   { id: 6, label: "Schedules", key: "^s" },
   { id: 7, label: "Workers", key: "^w" },
-  { id: 8, label: "Help", key: "?" },
+  { id: 8, label: "Help", key: "^g" },
 ];
 
 interface TabBarProps {
   activeTab: TabId;
+  usage?: { used: number; max: number } | null;
 }
 
-export function TabBar({ activeTab }: TabBarProps) {
+function formatK(n: number): string {
+  return n >= 1000 ? `${Math.round(n / 1000)}k` : String(n);
+}
+
+export function TabBar({ activeTab, usage }: TabBarProps) {
+  const pct =
+    usage && usage.max > 0 ? Math.round((usage.used / usage.max) * 100) : null;
+  const usageColor =
+    pct === null
+      ? undefined
+      : pct >= 90
+        ? "red"
+        : pct >= 70
+          ? "yellow"
+          : "green";
+
   return (
     <Box paddingX={1} gap={1}>
       {TABS.map(({ id, label, key: shortcut }) => {
@@ -37,6 +54,14 @@ export function TabBar({ activeTab }: TabBarProps) {
           </Box>
         );
       })}
+      <Box flexGrow={1} />
+      {usage && (
+        <Box>
+          <Text color={usageColor}>
+            {formatK(usage.used)}/{formatK(usage.max)}
+          </Text>
+        </Box>
+      )}
     </Box>
   );
 }

package/src/tui/components/TaskPanel.tsx

@@ -12,7 +12,9 @@ import {
   handleListDetailKey,
 } from "../listDetailKeys.ts";
 import { ansi, theme } from "../theme.ts";
+import { useDeleteConfirm } from "../useDeleteConfirm.ts";
 import { useLatestRef } from "../useLatestRef.ts";
+import { DeleteArmedBanner } from "./DeleteArmedBanner.tsx";
 import { Scrollbar } from "./Scrollbar.tsx";
 
 interface TaskPanelProps {
@@ -199,8 +201,18 @@ export const TaskPanel = memo(function TaskPanel({
   const selectedTaskRef = useLatestRef(selectedTask);
   const focusRef = useLatestRef(focus);
 
+  const deleteConfirm = useDeleteConfirm(() => {
+    const t = selectedTaskRef.current;
+    if (!t) return;
+    deleteTask(projectDir, t.id).then(() => {
+      forceRefresh();
+    });
+  });
+
   useInput(
     (input, key) => {
+      if (input !== "d") deleteConfirm.cancel();
+
       if (
         handleListDetailKey(input, key, {
           focusRef,
@@ -226,9 +238,7 @@ export const TaskPanel = memo(function TaskPanel({
       if (input === "d") {
         const t = selectedTaskRef.current;
         if (!t) return;
-        deleteTask(projectDir, t.id).then(() => {
-          forceRefresh();
-        });
+        deleteConfirm.pressDelete(t.name || t.id);
         return;
       }
       if (input === "r") {
@@ -359,10 +369,14 @@ export const TaskPanel = memo(function TaskPanel({
             focused={focus === "detail"}
           />
         </Box>
+        <DeleteArmedBanner
+          armed={deleteConfirm.armed}
+          label={deleteConfirm.armedLabel}
+        />
         <Text dimColor>
           {focus === "detail"
             ? "↑↓ scroll · ⇧↑↓ page · g/G top/bot · ← back to list"
-            : "↑↓ select · → enter detail · f filter · p priority · d delete · r refresh"}
+            : "↑↓ select · → enter detail · f filter · p priority · d delete (×2) · r refresh"}
         </Text>
       </Box>
     </Box>

package/src/tui/components/ThreadPanel.tsx

@@ -15,7 +15,9 @@ import {
   handleListDetailKey,
 } from "../listDetailKeys.ts";
 import { ansi, theme } from "../theme.ts";
+import { useDeleteConfirm } from "../useDeleteConfirm.ts";
 import { useLatestRef } from "../useLatestRef.ts";
+import { DeleteArmedBanner } from "./DeleteArmedBanner.tsx";
 import { Scrollbar } from "./Scrollbar.tsx";
 
 interface ThreadPanelProps {
@@ -168,7 +170,6 @@ export const ThreadPanel = memo(function ThreadPanel({
   const [focus, setFocus] = useState<FocusState>("list");
   const [typeFilter, setTypeFilter] = useState<Thread["type"] | null>(null);
   const [refreshTick, setRefreshTick] = useState(0);
-  const [confirmDelete, setConfirmDelete] = useState(false);
   const [searching, setSearching] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
   const [selectedDetail, setSelectedDetail] = useState<{
@@ -329,11 +330,18 @@ export const ThreadPanel = memo(function ThreadPanel({
   const selectedThreadRef = useLatestRef(selectedThread);
   const selectedDetailRef = useLatestRef(selectedDetail);
   const searchingRef = useLatestRef(searching);
-  const confirmDeleteRef = useLatestRef(confirmDelete);
   const isActiveSelectedRef = useLatestRef(isActiveSelected);
   const followingRef = useLatestRef(following);
   const focusRef = useLatestRef(focus);
 
+  const deleteConfirm = useDeleteConfirm(() => {
+    const t = selectedThreadRef.current;
+    if (!t || isActiveSelectedRef.current) return;
+    deleteThread(projectDir, t.id).then(() => {
+      forceRefresh();
+    });
+  });
+
   useInput(
     (input, key) => {
       // Search mode: capture typed characters
@@ -360,21 +368,7 @@ export const ThreadPanel = memo(function ThreadPanel({
         return;
       }
 
-      // Delete confirmation mode
-      if (confirmDeleteRef.current) {
-        if (input === "y" || input === "d") {
-          const t = selectedThreadRef.current;
-          if (t && !isActiveSelectedRef.current) {
-            deleteThread(projectDir, t.id).then(() => {
-              forceRefresh();
-            });
-          }
-          setConfirmDelete(false);
-        } else {
-          setConfirmDelete(false);
-        }
-        return;
-      }
+      if (input !== "d") deleteConfirm.cancel();
 
       if (
         handleListDetailKey(input, key, {
@@ -396,7 +390,8 @@ export const ThreadPanel = memo(function ThreadPanel({
       }
       if (input === "d" && selectedThreadRef.current) {
         if (isActiveSelectedRef.current) return; // Can't delete active thread
-        setConfirmDelete(true);
+        const t = selectedThreadRef.current;
+        deleteConfirm.pressDelete(t.title || "(untitled)");
         return;
       }
       if (input === "r") {
@@ -490,13 +485,6 @@ export const ThreadPanel = memo(function ThreadPanel({
             <Text color={theme.info}>▌</Text>
           </Box>
         )}
-        {confirmDelete && selectedThread && (
-          <Box paddingX={1}>
-            <Text color="red" bold>
-              Delete thread? (y/n)
-            </Text>
-          </Box>
-        )}
         {sidebarVisible.map((thread, vi) => {
           const i = vi + sidebarScrollOffset;
           const isSelected = i === selectedIndex;
@@ -573,6 +561,10 @@ export const ThreadPanel = memo(function ThreadPanel({
             focused={focus === "detail"}
           />
         </Box>
+        <DeleteArmedBanner
+          armed={deleteConfirm.armed}
+          label={deleteConfirm.armedLabel}
+        />
         <Box>
           {following && (
             <Text color={theme.success} bold>
@@ -583,7 +575,7 @@ export const ThreadPanel = memo(function ThreadPanel({
           <Text dimColor>
             {focus === "detail"
               ? "↑↓ scroll · ⇧↑↓ page · g/G top/bot · ← back to list"
-              : `↑↓ select · → enter detail · s search · f filter · d delete${selectedThread && !selectedThread.ended_at ? " · w follow" : ""} · r refresh`}
+              : `↑↓ select · → enter detail · s search · f filter · d delete (×2)${selectedThread && !selectedThread.ended_at ? " · w follow" : ""} · r refresh`}
           </Text>
         </Box>
       </Box>