@alexkroman1/aai-ui 0.12.3 → 0.13.0

package/dist/components/message-list.js

@@ -1,76 +1,3 @@
-import { useAutoScroll, useSession } from "../signals.js";
-import { MessageBubble } from "./message-bubble.js";
-import { ThinkingIndicator } from "./thinking-indicator.js";
-import { ToolCallBlock } from "./tool-call-block.js";
-import { Transcript } from "./transcript.js";
-import clsx from "clsx";
-import { useComputed } from "@preact/signals";
-import { jsx, jsxs } from "preact/jsx-runtime";
-//#region components/message-list.tsx
-/**
-* Scrollable list of all chat messages, tool-call blocks, live transcript,
-* streaming agent utterance, and a thinking indicator.
-*
-* Messages and tool calls are interleaved in the correct order. The list
-* auto-scrolls to the latest content via {@link useAutoScroll}.
-*
-* Must be rendered inside a {@link SessionProvider}.
-*
-* @example
-* ```tsx
-* <MessageList className="flex-1" />
-* ```
-*
-* @param className - Additional CSS class names applied to the scroll container.
-*
-* @public
-*/
-function MessageList({ className }) {
-	const { session } = useSession();
-	const scrollRef = useAutoScroll();
-	const showThinking = useComputed(() => {
-		if (session.state.value !== "thinking") return false;
-		const last = session.toolCalls.value.at(-1);
-		if (last?.status === "pending") return false;
-		const lastMsg = session.messages.value.at(-1);
-		return !lastMsg || lastMsg.role === "user" || Boolean(last);
-	});
-	const messages = session.messages.value;
-	const toolCalls = session.toolCalls.value;
-	const items = [];
-	let tci = 0;
-	for (const [i, msg] of messages.entries()) {
-		items.push(/* @__PURE__ */ jsx(MessageBubble, { message: msg }, `msg-${i}`));
-		let tc = toolCalls[tci];
-		while (tc && tc.afterMessageIndex <= i) {
-			items.push(/* @__PURE__ */ jsx(ToolCallBlock, { toolCall: tc }, tc.toolCallId));
-			tci++;
-			tc = toolCalls[tci];
-		}
-	}
-	let tc = toolCalls[tci];
-	while (tc) {
-		items.push(/* @__PURE__ */ jsx(ToolCallBlock, { toolCall: tc }, tc.toolCallId));
-		tci++;
-		tc = toolCalls[tci];
-	}
-	return /* @__PURE__ */ jsx("div", {
-		role: "log",
-		class: clsx("flex-1 overflow-y-auto [scrollbar-width:none] bg-aai-surface", className),
-		children: /* @__PURE__ */ jsxs("div", {
-			class: "flex flex-col gap-4.5 p-4",
-			children: [
-				items,
-				session.agentUtterance.value && /* @__PURE__ */ jsx(MessageBubble, { message: {
-					role: "assistant",
-					content: session.agentUtterance.value
-				} }),
-				/* @__PURE__ */ jsx(Transcript, { userUtterance: session.userUtterance }),
-				showThinking.value && /* @__PURE__ */ jsx(ThinkingIndicator, {}),
-				/* @__PURE__ */ jsx("div", { ref: scrollRef })
-			]
-		})
-	});
-}
-//#endregion
+import "../context.js";
+import { t as MessageList } from "../message-list-DHZcLhRA.js";
 export { MessageList };

package/dist/components/session-controls.d.ts

