@comma-agents/tui 2.0.0-rc.0

package/dist/components/MessageList/MessageList.theme.d.ts

@@ -0,0 +1,170 @@
+/** Per-role text style (color + bold). */
+export interface RoleStyle {
+    readonly bold: boolean;
+    readonly color: string;
+}
+/** Style for an inline label badge (e.g. "you", "system", agent name). */
+export interface BadgeStyle {
+    readonly bold: boolean;
+    readonly color: string;
+}
+/** Spread-ready style objects for the MessageList component. */
+export interface MessageListTheme {
+    /** Outer container. */
+    readonly container: {
+        readonly flexDirection: "column";
+        readonly flexGrow: number;
+        readonly paddingX: number;
+    };
+    /** Empty state wrapper. */
+    readonly emptyState: {
+        readonly paddingX: number;
+        readonly text: {
+            readonly dimColor: boolean;
+        };
+    };
+    /** User-authored message block. */
+    readonly userMessage: {
+        /** Outer column container. */
+        readonly container: {
+            readonly flexDirection: "column";
+            readonly flex: 1;
+            readonly marginBottom: number;
+        };
+        /** Header row with the "you" label. */
+        readonly header: {
+            readonly flexDirection: "row";
+        };
+        /** "you" label style. */
+        readonly label: BadgeStyle;
+        /** Body row containing the prompt text. */
+        readonly body: {
+            readonly paddingLeft: number;
+        };
+        /** Body text style. */
+        readonly bodyText: {
+            readonly wrap: "wrap";
+        };
+        /** Color used for the wrapping `BorderedPanel` border + header label. */
+        readonly borderColor: string;
+    };
+    /** Agent-authored message block. */
+    readonly agentMessage: {
+        readonly container: {
+            readonly flexDirection: "column";
+            readonly flex: 1;
+            readonly marginBottom: number;
+        };
+        readonly header: {
+            readonly flexDirection: "row";
+        };
+        readonly label: BadgeStyle;
+        readonly headerDetail: {
+            readonly model: {
+                readonly color: string;
+                readonly dimColor: boolean;
+            };
+            readonly context: {
+                readonly color: string;
+                readonly bold: boolean;
+            };
+            /** Threshold colors for the context-usage fill bar, by fraction used. */
+            readonly contextBar: {
+                readonly low: string;
+                readonly medium: string;
+                readonly high: string;
+            };
+            readonly time: {
+                readonly color: string;
+                readonly dimColor: boolean;
+            };
+            readonly separator: {
+                readonly color: string;
+                readonly dimColor: boolean;
+            };
+        };
+        readonly body: {
+            readonly flexDirection: "column";
+            readonly paddingLeft: number;
+        };
+        /** Plain text segment style. */
+        readonly textSegment: {
+            readonly wrap: "wrap";
+        };
+        /** Streaming cursor indicator. */
+        readonly streamingCursor: {
+            readonly dimColor: boolean;
+        };
+        /** Tool-call row container. */
+        readonly toolCall: {
+            readonly container: {
+                readonly flexDirection: "column";
+                readonly marginTop: number;
+            };
+            readonly header: BadgeStyle;
+            readonly label: {
+                readonly dimColor: boolean;
+            };
+            readonly args: {
+                readonly dimColor: boolean;
+            };
+        };
+        /** Tool-result row container. */
+        readonly toolResult: {
+            readonly container: {
+                readonly flexDirection: "column";
+                readonly marginTop: number;
+            };
+            readonly header: BadgeStyle;
+            readonly output: {
+                readonly dimColor: boolean;
+                readonly wrap: "wrap";
+            };
+        };
+        /** Reasoning / "thinking" block. */
+        readonly thinking: {
+            readonly container: {
+                readonly flexDirection: "column";
+                readonly marginTop: number;
+            };
+            readonly header: BadgeStyle;
+            readonly text: {
+                readonly italic: true;
+                readonly dimColor: boolean;
+                readonly wrap: "wrap";
+            };
+        };
+        /** Color used for the wrapping `BorderedPanel` border + header label. */
+        readonly borderColor: string;
+    };
+    /** System-authored message block. */
+    readonly systemMessage: {
+        readonly container: {
+            readonly flexDirection: "row";
+            readonly flex: 1;
+            readonly marginBottom: number;
+        };
+        readonly bullet: {
+            readonly color: string;
+            readonly dimColor: boolean;
+        };
+        readonly text: {
+            readonly color: string;
+            readonly dimColor: boolean;
+            readonly wrap: "wrap";
+        };
+        /** Color used for the wrapping `BorderedPanel` border + header label. */
+        readonly borderColor: string;
+    };
+    /** Role-based colors for sender name (kept for backwards compatibility). */
+    readonly roles: {
+        readonly user: RoleStyle;
+        readonly agent: RoleStyle;
+        readonly system: RoleStyle;
+    };
+}
+/**
+ * Returns themed style objects for the MessageList component.
+ * Consumes global tokens via `useTheme()`.
+ */
+export declare function useMessageListTheme(): MessageListTheme;

