botholomew 0.15.6 → 0.16.2

package/src/tui/App.tsx

@@ -14,8 +14,7 @@ import {
   handleSlashCommand,
   type SlashCommand,
 } from "../skills/commands.ts";
-import { getThread, type Interaction } from "../threads/store.ts";
-import { MAX_INLINE_CHARS, PAGE_SIZE_CHARS } from "../worker/large-results.ts";
+import { getThread } from "../threads/store.ts";
 import { ContextPanel } from "./components/ContextPanel.tsx";
 import { HelpPanel } from "./components/HelpPanel.tsx";
 import { InputBar } from "./components/InputBar.tsx";
@@ -35,6 +34,7 @@ import type { ToolCallData } from "./components/ToolCall.tsx";
 import { ToolPanel } from "./components/ToolPanel.tsx";
 import { WorkerPanel } from "./components/WorkerPanel.tsx";
 import { IdleProvider, useIdle } from "./idle.tsx";
+import { restoreMessagesFromInteractions } from "./restoreMessages.ts";
 import { buildSlashCommands, getSlashMatches } from "./slashCompletion.ts";
 import { ansi } from "./theme.ts";
 
@@ -50,6 +50,14 @@ function msgId(): string {
   return `msg-${++nextMsgId}`;
 }
 
+// Conservative line reservation for the bottom chrome — StatusBar (1) +
+// bordered InputBar (3) + multiline hint (1) + TabBar (1) + slack for the
+// SlashCommandPopup or QueuePanel (~4). The chat-tab body's `maxHeight` and
+// the panel boxes' `height` both subtract this from `rows` so the dynamic
+// frame's total output stays strictly below the viewport — see the comment
+// on the `rows` state in `AppInner` for why that matters.
+const FOOTER_RESERVE = 10;
+
 // Tab routing: Ctrl+<letter> jumps to a tab. Chosen for memorability — first
 // available letter that doesn't collide with other Ctrl bindings (Ctrl+C exit,
 // Ctrl+J/K/X/E queue ops on Chat).
@@ -73,78 +81,6 @@ const TAB_BY_CTRL_KEY: Record<string, TabId> = {
   _: 8, // help (terminals that send Ctrl+/ as 0x1F)
 };
 
