@hanzo/rooms 0.1.2 → 0.1.4

package/dist/cast.js

@@ -24,30 +24,30 @@ export const CAST = {
     //
     // Dev wears its own memoji (black ground baked in, so it fills the disc and
     // needs no rim colour); hanzo coder is that same face under the house name.
-    dev: { portrait: '/agents/dev.png', voice: 'ash' },
-    des: { portrait: '/agents/des.png', ground: '#74569F', voice: 'echo' },
-    vi: { portrait: '/agents/vi.png', ground: '#41649F', voice: 'sage' },
-    antje: { portrait: '/agents/antje.jpg', voice: 'nova' },
-    zach: { portrait: '/agents/zach.jpg', voice: 'onyx' },
-    feynman: { portrait: '/agents/feynman.png', ground: '#9C7C4F', voice: 'fable' },
-    einstein: { portrait: '/agents/einstein.png', ground: '#7D6450', voice: 'verse' },
-    nora: { portrait: '/agents/nora.png', voice: 'shimmer' },
-    creative: { portrait: '/agents/creative.png', voice: 'ballad' },
-    maya: { portrait: '/agents/maya.png', voice: 'coral' },
-    leo: { portrait: '/agents/leo.png', voice: 'alloy' },
+    dev: { portrait: '/agents/dev.png', voice: 'am_michael' },
+    des: { portrait: '/agents/des.png', ground: '#74569F', voice: 'af_bella' },
+    vi: { portrait: '/agents/vi.png', ground: '#41649F', voice: 'am_fenrir' },
+    antje: { portrait: '/agents/antje.jpg', voice: 'af_nova' },
+    zach: { portrait: '/agents/zach.jpg', voice: 'am_onyx' },
+    feynman: { portrait: '/agents/feynman.png', ground: '#9C7C4F', voice: 'am_puck' },
+    einstein: { portrait: '/agents/einstein.png', ground: '#7D6450', voice: 'bm_george' },
+    nora: { portrait: '/agents/nora.png', voice: 'af_heart' },
+    creative: { portrait: '/agents/creative.png', voice: 'bm_fable' },
+    maya: { portrait: '/agents/maya.png', voice: 'bf_emma' },
+    leo: { portrait: '/agents/leo.png', voice: 'am_liam' },
     // THE HOUSE AGENTS, UNDER THE NAMES A READER SEES. Every entry above is keyed
     // by the character; these are keyed by the part.
-    'hanzo coder': { portrait: '/agents/dev.png', voice: 'ash' },
-    'hanzo researcher': { portrait: '/agents/feynman.png', voice: 'fable' },
-    'hanzo designer': { portrait: '/agents/des.png', voice: 'echo' },
-    'hanzo devops': { voice: 'sage' },
-    'hanzo quant': { voice: 'onyx' },
-    'hanzo copywriter': { portrait: '/agents/creative.png', voice: 'ballad' },
-    'hanzo legal & compliance': { portrait: '/agents/einstein.png', voice: 'verse' },
-    'hanzo executive assistant': { portrait: '/agents/maya.png', voice: 'coral' },
-    'hanzo architect': { voice: 'verse' },
-    'hanzo vision': { voice: 'ballad' },
-    'hanzo support': { portrait: '/agents/nora.png', voice: 'shimmer' },
+    'hanzo coder': { portrait: '/agents/dev.png', voice: 'am_michael' },
+    'hanzo researcher': { portrait: '/agents/feynman.png', voice: 'am_puck' },
+    'hanzo designer': { portrait: '/agents/des.png', voice: 'af_bella' },
+    'hanzo devops': { voice: 'am_fenrir' },
+    'hanzo quant': { voice: 'am_onyx' },
+    'hanzo copywriter': { portrait: '/agents/creative.png', voice: 'bm_fable' },
+    'hanzo legal & compliance': { portrait: '/agents/einstein.png', voice: 'bm_george' },
+    'hanzo executive assistant': { portrait: '/agents/maya.png', voice: 'bf_emma' },
+    'hanzo architect': { voice: 'bm_george' },
+    'hanzo vision': { voice: 'bm_fable' },
+    'hanzo support': { portrait: '/agents/nora.png', voice: 'af_heart' },
 };
 /** The role for an agent name, or undefined for one nobody cast. */
 export const roleOf = (name) => CAST[name?.toLowerCase() ?? ''];
@@ -132,22 +132,21 @@ export function speakers(text, names) {
     }
     return out.map((one) => ({ ...one, text: one.text.trim() })).filter((one) => one.text || one.who);
 }