package/dist/components/MessageList/MessageList.types.d.ts

@@ -0,0 +1,26 @@
+import type { InkBoxProps } from "ink";
+import type { ChatMessage } from "../../hooks/useChat/useChat.types";
+export interface MessageListProps {
+    /** Messages to render in chronological order. */
+    readonly messages: readonly ChatMessage[];
+    /** Opens a spawned strategy transcript in its dedicated page. */
+    readonly onOpenSubStrategy?: (toolCallId: string) => void;
+}
+export interface MessageListRenderProps {
+    /** Messages to render in chronological order. */
+    readonly messages: readonly GroupedChatMessage[];
+    /** Debug render ref from useDebugRender. */
+    readonly debugRef: React.RefObject<HTMLElement>;
+    /** Props for the outer container Box. */
+    readonly containerProps: InkBoxProps;
+    /** Props for the empty state container Box. */
+    readonly emptyStateProps: InkBoxProps;
+    /** Props for the empty state Text. */
+    readonly emptyStateTextProps: Omit<InkBoxProps, "children">;
+    /** Opens a spawned strategy transcript in its dedicated page. */
+    readonly onOpenSubStrategy?: (toolCallId: string) => void;
+}
+export interface GroupedChatMessage extends ChatMessage {
+    /** Messages spawned by a `launch_strategy` tool call inside this message. */
+    readonly subMessages: readonly GroupedChatMessage[];
+}

package/dist/components/MessageList/OutputModal/OutputModal.constants.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Single shared modal id for the OutputModal. The modal is a singleton —
+ * only one expanded tool-result / thinking body is shown at a time —
+ * so a stable id is enough.
+ */
+export declare const OUTPUT_MODAL_ID = "output-modal";
+/**
+ * Maximum number of lines retained in memory for grep+highlight. Beyond
+ * this, the modal still shows scrollable content but search compiles
+ * are skipped to keep frame time bounded. Picked empirically to handle
+ * a multi-MB tool dump on a slow terminal without locking the UI.
+ */
+export declare const OUTPUT_MODAL_GREP_LINE_CAP = 5000;
+/**
+ * Glyph repeated for the modal's "no matches" empty-state row. Single
+ * em-dash so it visually distinguishes from a literal grep hit.
+ */
+export declare const OUTPUT_MODAL_EMPTY_LINE = "\u2014";
+/**
+ * Placeholder shown inside the search input before the user types.
+ */
+export declare const OUTPUT_MODAL_SEARCH_PLACEHOLDER = "regex\u2026";

package/dist/components/MessageList/OutputModal/OutputModal.d.ts

@@ -0,0 +1,37 @@
+import type React from "react";
+import type { OutputModalTheme } from "./OutputModal.theme";
+import type { OutputModalLine, OutputModalQuery } from "./OutputModal.types";
+/**
+ * Modal expansion of a tool-result or thinking segment with regex
+ * filter + highlight.
+ *
+ * Behaviour:
+ * - The body is split into lines and rendered verbatim (plain text).
+ *   Both `tool-result` and `thinking` use the same renderer here —
+ *   markdown rendering happens in the main MessageList view, not in
+ *   the modal, so grep semantics line up with what the user sees.
+ * - When the search query is empty, every line is shown without
+ *   highlighting (fast path).
+ * - When the query is a valid regex, only matching lines are kept and
+ *   the matching slices are inverse-highlighted in place.
+ * - Esc dismisses (handled by the underlying `Modal`); a click outside
+ *   the modal content box also dismisses.
+ *
+ * The modal is a singleton — only one `<OutputModal />` should be
+ * mounted at a time, identified by {@link OUTPUT_MODAL_ID}. Open it
+ * from anywhere via `useModal(OUTPUT_MODAL_ID).open(payload)`.
+ */
+export declare function OutputModal(): React.ReactElement | null;
+/**
+ * Pure render half of {@link OutputModal} — receives a fully-prepared
+ * line list and a compiled query, so unit tests can exercise the
+ * renderer without going through `useModal`.
+ */
+export interface OutputModalRenderProps {
+    readonly theme: OutputModalTheme;
+    readonly query: OutputModalQuery;
+    readonly lines: readonly OutputModalLine[];
+    readonly onQueryChange: (next: string) => void;
+    readonly scrollToRow?: number;
+}
+export declare function OutputModalRender({ theme, query, lines, onQueryChange, scrollToRow, }: OutputModalRenderProps): React.ReactElement;

