@alexkroman1/aai-ui 5.5.1 → 5.7.0

package/dist/default-client/assets/{playback-processor-D2xR7szm.js → playback-processor-X5id-na1.js}

@@ -1,4 +1,4 @@
-import{i as e}from"./index-C99SRlSn.js";import{t}from"./_module-url-BX0RuRU2.js";var n=t(`
+import{i as e}from"./index-fLjOiK97.js";import{t}from"./_module-url-BX0RuRU2.js";var n=t(`
 class PlaybackProcessor extends AudioWorkletProcessor {
   constructor(options) {
     super();

package/dist/default-client/index.html

@@ -6,8 +6,8 @@
     <title>aai</title>
     <link rel="icon" href="./favicon.ico" />
     <style>html, body { background: #FBF8F2; margin: 0; }</style>
-    <script type="module" crossorigin src="./assets/index-C99SRlSn.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-CRfdZPH1.css">
+    <script type="module" crossorigin src="./assets/index-fLjOiK97.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-CuPmIAbL.css">
   </head>
   <body>
     <main id="app"></main>

package/dist/define-client.js

@@ -1,8 +1,8 @@
-import { r as fetchClientConfig, t as createSessionCore } from "./session-core-KY9B5nqn.js";
+import { r as fetchClientConfig, t as createSessionCore } from "./session-core-DqibBzJz.js";
 import { SessionProvider, ThemeProvider } from "./context.js";
-import { t as ChatView } from "./chat-view-CqRGHImR.js";
+import { t as ChatView } from "./chat-view-DFBmX5eX.js";
 import { t as pageBaseUrl } from "./_utils-CsqbIVGI.js";
-import { n as ToolConfigContext } from "./tool-call-block-C--Bj04_.js";
+import { n as ToolConfigContext } from "./tool-call-block-BjemDFB9.js";
 import { SidebarLayout } from "./components/sidebar-layout.js";
 import { StartScreen } from "./components/start-screen.js";
 import { createElement, useEffect, useState } from "react";

package/dist/index.d.ts

@@ -2,10 +2,11 @@ export { buildAgentUrl, type ClientConfigResponse, fetchClientConfig, loadClient
 export { Button, type ButtonSize, type ButtonVariant } from "./components/button.tsx";
 export { ChatView } from "./components/chat-view.tsx";
 export { Controls } from "./components/controls.tsx";
-export { Markdown } from "./components/markdown.tsx";
+export { Markdown, type MarkdownVariant } from "./components/markdown.tsx";
 export { MessageList } from "./components/message-list.tsx";
 export { SidebarLayout } from "./components/sidebar-layout.tsx";
 export { StartScreen } from "./components/start-screen.tsx";
+export { ToolCallRow, type ToolCallRowProps, type ToolCallRowVariant, } from "./components/tool-call-row.tsx";
 export type { ToolDisplayConfig } from "./components/tool-config-context.ts";
 export { ToolConfigContext } from "./components/tool-config-context.ts";
 export { ApiUrlChip, SessionUrlChips, UiUrlChip } from "./components/url-chips.tsx";

package/dist/index.js

@@ -1,13 +1,13 @@
-import { i as loadClientConfig, n as buildAgentUrl, r as fetchClientConfig, t as createSessionCore } from "./session-core-KY9B5nqn.js";
+import { i as loadClientConfig, n as buildAgentUrl, r as fetchClientConfig, t as createSessionCore } from "./session-core-DqibBzJz.js";
 import { SessionProvider, ThemeProvider, useSession, useSessionSelector, useTheme } from "./context.js";
 import { Button } from "./components/button.js";
-import { t as ChatView } from "./chat-view-CqRGHImR.js";
+import { t as ChatView } from "./chat-view-DFBmX5eX.js";
 import { i as UiUrlChip, n as ApiUrlChip, r as SessionUrlChips, t as Controls } from "./controls-CoBO6sId.js";
-import { n as Markdown, t as MessageList } from "./message-list-CdtrNi4w.js";
-import { n as ToolConfigContext } from "./tool-call-block-C--Bj04_.js";
+import { n as Markdown, t as MessageList } from "./message-list-DkAHoB3A.js";
+import { n as ToolConfigContext, r as ToolCallRow } from "./tool-call-block-BjemDFB9.js";
 import { SidebarLayout } from "./components/sidebar-layout.js";
 import { StartScreen } from "./components/start-screen.js";
 import { VOICE_CAPTURE_CONSTRAINTS } from "./types.js";
 import { client } from "./define-client.js";
 import { useAgentState, useEvent, useToolCallStart, useToolResult } from "./hooks.js";
-export { ApiUrlChip, Button, ChatView, Controls, Markdown, MessageList, SessionProvider, SessionUrlChips, SidebarLayout, StartScreen, ThemeProvider, ToolConfigContext, UiUrlChip, VOICE_CAPTURE_CONSTRAINTS, buildAgentUrl, client, createSessionCore, fetchClientConfig, loadClientConfig, useAgentState, useEvent, useSession, useSessionSelector, useTheme, useToolCallStart, useToolResult };
+export { ApiUrlChip, Button, ChatView, Controls, Markdown, MessageList, SessionProvider, SessionUrlChips, SidebarLayout, StartScreen, ThemeProvider, ToolCallRow, ToolConfigContext, UiUrlChip, VOICE_CAPTURE_CONSTRAINTS, buildAgentUrl, client, createSessionCore, fetchClientConfig, loadClientConfig, useAgentState, useEvent, useSession, useSessionSelector, useTheme, useToolCallStart, useToolResult };

package/dist/{message-list-CdtrNi4w.js → message-list-DkAHoB3A.js}

@@ -1,9 +1,10 @@
 import { useSessionSelector, useTheme } from "./context.js";
 import { i as TEXT_MUTED, n as SURFACE_TINT, o as primaryTint, r as TEXT_FAINT } from "./_colors-Bfh3-BVE.js";
-import { t as ToolCallBlock } from "./tool-call-block-C--Bj04_.js";
+import { t as ToolCallBlock } from "./tool-call-block-BjemDFB9.js";
 import clsx from "clsx";
-import { memo, useCallback, useEffect, useMemo, useRef } from "react";
+import { memo, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { StickToBottom } from "use-stick-to-bottom";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 //#region components/markdown.tsx
@@ -34,6 +35,22 @@ function escapeBareListMarkers(text) {
 		return line;
 	}).join("\n");
 }
+const SCALE_CLASSES = {
+	default: {
+		h1: "mt-3 mb-1.5 text-[17px] font-semibold",
+		h2: "mt-3 mb-1.5 text-[16px] font-semibold",
+		h3: "mt-3 mb-1.5 text-[15px] font-semibold",
+		code: "text-[12.5px]",
+		table: "my-1.5 w-full border-collapse text-sm"
+	},
+	compact: {
+		h1: "mt-3 mb-1.5 text-[15px] font-medium",
+		h2: "mt-3 mb-1.5 text-[14px] font-medium",
+		h3: "mt-3 mb-1.5 text-[13px] font-medium",
+		code: "text-[11px]",
+		table: "my-1.5 w-full border-collapse text-[12px]"
+	}
+};
 /**
 * Agent prose, rendered as Markdown.
 *
@@ -41,6 +58,8 @@ function escapeBareListMarkers(text) {
 * this they arrived as literal asterisks and backticks. Styling is
 * per-element (theme colors via inline styles, spacing via Tailwind) so it
 * stays on the default client's type scale and follows custom themes.
+* The optional `variant` selects the type scale (see
+* {@link MarkdownVariant}).
 * GFM is on for tables and strikethrough. react-markdown does not render
 * raw HTML unless rehype-raw is added — keep it that way, this text comes
 * from a model.
@@ -50,8 +69,9 @@ function escapeBareListMarkers(text) {
 *
 * @public
 */
-const Markdown = memo(function Markdown({ text }) {
+const Markdown = memo(function Markdown({ text, variant = "default" }) {
 	const theme = useTheme();
+	const scale = SCALE_CLASSES[variant];
 	const components = useMemo(() => ({
 		p: (props) => /* @__PURE__ */ jsx("p", {
 			className: "my-1.5 first:mt-0 last:mb-0",
@@ -70,15 +90,15 @@ const Markdown = memo(function Markdown({ text }) {
 			...props
 		}),
 		h1: (props) => /* @__PURE__ */ jsx("h1", {
-			className: "mt-3 mb-1.5 text-[17px] font-semibold",
+			className: scale.h1,
 			...props
 		}),
 		h2: (props) => /* @__PURE__ */ jsx("h2", {
-			className: "mt-3 mb-1.5 text-[16px] font-semibold",
+			className: scale.h2,
 			...props
 		}),
 		h3: (props) => /* @__PURE__ */ jsx("h3", {
-			className: "mt-3 mb-1.5 text-[15px] font-semibold",
+			className: scale.h3,
 			...props
 		}),
 		a: ({ style, ...props }) => /* @__PURE__ */ jsx("a", {
@@ -93,11 +113,11 @@ const Markdown = memo(function Markdown({ text }) {
 		}),
 		code: ({ className, style, children, ...rest }) => {
 			return /language-/.test(className ?? "") ? /* @__PURE__ */ jsx("code", {
-				className: "font-aai-mono text-[12.5px]",
+				className: clsx("font-aai-mono", scale.code),
 				...rest,
 				children
 			}) : /* @__PURE__ */ jsx("code", {
-				className: "rounded-sm border px-1 py-0.5 font-aai-mono text-[12.5px]",
+				className: clsx("rounded-sm border px-1 py-0.5 font-aai-mono", scale.code),
 				style: {
 					borderColor: theme.border,
 					background: SURFACE_TINT,
@@ -126,7 +146,7 @@ const Markdown = memo(function Markdown({ text }) {
 			...props
 		}),
 		table: (props) => /* @__PURE__ */ jsx("table", {
-			className: "my-1.5 w-full border-collapse text-sm",
+			className: scale.table,
 			...props
 		}),
 		th: ({ style, ...props }) => /* @__PURE__ */ jsx("th", {
@@ -153,7 +173,7 @@ const Markdown = memo(function Markdown({ text }) {
 			},
 			...props
 		})
-	}), [theme]);
+	}), [theme, scale]);
 	return /* @__PURE__ */ jsx(ReactMarkdown, {
 		remarkPlugins: [remarkGfm],
 		components,
@@ -233,53 +253,6 @@ const MessageBubble = memo(function MessageBubble({ message, theme }) {
 	});
 });
 /**
-* How close to the bottom (px) the container must be for auto-scroll to stay
-* engaged. Generous enough that an in-flight smooth scroll doesn't unpin.
-*/
-const NEAR_BOTTOM_PX = 96;
-/**
-* Smooth-scroll to the anchor whenever the content version advances — but
-* only while the container is pinned near the bottom. A user who scrolled up
-* to read history isn't yanked back down by streaming updates; scrolling back
-* to the bottom re-engages the auto-scroll.
-*
-* The scroll runs inside `requestAnimationFrame` and is deduped per frame:
-* several snapshot updates in one frame (transcript + message + tool call)
-* trigger a single scroll after layout instead of one forced layout each.
-*
-* While a partial transcript is streaming, updates arrive faster than a
-* smooth scroll finishes — each restart leaves the animation perpetually
-* mid-flight — so `streaming` switches to an instant jump; committed-content
-* updates keep the smooth animation.
-*/
-function useAutoScroll(contentVersion, streaming) {
-	const anchorRef = useRef(null);
-	const pinnedRef = useRef(true);
-	const scheduledRef = useRef(false);
-	const streamingRef = useRef(streaming);
-	streamingRef.current = streaming;
-	const onScroll = useCallback((event) => {
-		const el = event.currentTarget;
-		pinnedRef.current = el.scrollTop + el.clientHeight >= el.scrollHeight - NEAR_BOTTOM_PX;
-	}, []);
-	useEffect(() => {
-		if (contentVersion === 0 || scheduledRef.current || !pinnedRef.current) return;
-		scheduledRef.current = true;
-		requestAnimationFrame(() => {
-			scheduledRef.current = false;
-			if (!pinnedRef.current) return;
-			anchorRef.current?.scrollIntoView({
-				behavior: streamingRef.current ? "instant" : "smooth",
-				block: "end"
-			});
-		});
-	}, [contentVersion]);
-	return {
-		anchorRef,
-		onScroll
-	};
-}
-/**
 * Interleave messages and tool calls into render items, ordered by insertion
 * time. Each tool call renders immediately after its anchor message
 * (`afterMessageId`); tool calls whose anchor slid out of the retained window
@@ -323,7 +296,7 @@ function interleave(messages, toolCalls, renderMessage, renderToolCall) {
 * }
 * ```
 *
-* @param className - Additional CSS class names applied to the scroll container.
+* @param className - Additional CSS class names applied to the outer list container.
 *
 * @public
 */
@@ -333,7 +306,6 @@ const MessageList = memo(function MessageList({ className }) {
 	const toolCalls = useSessionSelector((s) => s.toolCalls);
 	const userTranscript = useSessionSelector((s) => s.userTranscript);
 	const agentTranscript = useSessionSelector((s) => s.agentTranscript);
-	const contentVersion = useSessionSelector((s) => s.contentVersion);
 	const theme = useTheme();
 	const showThinking = useMemo(() => {
 		if (state !== "thinking") return false;
@@ -346,7 +318,6 @@ const MessageList = memo(function MessageList({ className }) {
 		toolCalls,
 		messages
 	]);
-	const { anchorRef, onScroll } = useAutoScroll(contentVersion, userTranscript !== null);
 	const streamingMessage = useMemo(() => agentTranscript ? {
 		role: "assistant",
 		content: agentTranscript
@@ -359,12 +330,14 @@ const MessageList = memo(function MessageList({ className }) {
 		toolCalls,
 		theme
 	]);
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsx(StickToBottom, {
 		role: "log",
-		className: clsx("flex-1 overflow-y-auto [scrollbar-width:none]", className),
+		className: clsx("flex-1 min-h-0", className),
 		style: { background: theme.surface },
-		onScroll,
-		children: /* @__PURE__ */ jsxs("div", {
+		initial: "instant",
+		resize: "smooth",
+		children: /* @__PURE__ */ jsxs(StickToBottom.Content, {
+			scrollClassName: "overflow-y-auto [scrollbar-width:none]",
 			className: "flex flex-col gap-4 p-7",
 			children: [
 				items,
@@ -377,8 +350,7 @@ const MessageList = memo(function MessageList({ className }) {
 					color: "#6F6A60",
 					children: userTranscript ? userTranscript : /* @__PURE__ */ jsx(ThinkingDots, {})
 				}),
-				showThinking && /* @__PURE__ */ jsx(ThinkingDots, {}),
-				/* @__PURE__ */ jsx("div", { ref: anchorRef })
+				showThinking && /* @__PURE__ */ jsx(ThinkingDots, {})
 			]
 		})
 	});

package/dist/{session-core-KY9B5nqn.js → session-core-DqibBzJz.js}

@@ -375,6 +375,9 @@ function createMessageHandlers(deps) {
 			case "error":
 				handleErrorEvent(e);
 				break;
+			case "idle_timeout":
+				deps.conn.retiredByServer = true;
+				break;
 			default: break;
 		}
 	}
@@ -591,6 +594,7 @@ function createSessionCore(options) {
 	}
 	const conn = {
 		ws: null,
+		retiredByServer: false,
 		voiceIO: null,
 		audioSetupInFlight: false,
 		generation: createEpoch(),
@@ -714,6 +718,7 @@ function createSessionCore(options) {
 		loadAudioModules().catch(() => {});
 		teardownConnection();
 		conn.generation.bump();
+		conn.retiredByServer = false;
 		const controller = new AbortController();
 		connectionController = controller;
 		const { signal: sig } = controller;
@@ -735,7 +740,7 @@ function createSessionCore(options) {
 		socket.addEventListener("close", () => {
 			if (sig.aborted) return;
 			cleanupAudio();
-			if (reconnectPending(socket)) {
+			if (!conn.retiredByServer && reconnectPending(socket)) {
 				conn.generation.bump();
 				socketErrored = false;
 				updateState({

package/dist/session-core-types.d.ts

@@ -140,6 +140,17 @@ export type SessionCoreOptions = VoiceSessionOptions;
  */
 export type ConnState = {
     ws: InstanceType<WebSocketConstructor> | null;
+    /**
+     * The server retired this session for idleness (`idle_timeout`), so the
+     * close that follows is EXPECTED and must not be retried.
+     *
+     * Without this the automatic reconnect would immediately re-open the
+     * session the server just reclaimed — a tab left open would cycle forever
+     * and the guest would never see zero sessions, which is the whole point of
+     * the timeout. Reconnecting is the user's call from here (the controls
+     * reconnect on demand).
+     */
+    retiredByServer: boolean;
     voiceIO: VoiceIO | null;
     audioSetupInFlight: boolean;
     /** Connection epoch, bumped on each connect()/retry (see `createEpoch`).

package/dist/session-core.js

@@ -1,2 +1,2 @@
-import { t as createSessionCore } from "./session-core-KY9B5nqn.js";
+import { t as createSessionCore } from "./session-core-DqibBzJz.js";
 export { createSessionCore };

package/dist/{tool-call-block-C--Bj04_.js → tool-call-block-BjemDFB9.js}

@@ -4,7 +4,92 @@ import { t as Eyebrow } from "./eyebrow-C6ZFuiz6.js";
 import { n as truncate, r as tryParseJSON } from "./_utils-CsqbIVGI.js";
 import clsx from "clsx";
 import { createContext, memo, useContext, useMemo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region components/tool-call-row.tsx
+/** @jsxImportSource react */
+const VARIANT_CLASSES = {
+	default: {
+		button: "gap-2.5 px-3.5 py-2.5",
+		title: "text-[13px]",
+		chevron: "text-[10px]"
+	},
+	compact: {
+		button: "gap-2 px-3 py-2",
+		title: "text-[11px]",
+		chevron: "text-[9px]"
+	}
+};
+/**
+* The design system's console row for one tool invocation: a small outlined
+* "TOOL" chip (or a custom `icon`), the tool title in mono, a truncated
+* detail preview, and a rotating chevron that expands to the panel content.
+*
+* Purely presentational — callers own the mapping from their tool-call data
+* to `title`/`detail`/`pending` and the expanded panel. The deployed agent
+* UI's message list renders it via its tool-call block, and the studio's
+* chat transcript renders it with `variant="compact"`, so the two surfaces
+* read as one component.
+*
+* Colors come from the nearest theme context (see {@link useTheme}); without
+* a provider the default AssemblyAI theme applies.
+*
+* @public
+*/
+function ToolCallRow({ title, detail, pending = false, icon, variant = "default", className, children }) {
+	const [isOpen, setIsOpen] = useState(false);
+	const theme = useTheme();
+	const sizes = VARIANT_CLASSES[variant];
+	const canExpand = children != null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("flex flex-col rounded-md border overflow-hidden", className),
+		style: {
+			borderColor: theme.border,
+			background: theme.bg
+		},
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": canExpand ? isOpen : void 0,
+			disabled: !canExpand,
+			className: clsx("flex items-center select-none text-left w-full appearance-none border-none bg-transparent", sizes.button, canExpand && "cursor-pointer"),
+			onClick: () => {
+				if (canExpand) setIsOpen(!isOpen);
+			},
+			children: [
+				icon ? /* @__PURE__ */ jsx("span", {
+					className: "w-4 h-4 shrink-0 text-center leading-4",
+					children: icon
+				}) : /* @__PURE__ */ jsx(Eyebrow, {
+					className: "shrink-0",
+					style: { color: TEXT_FAINT },
+					children: "Tool"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: clsx("shrink-0 font-aai-mono font-medium", sizes.title, pending && "tool-shimmer"),
+					style: { color: theme.text },
+					children: title
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: clsx("font-aai-mono truncate flex-1 min-w-0", sizes.title),
+					style: { color: TEXT_FAINT },
+					children: detail
+				}),
+				canExpand && /* @__PURE__ */ jsx("span", {
+					className: clsx("shrink-0 transition-transform duration-150", sizes.chevron, isOpen && "rotate-90"),
+					style: { color: "#6F6A60" },
+					children: "▶"
+				})
+			]
+		}), isOpen && canExpand && /* @__PURE__ */ jsx("div", {
+			className: "border-t max-h-64 overflow-auto",
+			style: {
+				borderColor: theme.border,
+				background: theme.surface
+			},
+			children
+		})]
+	});
+}
+//#endregion
 //#region components/tool-config-context.ts
 /**
 * Context for tool display configuration. Installed by `client()` from
@@ -29,10 +114,10 @@ function formatResult(result) {
 	return parsed === result ? result : JSON.stringify(parsed, null, 2);
 }
 /**
-* Renders a tool invocation as the design system's console row: a small
-* outlined "TOOL" chip (or the tool's configured icon), the tool name in
-* mono, a truncated args preview, and a rotating chevron that expands the
-* formatted result.
+* Renders a tool invocation as the design system's console row (see
+* `ToolCallRow`): a small outlined "TOOL" chip (or the tool's configured
+* icon), the tool name in mono, a truncated args preview, and a rotating
+* chevron that expands the formatted result.
 *
 * Tool display is configured via `ToolConfigContext`. If no config is found
 * for a tool name, the raw tool name is shown as the title.
@@ -50,7 +135,6 @@ function formatResult(result) {
 * @internal Not exported from the package — rendered by `MessageList`.
 */
 const ToolCallBlock = memo(function ToolCallBlock({ toolCall, className }) {
-	const [isOpen, setIsOpen] = useState(false);
 	const theme = useTheme();
 	const toolConfig = useToolConfig();
 	const config = Object.hasOwn(toolConfig, toolCall.name) ? toolConfig[toolCall.name] : void 0;
@@ -59,75 +143,34 @@ const ToolCallBlock = memo(function ToolCallBlock({ toolCall, className }) {
 	const icon = config?.icon;
 	const canExpand = !isPending && Boolean(toolCall.result);
 	const formatted = useMemo(() => toolCall.result ? formatResult(toolCall.result) : "", [toolCall.result]);
-	const subtitle = useMemo(() => {
-		const args = toolCall.args;
-		if (toolCall.name === "run_code" && args.code) return truncate(String(args.code).split("\n")[0] ?? "");
-		for (const key of [
-			"query",
-			"url",
-			"question"
-		]) if (args[key]) return String(args[key]);
-		return truncate(JSON.stringify(args));
-	}, [toolCall.name, toolCall.args]);
-	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("flex flex-col rounded-md border overflow-hidden", className),
-		style: {
-			borderColor: theme.border,
-			background: theme.bg
-		},
-		children: [/* @__PURE__ */ jsxs("button", {
-			type: "button",
-			"aria-expanded": canExpand ? isOpen : void 0,
-			disabled: isPending,
-			className: clsx("flex items-center gap-2.5 px-3.5 py-2.5 select-none text-left w-full appearance-none border-none bg-transparent", canExpand && "cursor-pointer"),
-			onClick: () => {
-				if (canExpand) setIsOpen(!isOpen);
-			},
-			children: [
-				icon ? /* @__PURE__ */ jsx("span", {
-					className: "w-4 h-4 shrink-0 text-center leading-4",
-					children: icon
-				}) : /* @__PURE__ */ jsx(Eyebrow, {
-					className: "shrink-0",
-					style: { color: TEXT_FAINT },
-					children: "Tool"
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: clsx("font-aai-mono text-[13px] font-medium", isPending && "tool-shimmer"),
-					style: { color: theme.text },
-					children: title
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "font-aai-mono text-[13px] truncate flex-1 min-w-0",
-					style: { color: TEXT_FAINT },
-					children: subtitle
-				}),
-				canExpand && /* @__PURE__ */ jsx("span", {
-					className: clsx("text-[10px] shrink-0 transition-transform duration-150", isOpen && "rotate-90"),
-					style: { color: "#6F6A60" },
-					children: "▶"
-				})
-			]
-		}), isOpen && /* @__PURE__ */ jsxs("div", {
-			className: "border-t max-h-64 overflow-auto",
+	return /* @__PURE__ */ jsx(ToolCallRow, {
+		title,
+		detail: useMemo(() => {
+			const args = toolCall.args;
+			if (toolCall.name === "run_code" && args.code) return truncate(String(args.code).split("\n")[0] ?? "");
+			for (const key of [
+				"query",
+				"url",
+				"question"
+			]) if (args[key]) return String(args[key]);
+			return truncate(JSON.stringify(args));
+		}, [toolCall.name, toolCall.args]),
+		pending: isPending,
+		icon,
+		className,
+		children: canExpand ? /* @__PURE__ */ jsxs(Fragment, { children: [toolCall.name === "run_code" && Boolean(toolCall.args.code) && /* @__PURE__ */ jsx("pre", {
+			className: "font-aai-mono text-xs px-3.5 py-3 m-0 whitespace-pre-wrap wrap-break-word border-b",
 			style: {
-				borderColor: theme.border,
-				background: theme.surface
+				color: theme.text,
+				borderColor: theme.border
 			},
-			children: [toolCall.name === "run_code" && Boolean(toolCall.args.code) && /* @__PURE__ */ jsx("pre", {
-				className: "font-aai-mono text-xs px-3.5 py-3 m-0 whitespace-pre-wrap wrap-break-word border-b",
-				style: {
-					color: theme.text,
-					borderColor: theme.border
-				},
-				children: String(toolCall.args.code)
-			}), formatted && /* @__PURE__ */ jsx("pre", {
-				className: "font-aai-mono text-xs px-3.5 py-3 m-0 whitespace-pre-wrap wrap-break-word",
-				style: { color: "#57534B" },
-				children: formatted
-			})]
-		})]
+			children: String(toolCall.args.code)
+		}), formatted && /* @__PURE__ */ jsx("pre", {
+			className: "font-aai-mono text-xs px-3.5 py-3 m-0 whitespace-pre-wrap wrap-break-word",
+			style: { color: "#57534B" },
+			children: formatted
+		})] }) : void 0
 	});
 });
 //#endregion
-export { ToolConfigContext as n, ToolCallBlock as t };
+export { ToolConfigContext as n, ToolCallRow as r, ToolCallBlock as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexkroman1/aai-ui",
-  "version": "5.5.1",
+  "version": "5.7.0",
   "type": "module",
   "files": [
     "dist",
@@ -21,8 +21,9 @@
     "partysocket": "^1.3.0",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
+    "use-stick-to-bottom": "^1.1.6",
     "use-sync-external-store": "^1.6.0",
-    "@alexkroman1/aai": "5.5.1"
+    "@alexkroman1/aai": "5.7.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",