-function detectToolError(output: string | undefined): boolean {
-  if (!output) return false;
-  try {
-    const parsed = JSON.parse(output);
-    if (typeof parsed === "object" && parsed?.is_error === true) return true;
-  } catch {
-    /* not JSON */
-  }
-  return false;
-}
-
-function restoreMessagesFromInteractions(
-  interactions: Interaction[],
-): ChatMessage[] {
-  const result: ChatMessage[] = [];
-  let pendingTools: ToolCallData[] = [];
-
-  let restoredIdx = 0;
-  for (const ix of interactions) {
-    if (ix.kind === "tool_use") {
-      pendingTools.push({
-        id: `restored-${restoredIdx++}`,
-        name: ix.tool_name ?? "unknown",
-        input: ix.tool_input ?? "{}",
-        running: false,
-        timestamp: ix.created_at,
-      });
-    } else if (ix.kind === "tool_result") {
-      const tc = pendingTools.find((t) => t.name === ix.tool_name && !t.output);
-      if (tc) {
-        tc.output = ix.content;
-        tc.isError = detectToolError(ix.content);
-        if (ix.content.length > MAX_INLINE_CHARS) {
-          tc.largeResult = {
-            id: "(restored)",
-            chars: ix.content.length,
-            pages: Math.ceil(ix.content.length / PAGE_SIZE_CHARS),
-          };
-        }
-      }
-    } else if (ix.kind === "message" && ix.role === "user") {
-      result.push({
-        id: msgId(),
-        role: "user",
-        content: ix.content,
-        timestamp: ix.created_at,
-      });
-    } else if (ix.kind === "message" && ix.role === "assistant") {
-      result.push({
-        id: msgId(),
-        role: "assistant",
-        content: ix.content,
-        timestamp: ix.created_at,
-        toolCalls: pendingTools.length > 0 ? [...pendingTools] : undefined,
-      });
-      pendingTools = [];
-    }
-  }
-
-  if (pendingTools.length > 0) {
-    result.push({
-      id: msgId(),
-      role: "assistant",
-      content: "",
-      timestamp: new Date(),
-      toolCalls: [...pendingTools],
-    });
-  }
-
-  return result;
-}
-
 export function App({
   projectDir,
   threadId: resumeThreadId,
@@ -176,14 +112,13 @@ function AppInner({
   const { exit } = useApp();
   const { stdout } = useStdout();
   const { markActivity } = useIdle();
-  // Pin the root box to a known viewport height so the rendered frame size
-  // never crosses the viewport boundary. Ink 7's renderer wipes scrollback
-  // (`shouldClearTerminalForFrame` → `ansiEscapes.clearTerminal`) whenever
-  // the dynamic frame transitions in/out of fullscreen, so a fluctuating
-  // `outputHeight` (streaming text + tool boxes appearing/disappearing) used
-  // to delete the chat history on every turn. Ink doesn't pin a height on
-  // its internal root, so a `height="100%"` on our root collapses to `auto`
-  // — we have to pass the explicit row count and re-read it on resize.
+  // Track the terminal's row count so we can cap the dynamic frame strictly
+  // below fullscreen. Ink 7 wipes scrollback (`shouldClearTerminalForFrame`
+  // → `ansiEscapes.clearTerminal`) whenever the dynamic frame is overflowing
+  // or transitions out of fullscreen — so as long as the rendered output
+  // height stays < `rows` on every render, scrollback is preserved. The
+  // chat-tab body and the seven panel boxes use this value to set explicit
+  // height/maxHeight constraints.
   const [rows, setRows] = useState(stdout?.rows ?? 24);
   useEffect(() => {
     if (!stdout) return;
@@ -207,6 +142,7 @@ function AppInner({
   const [isLoading, setIsLoading] = useState(false);
   const [streamingText, setStreamingText] = useState("");
   const [activeToolCalls, setActiveToolCalls] = useState<ToolCallData[]>([]);
+  const [streamStartedAt, setStreamStartedAt] = useState<Date | null>(null);
   const [preparingTool, setPreparingTool] = useState<{
     id: string;
     name: string;
@@ -245,7 +181,10 @@ function AppInner({
         }
         sessionRef.current = session;
 
-        if (session.messages.length > 0) {
+        if (resumeThreadId) {
+          // Always hydrate on resume so the Tools tab and chat history
+          // pick up prior tool_use/tool_result rows from the CSV — even if
+          // the thread has no plain message-kind interactions yet.
           const threadData = await getThread(
             session.projectDir,
             session.threadId,
@@ -474,6 +413,7 @@ function AppInner({
       setStreamingText("");
       setActiveToolCalls([]);
       setPreparingTool(null);
+      setStreamStartedAt(new Date());
 
       const userMsg: ChatMessage = {
         id: msgId(),
@@ -501,6 +441,7 @@ function AppInner({
           pendingToolCalls = [];
           setStreamingText("");
           setActiveToolCalls([]);
+          setStreamStartedAt(new Date());
         }
       };
 
@@ -532,30 +473,39 @@ function AppInner({
               running: true,
               timestamp: new Date(),
             };
-            pendingToolCalls.push(tc);
-            setActiveToolCalls([...pendingToolCalls]);
+            pendingToolCalls = [...pendingToolCalls, tc];
+            setActiveToolCalls(pendingToolCalls);
             setPreparingTool(null);
           },
           onToolEnd: (id, _name, output, isError, meta) => {
             markActivityRef.current();
-            const tc = pendingToolCalls.find((t) => t.id === id);
-            if (tc) {
-              tc.running = false;
-              tc.output = output;
-              tc.isError = isError;
-              if (meta?.largeResult) {
-                tc.largeResult = meta.largeResult;
-              }
-            }
-            setActiveToolCalls([...pendingToolCalls]);
+            // Replace the matched entry with a new object so its identity
+            // changes (memoized ToolCall children rely on this); other entries
+            // keep their reference and skip re-render.
+            pendingToolCalls = pendingToolCalls.map((t) =>
+              t.id === id
+                ? {
+                    ...t,
+                    running: false,
+                    output,
+                    isError,
+                    ...(meta?.largeResult
+                      ? { largeResult: meta.largeResult }
+                      : {}),
+                  }
+                : t,
+            );
+            setActiveToolCalls(pendingToolCalls);
           },
           onToolNotify: (id, message) => {
             markActivityRef.current();
-            const tc = pendingToolCalls.find((t) => t.id === id);
-            if (tc) {
-              tc.notes = [...(tc.notes ?? []), message];
-              setActiveToolCalls([...pendingToolCalls]);
-            }
+            let touched = false;
+            pendingToolCalls = pendingToolCalls.map((t) => {
+              if (t.id !== id) return t;
+              touched = true;
+              return { ...t, notes: [...(t.notes ?? []), message] };
+            });
+            if (touched) setActiveToolCalls(pendingToolCalls);
           },
           onUsage: (info) => {
             setUsage(info);
@@ -602,6 +552,7 @@ function AppInner({
         setStreamingText("");
         setActiveToolCalls([]);
         setPreparingTool(null);
+        setStreamStartedAt(null);
       }
     }
 
@@ -757,6 +708,7 @@ function AppInner({
                 setStreamingText("");
                 setActiveToolCalls([]);
                 setPreparingTool(null);
+                setStreamStartedAt(null);
                 setUsage(null);
               } catch (err) {
                 setMessages((prev) => [
@@ -848,8 +800,23 @@ function AppInner({
   const _dbPath = sessionRef.current.dbPath;
   const threadId = sessionRef.current.threadId;
 
+  const panelHeight = Math.max(1, rows - FOOTER_RESERVE);
+  const onChatTab = activeTab === 1;
+
   return (
-    <Box flexDirection="column" height={rows} overflow="hidden">
+    // The root box is auto-sized on the chat tab so the dynamic frame stays
+    // small and the static-rendered chat history (in scrollback above the
+    // frame) flows directly into the streaming reply with no blank pad.
+    //
+    // On every other tab we pin the root to `height={rows}` so the dynamic
+    // frame fills the entire viewport — without that, the panel + footer
+    // are shorter than the terminal and the bottom of the chat scrollback
+    // bleeds through above the active panel. Switching chat→panel goes
+    // small→rows (no wipe, since `nextOutputHeight === viewportRows` is
+    // not "overflowing"). Switching panel→chat goes rows→small, which
+    // does trip Ink's `isLeavingFullscreen` clear, but Ink immediately
+    // re-emits `fullStaticOutput` so chat history is preserved.
+    <Box flexDirection="column" {...(onChatTab ? {} : { height: rows })}>
       {/* Completed messages — rendered once to terminal scrollback.
           Must live outside the display="none" tab wrappers so the <Static>
           node always has proper terminal width in its Yoga layout.
@@ -862,16 +829,23 @@ function AppInner({
       {/* Tab content area — all panels stay mounted to avoid expensive
           remount cycles. display="none" hides inactive panels from
           layout without destroying them.
-          The chat tab's flexGrow box is overflow-clipped so streaming
-          content can't push the rendered frame past the viewport — see
-          the comment on the `rows` state for why that matters.
-          `justifyContent="flex-end"` keeps active streaming content + the
-          tool-call card pinned to the bottom of the chat area (just
-          above the input bar) instead of leaving a tall gap below them. */}
+
+          Chat tab: `maxHeight={panelHeight}` (not `height`) so the box
+          shrinks to its content when streaming is short or absent. When
+          streaming overflows, the box stops at `panelHeight`;
+          `justifyContent="flex-end"` + `overflow="hidden"` clip the *top*
+          so the most-recent tokens stay visible above the input bar.
+          The frame stays strictly below `rows`, so Ink never wipes
+          scrollback during a turn.
+
+          Other tabs: `flexGrow={1}` fills the root (which is pinned to
+          `rows` on those tabs) minus the footer's actual height, so the
+          panel always reaches the top of the viewport — no scrollback
+          leak above the panel regardless of footer height. */}
       <Box
-        display={activeTab === 1 ? "flex" : "none"}
+        display={onChatTab ? "flex" : "none"}
         flexDirection="column"
-        flexGrow={1}
+        maxHeight={panelHeight}
         overflow="hidden"
         justifyContent="flex-end"
       >
@@ -880,12 +854,14 @@ function AppInner({
           isLoading={isLoading}
           activeToolCalls={activeToolCalls}
           preparingTool={preparingTool}
+          streamStartedAt={streamStartedAt}
         />
       </Box>
       <Box
         display={activeTab === 2 ? "flex" : "none"}
         flexDirection="column"
         flexGrow={1}
+        overflow="hidden"
       >
         <ToolPanel toolCalls={allToolCalls} isActive={activeTab === 2} />
       </Box>
@@ -893,6 +869,7 @@ function AppInner({
         display={activeTab === 3 ? "flex" : "none"}
         flexDirection="column"
         flexGrow={1}
+        overflow="hidden"
       >
         <ContextPanel projectDir={projectDir} isActive={activeTab === 3} />
       </Box>
@@ -900,6 +877,7 @@ function AppInner({
         display={activeTab === 4 ? "flex" : "none"}
         flexDirection="column"
         flexGrow={1}
+        overflow="hidden"
       >
         <TaskPanel projectDir={projectDir} isActive={activeTab === 4} />
       </Box>
@@ -907,6 +885,7 @@ function AppInner({
         display={activeTab === 5 ? "flex" : "none"}
         flexDirection="column"
         flexGrow={1}
+        overflow="hidden"
       >
         <ThreadPanel
           projectDir={projectDir}
@@ -918,6 +897,7 @@ function AppInner({
         display={activeTab === 6 ? "flex" : "none"}
         flexDirection="column"
         flexGrow={1}
+        overflow="hidden"
       >
         <SchedulePanel projectDir={projectDir} isActive={activeTab === 6} />
       </Box>
@@ -925,6 +905,7 @@ function AppInner({
         display={activeTab === 7 ? "flex" : "none"}
         flexDirection="column"
         flexGrow={1}
+        overflow="hidden"
       >
         <WorkerPanel projectDir={projectDir} isActive={activeTab === 7} />
       </Box>
@@ -932,6 +913,7 @@ function AppInner({
         display={activeTab === 8 ? "flex" : "none"}
         flexDirection="column"
         flexGrow={1}
+        overflow="hidden"
       >
         <HelpPanel
           projectDir={projectDir}

package/src/tui/components/ContextPanel.tsx

@@ -1,4 +1,4 @@
-import { Box, Text, useInput, useStdout } from "ink";
+import { Box, Text, useInput } from "ink";
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import { getDbPath } from "../../constants.ts";
 import {
@@ -24,6 +24,8 @@ import { isMarkdownPath, renderMarkdown } from "../markdown.ts";
 import { theme } from "../theme.ts";
 import { useDeleteConfirm } from "../useDeleteConfirm.ts";
 import { useLatestRef } from "../useLatestRef.ts";
+import { useTerminalSize } from "../useTerminalSize.ts";
+import { wrapDetailLines } from "../wrapDetail.ts";
 import { DeleteArmedBanner } from "./DeleteArmedBanner.tsx";
 import { Scrollbar } from "./Scrollbar.tsx";
 
@@ -39,8 +41,8 @@ export const ContextPanel = memo(function ContextPanel({
   projectDir,
   isActive,
 }: ContextPanelProps) {
-  const { stdout } = useStdout();
-  const termRows = stdout?.rows ?? 24;
+  const { rows: termRows, cols: termCols } = useTerminalSize();
+  const detailWidth = Math.max(1, termCols - SIDEBAR_WIDTH - 5);
 
   const [currentPath, setCurrentPath] = useState("");
   const [entries, setEntries] = useState<ContextEntry[]>([]);
@@ -150,8 +152,8 @@ export const ContextPanel = memo(function ContextPanel({
     const body = isMarkdownPath(fileContent.path)
       ? renderMarkdown(fileContent.content)
       : fileContent.content;
-    return body.split("\n");
-  }, [fileContent, selectedEntry]);
+    return wrapDetailLines(body, detailWidth);
+  }, [fileContent, selectedEntry, detailWidth]);
 
   const visibleDetailRows = Math.max(1, visibleRows - 2);
   const maxDetailScroll = Math.max(0, detailLines.length - visibleDetailRows);

package/src/tui/components/MessageList.tsx

@@ -18,6 +18,9 @@ interface MessageListProps {
   isLoading: boolean;
   activeToolCalls: ToolCallData[];
   preparingTool: { id: string; name: string } | null;
+  /** Timestamp the current streaming bubble started. Stable across token flushes
+   * so the displayed time doesn't flicker on every re-render. */
+  streamStartedAt: Date | null;
 }
 
 function formatTime(date: Date): string {
@@ -124,11 +127,46 @@ export const MessageBubble = memo(function MessageBubble({
   );
 });
 
+const ActiveToolsBox = memo(function ActiveToolsBox({
+  toolCalls,
+}: {
+  toolCalls: ToolCallData[];
+}) {
+  if (toolCalls.length === 0) return null;
+  return (
+    <Box
+      flexDirection="column"
+      marginLeft={1}
+      borderStyle="round"
+      borderColor={theme.accentBorder}
+      paddingX={1}
+    >
+      {toolCalls.map((tc) => (
+        <ToolCall key={tc.id} tool={tc} />
+      ))}
+    </Box>
+  );
+});
+
+const StreamingMarkdown = memo(function StreamingMarkdown({
+  text,
+}: {
+  text: string;
+}) {
+  const rendered = useMemo(() => renderMarkdown(text), [text]);
+  return (
+    <Box marginLeft={1}>
+      <Text>{rendered}</Text>
+    </Box>
+  );
+});
+
 export function MessageList({
   streamingText,
   isLoading,
   activeToolCalls,
   preparingTool,
+  streamStartedAt,
 }: MessageListProps) {
   return (
     <>
@@ -139,26 +177,10 @@ export function MessageList({
             <Text bold color="green">
               Botholomew
             </Text>
-            <Text dimColor> {formatTime(new Date())}</Text>
+            <Text dimColor> {formatTime(streamStartedAt ?? new Date())}</Text>
           </Box>
-          {activeToolCalls.length > 0 && (
-            <Box
-              flexDirection="column"
-              marginLeft={1}
-              borderStyle="round"
-              borderColor={theme.accentBorder}
-              paddingX={1}
-            >
-              {activeToolCalls.map((tc) => (
-                <ToolCall key={tc.id} tool={tc} />
-              ))}
-            </Box>
-          )}
-          {streamingText && (
-            <Box marginLeft={1}>
-              <Text>{renderMarkdown(streamingText)}</Text>
-            </Box>
-          )}
+          <ActiveToolsBox toolCalls={activeToolCalls} />
+          {streamingText && <StreamingMarkdown text={streamingText} />}
         </Box>
       )}
 
@@ -173,14 +195,15 @@ export function MessageList({
 
       {isLoading &&
         !preparingTool &&
-        !streamingText &&
         (activeToolCalls.length === 0 ||
           activeToolCalls.every((tc) => !tc.running)) && (
           <Box marginTop={1}>
             <Text color={theme.accent}>
               <Spinner type="dots" />
             </Text>
-            <Text dimColor> Thinking...</Text>
+            <Text dimColor>
+              {streamingText ? " Streaming..." : " Thinking..."}
+            </Text>
           </Box>
         )}
     </>

package/src/tui/components/SchedulePanel.tsx

@@ -1,4 +1,4 @@
-import { Box, Text, useInput, useStdout } from "ink";
+import { Box, Text, useInput } from "ink";
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import type { Schedule } from "../../schedules/schema.ts";
 import {
@@ -14,6 +14,8 @@ import {
 import { ansi, theme } from "../theme.ts";
 import { useDeleteConfirm } from "../useDeleteConfirm.ts";
 import { useLatestRef } from "../useLatestRef.ts";
+import { useTerminalSize } from "../useTerminalSize.ts";
+import { wrapDetailLines } from "../wrapDetail.ts";
 import { DeleteArmedBanner } from "./DeleteArmedBanner.tsx";
 import { Scrollbar } from "./Scrollbar.tsx";
 
@@ -88,8 +90,8 @@ export const SchedulePanel = memo(function SchedulePanel({
   projectDir,
   isActive,
 }: SchedulePanelProps) {
-  const { stdout } = useStdout();
-  const termRows = stdout?.rows ?? 24;
+  const { rows: termRows, cols: termCols } = useTerminalSize();
+  const detailWidth = Math.max(1, termCols - SIDEBAR_WIDTH - 5);
   const [schedules, setSchedules] = useState<Schedule[]>([]);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [detailScroll, setDetailScroll] = useState(0);
@@ -133,8 +135,8 @@ export const SchedulePanel = memo(function SchedulePanel({
   }, [selectedSchedule]);
 
   const detailLines = useMemo(
-    () => renderedDetail.split("\n"),
-    [renderedDetail],
+    () => wrapDetailLines(renderedDetail, detailWidth),
+    [renderedDetail, detailWidth],
   );
 
   const visibleRows = Math.max(1, termRows - 6);

package/src/tui/components/TaskPanel.tsx

@@ -1,4 +1,4 @@
-import { Box, Text, useInput, useStdout } from "ink";
+import { Box, Text, useInput } from "ink";
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import {
   TASK_PRIORITIES,
@@ -14,6 +14,8 @@ import {
 import { ansi, theme } from "../theme.ts";
 import { useDeleteConfirm } from "../useDeleteConfirm.ts";
 import { useLatestRef } from "../useLatestRef.ts";
+import { useTerminalSize } from "../useTerminalSize.ts";
+import { wrapDetailLines } from "../wrapDetail.ts";
 import { DeleteArmedBanner } from "./DeleteArmedBanner.tsx";
 import { Scrollbar } from "./Scrollbar.tsx";
 
@@ -121,8 +123,8 @@ export const TaskPanel = memo(function TaskPanel({
   projectDir,
   isActive,
 }: TaskPanelProps) {
-  const { stdout } = useStdout();
-  const termRows = stdout?.rows ?? 24;
+  const { rows: termRows, cols: termCols } = useTerminalSize();
+  const detailWidth = Math.max(1, termCols - SIDEBAR_WIDTH - 5);
   const [tasks, setTasks] = useState<Task[]>([]);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [detailScroll, setDetailScroll] = useState(0);
@@ -173,8 +175,8 @@ export const TaskPanel = memo(function TaskPanel({
   }, [selectedTask]);
 
   const detailLines = useMemo(
-    () => renderedDetail.split("\n"),
-    [renderedDetail],
+    () => wrapDetailLines(renderedDetail, detailWidth),
+    [renderedDetail, detailWidth],
   );
 
   const visibleRows = Math.max(1, termRows - 6);

package/src/tui/components/ThreadPanel.tsx

@@ -1,4 +1,4 @@
-import { Box, Text, useInput, useStdout } from "ink";
+import { Box, Text, useInput } from "ink";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   deleteThread,
@@ -17,6 +17,8 @@ import {
 import { ansi, theme } from "../theme.ts";
 import { useDeleteConfirm } from "../useDeleteConfirm.ts";
 import { useLatestRef } from "../useLatestRef.ts";
+import { useTerminalSize } from "../useTerminalSize.ts";
+import { wrapDetailLines } from "../wrapDetail.ts";
 import { DeleteArmedBanner } from "./DeleteArmedBanner.tsx";
 import { Scrollbar } from "./Scrollbar.tsx";
 
@@ -162,8 +164,8 @@ export const ThreadPanel = memo(function ThreadPanel({
   activeThreadId,
   isActive,
 }: ThreadPanelProps) {
-  const { stdout } = useStdout();
-  const termRows = stdout?.rows ?? 24;
+  const { rows: termRows, cols: termCols } = useTerminalSize();
+  const detailWidth = Math.max(1, termCols - SIDEBAR_WIDTH - 5);
   const [threads, setThreads] = useState<Thread[]>([]);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [detailScroll, setDetailScroll] = useState(0);
@@ -299,8 +301,8 @@ export const ThreadPanel = memo(function ThreadPanel({
   }, [selectedDetail, activeThreadId]);
 
   const detailLines = useMemo(
-    () => renderedDetail.split("\n"),
-    [renderedDetail],
+    () => wrapDetailLines(renderedDetail, detailWidth),
+    [renderedDetail, detailWidth],
   );
 
   const visibleRows = Math.max(1, termRows - 6);

package/src/tui/components/ToolCall.tsx

@@ -1,4 +1,5 @@
 import { Box, Text } from "ink";
+import { memo } from "react";
 import { theme } from "../theme.ts";
 import { parseSleepInput, SleepProgress } from "./SleepProgress.tsx";
 
@@ -48,7 +49,7 @@ interface ToolCallProps {
   tool: ToolCallData;
 }
 
-export function ToolCall({ tool }: ToolCallProps) {
+export const ToolCall = memo(function ToolCall({ tool }: ToolCallProps) {
   const { displayName, displayInput } = resolveToolDisplay(
     tool.name,
     tool.input,
@@ -122,4 +123,4 @@ export function ToolCall({ tool }: ToolCallProps) {
       ))}
     </Box>
   );
-}
+});

package/src/tui/components/ToolPanel.tsx

@@ -1,4 +1,4 @@
-import { Box, Text, useInput, useStdout } from "ink";
+import { Box, Text, useInput } from "ink";
 import { memo, useEffect, useMemo, useState } from "react";
 import {
   detailPaneBorderProps,
@@ -7,6 +7,8 @@ import {
 } from "../listDetailKeys.ts";
 import { ansi, theme } from "../theme.ts";
 import { useLatestRef } from "../useLatestRef.ts";
+import { useTerminalSize } from "../useTerminalSize.ts";
+import { wrapDetailLines } from "../wrapDetail.ts";
 import { Scrollbar } from "./Scrollbar.tsx";
 import { resolveToolDisplay, type ToolCallData } from "./ToolCall.tsx";
 
@@ -109,8 +111,10 @@ export const ToolPanel = memo(function ToolPanel({
   toolCalls,
   isActive,
 }: ToolPanelProps) {
-  const { stdout } = useStdout();
-  const termRows = stdout?.rows ?? 24;
+  const { rows: termRows, cols: termCols } = useTerminalSize();
+  // Detail-pane content width: total cols minus sidebar, minus 4 chars of
+  // border+padding on the right pane, minus 1 col for the scrollbar.
+  const detailWidth = Math.max(1, termCols - SIDEBAR_WIDTH - 5);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [detailScroll, setDetailScroll] = useState(0);
   const [focus, setFocus] = useState<FocusState>("list");
@@ -133,8 +137,8 @@ export const ToolPanel = memo(function ToolPanel({
   }, [selectedTool]);
 
   const detailLines = useMemo(
-    () => renderedDetail.split("\n"),
-    [renderedDetail],
+    () => wrapDetailLines(renderedDetail, detailWidth),
+    [renderedDetail, detailWidth],
   );
 
   // Visible area for sidebar and detail