package/dist/components/MessageList/OutputModal/OutputModal.theme.d.ts

@@ -0,0 +1,68 @@
+import { type ThemeOf } from "../../../Theme";
+/**
+ * Memoized themed style objects for the {@link OutputModal} component.
+ *
+ * Sized to fit the existing `Modal` chrome — the OutputModal renders
+ * inside a `Modal`, so this theme covers the body shell + search bar
+ * + line list, not the surrounding overlay.
+ */
+export declare const useOutputModalTheme: () => {
+    body: {
+        flexDirection: "column";
+        width: string;
+        minHeight: number;
+        flexGrow: number;
+        overflow: "hidden";
+    };
+    searchRow: {
+        flexDirection: "row";
+        flexShrink: number;
+    };
+    statusRow: {
+        flexDirection: "row";
+        flexShrink: number;
+        marginBottom: number;
+    };
+    /** Style of the trailing "N matches" / "no matches" status text. */
+    searchStatus: {
+        color: string;
+        dimColor: boolean;
+    };
+    /** Style applied when the user-typed regex fails to compile. */
+    searchStatusError: {
+        color: string;
+    };
+    /** Container around the rendered (possibly filtered) line list. */
+    lineList: {
+        flexDirection: "column";
+        flexGrow: number;
+        overflow: "hidden";
+    };
+    /** Single line row container. */
+    lineRow: {
+        flexDirection: "row";
+    };
+    /** Faint left-gutter line number. */
+    lineNumber: {
+        color: string;
+        dimColor: boolean;
+    };
+    /** Default text style for non-matching segments. */
+    lineText: {
+        color: string;
+    };
+    /** Inverted highlight applied to matching segments. */
+    lineMatch: {
+        color: string;
+        backgroundColor: string;
+        bold: true;
+    };
+    /** Style of the empty-state row when the query matches nothing. */
+    emptyState: {
+        color: string;
+        dimColor: boolean;
+        italic: true;
+    };
+};
+/** Resolved style object shape returned by {@link useOutputModalTheme}. */
+export type OutputModalTheme = ThemeOf<typeof useOutputModalTheme>;

package/dist/components/MessageList/OutputModal/OutputModal.types.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Discriminator for what kind of agent segment is being expanded.
+ * Used purely for the modal title prefix and for analytics-friendly
+ * snapshots; the body itself is always plain text.
+ */
+export type OutputModalKind = "tool-result" | "thinking";
+/**
+ * Payload carried via {@link useModal} when opening the OutputModal.
+ *
+ * `body` is taken verbatim from the source segment (no markdown
+ * pre-processing) so grep semantics line up with what the user sees.
+ */
+export interface OutputModalPayload {
+    /** Origin segment kind — drives the title prefix only. */
+    readonly kind: OutputModalKind;
+    /** Human-readable header text (e.g. tool name or "thinking"). */
+    readonly title: string;
+    /** Raw multi-line body to display. */
+    readonly body: string;
+}
+/**
+ * A single rendered line inside the modal body, after filtering by
+ * the current search query.
+ *
+ * `segments` is a sequence of `(text, isMatch)` runs that the renderer
+ * walks to draw highlight inversions. When the query is empty, every
+ * line collapses to a single `{ text, isMatch: false }` segment.
+ */
+export interface OutputModalLine {
+    /** 1-based source line number, preserved from the original body. */
+    readonly lineNumber: number;
+    /** Run-length segmentation of the line for highlight rendering. */
+    readonly segments: readonly OutputModalLineSegment[];
+}
+/** One run inside an `OutputModalLine`. */
+export interface OutputModalLineSegment {
+    /** Slice of the source line. */
+    readonly text: string;
+    /** Whether this slice matched the active grep regex. */
+    readonly isMatch: boolean;
+}
+/**
+ * Result of compiling a user-supplied search query.
+ *
+ * `regex === null` means "no active filter" — the renderer should show
+ * every line and skip highlighting. We surface the original query so
+ * the search bar can echo it back unmodified.
+ */
+export interface OutputModalQuery {
+    /** Original query string as typed by the user. */
+    readonly raw: string;
+    /** Compiled regex, or `null` when the query is empty / invalid. */
+    readonly regex: RegExp | null;
+    /** True when the user typed a non-empty query that failed to compile. */
+    readonly invalid: boolean;
+}

