@stigmer/ink 0.0.88

package/src/components/MessageEntry.tsx

@@ -0,0 +1,80 @@
+import React, { useMemo } from "react";
+import { Box, Text } from "ink";
+import type { AgentMessage } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
+import { MessageType } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { renderMarkdown } from "../markdown.js";
+
+/** Props for {@link MessageEntry}. */
+export interface MessageEntryProps {
+  /** The agent message to render. */
+  readonly message: AgentMessage;
+}
+
+/**
+ * Renders a single message in the terminal conversation thread.
+ *
+ * - `MESSAGE_HUMAN` — plain text prefixed with a "You" indicator
+ * - `MESSAGE_AI` — markdown rendered to ANSI-styled terminal output,
+ *   with a cursor indicator while streaming
+ * - `MESSAGE_SYSTEM` — dimmed text
+ * - `MESSAGE_TOOL` / `UNSPECIFIED` — renders nothing (tool results
+ *   are handled by {@link ToolCallGroup})
+ */
+export function MessageEntry({ message }: MessageEntryProps) {
+  switch (message.type) {
+    case MessageType.MESSAGE_HUMAN:
+      return <HumanMessage content={message.content} />;
+    case MessageType.MESSAGE_AI:
+      return (
+        <AiMessage content={message.content} isStreaming={message.isStreaming} />
+      );
+    case MessageType.MESSAGE_SYSTEM:
+      return <SystemMessage content={message.content} />;
+    default:
+      return null;
+  }
+}
+
+function HumanMessage({ content }: { content: string }) {
+  return (
+    <Box flexDirection="column" paddingLeft={1}>
+      <Text bold color="cyan">
+        You
+      </Text>
+      <Text>{content}</Text>
+    </Box>
+  );
+}
+
+function AiMessage({
+  content,
+  isStreaming,
+}: {
+  content: string;
+  isStreaming: boolean;
+}) {
+  const rendered = useMemo(() => {
+    if (!content.trim()) return "";
+    return renderMarkdown(content);
+  }, [content]);
+
+  return (
+    <Box flexDirection="column" paddingLeft={1}>
+      <Text bold color="green">
+        Agent
+      </Text>
+      {rendered ? <Text>{rendered}</Text> : null}
+      {isStreaming && !rendered && <Text dimColor>Thinking...</Text>}
+    </Box>
+  );
+}
+
+function SystemMessage({ content }: { content: string }) {
+  return (
+    <Box paddingLeft={1}>
+      <Text dimColor italic>
+        {content}
+      </Text>
+    </Box>
+  );
+}

package/src/components/MessageThread.tsx

