@alexkroman1/aai-ui 13.3.0 → 14.0.0

package/dist/{tool-call-block-Bunc6rCw.js → tool-call-block-C2t_5fpp.js}

@@ -1,8 +1,8 @@
 import { useTheme } from "./context.js";
-import { r as inkTint } from "./_colors-CZ6OlPbL.js";
+import { a as inkTint } from "./_colors-CpZO-88A.js";
 import { t as Eyebrow } from "./eyebrow-UfmSz9yy.js";
-import { i as tryParseJSON, r as truncate } from "./_utils-CyzjK0gW.js";
-import { n as useToolConfig } from "./tool-config-context-Bh8p3DtG.js";
+import { i as tryParseJSON, r as truncate } from "./_utils-DnQDM9Uy.js";
+import { n as useToolConfig } from "./tool-config-context-Es4YUzV2.js";
 import clsx from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo, useMemo, useState } from "react";
@@ -123,6 +123,29 @@ function formatResult(result) {
 	return parsed === result ? result : JSON.stringify(parsed, null, 2);
 }
 /**
+* The expanded result pane.
+*
+* Its own component so the parse-and-pretty-print happens only when the row is
+* actually OPEN. `ToolCallRow` renders `children` under `isOpen && canExpand`,
+* and a row starts closed — so computing this in the parent meant every row
+* paid `JSON.parse` + `JSON.stringify(_, null, 2)` over its whole result, and
+* then RETAINED the pretty string, for a panel nobody clicked. The burst case
+* is `history.restored`, which mounts up to `DEFAULT_MAX_HISTORY` rows in one
+* commit.
+*
+* Creating this element is free; React only runs the body once it is mounted.
+*/
+function ToolCallResult({ result }) {
+	const theme = useTheme();
+	const formatted = useMemo(() => formatResult(result), [result]);
+	if (!formatted) return null;
+	return /* @__PURE__ */ jsx("pre", {
+		className: "font-aai-mono text-xs px-3.5 py-3 m-0 whitespace-pre-wrap wrap-break-word",
+		style: { color: inkTint(theme.text, theme.surface, 75) },
+		children: formatted
+	});
+}
+/**
 * 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
@@ -151,7 +174,6 @@ const ToolCallBlock = memo(function ToolCallBlock({ toolCall, className }) {
 	const title = config?.label || toolCall.name;
 	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] ?? "");
@@ -175,11 +197,7 @@ const ToolCallBlock = memo(function ToolCallBlock({ toolCall, className }) {
 				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: inkTint(theme.text, theme.surface, 75) },
-			children: formatted
-		})] }) : void 0
+		}), toolCall.result && /* @__PURE__ */ jsx(ToolCallResult, { result: toolCall.result })] }) : void 0
 	});
 });
 //#endregion

package/dist/{tool-config-context-Bh8p3DtG.js → tool-config-context-Es4YUzV2.js}

@@ -1,7 +1,7 @@
 import { createContext, useContext } from "react";
 //#region src/components/tool-config-context.ts
 /**
-* Context for tool display configuration. Installed by `client()` from
+* Context for tool display configuration. Installed by `mountClient()` from
 * `ClientConfig.tools`; the built-in components read it via `useToolConfig`.
 *
 * @internal

package/dist/types.d.ts

@@ -23,8 +23,8 @@ export { CAPTURE_STOP_ACK_TIMEOUT_MS, CLIENT_AUDIO_LEAD_MS, HEARD_AUDIO_LAG_MS,
  *
  * On `@alexkroman1/aai-ui/internal` rather than the root barrel, for the same
  * reason as the audio budgets above: it is a framework decision with no
- * `client()` field to set, and the root is the authoring surface. A custom
- * chrome that bypasses `client()` and opens its own microphone reaches it there
+ * `mountClient()` field to set, and the root is the authoring surface. A custom
+ * chrome that bypasses `mountClient()` and opens its own microphone reaches it there
  * alongside the providers it also needs.
  */
 export declare const VOICE_CAPTURE_CONSTRAINTS: MediaTrackConstraints;
