@alexkroman1/aai-ui 0.16.0 → 0.18.0

package/README.md

@@ -28,21 +28,20 @@ still React, still the same theme tokens.
 
 ### Agent `agent.ts`
 
-The session's state lives in a slot, and `syncState` is what the browser sees —
-pushed after every tool call, so the client never rebuilds it from events:
+The session's state lives in a slot, and a slot declared `sync: true` is what
+the browser sees — pushed after every tool call, so the client never rebuilds it
+from events:
 
 ```ts
 import { agent, sessionSlot } from "@alexkroman1/aai";
 
 const desk = sessionSlot("desk", () => ({ symbols: [] as string[] }), {
   view: (state) => ({ symbols: state.symbols }),
+  sync: true,
 });
 
-export default agent({
-  name: "Market Desk",
-  systemPrompt: "You look up quotes and keep the caller's watchlist.",
-  syncState: desk.projected,
-});
+// The `sync: true` slot is collected; the prompt is the system-prompt.md beside this file.
+export default agent({ name: "Market Desk" });
 ```
 
 ### Tool `tools/get_quote.ts`

package/dist/_submission-timing.d.ts

@@ -0,0 +1,40 @@
+/**
+ * The press-to-settle stopwatch both submit hooks report as
+ * `WorkflowSubmission.timing`: the mark `submit()` was called at, and the mark
+ * the submission settled at, read off the one flag that spans both waits.
+ *
+ * It is the half of `transcription-workflow`'s `useTotalLatency` that is a
+ * fact about the SUBMISSION rather than about the page: that template kept
+ * `startedAt`/`frozenMs` in its own state, armed by its own submit handler
+ * and cleared by its own Clear button — shadow state for two instants only
+ * the hook can place exactly. The rendering half (the interval that re-draws
+ * a running clock, the "before the run / inside it" split) stays on the page,
+ * because it is the page that decides how to print a duration.
+ *
+ * Two details it would be easy to get wrong, both kept from the template:
+ *
+ * - **The settle is measured in the effect that sees `pending` fall**, so the
+ *   mark is the moment the run settled rather than whenever the page next
+ *   drew. And only after `pending` has been seen TRUE since the press — a
+ *   press that lands one render before the submission reports itself in
+ *   flight would otherwise freeze the clock at zero.
+ * - **`performance.now()`, not `Date.now()`.** Monotonic; see
+ *   `WorkflowSubmissionTiming`.
+ */
+import type { WorkflowSubmissionTiming } from "./workflow-submission.ts";
+/** What the stopwatch hands a submit hook. */
+export type SubmissionTiming = {
+    /** The marks, for `WorkflowSubmission.timing`. A new object only when a mark changes. */
+    timing: WorkflowSubmissionTiming;
+    /** Call from `submit()`: sets `submittedAt`, clears `settledAt`. */
+    markSubmitted: () => void;
+    /** Call from `reset()`: drops both marks. */
+    clear: () => void;
+};
+/**
+ * The stopwatch over `pending` — see the module doc.
+ *
+ * @param pending - The submission's own `pending`: true from the press until
+ *   the run settles, which is the whole of what the clock covers.
+ */
+export declare function useSubmissionTiming(pending: boolean): SubmissionTiming;

