botholomew 0.3.0 → 0.3.2

package/src/tui/components/ToolPanel.tsx

@@ -1,328 +1,342 @@
-import { Box, Text, useInput } from "ink";
-import { useMemo, useState } from "react";
-import type { ToolCallData } from "./ToolCall.tsx";
+import { Box, Text, useInput, useStdout } from "ink";
+import { memo, useEffect, useMemo, useState } from "react";
+import { ansi, theme } from "../theme.ts";
+import { resolveToolDisplay, type ToolCallData } from "./ToolCall.tsx";
 
 interface ToolPanelProps {
   toolCalls: ToolCallData[];
-  onClose: () => void;
+  isActive: boolean;
 }
 
-/** A flattened row in the JSON tree */
-interface TreeRow {
-  depth: number;
-  key: string;
-  value: string | null; // null = expandable parent
-  path: string;
-  hasChildren: boolean;
-}
-
-function flattenJson(
-  obj: unknown,
-  parentPath: string,
-  depth: number,
-  expanded: Set<string>,
-): TreeRow[] {
-  const rows: TreeRow[] = [];
+const SIDEBAR_WIDTH = 42;
 
-  if (obj === null || obj === undefined) {
-    return rows;
+/** Try to parse a string as JSON; returns the parsed value or undefined on failure */
+function tryParseJson(str: string): unknown | undefined {
+  try {
+    return JSON.parse(str);
+  } catch {
+    return undefined;
   }
+}
 
-  if (Array.isArray(obj)) {
-    for (let i = 0; i < obj.length; i++) {
-      const path = `${parentPath}[${i}]`;
-      const child = obj[i];
-      if (typeof child === "object" && child !== null) {
-        rows.push({
-          depth,
-          key: `[${i}]`,
-          value: expanded.has(path) ? null : `[…]`,
-          path,
-          hasChildren: true,
-        });
-        if (expanded.has(path)) {
-          rows.push(...flattenJson(child, path, depth + 1, expanded));
-        }
-      } else {
-        rows.push({
-          depth,
-          key: `[${i}]`,
-          value: formatValue(child),
-          path,
-          hasChildren: false,
-        });
-      }
-    }
-  } else if (typeof obj === "object") {
-    for (const [k, v] of Object.entries(obj as Record<string, unknown>)) {
-      const path = parentPath ? `${parentPath}.${k}` : k;
-      if (typeof v === "object" && v !== null) {
-        const childCount = Array.isArray(v) ? v.length : Object.keys(v).length;
-        const preview = Array.isArray(v)
-          ? `[${childCount} items]`
-          : `{${childCount} keys}`;
-        rows.push({
-          depth,
-          key: k,
-          value: expanded.has(path) ? null : preview,
-          path,
-          hasChildren: true,
-        });
-        if (expanded.has(path)) {
-          rows.push(...flattenJson(v, path, depth + 1, expanded));
-        }
-      } else {
-        rows.push({
-          depth,
-          key: k,
-          value: formatValue(v),
-          path,
-          hasChildren: false,
-        });
-      }
+/** Colorize a JSON string with ANSI codes */
+function colorizeJson(str: string): string {
+  const parsed = tryParseJson(str);
+  if (parsed === undefined) return str;
+  return colorizeValue(parsed, 0);
+}
+
+function colorizeValue(value: unknown, indent: number): string {
+  if (value === null) return `${ansi.toolName}null${ansi.reset}`;
+  if (typeof value === "boolean")
+    return `${ansi.toolName}${value ? "true" : "false"}${ansi.reset}`;
+  if (typeof value === "number") return `${ansi.accent}${value}${ansi.reset}`;
+  if (typeof value === "string") {
+    // Try to unwrap stringified JSON (common in tool results)
+    const inner = tryParseJson(value);
+    if (inner !== undefined && typeof inner === "object" && inner !== null) {
+      return colorizeValue(inner, indent);
     }
+    const escaped = JSON.stringify(value);
+    return `${ansi.success}${escaped}${ansi.reset}`;
   }
 
-  return rows;
-}
+  const pad = "  ".repeat(indent);
+  const innerPad = "  ".repeat(indent + 1);
 
-function formatValue(v: unknown): string {
-  if (v === null) return "null";
-  if (v === undefined) return "undefined";
-  if (typeof v === "string") {
-    if (v.length > 80) return `"${v.slice(0, 77)}…"`;
-    return `"${v}"`;
+  if (Array.isArray(value)) {
+    if (value.length === 0) return "[]";
+    const items = value.map(
+      (v) => `${innerPad}${colorizeValue(v, indent + 1)}`,
+    );
+    return `[\n${items.join(",\n")}\n${pad}]`;
   }
-  return String(v);
-}
 
-function safeParseJson(str: string): unknown {
-  try {
-    return JSON.parse(str);
-  } catch {
-    return str;
+  if (typeof value === "object") {
+    const entries = Object.entries(value as Record<string, unknown>);
+    if (entries.length === 0) return "{}";
+    const lines = entries.map(
+      ([k, v]) =>
+        `${innerPad}${ansi.info}${JSON.stringify(k)}${ansi.reset}: ${colorizeValue(v, indent + 1)}`,
+    );
+    return `{\n${lines.join(",\n")}\n${pad}}`;
   }
+
+  return String(value);
 }
 
-type PanelTab = "input" | "output";
-
-export function ToolPanel({ toolCalls, onClose }: ToolPanelProps) {
-  const [selectedTool, setSelectedTool] = useState(0);
-  const [tab, setTab] = useState<PanelTab>("input");
-  const [cursor, setCursor] = useState(0);
-  const [expanded, setExpanded] = useState<Set<string>>(new Set());
-
-  const tool = toolCalls[selectedTool];
-
-  const data = useMemo(() => {
-    if (!tool) return null;
-    return tab === "input"
-      ? safeParseJson(tool.input)
-      : safeParseJson(tool.output ?? "");
-  }, [tool, tab]);
-
-  const rows = useMemo(() => {
-    if (data === null || data === undefined) return [];
-    if (typeof data === "string") {
-      return data
-        .split("\n")
-        .filter((l) => l.trim())
-        .map(
-          (line, i): TreeRow => ({
-            depth: 0,
-            key: "",
-            value: line,
-            path: `line-${i}`,
-            hasChildren: false,
-          }),
+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("");
+
+  lines.push(`${ansi.bold}${ansi.primary}Input${ansi.reset}`);
+  lines.push(colorizeJson(displayInput));
+  lines.push("");
+
+  if (tool.output) {
+    if (tool.isError) {
+      lines.push(`${ansi.bold}${ansi.error}Error${ansi.reset}`);
+      lines.push(`${ansi.error}${colorizeJson(tool.output)}${ansi.reset}`);
+    } else {
+      lines.push(`${ansi.bold}${ansi.primary}Output${ansi.reset}`);
+      if (tool.largeResult) {
+        lines.push(
+          `${ansi.accent}Paginated for LLM: ${tool.largeResult.chars.toLocaleString()} chars, ${tool.largeResult.pages} page(s) — stored as ${tool.largeResult.id}${ansi.reset}`,
         );
+      }
+      lines.push(colorizeJson(tool.output));
     }
-    return flattenJson(data, "", 0, expanded);
-  }, [data, expanded]);
+  } else if (!tool.running) {
+    lines.push(`${ansi.bold}${ansi.primary}Output${ansi.reset}`);
+    lines.push(`${ansi.dim}(no output)${ansi.reset}`);
+  }
 
-  useInput((input, key) => {
-    if (key.escape) {
-      onClose();
-      return;
-    }
+  return lines.join("\n");
+}
 
-    if (key.tab) {
-      setTab((t) => (t === "input" ? "output" : "input"));
-      setCursor(0);
-      setExpanded(new Set());
-      return;
-    }
+const PAGE_SCROLL_LINES = 10;
 
-    if (key.leftArrow) {
-      setSelectedTool((i) => Math.max(0, i - 1));
-      setCursor(0);
-      setExpanded(new Set());
-      return;
-    }
-    if (key.rightArrow) {
-      setSelectedTool((i) => Math.min(toolCalls.length - 1, i + 1));
-      setCursor(0);
-      setExpanded(new Set());
-      return;
-    }
+export const ToolPanel = memo(function ToolPanel({
+  toolCalls,
+  isActive,
+}: ToolPanelProps) {
+  const { stdout } = useStdout();
+  const termRows = stdout?.rows ?? 24;
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [detailScroll, setDetailScroll] = useState(0);
 
-    if (key.upArrow) {
-      setCursor((c) => Math.max(0, c - 1));
-      return;
-    }
-    if (key.downArrow) {
-      setCursor((c) => Math.min(rows.length - 1, c + 1));
-      return;
-    }
+  // Reverse-chronological order (most recent first)
+  const reversedCalls = useMemo(() => [...toolCalls].reverse(), [toolCalls]);
 
-    if (key.return) {
-      const row = rows[cursor];
-      if (row?.hasChildren) {
-        setExpanded((prev) => {
-          const next = new Set(prev);
-          if (next.has(row.path)) {
-            for (const p of next) {
-              if (
-                p === row.path ||
-                p.startsWith(`${row.path}.`) ||
-                p.startsWith(`${row.path}[`)
-              ) {
-                next.delete(p);
-              }
-            }
-          } else {
-            next.add(row.path);
-          }
-          return next;
-        });
-      }
-      return;
+  // Keep selection in bounds when new calls arrive
+  useEffect(() => {
+    if (selectedIndex >= reversedCalls.length && reversedCalls.length > 0) {
+      setSelectedIndex(reversedCalls.length - 1);
     }
+  }, [reversedCalls.length, selectedIndex]);
+
+  const selectedTool = reversedCalls[selectedIndex];
+
+  const renderedDetail = useMemo(() => {
+    if (!selectedTool) return "";
+    return buildDetailAnsi(selectedTool);
+  }, [selectedTool]);
 
-    if (input === "e") {
-      const allPaths = new Set<string>();
-      const expandAll = (obj: unknown, parentPath: string) => {
-        if (typeof obj === "object" && obj !== null) {
-          if (Array.isArray(obj)) {
-            for (let i = 0; i < obj.length; i++) {
-              const p = `${parentPath}[${i}]`;
-              if (typeof obj[i] === "object" && obj[i] !== null) {
-                allPaths.add(p);
-                expandAll(obj[i], p);
-              }
-            }
-          } else {
-            for (const [k, v] of Object.entries(obj)) {
-              const p = parentPath ? `${parentPath}.${k}` : k;
-              if (typeof v === "object" && v !== null) {
-                allPaths.add(p);
-                expandAll(v, p);
-              }
-            }
-          }
+  const detailLines = useMemo(
+    () => renderedDetail.split("\n"),
+    [renderedDetail],
+  );
+
+  // Visible area for sidebar and detail
+  const visibleRows = Math.max(1, termRows - 6); // chrome: tab bar, divider, status, input, borders
+  const maxDetailScroll = Math.max(0, detailLines.length - visibleRows);
+  const sidebarScrollOffset = Math.max(
+    0,
+    Math.min(
+      selectedIndex - Math.floor(visibleRows / 2),
+      reversedCalls.length - visibleRows,
+    ),
+  );
+
+  // Reset detail scroll when selection changes
+  // biome-ignore lint/correctness/useExhaustiveDependencies: selectedIndex is the intentional trigger
+  useEffect(() => {
+    setDetailScroll(0);
+  }, [selectedIndex]);
+
+  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));
         }
-      };
-      if (data && typeof data === "object") expandAll(data, "");
-      setExpanded(allPaths);
-      return;
-    }
+        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;
+      }
 
-    if (input === "c") {
-      setExpanded(new Set());
-      setCursor(0);
-    }
-  });
+      // 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;
+      }
 
-  if (!tool) return null;
+      // 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;
+      }
 
-  const hasOutput = Boolean(tool.output);
+      // g/G for top/bottom
+      if (input === "g") {
+        setDetailScroll(0);
+        return;
+      }
+      if (input === "G") {
+        setDetailScroll(maxDetailScroll);
+        return;
+      }
+    },
+    { isActive },
+  );
 
-  return (
-    <Box
-      flexDirection="column"
-      borderStyle="round"
-      borderColor="cyan"
-      paddingX={1}
-      height={16}
-    >
-      {/* Header */}
-      <Box justifyContent="space-between">
-        <Box>
-          <Text bold color="cyan">
-            🔍 Tool Inspector
-          </Text>
-          <Text dimColor>
-            {" "}
-            ({selectedTool + 1}/{toolCalls.length})
-          </Text>
-        </Box>
+  if (reversedCalls.length === 0) {
+    return (
+      <Box flexDirection="column" flexGrow={1} paddingX={1}>
         <Text dimColor>
-          esc close · ←→ tools · tab switch · ↑↓ navigate · enter expand · e/c
-          all
-        </Text>
-      </Box>
-
-      {/* Tool name */}
-      <Box>
-        <Text bold color="magenta">
-          {tool.name}
+          No tool calls to inspect yet. Tool calls will appear here as the agent
+          uses them.
         </Text>
-        {tool.running && <Text color="yellow"> ⟳ running</Text>}
       </Box>
+    );
+  }
 
-      {/* Tabs */}
-      <Box gap={2}>
-        <Text
-          bold={tab === "input"}
-          color={tab === "input" ? "green" : undefined}
-          dimColor={tab !== "input"}
-        >
-          {tab === "input" ? "▸ " : "  "}Input
-        </Text>
-        <Text
-          bold={tab === "output"}
-          color={tab === "output" ? "green" : undefined}
-          dimColor={tab !== "output" && !hasOutput}
-        >
-          {tab === "output" ? "▸ " : "  "}Output{!hasOutput ? " (none)" : ""}
-        </Text>
-      </Box>
+  // Sidebar visible window
+  const sidebarVisible = reversedCalls.slice(
+    sidebarScrollOffset,
+    sidebarScrollOffset + visibleRows,
+  );
 
-      {/* Tree content */}
-      <Box flexDirection="column" flexGrow={1} overflow="hidden">
-        {rows.length === 0 && <Text dimColor> (empty)</Text>}
-        {rows.map((row, i) => {
-          const isSelected = i === cursor;
-          const indent = "  ".repeat(row.depth);
-          const arrow = row.hasChildren
-            ? expanded.has(row.path)
-              ? "▾ "
-              : "▸ "
-            : "  ";
+  // Detail visible window
+  const detailVisible = detailLines.slice(
+    detailScroll,
+    detailScroll + visibleRows,
+  );
 
+  return (
+    <Box flexGrow={1} height={visibleRows + 1} overflow="hidden">
+      {/* Left sidebar: tool call list */}
+      <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>
+            Tool Calls ({reversedCalls.length})
+          </Text>
+        </Box>
+        {sidebarVisible.map((tc, vi) => {
+          const i = vi + sidebarScrollOffset;
+          const isSelected = i === selectedIndex;
+          const icon = tc.running ? "⟳" : tc.isError ? "✘" : "✔";
+          const time = tc.timestamp.toLocaleTimeString([], {
+            hour: "2-digit",
+            minute: "2-digit",
+          });
+          const { displayName } = resolveToolDisplay(tc.name, tc.input);
+          const maxName = SIDEBAR_WIDTH - 12; // icon + time + padding
+          const nameDisplay =
+            displayName.length > maxName
+              ? `${displayName.slice(0, maxName - 1)}…`
+              : displayName;
           return (
-            <Box key={row.path}>
+            <Box key={tc.id} paddingX={1}>
               <Text
-                backgroundColor={isSelected ? "#333" : undefined}
-                color={isSelected ? "cyan" : undefined}
+                backgroundColor={isSelected ? theme.selectionBg : undefined}
+                bold={isSelected}
+                color={
+                  isSelected
+                    ? theme.info
+                    : tc.running
+                      ? theme.accent
+                      : undefined
+                }
+                wrap="truncate-end"
               >
-                {indent}
-                {arrow}
-                {row.key ? (
-                  <>
-                    <Text color="blue" bold={isSelected}>
-                      {row.key}
-                    </Text>
-                    {row.value !== null ? `: ${row.value}` : ""}
-                  </>
-                ) : (
-                  (row.value ?? "")
-                )}
+                {isSelected ? "▸" : " "}{" "}
+                <Text
+                  color={
+                    tc.running
+                      ? theme.accent
+                      : tc.isError
+                        ? theme.error
+                        : theme.muted
+                  }
+                  bold={false}
+                >
+                  {icon}
+                </Text>{" "}
+                {nameDisplay}
+                <Text dimColor> {time}</Text>
               </Text>
             </Box>
           );
         })}
       </Box>
+
+      {/* Right detail pane */}
+      <Box
+        flexDirection="column"
+        flexGrow={1}
+        height={visibleRows + 1}
+        paddingX={1}
+        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>
+          </Box>
+        )}
+        {detailLines.length <= visibleRows && <Box flexGrow={1} />}
+        {detailLines.length <= visibleRows && (
+          <Text dimColor>↑↓ select tool calls</Text>
+        )}
+      </Box>
     </Box>
   );
-}
+});