+/**
+ * Every American and British voice the speech service reads in, which is the
+ * pool an agent nobody cast is given a voice from. `am_santa` is left out: it
+ * is a character voice, not a reader.
+ */
 export const VOICES = [
-    'ash',
-    'echo',
-    'sage',
-    'nova',
-    'onyx',
-    'fable',
-    'shimmer',
-    'alloy',
-    'verse',
-    'ballad',
-    'coral',
+    'af_alloy', 'af_aoede', 'af_bella', 'af_heart', 'af_jessica', 'af_kore', 'af_nicole', 'af_nova', 'af_river', 'af_sarah', 'af_sky',
+    'am_adam', 'am_echo', 'am_eric', 'am_fenrir', 'am_liam', 'am_michael', 'am_onyx', 'am_puck',
+    'bf_alice', 'bf_emma', 'bf_isabella', 'bf_lily',
+    'bm_daniel', 'bm_fable', 'bm_george', 'bm_lewis',
 ];
+/** A voice for a name nobody cast: the same name always gets the same one. */
 export function fallbackVoice(name) {
     if (!name)
-        return VOICES[0];
+        return 'af_heart';
     let hash = 0;
     for (let i = 0; i < name.length; i++) {
         hash = (hash << 5) - hash + name.charCodeAt(i);
@@ -157,22 +156,13 @@ export function fallbackVoice(name) {
 }
 /** The voice to read a character's replies in. Always returns a valid voice. */
 export const voiceOf = (name) => roleOf(name)?.voice || fallbackVoice(name);
-export const VOICE_PROFILES = {
-    ash: { voice: 'ash', pitch: 1.0, rate: 1.0, description: 'Clear, direct, technical', gender: 'male' },
-    echo: { voice: 'echo', pitch: 1.1, rate: 1.05, description: 'Adaptive, creative, resonant', gender: 'female' },
-    sage: { voice: 'sage', pitch: 0.95, rate: 1.05, description: 'Authoritative, calm, systems-minded', gender: 'male' },
-    nova: { voice: 'nova', pitch: 1.1, rate: 1.0, description: 'Energetic, articulate, engaging', gender: 'female' },
-    onyx: { voice: 'onyx', pitch: 0.85, rate: 1.0, description: 'Deep, measured, quantitative', gender: 'male' },
-    fable: { voice: 'fable', pitch: 1.05, rate: 1.12, description: 'Warm, enthusiastic, pedagogical', gender: 'male' },
-    shimmer: { voice: 'shimmer', pitch: 1.1, rate: 0.98, description: 'Precise, professional, clear', gender: 'female' },
-    alloy: { voice: 'alloy', pitch: 0.95, rate: 1.05, description: 'Visionary, forward-leaning, focused', gender: 'male' },
-    verse: { voice: 'verse', pitch: 0.9, rate: 0.95, description: 'Intentional, iconic, design-first', gender: 'male' },
-    ballad: { voice: 'ballad', pitch: 0.92, rate: 1.0, description: 'Thoughtful, deep, expansive', gender: 'male' },
-    coral: { voice: 'coral', pitch: 1.15, rate: 1.05, description: 'Friendly, supportive, organized', gender: 'female' },
-};
 export function voiceProfileOf(name) {
-    const v = voiceOf(name);
-    return VOICE_PROFILES[v] || VOICE_PROFILES.ash;
+    const voice = voiceOf(name);
+    return {
+        voice,
+        gender: voice[1] === 'm' ? 'male' : 'female',
+        accent: voice[0] === 'b' ? 'british' : 'american',
+    };
 }
 /** Initials, for anyone with no likeness. Two at most: a disc this size holds
  *  two letters and turns three into a smudge. */

package/dist/crew.js

@@ -98,11 +98,11 @@ export function Crew({ to } = {}) {
         if (here !== to)
             router.push(to);
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(XStack, { items: "flex-start", flexWrap: "nowrap", overflowX: "auto", gap: "$2.5", px: "$4", py: "$3", width: "100%", maxW: 820, mx: "auto", "data-slot": "crew", ...bare, role: "group", "aria-label": "Agents", children: [_jsx(Box, { render: "button", onClick: () => setHiring(true), "aria-label": "New agent", "aria-haspopup": "dialog", shrink: 0, children: _jsxs(YStack, { items: "center", gap: "$1.5", width: 68, children: [_jsx(YStack, { width: DISC, height: DISC, rounded: DISC / 2, borderWidth: 1.5, borderStyle: "dashed", borderColor: "$soft", items: "center", justify: "center", hoverStyle: { borderColor: '$ink', bg: '$raised' }, children: _jsx(Plus, { size: 18, "aria-hidden": true }) }), _jsx(Text, { fontSize: "$1", color: "$soft", numberOfLines: 1, children: "New" })] }) }), ordered(agents).map((one) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(XStack, { items: "flex-start", flexWrap: "nowrap", overflowX: "auto", overflowY: "hidden", gap: "$2.5", px: "$4", py: "$3", width: "100%", maxW: 820, mx: "auto", "data-slot": "crew", ...bare, role: "group", "aria-label": "Agents", children: [ordered(agents).map((one) => {
                         const name = called(one.name);
                         const on = room.some((there) => there.toLowerCase() === one.name.toLowerCase());
                         return (_jsx(Box, { render: "button", onClick: () => talk(name), "aria-pressed": on, "aria-label": `Chat with ${name}`, title: to ? `Chat with ${name}` : on ? `Remove ${name} from this chat` : `Add ${name} to this chat`, shrink: 0, children: _jsxs(YStack, { items: "center", gap: "$1.5", width: 68, children: [_jsxs(YStack, { position: "relative", rounded: DISC / 2 + 2, p: 2, borderWidth: 1.5, borderColor: on ? '$ink' : 'transparent', hoverStyle: { borderColor: on ? '$ink' : '$borderColor' }, children: [_jsx(Face, { src: one.avatar, emoji: one.emoji, name: one.name, size: DISC }), on ? (_jsx(YStack, { "aria-hidden": true, position: "absolute", b: -2, r: -2, width: 18, height: 18, rounded: 9, bg: "$ink", borderWidth: 2, borderColor: "$background", items: "center", justify: "center", children: _jsx(Check, { size: 10, strokeWidth: 3, color: "var(--background)" }) })) : null] }), _jsx(Text, { fontSize: "$1", color: on ? '$ink' : '$soft', numberOfLines: 1, maxW: 68, children: name })] }) }, one.id || one.name));
-                    })] }), hiring ? _jsx(Hire, { onClose: () => setHiring(false), onMade: talk }) : null] }));
+                    }), _jsx(Box, { render: "button", onClick: () => setHiring(true), "aria-label": "New agent", "aria-haspopup": "dialog", shrink: 0, children: _jsxs(YStack, { items: "center", gap: "$1.5", width: 68, children: [_jsx(YStack, { width: DISC, height: DISC, rounded: DISC / 2, borderWidth: 1.5, borderStyle: "dashed", borderColor: "$soft", items: "center", justify: "center", hoverStyle: { borderColor: '$ink', bg: '$raised' }, children: _jsx(Plus, { size: 18, "aria-hidden": true }) }), _jsx(Text, { fontSize: "$1", color: "$soft", numberOfLines: 1, children: "New" })] }) })] }), hiring ? _jsx(Hire, { onClose: () => setHiring(false), onMade: talk }) : null] }));
 }
 /** The agents API's name rule (cloud apps/agents `nameRE`), checked before the request. */
 const NAME = /^[A-Za-z0-9][A-Za-z0-9._-]{0,63}$/;

