botholomew 0.14.2 → 0.15.0

package/src/tui/components/ToolPanel.tsx

@@ -1,6 +1,13 @@
 import { Box, Text, useInput, useStdout } from "ink";
 import { memo, useEffect, useMemo, useState } from "react";
+import {
+  detailPaneBorderProps,
+  type FocusState,
+  handleListDetailKey,
+} from "../listDetailKeys.ts";
 import { ansi, theme } from "../theme.ts";
+import { useLatestRef } from "../useLatestRef.ts";
+import { Scrollbar } from "./Scrollbar.tsx";
 import { resolveToolDisplay, type ToolCallData } from "./ToolCall.tsx";
 
 interface ToolPanelProps {
@@ -68,26 +75,9 @@ function colorizeValue(value: unknown, indent: number): string {
 function buildDetailAnsi(tool: ToolCallData): string {
   const lines: string[] = [];
 
-  const time = tool.timestamp.toLocaleTimeString([], {
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
-  });
-
-  const { displayName, displayInput } = resolveToolDisplay(
-    tool.name,
-    tool.input,
-  );
-  lines.push(`${ansi.bold}${ansi.info}${displayName}${ansi.reset}`);
-  if (tool.name === "mcp_exec") {
-    lines.push(`${ansi.dim}via mcp_exec${ansi.reset}`);
-  }
-  lines.push(`${ansi.dim}Time: ${time}${ansi.reset}`);
-  if (tool.running) {
-    lines.push(`${ansi.accent}⟳ running${ansi.reset}`);
-  }
-  lines.push("");
+  const { displayInput } = resolveToolDisplay(tool.name, tool.input);
 
+  // Body only — name/server/status/time live in the panel header now.
   lines.push(`${ansi.bold}${ansi.primary}Input${ansi.reset}`);
   lines.push(colorizeJson(displayInput));
   lines.push("");
@@ -123,6 +113,7 @@ export const ToolPanel = memo(function ToolPanel({
   const termRows = stdout?.rows ?? 24;
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [detailScroll, setDetailScroll] = useState(0);
+  const [focus, setFocus] = useState<FocusState>("list");
 
   // Reverse-chronological order (most recent first)
   const reversedCalls = useMemo(() => [...toolCalls].reverse(), [toolCalls]);
@@ -163,57 +154,21 @@ export const ToolPanel = memo(function ToolPanel({
     setDetailScroll(0);
   }, [selectedIndex]);
 
+  const itemCountRef = useLatestRef(reversedCalls.length);
+  const maxDetailScrollRef = useLatestRef(maxDetailScroll);
+  const focusRef = useLatestRef(focus);
+
   useInput(
     (input, key) => {
-      if (key.upArrow) {
-        if (key.shift) {
-          // Shift+up scrolls detail
-          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(reversedCalls.length - 1, i + 1));
-        }
-        return;
-      }
-
-      // j/k vim-style for detail scrolling (single line)
-      if (input === "j") {
-        setDetailScroll((s) => Math.min(maxDetailScroll, s + 1));
-        return;
-      }
-      if (input === "k") {
-        setDetailScroll((s) => Math.max(0, s - 1));
-        return;
-      }
-
-      // J/K for page scrolling (hold shift or caps)
-      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;
-      }
-
-      // g/G for top/bottom
-      if (input === "g") {
-        setDetailScroll(0);
-        return;
-      }
-      if (input === "G") {
-        setDetailScroll(maxDetailScroll);
-        return;
-      }
+      handleListDetailKey(input, key, {
+        focusRef,
+        setFocus,
+        itemCountRef,
+        maxDetailScrollRef,
+        setSelectedIndex,
+        setDetailScroll,
+        pageScrollLines: PAGE_SCROLL_LINES,
+      });
     },
     { isActive },
   );
@@ -316,27 +271,71 @@ export const ToolPanel = memo(function ToolPanel({
         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>
-              ↑↓ select · j/k scroll · J/K page · g/G top/bottom · [
-              {detailScroll + 1}–
-              {Math.min(detailScroll + visibleRows, detailLines.length)} of{" "}
-              {detailLines.length}]
-            </Text>
+        {selectedTool && <ToolDetailHeader tool={selectedTool} />}
+        <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>
-        )}
-        {detailLines.length <= visibleRows && <Box flexGrow={1} />}
-        {detailLines.length <= visibleRows && (
-          <Text dimColor>↑↓ select tool calls</Text>
-        )}
+          <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"}
+        </Text>
       </Box>
     </Box>
   );
 });
+
+function ToolDetailHeader({ tool }: { tool: ToolCallData }) {
+  const { displayName } = resolveToolDisplay(tool.name, tool.input);
+  const time = tool.timestamp.toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+  const isMcp = tool.name === "mcp_exec";
+  const status = tool.running
+    ? { color: theme.accent, label: "⟳ running" }
+    : tool.isError
+      ? { color: theme.error, label: "✘ error" }
+      : tool.output
+        ? { color: theme.success, label: "✔ done" }
+        : { color: theme.muted, label: "— no output" };
+  return (
+    <Box flexDirection="column">
+      <Box>
+        <Text bold color={theme.info} wrap="truncate-end">
+          {displayName}
+        </Text>
+      </Box>
+      <Box>
+        <Text wrap="truncate-end">
+          <Text dimColor>{isMcp ? "mcp_exec · " : ""}</Text>
+          <Text color={status.color}>{status.label}</Text>
+          <Text dimColor> · {time}</Text>
+        </Text>
+      </Box>
+      <Box>
+        <Text dimColor>{"─".repeat(2)}</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/WorkerPanel.tsx

@@ -2,6 +2,13 @@ import { Box, Text, useInput, useStdout } from "ink";
 import { memo, useEffect, useMemo, useState } from "react";
 import { readLogTail } from "../../worker/log-reader.ts";
 import { listWorkers, type Worker } from "../../workers/store.ts";
+import {
+  detailPaneBorderProps,
+  type FocusState,
+  handleListDetailKey,
+} from "../listDetailKeys.ts";
+import { useLatestRef } from "../useLatestRef.ts";
+import { Scrollbar } from "./Scrollbar.tsx";
 
 interface WorkerPanelProps {
   projectDir: string;
@@ -63,6 +70,7 @@ export const WorkerPanel = memo(function WorkerPanel({
   const [logTruncated, setLogTruncated] = useState(false);
   const [logScroll, setLogScroll] = useState(0);
   const [logFollow, setLogFollow] = useState(true);
+  const [focus, setFocus] = useState<FocusState>("list");
 
   useEffect(() => {
     let mounted = true;
@@ -150,76 +158,50 @@ export const WorkerPanel = memo(function WorkerPanel({
     }
   }, [viewMode, logFollow, maxLogScroll]);
 
+  const itemCountRef = useLatestRef(workers.length);
+  const maxLogScrollRef = useLatestRef(maxLogScroll);
+  const focusRef = useLatestRef(focus);
+
+  // The right pane scrolls with arrows when focused. Tee the log scroll into
+  // the follow-state so reaching the bottom resumes follow mode (and any
+  // explicit scroll-up pauses it).
+  const setLogScrollWithFollow = (
+    next: number | ((prev: number) => number),
+  ) => {
+    setLogScroll((s) => {
+      const v = typeof next === "function" ? next(s) : next;
+      const max = maxLogScrollRef.current;
+      const clamped = Math.max(0, Math.min(max, v));
+      setLogFollow(clamped >= max);
+      return clamped;
+    });
+  };
+
   useInput(
     (input, key) => {
       if (!isActive) return;
 
+      // `l` toggles between detail (worker info) and log (tail) view in the
+      // right pane.
       if (input === "l") {
         setViewMode((m) => (m === "log" ? "detail" : "log"));
         return;
       }
 
-      if (key.upArrow) {
-        if (viewMode === "log" && key.shift) {
-          setLogFollow(false);
-          setLogScroll((s) => Math.max(0, s - 1));
-          return;
-        }
-        setSelectedIndex((i) => Math.max(0, i - 1));
-        return;
-      }
-      if (key.downArrow) {
-        if (viewMode === "log" && key.shift) {
-          setLogScroll((s) => {
-            const next = Math.min(maxLogScroll, s + 1);
-            if (next >= maxLogScroll) setLogFollow(true);
-            return next;
-          });
-          return;
-        }
-        setSelectedIndex((i) => Math.min(workers.length - 1, i + 1));
+      if (
+        handleListDetailKey(input, key, {
+          focusRef,
+          setFocus,
+          itemCountRef,
+          maxDetailScrollRef: maxLogScrollRef,
+          setSelectedIndex,
+          setDetailScroll: setLogScrollWithFollow,
+          pageScrollLines: PAGE_SCROLL_LINES,
+        })
+      ) {
         return;
       }
 
-      if (viewMode === "log") {
-        if (input === "j") {
-          setLogScroll((s) => {
-            const next = Math.min(maxLogScroll, s + 1);
-            if (next >= maxLogScroll) setLogFollow(true);
-            return next;
-          });
-          return;
-        }
-        if (input === "k") {
-          setLogFollow(false);
-          setLogScroll((s) => Math.max(0, s - 1));
-          return;
-        }
-        if (input === "J") {
-          setLogScroll((s) => {
-            const next = Math.min(maxLogScroll, s + PAGE_SCROLL_LINES);
-            if (next >= maxLogScroll) setLogFollow(true);
-            return next;
-          });
-          return;
-        }
-        if (input === "K") {
-          setLogFollow(false);
-          setLogScroll((s) => Math.max(0, s - PAGE_SCROLL_LINES));
-          return;
-        }
-        if (input === "g") {
-          setLogFollow(false);
-          setLogScroll(0);
-          return;
-        }
-        if (input === "G") {
-          setLogFollow(true);
-          setLogScroll(maxLogScroll);
-          return;
-        }
-      }
-
       if (input === "f") {
         setFilterIdx((i) => (i + 1) % STATUS_FILTERS.length);
         return;
@@ -240,9 +222,11 @@ export const WorkerPanel = memo(function WorkerPanel({
         <Text dimColor> · filter: </Text>
         <Text color="yellow">{filterLabel}</Text>
         <Text dimColor>
-          {viewMode === "log"
-            ? "  · [l] back  [↑↓] select  [j/k] scroll  [g/G] top/bot  [f] filter"
-            : "  · [l] view log  [f] cycle filter  [↑↓] select"}
+          {focus === "detail"
+            ? "  · ↑↓ scroll  ⇧↑↓ page  g/G top/bot  ← back to list  l toggle"
+            : viewMode === "log"
+              ? "  · ↑↓ select  → enter log  l detail  f filter"
+              : "  · ↑↓ select  → enter detail  l view log  f filter"}
         </Text>
       </Box>
 
@@ -287,22 +271,38 @@ export const WorkerPanel = memo(function WorkerPanel({
               );
             })}
           </Box>
-          <Box flexDirection="column" flexGrow={1}>
-            {selected ? (
-              viewMode === "log" ? (
-                <WorkerLogView
-                  worker={selected}
-                  lines={logLines}
-                  scroll={logScroll}
-                  visibleRows={visibleRows}
-                  truncated={logTruncated}
-                  size={logSize}
-                  follow={logFollow}
-                />
-              ) : (
-                <WorkerDetail worker={selected} now={now} />
-              )
-            ) : null}
+          <Box
+            flexDirection="row"
+            flexGrow={1}
+            paddingX={1}
+            {...detailPaneBorderProps(focus)}
+          >
+            <Box flexDirection="column" flexGrow={1}>
+              {selected ? (
+                viewMode === "log" ? (
+                  <WorkerLogView
+                    worker={selected}
+                    lines={logLines}
+                    scroll={logScroll}
+                    visibleRows={visibleRows}
+                    truncated={logTruncated}
+                    size={logSize}
+                    follow={logFollow}
+                  />
+                ) : (
+                  <WorkerDetail worker={selected} now={now} />
+                )
+              ) : null}
+            </Box>
+            {viewMode === "log" && (
+              <Scrollbar
+                total={logLines.length}
+                visible={visibleRows - 1}
+                offset={logScroll}
+                height={visibleRows - 1}
+                focused={focus === "detail"}
+              />
+            )}
           </Box>
         </Box>
       )}

package/src/tui/listDetailKeys.ts

@@ -0,0 +1,124 @@
+import type { RefObject } from "react";
+
+/**
+ * Standard list+detail keyboard model used by every non-chat panel.
+ *
+ * Two columns: a list/tree on the left and a detail/preview pane on the
+ * right. The right pane has an explicit focus state — visualized by its
+ * border (dashed when unfocused, solid yellow when focused) — and the
+ * arrow keys mean different things depending on it.
+ *
+ *   focus = "list"  (default)
+ *     ↑ / ↓        Move list selection
+ *     →            Move focus into the detail pane
+ *     ←            (panel-specific; e.g. Context goes up a directory)
+ *
+ *   focus = "detail"
+ *     ↑ / ↓        Scroll the detail pane (one line)
+ *     Shift+↑/↓    Page-scroll the detail pane
+ *     g / G        Jump to top / bottom of the detail pane
+ *     ←            Return focus to the list
+ *
+ * Panels can intercept ←/→ via `onLeftArrow` / `onRightArrow` to add their
+ * own semantics (Context uses → on a folder to drill in). Returning `true`
+ * from those callbacks means "I handled it, don't fall through to the
+ * default focus transition".
+ *
+ * State is read through refs because Ink 7's `useInput` (wrapped in React's
+ * `useEffectEvent`) intermittently sees a stale closure on Bun + React 19.2.
+ */
+export type FocusState = "list" | "detail";
+
+export interface ListDetailKeyOptions {
+  focusRef: RefObject<FocusState>;
+  setFocus: (next: FocusState) => void;
+  itemCountRef: RefObject<number>;
+  maxDetailScrollRef: RefObject<number>;
+  setSelectedIndex: (updater: (prev: number) => number) => void;
+  setDetailScroll: (next: number | ((prev: number) => number)) => void;
+  pageScrollLines?: number;
+  /** Return true if the panel handled ←; otherwise falls through to default. */
+  onLeftArrow?: () => boolean;
+  /** Return true if the panel handled →; otherwise falls through to default. */
+  onRightArrow?: () => boolean;
+}
+
+const DEFAULT_PAGE_SCROLL = 10;
+
+export function handleListDetailKey(
+  input: string,
+  // biome-ignore lint/suspicious/noExplicitAny: Ink's Key type is not exported
+  key: any,
+  opts: ListDetailKeyOptions,
+): boolean {
+  const page = opts.pageScrollLines ?? DEFAULT_PAGE_SCROLL;
+  const focus = opts.focusRef.current;
+
+  if (key.rightArrow) {
+    if (opts.onRightArrow?.()) return true;
+    if (focus === "list") opts.setFocus("detail");
+    return true;
+  }
+  if (key.leftArrow) {
+    if (opts.onLeftArrow?.()) return true;
+    if (focus === "detail") opts.setFocus("list");
+    return true;
+  }
+  if (key.upArrow) {
+    if (focus === "detail") {
+      const step = key.shift ? page : 1;
+      opts.setDetailScroll((s) => Math.max(0, s - step));
+    } else {
+      opts.setSelectedIndex((i) => Math.max(0, i - 1));
+    }
+    return true;
+  }
+  if (key.downArrow) {
+    if (focus === "detail") {
+      const step = key.shift ? page : 1;
+      opts.setDetailScroll((s) =>
+        Math.min(opts.maxDetailScrollRef.current, s + step),
+      );
+    } else {
+      opts.setSelectedIndex((i) =>
+        Math.min(opts.itemCountRef.current - 1, i + 1),
+      );
+    }
+    return true;
+  }
+  // Jump keys only make sense in the detail pane.
+  if (focus === "detail") {
+    if (input === "g") {
+      opts.setDetailScroll(0);
+      return true;
+    }
+    if (input === "G") {
+      opts.setDetailScroll(opts.maxDetailScrollRef.current);
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Visual style for the right pane's border. Panels render the right column
+ * inside a `<Box>` with these props so the focus state is obvious at a
+ * glance: dashed dim border when the list owns focus, bold yellow border
+ * when the detail pane owns it.
+ */
+const DASHED_BORDER = {
+  topLeft: "┌",
+  top: "┄",
+  topRight: "┐",
+  left: "┆",
+  bottomLeft: "└",
+  bottom: "┄",
+  bottomRight: "┘",
+  right: "┆",
+} as const;
+
+export function detailPaneBorderProps(focus: FocusState) {
+  return focus === "detail"
+    ? { borderStyle: "bold" as const, borderColor: "yellow" as const }
+    : { borderStyle: DASHED_BORDER, borderColor: "gray" as const };
+}

package/src/tui/useLatestRef.ts

@@ -0,0 +1,18 @@
+import { useRef } from "react";
+
+/**
+ * Returns a ref whose `.current` is always the latest committed value.
+ *
+ * Workaround for a stale-closure issue we hit with Ink 7's `useInput`: the
+ * callback we pass is wrapped in React's `useEffectEvent`, but on Bun + React
+ * 19.2 the keyboard handler often sees the *initial* render's closure even
+ * after subsequent commits (e.g. an `entries` array still appearing empty
+ * after the populating `setState` has rendered). Reading from a ref that's
+ * eagerly assigned during render side-steps the issue — refs always read the
+ * latest assigned value regardless of which closure the caller is in.
+ */
+export function useLatestRef<T>(value: T) {
+  const ref = useRef<T>(value);
+  ref.current = value;
+  return ref;
+}

package/src/worker/prompt.ts

@@ -76,8 +76,17 @@ export async function loadPersistentContext(
  * Build common meta header (version, time, OS, user).
  */
 export function buildMetaHeader(projectDir: string): string {
+  const now = new Date();
+  const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const localTime = now.toLocaleString("en-US", {
+    timeZone: timezone,
+    dateStyle: "full",
+    timeStyle: "long",
+  });
   return `# Botholomew v${pkg.version}
-Current time: ${new Date().toISOString()}
+Current time (UTC): ${now.toISOString()}
+Current time (local): ${localTime}
+Timezone: ${timezone}
 Project directory: ${projectDir}
 OS: ${process.platform} ${process.arch}
 User: ${process.env.USER || process.env.USERNAME || "unknown"}