@hanzo/rooms 0.1.9 → 0.1.11

package/dist/Chat.js

@@ -48,8 +48,8 @@ import { Meters } from "./meters.js";
 import { useHydrated } from "./lib/hydrated.js";
 import { base, served } from "./lib/ai.js";
 import { onServed } from "./lib/served.js";
-import { speech, useVoice, Voice } from "@hanzo/voice";
-import { ArrowUp, Image as ImageMark, Mic, Paperclip, Square, Star, PanelRight, X } from "lucide-react";
+import { REFUSED, speech, useDictation, useTalk, useVoice, Voice } from "@hanzo/voice";
+import { ArrowUp, AudioLines, Image as ImageMark, Mic, Paperclip, Square, Star, PanelRight, X } from "lucide-react";
 import { ENSO, FREE } from "./lib/ai.js";
 import { openThread, useOpen } from "./open.js";
 import { Beside, Framed } from "./Shell.js";
@@ -66,7 +66,7 @@ import { Upgrade, useFree } from './Upgrade.js';
 import { enter, LOGIN } from './lib/destination.js';
 import { first } from './lib/first.js';
 import { BAD, mix } from "./lib/mix.js";
-import { site } from './where.js';
+import { brand, site } from './where.js';
 /** The veil under the free lane's consent sheet. */
 const SCRIM = mix("var(--pure-black)", 72, "srgb");
 // NO REASONING PANEL HERE. Every assistant turn opened a "Thinking" disclosure