package/dist/ground.d.ts

@@ -2,8 +2,10 @@
  * The ground the workspace's cards stand on, and how each card is cut.
  *
  * A PANE is a card floating on the ground, cut by the `--pane-*` tokens
- * (app/globals.css): a corner, an edge, the lens behind it, and the second
- * paper rung's lit edge and drop. The fill is the caller's rung: `--pane-fill`
+ * (@hanzo/design elevation.css): a corner, an edge, the lens behind it, and the
+ * first paper rung's lit edge and drop — the second's 15px drop and the floor's
+ * strong glass read as a gradient through a translucent pane, so both stay one
+ * rung down. The fill is the caller's rung: `--pane-fill`
  * in the app's frame, `sheet(1)`/`sheet(2)` where a pane lies in a room.
  *
  * The drop is a prop and not `sheet(2)`'s `elevation-2` class, whose shadow is
@@ -16,7 +18,7 @@ export declare const pane: (fill?: string) => {
     readonly borderWidth: 1;
     readonly borderColor: 'var(--pane-edge)';
     readonly backdropFilter: 'var(--pane-blur)';
-    readonly boxShadow: 'var(--shadow-sheet-2)';
+    readonly boxShadow: 'var(--shadow-sheet-1)';
 };
 /**
  * THE FLOOR under the app's frame (app/_web.tsx, components/settings/Frame.tsx):
@@ -26,7 +28,7 @@ export declare const pane: (fill?: string) => {
  */
 export declare const floor: {
     readonly backgroundColor: 'var(--pane-floor)';
-    readonly backgroundImage: 'linear-gradient(to bottom, var(--glass-strong), transparent), var(--pane-ground)';
+    readonly backgroundImage: 'linear-gradient(to bottom, var(--glass), transparent), var(--pane-ground)';
     readonly backgroundSize: '100% 70%, auto';
     readonly backgroundRepeat: 'no-repeat';
 };

