@alexkroman1/aai-ui 13.2.0 → 14.0.0

package/dist/agent-state-labels.d.ts

@@ -0,0 +1,60 @@
+/**
+ * One word for where the CALL has got to, for each {@link AgentState} there is.
+ *
+ * The sibling of `WORKFLOW_STATUS_LABELS` next door, for the same reason and
+ * with the same shape. Three custom chromes carried three renderings of this
+ * one seven-member union, all written as a chain of ternaries over the raw
+ * member: one mapped `speaking` to "Narrating" and fell through to "Idle" for
+ * everything it had not listed, one shouted (`thinking` → "PROCESSING"), and
+ * the third rendered the enum member itself — so a caller of that agent read a
+ * lowercase `disconnected` in the header of a page nobody had decided to say
+ * that on.
+ *
+ * The exhaustiveness argument is the one that makes this worth exporting rather
+ * than documenting. A `Record` over {@link AgentState} means a state ADDED to
+ * the union is a compile error HERE, in one place every page inherits, instead
+ * of falling through each page's own `: "Idle"` tail into whichever word that
+ * page happened to end on — which is a silent wrong label, not a missing one. A
+ * page overriding one member keeps that: spreading a complete record cannot
+ * drop a key.
+ *
+ * There is deliberately no `StatusDot` component beside it. The dot markup and
+ * its palette are what each chrome exists to look like — a CRT's glow, a
+ * dispatch board's alert colours — and a component would take the one part
+ * that is genuinely shared (the words) hostage to the part that is not.
+ */
+import type { AgentState } from "./types.ts";
+/**
+ * The default label per {@link AgentState}.
+ *
+ * Override the ones your page has a better word for and keep the rest:
+ *
+ * ```ts
+ * import type { AgentState } from "@alexkroman1/aai-ui";
+ * import { AGENT_STATE_LABELS } from "@alexkroman1/aai-ui";
+ *
+ * // A dispatch board that shouts, and renames one state.
+ * const STATE_LABEL = { ...AGENT_STATE_LABELS, thinking: "Processing" };
+ * const shout = (s: AgentState) => STATE_LABEL[s].toUpperCase();
+ * ```
+ *
+ * **Sentence case, deliberately.** A template that wants caps applies its own
+ * `.toUpperCase()`, and a template that wants Title Case is already there;
+ * shipping the shouted form instead would leave the two chromes that do not
+ * shout with a string they have to un-shout, which no case transform does
+ * correctly.
+ *
+ * Two wordings are decisions rather than transliterations of the member name:
+ *
+ * - `disconnected` is **"Idle"**. It is the state a session is in BEFORE it has
+ *   ever started as well as after it ends, so it is the first word most callers
+ *   see; "Disconnected" reads as a fault on a page where nothing has gone
+ *   wrong yet. Both chromes that mapped this state by hand chose "Idle" too.
+ * - `connecting` and `thinking` carry an ellipsis, `listening` and `speaking`
+ *   do not. The first two are waits with nothing for the caller to do; the
+ *   other two describe someone actually talking. Same distinction
+ *   `WORKFLOW_STATUS_LABELS` draws with its one "Working…".
+ *
+ * @public
+ */
+export declare const AGENT_STATE_LABELS: Readonly<Record<AgentState, string>>;

package/dist/audio.js

@@ -1,5 +1,5 @@
 import { CAPTURE_STOP_ACK_TIMEOUT_MS, PLAYBACK_DONE_MAX_WAIT_MS, PLAYBACK_DONE_POLL_MS, VOICE_CAPTURE_CONSTRAINTS } from "./types.js";
-//#region audio.ts
+//#region src/audio.ts
 /**
 * Throw unless the browser honored a requested context sample rate. The
 * requested rates are never advisory: captured audio is tagged with the
@@ -132,7 +132,6 @@ async function createVoiceIO(opts) {
 	capture.node.onprocessorerror = () => onError?.(workletCrash("capture"));
 	capture.start();
 	let playNode = null;
-	let onPlaybackStop = null;
 	/**
 	* Turn ids for the drain handshake. Every `done()` posts a fresh id and the
 	* worklet echoes it on the matching 'stop', so a stop the worklet posted for
@@ -143,18 +142,26 @@ async function createVoiceIO(opts) {
 	* reply finished while it is still speaking.
 	*/
 	let turnSeq = 0;