@@ -0,0 +1,125 @@
+import { type ReactNode } from "react";
+/**
+ * Which of the four buttons a {@link SessionControlButton} is.
+ *
+ * @public
+ */
+export type SessionControlAction = "start" | "toggle" | "restart" | "end";
+/**
+ * One button of {@link SessionControls}, as handed to `renderButton`.
+ *
+ * @public
+ */
+export type SessionControlButton = {
+    /** Which button this is. A custom renderer switches on it for its look. */
+    action: SessionControlAction;
+    /** The label to show — the caller's own word, or the default. */
+    label: string;
+    /** The handler. Already bound; wire it to `onClick` as it is. */
+    onClick: () => void;
+    /**
+     * Whether the call is live. Meaningful on `toggle`, whose label already says
+     * which way it will flip, and handed to every button so a renderer can dim
+     * the others while paused.
+     */
+    running: boolean;
+};
+/**
+ * The five words {@link SessionControls} renders, every one overridable.
+ *
+ * @public
+ */
+export type SessionControlsLabels = {
+    /** The button shown before the call starts. Default `"Start"`. */
+    start: string;
+    /** The toggle's label while running. Default `"Pause"`. */
+    pause: string;
+    /** The toggle's label while paused. Default `"Resume"`. */
+    resume: string;
+    /** Hang up and dial again. Default `"New Conversation"`. */
+    restart: string;
+    /** Hang up. Default `"End"`. */
+    end: string;
+};
+/**
+ * Props of {@link SessionControls}.
+ *
+ * @public
+ */
+export type SessionControlsProps = {
+    /** The words this chrome has its own term for; the rest keep the defaults. */
+    labels?: Partial<SessionControlsLabels> | undefined;
+    /**
+     * Renders one button. Absent, each is a stock {@link Button}. A chrome
+     * with its own look renders its own `<button>` from the
+     * {@link SessionControlButton} it is handed — the component still decides
+     * WHICH buttons exist and what each one does.
+     */
+    renderButton?: ((button: SessionControlButton) => ReactNode) | undefined;
+    /** Additional CSS class names for the row, appended to its own layout classes. */
+    className?: string | undefined;
+    /** Rendered after the buttons — a count, a spacer, a status line. */
+    children?: ReactNode;
+};
+/**
+ * The full control row of a custom chrome: **Start** before the call, then
+ * **Pause / Resume**, **New Conversation** and **End** once it is up.
+ *
+ * {@link Controls} is the stock console's footer — Stop/Resume and New
+ * Conversation, with the URL chips — and it has no Start branch and no End,
+ * because the default shell shows a start SCREEN and a session there ends by
+ * closing the tab. A chrome that owns its whole frame has no start screen, so
+ * three of them each wrote this row: the same `!started` branch, the same
+ * three buttons behind it, and the same twelve-line comment on why the middle
+ * one is `end(); start()` and not `reset()`. The buttons' look is the
+ * chrome's — `renderButton` — and everything else is here once.
+ *
+ * **Why `restart` is `end()` then `start()`, and never `reset()`.** `reset()`
+ * clears the transcript and reconnects carrying the same session id, so every
+ * `sessionSlot` on the agent survives: a caller who pressed "New Conversation"
+ * on a stateful agent got a blank transcript in front of their old cart, game
+ * or incident board, with nothing on screen saying so, and the next tool call
+ * repopulated it. `end()` drops the resume identity, so the redial is a
+ * brand-new session — fresh state, greeting included — and `start()` puts the
+ * chrome straight back on the call rather than at its Start button.
+ *
+ * **Why End is `end()`.** It hangs up and flips `started` back, so the row
+ * returns to its Start button and the next start is a new session. `reset()`
+ * would keep the call live — the buttons never toggle back.
+ *
+ * Reads the session through {@link useSessionControls}: two one-field
+ * subscriptions, so the row re-renders when a flag flips and not on every
+ * transcript partial.
+ *
+ * @example A board's controls in its own colours, with a trailing count
+ * ```tsx
+ * import { SessionControls } from "@alexkroman1/aai-ui";
+ *
+ * const BUTTON = "px-4 py-2 rounded-md text-xs font-semibold cursor-pointer";
+ *
+ * function ShiftControls({ logged }: { logged: number }) {
+ *   return (
+ *     <SessionControls
+ *       labels={{ start: "Start Dispatch", end: "End Shift" }}
+ *       renderButton={({ action, label, onClick }) => (
+ *         <button
+ *           type="button"
+ *           className={BUTTON}
+ *           style={{ background: action === "end" ? "#dc2626" : "#2563eb", color: "white" }}
+ *           onClick={onClick}
+ *         >
+ *           {label}
+ *         </button>
+ *       )}
+ *     >
+ *       <span className="ml-auto text-[10px]">{logged} incidents logged</span>
+ *     </SessionControls>
+ *   );
+ * }
+ * ```
+ *
+ * @param props - See {@link SessionControlsProps}.
+ *
+ * @public
+ */
+export declare function SessionControls({ labels, renderButton, className, children, }: SessionControlsProps): ReactNode;