package/dist/components/MessageList/OutputModal/OutputModal.utils.d.ts

@@ -0,0 +1,3 @@
+import type { OutputModalLine, OutputModalQuery } from "./OutputModal.types";
+export declare function compileQuery(raw: string): OutputModalQuery;
+export declare function filterAndHighlight(body: string, regex: RegExp | null): readonly OutputModalLine[];

package/dist/components/MessageList/OutputModal/index.d.ts

@@ -0,0 +1,6 @@
+export type { OutputModalRenderProps } from "./OutputModal";
+export { OutputModal, OutputModalRender } from "./OutputModal";
+export { OUTPUT_MODAL_EMPTY_LINE, OUTPUT_MODAL_GREP_LINE_CAP, OUTPUT_MODAL_ID, OUTPUT_MODAL_SEARCH_PLACEHOLDER, } from "./OutputModal.constants";
+export type { OutputModalTheme } from "./OutputModal.theme";
+export { useOutputModalTheme } from "./OutputModal.theme";
+export type { OutputModalKind, OutputModalLine, OutputModalLineSegment, OutputModalPayload, OutputModalQuery, } from "./OutputModal.types";

package/dist/components/MessageList/SpawnedStrategyView/SpawnedStrategyView.d.ts

@@ -0,0 +1,47 @@
+import type React from "react";
+import type { ToolCallViewStatus } from "../ToolCallView";
+import type { SpawnedStrategyViewTheme } from "./SpawnedStrategyView.theme";
+export interface SpawnedStrategyViewProps {
+    /** Raw JSON-encoded arguments from the `launch_strategy` tool call. */
+    readonly args: string;
+    /** Current execution status of the spawned strategy. */
+    readonly status: ToolCallViewStatus;
+    /** Raw JSON-encoded result from the completed `launch_strategy` tool call. */
+    readonly output?: string;
+    /** Error message when the spawned strategy failed. */
+    readonly error?: string;
+    /** Opens the spawned strategy transcript in its dedicated page. */
+    readonly onOpen?: () => void;
+    /** Nested messages emitted while the spawned strategy was running. */
+    readonly children: React.ReactNode;
+}
+export declare function SpawnedStrategyView({ args, status, output, error, onOpen, children, }: SpawnedStrategyViewProps): React.ReactElement;
+export interface SpawnedStrategyViewRenderProps {
+    /** Resolved theme styles. */
+    readonly theme: SpawnedStrategyViewTheme;
+    /** Status glyph shown before the label. */
+    readonly leadingGlyph: string;
+    /** Strategy name parsed from the tool-call arguments. */
+    readonly strategyName: string;
+    /** Initial input preview parsed from the tool-call arguments. */
+    readonly inputPreview: string;
+    /** Optional provider/model override parsed from the tool-call arguments. */
+    readonly modelOverride: string;
+    /** Details parsed from the completed tool result. */
+    readonly resultDetails: ParsedLaunchStrategyResult;
+    /** Current execution status of the spawned strategy. */
+    readonly status: ToolCallViewStatus;
+    /** Error message when the spawned strategy failed. */
+    readonly error?: string;
+    /** Opens the spawned strategy transcript in its dedicated page. */
+    readonly onOpen?: () => void;
+    /** Nested message rows emitted by the spawned strategy. */
+    readonly children: React.ReactNode;
+}
+export declare function SpawnedStrategyViewRender({ theme, leadingGlyph, strategyName, inputPreview, modelOverride, resultDetails, status, error, onOpen, children, }: SpawnedStrategyViewRenderProps): React.ReactElement;
+interface ParsedLaunchStrategyResult {
+    readonly path: string;
+    readonly finishReason: string;
+    readonly resultPreview: string;
+}
+export {};