-	let pendingStopTurn = null;
+	/**
+	* The drain wait in flight, if any.
+	*
+	* ONE field, because the resolver and the turn it belongs to are one fact:
+	* as two independently-nulled variables they could disagree, and did — the
+	* suspended-context branch of `done()` cleared the turn and left the resolver
+	* set. A single nullable makes that unrepresentable.
+	*/
+	let pendingStop = null;
 	const lifecycle = new AbortController();
 	/** Settle whatever drain wait is pending and forget the turn it belonged to. */
 	function settlePendingStop() {
-		onPlaybackStop?.();
-		onPlaybackStop = null;
-		pendingStopTurn = null;
+		const pending = pendingStop;
+		pendingStop = null;
+		pending?.settle();
 	}
 	function onWorkletStop(msg) {
 		if (msg.stats && msg.stats.concealedSamples > 0) onPlaybackStats?.(msg.stats);
 		if (msg.reason === "interrupt") return;
-		if (pendingStopTurn !== null && msg.turn !== pendingStopTurn) return;
+		if (pendingStop !== null && msg.turn !== pendingStop.turn) return;
 		settlePendingStop();
 	}
 	function ensurePlayNode() {
@@ -190,26 +197,25 @@ async function createVoiceIO(opts) {
 				turn
 			});
 			if (ctx.state !== "running") {
-				pendingStopTurn = null;
+				settlePendingStop();
 				return Promise.resolve();
 			}
 			const { promise, resolve } = Promise.withResolvers();
-			onPlaybackStop?.();
+			settlePendingStop();
 			const settle = () => {
 				clearInterval(poll);
 				clearTimeout(cap);
-				if (onPlaybackStop === settle) {
-					onPlaybackStop = null;
-					pendingStopTurn = null;
-				}
+				if (pendingStop?.settle === settle) pendingStop = null;
 				resolve();
 			};
 			const poll = setInterval(() => {
 				if (ctx.state !== "running") settle();
 			}, PLAYBACK_DONE_POLL_MS);
 			const cap = setTimeout(settle, PLAYBACK_DONE_MAX_WAIT_MS);