package/dist/_submission.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Everything a submit hook is, bar its BODY.
+ *
+ * `useWorkflowSubmit` (`use-workflow-form.ts`) and `useWorkflowStream`
+ * (`use-workflow-stream.ts`) differ in one thing — when the run is created
+ * relative to the bytes — and that one thing is the submission body each hands
+ * to the form's statechart. Everything after the body was written out twice,
+ * identically: the watch over the run id (`useWorkflowRun`), the two controls
+ * bound to it (`_run-controls.ts`), `pending` as "the machine is busy or the
+ * watch is still polling", the press-to-settle stopwatch
+ * (`_submission-timing.ts`), a `reset` that clears both, and the fourteen-field
+ * `WorkflowSubmission` assembled from all of it. Two copies of a return object
+ * that have to agree field for field are two copies that can stop agreeing —
+ * the stream hook's type is an ALIAS of the form hook's for the same reason —
+ * so the tail is one function, and each hook keeps only what makes it itself.
+ */
+import type { RecoverRunOptions } from "./_recover-run.ts";
+import type { SubmissionWork } from "./_workflow-form-state.ts";
+import type { UploadGate } from "./upload/index.ts";
+import type { WorkflowApi } from "./workflow-client.ts";
+import type { WorkflowSubmission, WorkflowSubmissionScope } from "./workflow-submission.ts";
+/**
+ * What one `submit(input)` does, from the hook that owns it: the gate the
+ * bytes pause through, and the work that runs as THE submission (see
+ * `SubmissionActions.submit`). Called per press with the client read at that
+ * moment, after the stopwatch has marked it.
+ *
+ * It is a `useCallback` dependency of `submit`, so a hook hands over a stable
+ * one — rebuilt only when what it closes over changes — or `submit`, and with
+ * it the `onSubmit` a page gives `<Form>`, is rebuilt every render.
+ */
+export type BeginSubmission = (input: unknown, client: WorkflowApi) => {
+    gate: UploadGate;
+    work: SubmissionWork;
+};
+/** What {@link useSubmission} needs from the hook. */
+export type SubmissionOptions = {
+    /** The stable getter from `useWorkflowApiRef` — the hook's, since the convention keys on the hook file. */
+    getClient: () => WorkflowApi;
+    /** The caller's client, for the watch; `undefined` is the page's own agent. */
+    api: WorkflowApi | undefined;
+    /** How often the fallback poll re-reads a live run; `undefined` is the default. */
+    intervalMs: number | undefined;
+    /** The mount-time lookup, or nothing for a hook that refuses it (`useWorkflowStream`). */
+    recover?: RecoverRunOptions;
+    /** Who finds the run again — reported back as `WorkflowSubmission.scope`. */
+    scope: WorkflowSubmissionScope;
+    /** The hook's own half — see {@link BeginSubmission}. */
+    begin: BeginSubmission;
+};
+/**
+ * The shared tail of a submit hook: the statechart, the watch, the controls,
+ * the stopwatch, and the `WorkflowSubmission` built from them. See the module
+ * doc.
+ */
+export declare function useSubmission(options: SubmissionOptions): WorkflowSubmission<unknown, never>;

package/dist/_theme.d.ts

@@ -0,0 +1,17 @@
+/**
+ * One `ClientTheme` — either form — to the five resolved tokens.
+ *
+ * Its own module rather than a branch in `context.ts` (which is at the cap)
+ * because the derivation is a decision worth a test of its own: the dark
+ * neutrals are chosen to keep the components' derived tints (`_colors.ts`'s
+ * `inkTint`, which walks from `text` toward the ground) above WCAG AA on a
+ * dark surface, exactly as the light defaults do on a light one.
+ */
+import type { ClientTheme, ResolvedClientTheme } from "./types.ts";
+export declare const DEFAULT_THEME: ResolvedClientTheme;
+/**
+ * Every token filled in: the preset's neutrals under its accent, or the given
+ * tokens over the defaults. `undefined` is the default theme itself. A token
+ * given as `""` is ignored with a warning ({@link withoutBlankTokens}).
+ */
+export declare function resolveClientTheme(theme: ClientTheme | undefined): ResolvedClientTheme;

package/dist/_theme.test-d.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The two forms of `ClientTheme` are EXCLUSIVE at the type level.
+ *
+ * A mixed `{ primary, mode: "dark", bg }` used to compile: an object literal is
+ * checked against the union as a whole, so a key from either member passed
+ * excess-property checking, and at runtime `isPreset` won and `bg` was dropped
+ * without a word. The `?: undefined` guards on each member are what make the
+ * mixed literal a compile error, and this file is what keeps them there.
+ *
+ * Probed with a conditional rather than a suppression directive: an assignability
+ * question answered as `true`/`false` names the shape that moved, where a
+ * suppressed error passes on ANY error.
+ */
+export {};

