@alexkroman1/aai-ui 1.8.2 → 1.9.0

package/dist/{tool-call-block-wby_jyoY.js → tool-call-block-7f1GTG-P.js}

@@ -1,4 +1,7 @@
 import { useTheme } from "./context.js";
+import { r as TEXT_FAINT } from "./_colors-DJUordGv.js";
+import { t as Eyebrow } from "./eyebrow-C6ZFuiz6.js";
+import { n as tryParseJSON, t as truncate } from "./_utils-5cs73OrA.js";
 import clsx from "clsx";
 import { createContext, useContext, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -22,21 +25,20 @@ function useToolConfig() {
 //#region components/tool-call-block.tsx
 /** @jsxImportSource react */
 function formatResult(result) {
-	try {
-		return JSON.stringify(JSON.parse(result), null, 2);
-	} catch {
-		return result;
-	}
+	const parsed = tryParseJSON(result);
+	return parsed === result ? result : JSON.stringify(parsed, null, 2);
 }
 /**
-* Renders a tool invocation with an optional icon/emoji, title, subtitle, and a
-* collapsible result viewer.
+* Renders a tool invocation as the design system's console row: a small
+* outlined "TOOL" chip (or the tool's configured icon), the tool name in
+* mono, a truncated args preview, and a rotating chevron that expands the
+* formatted result.
 *
 * 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
@@ -59,69 +61,69 @@ function ToolCallBlock({ toolCall, className }) {
 	const formatted = useMemo(() => toolCall.result ? formatResult(toolCall.result) : "", [toolCall.result]);
 	const subtitle = useMemo(() => {
 		const args = toolCall.args;
-		if (toolCall.name === "run_code" && args.code) {
-			const firstLine = String(args.code).split("\n")[0] ?? "";
-			return firstLine.length > 80 ? `${firstLine.slice(0, 80)}...` : firstLine;
-		}
+		if (toolCall.name === "run_code" && args.code) return truncate(String(args.code).split("\n")[0] ?? "");
 		for (const key of [
 			"query",
 			"url",
 			"question"
 		]) if (args[key]) return String(args[key]);
-		const summary = JSON.stringify(args);
-		return summary.length > 80 ? `${summary.slice(0, 80)}...` : summary;
+		return truncate(JSON.stringify(args));
 	}, [toolCall.name, toolCall.args]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("flex flex-col", className),
+		className: clsx("flex flex-col rounded-md border overflow-hidden", className),
+		style: {
+			borderColor: theme.border,
+			background: theme.bg
+		},
 		children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",
 			"aria-expanded": canExpand ? isOpen : void 0,
 			disabled: isPending,
-			className: clsx("flex items-center gap-2 px-3 py-2 rounded-aai border select-none text-left w-full", canExpand && "cursor-pointer"),
-			style: {
-				borderColor: theme.border,
-				background: "rgba(255,255,255,0.031)"
-			},
+			className: clsx("flex items-center gap-2.5 px-3.5 py-2.5 select-none text-left w-full appearance-none border-none bg-transparent", canExpand && "cursor-pointer"),
 			onClick: () => {
 				if (canExpand) setIsOpen(!isOpen);
 			},
 			children: [
-				icon && /* @__PURE__ */ jsx("span", {
+				icon ? /* @__PURE__ */ jsx("span", {
 					className: "w-4 h-4 shrink-0 text-center leading-4",
 					children: icon
+				}) : /* @__PURE__ */ jsx(Eyebrow, {
+					className: "shrink-0",
+					style: { color: TEXT_FAINT },
+					children: "Tool"
 				}),
 				/* @__PURE__ */ jsx("span", {
-					className: clsx("text-sm font-medium", isPending && "tool-shimmer"),
+					className: clsx("font-aai-mono text-[13px] font-medium", isPending && "tool-shimmer"),
 					style: { color: theme.text },
 					children: title
 				}),
 				/* @__PURE__ */ jsx("span", {
-					className: "text-sm truncate flex-1 min-w-0",
-					style: { color: "rgba(255,255,255,0.422)" },
+					className: "font-aai-mono text-[13px] truncate flex-1 min-w-0",
+					style: { color: TEXT_FAINT },
 					children: subtitle
 				}),
 				canExpand && /* @__PURE__ */ jsx("span", {
-					className: "text-xs shrink-0",
-					style: { color: "rgba(255,255,255,0.422)" },
-					children: isOpen ? "▾" : "▸"
+					className: clsx("text-[10px] shrink-0 transition-transform duration-150", isOpen && "rotate-90"),
+					style: { color: "#6F6A60" },
+					children: "▶"
 				})
 			]
 		}), isOpen && /* @__PURE__ */ jsxs("div", {
-			className: "border-x border-b rounded-b-aai max-h-64 overflow-auto",
+			className: "border-t max-h-64 overflow-auto",
 			style: {
 				borderColor: theme.border,
 				background: theme.surface
 			},
 			children: [toolCall.name === "run_code" && Boolean(toolCall.args.code) && /* @__PURE__ */ jsx("pre", {
-				className: "text-xs p-2 whitespace-pre-wrap border-b font-mono",
+				className: "font-aai-mono text-xs px-3.5 py-3 m-0 whitespace-pre-wrap wrap-break-word border-b",
 				style: {
 					color: theme.text,
 					borderColor: theme.border
 				},
 				children: String(toolCall.args.code)
 			}), formatted && /* @__PURE__ */ jsx("pre", {
-				className: "text-xs p-2 whitespace-pre-wrap",
-				style: { color: "rgba(255,255,255,0.422)" },
+				className: "font-aai-mono text-xs px-3.5 py-3 m-0 whitespace-pre-wrap wrap-break-word",
+				style: { color: "#57534B" },
 				children: formatted
 			})]
 		})]