package/dist/components/session-error-banner.d.ts

@@ -0,0 +1,69 @@
+import type { ReactNode } from "react";
+/**
+ * Props of {@link SessionErrorBanner}.
+ *
+ * Every field is optional, so `<SessionErrorBanner />` is the whole call. It is
+ * a NAMED type all the same, for the reason `ControlsProps` and
+ * `ConsoleShellProps` are: an inline object literal in the signature leaves a
+ * `createElement(SessionErrorBanner, { className })` caller unable to infer the
+ * props at all, and gives the reference page nothing to link to.
+ *
+ * @public
+ */
+export type SessionErrorBannerProps = {
+    /** Additional CSS class names for the banner, appended to its own. */
+    className?: string | undefined;
+};
+/**
+ * The announced banner for a failed session: the error's message and code, or
+ * nothing at all when the session is fine.
+ *
+ * **This used to be four lines inside `ConsoleShell`, and that is why it is its
+ * own component.** The banner was the reason `ConsoleShell` was published —
+ * `role="alert"` is the one part of that component a reviewer cannot see is
+ * missing, since per the `fatalError` latch in `session/browser-session.ts` the banner is
+ * the ONLY remaining signal a session died (the state eyebrow beside it goes
+ * back to reading like a live session), and a screen reader is never told an
+ * unannounced one appeared. But `ConsoleShell` is a whole FRAME: a centred
+ * `max-w-190` column with its own header and footer. Every full-bleed chrome —
+ * a two-pane board, a CRT — therefore could not adopt it, rebuilt the banner
+ * instead, and the three that did had ALREADY drifted: one rendered
+ * `ERROR: {message}` and dropped the code entirely, one `ERROR: {message}
+ * ({code})`, one `{message} ({code})`. Splitting the banner out is what lets a
+ * chrome take the announced-error decision without taking the layout, and
+ * `ConsoleShell` composes this rather than keeping a second copy, so the two
+ * cannot drift again.
+ *
+ * **It reads the session itself.** There is no `error` prop: a banner that
+ * takes its text from the caller is a banner a caller can forget to wire, which
+ * is exactly the failure above with an extra step. It subscribes narrowly via
+ * {@link useSessionError}, so a page that renders it does not re-render with
+ * the transcript.
+ *
+ * **The code is shown, always.** `SessionError.code` is the eight-member wire
+ * union — it is what a user pastes into a bug report and the only part of the
+ * error that is stable across wordings — and the chrome that dropped it left
+ * its readers with a sentence and no way to say which failure it was.
+ *
+ * Must be rendered inside the providers `client()` installs.
+ *
+ * @example A full-bleed chrome that wants the banner and not the frame
+ * ```tsx
+ * import { SessionErrorBanner } from "@alexkroman1/aai-ui";
+ *
+ * function Board() {
+ *   return (
+ *     <div className="grid grid-cols-[1fr_320px] h-screen">
+ *       <main>…</main>
+ *       <aside>…</aside>
+ *       <SessionErrorBanner className="col-span-2" />
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @param props - See {@link SessionErrorBannerProps}.
+ *
+ * @public
+ */
+export declare function SessionErrorBanner({ className }: SessionErrorBannerProps): ReactNode;

package/dist/components/session-state-dot.d.ts