package/dist/ground.js

@@ -2,8 +2,10 @@
  * The ground the workspace's cards stand on, and how each card is cut.
  *
  * A PANE is a card floating on the ground, cut by the `--pane-*` tokens
- * (app/globals.css): a corner, an edge, the lens behind it, and the second
- * paper rung's lit edge and drop. The fill is the caller's rung: `--pane-fill`
+ * (@hanzo/design elevation.css): a corner, an edge, the lens behind it, and the
+ * first paper rung's lit edge and drop — the second's 15px drop and the floor's
+ * strong glass read as a gradient through a translucent pane, so both stay one
+ * rung down. The fill is the caller's rung: `--pane-fill`
  * in the app's frame, `sheet(1)`/`sheet(2)` where a pane lies in a room.
  *
  * The drop is a prop and not `sheet(2)`'s `elevation-2` class, whose shadow is
@@ -16,7 +18,7 @@ export const pane = (fill = 'var(--pane-fill)') => ({
     borderWidth: 1,
     borderColor: 'var(--pane-edge)',
     backdropFilter: 'var(--pane-blur)',
-    boxShadow: 'var(--shadow-sheet-2)',
+    boxShadow: 'var(--shadow-sheet-1)',
 });
 /**
  * THE FLOOR under the app's frame (app/_web.tsx, components/settings/Frame.tsx):
@@ -26,7 +28,7 @@ export const pane = (fill = 'var(--pane-fill)') => ({
  */
 export const floor = {
     backgroundColor: 'var(--pane-floor)',
-    backgroundImage: 'linear-gradient(to bottom, var(--glass-strong), transparent), var(--pane-ground)',
+    backgroundImage: 'linear-gradient(to bottom, var(--glass), transparent), var(--pane-ground)',
     backgroundSize: '100% 70%, auto',
     backgroundRepeat: 'no-repeat',
 };

package/dist/lib/attach.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Files that go with a chat message.
+ *
+ * @hanzo/ai's `send(text, images)` carries a picture as an `image_url` part the
+ * model reads, and nothing else rides that wire, so a file goes one of two
+ * ways: an image as a `data:` URI beside the words, a text file as its own
+ * words after the message, fenced under its name. Any other kind is refused by
+ * name, before anything is sent.
+ */
+import type { MessagePart } from '@hanzo/ui/chat';
+/** A file held for the next message. */
+export interface Held {
+    id: string;
+    name: string;
+    kind: 'image' | 'text';
+    /** A `data:` URI for an image, the words for a text file. */
+    data: string;
+    size: number;
+}
+export declare const IMAGE_MAX: number;
+export declare const TEXT_MAX: number;
+/** Which way a file goes with a message, or null when it cannot go. */
+export declare function kindOf(file: {
+    name: string;
+    type: string;
+}): Held['kind'] | null;
+/** A file read and held, or the sentence that says why it cannot go. */
+export declare function hold(file: File): Promise<Held | string>;
+/**
+ * The message as sent: the words, then each text file fenced under its name.
+ * With no words and no text file, the images' names, so the turn says what it
+ * carries.
+ */
+export declare function compose(text: string, files: readonly Held[]): string;
+/** The images of a message, as the URIs @hanzo/ai's `send` takes. */
+export declare const images: (files: readonly Held[]) => string[];
+/** A wire turn's parts — text and `image_url` — as the parts `@hanzo/ui/chat` draws. */
+export declare function partsOf(content: readonly unknown[]): MessagePart[];

package/dist/lib/attach.js