package/dist/types.d.ts

@@ -1,6 +1,15 @@
 import type { SessionErrorCode } from "@alexkroman1/aai/protocol";
 /** Microphone buffer duration in seconds before sending to the server. */
 export declare const MIC_BUFFER_SECONDS = 0.1;
+/**
+ * Backpressure threshold for outbound mic audio. When the WebSocket's
+ * `bufferedAmount` exceeds this many bytes (~2s of 16 kHz PCM16), mic frames
+ * are dropped instead of queued — for live voice, stale audio flushed into
+ * STT on recovery is worse than a gap.
+ */
+export declare const MIC_SEND_MAX_BUFFERED_BYTES: number;
+/** Poll interval while waiting out socket backpressure during a file send. */
+export declare const FILE_SEND_BACKOFF_MS = 50;
 /**
  * Current state of the voice agent session.
  *
@@ -13,6 +22,12 @@ export type AgentState = "disconnected" | "connecting" | "ready" | "listening" |
  * @public
  */
 export type ChatMessage = {
+    /**
+     * Monotonically increasing, session-unique message id assigned at append
+     * time. Stable across snapshot updates and window slides — use it as a
+     * render key.
+     */
+    id: number;
     /** The sender of the message. */
     role: "user" | "assistant";
     /** The text content of the message. */
@@ -29,8 +44,18 @@ export type ToolCallInfo = {
     args: Record<string, unknown>;
     status: "pending" | "done";
     result?: string | undefined;
-    /** Index in the messages array where this tool call should appear. */
-    afterMessageIndex: number;
+    /**
+     * Monotonically increasing, session-unique insertion sequence number.
+     * Tool calls in a snapshot are always sorted ascending by `seq`.
+     */
+    seq: number;
+    /**
+     * `id` of the last {@link ChatMessage} present when this tool call was
+     * inserted (`-1` when there were none). The tool call renders immediately
+     * after that message; if the anchor message has slid out of the retained
+     * window, the tool call renders before all messages.
+     */
+    afterMessageId: number;
 };
 export type { SessionErrorCode } from "@alexkroman1/aai/protocol";
 /**
@@ -85,9 +110,9 @@ export type WebSocketConstructor = {
  * @public
  */
 export type ClientTheme = {
-    /** Background color. Default: `#101010`. */
+    /** Background color, also painted on `html`/`body`. Default: `#FBF8F2`. */
     bg?: string;
-    /** Primary accent color. Default: `#fab283`. */
+    /** Primary accent color. Default: `#3F2BC1`. */
     primary?: string;
     /** Main text color. */
     text?: string;

package/dist/types.js

@@ -1,5 +1,14 @@
 //#region types.ts
 /** Microphone buffer duration in seconds before sending to the server. */
 const MIC_BUFFER_SECONDS = .1;
+/**
+* Backpressure threshold for outbound mic audio. When the WebSocket's
+* `bufferedAmount` exceeds this many bytes (~2s of 16 kHz PCM16), mic frames
+* are dropped instead of queued — for live voice, stale audio flushed into
+* STT on recovery is worse than a gap.
+*/
+const MIC_SEND_MAX_BUFFERED_BYTES = 64 * 1024;
+/** Poll interval while waiting out socket backpressure during a file send. */
+const FILE_SEND_BACKOFF_MS = 50;
 //#endregion
-export { MIC_BUFFER_SECONDS };
+export { FILE_SEND_BACKOFF_MS, MIC_BUFFER_SECONDS, MIC_SEND_MAX_BUFFERED_BYTES };

package/dist/worklets/capture-processor.d.ts

@@ -1,2 +1,4 @@
+/** Raw worklet source — exported so tests can evaluate the processor directly. */
+export declare const captureProcessorSource = "\nclass CaptureProcessor extends AudioWorkletProcessor {\n  constructor(options) {\n    super();\n    this.recording = false;\n    const opts = options.processorOptions || {};\n    this.fromRate = opts.contextRate || sampleRate;\n    this.toRate = opts.sttSampleRate || sampleRate;\n    this.ratio = this.fromRate / this.toRate;\n    this.needsResample = this.fromRate !== this.toRate;\n    // Streaming-resampler state carried across process() blocks so the output\n    // clock doesn't drift and there's no discontinuity at 128-sample block\n    // boundaries. `prev` is the previous block's last input sample (used to\n    // interpolate across the boundary); `pos` is the fractional read position,\n    // in input samples, relative to an extended [prev, ...input] frame. Start\n    // at 1 so the first output is input[0] (not the bogus initial prev).\n    this.prev = 0;\n    this.pos = 1;\n    // Output buffer reused across process() calls -- the render quantum is a\n    // fixed size, so allocating per call would churn the realtime audio thread.\n    this.resampleBuf = null;\n    // Int16 accumulation buffer: flushed to the main thread as one transferred\n    // ArrayBuffer once ~bufferSeconds of output samples are batched. Sized 2x\n    // the flush target so a whole render quantum always fits before flushing.\n    this.targetSamples = Math.max(1, Math.round(this.toRate * (opts.bufferSeconds || 0.1)));\n    this.pending = new Int16Array(this.targetSamples * 2);\n    this.pendingLen = 0;\n    this.port.onmessage = (e) => {\n      if (e.data.event === 'start') this.recording = true;\n      else if (e.data.event === 'stop') {\n        // Final flush so the tail of speech isn't dropped on close.\n        this.flush();\n        this.recording = false;\n      }\n    };\n  }\n\n  resample(input) {\n    const ratio = this.ratio;\n    const n = input.length;\n    if (n === 0) return new Float32Array(0);\n    // At most ceil(n / ratio) + 1 outputs per block (pos starts in [0, ratio)).\n    const maxLen = Math.ceil(n / ratio) + 1;\n    if (this.resampleBuf === null || this.resampleBuf.length < maxLen) {\n      this.resampleBuf = new Float32Array(maxLen);\n    }\n    const out = this.resampleBuf;\n    // Extended frame: index 0 = prev (previous block's last sample),\n    // index k>=1 = input[k-1]. Interpolate at fractional positions stepping by\n    // ratio, carrying `pos` across calls to preserve the sample clock.\n    let count = 0;\n    let pos = this.pos;\n    while (pos < n) {\n      const idx = pos | 0;\n      const frac = pos - idx;\n      const a = idx === 0 ? this.prev : input[idx - 1];\n      const b = input[idx];\n      out[count++] = a + frac * (b - a);\n      pos += ratio;\n    }\n    // Shift the origin to this block's last sample for the next call.\n    this.prev = input[n - 1];\n    this.pos = pos - n;\n    return out.subarray(0, count);\n  }\n\n  // Convert Float32 -> Int16 and append to the pending batch. Writes through\n  // an Int16Array directly (assignment truncates like DataView.setInt16).\n  accumulate(samples) {\n    let buf = this.pending;\n    if (this.pendingLen + samples.length > buf.length) {\n      // Defensive: only reachable if a render quantum outproduces the 1x\n      // headroom above the flush target (never with 128-sample quanta).\n      const grown = new Int16Array((this.pendingLen + samples.length) * 2);\n      grown.set(buf.subarray(0, this.pendingLen));\n      this.pending = grown;\n      buf = grown;\n    }\n    for (let i = 0; i < samples.length; i++) {\n      const s = Math.max(-1, Math.min(1, samples[i]));\n      buf[this.pendingLen++] = s < 0 ? s * 0x8000 : s * 0x7fff;\n    }\n  }\n\n  // Post the batched samples as one transferred ArrayBuffer and reset.\n  flush() {\n    if (this.pendingLen === 0) return;\n    const buffer = this.pending.buffer.slice(0, this.pendingLen * 2);\n    this.pendingLen = 0;\n    this.port.postMessage({ event: 'chunk', buffer }, [buffer]);\n  }\n\n  process(inputs) {\n    const input = inputs[0];\n    if (!input || !input[0] || !this.recording) return true;\n\n    const samples = this.needsResample ? this.resample(input[0]) : input[0];\n    this.accumulate(samples);\n    if (this.pendingLen >= this.targetSamples) this.flush();\n    return true;\n  }\n}\n\nregisterProcessor('capture-processor', CaptureProcessor);\n";
 declare const src: string;
 export default src;

package/dist/worklets/capture-processor.js

@@ -1,5 +1,5 @@
 //#region worklets/capture-processor.ts
-const script = new Blob([`
+const CaptureProcessorWorklet = `
 class CaptureProcessor extends AudioWorkletProcessor {
   constructor(options) {
     super();
@@ -9,49 +9,104 @@ class CaptureProcessor extends AudioWorkletProcessor {
     this.toRate = opts.sttSampleRate || sampleRate;
     this.ratio = this.fromRate / this.toRate;
     this.needsResample = this.fromRate !== this.toRate;
+    // Streaming-resampler state carried across process() blocks so the output
+    // clock doesn't drift and there's no discontinuity at 128-sample block
+    // boundaries. \`prev\` is the previous block's last input sample (used to
+    // interpolate across the boundary); \`pos\` is the fractional read position,
+    // in input samples, relative to an extended [prev, ...input] frame. Start
+    // at 1 so the first output is input[0] (not the bogus initial prev).
+    this.prev = 0;
+    this.pos = 1;
+    // Output buffer reused across process() calls -- the render quantum is a
+    // fixed size, so allocating per call would churn the realtime audio thread.
+    this.resampleBuf = null;
+    // Int16 accumulation buffer: flushed to the main thread as one transferred
+    // ArrayBuffer once ~bufferSeconds of output samples are batched. Sized 2x
+    // the flush target so a whole render quantum always fits before flushing.
+    this.targetSamples = Math.max(1, Math.round(this.toRate * (opts.bufferSeconds || 0.1)));
+    this.pending = new Int16Array(this.targetSamples * 2);
+    this.pendingLen = 0;
     this.port.onmessage = (e) => {
       if (e.data.event === 'start') this.recording = true;
-      else if (e.data.event === 'stop') this.recording = false;
+      else if (e.data.event === 'stop') {
+        // Final flush so the tail of speech isn't dropped on close.
+        this.flush();
+        this.recording = false;
+      }
     };
   }
 
   resample(input) {
     const ratio = this.ratio;
-    const outLen = Math.ceil(input.length / ratio);
-    const out = new Float32Array(outLen);
-    for (let i = 0; i < outLen; i++) {
-      const srcIdx = i * ratio;
-      const idx = srcIdx | 0;
-      const frac = srcIdx - idx;
-      const a = input[idx];
-      const b = idx + 1 < input.length ? input[idx + 1] : a;
-      out[i] = a + frac * (b - a);
+    const n = input.length;
+    if (n === 0) return new Float32Array(0);
+    // At most ceil(n / ratio) + 1 outputs per block (pos starts in [0, ratio)).
+    const maxLen = Math.ceil(n / ratio) + 1;
+    if (this.resampleBuf === null || this.resampleBuf.length < maxLen) {
+      this.resampleBuf = new Float32Array(maxLen);
     }
-    return out;
+    const out = this.resampleBuf;
+    // Extended frame: index 0 = prev (previous block's last sample),
+    // index k>=1 = input[k-1]. Interpolate at fractional positions stepping by
+    // ratio, carrying \`pos\` across calls to preserve the sample clock.
+    let count = 0;
+    let pos = this.pos;
+    while (pos < n) {
+      const idx = pos | 0;
+      const frac = pos - idx;
+      const a = idx === 0 ? this.prev : input[idx - 1];
+      const b = input[idx];
+      out[count++] = a + frac * (b - a);
+      pos += ratio;
+    }
+    // Shift the origin to this block's last sample for the next call.
+    this.prev = input[n - 1];
+    this.pos = pos - n;
+    return out.subarray(0, count);
   }
 
-  process(inputs) {
-    const input = inputs[0];
-    if (!input || !input[0] || !this.recording) return true;
-
-    const raw = input[0];
-    const samples = this.needsResample ? this.resample(raw) : raw;
-
-    // Convert Float32 -> Int16
-    const buffer = new ArrayBuffer(samples.length * 2);
-    const view = new DataView(buffer);
+  // Convert Float32 -> Int16 and append to the pending batch. Writes through
+  // an Int16Array directly (assignment truncates like DataView.setInt16).
+  accumulate(samples) {
+    let buf = this.pending;
+    if (this.pendingLen + samples.length > buf.length) {
+      // Defensive: only reachable if a render quantum outproduces the 1x
+      // headroom above the flush target (never with 128-sample quanta).
+      const grown = new Int16Array((this.pendingLen + samples.length) * 2);
+      grown.set(buf.subarray(0, this.pendingLen));
+      this.pending = grown;
+      buf = grown;
+    }
     for (let i = 0; i < samples.length; i++) {
       const s = Math.max(-1, Math.min(1, samples[i]));
-      view.setInt16(i * 2, s < 0 ? s * 0x8000 : s * 0x7fff, true);
+      buf[this.pendingLen++] = s < 0 ? s * 0x8000 : s * 0x7fff;
     }
+  }
 
+  // Post the batched samples as one transferred ArrayBuffer and reset.
+  flush() {
+    if (this.pendingLen === 0) return;
+    const buffer = this.pending.buffer.slice(0, this.pendingLen * 2);
+    this.pendingLen = 0;
     this.port.postMessage({ event: 'chunk', buffer }, [buffer]);
+  }
+
+  process(inputs) {
+    const input = inputs[0];
+    if (!input || !input[0] || !this.recording) return true;
+
+    const samples = this.needsResample ? this.resample(input[0]) : input[0];
+    this.accumulate(samples);
+    if (this.pendingLen >= this.targetSamples) this.flush();
     return true;
   }
 }
 
 registerProcessor('capture-processor', CaptureProcessor);
-`], { type: "application/javascript" });
+`;
+/** Raw worklet source — exported so tests can evaluate the processor directly. */
+const captureProcessorSource = CaptureProcessorWorklet;
+const script = new Blob([CaptureProcessorWorklet], { type: "application/javascript" });
 const src = URL.createObjectURL(script);
 //#endregion
-export { src as default };
+export { captureProcessorSource, src as default };

package/dist/worklets/playback-processor.d.ts

@@ -1,2 +1,4 @@
+/** Raw worklet source — exported so tests can evaluate the processor directly. */
+export declare const playbackProcessorSource = "\nclass PlaybackProcessor extends AudioWorkletProcessor {\n  constructor(options) {\n    super();\n    const rate = options.processorOptions?.sampleRate ?? 24000;\n    // Wait for ~400ms of audio before starting.\n    // If 'done' arrives first (short utterance), start immediately.\n    this.jitterSamples = Math.floor(rate * 0.4);\n    // Float32 ring buffer \u2014 60s at the context sample rate. Allocated once for\n    // the node's lifetime; per-turn state resets via resetTurn(). writePos and\n    // readPos are absolute (monotonic) sample counts; the buffer is indexed\n    // modulo capacity so a reply longer than 60s keeps playing instead of\n    // writing past the end and going silent.\n    this.capacity = rate * 60;\n    this.samples = new Float32Array(this.capacity);\n    // Platform endianness probe: the wire format is PCM16 little-endian, so\n    // the Int16Array fast path in ingestBytes is only valid on LE hosts\n    // (every shipping browser target; the DataView path is the fallback).\n    this.littleEndian = new Uint8Array(new Uint16Array([1]).buffer)[0] === 1;\n    this.resetTurn();\n\n    this.port.onmessage = (e) => {\n      const d = e.data;\n      if (d.event === 'write') {\n        this.ingestBytes(d.buffer);\n      } else if (d.event === 'interrupt') {\n        this.interrupted = true;\n      } else if (d.event === 'done') {\n        this.isDone = true;\n      }\n    };\n  }\n\n  // Reset per-turn state so the node is reusable across replies without\n  // reallocating the sample buffer or re-instantiating the worklet.\n  resetTurn() {\n    this.interrupted = false;\n    this.isDone = false;\n    this.playing = false;\n    // Carry-over byte for split samples across chunks\n    this.carry = null;\n    this.writePos = 0;\n    this.readPos = 0;\n  }\n\n  // End the current turn: notify the host and rearm for the next reply.\n  // Must NOT return false from process() \u2014 a processor that stops is dead\n  // for good, forcing a new node (and buffer) per reply.\n  stopTurn() {\n    this.port.postMessage({ event: 'stop' });\n    this.resetTurn();\n  }\n\n  ingestBytes(uint8) {\n    let bytes = uint8;\n\n    if (this.carry !== null) {\n      const merged = new Uint8Array(1 + bytes.length);\n      merged[0] = this.carry;\n      merged.set(bytes, 1);\n      bytes = merged;\n      this.carry = null;\n    }\n\n    if (bytes.length % 2 !== 0) {\n      this.carry = bytes[bytes.length - 1];\n      bytes = bytes.subarray(0, bytes.length - 1);\n    }\n\n    if (bytes.length === 0) return;\n    const numSamples = bytes.length / 2;\n    const cap = this.capacity;\n    const samples = this.samples;\n    if (this.littleEndian && (bytes.byteOffset & 1) === 0) {\n      // Fast path: 2-byte-aligned LE bytes wrap directly as an Int16Array;\n      // copy wrap-aware in at most two runs with no per-sample DataView call\n      // or modulo. This runs on the realtime audio thread.\n      const int16 = new Int16Array(bytes.buffer, bytes.byteOffset, numSamples);\n      let src = 0;\n      let dst = this.writePos % cap;\n      while (src < numSamples) {\n        const run = Math.min(numSamples - src, cap - dst);\n        for (let j = 0; j < run; j++) {\n          samples[dst + j] = int16[src + j] / 0x8000;\n        }\n        src += run;\n        dst = 0;\n      }\n    } else {\n      // Odd byte offset (or big-endian host): fall back to per-sample reads.\n      const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.length);\n      let dst = this.writePos % cap;\n      for (let i = 0; i < numSamples; i++) {\n        samples[dst] = view.getInt16(i * 2, true) / 0x8000;\n        dst++;\n        if (dst === cap) dst = 0;\n      }\n    }\n    this.writePos += numSamples;\n    // If the producer outran the consumer by more than the buffer holds, drop\n    // the oldest unplayed audio rather than reading samples we've overwritten.\n    if (this.writePos - this.readPos > this.capacity) {\n      this.readPos = this.writePos - this.capacity;\n    }\n  }\n\n  process(inputs, outputs) {\n    const out = outputs[0][0];\n    if (this.interrupted) {\n      out.fill(0);\n      this.stopTurn();\n      return true;\n    }\n\n    const avail = this.writePos - this.readPos;\n\n    // Wait for jitter buffer to fill, unless done (short utterance)\n    if (!this.playing) {\n      if (avail >= this.jitterSamples || this.isDone) {\n        this.playing = true;\n      } else {\n        out.fill(0);\n        return true;\n      }\n    }\n\n    if (avail > 0) {\n      const n = Math.min(avail, out.length);\n      // Copy from the ring buffer, splitting across the wrap boundary.\n      const start = this.readPos % this.capacity;\n      const first = Math.min(n, this.capacity - start);\n      out.set(this.samples.subarray(start, start + first), 0);\n      if (n > first) out.set(this.samples.subarray(0, n - first), first);\n      this.readPos += n;\n      out.fill(0, n);\n      return true;\n    }\n\n    // No data: output silence, end the turn only when done\n    out.fill(0);\n    if (this.isDone) {\n      this.stopTurn();\n    }\n    return true;\n  }\n}\n\nregisterProcessor('playback-processor', PlaybackProcessor);\n";
 declare const src: string;
 export default src;

package/dist/worklets/playback-processor.js

@@ -1,24 +1,24 @@
 //#region worklets/playback-processor.ts
-const script = new Blob([`
+const PlaybackProcessorWorklet = `
 class PlaybackProcessor extends AudioWorkletProcessor {
   constructor(options) {
     super();
-    this.interrupted = false;
-    this.isDone = false;
-    this.playing = false;
     const rate = options.processorOptions?.sampleRate ?? 24000;
     // Wait for ~400ms of audio before starting.
     // If 'done' arrives first (short utterance), start immediately.
     this.jitterSamples = Math.floor(rate * 0.4);
-    // Carry-over byte for split samples across chunks
-    this.carry = null;
-    // Float32 sample buffer — 60s at the context sample rate
-    this.samples = new Float32Array(rate * 60);
-    this.writePos = 0;
-    this.readPos = 0;
-    // Report playback position every ~50ms for word-level text sync
-    this.progressInterval = Math.floor(rate * 0.05);
-    this.samplesSinceProgress = 0;
+    // Float32 ring buffer — 60s at the context sample rate. Allocated once for
+    // the node's lifetime; per-turn state resets via resetTurn(). writePos and
+    // readPos are absolute (monotonic) sample counts; the buffer is indexed
+    // modulo capacity so a reply longer than 60s keeps playing instead of
+    // writing past the end and going silent.
+    this.capacity = rate * 60;
+    this.samples = new Float32Array(this.capacity);
+    // Platform endianness probe: the wire format is PCM16 little-endian, so
+    // the Int16Array fast path in ingestBytes is only valid on LE hosts
+    // (every shipping browser target; the DataView path is the fallback).
+    this.littleEndian = new Uint8Array(new Uint16Array([1]).buffer)[0] === 1;
+    this.resetTurn();
 
     this.port.onmessage = (e) => {
       const d = e.data;
@@ -32,6 +32,26 @@ class PlaybackProcessor extends AudioWorkletProcessor {
     };
   }
 
+  // Reset per-turn state so the node is reusable across replies without
+  // reallocating the sample buffer or re-instantiating the worklet.
+  resetTurn() {
+    this.interrupted = false;
+    this.isDone = false;
+    this.playing = false;
+    // Carry-over byte for split samples across chunks
+    this.carry = null;
+    this.writePos = 0;
+    this.readPos = 0;
+  }
+
+  // End the current turn: notify the host and rearm for the next reply.
+  // Must NOT return false from process() — a processor that stops is dead
+  // for good, forcing a new node (and buffer) per reply.
+  stopTurn() {
+    this.port.postMessage({ event: 'stop' });
+    this.resetTurn();
+  }
+
   ingestBytes(uint8) {
     let bytes = uint8;
 
@@ -49,18 +69,48 @@ class PlaybackProcessor extends AudioWorkletProcessor {
     }
 
     if (bytes.length === 0) return;
-    const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.length);
     const numSamples = bytes.length / 2;
-    for (let i = 0; i < numSamples; i++) {
-      this.samples[this.writePos++] = view.getInt16(i * 2, true) / 0x8000;
+    const cap = this.capacity;
+    const samples = this.samples;
+    if (this.littleEndian && (bytes.byteOffset & 1) === 0) {
+      // Fast path: 2-byte-aligned LE bytes wrap directly as an Int16Array;
+      // copy wrap-aware in at most two runs with no per-sample DataView call
+      // or modulo. This runs on the realtime audio thread.
+      const int16 = new Int16Array(bytes.buffer, bytes.byteOffset, numSamples);
+      let src = 0;
+      let dst = this.writePos % cap;
+      while (src < numSamples) {
+        const run = Math.min(numSamples - src, cap - dst);
+        for (let j = 0; j < run; j++) {
+          samples[dst + j] = int16[src + j] / 0x8000;
+        }
+        src += run;
+        dst = 0;
+      }
+    } else {
+      // Odd byte offset (or big-endian host): fall back to per-sample reads.
+      const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.length);
+      let dst = this.writePos % cap;
+      for (let i = 0; i < numSamples; i++) {
+        samples[dst] = view.getInt16(i * 2, true) / 0x8000;
+        dst++;
+        if (dst === cap) dst = 0;
+      }
+    }
+    this.writePos += numSamples;
+    // If the producer outran the consumer by more than the buffer holds, drop
+    // the oldest unplayed audio rather than reading samples we've overwritten.
+    if (this.writePos - this.readPos > this.capacity) {
+      this.readPos = this.writePos - this.capacity;
     }
   }
 
   process(inputs, outputs) {
     const out = outputs[0][0];
     if (this.interrupted) {
-      this.port.postMessage({ event: 'stop' });
-      return false;
+      out.fill(0);
+      this.stopTurn();
+      return true;
     }
 
     const avail = this.writePos - this.readPos;
@@ -77,29 +127,30 @@ class PlaybackProcessor extends AudioWorkletProcessor {
 
     if (avail > 0) {
       const n = Math.min(avail, out.length);
-      out.set(this.samples.subarray(this.readPos, this.readPos + n));
+      // Copy from the ring buffer, splitting across the wrap boundary.
+      const start = this.readPos % this.capacity;
+      const first = Math.min(n, this.capacity - start);
+      out.set(this.samples.subarray(start, start + first), 0);
+      if (n > first) out.set(this.samples.subarray(0, n - first), first);
       this.readPos += n;
-      this.samplesSinceProgress += n;
-      if (this.samplesSinceProgress >= this.progressInterval) {
-        this.port.postMessage({ event: 'progress', readPos: this.readPos });
-        this.samplesSinceProgress = 0;
-      }
       out.fill(0, n);
       return true;
     }
 
-    // No data: output silence, stop only when done
+    // No data: output silence, end the turn only when done
     out.fill(0);
     if (this.isDone) {
-      this.port.postMessage({ event: 'stop' });
-      return false;
+      this.stopTurn();
     }
     return true;
   }
 }
 
 registerProcessor('playback-processor', PlaybackProcessor);
-`], { type: "application/javascript" });
+`;
+/** Raw worklet source — exported so tests can evaluate the processor directly. */
+const playbackProcessorSource = PlaybackProcessorWorklet;
+const script = new Blob([PlaybackProcessorWorklet], { type: "application/javascript" });
 const src = URL.createObjectURL(script);
 //#endregion
-export { src as default };
+export { src as default, playbackProcessorSource };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexkroman1/aai-ui",
-  "version": "1.8.2",
+  "version": "1.9.0",
   "type": "module",
   "files": [
     "dist",
@@ -18,12 +18,12 @@
   },
   "dependencies": {
     "clsx": "^2.1.1",
-    "@alexkroman1/aai": "1.8.2"
+    "@alexkroman1/aai": "1.9.0"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "tailwindcss": "^4.2.1"
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "tailwindcss": "^4.3.2"
   },
   "peerDependenciesMeta": {
     "tailwindcss": {
@@ -31,19 +31,19 @@
     }
   },
   "devDependencies": {
-    "@tailwindcss/vite": "^4.2.1",
-    "@testing-library/dom": "^10.0.0",
-    "@testing-library/react": "^16.3.0",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "@vitejs/plugin-react": "^6.0.1",
-    "jsdom": "^29.0.2",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "tsdown": "^0.21.7",
-    "tsx": "^4.21.0",
-    "vite": "^8.0.8",
-    "vitest": "^4.1.3"
+    "@tailwindcss/vite": "^4.3.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.4",
+    "jsdom": "^29.1.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "tsdown": "^0.22.13",
+    "tsx": "^4.23.1",
+    "vite": "^8.1.5",
+    "vitest": "^4.1.10"
   },
   "engines": {
     "node": ">=24"

package/styles.css

@@ -3,6 +3,24 @@
 @source "./";
 @source "../dist/ui/";
 
+/*
+ * AssemblyAI design system ("website refresh") tokens.
+ * - font-aai: Monument Grotesk when the host page loads it, warm system
+ *   grotesque otherwise (the package ships no font binaries).
+ * - font-aai-serif: editorial serif for headings (Source Serif 4 stand-in,
+ *   graceful Georgia-class fallbacks).
+ * - font-aai-mono: JetBrains Mono stand-in for code/tool rows.
+ * - radius-aai: the refresh's squared-off 4px control radius.
+ */
+@theme {
+  --font-aai:
+    "Monument Grotesk", "ABC Monument Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-aai-serif:
+    "Source Serif 4", "Source Serif Pro", Charter, "Iowan Old Style", Georgia, serif;
+  --font-aai-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --radius-aai: 4px;
+}
+
 @layer base {
   html,
   body {
@@ -11,6 +29,18 @@
   }
 }
 
+@keyframes aai-pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.45;
+    transform: scale(0.82);
+  }
+}
+
 @keyframes aai-bounce {
   0%,
   80%,