@@ -0,0 +1,111 @@
+import type { ReactNode } from "react";
+import type { AgentState } from "../types.ts";
+/**
+ * The dot itself: a coloured circle, pulsing or still.
+ *
+ * Shared by {@link SessionStateDot} and `ConsoleShell`, which computes its
+ * colour from the theme rather than from a palette prop and decides for itself
+ * when to pulse. Not on the package barrel — the public component is the one
+ * that reads the session.
+ *
+ * The colour is written to `background` AND `color`, so a caller can extend
+ * the dot with a `currentColor` utility (`shadow-[0_0_6px_currentColor]` for a
+ * glow) without restating the palette.
+ *
+ * @internal
+ */
+export declare function StateDot({ color, pulseMs, className, title, }: {
+    /** The dot's colour. */
+    color: string;
+    /** Length of one pulse cycle, or `null` for a still dot. */
+    pulseMs: number | null;
+    /** Size and any extras; the shape classes are the dot's own. */
+    className?: string | undefined;
+    /** Tooltip text, typically the raw state. */
+    title?: string | undefined;
+}): ReactNode;
+/**
+ * Props of {@link SessionStateDot}.
+ *
+ * @public
+ */
+export type SessionStateDotProps = {
+    /**
+     * The dot's colour per {@link AgentState} — the chrome's own palette. A
+     * complete record, so a state added upstream is a compile error here rather
+     * than a silently unpainted dot; `satisfies Record<AgentState, string>` on the
+     * caller's literal is the shape to write it in.
+     */
+    colors: Readonly<Record<AgentState, string>>;
+    /**
+     * The words this chrome has a better term for. Anything not named falls back
+     * to {@link AGENT_STATE_LABELS}, so a page overrides one member (`speaking:
+     * "Narrating"`) without restating the union.
+     */
+    labels?: Partial<Readonly<Record<AgentState, string>>> | undefined;
+    /**
+     * Whether the dot pulses while `listening` (slowly) and `thinking` (faster).
+     * Defaults to `true`; a chrome whose dot glows rather than beats passes
+     * `false`.
+     */
+    pulse?: boolean | undefined;
+    /** Additional CSS class names for the wrapping `<span>`, appended to its own. */
+    className?: string | undefined;
+    /**
+     * REPLACES the dot's default size (`w-2 h-2`) rather than adding to it —
+     * there is no `tailwind-merge` in this package, so two conflicting width
+     * utilities would not have a reliable winner. The dot's shape classes stay.
+     */
+    dotClassName?: string | undefined;
+    /** Additional CSS class names for the label `<span>`. */
+    labelClassName?: string | undefined;
+};
+/**
+ * The live session state as a coloured dot and a word, on its own narrow
+ * subscription.
+ *
+ * Three custom chromes had each written this: a `satisfies Record<AgentState,
+ * string>` palette (kept — it is the prop), a `STATE_LABELS` spread over
+ * {@link AGENT_STATE_LABELS} (kept — it is `labels`), and then the same
+ * fourteen lines of markup around them, including the same two-arm ternary
+ * deciding which states pulse and how fast. `agent-state-labels.ts` argued
+ * against a dot component on the grounds that it would take the shared part
+ * (the words) hostage to the part that is not (the palette); this takes the
+ * palette as a prop precisely so it does not. What is shared is the structure
+ * — the exhaustive colour lookup, the label fallback, the pulse rule, the
+ * `useSessionStatus()` subscription that keeps the rest of the header from
+ * re-rendering at STT-partial rate.
+ *
+ * Must be rendered inside the providers `mountClient()` installs.
+ *
+ * @example A dispatch board's readout: its own colours, three of its own words
+ * ```tsx
+ * import type { AgentState } from "@alexkroman1/aai-ui";
+ * import { SessionStateDot } from "@alexkroman1/aai-ui";
+ *
+ * const STATE_COLORS = {
+ *   disconnected: "#6b7280",
+ *   connecting: "#6b7280",
+ *   ready: "#22c55e",
+ *   listening: "#22c55e",
+ *   thinking: "#eab308",
+ *   speaking: "#3b82f6",
+ *   error: "#6b7280",
+ * } satisfies Record<AgentState, string>;
+ *
+ * function StatusReadout() {
+ *   return (
+ *     <SessionStateDot
+ *       colors={STATE_COLORS}
+ *       labels={{ listening: "LISTENING", thinking: "PROCESSING", speaking: "TRANSMITTING" }}
+ *       labelClassName="text-[11px] uppercase"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @param props - See {@link SessionStateDotProps}.
+ *
+ * @public
+ */
+export declare function SessionStateDot({ colors, labels, pulse, className, dotClassName, labelClassName, }: SessionStateDotProps): ReactNode;