package/dist/components/MessageList/SpawnedStrategyView/SpawnedStrategyView.theme.d.ts

@@ -0,0 +1,58 @@
+import { type ThemeOf } from "../../../Theme";
+export declare const useSpawnedStrategyViewTheme: () => {
+    container: {
+        flexDirection: "column";
+        marginTop: number;
+        marginBottom: number;
+    };
+    body: {
+        flexDirection: "column";
+        paddingLeft: number;
+    };
+    metaRow: {
+        flexDirection: "row";
+        marginBottom: number;
+    };
+    detailRow: {
+        flexDirection: "row";
+        paddingLeft: number;
+    };
+    nestedMessages: {
+        flexDirection: "column";
+    };
+    runningGlyph: {
+        color: string;
+    };
+    completedGlyph: {
+        color: string;
+    };
+    errorGlyph: {
+        color: string;
+    };
+    title: {
+        bold: boolean;
+        color: string;
+    };
+    detailLabel: {
+        bold: boolean;
+    };
+    openTarget: {
+        flexDirection: "row";
+    };
+    openHint: {
+        color: string;
+        underline: true;
+    };
+    muted: {
+        dimColor: boolean;
+    };
+    error: {
+        color: string;
+    };
+    borderColor: {
+        running: string;
+        completed: string;
+        error: string;
+    };
+};
+export type SpawnedStrategyViewTheme = ThemeOf<typeof useSpawnedStrategyViewTheme>;

package/dist/components/MessageList/SpawnedStrategyView/index.d.ts

@@ -0,0 +1,4 @@
+export type { SpawnedStrategyViewProps, SpawnedStrategyViewRenderProps, } from "./SpawnedStrategyView";
+export { SpawnedStrategyView, SpawnedStrategyViewRender, } from "./SpawnedStrategyView";
+export type { SpawnedStrategyViewTheme } from "./SpawnedStrategyView.theme";
+export { useSpawnedStrategyViewTheme } from "./SpawnedStrategyView.theme";

package/dist/components/MessageList/SystemMessage/SystemMessage.d.ts

@@ -0,0 +1,21 @@
+import type React from "react";
+import { useMessageListTheme } from "../MessageList.theme";
+export interface SystemMessageProps {
+    /** Body of the system message. */
+    readonly text: string;
+}
+/**
+ * Renders a single system-authored message inside a bordered panel.
+ *
+ * Surfaces strategy lifecycle events, step started/completed notifications,
+ * and surfaced errors. The panel header is fixed to "system" so the role
+ * is unambiguous in the scrollback.
+ */
+export declare function SystemMessage({ text, }: SystemMessageProps): React.ReactElement;
+export interface SystemMessageRenderProps {
+    /** Resolved MessageList theme styles. */
+    readonly theme: ReturnType<typeof useMessageListTheme>;
+    /** Body of the system message. */
+    readonly text: string;
+}
+export declare function SystemMessageRender({ theme, text, }: SystemMessageRenderProps): React.ReactElement;

package/dist/components/MessageList/SystemMessage/index.d.ts

@@ -0,0 +1,2 @@
+export type { SystemMessageProps, SystemMessageRenderProps, } from "./SystemMessage";
+export { SystemMessage, SystemMessageRender } from "./SystemMessage";