@@ -135,11 +135,26 @@ export type SessionError = {
     readonly code: SessionErrorCode;
     /** A human-readable description of the error. */
     readonly message: string;
+    /**
+     * Whether the session is OVER.
+     *
+     * `false` means surface the message and keep the session interactive — a
+     * turn-level failure over a server that kept running. `true` means the call
+     * is dead and the microphone has been released.
+     *
+     * Required rather than optional, because the wire always carries it
+     * (`error.reported` declares `fatal: z.boolean()`) and a client that cannot
+     * tell the two apart has to guess which banner to render. It was dropped one
+     * line before reaching here for long enough that this type's own doc, and
+     * the reference page generated from it, described a field that did not
+     * exist.
+     */
+    readonly fatal: boolean;
 };
 /**
  * Options for creating a voice session — the shared field set accepted by
- * both `client()` and `createSessionCore`. The one difference: `client()`
- * defaults `platformUrl` from `location.href`, while `createSessionCore`
+ * both `mountClient()` and `createBrowserSession`. The one difference: `mountClient()`
+ * defaults `platformUrl` from `location.href`, while `createBrowserSession`
  * requires it.
  *
  * @public

package/dist/types.js

@@ -22,8 +22,8 @@ import { CAPTURE_STOP_ACK_TIMEOUT_MS, CLIENT_AUDIO_LEAD_MS, HEARD_AUDIO_LAG_MS,
 *
 * On `@alexkroman1/aai-ui/internal` rather than the root barrel, for the same
 * reason as the audio budgets above: it is a framework decision with no
-* `client()` field to set, and the root is the authoring surface. A custom
-* chrome that bypasses `client()` and opens its own microphone reaches it there
+* `mountClient()` field to set, and the root is the authoring surface. A custom
+* chrome that bypasses `mountClient()` and opens its own microphone reaches it there
 * alongside the providers it also needs.
 */
 const VOICE_CAPTURE_CONSTRAINTS = {

package/dist/{url-chips-C2u7QPv8.js → url-chips-BxhzZgk2.js}

@@ -1,6 +1,6 @@
 import { useSessionSelector, useTheme } from "./context.js";
-import { r as inkTint } from "./_colors-CZ6OlPbL.js";
-import { t as pageBaseUrl } from "./_utils-CyzjK0gW.js";
+import { a as inkTint, i as focusRingStyle, n as FOCUS_RING } from "./_colors-CpZO-88A.js";
+import { t as pageBaseUrl } from "./_utils-DnQDM9Uy.js";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
@@ -32,12 +32,12 @@ function UrlChip({ label, url, hint, testId, className }) {
 		type: "button",
 		onClick: copy,
 		title: `${hint} (click to copy)\n${url}`,
-		className: clsx("flex items-center gap-1.5 min-w-0 appearance-none m-0 px-2 py-1 rounded-aai border cursor-pointer text-[11px] leading-none font-aai-mono", "outline-none focus-visible:[outline:2px_solid] focus-visible:[outline-offset:2px]", className),
+		className: clsx("flex items-center gap-1.5 min-w-0 appearance-none m-0 px-2 py-1 rounded-aai border cursor-pointer text-[11px] leading-none font-aai-mono", FOCUS_RING, className),
 		style: {
 			background: inkTint(theme.text, theme.surface, 3),
 			borderColor: theme.border,
 			color: inkTint(theme.text, theme.surface, 65),
-			outlineColor: theme.primary
+			...focusRingStyle(theme.primary)
 		},
 		"data-testid": testId,
 		children: [/* @__PURE__ */ jsx("span", {

package/dist/use-conversation.d.ts

@@ -88,7 +88,7 @@ export type UseConversationResult = {
  * Subscribe to the conversation: the interleaved exchange, the streaming
  * utterance, the live transcript and the thinking rule — with no markup.
  *
- * Must be used inside the provider `client()` installs.
+ * Must be used inside the provider `mountClient()` installs.
  *
  * @example A custom bubble, keeping every rule `<MessageList>` knows
  * ```tsx

package/dist/{use-user-transcript-DFTSEuZN.js → use-user-transcript-uyHhzy4d.js}

@@ -1,4 +1,5 @@
 import { useSessionSelector } from "./context.js";
+import { useMemo } from "react";
 //#region src/use-user-transcript.ts
 /**
 * `useUserTranscript` — what the caller is saying RIGHT NOW, read correctly.
@@ -57,11 +58,11 @@ const TRANSCRIBING_PLACEHOLDER = "…";
 */
 function useUserTranscript() {
 	const partial = useSessionSelector((snapshot) => snapshot.userTranscript);
-	return {
+	return useMemo(() => ({
 		speaking: partial !== null,
 		text: displayText(partial),
 		partial
-	};
+	}), [partial]);
 }
 /** The three cases, spelled out: silent, detected-but-wordless, and words. */
 function displayText(partial) {

package/dist/use-workflow-form.d.ts

@@ -31,7 +31,7 @@
  * `wait` here when the page really does want one request, and the run is
  * followed from the same id either way.
  */
-import type { AnyWorkflowDef, UploadParallel, UploadProgress, WorkflowOutputOf } from "@alexkroman1/aai/workflow-api";
+import type { AnyWorkflowDef, UploadParallelOption, UploadProgress, WorkflowOutputOf } from "@alexkroman1/aai/workflow-api";
 import type { FormValues } from "./components/form-types.ts";
 import type { WorkflowApi, WorkflowRun } from "./workflow-client.ts";
 import type { SubmitInputOf } from "./workflow-def-types.ts";
@@ -119,6 +119,38 @@ export type WorkflowSubmission<R = unknown, I = unknown> = {
     cancel: () => Promise<boolean>;
     /** The run, once started, followed to completion. */
     run: WorkflowRun<R> | undefined;
+    /**
+     * True from `submit()` on this mount until `reset()` — did THIS page start
+     * the run it is showing?
+     *
+     * A page needs it to say the right sentence and cannot derive it: a run
+     * ADOPTED by the mount-time lookup after a reload looks exactly like one this
+     * page started. Six templates kept a `useState(false)` next to this hook, set
+     * it in their `onSubmit` and mirrored it in their `onClear` — shadow state
+     * for a fact only this hook can know, since it is the thing that decides
+     * between `submit()` and the recovery lookup. One of the six grew a fourth
+     * branch and had to move the whole note into its own module with its own
+     * spec, which is what a seam missing one layer down looks like.
+     *
+     * The RAW fact rather than a derived "recovered", deliberately: with `run`
+     * these are three states, not two, and the third is the one a page most needs
+     * to explain. `startedHere` is "you pressed the button"; `!startedHere &&
+     * !run` is the mount-time lookup still going; `!startedHere && run` is a run
+     * this browser started earlier, now in front of somebody who did not press
+     * anything. A boolean meaning only the last of those cannot express the
+     * middle one.
+     *
+     * @example
+     * ```ts
+     * declare const submission: import("@alexkroman1/aai-ui").WorkflowSubmission;
+     * const note = submission.startedHere
+     *   ? "You can close this tab or reload it — this page will find the run again."
+     *   : submission.run === undefined
+     *     ? "Looking for a run this tab started earlier…"
+     *     : "Still working on the run this tab started earlier. Reloading is safe.";
+     * ```
+     */
+    startedHere: boolean;
     /**
      * True from `submit()` until the run reaches a terminal status.
      *
@@ -214,7 +246,7 @@ export type UseWorkflowSubmitOptions = {
      * the default costs nothing where it would not have paid. See
      * `UploadOptions.parallel`.
      */
-    parallel?: UploadParallel;
+    parallel?: UploadParallelOption;
 };
 /**
  * Start a workflow from a form, and follow the run it creates.

package/dist/{use-workflow-run-CXGEcM0l.js → use-workflow-run-CP2ekKPV.js}

@@ -1,4 +1,4 @@
-import { t as pageBaseUrl } from "./_utils-CyzjK0gW.js";
+import { t as pageBaseUrl } from "./_utils-DnQDM9Uy.js";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { errorMessage } from "@alexkroman1/aai";
 import { omitUndefined } from "@alexkroman1/aai/utils";
@@ -10,7 +10,7 @@ import { createWorkflowApiClient, isTerminal, isTerminal as isTerminal$1, readEv
 * This is the whole client half of a WORKFLOW APP: an agent whose front door is
 * a form rather than a microphone (`workflowApp()`) starts runs
 * here and watches them for the answer. It deliberately does NOT go through
-* `SessionCore` — there is no socket, no audio graph, and no session to resume.
+* `BrowserSession` — there is no socket, no audio graph, and no session to resume.
 *
 * **The requests themselves are the SDK's now**
 * (`createWorkflowApiClient`, `@alexkroman1/aai/workflow-api`), and what is left
@@ -466,11 +466,8 @@ function useWorkflowProgress(runId, opts = {}) {
 */
 function watchRunEvents(getClient, runId, onRun, onSettled, onFallback) {
 	const controller = new AbortController();
-	let handedOver = false;
 	const handOver = () => {
-		if (handedOver || controller.signal.aborted) return;
-		handedOver = true;
-		onFallback();
+		if (!controller.signal.aborted) onFallback();
 	};
 	/**
 	* Consume the stream. Resolves `"settled"` when the run reached a state

package/dist/use-workflow-stream.d.ts

@@ -25,7 +25,7 @@
  * earlier version of this hook took a `cut` callback and uploaded N parts into a
  * "group" that a separate call had to seal; it worked, and every piece of it was
  * something the caller had to get right. The whole of that is replaced by the store
- * publishing `size` as bytes land — which `readUpload` already clamped to — so the
+ * publishing `size` as bytes land — which `stepReadUpload` already clamped to — so the
  * run does exactly what it does over a finished file and simply waits for windows to
  * become present.
  *

package/dist/workflow-client.d.ts

@@ -4,7 +4,7 @@
  * This is the whole client half of a WORKFLOW APP: an agent whose front door is
  * a form rather than a microphone (`workflowApp()`) starts runs
  * here and watches them for the answer. It deliberately does NOT go through
- * `SessionCore` — there is no socket, no audio graph, and no session to resume.
+ * `BrowserSession` — there is no socket, no audio graph, and no session to resume.
  *
  * **The requests themselves are the SDK's now**
  * (`createWorkflowApiClient`, `@alexkroman1/aai/workflow-api`), and what is left

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexkroman1/aai-ui",
-  "version": "13.3.0",
+  "version": "14.0.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -46,7 +46,7 @@
     "use-stick-to-bottom": "^1.1.6",
     "use-sync-external-store": "^1.6.0",
     "xstate": "^5.32.6",
-    "@alexkroman1/aai": "13.3.0"
+    "@alexkroman1/aai": "14.0.0"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",

package/styles.css

@@ -85,3 +85,81 @@
   -webkit-text-fill-color: transparent;
   animation: aai-shimmer 2s infinite;
 }
+
+/*
+ * Reduced motion is honoured HERE, once, for everything this stylesheet reaches.
+ *
+ * Roughly nineteen INFINITE animations ship in an aai app and, until this block,
+ * not one of them asked: `prefers-reduced-motion` appeared zero times in the
+ * repository. `aai-pulse` on the console shell's live dot, `aai-bounce` on the
+ * thinking dots, `aai-shimmer` on every streaming tool row, Tailwind's
+ * `animate-pulse` on an indeterminate upload bar — all of them running for as
+ * long as the page is open. For a reader with a vestibular disorder that is not
+ * decoration, it is the reason they close the tab.
+ *
+ * **The universal selector is the leverage point, and it is the only thing that
+ * reaches the TEMPLATES.** Every template's `client.tsx` opens with
+ * `import "@alexkroman1/aai-ui/styles.css"`, and several then declare keyframes
+ * of their own in an inline `<style>` block: `dc-pulse`/`dc-slide-in`
+ * (dispatch-center), `rt-pulse`/`rt-slide-in` (retail), `crisisPulse`
+ * (solo-rpg), and `ic-flicker`/`ic-scanline`/`ic-pulse` (infocom-adventure,
+ * which flickers the whole viewport's opacity and sweeps a scanline across the
+ * page — the worst thing in the repo for a motion-sensitive reader). Nothing in
+ * this package knows those names, and no per-component fix could: it would have
+ * to be written again in every template, by every author who copies one, and
+ * the author who forgets leaves no trace in a diff. A universal selector does
+ * not need to know the name of the animation it is stopping. That is also what
+ * makes this the right FILE rather than merely a convenient one — the published
+ * sheet is the single artifact every client already imports, so a template opts
+ * in by existing, and one written next year opts in before it is written.
+ *
+ * Four properties, because motion arrives four ways:
+ *
+ * - `animation-duration` and `animation-iteration-count` — the keyframe half.
+ *   The count carries its own weight: cut the duration alone and an `infinite`
+ *   animation is still infinite, merely very fast, which is worse than what it
+ *   replaced.
+ * - `transition-duration` — the property-change half, which no search for
+ *   `@keyframes` would ever turn up.
+ * - `scroll-behavior` — the CSS half of scrolling: a host page or template
+ *   declaring `scroll-behavior: smooth`, and any `scrollIntoView()` /
+ *   `scrollTo()` that left the behaviour to CSS. Note what it does NOT reach.
+ *   `AutoScroll`'s `resize: "smooth"` default is a requestAnimationFrame SPRING
+ *   inside `use-stick-to-bottom` (which reads no media query of its own, and
+ *   sets `scroll-behavior: auto` inline while it writes `scrollTop` anyway), so
+ *   silencing that one is a change in `components/auto-scroll.tsx` and is still
+ *   owed. Recording the gap beats letting the next reader assume it is covered.
+ *
+ * `0.01ms` rather than `0s` on both durations is deliberate: a zero-duration
+ * animation or transition fires no `animationend`/`transitionend`, so anything
+ * awaiting one — ours or a consumer's — waits forever. Effectively instant, and
+ * still an event.
+ *
+ * `!important`, and no `@layer`, is what lets this outrank the three ways motion
+ * is actually declared here: a Tailwind utility (`animate-pulse`), a template's
+ * own `<style>` block, and the inline `style={{ animation: … }}` that
+ * `ConsoleShell` and `MessageList` write — an author `!important` beats a normal
+ * inline declaration, which is the only reason those last two are covered. A
+ * reader who asked their OS for less motion outranks all three.
+ *
+ * Biome's `noImportantStyles` warns on all four declarations and the warnings
+ * STAY. The rule's argument — that `!important` reverses the cascade — is the
+ * property being used on purpose here, this block existing precisely to outrank
+ * a declaration written closer to the element. It is not suppressed either: a
+ * lint suppression is a counted escape hatch (`pnpm check:hatches`), so
+ * silencing a warning that is really a design note would spend four of them, and
+ * `biome check .` exits 0 on warnings, so nothing is gated on it.
+ *
+ * `src/styles-motion.test.ts` asserts this block against the stylesheet SOURCE,
+ * a spec having no way to render CSS.
+ */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}