@@ -0,0 +1,264 @@
+import React, { useMemo } from "react";
+import { Box, Text, Static } from "ink";
+import { create } from "@bufbuild/protobuf";
+import type { AgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
+import type {
+  AgentMessage,
+  ToolCall,
+} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
+import { AgentMessageSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
+import type { PendingApproval } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/approval_pb";
+import type { SubAgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/subagent_pb";
+import {
+  ApprovalAction,
+  ExecutionPhase,
+  MessageType,
+} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { isTerminalPhase } from "@stigmer/react";
+import { MessageEntry } from "./MessageEntry.js";
+import { ToolCallGroup } from "./ToolCallGroup.js";
+import { SubAgentBlock } from "./SubAgentBlock.js";
+import { ExecutionProgress } from "./ExecutionProgress.js";
+import { ApprovalPrompt } from "./ApprovalPrompt.js";
+
+/** Props for {@link MessageThread}. */
+export interface MessageThreadProps {
+  /** Completed executions in chronological order. */
+  readonly executions: readonly AgentExecution[];
+  /** The currently streaming execution (appended after `executions`). */
+  readonly activeStreamExecution?: AgentExecution | null;
+  /** Optimistic user message shown before the stream delivers it. */
+  readonly pendingUserMessage?: string | null;
+  /** Callback for approval actions. Shows approval UI when provided. */
+  readonly onApprovalSubmit?: (
+    toolCallId: string,
+    action: ApprovalAction,
+  ) => void;
+  /** Set of tool call IDs currently being submitted for approval. */
+  readonly submittingApprovalIds?: ReadonlySet<string>;
+  /** Whether tool call groups should be rendered in expanded mode. Toggled via Ctrl+O. */
+  readonly expandToolCalls?: boolean;
+}
+
+type ThreadItem =
+  | { readonly kind: "message"; readonly message: AgentMessage; readonly key: string }
+  | { readonly kind: "tool-group"; readonly toolCalls: readonly ToolCall[]; readonly key: string }
+  | { readonly kind: "sub-agent"; readonly subAgent: SubAgentExecution; readonly key: string }
+  | { readonly kind: "phase"; readonly phase: ExecutionPhase; readonly key: string }
+  | { readonly kind: "pending-message"; readonly content: string; readonly key: string }
+  | { readonly kind: "approval"; readonly pendingApproval: PendingApproval; readonly key: string };
+
+function buildThreadItems(
+  executions: readonly AgentExecution[],
+  activeStreamExecution: AgentExecution | null | undefined,
+  pendingUserMessage: string | null | undefined,
+  includeApprovals: boolean,
+): ThreadItem[] {
+  const items: ThreadItem[] = [];
+  const allExecutions = activeStreamExecution
+    ? [...executions, activeStreamExecution]
+    : executions;
+
+  for (let ei = 0; ei < allExecutions.length; ei++) {
+    const exec = allExecutions[ei];
+    const messages = exec.status?.messages ?? [];
+    const subAgents = exec.status?.subAgentExecutions ?? [];
+
+    const specMessage = exec.spec?.message;
+    if (specMessage && specMessage !== "execute") {
+      const humanMsg = create(AgentMessageSchema);
+      humanMsg.type = MessageType.MESSAGE_HUMAN;
+      humanMsg.content = specMessage;
+      items.push({ kind: "message", message: humanMsg, key: `e${ei}-spec` });
+    }
+
+    for (let mi = 0; mi < messages.length; mi++) {
+      const msg = messages[mi];
+      if (msg.type === MessageType.MESSAGE_TOOL) continue;
+
+      const isEmptyAi =
+        msg.type === MessageType.MESSAGE_AI && !msg.content.trim();
+
+      if (!isEmptyAi) {
+        items.push({ kind: "message", message: msg, key: `e${ei}-m${mi}` });
+      }
+
+      if (msg.type === MessageType.MESSAGE_AI && msg.toolCalls.length > 0) {
+        // Split tool calls: "task" tools become sub-agent blocks,
+        // everything else goes into a regular tool group.
+        const regularTools = msg.toolCalls.filter((tc) => tc.name !== "task");
+        const taskTools = msg.toolCalls.filter((tc) => tc.name === "task");
+
+        if (regularTools.length > 0) {
+          items.push({
+            kind: "tool-group",
+            toolCalls: regularTools,
+            key: `e${ei}-m${mi}-tc`,
+          });
+        }
+
+        for (let ti = 0; ti < taskTools.length; ti++) {
+          const matchedSub = subAgents.find((sa) => sa.id === taskTools[ti].id);
+          if (matchedSub) {
+            items.push({
+              kind: "sub-agent",
+              subAgent: matchedSub,
+              key: `e${ei}-m${mi}-sa-${ti}`,
+            });
+          }
+        }
+      }
+    }
+  }
+
+  const lastExec = allExecutions[allExecutions.length - 1];
+  const lastPhase =
+    lastExec?.status?.phase ?? ExecutionPhase.EXECUTION_PHASE_UNSPECIFIED;
+
+  if (
+    isTerminalPhase(lastPhase) &&
+    lastPhase !== ExecutionPhase.EXECUTION_COMPLETED
+  ) {
+    items.push({ kind: "phase", phase: lastPhase, key: `phase-${lastPhase}` });
+  }
+
+  if (includeApprovals) {
+    const approvals = lastExec?.status?.pendingApprovals ?? [];
+    for (let ai = 0; ai < approvals.length; ai++) {
+      items.push({
+        kind: "approval",
+        pendingApproval: approvals[ai],
+        key: `approval-${approvals[ai].toolCallId || ai}`,
+      });
+    }
+  }
+
+  if (pendingUserMessage) {
+    const alreadySynthesized = lastExec?.spec?.message === pendingUserMessage;
+    if (!alreadySynthesized) {
+      items.push({
+        kind: "pending-message",
+        content: pendingUserMessage,
+        key: "pending-user-msg",
+      });
+    }
+  }
+
+  return items;
+}
+
+/**
+ * Renders a continuous conversation thread from one or more
+ * `AgentExecution` snapshots in the terminal.
+ *
+ * Composes {@link MessageEntry}, {@link ToolCallGroup},
+ * {@link ExecutionProgress}, and {@link ApprovalPrompt} into a
+ * scrolling terminal log.
+ *
+ * Historical items are rendered via Ink's `<Static>` component so
+ * they are written once and don't re-render, keeping terminal
+ * output efficient for long conversations.
+ */
+export function MessageThread({
+  executions,
+  activeStreamExecution,
+  pendingUserMessage,
+  onApprovalSubmit,
+  submittingApprovalIds,
+  expandToolCalls = false,
+}: MessageThreadProps) {
+  const includeApprovals = onApprovalSubmit != null;
+  const items = useMemo(
+    () =>
+      buildThreadItems(
+        executions,
+        activeStreamExecution,
+        pendingUserMessage,
+        includeApprovals,
+      ),
+    [executions, activeStreamExecution, pendingUserMessage, includeApprovals],
+  );
+
+  const historyItems = activeStreamExecution ? items.slice(0, -getActiveCount(items)) : items;
+  const liveItems = activeStreamExecution ? items.slice(items.length - getActiveCount(items)) : [];
+
+  return (
+    <Box flexDirection="column">
+      <Static items={historyItems}>
+        {(item) => (
+          <Box key={item.key} flexDirection="column" marginBottom={1}>
+            {renderItem(item, onApprovalSubmit, submittingApprovalIds, expandToolCalls)}
+          </Box>
+        )}
+      </Static>
+
+      {liveItems.map((item) => (
+        <Box key={item.key} flexDirection="column" marginBottom={1}>
+          {renderItem(item, onApprovalSubmit, submittingApprovalIds, expandToolCalls)}
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+function getActiveCount(items: ThreadItem[]): number {
+  let count = 0;
+  for (let i = items.length - 1; i >= 0; i--) {
+    const item = items[i];
+    if (
+      item.kind === "approval" ||
+      item.kind === "pending-message" ||
+      item.kind === "phase"
+    ) {
+      count++;
+    } else if (
+      item.kind === "message" &&
+      item.message.type === MessageType.MESSAGE_AI &&
+      item.message.isStreaming
+    ) {
+      count++;
+      break;
+    } else {
+      break;
+    }
+  }
+  return count;
+}
+
+function renderItem(
+  item: ThreadItem,
+  onApprovalSubmit?: (toolCallId: string, action: ApprovalAction) => void,
+  submittingApprovalIds?: ReadonlySet<string>,
+  expandToolCalls?: boolean,
+): React.ReactNode {
+  switch (item.kind) {
+    case "message":
+      return <MessageEntry message={item.message} />;
+    case "tool-group":
+      return <ToolCallGroup toolCalls={item.toolCalls} defaultExpanded={expandToolCalls} />;
+    case "sub-agent":
+      return <SubAgentBlock subAgent={item.subAgent} defaultExpanded={expandToolCalls} />;
+    case "phase":
+      return <ExecutionProgress phase={item.phase} />;
+    case "approval":
+      return onApprovalSubmit ? (
+        <ApprovalPrompt
+          pendingApproval={item.pendingApproval}
+          onSubmit={(action) =>
+            onApprovalSubmit(item.pendingApproval.toolCallId, action)
+          }
+          isSubmitting={
+            submittingApprovalIds?.has(item.pendingApproval.toolCallId) ?? false
+          }
+        />
+      ) : null;
+    case "pending-message":
+      return (
+        <Box paddingLeft={1}>
+          <Text dimColor italic>
+            {item.content}
+          </Text>
+        </Box>
+      );
+  }
+}

package/src/components/SubAgentBlock.tsx

@@ -0,0 +1,146 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import type { SubAgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/subagent_pb";
+import { SubAgentStatus } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { MessageType } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { MessageEntry } from "./MessageEntry.js";
+import { ToolCallGroup } from "./ToolCallGroup.js";
+
+/** Props for {@link SubAgentBlock}. */
+export interface SubAgentBlockProps {
+  /** The sub-agent execution data. */
+  readonly subAgent: SubAgentExecution;
+  /** Whether this block starts expanded. */
+  readonly defaultExpanded?: boolean;
+  /** Whether this component can receive keyboard focus for toggling. */
+  readonly isFocused?: boolean;
+}
+
+const STATUS_GLYPHS: Record<number, { glyph: string; color: string }> = {
+  [SubAgentStatus.SUB_AGENT_IN_PROGRESS]: { glyph: "⟳", color: "cyan" },
+  [SubAgentStatus.SUB_AGENT_COMPLETED]: { glyph: "✓", color: "green" },
+  [SubAgentStatus.SUB_AGENT_FAILED]: { glyph: "✗", color: "red" },
+  [SubAgentStatus.SUB_AGENT_PENDING]: { glyph: "○", color: "gray" },
+  [SubAgentStatus.SUB_AGENT_CANCELLED]: { glyph: "⊘", color: "yellow" },
+};
+
+function statusDisplay(status: SubAgentStatus): { glyph: string; color: string } {
+  return STATUS_GLYPHS[status] ?? { glyph: "·", color: "gray" };
+}
+
+function formatDuration(startedAt: string, completedAt: string): string | null {
+  if (!startedAt) return null;
+  const start = new Date(startedAt).getTime();
+  const end = completedAt ? new Date(completedAt).getTime() : Date.now();
+  const ms = end - start;
+  if (ms < 1000) return `${ms}ms`;
+  const s = Math.round(ms / 1000);
+  if (s < 60) return `${s}s`;
+  return `${Math.floor(s / 60)}m ${s % 60}s`;
+}
+
+/**
+ * Renders a sub-agent execution as a collapsible block in the terminal.
+ *
+ * Shows a summary line with status glyph, name/subject, and duration.
+ * When expanded, renders the sub-agent's internal message thread using
+ * the same MessageEntry and ToolCallGroup components as the main thread.
+ */
+export function SubAgentBlock({
+  subAgent,
+  defaultExpanded = false,
+  isFocused = false,
+}: SubAgentBlockProps) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+
+  useInput(
+    (input, key) => {
+      if (key.return || input === " ") {
+        setExpanded((e) => !e);
+      }
+    },
+    { isActive: isFocused },
+  );
+
+  const { glyph, color } = statusDisplay(subAgent.status);
+  const label = subAgent.subject || subAgent.name || "Sub-agent";
+  const duration = formatDuration(subAgent.startedAt, subAgent.completedAt);
+
+  return (
+    <Box flexDirection="column" paddingLeft={2}>
+      <Box gap={1}>
+        <Text color={color}>{glyph}</Text>
+        <Text bold color="magenta">↳</Text>
+        <Text bold>{label}</Text>
+        {duration && <Text dimColor>({duration})</Text>}
+        <Text dimColor>{expanded ? "▾" : "▸"}</Text>
+      </Box>
+
+      {expanded && (
+        <Box flexDirection="column" paddingLeft={3} marginTop={1}>
+          {subAgent.input && (
+            <Box marginBottom={1}>
+              <Text dimColor italic wrap="truncate-end">
+                Task: {subAgent.input.length > 120
+                  ? subAgent.input.slice(0, 120) + "…"
+                  : subAgent.input}
+              </Text>
+            </Box>
+          )}
+
+          {renderSubAgentMessages(subAgent)}
+
+          {subAgent.error && (
+            <Box marginTop={1}>
+              <Text color="red">Error: {subAgent.error}</Text>
+            </Box>
+          )}
+
+          {subAgent.output && subAgent.status === SubAgentStatus.SUB_AGENT_COMPLETED && (
+            <Box marginTop={1}>
+              <Text dimColor>Result: </Text>
+              <Text wrap="truncate-end">
+                {subAgent.output.length > 200
+                  ? subAgent.output.slice(0, 200) + "…"
+                  : subAgent.output}
+              </Text>
+            </Box>
+          )}
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+function renderSubAgentMessages(subAgent: SubAgentExecution): React.ReactNode {
+  const messages = subAgent.messages ?? [];
+  if (messages.length === 0) return null;
+
+  const elements: React.ReactNode[] = [];
+
+  for (let i = 0; i < messages.length; i++) {
+    const msg = messages[i];
+    if (msg.type === MessageType.MESSAGE_TOOL) continue;
+
+    const isEmptyAi =
+      msg.type === MessageType.MESSAGE_AI && !msg.content.trim();
+
+    if (!isEmptyAi) {
+      elements.push(
+        <Box key={`sub-m${i}`} marginBottom={1}>
+          <MessageEntry message={msg} />
+        </Box>,
+      );
+    }
+
+    if (msg.type === MessageType.MESSAGE_AI && msg.toolCalls.length > 0) {
+      elements.push(
+        <Box key={`sub-m${i}-tc`} marginBottom={1}>
+          <ToolCallGroup toolCalls={msg.toolCalls} />
+        </Box>,
+      );
+    }
+  }
+
+  return <>{elements}</>;
+}

package/src/components/TodoList.tsx

@@ -0,0 +1,75 @@
+import React, { useMemo } from "react";
+import { Box, Text } from "ink";
+import type { TodoItem } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/todo_pb";
+import { TodoStatus } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+
+/** Props for {@link TodoList}. */
+export interface TodoListProps {
+  /** Map of todo item IDs to their current state, as provided by the execution status. */
+  readonly todos: { readonly [key: string]: TodoItem };
+}
+
+const STATUS_SORT_ORDER: ReadonlyMap<TodoStatus, number> = new Map([
+  [TodoStatus.TODO_IN_PROGRESS, 0],
+  [TodoStatus.TODO_PENDING, 1],
+  [TodoStatus.TODO_COMPLETED, 2],
+  [TodoStatus.TODO_CANCELLED, 3],
+]);
+
+const STATUS_DISPLAY: Record<number, { glyph: string; color: string }> = {
+  [TodoStatus.TODO_PENDING]: { glyph: "○", color: "gray" },
+  [TodoStatus.TODO_IN_PROGRESS]: { glyph: "●", color: "cyan" },
+  [TodoStatus.TODO_COMPLETED]: { glyph: "✓", color: "green" },
+  [TodoStatus.TODO_CANCELLED]: { glyph: "⊘", color: "gray" },
+};
+
+/**
+ * Renders a sorted checklist of todo items in the terminal.
+ *
+ * Items are sorted by activity: in-progress first, then pending,
+ * completed, and cancelled. Terminal equivalent of the web SDK's
+ * TodoList component.
+ */
+export function TodoList({ todos }: TodoListProps) {
+  const sortedTodos = useMemo(() => {
+    const items = Object.values(todos);
+    if (items.length === 0) return [];
+    return items
+      .slice()
+      .sort(
+        (a, b) =>
+          (STATUS_SORT_ORDER.get(a.status) ?? 4) -
+          (STATUS_SORT_ORDER.get(b.status) ?? 4),
+      );
+  }, [todos]);
+
+  if (sortedTodos.length === 0) return null;
+
+  const completed = sortedTodos.filter(
+    (t) => t.status === TodoStatus.TODO_COMPLETED,
+  ).length;
+
+  return (
+    <Box flexDirection="column">
+      <Box gap={1} marginBottom={1}>
+        <Text dimColor bold>Tasks</Text>
+        <Text dimColor>({completed}/{sortedTodos.length})</Text>
+      </Box>
+      {sortedTodos.map((item) => {
+        const display = STATUS_DISPLAY[item.status] ?? { glyph: "·", color: "gray" };
+        const isCancelled = item.status === TodoStatus.TODO_CANCELLED;
+        return (
+          <Box key={item.id} gap={1} paddingLeft={1}>
+            <Text color={display.color}>{display.glyph}</Text>
+            <Text
+              dimColor={isCancelled}
+              strikethrough={isCancelled}
+            >
+              {item.content}
+            </Text>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}

package/src/components/ToolCallGroup.tsx

@@ -0,0 +1,92 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import type { ToolCall } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
+import { ToolCallStatus } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { ToolCallItem } from "./ToolCallItem.js";
+
+/** Props for {@link ToolCallGroup}. */
+export interface ToolCallGroupProps {
+  /** Tool calls in this group, ordered by invocation time. */
+  readonly toolCalls: readonly ToolCall[];
+  /** Whether this group is currently focused for keyboard interaction. */
+  readonly isFocused?: boolean;
+  /** Whether to start in expanded mode (driven by Ctrl+O global toggle). */
+  readonly defaultExpanded?: boolean;
+}
+
+type AggregateStatus = "running" | "failed" | "completed" | "pending";
+
+function deriveAggregateStatus(toolCalls: readonly ToolCall[]): AggregateStatus {
+  let hasRunning = false;
+  let hasFailed = false;
+
+  for (const tc of toolCalls) {
+    if (tc.status === ToolCallStatus.TOOL_CALL_RUNNING) hasRunning = true;
+    if (tc.status === ToolCallStatus.TOOL_CALL_FAILED) hasFailed = true;
+  }
+
+  if (hasRunning) return "running";
+  if (hasFailed) return "failed";
+  const allDone = toolCalls.every(
+    (tc) =>
+      tc.status === ToolCallStatus.TOOL_CALL_COMPLETED ||
+      tc.status === ToolCallStatus.TOOL_CALL_FAILED,
+  );
+  return allDone ? "completed" : "pending";
+}
+
+const STATUS_STYLE: Record<AggregateStatus, { symbol: string; color?: string }> = {
+  running: { symbol: "⠋", color: "yellow" },
+  completed: { symbol: "✓", color: "green" },
+  failed: { symbol: "✗", color: "red" },
+  pending: { symbol: "○" },
+};
+
+/**
+ * Renders a collapsible group of tool calls with an aggregate status.
+ *
+ * When collapsed, shows a summary line with tool count and status.
+ * When expanded, renders each tool call via {@link ToolCallItem}.
+ *
+ * Press Enter or Space to toggle expansion when `isFocused` is true.
+ */
+export function ToolCallGroup({
+  toolCalls,
+  isFocused = false,
+  defaultExpanded = false,
+}: ToolCallGroupProps) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const status = deriveAggregateStatus(toolCalls);
+  const style = STATUS_STYLE[status];
+
+  useInput(
+    (_input, key) => {
+      if (key.return || _input === " ") {
+        setExpanded((prev) => !prev);
+      }
+    },
+    { isActive: isFocused },
+  );
+
+  const summary =
+    toolCalls.length === 1
+      ? toolCalls[0].name
+      : `${toolCalls.length} tool calls`;
+
+  return (
+    <Box flexDirection="column" paddingLeft={2}>
+      <Box gap={1}>
+        <Text color={style.color}>{style.symbol}</Text>
+        <Text dimColor>{expanded ? "▼" : "▶"}</Text>
+        <Text>{summary}</Text>
+      </Box>
+      {expanded && (
+        <Box flexDirection="column" paddingLeft={2} marginTop={1}>
+          {toolCalls.map((tc) => (
+            <ToolCallItem key={tc.id} toolCall={tc} expanded />
+          ))}
+        </Box>
+      )}
+    </Box>
+  );
+}