@@ -237,12 +237,12 @@ export function Ask({ placeholder, idle, }) {
  *
  * The package defaults to "Ask anything" and argues for it against
  * "Message <model>" — a name that moves renames the control every time the
- * model does. This is not that: it is the PRODUCT's name, one constant string,
- * and it is already how this file addresses a character (`Message
- * ${persona.name}`). `label` stays "Ask anything", so the accessible name does
- * not move when the placeholder does.
+ * model does. This is not that: it is the PRODUCT's name — the host's brand,
+ * Hanzo AI or Hanzo Team — and it is already how this file addresses a
+ * character (`Message ${persona.name}`). `label` stays "Ask anything", so the
+ * accessible name does not move when the placeholder does.
  */
-const MESSAGE = "Message Hanzo AI";
+const message = () => `Message ${brand()}`;
 /** The id the room's system turn is held under in the thread. */
 const ROOM = "room";
 /** The models that route a turn rather than name the one that answers it. */
@@ -305,7 +305,7 @@ const STALL = 300_000;
  * consent — is identical, which is the point: signing in later changes the
  * models on the menu, not the room.
  */
-function Thread({ placeholder = MESSAGE, initial, anonymous = false, heading, }) {
+function Thread({ placeholder = message(), initial, anonymous = false, heading, }) {
     /**
      * The model, and WHO decides it.
      *
@@ -617,18 +617,21 @@ function Thread({ placeholder = MESSAGE, initial, anonymous = false, heading, })
     const depth = useRef(0);
     useSeed(initial, setDraft);
     // DICTATION through Hanzo's own ear: the mic records and each pause is
-    // posted to /v1/audio/transcriptions (`zen-scribe`). `speech()` defaults to
-    // the Hanzo gateway and `base()` is the one place a host is read from, so
-    // pointing a local cloud at one points both. The token is the reader's own —
-    // the package never invents a credential — and a refusal is worn by
-    // `<Voice/>`, never passed off as a transcript.
+    // posted to /v1/audio/transcriptions (`zen-scribe`), and what was said lands
+    // AFTER what the draft already held (`useDictation`) — a pause between two
+    // sentences never loses the first. `speech()` defaults to the Hanzo gateway
+    // and `base()` is the one place a host is read from, so pointing a local
+    // cloud at one points both. The token is the reader's own — the package never
+    // invents a credential — and a refusal is worn by `<Voice/>`, never passed off
+    // as a transcript.
     const { token } = useIamToken();
     const ear = useMemo(() => speech({ ...base(), ...(token ? { token } : {}) }), [token]);
-    const voice = useVoice({
-        speech: ear,
-        onPartial: setDraft,
-        onUtterance: setDraft,
-    });
+    const voice = useVoice({ speech: ear, ...useDictation(draft, setDraft) });
+    // TALK MODE: a hands-free conversation on Hanzo's realtime socket, /v1/voice.
+    // The mic streams up, the answer streams back as speech with its words in
+    // `talk.reply`, and talking over it stops it. Its own conversation, so its
+    // turns are drawn above the composer rather than posted into the thread.
+    const talk = useTalk({ ...base(), ...(token ? { token } : {}), org: org() ?? undefined });
     // WHILE THE MIC IS OPEN, A FINISHED REPLY IS READ ALOUD by the platform's
     // voice, through the conversation's own mouth so speaking over it stops it.
     // A room's reply is read part by part, each in its speaker's cast voice.
@@ -639,11 +642,12 @@ function Thread({ placeholder = MESSAGE, initial, anonymous = false, heading, })
             const lastMsg = msgs[msgs.length - 1];
             if (lastMsg && lastMsg.role === "assistant" && typeof lastMsg.content === "string") {
                 const parts = room.length > 1 ? speakers(lastMsg.content, room) : [{ who: withWhom, text: lastMsg.content }];
+                // A part spoken over ends the reading rather than handing on to the next.
                 void (async () => {
                     for (const part of parts) {
                         const said = cleanForSpeech(part.text);
-                        if (said)
-                            await voice.say(said, voiceOf(part.who ?? withWhom ?? undefined));
+                        if (said && !(await voice.say(said, voiceOf(part.who ?? withWhom ?? undefined))))
+                            break;
                     }
                 })();
             }
@@ -1047,8 +1051,18 @@ function Thread({ placeholder = MESSAGE, initial, anonymous = false, heading, })
                     },
                     // WHAT GOES WITH THE MESSAGE, above the frame: one chip a file, each
                     // with its own remove, and the reason any file was refused.
-                    head: files.length || turnedAway ? (_jsxs(YStack, { width: "calc(100% - 32px)", maxW: `calc(${MEASURE} - 3rem)`, mx: "auto", gap: "$1.5", children: [files.length ? (_jsx(XStack, { gap: "$1.5", flexWrap: "wrap", role: "list", "aria-label": "Attached files", "data-slot": "composer-attached", children: files.map((one) => (_jsxs(XStack, { role: "listitem", items: "center", gap: "$1.5", pl: "$2.5", pr: "$1", py: "$1", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", bg: "$hover", maxW: 260, children: [one.kind === "image" ? (_jsx(ImageMark, { size: 12, "aria-hidden": true, color: "var(--muted-foreground)" })) : (_jsx(Paperclip, { size: 12, "aria-hidden": true, color: "var(--muted-foreground)" })), _jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: one.name }), _jsx(Box, { render: "button", "aria-label": `Remove ${one.name}`, onClick: () => drop(at, one.id), p: "$1", rounded: "$10", hoverStyle: { bg: "$raised" }, children: _jsx(X, { size: 12, "aria-hidden": true }) })] }, one.id))) })) : null, turnedAway ? (_jsx(Text, { role: "alert", fontSize: "$2", color: BAD, children: turnedAway })) : null] })) : undefined,
-                    send: (_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Enso, { effort: effort, onEffort: setEffort, model: wanted, onModel: choose, models: offered }), _jsx(Control, { asChild: true, size: ROUND, children: _jsx(Voice, { voice: voice, children: (state) => (_jsx(Mic, { size: 15, fill: state === "idle" ? "none" : "currentColor" })) }) }), _jsx(Control, { type: "button", size: ROUND, fill: true, "data-slot": "composer-send", "aria-label": chat.streaming ? "Stop" : "Send", opacity: chat.streaming || draft.trim() || files.length ? 1 : 0.4, onClick: () => (chat.streaming ? chat.stop() : submit()), children: chat.streaming ? (_jsx(Square, { size: 13, fill: "currentColor" })) : (_jsx(ArrowUp, { size: 15, strokeWidth: 2.5 })) })] })),
+                    head: files.length || turnedAway || talk.open || talk.refusal ? (_jsxs(YStack, { width: "calc(100% - 32px)", maxW: `calc(${MEASURE} - 3rem)`, mx: "auto", gap: "$1.5", children: [files.length ? (_jsx(XStack, { gap: "$1.5", flexWrap: "wrap", role: "list", "aria-label": "Attached files", "data-slot": "composer-attached", children: files.map((one) => (_jsxs(XStack, { role: "listitem", items: "center", gap: "$1.5", pl: "$2.5", pr: "$1", py: "$1", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", bg: "$hover", maxW: 260, children: [one.kind === "image" ? (_jsx(ImageMark, { size: 12, "aria-hidden": true, color: "var(--muted-foreground)" })) : (_jsx(Paperclip, { size: 12, "aria-hidden": true, color: "var(--muted-foreground)" })), _jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: one.name }), _jsx(Box, { render: "button", "aria-label": `Remove ${one.name}`, onClick: () => drop(at, one.id), p: "$1", rounded: "$10", hoverStyle: { bg: "$raised" }, children: _jsx(X, { size: 12, "aria-hidden": true }) })] }, one.id))) })) : null, turnedAway ? (_jsx(Text, { role: "alert", fontSize: "$2", color: BAD, children: turnedAway })) : null, talk.open || talk.refusal ? (_jsx(Text, { role: "status", "aria-live": "polite", "data-slot": "composer-talk-reply", fontSize: "$2", color: talk.refusal ? BAD : "$soft", children: talk.refusal
+                                    ? REFUSED.lost
+                                    : talk.reply
+                                        ? `Hanzo: ${talk.reply}`
+                                        : talk.state === "listening"
+                                            ? "Listening — speak, and Hanzo answers aloud."
+                                            : "Connecting…" })) : null] })) : undefined,
+                    send: (_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Enso, { effort: effort, onEffort: setEffort, model: wanted, onModel: choose, models: offered }), _jsx(Control, { asChild: true, size: ROUND, children: _jsx(Voice, { voice: voice, says: { idle: "Dictate", listening: "Dictating — click to stop" }, children: (state) => (_jsx(Mic, { size: 15, fill: state === "idle" ? "none" : "currentColor" })) }) }), _jsx(Control, { asChild: true, size: ROUND, children: _jsx(Voice, { voice: talk, "data-slot": "composer-talk", says: {
+                                        idle: "Talk with Hanzo",
+                                        listening: "In conversation — click to hang up",
+                                        speaking: "Hanzo is speaking — talk to interrupt",
+                                    }, children: () => _jsx(AudioLines, { size: 15 }) }) }), _jsx(Control, { type: "button", size: ROUND, fill: true, "data-slot": "composer-send", "aria-label": chat.streaming ? "Stop" : "Send", opacity: chat.streaming || draft.trim() || files.length ? 1 : 0.4, onClick: () => (chat.streaming ? chat.stop() : submit()), children: chat.streaming ? (_jsx(Square, { size: 13, fill: "currentColor" })) : (_jsx(ArrowUp, { size: 15, strokeWidth: 2.5 })) })] })),
                     // WHAT THE PLAN HAS LEFT, under the frame and at its measure, for a
                     // plan holder only: Free keeps the free lane's own notice.
                     foot: held && limits && (limits.session || limits.day || limits.month) ? (_jsx(YStack, { width: "calc(100% - 32px)", maxW: `calc(${MEASURE} - 3rem)`, mx: "auto", children: _jsx(Meters, { limits: limits }) })) : undefined,

package/dist/Column.js

@@ -25,6 +25,7 @@ import { useSpan } from './span.js';
 import { pane } from './ground.js';
 import { pick } from './lib/session.js';
 import { app, talk } from './lib/host.js';
+import { brand } from './where.js';
 /** The grip stands in the gutter between the column and the pane. gui carries a `calc()` to the page unchanged; its
  *  types only name custom properties. */
 const GUTTER_END = 'calc(-1 * var(--pane-gap))';
@@ -74,10 +75,10 @@ export function Column({ host, mode, thread, onChat, onDev, go, drawer = false,
         window.location.assign(mode === 'dev' ? app('') : talk());
     };
     if (collapsed)
-        return (_jsx(YStack, { "data-slot": "app-column", "data-collapsed": "", position: "relative", shrink: 0, width: RAIL, "$max-md": { display: 'none' }, children: _jsxs(Sidebar, { "data-slot": "app-rail", "data-collapsed": "true", role: "navigation", "aria-label": "Hanzo", ...pane(), ...FILL, px: "$1.5", py: "$2.5", gap: "$1.5", items: "center", children: [_jsx(SidebarIconButton, { label: "Expand sidebar", onPress: () => setCollapsed(false), width: 36, height: 36, rounded: 999, children: _jsx(PanelLeft, { size: 16 }) }), _jsx(ModeMark, { mode: mode, onChat: onChat, onDev: onDev, stacked: true }), _jsx(SidebarIconButton, { label: mode === 'chat' ? 'New chat' : 'New run', onPress: create, width: 36, height: 36, rounded: 999, children: _jsx(Plus, { size: 16 }) }), _jsx(YStack, { flex: 1 }), _jsx(Me, { host: host, narrow: true, onOrg: org })] }) }));
+        return (_jsx(YStack, { "data-slot": "app-column", "data-collapsed": "", position: "relative", shrink: 0, width: RAIL, "$max-md": { display: 'none' }, children: _jsxs(Sidebar, { "data-slot": "app-rail", "data-collapsed": "true", role: "navigation", "aria-label": brand(), ...pane(), ...FILL, px: "$1.5", py: "$2.5", gap: "$1.5", items: "center", children: [_jsx(SidebarIconButton, { label: "Expand sidebar", onPress: () => setCollapsed(false), width: 36, height: 36, rounded: 999, children: _jsx(PanelLeft, { size: 16 }) }), _jsx(ModeMark, { mode: mode, onChat: onChat, onDev: onDev, stacked: true }), _jsx(SidebarIconButton, { label: mode === 'chat' ? 'New chat' : 'New run', onPress: create, width: 36, height: 36, rounded: 999, children: _jsx(Plus, { size: 16 }) }), _jsx(YStack, { flex: 1 }), _jsx(Me, { host: host, narrow: true, onOrg: org })] }) }));
     return (_jsxs(YStack, { "data-slot": "app-column", ref: drawer ? undefined : span.ref, 
         // inline-style: `--span`, the width a drag rewrites on the element itself (span.ts); no prop sets a variable.
-        style: drawer ? undefined : span.style, position: "relative", shrink: 0, height: "100%", width: drawer ? '100%' : 'var(--span)', ...(drawer ? {} : { '$max-md': { display: 'none' } }), children: [_jsxs(Sidebar, { "data-slot": "app-rail", "data-collapsed": "false", role: "navigation", "aria-label": "Hanzo", ...pane(), ...FILL, px: "$2.5", pt: "$3", pb: "$2", gap: "$0", children: [_jsxs(XStack, { "data-slot": "mode-switch", items: "center", gap: "$2", px: "$1.5", pb: "$3", minW: 0, children: [_jsx(HanzoMark, { size: 18 }), _jsx(ModeMark, { mode: mode, onChat: onChat, onDev: onDev })] }), _jsxs(XStack, { "data-slot": "app-filter", items: "center", gap: "$2", px: "$3", height: 36, rounded: 999, borderWidth: 1, borderColor: "$borderColor", bg: "$edge", shrink: 0, children: [_jsx(Search, { size: 15, "aria-hidden": true, color: "var(--soft, var(--muted-foreground))" }), _jsx(Text, { render: _jsx("input", { value: words, onChange: (e) => setWords(e.target.value), onKeyDown: (e) => {
+        style: drawer ? undefined : span.style, position: "relative", shrink: 0, height: "100%", width: drawer ? '100%' : 'var(--span)', ...(drawer ? {} : { '$max-md': { display: 'none' } }), children: [_jsxs(Sidebar, { "data-slot": "app-rail", "data-collapsed": "false", role: "navigation", "aria-label": brand(), ...pane(), ...FILL, px: "$2.5", pt: "$3", pb: "$2", gap: "$0", children: [_jsxs(XStack, { "data-slot": "mode-switch", items: "center", gap: "$2", px: "$1.5", pb: "$3", minW: 0, children: [_jsx(HanzoMark, { size: 18 }), _jsx(ModeMark, { mode: mode, onChat: onChat, onDev: onDev })] }), _jsxs(XStack, { "data-slot": "app-filter", items: "center", gap: "$2", px: "$3", height: 36, rounded: 999, borderWidth: 1, borderColor: "$borderColor", bg: "$edge", shrink: 0, children: [_jsx(Search, { size: 15, "aria-hidden": true, color: "var(--soft, var(--muted-foreground))" }), _jsx(Text, { render: _jsx("input", { value: words, onChange: (e) => setWords(e.target.value), onKeyDown: (e) => {
                                         if (e.key === 'Escape')
                                             setWords('');
                                     }, placeholder: "Filter", "aria-label": "Filter recents" }), flex: 1, minW: 0, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit", fontSize: "$2" })] }), _jsxs(YStack, { role: "list", mt: "$2.5", gap: 2, shrink: 0, children: [_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { "data-slot": "app-new", ...ROW, active: fresh, icon: _jsx(Plus, { size: 16, "aria-hidden": true }), onPress: create, ...keys(create), children: mode === 'chat' ? 'New chat' : 'New run' }) }), mode === 'dev'

package/dist/Directory.js

@@ -44,7 +44,6 @@ import { ArrowUpRight, Check, Plus, Search, X } from 'lucide-react';
 import { Box, Dialog, DialogContent, DialogTitle, Input, Text, XStack, YStack, } from '@hanzo/ui';
 import { Grid } from '@hanzo/ui/grid';
 import { useIam } from '@hanzo/iam/react';
-import { where } from './where.js';
 import { ProviderMark } from './ProviderMark.js';
 import { say } from './failure.js';
 import { api } from './lib/api.js';
@@ -85,10 +84,14 @@ const ENDPOINT = {
  * provider the registry publishes is always drawn.
  */
 const LEAD = ['tiktok', 'instagram', 'linkedin', 'slack', 'x', 'whatsapp', 'discord', 'telegram', 'facebook', 'teams', 'threads', 'youtube'];
-/** The host's published integrations, as directory rows. Real, public, counted. Read once. */
+/**
+ * The published integrations (lib/integrations), as directory rows. Real,
+ * public, counted. Loaded when the tab first opens, so a page the rooms frame
+ * carries none of the catalogue's guides.
+ */
 let listing = null;
-const apps = () => (listing ??= (where().integrations?.() ?? Promise.resolve([]))
-    .then((all) => all.map((i) => ({
+const apps = () => (listing ??= import('./lib/integrations.js')
+    .then(({ INTEGRATIONS }) => INTEGRATIONS.map((i) => ({
     id: i.slug,
     name: i.name,
     publisher: i.creator,

package/dist/Guide.js

@@ -29,6 +29,7 @@ import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } fr
 import { createPortal } from 'react-dom';
 import { Text, View, XStack, YStack } from '@hanzo/gui';
 import { Button } from '@hanzo/ui';
+import { brand } from './where.js';
 import { useIam } from '@hanzo/iam/react';
 import { useAi } from './lib/ai.js';
 import { Next, Scene } from './Scene.js';
@@ -259,7 +260,7 @@ export function Guide({ room = 'chat' }) {
     // The dim is four panels around the spot rather than one box with a hole:
     // a hole wants a mask, and a mask over a blurred backdrop reads as a seam.
     const panel = { position: 'fixed', bg: 'var(--surface-scrim)', z: 'var(--z-overlay)', onClick: () => done('skipped') };
-    return createPortal(_jsxs("div", { role: "dialog", "aria-modal": "true", "aria-label": "Getting started with Hanzo", children: [_jsx(View, { ...panel, t: 0, l: 0, r: 0, height: Math.max(0, spot.top) }), _jsx(View, { ...panel, t: spot.top + spot.height, l: 0, r: 0, b: 0 }), _jsx(View, { ...panel, t: spot.top, l: 0, width: Math.max(0, spot.left), height: spot.height }), _jsx(View, { ...panel, t: spot.top, l: spot.left + spot.width, r: 0, height: spot.height }), _jsx(View, { position: "fixed", t: spot.top, l: spot.left, width: spot.width, height: spot.height, rounded: 10, borderWidth: 1, borderColor: "var(--ring)", boxShadow: RING, pointerEvents: "none", z: ABOVE }), stop.scene ? (_jsx(Scene, { step: `${i + 1} / ${stops.length}`, onNext: next, onSkip: () => done('skipped') })) : (_jsxs(YStack, { ref: cardRef, position: "fixed", t: card.top, l: card.left, width: CARD_W, z: "var(--z-modal)", bg: "var(--popover)", borderWidth: 1, borderColor: "var(--border-control)", rounded: 12, boxShadow: "var(--shadow-floating)", pt: 18, px: 18, pb: 15, children: [_jsx(View, { "aria-hidden": true, position: "absolute", width: 11, height: 11, bg: "var(--popover)", rotate: "45deg", borderColor: "var(--border-control)", ...POINTER[side] }), _jsxs(XStack, { items: "center", gap: 8, mb: 9, children: [_jsxs(Text, { fontFamily: "$body", lineHeight: LEAD, fontSize: FLOOR, letterSpacing: 1.1, textTransform: "uppercase", color: "$faint", fontVariant: ['tabular-nums'], children: [i + 1, " / ", stops.length] }), _jsx(View, { flex: 1, height: 1, bg: "$borderColor" }), _jsx(XStack, { gap: 3, children: stops.map((s, n) => (_jsx(View, { width: n === i ? 14 : 5, height: 5, rounded: 3, bg: n <= i ? '$ink' : '$rim', transition: "200ms" }, s.id))) })] }), _jsx(Text, { render: "h2", fontFamily: "$body", mb: 7, fontSize: "$6", fontWeight: "600", lineHeight: 22.1, letterSpacing: -0.17, color: "$ink", children: stop.title }), _jsx(Text, { render: "p", fontFamily: "$body", mb: 16, fontSize: "$3", lineHeight: 22.4, color: "$quiet", children: stop.body }), _jsxs(XStack, { items: "center", gap: 8, children: [_jsx(Button, { variant: "linkMuted", size: "sm", px: 2, onClick: () => done('skipped'), children: "Skip" }), _jsx(View, { flex: 1 }), i > 0 ? (_jsx(Button, { size: "sm", onClick: back, children: "Back" })) : null, _jsx(Next, { onPress: next, label: last ? 'Done' : 'Next' })] })] }))] }), document.body);
+    return createPortal(_jsxs("div", { role: "dialog", "aria-modal": "true", "aria-label": `Getting started with ${brand()}`, children: [_jsx(View, { ...panel, t: 0, l: 0, r: 0, height: Math.max(0, spot.top) }), _jsx(View, { ...panel, t: spot.top + spot.height, l: 0, r: 0, b: 0 }), _jsx(View, { ...panel, t: spot.top, l: 0, width: Math.max(0, spot.left), height: spot.height }), _jsx(View, { ...panel, t: spot.top, l: spot.left + spot.width, r: 0, height: spot.height }), _jsx(View, { position: "fixed", t: spot.top, l: spot.left, width: spot.width, height: spot.height, rounded: 10, borderWidth: 1, borderColor: "var(--ring)", boxShadow: RING, pointerEvents: "none", z: ABOVE }), stop.scene ? (_jsx(Scene, { step: `${i + 1} / ${stops.length}`, onNext: next, onSkip: () => done('skipped') })) : (_jsxs(YStack, { ref: cardRef, position: "fixed", t: card.top, l: card.left, width: CARD_W, z: "var(--z-modal)", bg: "var(--popover)", borderWidth: 1, borderColor: "var(--border-control)", rounded: 12, boxShadow: "var(--shadow-floating)", pt: 18, px: 18, pb: 15, children: [_jsx(View, { "aria-hidden": true, position: "absolute", width: 11, height: 11, bg: "var(--popover)", rotate: "45deg", borderColor: "var(--border-control)", ...POINTER[side] }), _jsxs(XStack, { items: "center", gap: 8, mb: 9, children: [_jsxs(Text, { fontFamily: "$body", lineHeight: LEAD, fontSize: FLOOR, letterSpacing: 1.1, textTransform: "uppercase", color: "$faint", fontVariant: ['tabular-nums'], children: [i + 1, " / ", stops.length] }), _jsx(View, { flex: 1, height: 1, bg: "$borderColor" }), _jsx(XStack, { gap: 3, children: stops.map((s, n) => (_jsx(View, { width: n === i ? 14 : 5, height: 5, rounded: 3, bg: n <= i ? '$ink' : '$rim', transition: "200ms" }, s.id))) })] }), _jsx(Text, { render: "h2", fontFamily: "$body", mb: 7, fontSize: "$6", fontWeight: "600", lineHeight: 22.1, letterSpacing: -0.17, color: "$ink", children: stop.title }), _jsx(Text, { render: "p", fontFamily: "$body", mb: 16, fontSize: "$3", lineHeight: 22.4, color: "$quiet", children: stop.body }), _jsxs(XStack, { items: "center", gap: 8, children: [_jsx(Button, { variant: "linkMuted", size: "sm", px: 2, onClick: () => done('skipped'), children: "Skip" }), _jsx(View, { flex: 1 }), i > 0 ? (_jsx(Button, { size: "sm", onClick: back, children: "Back" })) : null, _jsx(Next, { onPress: next, label: last ? 'Done' : 'Next' })] })] }))] }), document.body);
 }
 /** Let a room's guide be asked for again — a menu row can call this and reload. */
 export function replayGuide(room = 'chat') {

package/dist/Market.js

@@ -22,6 +22,7 @@ import { Box, Text, XStack, YStack } from '@hanzo/ui';
 import { useIam } from '@hanzo/iam/react';
 import { hasSession } from './lib/session.js';
 import { useAi } from './lib/ai.js';
+import { brand } from './where.js';
 /** A listing reachable over HTTP is one this app can connect on its own. */
 const reachable = (listing) => (listing.transports ?? []).includes('streamable-http');
 /** Labels a namespace carries that name no brand: `com.cloudflare.mcp` is
@@ -137,7 +138,7 @@ export function Market({ scope }) {
         return _jsx(Empty, { children: "Sign in to browse agents you can add." });
     if (failed)
         return _jsx(Empty, { children: say(failed, 'the marketplace') });
-    return (_jsxs(YStack, { flex: 1, minH: 0, children: [_jsxs(YStack, { p: "$5", gap: "$2", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsx(Text, { fontSize: "$7", lineHeight: "$7", fontWeight: "500", color: "$ink", children: "Put AI to work in Hanzo" }), _jsx(Text, { fontSize: "$3", color: "$soft", children: "Browse agents that bring your tools into Hanzo." }), _jsxs(XStack, { mt: "$2", width: 420, maxW: "100%", height: 36, items: "center", gap: "$2", px: "$3", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(Search, { size: 14, "aria-hidden": true }), _jsx(Text, { render: _jsx("input", { value: ask, onChange: (e) => setAsk(e.target.value), placeholder: "Search agents" }), flex: 1, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit" })] })] }), !listings ? (_jsx(Empty, { children: "Reading the shelf." })) : shown.length === 0 ? (_jsx(Empty, { children: scope === 'installed'
+    return (_jsxs(YStack, { flex: 1, minH: 0, children: [_jsxs(YStack, { p: "$5", gap: "$2", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsxs(Text, { fontSize: "$7", lineHeight: "$7", fontWeight: "500", color: "$ink", children: ["Put AI to work in ", brand()] }), _jsxs(Text, { fontSize: "$3", color: "$soft", children: ["Browse agents that bring your tools into ", brand(), "."] }), _jsxs(XStack, { mt: "$2", width: 420, maxW: "100%", height: 36, items: "center", gap: "$2", px: "$3", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(Search, { size: 14, "aria-hidden": true }), _jsx(Text, { render: _jsx("input", { value: ask, onChange: (e) => setAsk(e.target.value), placeholder: "Search agents" }), flex: 1, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit" })] })] }), !listings ? (_jsx(Empty, { children: "Reading the shelf." })) : shown.length === 0 ? (_jsx(Empty, { children: scope === 'installed'
                     ? 'No agents installed yet.'
                     : ask
                         ? 'Nothing in the registry matches that.'

package/dist/Me.js

@@ -32,6 +32,7 @@ import { org as current, orgs, pick, renew, scope, superAdmin } from './lib/sess
 import { payPage } from './lib/pay.js';
 import { planName } from './lib/plans.js';
 import { ENTRY } from './lib/host.js';
+import { where } from './where.js';
 import { SupportPicker } from './Support.js';
 import { BAD } from './lib/mix.js';
 /** The documentation Get help opens. */
@@ -140,7 +141,7 @@ export function Me({ host, narrow = false, onOrg, }) {
     const other = usePlan(personal && personal.name !== current ? personal.name : null, menu.open);
     const planFor = (o) => (o.name === current ? planOf(tier) : o.personal ? other : '');
     const who = host.person?.name || host.person?.email || '';
-    const where = [said(here?.role ?? ''), here?.display ?? current].filter(Boolean).join(' · ');
+    const standing = [said(here?.role ?? ''), here?.display ?? current].filter(Boolean).join(' · ');
     // The organization in use takes focus once the menu is drawn — after the
     // popover has placed its own focus — so the keys reach the rows at once.
     const land = (node) => {
@@ -161,11 +162,11 @@ export function Me({ host, narrow = false, onOrg, }) {
         return null;
     return (_jsxs(_Fragment, { children: [_jsxs(Popover, { open: menu.open, onOpenChange: menu.onOpenChange, placement: narrow ? 'right-end' : 'top-start', allowFlip: true, stayInFrame: true, offset: 8, children: [_jsx(Popover.Anchor, { width: "100%", children: _jsxs(XStack, { ref: (el) => {
                                 row.current = el instanceof HTMLElement ? el : null;
-                            }, render: "button", "data-slot": "me", "aria-label": `Account: ${[who, current].filter(Boolean).join(' · ')}`, "aria-haspopup": "menu", "aria-expanded": menu.open, onPress: menu.toggle, width: narrow ? 40 : '100%', minH: narrow ? 40 : 48, px: narrow ? 0 : '$2', gap: "$2.5", rounded: narrow ? 999 : '$5', items: "center", justify: narrow ? 'center' : 'flex-start', hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, cursor: "pointer", children: [_jsx(Face, { host: host, size: narrow ? 30 : 32 }), narrow ? null : (_jsxs(_Fragment, { children: [_jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$3", fontWeight: "600", color: "$ink", numberOfLines: 1, text: "left", children: who }), where ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, text: "left", children: where })) : null] }), _jsx(ChevronsUpDown, { size: 14, "aria-hidden": true, opacity: 0.6 })] }))] }) }), _jsx(Popover.Content, { ...glass(2), items: "stretch", borderWidth: 1, rounded: "$6", p: "$1.5", width: 288, maxW: "calc(100vw - 16px)", maxH: "calc(100dvh - 32px)", overflowY: "auto", overflowX: "hidden", children: _jsx(View, { render: _jsx("div", { ref: land, role: "menu", "aria-label": "Account", onKeyDown: (e) => rove(e, close) }), self: "stretch", minW: 0, children: _jsxs(YStack, { gap: 2, children: [_jsx(SizableText, { size: "$2", color: "$soft", px: "$2", py: "$1.5", numberOfLines: 1, children: host.person.email || who }), _jsx(Rule, {}), _jsx(Label, { children: "Organizations" }), _jsx(YStack, { role: "group", "aria-label": "Organizations", gap: 2, children: all.map((o) => (_jsx(Item, { icon: _jsx(Mark, { org: o }), label: o.display, sub: [o.personal ? 'Personal' : said(o.role), planFor(o)].filter(Boolean).join(' · '), checked: o.name === current, onPress: () => {
+                            }, render: "button", "data-slot": "me", "aria-label": `Account: ${[who, current].filter(Boolean).join(' · ')}`, "aria-haspopup": "menu", "aria-expanded": menu.open, onPress: menu.toggle, width: narrow ? 40 : '100%', minH: narrow ? 40 : 48, px: narrow ? 0 : '$2', gap: "$2.5", rounded: narrow ? 999 : '$5', items: "center", justify: narrow ? 'center' : 'flex-start', hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, cursor: "pointer", children: [_jsx(Face, { host: host, size: narrow ? 30 : 32 }), narrow ? null : (_jsxs(_Fragment, { children: [_jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$3", fontWeight: "600", color: "$ink", numberOfLines: 1, text: "left", children: who }), standing ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, text: "left", children: standing })) : null] }), _jsx(ChevronsUpDown, { size: 14, "aria-hidden": true, opacity: 0.6 })] }))] }) }), _jsx(Popover.Content, { ...glass(2), items: "stretch", borderWidth: 1, rounded: "$6", p: "$1.5", width: 288, maxW: "calc(100vw - 16px)", maxH: "calc(100dvh - 32px)", overflowY: "auto", overflowX: "hidden", children: _jsx(View, { render: _jsx("div", { ref: land, role: "menu", "aria-label": "Account", onKeyDown: (e) => rove(e, close) }), self: "stretch", minW: 0, children: _jsxs(YStack, { gap: 2, children: [_jsx(SizableText, { size: "$2", color: "$soft", px: "$2", py: "$1.5", numberOfLines: 1, children: host.person.email || who }), _jsx(Rule, {}), _jsx(Label, { children: "Organizations" }), _jsx(YStack, { role: "group", "aria-label": "Organizations", gap: 2, children: all.map((o) => (_jsx(Item, { icon: _jsx(Mark, { org: o }), label: o.display, sub: [o.personal ? 'Personal' : said(o.role), planFor(o)].filter(Boolean).join(' · '), checked: o.name === current, onPress: () => {
                                                 menu.onOpenChange(false);
                                                 if (o.name !== current)
                                                     onOrg(o.name);
-                                            } }, o.name))) }), _jsx(Item, { icon: _jsx(Plus, { size: 15, "aria-hidden": true }), label: "Create organization", onPress: () => (menu.onOpenChange(false), setCreating(true)) }), _jsx(Item, { icon: _jsx(Settings, { size: 15, "aria-hidden": true }), label: "Organization settings", onPress: () => (menu.onOpenChange(false), window.location.assign(ORG_SETTINGS)) }), here && !here.personal ? (_jsx(Item, { icon: _jsx(Users, { size: 15, "aria-hidden": true }), label: "Open in Hanzo Team", trail: _jsx(ExternalLink, { size: 13, "aria-hidden": true, opacity: 0.6 }), onPress: () => (menu.onOpenChange(false), window.location.assign(`${ENTRY}&org=${encodeURIComponent(here.name)}`)) })) : (_jsx(Item, { icon: _jsx(Users, { size: 15, "aria-hidden": true }), label: "Create a team", onPress: () => (menu.onOpenChange(false), setCreating(true)) })), superAdmin() ? (_jsx(Item, { icon: _jsx(Building2, { size: 15, "aria-hidden": true }), label: "All organizations", onPress: () => (menu.onOpenChange(false), setSupporting(true)) })) : null, _jsx(Rule, {}), _jsx(Item, { icon: _jsx(Sparkles, { size: 15, "aria-hidden": true }), label: "Add funds", sub: typeof tier?.balance?.effectiveAvailable === 'number' ? `Credits ${formatCents(tier.balance.effectiveAvailable)}` : 'Credits', onPress: () => (menu.onOpenChange(false), window.open(payPage(), '_blank', 'noopener')), trail: _jsx(ExternalLink, { size: 13, "aria-hidden": true, opacity: 0.6 }) }), _jsx(Item, { icon: _jsx(Settings, { size: 15, "aria-hidden": true }), label: "Settings", onPress: () => go(path({ kind: 'settings', section: 'general' })) }), _jsx(Item, { icon: _jsx(Gauge, { size: 15, "aria-hidden": true }), label: "Usage", onPress: () => go(path({ kind: 'settings', section: 'usage' })) }), _jsx(Item, { icon: _jsx(Sparkles, { size: 15, "aria-hidden": true }), label: "View all plans", onPress: () => go(path({ kind: 'screen', screen: 'plans' })) }), _jsx(Item, { icon: _jsx(LifeBuoy, { size: 15, "aria-hidden": true }), label: "Get help", onPress: () => (menu.onOpenChange(false), window.open(DOCS, '_blank', 'noopener,noreferrer')) }), host.signOut ? (_jsxs(_Fragment, { children: [_jsx(Rule, {}), _jsx(Item, { icon: _jsx(LogOut, { size: 15, "aria-hidden": true }), label: "Log out", onPress: () => (menu.onOpenChange(false), host.signOut?.()) })] })) : null] }) }) })] }), _jsx(Create, { open: creating, onOpenChange: setCreating }), supporting ? _jsx(SupportPicker, { onClose: () => setSupporting(false) }) : null] }));
+                                            } }, o.name))) }), _jsx(Item, { icon: _jsx(Plus, { size: 15, "aria-hidden": true }), label: "Create organization", onPress: () => (menu.onOpenChange(false), setCreating(true)) }), _jsx(Item, { icon: _jsx(Settings, { size: 15, "aria-hidden": true }), label: "Organization settings", onPress: () => (menu.onOpenChange(false), window.location.assign(ORG_SETTINGS)) }), where().team ? null : here && !here.personal ? (_jsx(Item, { icon: _jsx(Users, { size: 15, "aria-hidden": true }), label: "Open in Hanzo Team", trail: _jsx(ExternalLink, { size: 13, "aria-hidden": true, opacity: 0.6 }), onPress: () => (menu.onOpenChange(false), window.location.assign(`${ENTRY}&org=${encodeURIComponent(here.name)}`)) })) : (_jsx(Item, { icon: _jsx(Users, { size: 15, "aria-hidden": true }), label: "Create a team", onPress: () => (menu.onOpenChange(false), setCreating(true)) })), superAdmin() ? (_jsx(Item, { icon: _jsx(Building2, { size: 15, "aria-hidden": true }), label: "All organizations", onPress: () => (menu.onOpenChange(false), setSupporting(true)) })) : null, _jsx(Rule, {}), _jsx(Item, { icon: _jsx(Sparkles, { size: 15, "aria-hidden": true }), label: "Add funds", sub: typeof tier?.balance?.effectiveAvailable === 'number' ? `Credits ${formatCents(tier.balance.effectiveAvailable)}` : 'Credits', onPress: () => (menu.onOpenChange(false), window.open(payPage(), '_blank', 'noopener')), trail: _jsx(ExternalLink, { size: 13, "aria-hidden": true, opacity: 0.6 }) }), _jsx(Item, { icon: _jsx(Settings, { size: 15, "aria-hidden": true }), label: "Settings", onPress: () => go(path({ kind: 'settings', section: 'general' })) }), _jsx(Item, { icon: _jsx(Gauge, { size: 15, "aria-hidden": true }), label: "Usage", onPress: () => go(path({ kind: 'settings', section: 'usage' })) }), _jsx(Item, { icon: _jsx(Sparkles, { size: 15, "aria-hidden": true }), label: "View all plans", onPress: () => go(path({ kind: 'screen', screen: 'plans' })) }), _jsx(Item, { icon: _jsx(LifeBuoy, { size: 15, "aria-hidden": true }), label: "Get help", onPress: () => (menu.onOpenChange(false), window.open(DOCS, '_blank', 'noopener,noreferrer')) }), host.signOut ? (_jsxs(_Fragment, { children: [_jsx(Rule, {}), _jsx(Item, { icon: _jsx(LogOut, { size: 15, "aria-hidden": true }), label: "Log out", onPress: () => (menu.onOpenChange(false), host.signOut?.()) })] })) : null] }) }) })] }), _jsx(Create, { open: creating, onOpenChange: setCreating }), supporting ? _jsx(SupportPicker, { onClose: () => setSupporting(false) }) : null] }));
 }
 /**
  * The sheet that creates an organization: a name, then `POST /v1/account/orgs`,

package/dist/Meet.js

@@ -1,11 +1,11 @@
 'use client';
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import { Video, VideoOff, Mic, MicOff, PhoneOff, Copy, Check, Plus, Calendar, ExternalLink, Bot, Volume2, Square, Send, UserPlus, Tv, LayoutGrid, ArrowRight, } from 'lucide-react';
+import { Video, VideoOff, Mic, MicOff, PhoneOff, Copy, Check, Plus, Calendar, ExternalLink, Bot, Volume2, Square, Send, UserPlus, Tv, LayoutGrid, ArrowRight, Captions, } from 'lucide-react';
 import { Text, View, XStack, YStack } from '@hanzo/gui';
 import { Button } from '@hanzo/ui';
 import { useIamToken } from '@hanzo/iam/react';
-import { REFUSED, speech, useVoice } from '@hanzo/voice';
+import { REFUSED, speech, useTranscript, useVoice } from '@hanzo/voice';
 import { Face, voiceOf } from './cast.js';
 import { member } from './team.js';
 import { cleanForSpeech, speakAgent, stopAgentSpeech, AudioWave, useAgentSpeech } from './speech.js';
@@ -220,8 +220,20 @@ export function Meet() {
         onUtterance: (transcript) => void handleSpokenInput(transcript),
     });
     const handsFreeSay = handsFree.say;
+    // LIVE TRANSCRIPT: what is said in the call lands in its notes as it settles,
+    // on Hanzo's growing transcript (/v1/audio/transcript), and the line under the
+    // notes shows the words still being decoded. Silence is neither decoded nor
+    // billed. No SpeechRecognition anywhere, so every browser that can record
+    // takes part.
+    const [caption, setCaption] = useState('');
+    const transcriber = useTranscript({
+        speech: ear,
+        onPartial: setCaption,
+        onSettled: (text) => setLiveNotes((prev) => [...prev, `${clock()}: You: ${text}`]),
+    });
+    const transcriberNote = transcriber.reason ?? (transcriber.refusal ? REFUSED.lost : null);
     const handleSpokenInput = useCallback(async (transcript) => {
-        const time = new Date().toLocaleTimeString().slice(0, 5);
+        const time = clock();
         setLiveNotes((prev) => [...prev, `${time}: You (voice): ${transcript}`]);
         try {
             const reply = await generateAgentMeetingResponse(transcript, activeCoPilotAgent, token);
@@ -238,7 +250,7 @@ export function Meet() {
         if (!q)
             return;
         setAgentQuestion('');
-        const time = new Date().toLocaleTimeString().slice(0, 5);
+        const time = clock();
         setLiveNotes((prev) => [...prev, `${time}: You: ${q}`]);
         try {
             const reply = await generateAgentMeetingResponse(q, activeCoPilotAgent, token);
@@ -263,9 +275,12 @@ export function Meet() {
                                     ['grid', 'Agent Grid', LayoutGrid],
                                 ].map(([view, label, Icon]) => (_jsxs(Button, { size: "sm", variant: meetingView === view ? 'primary' : 'ghost', ...(meetingView === view ? null : { color: '$soft' }), "aria-pressed": meetingView === view, onClick: () => setMeetingView(view), children: [_jsx(Icon, { size: 12 }), label] }, view))) }), botAssisting ? (_jsx(View, { display: "none", "$max-md": { display: 'flex' }, children: _jsxs(Button, { size: "sm", variant: copilot ? 'secondary' : 'default', onClick: () => setCopilot((v) => !v), "aria-label": "Co-pilot", "aria-expanded": copilot, "aria-controls": "meet-copilot", children: [_jsx(Bot, { size: 13 }), "Co-pilot"] }) })) : null, _jsxs(Button, { size: "sm", onClick: () => handleCopyLink(activeMeetingRoom), children: [copied ? _jsx(Check, { size: 13 }) : _jsx(Copy, { size: 13 }), copied ? 'Link Copied' : 'Copy Room Link'] }), _jsxs(Button, { size: "sm", variant: "destructive", onClick: () => {
                                     stopAgentSpeech();
-                                    // Leaving the call hangs up the hands-free conversation with it.
+                                    // Leaving the call hangs up the hands-free conversation and
+                                    // settles the transcript with it.
                                     if (handsFree.open)
                                         handsFree.toggle();
+                                    if (transcriber.open)
+                                        transcriber.toggle();
                                     setActiveMeetingRoom(null);
                                 }, children: [_jsx(PhoneOff, { size: 14 }), "Leave Call"] })] })) : (_jsx(XStack, { items: "center", gap: 8, shrink: 1, minW: "auto", children: _jsx(Button, { asChild: true, variant: "linkMuted", size: "sm", px: 0, children: _jsxs("a", { href: "https://meet.hanzo.ai", target: "_blank", rel: "noopener noreferrer", children: ["meet.hanzo.ai", _jsx(ExternalLink, { size: 12 })] }) }) }))] }), activeMeetingRoom ? (_jsxs(XStack, { flex: 1, overflow: "hidden", position: "relative", children: [_jsx(XStack, { flex: 1, minW: "auto", position: "relative", bg: "$sunken", children: meetingView === 'iframe' ? (_jsx(View, { render: _jsx("iframe", { src: `https://meet.hanzo.ai/${activeMeetingRoom}#config.prejoinPageEnabled=false&config.startWithAudioMuted=${!micOn}&config.startWithVideoMuted=${!cameraOn}`, allow: "camera; microphone; display-capture; autoplay; clipboard-write; speaker-selection; screen-wake-lock", title: `Hanzo Meet Room: ${activeMeetingRoom}` }), width: "100%", height: "100%", borderWidth: 0, bg: "$sunken" }, "stage")) : (_jsxs(View, { flex: 1, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 12, p: 16, overflowY: "auto", bg: "$background", children: [_jsx(YStack, { bg: "$panel", rounded: 12, borderWidth: 1, borderColor: "$borderColor", position: "relative", overflow: "hidden", items: "center", justify: "center", minH: 220, children: _jsxs(YStack, { items: "center", children: [_jsx(YStack, { width: 72, height: 72, rounded: 9999, bg: "$raised", items: "center", justify: "center", mb: 8, children: _jsx(Text, { fontSize: "$8", fontWeight: "700", color: "$ink", children: "You" }) }), _jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$ink", children: "Alex (Host)" }), _jsx(Text, { fontSize: "$1", color: micOn ? GOOD : '$soft', children: micOn ? 'Mic Active' : 'Muted' })] }) }), invitedAgents.map((agentName) => {
                                     const voice = voiceOf(agentName);
@@ -283,12 +298,12 @@ export function Meet() {
                             z: 'var(--z-sheet)',
                             borderLeftWidth: 0,
                         }, children: [_jsxs(XStack, { items: "center", justify: "space-between", children: [_jsxs(XStack, { items: "center", gap: 8, children: [_jsx(Face, { name: activeCoPilotAgent, size: 28 }), _jsxs(YStack, { children: [_jsx(Text, { fontSize: "$2", fontWeight: "700", color: "$ink", children: activeCoPilotAgent }), _jsxs(Text, { fontSize: FLOOR, color: "$faint", children: ["AI Co-pilot \u00B7 Voice: ", voiceOf(activeCoPilotAgent)] })] })] }), _jsx(Text, { fontSize: FLOOR, fontWeight: "700", color: GOOD, bg: "$hover", px: 6, py: 2, rounded: 4, children: "Live in call" })] }), _jsx(XStack, { gap: 4, flexWrap: "wrap", children: invitedAgents.map((agent) => (_jsx(Button, { size: "sm", variant: activeCoPilotAgent === agent ? 'secondary' : 'ghost', color: activeCoPilotAgent === agent ? '$ink' : '$soft', "aria-pressed": activeCoPilotAgent === agent, onClick: () => setActiveCoPilotAgent(agent), children: agent }, agent))) }), _jsxs(XStack, { gap: 8, children: [_jsx(Button, { size: "sm", flex: 1, variant: speaking ? 'secondary' : 'default', disabled: !speaking && !liveNotes.length, onClick: handleReadBriefing, children: speaking ? (_jsxs(_Fragment, { children: [_jsx(AudioWave, { active: true, color: "var(--state-success)" }), "Stop Briefing", _jsx(Square, { size: 11, fill: "currentColor" })] })) : (_jsxs(_Fragment, { children: [_jsx(Volume2, { size: 14 }), "Briefing"] })) }), _jsxs(Button, { size: "sm", variant: handsFree.open ? 'secondary' : 'default', "data-testid": "hands-free-voice-toggle", "data-state": handsFree.state, "data-refusal": handsFree.refusal ? handsFree.refusal.service : undefined, "aria-pressed": handsFree.open, disabled: !!handsFree.blocked, title: handsFreeNote ??
-                                            (handsFree.open ? 'Hands-Free Voice Active (Speaks and interrupts on voice)' : 'Enable Hands-Free Voice Mode'), onClick: handsFree.toggle, children: [_jsx(Mic, { size: 14, color: handsFree.open ? 'var(--state-success)' : 'currentColor' }), handsFree.open ? 'Hands-Free On' : 'Hands-Free'] })] }), handsFreeNote ? (_jsx(Text, { fontSize: "$1", color: "$soft", role: "status", children: handsFreeNote })) : null, _jsx(YStack, { flex: 1, overflowY: "auto", bg: "$background", rounded: 8, borderWidth: 1, borderColor: "$borderColor", p: 12, gap: 8, children: liveNotes.map((note, i) => (_jsx(Text, { fontSize: "$1", color: "$quiet", lineHeight: 16.5, pb: 8, borderBottomWidth: 1, borderBottomColor: "$borderColor", children: note }, i))) }), _jsxs(XStack, { render: "form", onSubmit: handleAskAgent, gap: 6, children: [_jsx(Text, { render: _jsx("input", { type: "text", value: agentQuestion, onChange: (e) => setAgentQuestion(e.target.value), placeholder: `Ask ${activeCoPilotAgent} in meeting...` }), flex: 1, bg: "$background", borderWidth: 1, borderColor: "var(--border-control)", rounded: 6, px: 10, py: 8, color: "$ink", fontSize: "$1", outlineStyle: "none" }), _jsx(Button, { type: "submit", variant: "primary", size: "icon-sm", disabled: !agentQuestion.trim(), "aria-label": "Ask", children: _jsx(Send, { size: 12 }) })] }), _jsxs(XStack, { gap: 8, children: [_jsx(Button, { size: "sm", flex: 1, disabled: !agentQuestion.trim(), title: "Add what is typed above to the notes, without asking the co-pilot", onClick: () => {
+                                            (handsFree.open ? 'Hands-Free Voice Active (Speaks and interrupts on voice)' : 'Enable Hands-Free Voice Mode'), onClick: handsFree.toggle, children: [_jsx(Mic, { size: 14, color: handsFree.open ? 'var(--state-success)' : 'currentColor' }), handsFree.open ? 'Hands-Free On' : 'Hands-Free'] }), _jsxs(Button, { size: "sm", variant: transcriber.open ? 'secondary' : 'default', "data-testid": "live-transcript-toggle", "data-state": transcriber.state, "data-refusal": transcriber.refusal ? transcriber.refusal.service : undefined, "aria-pressed": transcriber.open, disabled: !!transcriber.blocked, title: transcriberNote ?? (transcriber.open ? 'Transcribing — click to stop' : 'Transcribe what is said into the notes'), onClick: transcriber.toggle, children: [_jsx(Captions, { size: 14, color: transcriber.open ? 'var(--state-success)' : 'currentColor' }), transcriber.open ? 'Transcribing' : 'Transcribe'] })] }), handsFreeNote ? (_jsx(Text, { fontSize: "$1", color: "$soft", role: "status", children: handsFreeNote })) : null, transcriberNote ? (_jsx(Text, { fontSize: "$1", color: "$soft", role: "status", children: transcriberNote })) : null, _jsxs(YStack, { flex: 1, overflowY: "auto", bg: "$background", rounded: 8, borderWidth: 1, borderColor: "$borderColor", p: 12, gap: 8, children: [liveNotes.map((note, i) => (_jsx(Text, { fontSize: "$1", color: "$quiet", lineHeight: 16.5, pb: 8, borderBottomWidth: 1, borderBottomColor: "$borderColor", children: note }, i))), transcriber.open && caption ? (_jsx(Text, { "data-testid": "live-caption", fontSize: "$1", color: "$soft", lineHeight: 16.5, "aria-live": "polite", children: caption })) : null] }), _jsxs(XStack, { render: "form", onSubmit: handleAskAgent, gap: 6, children: [_jsx(Text, { render: _jsx("input", { type: "text", value: agentQuestion, onChange: (e) => setAgentQuestion(e.target.value), placeholder: `Ask ${activeCoPilotAgent} in meeting...` }), flex: 1, bg: "$background", borderWidth: 1, borderColor: "var(--border-control)", rounded: 6, px: 10, py: 8, color: "$ink", fontSize: "$1", outlineStyle: "none" }), _jsx(Button, { type: "submit", variant: "primary", size: "icon-sm", disabled: !agentQuestion.trim(), "aria-label": "Ask", children: _jsx(Send, { size: 12 }) })] }), _jsxs(XStack, { gap: 8, children: [_jsx(Button, { size: "sm", flex: 1, disabled: !agentQuestion.trim(), title: "Add what is typed above to the notes, without asking the co-pilot", onClick: () => {
                                             const note = agentQuestion.trim();
                                             if (!note)
                                                 return;
                                             setAgentQuestion('');
-                                            setLiveNotes((prev) => [...prev, `${new Date().toLocaleTimeString().slice(0, 5)}: You (note): ${note}`]);
+                                            setLiveNotes((prev) => [...prev, `${clock()}: You (note): ${note}`]);
                                         }, children: "+ Add Live Note" }), _jsx(Button, { variant: "primary", size: "sm", onClick: () => {
                                             const text = liveNotes.join('\n');
                                             navigator.clipboard.writeText(text);
@@ -311,3 +326,7 @@ export function Meet() {
                                                         setActiveMeetingRoom(m.roomName);
                                                     }, children: [_jsx(Video, { size: 12 }), "Join Call"] }), _jsx(Button, { size: "icon-sm", "aria-label": "Copy invite link", title: "Copy invite link", onClick: () => handleCopyLink(m.roomName), children: _jsx(Copy, { size: 12 }) })] })] }, m.id))) }), _jsxs(YStack, { mt: "auto", p: 12, bg: "$background", rounded: 8, borderWidth: 1, borderColor: "$borderColor", gap: 6, children: [_jsxs(XStack, { items: "center", gap: 8, children: [_jsx(Calendar, { size: 14, color: "var(--muted-foreground)" }), _jsx(Text, { fontSize: "$2", fontWeight: "700", color: "$ink", children: "Need to book a slot?" })] }), _jsx(Text, { fontSize: "$1", color: "$soft", children: "Use the Hanzo Calendar Scheduler to coordinate available times across team members and bots." }), _jsx(Button, { asChild: true, variant: "link", size: "sm", px: 0, justify: "flex-start", children: _jsxs("a", { href: "/cal", children: ["Open Calendar Scheduler", _jsx(ArrowRight, { size: 11 })] }) })] })] })] }))] }));
 }
+/** A note's time, as the reader's clock shows it: 4:22 PM, never "4:22:". */
+function clock() {
+    return new Date().toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+}

package/dist/ModeMark.d.ts

@@ -1,4 +1,4 @@
-/** The product's name in each mode: Hanzo AI in Chat, Hanzo Dev in Dev. */
+/** The product's name in each mode: the host's brand in Chat (Hanzo AI, Hanzo Team), Hanzo Dev in Dev. */
 export declare const wordmark: (mode: 'chat' | 'dev') => string;
 export declare function ModeMark({ mode, onChat, onDev, stacked, }: {
     mode: 'chat' | 'dev';

package/dist/ModeMark.js

@@ -2,8 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MessageSquare, Code2 } from 'lucide-react';
 import { XStack, YStack, Text, Tooltip, TooltipContent, TooltipTrigger } from '@hanzo/ui';
-/** The product's name in each mode: Hanzo AI in Chat, Hanzo Dev in Dev. */
-export const wordmark = (mode) => (mode === 'dev' ? 'Hanzo Dev' : 'Hanzo AI');
+import { brand } from './where.js';
+/** The product's name in each mode: the host's brand in Chat (Hanzo AI, Hanzo Team), Hanzo Dev in Dev. */
+export const wordmark = (mode) => (mode === 'dev' ? 'Hanzo Dev' : brand());
 /** One side of the switch: an icon button named for its mode, with the name as its tooltip. */
 function Side({ name, on, onPress, children }) {
     return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { children: _jsx(XStack, { render: "button", "aria-label": name, "aria-pressed": on, onPress: onPress, width: 28, height: 24, rounded: 999, items: "center", justify: "center", bg: on ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, cursor: "pointer", children: children }) }), _jsx(TooltipContent, { children: _jsx(Text, { fontSize: "$2", children: name }) })] }));

package/dist/Orgs.js

@@ -45,7 +45,7 @@ import { createInvitation, inviteLink } from './lib/invite.js';
 import { countSignup } from './lib/intent.js';
 import { BAD, mix } from './lib/mix.js';
 import { useRooms } from './host.js';
-import { site, where } from './where.js';
+import { brand, site, where } from './where.js';
 /** A template to set up once the organization is live. */
 const SETUP = 'hanzo:org:template';
 /** Checkout for a plan, coming back to this room. */
@@ -304,7 +304,7 @@ function Step({ at, of }) {
     return (_jsxs(Text, { render: "p", mb: 10, fontSize: "$2", fontFamily: "$mono", color: "$soft", children: ["Step ", at, " of ", of] }));
 }
 function Brand() {
-    return (_jsx(Text, { fontSize: "$6", fontWeight: "500", mb: 28, color: "var(--foreground)", children: where().brand ?? 'Hanzo' }));
+    return (_jsx(Text, { fontSize: "$6", fontWeight: "500", mb: 28, color: "var(--foreground)", children: brand() }));
 }
 /** The free rung's name in the billing catalog. */
 const FREE_TIER = 'free';

package/dist/Setup.js

@@ -15,7 +15,7 @@ import { firstRun } from '@hanzo/ui/onboarding';
 import { useKept } from './kept.js';
 import { orgs } from './lib/session.js';
 import { api } from './lib/api.js';
-import { site } from './where.js';
+import { brand, site } from './where.js';
 /** Put away in this browser. */
 const LATER = 'hanzo.onboarding.later';
 export function Setup() {
@@ -32,5 +32,5 @@ export function Setup() {
     }, [later]);
     if (later || !owed)
         return null;
-    return (_jsxs(XStack, { "data-slot": "setup", role: "region", "aria-label": "Set up Hanzo", items: "center", gap: "$2.5", px: "$3", py: "$2.5", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$edge", children: [_jsx(Sparkles, { size: 16, "aria-hidden": true }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: "Finish setting up Hanzo" }), _jsx(Text, { render: _jsx("a", { href: site(`/onboarding?next=${encodeURIComponent('/')}`) }), color: "var(--soft, var(--muted-foreground))", fontSize: "$1", textDecorationLine: "underline", self: "flex-start", children: "Set up" })] }), _jsx(XStack, { render: "button", "aria-label": "Not now", onPress: () => setLater(true), p: "$1", rounded: 999, hoverStyle: { bg: '$hover' }, children: _jsx(X, { size: 14, "aria-hidden": true }) })] }));
+    return (_jsxs(XStack, { "data-slot": "setup", role: "region", "aria-label": `Set up ${brand()}`, items: "center", gap: "$2.5", px: "$3", py: "$2.5", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$edge", children: [_jsx(Sparkles, { size: 16, "aria-hidden": true }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsxs(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: ["Finish setting up ", brand()] }), _jsx(Text, { render: _jsx("a", { href: site(`/onboarding?next=${encodeURIComponent('/')}`) }), color: "var(--soft, var(--muted-foreground))", fontSize: "$1", textDecorationLine: "underline", self: "flex-start", children: "Set up" })] }), _jsx(XStack, { render: "button", "aria-label": "Not now", onPress: () => setLater(true), p: "$1", rounded: 999, hoverStyle: { bg: '$hover' }, children: _jsx(X, { size: 14, "aria-hidden": true }) })] }));
 }

package/dist/Shared.js

@@ -16,6 +16,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useEffect, useState } from 'react';
 import { useIam } from '@hanzo/iam/react';
 import { Anchor, Button, Text, XStack, YStack } from '@hanzo/ui';
+import { brand } from './where.js';
 import { useHydrated } from './lib/hydrated.js';
 import { enter, LOGIN, signUp } from './lib/destination.js';
 import { Prose } from './Prose.js';
@@ -76,14 +77,14 @@ export function Shared() {
         : hydrated && !isLoading && aim && !('token' in aim) && !isAuthenticated
             ? { kind: 'ask' }
             : state;
-    return (_jsxs(YStack, { role: "main", height: "100dvh", overflowY: "auto", bg: "$background", children: [_jsxs(XStack, { height: 48, px: "$4", items: "center", justify: "space-between", borderBottomWidth: 1, borderColor: "$borderColor", shrink: 0, children: [_jsx(Anchor, { href: "/", "aria-label": "Hanzo", children: _jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", children: "Hanzo" }) }), shown.kind === 'read' && shown.shared.full ? (_jsx(Text, { fontSize: "$1", color: "$soft", children: "Shared with you \u00B7 Read only" })) : null] }), _jsx(YStack, { width: "100%", maxW: MEASURE, mx: "auto", px: "$4", py: "$6", gap: "$4", children: _jsx(Body, { state: shown, signedIn: Boolean(isAuthenticated), onOpen: () => setAgreed(true) }) })] }));
+    return (_jsxs(YStack, { role: "main", height: "100dvh", overflowY: "auto", bg: "$background", children: [_jsxs(XStack, { height: 48, px: "$4", items: "center", justify: "space-between", borderBottomWidth: 1, borderColor: "$borderColor", shrink: 0, children: [_jsx(Anchor, { href: "/", "aria-label": brand(), children: _jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", children: brand() }) }), shown.kind === 'read' && shown.shared.full ? (_jsx(Text, { fontSize: "$1", color: "$soft", children: "Shared with you \u00B7 Read only" })) : null] }), _jsx(YStack, { width: "100%", maxW: MEASURE, mx: "auto", px: "$4", py: "$6", gap: "$4", children: _jsx(Body, { state: shown, signedIn: Boolean(isAuthenticated), onOpen: () => setAgreed(true) }) })] }));
 }
 function Body({ state, signedIn, onOpen }) {
     if (state.kind === 'reading') {
         return (_jsx(Text, { fontSize: "$3", color: "$soft", "aria-live": "polite", children: "Opening the chat." }));
     }
     if (state.kind === 'missing' || state.kind === 'gone') {
-        return (_jsxs(YStack, { gap: "$3", items: "flex-start", children: [_jsx(Text, { render: "h1", fontSize: "$7", fontWeight: "600", color: "$ink", children: "This chat is no longer shared." }), _jsx(Text, { fontSize: "$3", color: "$soft", children: state.kind === 'missing' ? 'The link is incomplete. Ask for it again.' : 'The link was turned off, or it was never a link to a chat.' }), _jsx(Anchor, { href: "/", children: _jsx(Button, { size: "sm", variant: "outline", children: "Go to Hanzo" }) })] }));
+        return (_jsxs(YStack, { gap: "$3", items: "flex-start", children: [_jsx(Text, { render: "h1", fontSize: "$7", fontWeight: "600", color: "$ink", children: "This chat is no longer shared." }), _jsx(Text, { fontSize: "$3", color: "$soft", children: state.kind === 'missing' ? 'The link is incomplete. Ask for it again.' : 'The link was turned off, or it was never a link to a chat.' }), _jsx(Anchor, { href: "/", children: _jsxs(Button, { size: "sm", variant: "outline", children: ["Go to ", brand()] }) })] }));
     }
     if (state.kind === 'ask') {
         return _jsx(Ask, { signedIn: signedIn });

package/dist/Shell.js

@@ -113,7 +113,7 @@ const CONTROL = 28;
 import { getStoredPeople, getStoredAgents, getCustomThreads, createDirectChat, } from "./contacts-store.js";
 import { bare } from './lib/bare.js';
 import { BAD } from './lib/mix.js';
-import { site, where } from './where.js';
+import { brand, site, where } from './where.js';
 /**
  * The destinations, in rail order.
  *
@@ -128,7 +128,7 @@ const HOME = {
         return where().home;
     },
     get title() {
-        return where().brand ?? "Hanzo";
+        return brand();
     },
     label: "Home",
     // The chat bubble. Home IS the conversation with the org — the rooms it talks
@@ -152,7 +152,9 @@ const HOME = {
 const CHAT = {
     id: "chat",
     route: "/chat",
-    title: "Hanzo AI",
+    get title() {
+        return brand();
+    },
     label: "Chat",
     icon: MessageSquare,
     create: "New chat",
@@ -1206,7 +1208,7 @@ function Frame({ mode, children, navigate, back, forward, }) {
                                     return;
                                 e.preventDefault();
                                 navigate("/");
-                            }, "aria-label": "Hanzo home", title: "Home" }), "data-slot": "home", display: "flex", items: "center", justify: "center", width: 28, height: 28, color: "inherit", children: _jsx(HanzoMark, { size: 18 }) }), settled && isAuthenticated ? (_jsx(XStack, { shrink: 1, minW: 0, children: _jsx(OrgProjectSwitcher, { ...orgState, alwaysShow: true }) })) : null] }), _jsxs(YStack, { "data-slot": "places-list", px: "$2", pb: "$2", "$max-md": { display: "none" }, children: [places.filter((place) => matches(place.label, filter)).map((place) => (_jsx(SidebarItem, { icon: _jsx(place.icon, { size: 16, "aria-hidden": true }), active: place.id === mode, onPress: () => {
+                            }, "aria-label": `${brand()} home`, title: "Home" }), "data-slot": "home", display: "flex", items: "center", justify: "center", width: 28, height: 28, color: "inherit", children: _jsx(HanzoMark, { size: 18 }) }), settled && isAuthenticated ? (_jsx(XStack, { shrink: 1, minW: 0, children: _jsx(OrgProjectSwitcher, { ...orgState, alwaysShow: true }) })) : null] }), _jsxs(YStack, { "data-slot": "places-list", px: "$2", pb: "$2", "$max-md": { display: "none" }, children: [places.filter((place) => matches(place.label, filter)).map((place) => (_jsx(SidebarItem, { icon: _jsx(place.icon, { size: 16, "aria-hidden": true }), active: place.id === mode, onPress: () => {
                             navigate?.(place.route);
                             onPick?.();
                         }, children: place.label }, place.id))), matches("Settings", filter) ? (_jsx(SidebarItem, { icon: _jsx(Settings2, { size: 16, "aria-hidden": true }), onPress: () => showSettings(FIRST), children: "Settings" })) : null] }), _jsx(XStack, { px: "$3", pb: "$2", children: _jsxs(XStack, { flex: 1, height: 30, items: "center", gap: "$2", px: "$2", rounded: "$2", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(Search, { size: 13, "aria-hidden": true }), _jsx(Text, { render: _jsx("input", { value: filter, onChange: (e) => setFilter(e.target.value), onKeyDown: (e) => {

package/dist/index.d.ts

@@ -8,7 +8,7 @@
  * The root names what a host passes; each room is its own subpath, so a page
  * loads the rooms it draws and no others.
  */
-export { configure, where, site } from './where.js';
+export { configure, where, site, brand } from './where.js';
 export type { Addresses } from './where.js';
 export { Rooms, Look, useRooms, useLook, useOrg } from './host.js';
 export type { Router, Link, RoomsProps } from './host.js';

package/dist/index.js

@@ -8,5 +8,5 @@
  * The root names what a host passes; each room is its own subpath, so a page
  * loads the rooms it draws and no others.
  */
-export { configure, where, site } from './where.js';
+export { configure, where, site, brand } from './where.js';
 export { Rooms, Look, useRooms, useLook, useOrg } from './host.js';