botholomew 0.14.2 → 0.15.1

package/src/tui/components/HelpPanel.tsx

@@ -19,112 +19,111 @@ export const HelpPanel = memo(function HelpPanel({
           Navigation
         </Text>
         <Text>
-          {"  "}Tab{"            "}Cycle between tabs
+          {"  "}Ctrl+a{"         "}Chat
         </Text>
         <Text>
-          {"  "}1-6{"            "}Jump to tab (non-chat tabs)
+          {"  "}Ctrl+o{"         "}Tools
         </Text>
         <Text>
-          {"  "}Escape{"         "}Return to Chat tab
-        </Text>
-      </Box>
-
-      <Box marginTop={1} flexDirection="column">
-        <Text bold color="cyan">
-          Chat (Tab 1)
+          {"  "}Ctrl+n{"         "}Context
         </Text>
         <Text>
-          {"  "}Enter{"          "}Send message
+          {"  "}Ctrl+t{"         "}Tasks
         </Text>
         <Text>
-          {"  "}⌥+Enter{"        "}Insert newline
+          {"  "}Ctrl+r{"         "}Threads
         </Text>
         <Text>
-          {"  "}↑/↓{"            "}Browse input history
-        </Text>
-      </Box>
-
-      <Box marginTop={1} flexDirection="column">
-        <Text bold color="cyan">
-          Tools (Tab 2)
+          {"  "}Ctrl+s{"         "}Schedules
         </Text>
         <Text>
-          {"  "}↑/↓{"            "}Select tool call
+          {"  "}Ctrl+w{"         "}Workers
         </Text>
         <Text>
-          {"  "}Shift+↑/↓{"      "}Scroll detail pane
+          {"  "}?{"              "}Help (from any non-chat tab)
         </Text>
         <Text>
-          {"  "}j / k{"          "}Scroll detail pane
+          {"  "}Escape{"         "}Return to Chat
         </Text>
       </Box>
 
       <Box marginTop={1} flexDirection="column">
         <Text bold color="cyan">
-          Context (Tab 3)
-        </Text>
-        <Text>
-          {"  "}↑/↓{"            "}Navigate items
+          Chat
         </Text>
         <Text>
-          {"  "}Enter{"          "}Expand directory / preview file
+          {"  "}Enter{"          "}Send message
         </Text>
         <Text>
-          {"  "}Backspace{"      "}Go up one directory
+          {"  "}⌥+Enter{"        "}Insert newline
         </Text>
         <Text>
-          {"  "}/{"              "}Search context
+          {"  "}↑/↓{"            "}Browse input history
         </Text>
         <Text>
-          {"  "}d{"              "}Delete selected item (with confirmation)
+          {"  "}Esc{"            "}Steer / abort in-flight turn
         </Text>
       </Box>
 
       <Box marginTop={1} flexDirection="column">
         <Text bold color="cyan">
-          Tasks (Tab 4)
+          List panels (Tools/Tasks/Threads/Schedules/Workers/Context)
+        </Text>
+        <Text dimColor>
+          {"  "}List focus (default — dashed border on right pane):
         </Text>
         <Text>
-          {"  "}↑/↓{"            "}Navigate task list
+          {"  "}↑/↓{"            "}Move list selection
         </Text>
         <Text>
-          {"  "}Shift+↑/↓{"      "}Scroll detail pane
+          {"  "}→{"              "}Enter the right pane (border turns yellow)
         </Text>
+        <Text dimColor>{"  "}Detail focus (yellow border on right pane):</Text>
         <Text>
-          {"  "}j / k{"          "}Scroll detail pane
+          {"  "}↑/↓{"            "}Scroll the right pane (one line)
         </Text>
         <Text>
-          {"  "}f{"              "}Cycle status filter
+          {"  "}Shift+↑/↓{"      "}Page-scroll the right pane
         </Text>
         <Text>
-          {"  "}p{"              "}Cycle priority filter
+          {"  "}g / G{"          "}Top / bottom of the right pane
         </Text>
         <Text>
-          {"  "}r{"              "}Refresh tasks
+          {"  "}←{"              "}Return to the list
         </Text>
       </Box>
 
       <Box marginTop={1} flexDirection="column">
         <Text bold color="cyan">
-          Threads (Tab 5)
+          Context (extras)
+        </Text>
+        <Text>
+          {"  "}→{"              "}Drill into selected folder
         </Text>
         <Text>
-          {"  "}↑/↓{"            "}Navigate thread list
+          {"  "}←{"              "}Go up one directory
         </Text>
         <Text>
-          {"  "}Shift+↑/↓{"      "}Scroll detail pane
+          {"  "}/{"              "}Search context
+        </Text>
+      </Box>
+
+      <Box marginTop={1} flexDirection="column">
+        <Text bold color="cyan">
+          Per-panel actions
         </Text>
         <Text>
-          {"  "}j / k{"          "}Scroll detail pane
+          {"  "}Tasks{"          "}f filter · p priority · d delete · r refresh
         </Text>
         <Text>
-          {"  "}f{"              "}Cycle type filter
+          {"  "}Threads{"        "}f filter · s/ search · w follow · d delete ·
+          r refresh
         </Text>
         <Text>
-          {"  "}d{"              "}Delete thread (with confirmation)
+          {"  "}Schedules{"      "}f filter · e toggle · d delete · r refresh
         </Text>
         <Text>
-          {"  "}r{"              "}Refresh threads
+          {"  "}Workers{"        "}f filter · l toggle log/detail
         </Text>
       </Box>
 

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

@@ -6,7 +6,14 @@ import {
   listSchedules,
   updateSchedule,
 } from "../../schedules/store.ts";
+import {
+  detailPaneBorderProps,
+  type FocusState,
+  handleListDetailKey,
+} from "../listDetailKeys.ts";
 import { ansi, theme } from "../theme.ts";
+import { useLatestRef } from "../useLatestRef.ts";
+import { Scrollbar } from "./Scrollbar.tsx";
 
 interface SchedulePanelProps {
   projectDir: string;
@@ -28,11 +35,6 @@ const ENABLED_COLORS: Record<string, string> = {
   false: theme.muted,
 };
 
-const ENABLED_ANSI: Record<string, string> = {
-  true: ansi.success,
-  false: ansi.muted,
-};
-
 const ENABLED_LABELS: Record<string, string> = {
   true: "enabled",
   false: "disabled",
@@ -53,31 +55,7 @@ function formatTimestamp(iso: string | null): string {
 function buildScheduleDetailAnsi(schedule: Schedule): string {
   const lines: string[] = [];
 
-  lines.push(`${ansi.bold}${ansi.info}${schedule.name}${ansi.reset}`);
-  lines.push("");
-
-  const enabledKey = String(schedule.enabled);
-  const statusAnsi = ENABLED_ANSI[enabledKey];
-  lines.push(
-    `${ansi.bold}${ansi.primary}Status${ansi.reset}      ${statusAnsi}${ENABLED_ICONS[enabledKey]} ${ENABLED_LABELS[enabledKey]}${ansi.reset}`,
-  );
-
-  lines.push(
-    `${ansi.bold}${ansi.primary}Frequency${ansi.reset}   ${ansi.accent}${schedule.frequency}${ansi.reset}`,
-  );
-
-  lines.push(
-    `${ansi.bold}${ansi.primary}Created${ansi.reset}     ${ansi.dim}${formatTimestamp(schedule.created_at)}${ansi.reset}`,
-  );
-  lines.push(
-    `${ansi.bold}${ansi.primary}Updated${ansi.reset}     ${ansi.dim}${formatTimestamp(schedule.updated_at)}${ansi.reset}`,
-  );
-
-  lines.push(
-    `${ansi.bold}${ansi.primary}Last Run${ansi.reset}    ${formatTimestamp(schedule.last_run_at)}`,
-  );
-  lines.push("");
-
+  // Body only — name/status/frequency/last-run live in the panel header.
   if (schedule.description) {
     lines.push(`${ansi.bold}${ansi.primary}Description${ansi.reset}`);
     lines.push(schedule.description);
@@ -85,7 +63,13 @@ function buildScheduleDetailAnsi(schedule: Schedule): string {
   }
 
   lines.push(
-    `${ansi.bold}${ansi.primary}ID${ansi.reset}          ${ansi.dim}${schedule.id}${ansi.reset}`,
+    `${ansi.bold}${ansi.primary}Created${ansi.reset}   ${ansi.dim}${formatTimestamp(schedule.created_at)}${ansi.reset}`,
+  );
+  lines.push(
+    `${ansi.bold}${ansi.primary}Updated${ansi.reset}   ${ansi.dim}${formatTimestamp(schedule.updated_at)}${ansi.reset}`,
+  );
+  lines.push(
+    `${ansi.bold}${ansi.primary}ID${ansi.reset}        ${ansi.dim}${schedule.id}${ansi.reset}`,
   );
 
   return lines.join("\n");
@@ -107,6 +91,7 @@ export const SchedulePanel = memo(function SchedulePanel({
   const [schedules, setSchedules] = useState<Schedule[]>([]);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [detailScroll, setDetailScroll] = useState(0);
+  const [focus, setFocus] = useState<FocusState>("list");
   const [enabledFilter, setEnabledFilter] = useState<boolean | null>(null);
   const [refreshTick, setRefreshTick] = useState(0);
   const [confirmDelete, setConfirmDelete] = useState(false);
@@ -171,12 +156,19 @@ export const SchedulePanel = memo(function SchedulePanel({
     setRefreshTick((t) => t + 1);
   }, []);
 
+  const itemCountRef = useLatestRef(schedules.length);
+  const maxDetailScrollRef = useLatestRef(maxDetailScroll);
+  const selectedScheduleRef = useLatestRef(selectedSchedule);
+  const confirmDeleteRef = useLatestRef(confirmDelete);
+  const focusRef = useLatestRef(focus);
+
   useInput(
     (input, key) => {
-      if (confirmDelete) {
+      if (confirmDeleteRef.current) {
         if (input === "y" || input === "d") {
-          if (selectedSchedule) {
-            deleteSchedule(projectDir, selectedSchedule.id).then(() => {
+          const s = selectedScheduleRef.current;
+          if (s) {
+            deleteSchedule(projectDir, s.id).then(() => {
               forceRefresh();
             });
           }
@@ -187,47 +179,17 @@ export const SchedulePanel = memo(function SchedulePanel({
         return;
       }
 
-      if (key.upArrow) {
-        if (key.shift) {
-          setDetailScroll((s) => Math.max(0, s - 1));
-        } else {
-          setSelectedIndex((i) => Math.max(0, i - 1));
-        }
-        return;
-      }
-      if (key.downArrow) {
-        if (key.shift) {
-          setDetailScroll((s) => Math.min(maxDetailScroll, s + 1));
-        } else {
-          setSelectedIndex((i) => Math.min(schedules.length - 1, i + 1));
-        }
-        return;
-      }
-
-      if (input === "j") {
-        setDetailScroll((s) => Math.min(maxDetailScroll, s + 1));
-        return;
-      }
-      if (input === "k") {
-        setDetailScroll((s) => Math.max(0, s - 1));
-        return;
-      }
-      if (input === "J") {
-        setDetailScroll((s) =>
-          Math.min(maxDetailScroll, s + PAGE_SCROLL_LINES),
-        );
-        return;
-      }
-      if (input === "K") {
-        setDetailScroll((s) => Math.max(0, s - PAGE_SCROLL_LINES));
-        return;
-      }
-      if (input === "g") {
-        setDetailScroll(0);
-        return;
-      }
-      if (input === "G") {
-        setDetailScroll(maxDetailScroll);
+      if (
+        handleListDetailKey(input, key, {
+          focusRef,
+          setFocus,
+          itemCountRef,
+          maxDetailScrollRef,
+          setSelectedIndex,
+          setDetailScroll,
+          pageScrollLines: PAGE_SCROLL_LINES,
+        })
+      ) {
         return;
       }
 
@@ -235,15 +197,17 @@ export const SchedulePanel = memo(function SchedulePanel({
         setEnabledFilter((f) => cycleFilter(f, ENABLED_FILTERS));
         return;
       }
-      if (input === "e" && selectedSchedule) {
-        updateSchedule(projectDir, selectedSchedule.id, {
-          enabled: !selectedSchedule.enabled,
+      if (input === "e") {
+        const s = selectedScheduleRef.current;
+        if (!s) return;
+        updateSchedule(projectDir, s.id, {
+          enabled: !s.enabled,
         }).then(() => {
           forceRefresh();
         });
         return;
       }
-      if (input === "d" && selectedSchedule) {
+      if (input === "d" && selectedScheduleRef.current) {
         setConfirmDelete(true);
         return;
       }
@@ -353,29 +317,66 @@ export const SchedulePanel = memo(function SchedulePanel({
         flexGrow={1}
         height={visibleRows + 1}
         paddingX={1}
+        {...detailPaneBorderProps(focus)}
         overflow="hidden"
       >
-        {detailVisible.map((line, i) => {
-          const lineNum = detailScroll + i;
-          return <Text key={lineNum}>{line || " "}</Text>;
-        })}
-        {detailLines.length > visibleRows && (
-          <Box>
-            <Text dimColor>
-              f filter · e toggle · ↑↓ select · j/k scroll · d delete · r
-              refresh · [{detailScroll + 1}–
-              {Math.min(detailScroll + visibleRows, detailLines.length)} of{" "}
-              {detailLines.length}]
-            </Text>
-          </Box>
+        {selectedSchedule && (
+          <ScheduleDetailHeader schedule={selectedSchedule} />
         )}
-        {detailLines.length <= visibleRows && <Box flexGrow={1} />}
-        {detailLines.length <= visibleRows && (
+        <Box flexDirection="row" flexGrow={1} overflow="hidden">
+          <Box flexDirection="column" flexGrow={1} overflow="hidden">
+            {detailVisible.map((line, i) => {
+              const lineNum = detailScroll + i;
+              return (
+                <Text key={lineNum} wrap="truncate-end">
+                  {line || " "}
+                </Text>
+              );
+            })}
+          </Box>
+          <Scrollbar
+            total={detailLines.length}
+            visible={visibleRows - 3}
+            offset={detailScroll}
+            height={visibleRows - 3}
+            focused={focus === "detail"}
+          />
+        </Box>
+        <Text dimColor>
+          {focus === "detail"
+            ? "↑↓ scroll · ⇧↑↓ page · g/G top/bot · ← back to list"
+            : "↑↓ select · → enter detail · f filter · e toggle · d delete · r refresh"}
+        </Text>
+      </Box>
+    </Box>
+  );
+});
+
+function ScheduleDetailHeader({ schedule }: { schedule: Schedule }) {
+  const enabledKey = String(schedule.enabled);
+  return (
+    <Box flexDirection="column">
+      <Box>
+        <Text bold color={theme.info} wrap="truncate-end">
+          {schedule.name}
+        </Text>
+      </Box>
+      <Box>
+        <Text wrap="truncate-end">
+          <Text color={ENABLED_COLORS[enabledKey]}>
+            {ENABLED_ICONS[enabledKey]} {ENABLED_LABELS[enabledKey]}
+          </Text>
+          <Text dimColor> · </Text>
+          <Text color={theme.accent}>{schedule.frequency}</Text>
           <Text dimColor>
-            f filter · e toggle · ↑↓ select · d delete · r refresh
+            {" · last run "}
+            {formatTimestamp(schedule.last_run_at)}
           </Text>
-        )}
+        </Text>
+      </Box>
+      <Box>
+        <Text dimColor>{"─".repeat(2)}</Text>
       </Box>
     </Box>
   );
-});
+}

package/src/tui/components/Scrollbar.tsx

@@ -0,0 +1,73 @@
+import { Box, Text } from "ink";
+import { memo } from "react";
+
+interface ScrollbarProps {
+  /** Total number of lines in the document. */
+  total: number;
+  /** Number of lines currently visible. */
+  visible: number;
+  /** Scroll offset (top visible line). */
+  offset: number;
+  /** Height of the scrollbar in rows. */
+  height: number;
+  /** Whether the parent pane is currently focused — colors the thumb. */
+  focused?: boolean;
+}
+
+/**
+ * Vertical scrollbar rendered as a column of unicode block characters.
+ * The thumb's height and position are proportional to how much of the
+ * document is visible. Used in detail panes so the user can see at a glance
+ * where they are within a long document.
+ */
+export const Scrollbar = memo(function Scrollbar({
+  total,
+  visible,
+  offset,
+  height,
+  focused,
+}: ScrollbarProps) {
+  if (height <= 0 || total <= 0 || total <= visible) {
+    // Nothing to scroll — render an empty column to preserve layout.
+    return (
+      <Box flexDirection="column" width={1} height={height}>
+        {Array.from({ length: Math.max(0, height) }, (_, i) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: positional rows
+          <Text key={i} dimColor>
+            {" "}
+          </Text>
+        ))}
+      </Box>
+    );
+  }
+
+  const thumbHeight = Math.max(1, Math.round((visible / total) * height));
+  const maxOffset = Math.max(1, total - visible);
+  const thumbStart = Math.min(
+    height - thumbHeight,
+    Math.round((offset / maxOffset) * (height - thumbHeight)),
+  );
+
+  const cells: Array<{ thumb: boolean }> = [];
+  for (let i = 0; i < height; i++) {
+    cells.push({ thumb: i >= thumbStart && i < thumbStart + thumbHeight });
+  }
+
+  return (
+    <Box flexDirection="column" width={1} height={height}>
+      {cells.map((cell, i) =>
+        cell.thumb ? (
+          // biome-ignore lint/suspicious/noArrayIndexKey: positional rows
+          <Text key={i} color={focused ? "yellow" : "gray"}>
+            █
+          </Text>
+        ) : (
+          // biome-ignore lint/suspicious/noArrayIndexKey: positional rows
+          <Text key={i} dimColor>
+            │
+          </Text>
+        ),
+      )}
+    </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