package/dist/{_utils-Mi-SCFA1.js → _utils-BlZBJPdj.js}

@@ -21,11 +21,10 @@ function pageBaseUrl() {
 /**
 * Set the document title, when there is one to set and a document to set it on.
 *
-* Both mounts do this and neither may clobber a title the page's own HTML
-* declared — `mountClient()`'s custom-component tier because there is no shell header
-* to show the name in, `mountPage()` because there is no shell at all. One copy, for
-* the reason `resolveContainer` and `mountRoot` are shared: the rule is the
-* same, so the two mounts must not be able to disagree about it.
+* `mountPage()` does this for its `name`, and may not clobber a title the
+* page's own HTML declared — there is no shell to show the name in otherwise.
+* `mountClient()` sets none: the agent's name reaches its default shell from
+* the agent's own `client-config`, and a custom component owns the page.
 */
 function setPageTitle(name) {
 	if (name && typeof document !== "undefined") document.title = name;

package/dist/_utils.d.ts

@@ -11,11 +11,10 @@ export declare function pageBaseUrl(): string;
 /**
  * Set the document title, when there is one to set and a document to set it on.
  *
- * Both mounts do this and neither may clobber a title the page's own HTML
- * declared — `mountClient()`'s custom-component tier because there is no shell header
- * to show the name in, `mountPage()` because there is no shell at all. One copy, for
- * the reason `resolveContainer` and `mountRoot` are shared: the rule is the
- * same, so the two mounts must not be able to disagree about it.
+ * `mountPage()` does this for its `name`, and may not clobber a title the
+ * page's own HTML declared — there is no shell to show the name in otherwise.
+ * `mountClient()` sets none: the agent's name reaches its default shell from
+ * the agent's own `client-config`, and a custom component owns the page.
  */
 export declare function setPageTitle(name: string | undefined): void;
 /**

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

@@ -23,7 +23,7 @@
  * 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. It takes the palette as a PROP, so it does
- * not: what it shares is the exhaustive colour lookup, this record as the label
+ * not: what it shares is the colour lookup, this record as the label
  * fallback, and the pulse rule, and the three chromes that had each written
  * those fourteen lines around their own `satisfies Record<AgentState, string>`
  * keep the record and lose the lines.
@@ -32,6 +32,8 @@ import type { AgentState } from "./types.ts";
 /**
  * The default label per {@link AgentState}.
  *
+ * {@link AgentState} is open, so a lookup by a live state is `string |
+ * undefined`: fall back to the raw state for one this version has no word for.
  * Override the ones your page has a better word for and keep the rest:
  *
  * ```ts
@@ -39,8 +41,11 @@ import type { AgentState } from "./types.ts";
  * 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();
+ * const STATE_LABEL: Readonly<Record<AgentState, string>> = {
+ *   ...AGENT_STATE_LABELS,
+ *   thinking: "Processing",
+ * };
+ * const shout = (s: AgentState) => (STATE_LABEL[s] ?? s).toUpperCase();
  * ```
  *
  * **Sentence case, deliberately.** A template that wants caps applies its own

package/dist/agent-state.d.ts

@@ -1,5 +1,6 @@
 /**
- * Reading what the agent projects — `agent({ syncState })` — in the browser.
+ * Reading what the agent projects — the slots declared `sync: true`, collected
+ * into its `syncState` — in the browser.
  *
  * The frame is KEYED by slot name (`{ [slot]: view }`), so every reader here
  * selects ONE slot by the name the agent keyed it under. That is what lets a
@@ -52,9 +53,10 @@ export declare function useAgentState(): AgentStateFrame | null;
  * import { useAgentState } from "@alexkroman1/aai-ui";
  *
  * // In a real project the slot is declared beside the agent and imported here;
- * // the agent declares `syncState: cartSlot.projected`.
+ * // `sync: true` is what puts it in the agent's `syncState`.
  * const cartSlot = sessionSlot("cart", () => ({ items: [] as string[] }), {
  *   view: (cart) => ({ count: cart.items.length }),
+ *   sync: true,
  * });
  *
  * function CartBadge() {

package/dist/append-dictation.d.ts

@@ -0,0 +1,23 @@
+/**
+ * `appendDictation(draft, text)` — where dictated words land in a text box
+ * that may already hold some.
+ */
+/**
+ * `draft` with `text` added after it, joined by exactly one space: a draft
+ * ending in whitespace or a newline does not grow a double space, and an empty
+ * or blank draft is replaced rather than given a leading one.
+ *
+ * Never REPLACES what was typed — the words someone said are an addition to
+ * the box, which is what makes speaking into a half-written prompt safe.
+ *
+ * @example
+ * ```ts
+ * import { appendDictation } from "@alexkroman1/aai-ui";
+ *
+ * appendDictation("Build me an agent", "that books tables."); // "Build me an agent that books tables."
+ * appendDictation("", "Hello"); // "Hello"
+ * ```
+ *
+ * @public
+ */
+export declare function appendDictation(draft: string, text: string): string;

package/dist/audio/dictation.d.ts

@@ -0,0 +1,36 @@
+/**
+ * The dictation recorder: the microphone captured into one clip, handed back
+ * as a WAV file for a transcription endpoint to read whole.
+ *
+ * A clip, not a stream — the dictation API takes the whole utterance in one
+ * request — so this is the pre-connect capture (`audio/preconnect.ts`) used
+ * for what it already does: buffer the mic at a known rate. Stopping is its
+ * `detach` (the worklet's tail flush lands in the buffer, so the last word is
+ * kept) and then `close`, which turns the browser's recording indicator off.
+ *
+ * @module
+ */
+/** One recording in progress. Every method is safe to call after another. */
+export type DictationRecorder = {
+    /** The rate the clip is recorded at. */
+    readonly sampleRate: number;
+    /**
+     * Stop, release the microphone, and answer the clip as a mono 16-bit WAV.
+     * An empty clip (stopped before the first batch) is a 44-byte header.
+     */
+    stop(): Promise<Uint8Array<ArrayBuffer>>;
+    /** Stop and release the microphone, keeping nothing. Never rejects. */
+    cancel(): Promise<void>;
+};
+/**
+ * Ask for the microphone and start recording.
+ *
+ * Rejects like the session's own capture does — a denied prompt, a rate the
+ * browser refused — with the microphone released.
+ */
+export declare function openDictationRecorder(opts: {
+    sampleRate: number;
+    /** The capture buffer's bound; the caller stops the clip by then. */
+    maxSeconds: number;
+    captureWorkletSrc: string;
+}): Promise<DictationRecorder>;

package/dist/audio/index.d.ts

@@ -1,7 +1,8 @@
 /**
  * The browser audio layer's import surface for the rest of the package: the
- * {@link VoiceIO} a live call plays and captures through, and the pre-connect
- * capture that buffers the mic before the server names its rates.
+ * {@link VoiceIO} a live call plays and captures through, the pre-connect
+ * capture that buffers the mic before the server names its rates, and the
+ * dictation recorder `useDictation` turns into one clip.
  *
  * `capture.ts` (the grant checks and the capture node both halves share) is
  * private to this directory — guard-invariants rule 37 fails an import from
@@ -14,5 +15,6 @@
  *
  * @module
  */
+export { type DictationRecorder, openDictationRecorder } from "./dictation.ts";
 export { openPreConnectCapture, type PreConnectCapture } from "./preconnect.ts";
 export { createVoiceIO, type VoiceIO, type VoiceIOOptions } from "./voice-io.ts";

package/dist/audio/index.js

@@ -1,4 +1,5 @@
 import { CAPTURE_STOP_ACK_TIMEOUT_MS, MIC_BUFFER_SECONDS, PLAYBACK_DONE_MAX_WAIT_MS, PLAYBACK_DONE_POLL_MS, VOICE_CAPTURE_CONSTRAINTS } from "../types.js";
+import { encodeWav } from "@alexkroman1/aai/step";
 //#region src/audio/capture.ts
 /**
 * The capture half's primitives, shared by the audio path (`audio/voice-io.ts`) and
@@ -250,6 +251,48 @@ async function startCapture(ctx, stream, opts) {
 	};
 }
 //#endregion
+//#region src/audio/dictation.ts
+/**
+* The dictation recorder: the microphone captured into one clip, handed back
+* as a WAV file for a transcription endpoint to read whole.
+*
+* A clip, not a stream — the dictation API takes the whole utterance in one
+* request — so this is the pre-connect capture (`audio/preconnect.ts`) used
+* for what it already does: buffer the mic at a known rate. Stopping is its
+* `detach` (the worklet's tail flush lands in the buffer, so the last word is
+* kept) and then `close`, which turns the browser's recording indicator off.
+*
+* @module
+*/
+/**
+* Ask for the microphone and start recording.
+*
+* Rejects like the session's own capture does — a denied prompt, a rate the
+* browser refused — with the microphone released.
+*/
+async function openDictationRecorder(opts) {
+	const capture = await openPreConnectCapture(opts);
+	let done = false;
+	return {
+		sampleRate: capture.sampleRate,
+		async stop() {
+			if (done) return encodeWav([], { sampleRate: capture.sampleRate });
+			done = true;
+			try {
+				const { chunks, sampleRate } = await capture.detach();
+				return encodeWav(chunks.map((c) => new Uint8Array(c)), { sampleRate });
+			} finally {
+				await capture.close();
+			}
+		},
+		async cancel() {
+			if (done) return;
+			done = true;
+			await capture.close().catch(() => {});
+		}
+	};
+}
+//#endregion
 //#region src/audio/voice-io.ts
 /**
 * Create a {@link VoiceIO} instance that captures microphone audio and
@@ -428,4 +471,4 @@ async function createVoiceIO(opts) {
 	return io;
 }
 //#endregion
-export { createVoiceIO, openPreConnectCapture };
+export { createVoiceIO, openDictationRecorder, openPreConnectCapture };

package/dist/{chat-view-DIwPoAEG.js → chat-view-BwKpF0MN.js}

@@ -1,7 +1,7 @@
-import { useSessionError, useSessionStatus, useTheme } from "./context.js";
-import { t as MessageList } from "./message-list-DHZcLhRA.js";
+import { l as useSessionStatus, s as useSessionError, u as useTheme } from "./context-BF0KsI9X.js";
+import { t as MessageList } from "./message-list-BBHLK05X.js";
 import { a as inkTint, r as THINKING_COLOR, t as ERROR_COLOR } from "./_colors-CpZO-88A.js";
-import { t as Eyebrow } from "./eyebrow-UfmSz9yy.js";
+import { t as Eyebrow } from "./eyebrow-Bp4y1rZ9.js";
 import { Controls } from "./components/controls.js";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -9,6 +9,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /**
 * The default label per {@link AgentState}.
 *
+* {@link AgentState} is open, so a lookup by a live state is `string |
+* undefined`: fall back to the raw state for one this version has no word for.
 * Override the ones your page has a better word for and keep the rest:
 *
 * ```ts
@@ -16,8 +18,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * 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();
+* const STATE_LABEL: Readonly<Record<AgentState, string>> = {
+*   ...AGENT_STATE_LABELS,
+*   thinking: "Processing",
+* };
+* const shout = (s: AgentState) => (STATE_LABEL[s] ?? s).toUpperCase();
 * ```
 *
 * **Sentence case, deliberately.** A template that wants caps applies its own
@@ -126,6 +131,26 @@ function SessionErrorBanner({ className }) {
 //#region src/components/session-state-dot.tsx
 /** @jsxImportSource react */
 /**
+* Indicator dot colour per state, from the theme — `ConsoleShell`'s dot, and
+* {@link SessionStateDot}'s for every state its `colors` does not name.
+*
+* `idle` is the theme's own faint ink step rather than a fixed warm grey, so
+* the dot stays visible on a dark ground; the thinking amber and error red
+* are semantic and stay fixed. A state this version does not know is `idle`.
+*
+* @internal
+*/
+function stateColor(state, primary, idle) {
+	switch (state) {
+		case "listening":
+		case "speaking":
+		case "ready": return primary;
+		case "thinking": return THINKING_COLOR;
+		case "error": return ERROR_COLOR;
+		default: return idle;
+	}
+}
+/**
 * One `aai-pulse` cycle per pulsing state, in milliseconds. The two states
 * that pulse are the two in which the agent is DOING something the reader
 * cannot otherwise see — the microphone is open, or a reply is being worked
@@ -161,6 +186,23 @@ function StateDot({ color, pulseMs, className, title }) {
 		title
 	});
 }
+/** Which coarse group a state belongs to — `error` deliberately none. */
+function groupOf(state) {
+	switch (state) {
+		case "ready":
+		case "listening":
+		case "speaking": return "live";
+		case "thinking": return "busy";
+		case "error": return;
+		default: return "idle";
+	}
+}
+/**
+* The idle dot's ink step: the theme's text at half strength over its ground.
+* Lighter than `INK_FAINT_PCT` (the text steps) on purpose — a dot is a
+* 8px disc, not a word, and at 65% it read as "on" beside a live one.
+*/
+const INK_IDLE_PCT = 50;
 /**
 * The live session state as a coloured dot and a word, on its own narrow
 * subscription.
@@ -173,31 +215,20 @@ function StateDot({ color, pulseMs, className, title }) {
 * 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
+* — the colour lookup and its theme fallback, 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
+* @example A dispatch board's readout: coarse 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}
+*       colors={{ idle: "#6b7280", live: "#22c55e", busy: "#eab308", speaking: "#3b82f6" }}
 *       labels={{ listening: "LISTENING", thinking: "PROCESSING", speaking: "TRANSMITTING" }}
 *       labelClassName="text-[11px] uppercase"
 *     />
@@ -205,24 +236,30 @@ function StateDot({ color, pulseMs, className, title }) {
 * }
 * ```
 *
+* With no `colors` at all the dot follows the mounted theme — a chrome that
+* sets `mountClient({ theme })` gets a matching dot for free.
+*
 * @param props - See {@link SessionStateDotProps}.
 *
 * @public
 */
 function SessionStateDot({ colors, labels, pulse = true, className, dotClassName, labelClassName }) {
 	const state = useSessionStatus();
+	const theme = useTheme();
 	const pulseMs = pulse ? PULSE_MS[state] ?? null : null;
+	const group = groupOf(state);
+	const color = colors?.[state] ?? (group === void 0 ? void 0 : colors?.[group]) ?? stateColor(state, theme.primary, inkTint(theme.text, theme.bg, INK_IDLE_PCT));
 	return /* @__PURE__ */ jsxs("span", {
 		className: clsx("inline-flex items-center gap-2", className),
 		"data-state": state,
 		children: [/* @__PURE__ */ jsx(StateDot, {
-			color: colors[state],
+			color,
 			pulseMs,
 			className: dotClassName ?? "w-2 h-2",
 			title: state
 		}), /* @__PURE__ */ jsx("span", {
 			className: labelClassName,
-			children: labels?.[state] ?? AGENT_STATE_LABELS[state]
+			children: labels?.[state] ?? AGENT_STATE_LABELS[state] ?? state
 		})]
 	});
 }
@@ -230,25 +267,6 @@ function SessionStateDot({ colors, labels, pulse = true, className, dotClassName
 //#region src/components/console-shell.tsx
 /** @jsxImportSource react */
 /**
-* Indicator dot color per state.
-*
-* `idle` is the theme's own faint ink step rather than a fixed warm grey, so
-* the dot stays visible on a dark ground; the thinking amber and error red
-* are semantic and stay fixed.
-*
-* @internal
-*/
-function stateColor(state, primary, idle) {
-	switch (state) {
-		case "listening":
-		case "speaking":
-		case "ready": return primary;
-		case "thinking": return THINKING_COLOR;
-		case "error": return ERROR_COLOR;
-		default: return idle;
-	}
-}
-/**
 * The design-system "console" chrome: a 760px column on the themed page with a
 * header (icon + live-status eyebrow), an announced error banner, the main
 * content on a raised card, and a footer row beneath it.
@@ -294,11 +312,13 @@ function stateColor(state, primary, idle) {
 *       footer={<Controls />}
 *     >
 *       <ul>
-*         {items.map((item) => (
-*           <li key={item.kind === "message" ? item.message.id : item.toolCall.callId}>
-*             {item.kind === "message" ? item.message.content : item.toolCall.name}
-*           </li>
-*         ))}
+*         {items.map((item) =>
+*           item.kind === "message" ? (
+*             <li key={item.message.id}>{item.message.content}</li>
+*           ) : item.kind === "tool" ? (
+*             <li key={item.toolCall.callId}>{item.toolCall.name}</li>
+*           ) : null,
+*         )}
 *       </ul>
 *     </ConsoleShell>
 *   );

package/dist/{client-config-C7fQrioM.js → client-config-DcMCWmkO.js}

@@ -1,4 +1,4 @@
-import { n as pageBaseUrl } from "./_utils-Mi-SCFA1.js";
+import { n as pageBaseUrl } from "./_utils-BlZBJPdj.js";
 import { CLIENT_CONFIG_PATH, ClientConfigResponseSchema, SESSION_TICKET_HEADER } from "@alexkroman1/aai/protocol";
 //#region src/client-config.ts
 /**
@@ -69,11 +69,12 @@ const CLIENT_CONFIG_ATTEMPT_TIMEOUT_MS = 1e4;
 *
 * @internal
 */
-async function loadClientConfig(platformUrl, fetchFn, presentedTicket) {
+async function loadClientConfig(platformUrl, fetchFn, presentedTicket, signal) {
 	const doFetch = fetchFn ?? ((input, init) => globalThis.fetch(input, init));
+	const deadline = AbortSignal.timeout(CLIENT_CONFIG_ATTEMPT_TIMEOUT_MS);
 	try {
 		const resp = await doFetch(buildAgentUrl(platformUrl, CLIENT_CONFIG_PATH).href, {
-			signal: AbortSignal.timeout(CLIENT_CONFIG_ATTEMPT_TIMEOUT_MS),
+			signal: signal === void 0 ? deadline : AbortSignal.any([deadline, signal]),
 			...presentedTicket === void 0 ? {} : { headers: { [SESSION_TICKET_HEADER]: presentedTicket } }
 		});
 		if (!resp.ok) return null;
@@ -102,14 +103,7 @@ async function loadClientConfig(platformUrl, fetchFn, presentedTicket) {
 * treat every field as optional, because an agent that declared none is a
 * normal agent.
 *
-* @param platformUrl - The agent's base URL. **Defaults to the page's own
-* origin and path** (`pageBaseUrl()`), which is the agent that served the page
-* and the only case a browser has — the argument was required while the default
-* sat one module away in this same package, so every caller wrote
-* `location.origin + location.pathname` for itself. Pass one for a page reading
-* a DIFFERENT agent. The endpoint is resolved relative to it.
-* @param fetchFn - Fetch implementation, for tests and for a caller that
-* supplies its own credentials. Defaults to the global `fetch`.
+* @param options - Where to look and how; see {@link FetchClientConfigOptions}.
 * @returns The agent's config, or `{}` when the lookup produced no answer.
 *
 * @example
@@ -132,8 +126,9 @@ async function loadClientConfig(platformUrl, fetchFn, presentedTicket) {
 *
 * @public
 */
-async function fetchClientConfig(platformUrl = pageBaseUrl(), fetchFn) {
-	return await loadClientConfig(platformUrl, fetchFn) ?? AGENT_DEFAULT;
+async function fetchClientConfig(options = {}) {
+	const { platformUrl = pageBaseUrl(), fetch: fetchFn, signal } = options;
+	return await loadClientConfig(platformUrl, fetchFn, void 0, signal) ?? AGENT_DEFAULT;
 }
 //#endregion
 export { fetchClientConfig as n, loadClientConfig as r, buildAgentUrl as t };