@alexkroman1/aai-ui 0.12.2 → 1.0.2

package/dist/default-client/assets/default-client-BK1ItCvw.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--container-sm:24rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-lg:.5rem;--ease-in-out:cubic-bezier(.4, 0, .2, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}html,body{margin:0;padding:0}}@layer components;@layer utilities{.static{position:static}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.m-0{margin:calc(var(--spacing) * 0)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mx-auto{margin-inline:auto}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.inline{display:inline}.inline-flex{display:inline-flex}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-2{height:calc(var(--spacing) * 2)}.h-4{height:calc(var(--spacing) * 4)}.h-8{height:calc(var(--spacing) * 8)}.h-screen{height:100vh}.max-h-64{max-height:calc(var(--spacing) * 64)}.min-h-5{min-height:calc(var(--spacing) * 5)}.w-1\.5{width:calc(var(--spacing) * 1.5)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-fit{width:fit-content}.w-full{width:100%}.max-w-130{max-width:calc(var(--spacing) * 130)}.max-w-\[min\(82\%\,64ch\)\]{max-width:min(82%,64ch)}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:calc(var(--spacing) * 0)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.cursor-pointer{cursor:pointer}.appearance-none{appearance:none}.flex-col{flex-direction:column}.items-center{align-items:center}.items-end{align-items:flex-end}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-4\.5{gap:calc(var(--spacing) * 4.5)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-y-auto{overflow-y:auto}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-x{border-inline-style:var(--tw-border-style);border-inline-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.p-2{padding:calc(var(--spacing) * 2)}.p-4{padding:calc(var(--spacing) * 4)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-12{padding-inline:calc(var(--spacing) * 12)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-10{padding-block:calc(var(--spacing) * 10)}.text-center{text-align:center}.text-left{text-align:left}.font-mono{font-family:var(--font-mono)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.text-\[13px\]{font-size:13px}.leading-4{--tw-leading:calc(var(--spacing) * 4);line-height:calc(var(--spacing) * 4)}.leading-\[1\.1\]{--tw-leading:1.1;line-height:1.1}.leading-\[130\%\]{--tw-leading:130%;line-height:130%}.leading-\[150\%\]{--tw-leading:150%;line-height:150%}.leading-none{--tw-leading:1;line-height:1}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.wrap-break-word{overflow-wrap:break-word}.whitespace-pre-wrap{white-space:pre-wrap}.capitalize{text-transform:capitalize}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.\[scrollbar-width\:none\]{scrollbar-width:none}}@keyframes aai-bounce{0%,80%,to{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}@keyframes aai-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.tool-shimmer{-webkit-text-fill-color:transparent;background:linear-gradient(90deg,currentColor 25%,#0000 50%,currentColor 75%) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;animation:2s infinite aai-shimmer}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}

package/dist/default-client/assets/playback-processor-dSA8Im99.js

@@ -0,0 +1,101 @@
+var e=new Blob([`
+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;
+
+    this.port.onmessage = (e) => {
+      const d = e.data;
+      if (d.event === 'write') {
+        this.ingestBytes(d.buffer);
+      } else if (d.event === 'interrupt') {
+        this.interrupted = true;
+      } else if (d.event === 'done') {
+        this.isDone = true;
+      }
+    };
+  }
+
+  ingestBytes(uint8) {
+    let bytes = uint8;
+
+    if (this.carry !== null) {
+      const merged = new Uint8Array(1 + bytes.length);
+      merged[0] = this.carry;
+      merged.set(bytes, 1);
+      bytes = merged;
+      this.carry = null;
+    }
+
+    if (bytes.length % 2 !== 0) {
+      this.carry = bytes[bytes.length - 1];
+      bytes = bytes.subarray(0, bytes.length - 1);
+    }
+
+    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;
+    }
+  }
+
+  process(inputs, outputs) {
+    const out = outputs[0][0];
+    if (this.interrupted) {
+      this.port.postMessage({ event: 'stop' });
+      return false;
+    }
+
+    const avail = this.writePos - this.readPos;
+
+    // Wait for jitter buffer to fill, unless done (short utterance)
+    if (!this.playing) {
+      if (avail >= this.jitterSamples || this.isDone) {
+        this.playing = true;
+      } else {
+        out.fill(0);
+        return true;
+      }
+    }
+
+    if (avail > 0) {
+      const n = Math.min(avail, out.length);
+      out.set(this.samples.subarray(this.readPos, this.readPos + n));
+      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
+    out.fill(0);
+    if (this.isDone) {
+      this.port.postMessage({ event: 'stop' });
+      return false;
+    }
+    return true;
+  }
+}
+
+registerProcessor('playback-processor', PlaybackProcessor);
+`],{type:`application/javascript`}),t=URL.createObjectURL(e);export{t as default};

package/dist/default-client/default-client.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <title>aai</title>
+    <link rel="icon" href="data:," />
+    <style>html, body { background: #101010; margin: 0; }</style>
+    <script type="module" crossorigin src="./assets/default-client-AeJhjHfj.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/default-client-BK1ItCvw.css">
+  </head>
+  <body>
+    <main id="app"></main>
+  </body>
+</html>

package/dist/default-client.d.ts

@@ -0,0 +1,2 @@
+/** @jsxImportSource react */
+import "./styles.css";

package/dist/define-client.d.ts

@@ -1,41 +1,73 @@
-import type { ComponentType } from "preact";
-import { type ClientTheme } from "./client-context.ts";
-import { type VoiceSession, type WebSocketConstructor } from "./session.ts";
-import { type SessionSignals } from "./signals.ts";
+/** @jsxImportSource react */
+import { type ComponentType } from "react";
+import { type ToolDisplayConfig } from "./components/tool-config-context.ts";
+import { type SessionCore, type WebSocketConstructor } from "./session-core.ts";
+import type { ClientTheme } from "./types.ts";
 /**
- * Options for {@link defineClient}.
+ * Base options shared by both client tiers.
  *
  * @public
  */
-export type ClientOptions = {
+type BaseOptions = {
     /** CSS selector or DOM element to render into. Defaults to `"#app"`. */
     target?: string | HTMLElement;
     /** Base URL of the AAI platform server. Derived from `location.href` by default. */
     platformUrl?: string;
-    /** Agent title shown in the header and start screen. */
-    title?: string;
     /** Theme color overrides. */
     theme?: ClientTheme;
     /** Called when the server sends a session ID. Store it for reconnection. */
-    onSessionId?: ((sessionId: string) => void) | undefined;
+    onSessionId?: (sessionId: string) => void;
     /** Session ID from a previous connection for resuming persisted state. */
-    resumeSessionId?: string | undefined;
-    /** WebSocket constructor override. Passed through to VoiceSessionOptions. */
-    WebSocket?: WebSocketConstructor | undefined;
+    resumeSessionId?: string;
+    /** WebSocket constructor override. Passed through to session options. */
+    WebSocket?: WebSocketConstructor;
 };
 /**
- * Handle returned by {@link defineClient} for cleanup.
+ * Tier 1: Config-only options. Renders the default shell (StartScreen + ChatView).
+ *
+ * @public
+ */
+type ConfigTier = BaseOptions & {
+    component?: never;
+    /** Agent name shown in the header and start screen. */
+    name?: string;
+    /** Optional sidebar component rendered alongside the chat view. */
+    sidebar?: ComponentType;
+    /** CSS width of the sidebar. Defaults to `"18rem"`. */
+    sidebarWidth?: string;
+    /** Tool display config: icon and label overrides keyed by tool name. */
+    tools?: ToolDisplayConfig;
+};
+/**
+ * Tier 2: Custom component. Renders the provided component inside the providers.
+ *
+ * @public
+ */
+type ComponentTier = BaseOptions & {
+    /** Full custom component to render instead of the default shell. */
+    component: ComponentType;
+    name?: never;
+    sidebar?: never;
+    sidebarWidth?: never;
+    tools?: never;
+};
+/**
+ * Configuration passed to {@link client}.
+ *
+ * @public
+ */
+export type ClientConfig = ConfigTier | ComponentTier;
+/**
+ * Handle returned by {@link client} for cleanup.
  *
  * Implements `Disposable` so it can be used with `using`.
  *
  * @public
  */
 export type ClientHandle = {
-    /** The underlying voice session. */
-    session: VoiceSession;
-    /** Reactive session controls for the mounted UI. */
-    signals: SessionSignals;
-    /** Unmount the UI, remove injected styles, and disconnect the session. */
+    /** The underlying session core. */
+    session: SessionCore;
+    /** Unmount the UI and disconnect the session. */
     dispose(): void;
     /** Alias for `dispose` for use with `using`. */
     [Symbol.dispose](): void;
@@ -43,15 +75,31 @@ export type ClientHandle = {
 /**
  * Define and mount a client UI for a voice agent.
  *
- * Creates a {@link VoiceSession}, wraps it in
- * {@link SessionSignals}, and renders the component
- * inside a {@link SessionProvider}.
+ * **Tier 1 (config-only):** Pass options without `component` to get the
+ * default shell (StartScreen + ChatView, optional sidebar).
+ *
+ * **Tier 2 (custom component):** Pass `component` to render a fully custom
+ * root component inside the providers.
+ *
+ * @example Tier 1
+ * ```tsx
+ * client({
+ *   name: "Pizza Ordering",
+ *   theme: { bg: "#1a1a1a", primary: "#e55" },
+ *   sidebar: OrderPanel,
+ *   tools: { add_pizza: { icon: "🍕", label: "Adding pizza" } },
+ * });
+ * ```
+ *
+ * @example Tier 2
+ * ```tsx
+ * client({ component: MyCustomApp });
+ * ```
  *
- * @param Component - The Preact component to render.
- * @param options - Client options (target element, platform URL, theme).
  * @returns A {@link ClientHandle} for cleanup.
  * @throws If the target element is not found in the DOM.
  *
  * @public
  */
-export declare function defineClient(Component: ComponentType<any>, options?: ClientOptions): ClientHandle;
+export declare function client(config: ClientConfig): ClientHandle;
+export {};

package/dist/define-client.js

@@ -1,10 +1,15 @@
-import { ClientConfigProvider } from "./client-context.js";
-import { SessionProvider, createSessionControls } from "./signals.js";
-import { t as createVoiceSession } from "./session-CWB7vmqz.js";
-import { render } from "preact";
-import { batch, signal } from "@preact/signals";
-import { jsx } from "preact/jsx-runtime";
+import { SessionProvider, ThemeProvider } from "./context.js";
+import { n as ToolConfigContext } from "./tool-call-block-CCuChsFm.js";
+import { ChatView } from "./components/chat-view.js";
+import { SidebarLayout } from "./components/sidebar-layout.js";
+import { StartScreen } from "./components/start-screen.js";
+import { createSessionCore } from "./session-core.js";
+import { createElement } from "react";
+import { jsx } from "react/jsx-runtime";
+import { flushSync } from "react-dom";
+import { createRoot } from "react-dom/client";
 //#region define-client.tsx
+/** @jsxImportSource react */
 function resolveContainer(target = "#app") {
 	if (typeof target !== "string") return target;
 	const el = document.querySelector(target);
@@ -12,57 +17,78 @@ function resolveContainer(target = "#app") {
 	return el;
 }
 /**
+* Default shell rendered in config tier.
+* Wraps StartScreen → (SidebarLayout →) ChatView.
+*/
+function DefaultShell({ name, Sidebar, sidebarWidth }) {
+	const chat = /* @__PURE__ */ jsx(ChatView, { ...name !== void 0 ? { title: name } : {} });
+	const inner = Sidebar ? /* @__PURE__ */ jsx(SidebarLayout, {
+		sidebar: /* @__PURE__ */ jsx(Sidebar, {}),
+		...sidebarWidth !== void 0 ? { sidebarWidth } : {},
+		children: chat
+	}) : chat;
+	return /* @__PURE__ */ jsx(StartScreen, {
+		...name !== void 0 ? { title: name } : {},
+		children: inner
+	});
+}
+/**
 * Define and mount a client UI for a voice agent.
 *
-* Creates a {@link VoiceSession}, wraps it in
-* {@link SessionSignals}, and renders the component
-* inside a {@link SessionProvider}.
+* **Tier 1 (config-only):** Pass options without `component` to get the
+* default shell (StartScreen + ChatView, optional sidebar).
+*
+* **Tier 2 (custom component):** Pass `component` to render a fully custom
+* root component inside the providers.
+*
+* @example Tier 1
+* ```tsx
+* client({
+*   name: "Pizza Ordering",
+*   theme: { bg: "#1a1a1a", primary: "#e55" },
+*   sidebar: OrderPanel,
+*   tools: { add_pizza: { icon: "🍕", label: "Adding pizza" } },
+* });
+* ```
+*
+* @example Tier 2
+* ```tsx
+* client({ component: MyCustomApp });
+* ```
 *
-* @param Component - The Preact component to render.
-* @param options - Client options (target element, platform URL, theme).
 * @returns A {@link ClientHandle} for cleanup.
 * @throws If the target element is not found in the DOM.
 *
 * @public
 */
-function defineClient(Component, options) {
-	const container = resolveContainer(options?.target);
-	const session = createVoiceSession({
-		platformUrl: options?.platformUrl ?? globalThis.location.origin + globalThis.location.pathname,
-		reactiveFactory: signal,
-		batch,
-		onSessionId: options?.onSessionId,
-		resumeSessionId: options?.resumeSessionId,
-		...options?.WebSocket ? { WebSocket: options.WebSocket } : {}
+function client(config) {
+	const container = resolveContainer(config.target);
+	const session = createSessionCore({
+		platformUrl: config.platformUrl ?? globalThis.location.origin + globalThis.location.pathname,
+		onSessionId: config.onSessionId,
+		resumeSessionId: config.resumeSessionId,
+		...config.WebSocket ? { WebSocket: config.WebSocket } : {}
 	});
-	const signals = createSessionControls(session);
-	const clientConfig = {
-		title: options?.title,
-		theme: options?.theme
-	};
-	if (options?.theme) {
-		const t = options.theme;
-		const el = container;
-		if (t.bg) el.style.setProperty("--color-aai-bg", t.bg);
-		if (t.primary) el.style.setProperty("--color-aai-primary", t.primary);
-		if (t.text) el.style.setProperty("--color-aai-text", t.text);
-		if (t.surface) el.style.setProperty("--color-aai-surface", t.surface);
-		if (t.border) el.style.setProperty("--color-aai-border", t.border);
+	let RootComponent;
+	if ("component" in config && config.component) RootComponent = config.component;
+	else {
+		const { name, sidebar: Sidebar, sidebarWidth } = config;
+		RootComponent = () => createElement(DefaultShell, {
+			...name !== void 0 ? { name } : {},
+			...Sidebar !== void 0 ? { Sidebar } : {},
+			...sidebarWidth !== void 0 ? { sidebarWidth } : {}
+		});
 	}
-	render(/* @__PURE__ */ jsx(ClientConfigProvider, {
-		value: clientConfig,
-		children: /* @__PURE__ */ jsx(SessionProvider, {
-			value: signals,
-			children: /* @__PURE__ */ jsx(Component, {})
-		})
-	}), container);
+	const toolConfig = "tools" in config && config.tools ? config.tools : {};
+	const root = createRoot(container);
+	flushSync(() => {
+		root.render(createElement(ToolConfigContext.Provider, { value: toolConfig }, createElement(ThemeProvider, config.theme !== void 0 ? { value: config.theme } : {}, createElement(SessionProvider, { value: session }, createElement(RootComponent)))));
+	});
 	const handle = {
 		session,
-		signals,
 		dispose() {
-			render(null, container);
-			signals.dispose();
-			session.disconnect();
+			root.unmount();
+			session[Symbol.dispose]();
 		},
 		[Symbol.dispose]() {
 			handle.dispose();
@@ -71,4 +97,4 @@ function defineClient(Component, options) {
 	return handle;
 }
 //#endregion
-export { defineClient };
+export { client };

package/dist/hooks.d.ts

@@ -0,0 +1,5 @@
+import type { ToolCallInfo } from "./types.ts";
+export declare function useToolResult<R = unknown>(toolName: string, callback: (result: R, toolCall: ToolCallInfo) => void): void;
+export declare function useToolResult(callback: (name: string, result: unknown, toolCall: ToolCallInfo) => void): void;
+export declare function useToolCallStart(toolName: string, callback: (toolCall: ToolCallInfo) => void): void;
+export declare function useToolCallStart(callback: (toolCall: ToolCallInfo) => void): void;

package/dist/hooks.js

@@ -0,0 +1,55 @@
+import { useSession } from "./context.js";
+import { useEffect, useRef } from "react";
+//#region hooks.ts
+function tryParseJSON(str) {
+	if (!str) return str;
+	try {
+		return JSON.parse(str);
+	} catch {
+		return str;
+	}
+}
+/**
+* Shared effect loop: fires `onNew` once per tool call that passes `shouldProcess`.
+* Clears seen IDs when toolCalls is empty (session reset).
+*/
+function processToolCalls(toolCalls, seen, shouldProcess, onNew) {
+	if (toolCalls.length === 0) {
+		seen.clear();
+		return;
+	}
+	for (const tc of toolCalls) {
+		if (!shouldProcess(tc)) continue;
+		if (seen.has(tc.callId)) continue;
+		seen.add(tc.callId);
+		onNew(tc);
+	}
+}
+function useToolResult(...args) {
+	const filterName = typeof args[0] === "string" ? args[0] : null;
+	const callback = typeof args[0] === "string" ? args[1] : args[0];
+	const session = useSession();
+	const seenRef = useRef(/* @__PURE__ */ new Set());
+	const callbackRef = useRef(callback);
+	callbackRef.current = callback;
+	useEffect(() => {
+		processToolCalls(session.toolCalls, seenRef.current, (tc) => tc.status === "done" && (!filterName || tc.name === filterName), (tc) => {
+			const parsed = tryParseJSON(tc.result);
+			if (filterName) callbackRef.current(parsed, tc);
+			else callbackRef.current(tc.name, parsed, tc);
+		});
+	}, [session.toolCalls, filterName]);
+}
+function useToolCallStart(...args) {
+	const filterName = typeof args[0] === "string" ? args[0] : null;
+	const callback = typeof args[0] === "string" ? args[1] : args[0];
+	const session = useSession();
+	const seenRef = useRef(/* @__PURE__ */ new Set());
+	const callbackRef = useRef(callback);
+	callbackRef.current = callback;
+	useEffect(() => {
+		processToolCalls(session.toolCalls, seenRef.current, (tc) => tc.status === "pending" && (!filterName || tc.name === filterName), (tc) => callbackRef.current(tc));
+	}, [session.toolCalls, filterName]);
+}
+//#endregion
+export { useToolCallStart, useToolResult };

package/dist/index.d.ts

@@ -1,37 +1,15 @@
-/**
- * Browser client library for AAI voice agents.
- *
- * Provides WebSocket session management, audio capture/playback,
- * and Preact UI components. For a narrower import without the Preact
- * dependency, use `@aai/ui/session`.
- *
- * @example
- * ```tsx
- * import { App, defineClient } from "@aai/ui";
- *
- * defineClient(App, { target: "#app" });
- * ```
- */
-export { App } from "./_components/app.tsx";
-export type { ButtonSize, ButtonVariant } from "./_components/button.tsx";
-export { Button } from "./_components/button.tsx";
-export { ChatView } from "./_components/chat-view.tsx";
-export { Controls } from "./_components/controls.tsx";
-export { ErrorBanner } from "./_components/error-banner.tsx";
-export { MessageBubble } from "./_components/message-bubble.tsx";
-export { MessageList } from "./_components/message-list.tsx";
-export { SidebarLayout } from "./_components/sidebar-layout.tsx";
-export { StartScreen } from "./_components/start-screen.tsx";
-export { StateIndicator } from "./_components/state-indicator.tsx";
-export { ThinkingIndicator } from "./_components/thinking-indicator.tsx";
-export { ToolCallBlock } from "./_components/tool-call-block.tsx";
-export { Transcript } from "./_components/transcript.tsx";
-export type { ClientConfig, ClientTheme } from "./client-context.ts";
-export { useClientConfig } from "./client-context.ts";
-export type { ClientHandle, ClientOptions } from "./define-client.tsx";
-export { defineClient } from "./define-client.tsx";
-export type { VoiceSession } from "./session.ts";
-export { createVoiceSession } from "./session.ts";
-export type { SessionSignals } from "./signals.ts";
-export { createSessionControls, SessionProvider, useAutoScroll, useSession, useToolCallStart, useToolResult, } from "./signals.ts";
-export type { AgentState, ChatMessage, Reactive, SessionError, SessionErrorCode, ToolCallInfo, VoiceSessionOptions, } from "./types.ts";
+export { Button } from "./components/button.tsx";
+export { ChatView } from "./components/chat-view.tsx";
+export { MessageList } from "./components/message-list.tsx";
+export { SidebarLayout } from "./components/sidebar-layout.tsx";
+export { StartScreen } from "./components/start-screen.tsx";
+export type { ToolDisplayConfig } from "./components/tool-config-context.ts";
+export { ToolConfigContext } from "./components/tool-config-context.ts";
+export type { Session } from "./context.ts";
+export { SessionProvider, ThemeProvider, useSession, useTheme } from "./context.ts";
+export type { ClientConfig, ClientHandle, } from "./define-client.tsx";
+export { client } from "./define-client.tsx";
+export { useToolCallStart, useToolResult } from "./hooks.ts";
+export type { SessionCore, SessionCoreOptions, SessionSnapshot, } from "./session-core.ts";
+export { createSessionCore } from "./session-core.ts";
+export type { AgentState, ChatMessage, ClientTheme, SessionError, SessionErrorCode, ToolCallInfo, VoiceSessionOptions, WebSocketConstructor, } from "./types.ts";

package/dist/index.js

@@ -1,18 +1,11 @@
-import { useClientConfig } from "./client-context.js";
-import { SessionProvider, createSessionControls, useAutoScroll, useSession, useToolCallStart, useToolResult } from "./signals.js";
-import { Button } from "./_components/button.js";
-import { Controls } from "./_components/controls.js";
-import { ErrorBanner } from "./_components/error-banner.js";
-import { MessageBubble } from "./_components/message-bubble.js";
-import { ThinkingIndicator } from "./_components/thinking-indicator.js";
-import { ToolCallBlock } from "./_components/tool-call-block.js";
-import { Transcript } from "./_components/transcript.js";
-import { MessageList } from "./_components/message-list.js";
-import { StateIndicator } from "./_components/state-indicator.js";
-import { ChatView } from "./_components/chat-view.js";
-import { StartScreen } from "./_components/start-screen.js";
-import { App } from "./_components/app.js";
-import { SidebarLayout } from "./_components/sidebar-layout.js";
-import { t as createVoiceSession } from "./session-CWB7vmqz.js";
-import { defineClient } from "./define-client.js";
-export { App, Button, ChatView, Controls, ErrorBanner, MessageBubble, MessageList, SessionProvider, SidebarLayout, StartScreen, StateIndicator, ThinkingIndicator, ToolCallBlock, Transcript, createSessionControls, createVoiceSession, defineClient, useAutoScroll, useClientConfig, useSession, useToolCallStart, useToolResult };
+import { SessionProvider, ThemeProvider, useSession, useTheme } from "./context.js";
+import { Button } from "./components/button.js";
+import { n as ToolConfigContext } from "./tool-call-block-CCuChsFm.js";
+import { MessageList } from "./components/message-list.js";
+import { ChatView } from "./components/chat-view.js";
+import { SidebarLayout } from "./components/sidebar-layout.js";
+import { StartScreen } from "./components/start-screen.js";
+import { createSessionCore } from "./session-core.js";
+import { client } from "./define-client.js";
+import { useToolCallStart, useToolResult } from "./hooks.js";
+export { Button, ChatView, MessageList, SessionProvider, SidebarLayout, StartScreen, ThemeProvider, ToolConfigContext, client, createSessionCore, useSession, useTheme, useToolCallStart, useToolResult };

package/dist/session-core.d.ts

@@ -0,0 +1,70 @@
+import type { AgentState, ChatMessage, SessionError, ToolCallInfo, VoiceSessionOptions } from "./types.ts";
+export type { AgentState, ChatMessage, SessionError, SessionErrorCode, ToolCallInfo, VoiceSessionOptions, WebSocketConstructor, } from "./types.ts";
+/**
+ * Immutable snapshot of the session state.
+ *
+ * Consumers (e.g. React hooks via `useSyncExternalStore`) read this to render.
+ * A new object reference is created on every state change.
+ *
+ * @public
+ */
+export type SessionSnapshot = {
+    readonly state: AgentState;
+    readonly messages: ChatMessage[];
+    readonly toolCalls: ToolCallInfo[];
+    readonly userTranscript: string | null;
+    readonly agentTranscript: string | null;
+    readonly error: SessionError | null;
+    readonly started: boolean;
+    readonly running: boolean;
+};
+/**
+ * A framework-agnostic voice session that manages WebSocket communication,
+ * audio capture/playback, and agent state transitions.
+ *
+ * Uses a subscribe/getSnapshot pattern (compatible with React's
+ * `useSyncExternalStore`). Implements `Disposable` for resource cleanup.
+ *
+ * @public
+ */
+export type SessionCore = {
+    /** Return the current immutable state snapshot. */
+    getSnapshot(): SessionSnapshot;
+    /** Subscribe to state changes. Returns an unsubscribe function. */
+    subscribe(callback: () => void): () => void;
+    /**
+     * Open a WebSocket connection to the server and begin audio capture.
+     * @param options - Optional. `signal` is an AbortSignal that, when aborted, disconnects the session.
+     */
+    connect(options?: {
+        signal?: AbortSignal;
+    }): void;
+    /** Cancel the current agent turn and discard in-flight TTS audio. */
+    cancel(): void;
+    /** Clear messages, transcript, and error state without disconnecting. */
+    resetState(): void;
+    /** Reset the session: clear state and reconnect. */
+    reset(): void;
+    /** Close the WebSocket and release all audio resources. */
+    disconnect(): void;
+    /** Start the session for the first time (sets `started` and `running`). */
+    start(): void;
+    /** Toggle between connected and disconnected states. */
+    toggle(): void;
+    /** Alias for `disconnect` for use with `using`. */
+    [Symbol.dispose](): void;
+};
+export type SessionCoreOptions = VoiceSessionOptions;
+/**
+ * Create a framework-agnostic voice session core that connects to an AAI
+ * server via WebSocket.
+ *
+ * Uses a subscribe/getSnapshot pattern for state management, compatible with
+ * React's `useSyncExternalStore` and other external store integrations.
+ *
+ * @param options - Session configuration including the platform server URL.
+ * @returns A {@link SessionCore} handle for controlling the session.
+ *
+ * @public
+ */
+export declare function createSessionCore(options: SessionCoreOptions): SessionCore;