@@ -0,0 +1,82 @@
+/**
+ * Files that go with a chat message.
+ *
+ * @hanzo/ai's `send(text, images)` carries a picture as an `image_url` part the
+ * model reads, and nothing else rides that wire, so a file goes one of two
+ * ways: an image as a `data:` URI beside the words, a text file as its own
+ * words after the message, fenced under its name. Any other kind is refused by
+ * name, before anything is sent.
+ */
+export const IMAGE_MAX = 8 * 1024 * 1024;
+export const TEXT_MAX = 256 * 1024;
+const TEXT_TYPE = /^(text\/|application\/(json|ld\+json|xml|x-yaml|yaml|toml|javascript|typescript|x-sh|sql|x-tex))/;
+const TEXT_NAME = /\.(md|mdx|txt|csv|tsv|json|jsonl|ya?ml|toml|xml|html?|css|scss|[cm]?[jt]sx?|py|go|rs|rb|java|kt|swift|c|cc|cpp|h|hpp|cs|php|sh|bash|zsh|sql|ini|env|log|tex|proto|graphql)$/i;
+/** Which way a file goes with a message, or null when it cannot go. */
+export function kindOf(file) {
+    if (file.type.startsWith('image/'))
+        return 'image';
+    if (TEXT_TYPE.test(file.type) || TEXT_NAME.test(file.name))
+        return 'text';
+    return null;
+}
+function read(file, as) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(String(reader.result ?? ''));
+        reader.onerror = () => reject(reader.error ?? new Error(`${file.name} could not be read.`));
+        if (as === 'url')
+            reader.readAsDataURL(file);
+        else
+            reader.readAsText(file);
+    });
+}
+/** A file read and held, or the sentence that says why it cannot go. */
+export async function hold(file) {
+    const kind = kindOf(file);
+    if (!kind)
+        return `${file.name}: only images and text files go with a message.`;
+    const max = kind === 'image' ? IMAGE_MAX : TEXT_MAX;
+    if (file.size > max)
+        return `${file.name} is larger than ${kind === 'image' ? '8 MB' : '256 KB'}.`;
+    try {
+        const data = await read(file, kind === 'image' ? 'url' : 'text');
+        return { id: crypto.randomUUID(), name: file.name, kind, data, size: file.size };
+    }
+    catch {
+        return `${file.name} could not be read.`;
+    }
+}
+/** A fence longer than any run of backticks inside the words, so they cannot close it. */
+function fence(words) {
+    const longest = Math.max(0, ...(words.match(/`+/g) ?? []).map((run) => run.length));
+    return '`'.repeat(Math.max(3, longest + 1));
+}
+/**
+ * The message as sent: the words, then each text file fenced under its name.
+ * With no words and no text file, the images' names, so the turn says what it
+ * carries.
+ */
+export function compose(text, files) {
+    const blocks = files
+        .filter((f) => f.kind === 'text')
+        .map((f) => {
+        const f3 = fence(f.data);
+        return `${f.name}\n${f3}\n${f.data.replace(/\n$/, '')}\n${f3}`;
+    });
+    const out = [text.trim(), ...blocks].filter(Boolean).join('\n\n');
+    return out || files.map((f) => f.name).join(', ');
+}
+/** The images of a message, as the URIs @hanzo/ai's `send` takes. */
+export const images = (files) => files.filter((f) => f.kind === 'image').map((f) => f.data);
+/** A wire turn's parts — text and `image_url` — as the parts `@hanzo/ui/chat` draws. */
+export function partsOf(content) {
+    const out = [];
+    for (const one of content) {
+        const part = one;
+        if (part?.type === 'text' && part.text)
+            out.push({ type: 'text', text: part.text });
+        else if (part?.type === 'image_url' && part.image_url?.url)
+            out.push({ type: 'image', url: part.image_url.url, alt: 'Attached image' });
+    }
+    return out;
+}

package/dist/lib/limits.d.ts

@@ -47,6 +47,15 @@ export declare const spendShown: ({ limits, answered }: {
 export declare const left: (s: Span) => number;
 /** Whether a model is a Hanzo SKU — an Enso or Zen id — the only models a consumer surface offers. */
 export declare const sku: (id: string) => boolean;
+/**
+ * Whether a model can answer a chat turn: it names no outputs, or names text
+ * among them. `zen-scribe` (a transcript) and `zen-voice-mini` (audio) are
+ * Zen ids the catalog lists, and neither answers a question.
+ */
+export declare const chats: (model: {
+    id: string;
+    outputs?: unknown;
+}) => boolean;
 /** A reset as a clock reads it in this browser — "17:00" — or '' for none. */
 export declare function clock(iso: string | null | undefined): string;
 /** A period's end as a sentence states it — "Oct 30, 2026" — or '' for none. Periods end on UTC days. */

package/dist/lib/limits.js

@@ -102,6 +102,12 @@ export const spendShown = ({ limits, answered }) => answered && !limits?.plan;
 export const left = (s) => 100 - s.percent;
 /** Whether a model is a Hanzo SKU — an Enso or Zen id — the only models a consumer surface offers. */
 export const sku = (id) => /^(hanzo\/)?(enso|zen)/i.test(id);
+/**
+ * Whether a model can answer a chat turn: it names no outputs, or names text
+ * among them. `zen-scribe` (a transcript) and `zen-voice-mini` (audio) are
+ * Zen ids the catalog lists, and neither answers a question.
+ */
+export const chats = (model) => !Array.isArray(model.outputs) || model.outputs.includes('text');
 /** A reset as a clock reads it in this browser — "17:00" — or '' for none. */
 export function clock(iso) {
     const t = iso ? Date.parse(iso) : NaN;

package/dist/speech.d.ts

@@ -1,16 +1,37 @@
 import React from 'react';
+import { type Refusal } from '@hanzo/voice';
+import { type VoiceProfile } from './cast.js';
 /** Strips code blocks, links, headers, and markdown markup for natural audio speech. */
 export declare function cleanForSpeech(raw: string): string;
+/**
+ * The browser voice that reads when the platform refuses: English, the cast
+ * voice's accent where this browser has it, its register where a name says so.
+ * Read per sentence, because the browser loads its voice list asynchronously.
+ */
+export declare function standIn({ gender, accent }: VoiceProfile, voices: {
+    name: string;
+    lang: string;
+}[]): string | undefined;
 export declare function stopAgentSpeech(): void;
 export interface SpeakOptions {
     agent?: string;
+    /** The reader's IAM bearer (`useIamToken`). Without one the platform refuses
+     *  and the browser reads, which is reported through `onRefusal`. */
+    token?: string | null;
+    /** Speaking began. Fires at once: the request for the audio is part of it. */
     onStart?: () => void;
+    /** Speaking stopped, for any reason: played out, stopped, or replaced. */
     onEnd?: () => void;
     onError?: (err: unknown) => void;
+    /** The platform refused, and whether the browser stood in. */
+    onRefusal?: (refusal: Refusal) => void;
 }
 /**
- * Speak text in the assigned voice of an agent.
+ * Speak text in the assigned voice of an agent, through the platform.
  * Returns a cancel function.
+ *
+ * Call it from the click that asks for it: the player is made inside that
+ * gesture, which is what lets Safari play the reply when it arrives.
  */
 export declare function speakAgent(text: string, options?: SpeakOptions): () => void;
 /**
@@ -19,6 +40,7 @@ export declare function speakAgent(text: string, options?: SpeakOptions): () =>
 export declare function useAgentSpeech(defaultAgent?: string): {
     speaking: boolean;
     currentText: string;
+    refusal: Refusal;
     speak: (text: string, agentName?: string) => void;
     stop: () => void;
     toggle: (text: string, agentName?: string) => void;

package/dist/speech.js

@@ -1,11 +1,15 @@
 'use client';
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Agent Speech & Voice Synthesis
+// Agent Speech
 //
 // Every agent in the Hanzo ecosystem has an assigned voice (`voiceOf(name)` from
-// `cast.tsx`). This module provides speech synthesis for agents across Chat,
-// Talk channels, and Meet video calls:
-// - Direct browser SpeechSynthesis with agent-tailored pitch, rate, and voice matching
+// `cast.tsx`), and the platform reads it: `/v1/audio/speech` through
+// @hanzo/voice's `speech()` transport and `mouth()`, in that voice. The
+// browser's own speechSynthesis reads only when the platform refuses, in a
+// voice of the same register and accent, and the refusal is reported rather
+// than passed off as the platform's voice.
+//
+// - The Listen button on a message, the Meet speaker test and its briefing
 // - Audio wave visualization during playback
 // - Clean cancellation and state management
 // - Text normalization (strips code fences, markdown syntax so speech sounds natural)
@@ -13,7 +17,10 @@ import { useEffect, useRef, useState, useCallback } from 'react';
 import { Volume2, Square } from 'lucide-react';
 import { View, XStack } from '@hanzo/gui';
 import { Button } from '@hanzo/ui';
+import { useIamToken } from '@hanzo/iam/react';
+import { mouth, speech, REFUSED } from '@hanzo/voice';
 import { GOOD } from './lib/mix.js';
+import { base } from './lib/ai.js';
 import { voiceOf, voiceProfileOf } from './cast.js';
 /** Strips code blocks, links, headers, and markdown markup for natural audio speech. */
 export function cleanForSpeech(raw) {
@@ -41,24 +48,41 @@ export function cleanForSpeech(raw) {
         .replace(/\s+/g, ' ')
         .trim();
 }
-/** Currently active speech synthesis utterance tracker. */
-let activeUtterance = null;
+/** Browser voice names by register, for the stand-in. Word-bounded: "Female" holds "male". */
+const REGISTER = {
+    female: /\b(female|samantha|victoria|karen|zira|serena|moira|tessa)\b/i,
+    male: /\b(male|daniel|alex|fred|david|arthur|oliver)\b/i,
+};
+/**
+ * The browser voice that reads when the platform refuses: English, the cast
+ * voice's accent where this browser has it, its register where a name says so.
+ * Read per sentence, because the browser loads its voice list asynchronously.
+ */
+export function standIn({ gender, accent }, voices) {
+    const english = voices.filter((v) => v.lang.toLowerCase().startsWith('en'));
+    const local = english.filter((v) => v.lang.toLowerCase().replace('_', '-') === (accent === 'british' ? 'en-gb' : 'en-us'));
+    const pick = (list) => list.find((v) => REGISTER[gender].test(v.name));
+    return (pick(local) ?? pick(english) ?? local[0] ?? english[0] ?? voices[0])?.name;
+}
+/** The reply being read aloud on this page. One at a time: a new one stops the last. */
+let active = null;
 const activeListeners = new Set();
+const notify = () => {
+    for (const listener of activeListeners)
+        listener();
+};
 export function stopAgentSpeech() {
-    if (typeof window !== 'undefined' && 'speechSynthesis' in window) {
-        try {
-            window.speechSynthesis.cancel();
-        }
-        catch { }
-    }
-    activeUtterance = null;
-    for (const notify of activeListeners) {
-        notify();
-    }
+    const lips = active;
+    active = null;
+    lips?.hush();
+    notify();
 }
 /**
- * Speak text in the assigned voice of an agent.
+ * Speak text in the assigned voice of an agent, through the platform.
  * Returns a cancel function.
+ *
+ * Call it from the click that asks for it: the player is made inside that
+ * gesture, which is what lets Safari play the reply when it arrives.
  */
 export function speakAgent(text, options = {}) {
     if (typeof window === 'undefined')
@@ -67,77 +91,38 @@ export function speakAgent(text, options = {}) {
     const clean = cleanForSpeech(text);
     if (!clean)
         return () => { };
-    if (!('speechSynthesis' in window)) {
-        options.onError?.(new Error('SpeechSynthesis not supported in this browser'));
-        return () => { };
-    }
     const profile = voiceProfileOf(options.agent);
-    const utterance = new SpeechSynthesisUtterance(clean);
-    utterance.pitch = profile.pitch;
-    utterance.rate = profile.rate;
-    // Attempt to select best matching system voice based on gender / voice tone
-    try {
-        const voices = window.speechSynthesis.getVoices();
-        if (voices.length > 0) {
-            const isFemale = profile.gender === 'female';
-            const candidate = voices.find((v) => {
-                const name = v.name.toLowerCase();
-                const lang = v.lang.toLowerCase();
-                if (!lang.startsWith('en'))
-                    return false;
-                if (isFemale) {
-                    return name.includes('female') || name.includes('samantha') || name.includes('victoria') || name.includes('karen') || name.includes('zira');
-                }
-                else {
-                    return name.includes('male') || name.includes('daniel') || name.includes('alex') || name.includes('fred') || name.includes('david');
-                }
-            }) || voices.find((v) => v.lang.toLowerCase().startsWith('en')) || voices[0];
-            if (candidate) {
-                utterance.voice = candidate;
-            }
-        }
-    }
-    catch { }
-    utterance.onstart = () => {
-        activeUtterance = utterance;
-        options.onStart?.();
-    };
-    utterance.onend = () => {
-        if (activeUtterance === utterance) {
-            activeUtterance = null;
-        }
+    const lips = mouth({
+        speech: speech({ ...base(), ...(options.token ? { token: options.token } : {}) }),
+        voice: () => standIn(profile, window.speechSynthesis?.getVoices() ?? []),
+        refused: options.onRefusal,
+    });
+    active = lips;
+    options.onStart?.();
+    lips.say(clean, profile.voice).then(() => {
+        if (active === lips)
+            active = null;
         options.onEnd?.();
-        for (const notify of activeListeners) {
-            notify();
-        }
-    };
-    utterance.onerror = (e) => {
-        if (activeUtterance === utterance) {
-            activeUtterance = null;
-        }
-        options.onError?.(e);
-        for (const notify of activeListeners) {
-            notify();
-        }
-    };
-    try {
-        window.speechSynthesis.speak(utterance);
-    }
-    catch (err) {
+        notify();
+    }, (err) => {
+        if (active === lips)
+            active = null;
         options.onError?.(err);
-    }
+        notify();
+    });
     return () => {
-        if (activeUtterance === utterance) {
+        if (active === lips)
             stopAgentSpeech();
-        }
     };
 }
 /**
  * Hook for managing agent speech playback in UI components.
  */
 export function useAgentSpeech(defaultAgent) {
+    const { token } = useIamToken();
     const [speaking, setSpeaking] = useState(false);
     const [currentText, setCurrentText] = useState(null);
+    const [refusal, setRefusal] = useState(null);
     const cancelRef = useRef(null);
     useEffect(() => {
         const listener = () => {
@@ -160,8 +145,10 @@ export function useAgentSpeech(defaultAgent) {
         stop();
         setCurrentText(text);
         setSpeaking(true);
+        setRefusal(null);
         cancelRef.current = speakAgent(text, {
             agent: agentName || defaultAgent,
+            token,
             onStart: () => setSpeaking(true),
             onEnd: () => {
                 setSpeaking(false);
@@ -171,8 +158,9 @@ export function useAgentSpeech(defaultAgent) {
                 setSpeaking(false);
                 setCurrentText(null);
             },
+            onRefusal: setRefusal,
         });
-    }, [defaultAgent, stop]);
+    }, [defaultAgent, stop, token]);
     const toggle = useCallback((text, agentName) => {
         if (speaking && currentText === text) {
             stop();
@@ -181,7 +169,7 @@ export function useAgentSpeech(defaultAgent) {
             speak(text, agentName);
         }
     }, [speaking, currentText, speak, stop]);
-    return { speaking, currentText, speak, stop, toggle };
+    return { speaking, currentText, refusal, speak, stop, toggle };
 }
 /** The five bars' resting heights, as a share of the 12px the wave stands in. */
 const BARS = [0.4, 0.9, 0.6, 1, 0.5];
@@ -219,11 +207,14 @@ export function AudioWave({ active = true, color = 'var(--state-success)' }) {
  * Allows one-click audio playback in the agent's voice.
  */
 export function SpeakButton({ text, agentName, compact = false, }) {
-    const { speaking, toggle } = useAgentSpeech(agentName);
+    const { speaking, refusal, toggle } = useAgentSpeech(agentName);
     const voice = voiceOf(agentName);
+    // A browser voice standing in for a refused platform sounds like success;
+    // the label is the one place that says otherwise.
+    const stood = refusal ? ` ${REFUSED[refusal.covered ? 'covered' : 'lost']}` : '';
     // An @hanzo/ui Button: ghost at rest, the quiet pressed ground while it
     // speaks. The word for speaking is the one status here, so it alone takes
     // the success ink (GOOD holds 4.5:1 on either theme); the icons follow the
     // label through currentColor.
-    return (_jsx(Button, { variant: speaking ? 'secondary' : 'ghost', size: compact ? 'icon-sm' : 'sm', color: speaking ? GOOD : '$soft', onClick: () => toggle(text, agentName), "aria-label": speaking ? 'Stop speaking' : `Listen to ${agentName || 'agent'} (${voice})`, "aria-pressed": speaking, title: speaking ? 'Stop speaking' : `Listen in ${agentName || 'agent'}'s voice (${voice})`, children: speaking ? (_jsxs(_Fragment, { children: [_jsx(AudioWave, { active: true, color: GOOD }), !compact && 'Speaking…', _jsx(Square, { size: 10, fill: "currentColor" })] })) : (_jsxs(_Fragment, { children: [_jsx(Volume2, { size: 13 }), !compact && 'Listen'] })) }));
+    return (_jsx(Button, { variant: speaking ? 'secondary' : 'ghost', size: compact ? 'icon-sm' : 'sm', color: speaking ? GOOD : '$soft', onClick: () => toggle(text, agentName), "aria-label": (speaking ? 'Stop speaking' : `Listen to ${agentName || 'agent'} (${voice})`) + stood, "aria-pressed": speaking, "data-refusal": refusal ? refusal.service : undefined, title: (speaking ? 'Stop speaking' : `Listen in ${agentName || 'agent'}'s voice (${voice})`) + stood, children: speaking ? (_jsxs(_Fragment, { children: [_jsx(AudioWave, { active: true, color: GOOD }), !compact && 'Speaking…', _jsx(Square, { size: 10, fill: "currentColor" })] })) : (_jsxs(_Fragment, { children: [_jsx(Volume2, { size: 13 }), !compact && 'Listen'] })) }));
 }

package/dist/tabs.js

@@ -13,7 +13,7 @@ import { Box, Text, XStack } from '@hanzo/ui';
  * `after` is what sits past the last tab: the plus that would add one.
  */
 export function Tabs({ tabs, chosen, onPick, after, }) {
-    return (_jsxs(XStack, { minH: 48, shrink: 0, items: "center", px: "$3", gap: "$3", overflow: "scroll", borderBottomWidth: 1, borderColor: "$borderColor", children: [tabs.map((one) => {
+    return (_jsxs(XStack, { minH: 48, shrink: 0, items: "center", px: "$3", gap: "$3", overflowX: "auto", overflowY: "hidden", borderBottomWidth: 1, borderColor: "$borderColor", children: [tabs.map((one) => {
                 const on = one.id === chosen;
                 const Icon = one.icon;
                 return (_jsx(Box, { ...(onPick ? { render: 'button', onClick: () => onPick(one.id) } : {}), "aria-current": on,