botholomew 0.22.2 → 0.24.0

package/src/tui/App.tsx

@@ -4,6 +4,7 @@ import {
   BUILTIN_SLASH_COMMANDS,
   type SlashCommand,
 } from "../skills/commands.ts";
+import { ApprovalPrompt } from "./components/ApprovalPrompt.tsx";
 import { InputBar } from "./components/InputBar.tsx";
 import { AnimatedLogo } from "./components/Logo.tsx";
 import {
@@ -17,6 +18,8 @@ import { TabBar, type TabId } from "./components/TabBar.tsx";
 import { TabPanels } from "./components/TabPanels.tsx";
 import { useChatSubmit } from "./handleSubmit.ts";
 import { useAppKeybindings } from "./hooks/useAppKeybindings.ts";
+import { useApprovalCount } from "./hooks/useApprovalCount.ts";
+import { useApprovalPrompt } from "./hooks/useApprovalPrompt.ts";
 import { useCaptureTabCycle } from "./hooks/useCaptureTabCycle.ts";
 import { useChatSession } from "./hooks/useChatSession.ts";
 import { useChatTitlePolling } from "./hooks/useChatTitlePolling.ts";
@@ -31,6 +34,7 @@ interface AppProps {
   threadId?: string;
   initialPrompt?: string;
   idleTimeoutMs: number;
+  unsafe?: boolean;
 }
 
 export function App({
@@ -38,6 +42,7 @@ export function App({
   threadId: resumeThreadId,
   initialPrompt,
   idleTimeoutMs,
+  unsafe,
 }: AppProps) {
   return (
     <IdleProvider timeoutMs={idleTimeoutMs}>
@@ -45,6 +50,7 @@ export function App({
         projectDir={projectDir}
         threadId={resumeThreadId}
         initialPrompt={initialPrompt}
+        unsafe={unsafe}
       />
     </IdleProvider>
   );
@@ -54,12 +60,14 @@ interface AppInnerProps {
   projectDir: string;
   threadId?: string;
   initialPrompt?: string;
+  unsafe?: boolean;
 }
 
 function AppInner({
   projectDir,
   threadId: resumeThreadId,
   initialPrompt,
+  unsafe,
 }: AppInnerProps) {
   const { markActivity } = useIdle();
   const rows = useTerminalRows();
@@ -85,6 +93,7 @@ function AppInner({
     projectDir,
     resumeThreadId,
     initialPrompt,
+    unsafe,
     setMessages,
     setError,
   });
@@ -114,6 +123,12 @@ function AppInner({
 
   const { chatTitle, setChatTitle } = useChatTitlePolling(ready, sessionRef);
 
+  const { pending: approvalPending, decide: decideApproval } =
+    useApprovalPrompt(sessionRef);
+  const approvalActiveRef = useRef(false);
+  approvalActiveRef.current = approvalPending != null;
+  const pendingApprovals = useApprovalCount(projectDir, ready);
+
   useCaptureTabCycle(setActiveTab);
 
   // Auto-submit initial prompt once session is ready
@@ -166,6 +181,7 @@ function AppInner({
     slashCommandsRef,
     inputValueRef,
     markActivityRef,
+    approvalActiveRef,
   });
 
   const handleSubmit = useChatSubmit({
@@ -293,17 +309,24 @@ function AppInner({
         />
       )}
 
+      {/* Inline approval prompt (gates input while a gated tool call waits) */}
+      <ApprovalPrompt request={approvalPending} onDecide={decideApproval} />
+
       {/* Bottom bar: StatusBar + InputBar (input only on Chat tab) + TabBar */}
       <InputBar
         value={inputValue}
         onChange={setInputValue}
         onSubmit={handleSubmit}
-        disabled={activeTab !== 1 || clearing}
+        disabled={activeTab !== 1 || clearing || approvalPending != null}
         history={inputHistory}
         header={inputBarHeader}
         slashCommands={slashCommands}
       />
-      <TabBar activeTab={activeTab} usage={usage} />
+      <TabBar
+        activeTab={activeTab}
+        usage={usage}
+        pendingApprovals={pendingApprovals}
+      />
     </Box>
   );
 }

package/src/tui/components/ApprovalPanel.tsx

@@ -0,0 +1,222 @@
+import { Box, Text, useInput } from "ink";
+import { memo, useCallback, useEffect, useState } from "react";
+import { decideAndRequeue } from "../../approvals/decide.ts";
+import type { Approval, ApprovalStatus } from "../../approvals/schema.ts";
+import { listApprovals } from "../../approvals/store.ts";
+import { theme } from "../theme.ts";
+import { useLatestRef } from "../useLatestRef.ts";
+import { useTerminalSize } from "../useTerminalSize.ts";
+
+interface ApprovalPanelProps {
+  projectDir: string;
+  isActive: boolean;
+}
+
+const SIDEBAR_WIDTH = 44;
+
+const STATUS_ICONS: Record<ApprovalStatus, string> = {
+  pending: "◌",
+  approved: "✔",
+  denied: "✖",
+};
+
+const STATUS_COLORS: Record<ApprovalStatus, string> = {
+  pending: theme.accent,
+  approved: theme.success,
+  denied: theme.error,
+};
+
+function prettyArgs(args: string): string {
+  try {
+    return JSON.stringify(JSON.parse(args), null, 2);
+  } catch {
+    return args;
+  }
+}
+
+export const ApprovalPanel = memo(function ApprovalPanel({
+  projectDir,
+  isActive,
+}: ApprovalPanelProps) {
+  const { rows: termRows } = useTerminalSize();
+  const [approvals, setApprovals] = useState<Approval[]>([]);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [refreshTick, setRefreshTick] = useState(0);
+  const [notice, setNotice] = useState<string | null>(null);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: refreshTick triggers manual refresh
+  useEffect(() => {
+    let mounted = true;
+    const refresh = async () => {
+      try {
+        const result = await listApprovals(projectDir);
+        if (mounted) {
+          setApprovals(result);
+          setSelectedIndex((prev) =>
+            Math.min(prev, Math.max(0, result.length - 1)),
+          );
+        }
+      } catch {
+        // ignore — next tick retries
+      }
+    };
+    refresh();
+    const interval = setInterval(refresh, 5000);
+    return () => {
+      mounted = false;
+      clearInterval(interval);
+    };
+  }, [projectDir, refreshTick]);
+
+  const forceRefresh = useCallback(() => setRefreshTick((t) => t + 1), []);
+
+  const selected = approvals[selectedIndex];
+  const approvalsRef = useLatestRef(approvals);
+  const selectedRef = useLatestRef(selected);
+
+  const decide = useCallback(
+    (decision: "approved" | "denied") => {
+      const a = selectedRef.current;
+      if (!a || a.status !== "pending") return;
+      void decideAndRequeue(projectDir, a.id, decision, "tui").then(() => {
+        setNotice(
+          `${decision === "approved" ? "Approved" : "Denied"} ${a.server}/${a.tool}`,
+        );
+        forceRefresh();
+      });
+    },
+    [projectDir, forceRefresh, selectedRef],
+  );
+
+  useInput(
+    (input, key) => {
+      if (key.upArrow || input === "k") {
+        setSelectedIndex((i) => Math.max(0, i - 1));
+        return;
+      }
+      if (key.downArrow || input === "j") {
+        setSelectedIndex((i) =>
+          Math.min(approvalsRef.current.length - 1, i + 1),
+        );
+        return;
+      }
+      if (input === "a") decide("approved");
+      else if (input === "d") decide("denied");
+      else if (key.ctrl && (input === "r" || input === "R")) forceRefresh();
+    },
+    { isActive },
+  );
+
+  const visibleRows = Math.max(1, termRows - 6);
+  const pendingCount = approvals.filter((a) => a.status === "pending").length;
+
+  if (approvals.length === 0) {
+    return (
+      <Box flexDirection="column" flexGrow={1} paddingX={1}>
+        <Text dimColor>
+          No approval requests. When a worker hits a gated mcpx tool, the
+          request appears here for you to approve or deny.
+        </Text>
+      </Box>
+    );
+  }
+
+  const sidebarOffset = Math.max(
+    0,
+    Math.min(
+      selectedIndex - Math.floor(visibleRows / 2),
+      approvals.length - visibleRows,
+    ),
+  );
+  const sidebarVisible = approvals.slice(
+    sidebarOffset,
+    sidebarOffset + visibleRows,
+  );
+
+  return (
+    <Box flexGrow={1} height={visibleRows + 1} overflow="hidden">
+      <Box
+        flexDirection="column"
+        width={SIDEBAR_WIDTH}
+        height={visibleRows + 1}
+        borderStyle="single"
+        borderColor={theme.muted}
+        borderRight
+        borderTop={false}
+        borderBottom={false}
+        borderLeft={false}
+        overflow="hidden"
+      >
+        <Box paddingX={1}>
+          <Text bold dimColor>
+            Approvals ({approvals.length}
+            {pendingCount > 0 ? `, ${pendingCount} pending` : ""})
+          </Text>
+        </Box>
+        {sidebarVisible.map((a, vi) => {
+          const i = vi + sidebarOffset;
+          const isSelected = i === selectedIndex;
+          const label = `${a.server}/${a.tool}`;
+          const maxName = SIDEBAR_WIDTH - 8;
+          const nameDisplay =
+            label.length > maxName ? `${label.slice(0, maxName - 1)}…` : label;
+          return (
+            <Box key={a.id} paddingX={1}>
+              <Text
+                backgroundColor={isSelected ? theme.selectionBg : undefined}
+                bold={isSelected}
+                color={isSelected ? theme.info : undefined}
+                wrap="truncate-end"
+              >
+                {isSelected ? "▸" : " "}{" "}
+                <Text color={STATUS_COLORS[a.status]}>
+                  {STATUS_ICONS[a.status]}
+                </Text>{" "}
+                {nameDisplay}
+              </Text>
+            </Box>
+          );
+        })}
+      </Box>
+
+      <Box
+        flexDirection="column"
+        flexGrow={1}
+        height={visibleRows + 1}
+        paddingX={1}
+        overflow="hidden"
+      >
+        {selected && (
+          <>
+            <Text bold color={theme.toolName} wrap="truncate-end">
+              {selected.server}/{selected.tool}
+            </Text>
+            <Text>
+              <Text color={STATUS_COLORS[selected.status]}>
+                {STATUS_ICONS[selected.status]} {selected.status}
+              </Text>
+              {selected.reason ? (
+                <Text dimColor> · {selected.reason}</Text>
+              ) : null}
+            </Text>
+            {selected.task_id && <Text dimColor>task: {selected.task_id}</Text>}
+            <Box marginTop={1} flexDirection="column">
+              <Text bold color={theme.primary}>
+                Arguments
+              </Text>
+              <Text dimColor wrap="truncate-end">
+                {prettyArgs(selected.args)}
+              </Text>
+            </Box>
+          </>
+        )}
+        <Box flexGrow={1} />
+        {notice && <Text color={theme.success}>{notice}</Text>}
+        <Text dimColor>
+          ↑↓ select · <Text color={theme.success}>a</Text> approve ·{" "}
+          <Text color={theme.error}>d</Text> deny · ^R refresh
+        </Text>
+      </Box>
+    </Box>
+  );
+});

package/src/tui/components/ApprovalPrompt.tsx

@@ -0,0 +1,68 @@
+import { Box, Text, useInput } from "ink";
+import type { ChatApprovalRequest } from "../../chat/approval.ts";
+import type { ApprovalDecision } from "../hooks/useApprovalPrompt.ts";
+import { theme } from "../theme.ts";
+
+interface ApprovalPromptProps {
+  request: ChatApprovalRequest | null;
+  onDecide: (decision: ApprovalDecision) => void;
+}
+
+/** Compact one-line preview of the tool arguments. */
+function previewArgs(args: Record<string, unknown>): string {
+  const json = JSON.stringify(args);
+  if (json === undefined) return "{}";
+  return json.length > 120 ? `${json.slice(0, 117)}…` : json;
+}
+
+/**
+ * Inline modal asking the user to approve a gated mcpx tool call. While a
+ * request is pending it owns keyboard input (y/a/n/Esc); App disables the
+ * input bar and global keybindings so the keystrokes land here.
+ */
+export function ApprovalPrompt({ request, onDecide }: ApprovalPromptProps) {
+  useInput(
+    (input, key) => {
+      if (key.escape || input === "n") onDecide("deny");
+      else if (input === "y") onDecide("approve");
+      else if (input === "a") onDecide("always");
+    },
+    { isActive: !!request },
+  );
+
+  if (!request) return null;
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor={theme.accentBorder}
+      paddingX={1}
+    >
+      <Text color={theme.accent} bold>
+        ⚠ Approve tool call?
+      </Text>
+      <Text>
+        <Text color={theme.toolName} bold>
+          {request.server}/{request.tool}
+        </Text>
+        <Text color={theme.muted}> ({request.reason})</Text>
+      </Text>
+      <Text color={theme.muted}>{previewArgs(request.args)}</Text>
+      <Text>
+        <Text color={theme.success} bold>
+          y
+        </Text>{" "}
+        approve ·{" "}
+        <Text color={theme.info} bold>
+          a
+        </Text>{" "}
+        always allow this tool ·{" "}
+        <Text color={theme.error} bold>
+          n
+        </Text>
+        /Esc deny
+      </Text>
+    </Box>
+  );
+}

package/src/tui/components/HelpPanel.tsx

@@ -64,6 +64,9 @@ export const HelpPanel = memo(function HelpPanel({
         <Text>
           {"  "}Ctrl+w{"         "}Workers
         </Text>
+        <Text>
+          {"  "}Ctrl+p{"         "}Approvals
+        </Text>
         <Text>
           {"  "}Ctrl+g{"        "}Help (Ctrl+/ also works in most terminals)
         </Text>

package/src/tui/components/TabBar.tsx

@@ -1,6 +1,6 @@
 import { Box, Text } from "ink";
 
-export type TabId = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+export type TabId = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 
 // 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
@@ -13,19 +13,22 @@ const TABS: { id: TabId; label: string; key: string }[] = [
   { id: 5, label: "Threads", key: "^e" },
   { id: 6, label: "Schedules", key: "^s" },
   { id: 7, label: "Workers", key: "^w" },
+  { id: 9, label: "Approvals", key: "^p" },
   { id: 8, label: "Help", key: "^g" },
 ];
 
 interface TabBarProps {
   activeTab: TabId;
   usage?: { used: number; max: number } | null;
+  /** Pending-approval count rendered as a badge on the Approvals tab. */
+  pendingApprovals?: number;
 }
 
 function formatK(n: number): string {
   return n >= 1000 ? `${Math.round(n / 1000)}k` : String(n);
 }
 
-export function TabBar({ activeTab, usage }: TabBarProps) {
+export function TabBar({ activeTab, usage, pendingApprovals }: TabBarProps) {
   const pct =
     usage && usage.max > 0 ? Math.round((usage.used / usage.max) * 100) : null;
   const usageColor =
@@ -41,15 +44,19 @@ export function TabBar({ activeTab, usage }: TabBarProps) {
     <Box paddingX={1} gap={1}>
       {TABS.map(({ id, label, key: shortcut }) => {
         const active = id === activeTab;
+        const badge =
+          id === 9 && pendingApprovals && pendingApprovals > 0
+            ? `(${pendingApprovals})`
+            : "";
         return (
           <Box key={id}>
             <Text
-              bold={active}
-              color={active ? "cyan" : undefined}
-              dimColor={!active}
+              bold={active || badge !== ""}
+              color={active ? "cyan" : badge !== "" ? "yellow" : undefined}
+              dimColor={!active && badge === ""}
               backgroundColor={active ? "#1a3a5c" : undefined}
             >
-              {` ${shortcut} ${label} `}
+              {` ${shortcut} ${label}${badge ? ` ${badge}` : ""} `}
             </Text>
           </Box>
         );

package/src/tui/components/TabPanels.tsx

@@ -1,5 +1,6 @@
 import { Box } from "ink";
 import type { ContextUsage } from "../../chat/usage.ts";
+import { ApprovalPanel } from "./ApprovalPanel.tsx";
 import { ContextPanel } from "./ContextPanel.tsx";
 import { HelpPanel } from "./HelpPanel.tsx";
 import { SchedulePanel } from "./SchedulePanel.tsx";
@@ -90,6 +91,14 @@ export function TabPanels({
       >
         <WorkerPanel projectDir={projectDir} isActive={activeTab === 7} />
       </Box>
+      <Box
+        display={activeTab === 9 ? "flex" : "none"}
+        flexDirection="column"
+        flexGrow={1}
+        overflow="hidden"
+      >
+        <ApprovalPanel projectDir={projectDir} isActive={activeTab === 9} />
+      </Box>
       <Box
         display={activeTab === 8 ? "flex" : "none"}
         flexDirection="column"

package/src/tui/hooks/useAppKeybindings.ts

@@ -28,6 +28,8 @@ interface UseAppKeybindingsParams {
   slashCommandsRef: MutableRefObject<SlashCommand[]>;
   inputValueRef: MutableRefObject<string>;
   markActivityRef: MutableRefObject<() => void>;
+  /** True while the approval prompt owns input; gates all bindings but Ctrl+C. */
+  approvalActiveRef: MutableRefObject<boolean>;
 }
 
 export function useAppKeybindings({
@@ -45,6 +47,7 @@ export function useAppKeybindings({
   slashCommandsRef,
   inputValueRef,
   markActivityRef,
+  approvalActiveRef,
 }: UseAppKeybindingsParams): void {
   // Stable refs for the input handler — same pattern as InputBar to prevent
   // Ink's useInput from re-registering stdin listeners on every render.
@@ -69,6 +72,11 @@ export function useAppKeybindings({
         return;
       }
 
+      // While the approval prompt is up it owns the keyboard (y/a/n/Esc handled
+      // by its own useInput). Swallow everything else so a tab-jump or Esc-abort
+      // doesn't fire mid-prompt.
+      if (approvalActiveRef.current) return;
+
       // Ctrl+<letter> jumps directly to a tab from any tab. On Chat, only
       // suppress these if the slash-autocomplete popup needs the keystroke
       // (Ctrl combos don't drive the popup, but keep the guard symmetric
@@ -159,6 +167,7 @@ export function useAppKeybindings({
       slashCommandsRef,
       inputValueRef,
       markActivityRef,
+      approvalActiveRef,
     ],
   );
 

package/src/tui/hooks/useApprovalCount.ts

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+import { listApprovals } from "../../approvals/store.ts";
+
+/**
+ * Poll the count of pending approvals so the TabBar can render a badge on the
+ * Approvals tab regardless of which tab is active. Lightweight: a directory
+ * scan every few seconds, mirroring the panel refresh cadence.
+ */
+export function useApprovalCount(projectDir: string, ready: boolean): number {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    if (!ready) return;
+    let mounted = true;
+    const refresh = async () => {
+      try {
+        const pending = await listApprovals(projectDir, { status: "pending" });
+        if (mounted) setCount(pending.length);
+      } catch {
+        // ignore — next tick retries
+      }
+    };
+    refresh();
+    const interval = setInterval(refresh, 5000);
+    return () => {
+      mounted = false;
+      clearInterval(interval);
+    };
+  }, [projectDir, ready]);
+
+  return count;
+}

package/src/tui/hooks/useApprovalPrompt.ts

@@ -0,0 +1,49 @@
+import { type MutableRefObject, useEffect, useState } from "react";
+import type { ChatApprovalRequest } from "../../chat/approval.ts";
+import type { ChatSession } from "../../chat/session.ts";
+import { addAllowedTool } from "../../config/loader.ts";
+
+export type ApprovalDecision = "approve" | "deny" | "always";
+
+interface UseApprovalPromptResult {
+  /** The pending approval request to render, or null. */
+  pending: ChatApprovalRequest | null;
+  /** Resolve the pending request. `always` also allowlists the tool. */
+  decide: (decision: ApprovalDecision) => void;
+}
+
+/**
+ * Subscribe to the chat session's approval bridge and expose the pending
+ * request plus a `decide` callback for the inline TUI prompt. `always` appends
+ * `<server>/<tool>` to `approvals.allowed_tools` (in-memory so the live session
+ * stops prompting, and on disk so it persists) and approves.
+ */
+export function useApprovalPrompt(
+  sessionRef: MutableRefObject<ChatSession | null>,
+): UseApprovalPromptResult {
+  const [, setTick] = useState(0);
+  const bridge = sessionRef.current?.approvalBridge ?? null;
+
+  useEffect(() => {
+    if (!bridge) return;
+    return bridge.subscribe(() => setTick((t) => t + 1));
+  }, [bridge]);
+
+  const pending = bridge?.current() ?? null;
+
+  const decide = (decision: ApprovalDecision) => {
+    const session = sessionRef.current;
+    if (!session || !pending) return;
+    if (decision === "always") {
+      const pattern = `${pending.server}/${pending.tool}`;
+      const allowed = session.config.approvals.allowed_tools;
+      if (!allowed.includes(pattern)) allowed.push(pattern);
+      void addAllowedTool(session.projectDir, pattern);
+      session.approvalBridge.resolve(true);
+      return;
+    }
+    session.approvalBridge.resolve(decision === "approve");
+  };
+
+  return { pending, decide };
+}

package/src/tui/hooks/useCaptureTabCycle.ts

@@ -17,7 +17,7 @@ export function useCaptureTabCycle(
     const [dwellRaw, delayRaw] = spec.split(":");
     const dwellMs = Number.parseInt(dwellRaw ?? "", 10) || 2500;
     const startDelayMs = Number.parseInt(delayRaw ?? "", 10) || 0;
-    const sequence: TabId[] = [2, 3, 4, 5, 6, 7, 8, 1];
+    const sequence: TabId[] = [2, 3, 4, 5, 6, 7, 9, 8, 1];
     const timers = sequence.map((tab, i) =>
       setTimeout(() => setActiveTab(tab), startDelayMs + dwellMs * (i + 1)),
     );

package/src/tui/hooks/useChatSession.ts

@@ -24,6 +24,7 @@ interface UseChatSessionParams {
   projectDir: string;
   resumeThreadId: string | undefined;
   initialPrompt: string | undefined;
+  unsafe: boolean | undefined;
   setMessages: Dispatch<SetStateAction<ChatMessage[]>>;
   setError: Dispatch<SetStateAction<string | null>>;
 }
@@ -39,6 +40,7 @@ export function useChatSession({
   projectDir,
   resumeThreadId,
   initialPrompt,
+  unsafe,
   setMessages,
   setError,
 }: UseChatSessionParams): UseChatSessionResult {
@@ -53,7 +55,7 @@ export function useChatSession({
   useEffect(() => {
     let cancelled = false;
 
-    startChatSession(projectDir, resumeThreadId)
+    startChatSession(projectDir, resumeThreadId, { unsafe })
       .then(async (session) => {
         if (cancelled) {
           endChatSession(session);
@@ -82,7 +84,7 @@ export function useChatSession({
             id: msgId(),
             role: "system" as const,
             content:
-              "Switch panels with Ctrl+<letter> (^a chat · ^o tools · ^n context · ^t tasks · ^r threads · ^s schedules · ^w workers) — `?` for help. Type /help for commands.",
+              "Switch panels with Ctrl+<letter> (^a chat · ^o tools · ^n context · ^t tasks · ^r threads · ^s schedules · ^w workers · ^p approvals) — `?` for help. Type /help for commands.",
             timestamp: new Date(),
           },
         ]);
@@ -109,7 +111,7 @@ export function useChatSession({
         );
       }
     };
-  }, [projectDir, resumeThreadId, setMessages, setError]);
+  }, [projectDir, resumeThreadId, unsafe, setMessages, setError]);
 
   const performShutdown = useCallback(async () => {
     if (shuttingDownRef.current) {

package/src/tui/keys.ts

@@ -18,6 +18,7 @@ export const TAB_BY_CTRL_KEY: Record<string, TabId> = {
   e: 5, // thr[e]ads
   s: 6, // [s]chedules
   w: 7, // [w]orkers
+  p: 9, // a[p]provals
   g: 8, // help (also catches Ctrl+/ on terminals that map it to BEL)
   "/": 8, // help (Kitty keyboard protocol)
   _: 8, // help (terminals that send Ctrl+/ as 0x1F)