package/dist/components/MessageList/ToolCallView/ToolCallView.constants.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Glyph drawn at the head of a completed tool-call row.
+ *
+ * Heavy check mark — distinct from a regular ASCII tick to read as a
+ * status badge rather than punctuation. Single cell wide.
+ */
+export declare const TOOL_CALL_GLYPH_COMPLETED = "\u2713";
+/**
+ * Glyph drawn at the head of an errored tool-call row.
+ *
+ * Heavy ballot X — pairs visually with the completed check mark and
+ * stays single-cell wide for column alignment.
+ */
+export declare const TOOL_CALL_GLYPH_ERROR = "\u2717";
+/**
+ * Maximum number of characters of args preview rendered inline before
+ * truncation with an ellipsis. Newlines are collapsed to spaces *before*
+ * truncation so multi-line JSON blobs still render as a single visual
+ * row.
+ *
+ * NOTE: A future iteration will replace this with viewport-width-fitting
+ * once `viewportWidth` is plumbed into the segment render path. Until
+ * then, this cap matches the renderer's actual single-line capacity on
+ * an 80-column panel and keeps the row estimator's text-only count in
+ * sync with the rendered output.
+ */
+export declare const TOOL_CALL_ARGS_PREVIEW_LENGTH = 160;
+/**
+ * Maximum length of an inline error message in the result summary
+ * before truncation. Errors are usually short (`ENOENT…`,
+ * `TypeError: …`) but we cap defensively so a stack-trace-shaped error
+ * can't blow up a row.
+ */
+export declare const TOOL_CALL_ERROR_PREVIEW_LENGTH = 120;
+/**
+ * Single-character ellipsis appended to clipped previews.
+ *
+ * Using the typographic `\u2026` rather than three dots keeps the
+ * preview a single visual cell shorter than `...` would, and matches
+ * the existing `truncatePreview` helper in `AgentMessage.tsx`.
+ */
+export declare const TOOL_CALL_ELLIPSIS = "\u2026";

package/dist/components/MessageList/ToolCallView/ToolCallView.d.ts

@@ -0,0 +1,71 @@
+import type React from "react";
+import type { ToolCallViewTheme } from "./ToolCallView.theme";
+import type { ToolCallViewStatus } from "./ToolCallView.types";
+export interface ToolCallViewProps {
+    /** Bare name of the tool that was invoked (e.g. `"read_file"`). */
+    readonly toolName: string;
+    /**
+     * Stringified tool-call arguments. Multi-line / long blobs are
+     * collapsed and clipped to a single visual row by the renderer; pass
+     * the raw value here.
+     */
+    readonly args: string;
+    /** Current visual state. */
+    readonly status: ToolCallViewStatus;
+    /**
+     * Stringified tool-result output. Used only for `status === "completed"`
+     * to derive the trailing `\u2192 N lines` summary.
+     */
+    readonly output?: string;
+    /**
+     * Error message, populated when the tool errored. Drives the
+     * trailing `\u2192 <message>` summary for `status === "error"`.
+     */
+    readonly error?: string;
+}
+/**
+ * One-line collapsed view of a tool call paired with its result.
+ *
+ * Renders as a single logical row inside an agent message:
+ *
+ * ```
+ * <glyph> <toolName> <argsPreview>  <resultSummary>
+ * ```
+ *
+ * - `<glyph>` animates between {@link TOOL_SPINNER_FRAMES} while the
+ *   call is in flight (driven by the shared
+ *   {@link useToolSpinner} interval) and resolves to a check / cross
+ *   on completion.
+ * - `<argsPreview>` is collapsed to one visual line and truncated; see
+ *   {@link formatArgsPreview}.
+ * - `<resultSummary>` is omitted while running and reduced to a line
+ *   count or a clipped error message otherwise; see
+ *   {@link formatResultSummary}.
+ *
+ * The component is intentionally render-pure beyond the spinner tick:
+ * it does not subscribe to chat state and reads only the tokens it
+ * needs from the theme.
+ */
+export declare function ToolCallView({ toolName, args, status, output, error, }: ToolCallViewProps): React.ReactElement;
+export interface ToolCallViewRenderProps {
+    /** Resolved theme styles. */
+    readonly theme: ToolCallViewTheme;
+    /** Glyph rendered at the head of the row. */
+    readonly leadingGlyph: string;
+    /** Bare name of the tool. */
+    readonly toolName: string;
+    /** Pre-truncated, single-line args preview (may be empty). */
+    readonly argsPreview: string;
+    /** Pre-formatted result summary. Empty string when there is no result yet. */
+    readonly resultSummary: string;
+    /** Visual status — drives glyph color and error-summary styling. */
+    readonly status: ToolCallViewStatus;
+}
+/**
+ * Pure render half of {@link ToolCallView}.
+ *
+ * Split out so unit tests can render the component with a hand-crafted
+ * theme and pre-formatted strings without touching the spinner hook or
+ * the theme provider — same pattern as {@link CodeViewRender}.
+ */
+export declare function ToolCallViewRender({ theme, leadingGlyph, toolName, argsPreview, resultSummary, status, }: ToolCallViewRenderProps): React.ReactElement;