-			onPlaybackStop = settle;
-			pendingStopTurn = turn;
+			pendingStop = {
+				turn,
+				settle
+			};
 			return promise;
 		},
 		flush() {

package/dist/{chat-view-DDTtrh7N.js → chat-view-C_3T7Ln8.js}

@@ -1,12 +1,86 @@
-import { t as MessageList } from "./message-list-BJYyuIcR.js";
-import { useSessionSelector, useTheme } from "./context.js";
-import { n as THINKING_COLOR, r as inkTint, t as ERROR_COLOR } from "./_colors-j8XMToi9.js";
-import { t as AaiLogo } from "./aai-logo-CXZGPSIY.js";
-import { t as Eyebrow } from "./eyebrow-C6ZFuiz6.js";
+import { t as MessageList } from "./message-list-CdOnSh5m.js";
+import { useSessionError, useSessionStatus, useTheme } from "./context.js";
+import { a as inkTint, r as THINKING_COLOR, t as ERROR_COLOR } from "./_colors-CpZO-88A.js";
+import { t as AaiLogo } from "./aai-logo-CFlomZlS.js";
+import { t as Eyebrow } from "./eyebrow-UfmSz9yy.js";
 import { Controls } from "./components/controls.js";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region components/console-shell.tsx
+//#region src/components/session-error-banner.tsx
+/** @jsxImportSource react */
+/**
+* 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-core.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
+*/
+function SessionErrorBanner({ className }) {
+	const error = useSessionError();
+	if (!error) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "alert",
+		className: clsx("px-3.5 py-2.5 rounded-aai border text-[13px] leading-[130%] shrink-0", className),
+		style: {
+			borderColor: "rgba(179,38,30,0.35)",
+			background: "rgba(179,38,30,0.06)",
+			color: ERROR_COLOR
+		},
+		children: [
+			error.message,
+			" (",
+			error.code,
+			")"
+		]
+	});
+}
+//#endregion
+//#region src/components/console-shell.tsx
 /** @jsxImportSource react */
 /**
 * Indicator dot color per state.
@@ -36,16 +110,22 @@ function stateColor(state, primary, idle) {
 * `<Controls>` under it, and until now that was the only way to get it — the
 * shell itself was internal, so a client wanting its own conversation markup
 * had to rebuild the chrome as well. Each one that did re-derived the error
-* banner WITHOUT `role="alert"`, which is the one part of this component a
-* reviewer cannot see is missing: per the `fatalError` latch in
-* `session-core.ts`, the banner is the only remaining signal once the state
-* eyebrow goes back to reading like a live session, and a screen reader is
-* never told an unannounced one appeared.
+* banner WITHOUT `role="alert"`.
+*
+* **The banner is {@link SessionErrorBanner} now, composed here rather than
+* spelled out.** It was four lines of this file, and this file is a whole
+* FRAME — a centred `max-w-190` column — so the full-bleed chromes that needed
+* the announced banner could not take it without taking a layout that would
+* replace the design they exist to demonstrate. Composing means there is one
+* banner, and it means this component no longer takes an `error` prop: the
+* banner reads the session itself, which is one fewer thing a caller can wire
+* up wrong.
 *
 * Reach for it when the conversation is yours and the frame is not. Reach for
-* `<ChatView>` when both are ours.
+* `<ChatView>` when both are ours. Reach for `<SessionErrorBanner>` alone when
+* neither is.
 *
-* Must be rendered inside the providers `client()` installs.
+* Must be rendered inside the providers `mountClient()` installs.
 *
 * @example A custom conversation in the stock chrome
 * ```tsx
@@ -53,19 +133,17 @@ function stateColor(state, primary, idle) {
 *   ConsoleShell,
 *   Controls,
 *   useConversation,
-*   useSessionSelector,
+*   useSessionStatus,
 * } from "@alexkroman1/aai-ui";
 *
 * function Console() {
-*   const state = useSessionSelector((s) => s.state);
-*   const error = useSessionSelector((s) => s.error);
+*   const state = useSessionStatus();
 *   const { items } = useConversation();
 *   return (
 *     <ConsoleShell
 *       title="Dispatch"
 *       state={state}
 *       pulsing={state === "listening"}
-*       error={error?.message}
 *       footer={<Controls />}
 *     >
 *       <ul>
@@ -84,7 +162,7 @@ function stateColor(state, primary, idle) {
 *
 * @public
 */
-function ConsoleShell({ icon, title, state, pulsing, error, children, footer, className }) {
+function ConsoleShell({ icon, title, state, pulsing, children, footer, className }) {
 	const theme = useTheme();
 	return /* @__PURE__ */ jsxs("div", {
 		className: clsx("flex flex-col h-screen w-full max-w-190 mx-auto box-border px-6 py-8 gap-5 font-aai text-sm", className),
@@ -114,16 +192,7 @@ function ConsoleShell({ icon, title, state, pulsing, error, children, footer, cl
 					}), state]
 				})]
 			}),