package/dist/components/sidebar-layout.d.ts

@@ -1,21 +1,42 @@
-import type { ComponentChildren } from "preact";
+import type { ReactNode } from "react";
 /**
  * A two-column layout with a fixed-width sidebar and a flexible main area.
  * Commonly used to pair a custom sidebar (cart, dashboard) with `<ChatView />`.
  *
  * @example
  * ```tsx
- * <SidebarLayout sidebar={<OrderPanel />}>
- *   <ChatView />
- * </SidebarLayout>
+ * import { ChatView, SidebarLayout } from "@alexkroman1/aai-ui";
+ *
+ * function OrderPanel() {
+ *   return <div>Cart</div>;
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <SidebarLayout sidebar={<OrderPanel />}>
+ *       <ChatView />
+ *     </SidebarLayout>
+ *   );
+ * }
  * ```
  *
+ * @param props - Layout props.
+ *
  * @public
  */
-export declare function SidebarLayout({ sidebar, children, width, side, className, }: {
-    sidebar: ComponentChildren;
-    children: ComponentChildren;
-    width?: string | undefined;
-    side?: "left" | "right" | undefined;
+export declare function SidebarLayout({ sidebar, children, sidebarWidth, sidebarPosition, className, }: {
+    /** The sidebar pane — a cart, a dashboard, a run history. */
+    sidebar: ReactNode;
+    /** The main pane, normally a `<ChatView />`. */
+    children: ReactNode;
+    /**
+     * Width of the sidebar as a CSS length. Defaults to `"18rem"`, and applies
+     * from the `md` breakpoint up: below it the two panes stack, because a fixed
+     * width that never shrinks leaves a phone-width main pane unreadable.
+     */
+    sidebarWidth?: string | undefined;
+    /** Which side the sidebar sits on. Defaults to `"left"`. */
+    sidebarPosition?: "left" | "right" | undefined;
+    /** Additional CSS class names for the root element, appended to its own. */
     className?: string;
-}): import("preact").JSX.Element;
+}): import("react").JSX.Element;

package/dist/components/sidebar-layout.js

@@ -1,34 +1,54 @@
+import { useTheme } from "../context.js";
 import clsx from "clsx";
-import { jsx, jsxs } from "preact/jsx-runtime";
-//#region components/sidebar-layout.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/sidebar-layout.tsx
+/** @jsxImportSource react */
 /**
 * A two-column layout with a fixed-width sidebar and a flexible main area.
 * Commonly used to pair a custom sidebar (cart, dashboard) with `<ChatView />`.
 *
 * @example
 * ```tsx
-* <SidebarLayout sidebar={<OrderPanel />}>
-*   <ChatView />
-* </SidebarLayout>
+* import { ChatView, SidebarLayout } from "@alexkroman1/aai-ui";
+*
+* function OrderPanel() {
+*   return <div>Cart</div>;
+* }
+*
+* function App() {
+*   return (
+*     <SidebarLayout sidebar={<OrderPanel />}>
+*       <ChatView />
+*     </SidebarLayout>
+*   );
+* }
 * ```
 *
+* @param props - Layout props.
+*
 * @public
 */
