botholomew 0.14.2 → 0.15.0

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/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/TabBar.tsx

@@ -2,15 +2,17 @@ import { Box, Text } from "ink";
 
 export type TabId = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 
-const TABS: { id: TabId; label: string }[] = [
-  { id: 1, label: "Chat" },
-  { id: 2, label: "Tools" },
-  { id: 3, label: "Context" },
-  { id: 4, label: "Tasks" },
-  { id: 5, label: "Threads" },
-  { id: 6, label: "Schedules" },
-  { id: 7, label: "Workers" },
-  { id: 8, label: "Help" },
+// Help uses "?" (no Ctrl) because Ctrl+H is delivered as backspace by most
+// terminals. The other panels use Ctrl+<letter>.
+const TABS: { id: TabId; label: string; key: string }[] = [
+  { id: 1, label: "Chat", key: "^a" },
+  { 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: 6, label: "Schedules", key: "^s" },
+  { id: 7, label: "Workers", key: "^w" },
+  { id: 8, label: "Help", key: "?" },
 ];
 
 interface TabBarProps {
@@ -20,7 +22,7 @@ interface TabBarProps {
 export function TabBar({ activeTab }: TabBarProps) {
   return (
     <Box paddingX={1} gap={1}>
-      {TABS.map(({ id, label }) => {
+      {TABS.map(({ id, label, key: shortcut }) => {
         const active = id === activeTab;
         return (
           <Box key={id}>
@@ -30,13 +32,11 @@ export function TabBar({ activeTab }: TabBarProps) {
               dimColor={!active}
               backgroundColor={active ? "#1a3a5c" : undefined}
             >
-              {` ${id} ${label} `}
+              {` ${shortcut} ${label} `}
             </Text>
           </Box>
         );
       })}
-      <Box flexGrow={1} />
-      <Text dimColor>tab to switch</Text>
     </Box>
   );
 }