-			error && /* @__PURE__ */ jsx("div", {
-				role: "alert",
-				className: "px-3.5 py-2.5 rounded-aai border text-[13px] leading-[130%] shrink-0",
-				style: {
-					borderColor: "rgba(179,38,30,0.35)",
-					background: "rgba(179,38,30,0.06)",
-					color: "#B3261E"
-				},
-				children: error
-			}),
+			/* @__PURE__ */ jsx(SessionErrorBanner, {}),
 			/* @__PURE__ */ jsx("div", {
 				className: "flex flex-col flex-1 min-h-0 border rounded-lg overflow-hidden",
 				style: {
@@ -138,7 +207,7 @@ function ConsoleShell({ icon, title, state, pulsing, error, children, footer, cl
 	});
 }
 //#endregion
-//#region components/chat-view.tsx
+//#region src/components/chat-view.tsx
 const PULSING_STATES = /* @__PURE__ */ new Set(["listening", "speaking"]);
 /**
 * The main chat interface for a voice agent session — the design-system
@@ -166,18 +235,16 @@ const PULSING_STATES = /* @__PURE__ */ new Set(["listening", "speaking"]);
 * @public
 */
 function ChatView({ icon, title, className }) {
-	const state = useSessionSelector((s) => s.state);
-	const error = useSessionSelector((s) => s.error);
+	const state = useSessionStatus();
 	return /* @__PURE__ */ jsx(ConsoleShell, {
 		icon,
 		title,
 		state,
 		pulsing: PULSING_STATES.has(state),
-		error: error?.message,
 		className,
 		footer: /* @__PURE__ */ jsx(Controls, {}),
 		children: /* @__PURE__ */ jsx(MessageList, {})
 	});
 }
 //#endregion
-export { ConsoleShell as n, ChatView as t };
+export { ConsoleShell as n, SessionErrorBanner as r, ChatView as t };

package/dist/{client-config-BT_kWID5.js → client-config-DJQHnYjm.js}

@@ -1,5 +1,5 @@
 import { CLIENT_CONFIG_PATH, ClientConfigResponseSchema } from "@alexkroman1/aai/protocol";
-//#region client-config.ts
+//#region src/client-config.ts
 /**
 * Pre-connection client-config lookup.
 *
@@ -84,8 +84,8 @@ async function loadClientConfig(platformUrl, fetchFn) {
 * yields the agent default (`{}`).
 *
 * **This is what a workflow app calls instead of receiving the config.**
-* `client()` fetches `GET client-config` for itself before it renders the
-* default chat shell, so a voice client never has to. `page()` mounts no
+* `mountClient()` fetches `GET client-config` for itself before it renders the
+* default chat shell, so a voice client never has to. `mountPage()` mounts no
 * session and makes no such request — deliberately, since a page has no shell
 * to put a name in — so a page that wants the agent's own `name` or `greeting`
 * asks for them here.
@@ -107,7 +107,7 @@ async function loadClientConfig(platformUrl, fetchFn) {
 *
 * @example
 * ```tsx
-* import { fetchClientConfig, page } from "@alexkroman1/aai-ui";
+* import { fetchClientConfig, mountPage } from "@alexkroman1/aai-ui";
 *
 * const { name, greeting } = await fetchClientConfig(
 *   location.origin + location.pathname,
@@ -122,7 +122,7 @@ async function loadClientConfig(platformUrl, fetchFn) {
 *   );
 * }
 *
-* page({ name: name ?? "Workflows", component: App });
+* mountPage({ name: name ?? "Workflows", component: App });
 * ```
 *
 * @public

package/dist/client-config.d.ts

@@ -72,8 +72,8 @@ export declare function loadClientConfig(platformUrl: string, fetchFn?: typeof g
  * yields the agent default (`{}`).
  *
  * **This is what a workflow app calls instead of receiving the config.**
- * `client()` fetches `GET client-config` for itself before it renders the
- * default chat shell, so a voice client never has to. `page()` mounts no
+ * `mountClient()` fetches `GET client-config` for itself before it renders the
+ * default chat shell, so a voice client never has to. `mountPage()` mounts no
  * session and makes no such request — deliberately, since a page has no shell
  * to put a name in — so a page that wants the agent's own `name` or `greeting`
  * asks for them here.
@@ -95,7 +95,7 @@ export declare function loadClientConfig(platformUrl: string, fetchFn?: typeof g
  *
  * @example
  * ```tsx
- * import { fetchClientConfig, page } from "@alexkroman1/aai-ui";
+ * import { fetchClientConfig, mountPage } from "@alexkroman1/aai-ui";
  *
  * const { name, greeting } = await fetchClientConfig(
  *   location.origin + location.pathname,
@@ -110,7 +110,7 @@ export declare function loadClientConfig(platformUrl: string, fetchFn?: typeof g
  *   );
  * }
  *
- * page({ name: name ?? "Workflows", component: App });
+ * mountPage({ name: name ?? "Workflows", component: App });
  * ```
  *
  * @public

package/dist/client-dir.d.ts

@@ -15,7 +15,7 @@
  */
 /**
  * Absolute path to the prebuilt browser client's static files — pass it to
- * `createServer`/`createAgentServer` as `clientDir`.
+ * `createRuntimeServer`/`createAgentServer` as `clientDir`.
  *
  * A function, not a constant: resolution touches the module graph and throws
  * when the package is missing, and a module-level constant would move that

package/dist/client-dir.js

@@ -1,6 +1,6 @@
 import { createRequire } from "node:module";
 import path from "node:path";
-//#region client-dir.ts
+//#region src/client-dir.ts
 /**
 * Filesystem location of the prebuilt default client — **Node only**.
 *
@@ -19,7 +19,7 @@ import path from "node:path";
 const require = createRequire(import.meta.url);
 /**
 * Absolute path to the prebuilt browser client's static files — pass it to
-* `createServer`/`createAgentServer` as `clientDir`.
+* `createRuntimeServer`/`createAgentServer` as `clientDir`.
 *
 * A function, not a constant: resolution touches the module graph and throws
 * when the package is missing, and a module-level constant would move that

package/dist/components/_colors.d.ts

@@ -48,3 +48,26 @@ export declare const THINKING_COLOR = "#B98900";
  * coherent tinted bubble instead of a hardcoded indigo.
  */
 export declare function primaryTint(primary: string, surface: string, pct: number): string;
+/**
+ * The focus ring, as the class half of a pair.
+ *
+ * The ring is the only thing a keyboard user gets, and it has regressed to
+ * invisible twice — `outline-none` shipped here with no replacement, on the
+ * button and then on the URL chips, which is WCAG 2.4.7 on every control in the
+ * default client. Written as a SHORTHAND so it cannot be undone by Tailwind's
+ * shared `--tw-outline-style` variable.
+ *
+ * It is inert on its own: an outline with no colour draws nothing, so a control
+ * using this must also spread {@link focusRingStyle}. Naming the two together
+ * is what stops the next control shipping one without the other.
+ */
+export declare const FOCUS_RING = "outline-none focus-visible:[outline:2px_solid] focus-visible:[outline-offset:2px]";
+/**
+ * The style half of {@link FOCUS_RING} — the colour the outline draws in.
+ *
+ * A real CSS property rather than a variant class, so the `focus-visible` rule
+ * only has to turn the outline on.
+ */
+export declare function focusRingStyle(primary: string): {
+    outlineColor: string;
+};

package/dist/components/_form-readiness.d.ts

@@ -24,7 +24,7 @@
  * one describes an element that EXISTS. So this is a context rather than an
  * attribute, and it carries the one fact a DOM read cannot recover.
  *
- * A form with no such children is ready by definition — `useFormFieldsPending`
+ * A form with no such children is ready by definition — `useFormReadiness`
  * outside a provider reports nothing pending, so every hand-written form is
  * unaffected and `Form` keeps working outside this package.
  */

package/dist/components/bullet-list.d.ts

@@ -0,0 +1,74 @@
+import type { ReactNode } from "react";
+/**
+ * Props for {@link BulletList}.
+ *
+ * @public
+ */
+export type BulletListProps = {
+    /**
+     * The bullets, in the order they should read.
+     *
+     * TEXT rather than `ReactNode`, deliberately: every list this replaced was a
+     * string array straight off a run's output, and taking strings is what lets
+     * this component key them (see the component doc). A page that needs a link
+     * inside a bullet wants its own `<ul>`, not a prop here.
+     */
+    items: readonly string[];
+    /**
+     * Rendered as a heading above the list, inside a wrapping `<section>`.
+     *
+     * Omitted (or `null`/`false`, so `title={cond && "Risks"}` means what it
+     * looks like) renders the bare `<ul>` with no wrapper — which is what four of
+     * the five lists this replaced were.
+     */
+    title?: ReactNode | undefined;
+    /**
+     * `"sm"` adds `text-sm`, which two of the five copies carried and three did
+     * not. `"base"` is the default and adds nothing.
+     */
+    size?: "sm" | "base" | undefined;
+    /**
+     * ADDED to the list's own classes rather than replacing them. There is no
+     * `tailwind-merge` in this package, so a class that CONFLICTS with a base one
+     * is not reliably the winner — use this for additions, not overrides.
+     */
+    className?: string | undefined;
+};
+/**
+ * A disc-bulleted list of short strings — a run's key points, findings, risks.
+ *
+ * Five pages had written this, byte-identical apart from a `text-sm` suffix on
+ * two of them, and all five had the same two defects. Both are the reason this
+ * is a component rather than four lines a page repeats:
+ *
+ * - **All five keyed by the string itself, and these lists are MODEL OUTPUT.**
+ *   Two identical bullets are entirely plausible — a summariser that repeats
+ *   itself is a bad summary, not a bad program — and a repeated string is then
+ *   a duplicate `key`: React warns, and the two `<li>`s contend for one slot in
+ *   the reconciliation. What is keyed here instead is the content PLUS how many
+ *   times that content has already appeared in this list, which is unique by
+ *   construction and unchanged by a re-render that did not change the text.
+ *   (Position alone would also be sound — these lists are replaced wholesale by
+ *   each new output and never reordered — but it is what `noArrayIndexKey`
+ *   exists to talk you out of, and a unique key is one `Map` away, so there is
+ *   no reason to spend a lint suppression on it.)
+ * - **Three of the five rendered an empty `<ul>` under a heading.** Two had
+ *   hand-rolled `if (items.length === 0) return null` and three had not, so the
+ *   same absent field was "nothing" on two pages and a stray heading with a
+ *   void under it on three. Emptiness renders NOTHING here, `title` included:
+ *   a heading over no bullets is a claim the run did not make.
+ *
+ * @example
+ * ```tsx
+ * import { BulletList } from "@alexkroman1/aai-ui";
+ *
+ * function Findings({ risks }: { risks: string[] }) {
+ *   return <BulletList title="Risks" items={risks} size="sm" />;
+ * }
+ * ```
+ *
+ * @param props - Bullet-list props.
+ *
+ * @public
+ */
+export declare function BulletList({ items, title, size, className }: BulletListProps): ReactNode;

package/dist/components/button.js

@@ -1,8 +1,8 @@
 import { useTheme } from "../context.js";
-import { i as primaryTint, r as inkTint } from "../_colors-j8XMToi9.js";
+import { a as inkTint, i as focusRingStyle, n as FOCUS_RING, o as primaryTint } from "../_colors-CpZO-88A.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
-//#region components/button.tsx
+//#region src/components/button.tsx
 /** @jsxImportSource react */
 /** One variant's rest and hover colors, derived from the theme. */
 function variantColors(variant, theme) {
@@ -70,13 +70,13 @@ function Button({ variant = "default", size = "default", className, children, st
 		"--aai-btn-bg-hover": colors.hoverBg,
 		"--aai-btn-fg-hover": colors.hoverFg,
 		"--aai-btn-bd-hover": colors.hoverBorder,
-		outlineColor: theme.primary,
+		...focusRingStyle(theme.primary),
 		...style
 	};
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
 		style: vars,
-		className: clsx("inline-flex items-center justify-center appearance-none m-0 w-fit whitespace-nowrap", size === "lg" ? "h-11 px-7 text-xs" : "h-9 px-5 text-[11px]", "rounded-aai font-aai font-medium tracking-[1.4px] uppercase leading-none", "cursor-pointer border transition-colors duration-150", "bg-(--aai-btn-bg) text-(--aai-btn-fg) border-(--aai-btn-bd)", "enabled:hover:bg-(--aai-btn-bg-hover) enabled:hover:text-(--aai-btn-fg-hover)", "enabled:hover:border-(--aai-btn-bd-hover)", "outline-none focus-visible:[outline:2px_solid] focus-visible:[outline-offset:2px]", "disabled:cursor-not-allowed disabled:opacity-50", className),
+		className: clsx("inline-flex items-center justify-center appearance-none m-0 w-fit whitespace-nowrap", size === "lg" ? "h-11 px-7 text-xs" : "h-9 px-5 text-[11px]", "rounded-aai font-aai font-medium tracking-[1.4px] uppercase leading-none", "cursor-pointer border transition-colors duration-150", "bg-(--aai-btn-bg) text-(--aai-btn-fg) border-(--aai-btn-bd)", "enabled:hover:bg-(--aai-btn-bg-hover) enabled:hover:text-(--aai-btn-fg-hover)", "enabled:hover:border-(--aai-btn-bd-hover)", FOCUS_RING, "disabled:cursor-not-allowed disabled:opacity-50", className),
 		...rest,
 		children
 	});

package/dist/components/chat-view.js

@@ -1,3 +1,3 @@
 import "../context.js";
-import { t as ChatView } from "../chat-view-DDTtrh7N.js";
+import { t as ChatView } from "../chat-view-C_3T7Ln8.js";
 export { ChatView };

package/dist/components/console-shell.d.ts

@@ -14,14 +14,6 @@ export type ConsoleShellProps = {
     state: AgentState;
     /** Whether the status dot pulses. */
     pulsing: boolean;
-    /**
-     * Error banner text; `null`/`undefined` hides the banner.
-     *
-     * Pass `session.error?.message` — the banner is announced, which a
-     * hand-rolled `<div>` in a custom chrome is not. See the `role="alert"`
-     * comment below for why that matters more here than it looks.
-     */
-    error?: string | null | undefined;
     /** Card content — normally a {@link MessageList}. */
     children: ReactNode;
     /** Row rendered beneath the card (controls). */
@@ -38,16 +30,22 @@ export type ConsoleShellProps = {
  * `<Controls>` under it, and until now that was the only way to get it — the
  * shell itself was internal, so a client wanting its own conversation markup
  * had to rebuild the chrome as well. Each one that did re-derived the error
- * banner WITHOUT `role="alert"`, which is the one part of this component a
- * reviewer cannot see is missing: per the `fatalError` latch in
- * `session-core.ts`, the banner is the only remaining signal once the state
- * eyebrow goes back to reading like a live session, and a screen reader is
- * never told an unannounced one appeared.
+ * banner WITHOUT `role="alert"`.
+ *
+ * **The banner is {@link SessionErrorBanner} now, composed here rather than
+ * spelled out.** It was four lines of this file, and this file is a whole
+ * FRAME — a centred `max-w-190` column — so the full-bleed chromes that needed
+ * the announced banner could not take it without taking a layout that would
+ * replace the design they exist to demonstrate. Composing means there is one
+ * banner, and it means this component no longer takes an `error` prop: the
+ * banner reads the session itself, which is one fewer thing a caller can wire
+ * up wrong.
  *
  * Reach for it when the conversation is yours and the frame is not. Reach for
- * `<ChatView>` when both are ours.
+ * `<ChatView>` when both are ours. Reach for `<SessionErrorBanner>` alone when
+ * neither is.
  *
- * Must be rendered inside the providers `client()` installs.
+ * Must be rendered inside the providers `mountClient()` installs.
  *
  * @example A custom conversation in the stock chrome
  * ```tsx
@@ -55,19 +53,17 @@ export type ConsoleShellProps = {
  *   ConsoleShell,
  *   Controls,
  *   useConversation,
- *   useSessionSelector,
+ *   useSessionStatus,
  * } from "@alexkroman1/aai-ui";
  *
  * function Console() {
- *   const state = useSessionSelector((s) => s.state);
- *   const error = useSessionSelector((s) => s.error);
+ *   const state = useSessionStatus();
  *   const { items } = useConversation();
  *   return (
  *     <ConsoleShell
  *       title="Dispatch"
  *       state={state}
  *       pulsing={state === "listening"}
- *       error={error?.message}
  *       footer={<Controls />}
  *     >
  *       <ul>
@@ -86,4 +82,4 @@ export type ConsoleShellProps = {
  *
  * @public
  */
-export declare function ConsoleShell({ icon, title, state, pulsing, error, children, footer, className, }: ConsoleShellProps): ReactNode;
+export declare function ConsoleShell({ icon, title, state, pulsing, children, footer, className, }: ConsoleShellProps): ReactNode;