-function SidebarLayout({ sidebar, children, width = "20rem", side = "left", className }) {
+function SidebarLayout({ sidebar, children, sidebarWidth = "18rem", sidebarPosition = "left", className }) {
+	const theme = useTheme();
 	const sidebarEl = /* @__PURE__ */ jsx("div", {
-		class: clsx("flex-shrink-0 flex flex-col overflow-y-auto", side === "left" ? "border-r border-aai-border" : "border-l border-aai-border"),
-		style: { width },
+		className: clsx("shrink-0 flex flex-col overflow-y-auto", "w-full max-h-[40vh] md:w-(--aai-sidebar-w) md:max-h-none", sidebarPosition === "left" ? "border-b md:border-b-0 md:border-r" : "border-t md:border-t-0 md:border-l order-last md:order-none"),
+		style: { borderColor: theme.border },
 		children: sidebar
 	});
+	const vars = {
+		background: theme.bg,
+		"--aai-sidebar-w": sidebarWidth
+	};
 	return /* @__PURE__ */ jsxs("div", {
-		class: clsx("flex h-screen bg-aai-bg", className),
+		className: clsx("flex flex-col md:flex-row min-h-screen md:h-screen", className),
+		style: vars,
 		children: [
-			side === "left" && sidebarEl,
+			sidebarPosition === "left" && sidebarEl,
 			/* @__PURE__ */ jsx("div", {
-				class: "flex-1 min-w-0",
+				className: "flex-1 min-w-0 min-h-0",
 				children
 			}),
-			side === "right" && sidebarEl
+			sidebarPosition === "right" && sidebarEl
 		]
 	});
 }

package/dist/components/start-screen.d.ts

@@ -1,10 +1,13 @@
-import type { ComponentChildren } from "preact";
+import type { ReactNode } from "react";
 /**
- * A centered start screen with icon, title, subtitle, and a start button.
- * Renders `children` (the main app) once the session has started.
+ * A centered start screen: a white card on the cream page with the logo, an
+ * eyebrow label, a serif title, subtitle, and the start CTA. Renders
+ * `children` (the main app) once the session has started.
  *
  * @example
  * ```tsx
+ * import { ChatView, StartScreen } from "@alexkroman1/aai-ui";
+ *
  * function MyAgent() {
  *   return (
  *     <StartScreen icon="🍕" title="Pizza Palace" subtitle="Voice-powered ordering">
@@ -14,13 +17,21 @@ import type { ComponentChildren } from "preact";
  * }
  * ```
  *
+ * @param props - Start-screen props.
+ *
  * @public
  */
 export declare function StartScreen({ children, icon, title, subtitle, buttonText, className, }: {
-    children: ComponentChildren;
-    icon?: ComponentChildren | undefined;
+    /** The app, rendered once the session has started. */
+    children: ReactNode;
+    /** Element rendered in place of the logo on the card. */
+    icon?: ReactNode | undefined;
+    /** The card's serif title. Defaults to the agent's declared name. */
     title?: string | undefined;
+    /** A line under the title. */
     subtitle?: string | undefined;
+    /** Label of the start CTA. Defaults to `"Start Conversation"`. */
     buttonText?: string | undefined;
+    /** Additional CSS class names for the root element, appended to its own. */
     className?: string | undefined;
-}): import("preact").JSX.Element;
+}): ReactNode;

package/dist/components/start-screen.js

@@ -1,14 +1,21 @@
-import { useSession } from "../signals.js";
+import { useSessionCore, useSessionSelector, useTheme } from "../context.js";
+import { a as inkTint } from "../_colors-CpZO-88A.js";
 import { Button } from "./button.js";
+import { t as AaiLogo } from "../aai-logo-D8pMVn9_.js";
+import { t as Eyebrow } from "../eyebrow-UfmSz9yy.js";
 import clsx from "clsx";
-import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
-//#region components/start-screen.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/start-screen.tsx
+/** @jsxImportSource react */
 /**
-* A centered start screen with icon, title, subtitle, and a start button.
-* Renders `children` (the main app) once the session has started.
+* A centered start screen: a white card on the cream page with the logo, an
+* eyebrow label, a serif title, subtitle, and the start CTA. Renders
+* `children` (the main app) once the session has started.
 *
 * @example
 * ```tsx
+* import { ChatView, StartScreen } from "@alexkroman1/aai-ui";
+*
 * function MyAgent() {
 *   return (
 *     <StartScreen icon="🍕" title="Pizza Palace" subtitle="Voice-powered ordering">
@@ -18,28 +25,41 @@ import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
 * }
 * ```
 *
+* @param props - Start-screen props.
+*
 * @public
 */
-function StartScreen({ children, icon, title, subtitle, buttonText = "Start", className }) {
-	const { started, start } = useSession();
-	if (started.value) return /* @__PURE__ */ jsx(Fragment, { children });
+function StartScreen({ children, icon, title, subtitle, buttonText = "Start Conversation", className }) {
+	const started = useSessionSelector((s) => s.started);
+	const { start } = useSessionCore();
+	const theme = useTheme();
+	if (started) return children;
 	return /* @__PURE__ */ jsx("div", {
-		class: clsx("flex items-center justify-center h-screen bg-aai-bg font-aai", className),
+		className: clsx("flex items-center justify-center h-screen font-aai", className),
+		style: { background: theme.bg },
 		children: /* @__PURE__ */ jsxs("div", {
-			class: "flex flex-col items-center gap-4 bg-aai-surface border border-aai-border rounded-lg px-12 py-10 max-w-sm text-center",
+			className: "flex flex-col items-center gap-5 border rounded-xl px-10 py-12 sm:px-16 sm:py-14 max-w-105 text-center",
+			style: {
+				background: theme.surface,
+				borderColor: theme.border,
+				boxShadow: "0 4px 12px -2px rgb(20 18 12 / 0.08)"
+			},
 			children: [
-				icon,
+				icon ?? /* @__PURE__ */ jsx(AaiLogo, { size: 24 }),
+				/* @__PURE__ */ jsx(Eyebrow, { children: "Voice Agent" }),
 				title && /* @__PURE__ */ jsx("h1", {
-					class: "font-semibold text-aai-primary m-0",
+					className: "font-aai-serif font-normal text-[32px] leading-[1.15] tracking-[-0.2px] m-0 text-balance",
+					style: { color: theme.text },
 					children: title
 				}),
 				subtitle && /* @__PURE__ */ jsx("p", {
-					class: "text-sm text-aai-text-muted m-0",
+					className: "text-[15px] leading-[22px] m-0 max-w-75",
+					style: { color: inkTint(theme.text, theme.surface, 75) },
 					children: subtitle
 				}),
 				/* @__PURE__ */ jsx(Button, {
 					size: "lg",
-					className: "mt-2 w-full",
+					className: "mt-2",
 					onClick: start,
 					children: buttonText
 				})

package/dist/components/tool-call-block.d.ts

@@ -1,27 +1,28 @@
-import type * as preact from "preact";
+/** @jsxImportSource react */
+import { type ReactNode } from "react";
 import type { ToolCallInfo } from "../types.ts";
 /**
- * Renders a tool invocation with an icon, title, subtitle, and a
- * collapsible result viewer.
+ * 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.
  *
- * Built-in tool types (`web_search`, `visit_webpage`, `run_code`,
- * `fetch_json`, `user_input`) get custom icons and labels. Unknown tools
- * fall back to a generic bolt icon.
+ * Tool display is configured via `ToolConfigContext`. If no config is found
+ * for a tool name, the raw tool name is shown as the title.
  *
  * While the tool call is pending a shimmer animation is shown. Once
- * complete, clicking the block expands the formatted JSON result.
+ * complete, clicking the row expands the formatted JSON result.
  *
- * @example
- * ```tsx
- * <ToolCallBlock toolCall={toolCall} />
- * ```
+ * Memoized: tool-call objects are referentially stable across session
+ * snapshots and rows are keyed on the stable `callId`, so a list update only
+ * re-renders the rows whose tool call actually changed.
  *
  * @param toolCall - The tool call to render (see {@link ToolCallInfo}).
  * @param className - Additional CSS class names.
  *
- * @public
+ * @internal Not exported from the package — rendered by `MessageList`.
  */
-export declare function ToolCallBlock({ toolCall, className, }: {
+export declare const ToolCallBlock: import("react").MemoExoticComponent<({ toolCall, className, }: {
     toolCall: ToolCallInfo;
     className?: string;
-}): preact.JSX.Element;
+}) => ReactNode>;