@hanzo/build 0.2.52 → 0.2.54

package/lib/plan.js

@@ -0,0 +1,133 @@
+/**
+ * A plan as a person reads it, and how much of it is used.
+ *
+ * NAMED BY FAMILY. A slug is the catalog's rung (`max-20x`); a person reads the
+ * family — Free, Go, Pro, Max, Team, Agency, Enterprise — with the rung inside
+ * it as a small tag (`20x`). A slug outside the families reads as words
+ * (`growth-plus` is Growth Plus); one that is an id is never printed, and reads
+ * as the tier it is served under.
+ *
+ * MEASURED IN SHARES. `GET /v1/ai/limits` (cloud apps/ai/limits_ops.go) answers
+ * every window as a percent used, its state and when it starts over — the
+ * session, the UTC day, and each class's billing period — never an amount.
+ *
+ * THREE KINDS OF ACCOUNT, three meters: on a PLAN its windows are the meter, on
+ * FREE the free allowance left today is, and with CREDITS and no plan (pay as
+ * you go) the balance is. A plan's meter never shows money.
+ */
+/** The families, by the slug's first word. `dev` is the slug Pro is sold under. */
+const FAMILY = {
+    free: 'Free',
+    go: 'Go',
+    dev: 'Pro',
+    pro: 'Pro',
+    max: 'Max',
+    team: 'Team',
+    agency: 'Agency',
+    advisory: 'Agency',
+    dedicated: 'Agency',
+    pod: 'Agency',
+    enterprise: 'Enterprise',
+};
+/** The tier classes billing serves a rung under (`GET /v1/billing/tier` `tier.name`) that name a plan. */
+const TIER = { pro: 'Pro', enterprise: 'Enterprise' };
+/** A slug that is an id rather than a name: a UUID, a run of hex, a prefixed id, or digits. */
+const ID = /^[0-9a-f]{8}-[0-9a-f]{4}-|[0-9a-f]{12,}|^[a-z]+_[0-9a-z]{6,}$|^\d+$/i;
+/** A word as a title reads it; a multiple (`2x`) stays as it is. */
+const word = (w) => (/^\d+x$/.test(w) ? w : w.charAt(0).toUpperCase() + w.slice(1));
+/**
+ * A plan as a person reads it, from the slug billing serves (`max-20x`) and the
+ * tier class beside it (`pro`). Null where neither names a plan: no slug and a
+ * free or trial tier, which is no plan at all.
+ */
+export function label(slug, tier) {
+    const raw = (slug ?? '').trim().toLowerCase();
+    const fallback = () => {
+        const t = TIER[(tier ?? '').trim().toLowerCase()];
+        return t ? { name: t, tag: '' } : null;
+    };
+    if (!raw)
+        return fallback();
+    // A rung that is an id still IS a rung: the account is on a plan, so it reads as one.
+    if (ID.test(raw))
+        return fallback() ?? { name: 'Paid plan', tag: '' };
+    const s = raw.replace(/[\s_]+/g, '-');
+    const [head, ...rest] = s.split('-').filter(Boolean);
+    const family = FAMILY[head];
+    if (!family)
+        return { name: s.split('-').filter(Boolean).map(word).join(' '), tag: '' };
+    const tail = rest.join('-');
+    const tag = /^\d+x$/.test(tail) ? tail : /^(annual|yearly|year)$/.test(tail) ? 'Annual' : tail ? rest.map(word).join(' ') : '';
+    return { name: family, tag };
+}
+/** A label as a sentence says it: `Max 20x`. */
+export const said = (l) => (l ? (l.tag ? `${l.name} ${l.tag}` : l.name) : '');
+const STATES = ['ok', 'near', 'limited'];
+const obj = (v) => (v && typeof v === 'object' && !Array.isArray(v) ? v : null);
+/**
+ * One window off the wire, or null for a window that bounds nothing. The
+ * server states a window's state only when the plan sets it a limit
+ * (limits_ops.go `window`), so a window with no state is unbounded and not drawn.
+ */
+export function share(v) {
+    const o = obj(v);
+    const state = STATES.find((s) => s === o?.state);
+    if (!o || !state || typeof o.percent !== 'number' || !Number.isFinite(o.percent))
+        return null;
+    return {
+        percent: Math.min(100, Math.max(0, Math.round(o.percent))),
+        state,
+        resets: typeof o.resets_at === 'string' ? o.resets_at : '',
+    };
+}
+/**
+ * The meter for a plan slug (billing's or the limits', `free` or '' for none),
+ * the prepaid balance in cents (null where it could not be read) and the tier
+ * class billing serves the account under: a paid plan's windows — a rung, or a
+ * paid class with no rung (a plan recorded outside checkout, a partner org) —
+ * and with no plan, the balance where there is money in it, else the free
+ * allowance.
+ */
+export function kind(plan, balance, tier) {
+    const p = (plan ?? '').trim().toLowerCase();
+    if ((p && p !== 'free') || TIER[(tier ?? '').trim().toLowerCase()])
+        return 'plan';
+    return balance !== null && balance > 0 ? 'credits' : 'free';
+}
+/**
+ * When something starts over, as a sentence says it: a time for within a day
+ * (`5:00 PM`), else a date (`Nov 1`), periods ending on UTC days. '' for none.
+ */
+export function when(iso, now = Date.now()) {
+    const t = iso ? Date.parse(iso) : NaN;
+    if (Number.isNaN(t))
+        return '';
+    const d = new Date(t);
+    return t - now < 86_400_000
+        ? d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })
+        : d.toLocaleDateString('en-US', { timeZone: 'UTC', month: 'short', day: 'numeric' });
+}
+/** A class of model as a sentence names it. */
+const CLASS = { premium: 'premium', ours: 'Hanzo' };
+/**
+ * What a reader whose plan's included usage is used is told: the plan, which
+ * models, and when they come back — `Your Max 20x plan’s included premium model
+ * usage is used until 5:00 PM.`
+ */
+export function spent(l, classes, resets, now = Date.now()) {
+    const names = classes.map((c) => CLASS[c]).filter(Boolean);
+    const what = names.length ? `${names.join(' and ')} model usage` : 'usage';
+    const at = when(resets, now);
+    return `Your ${l ? `${said(l)} plan’s` : 'plan’s'} included ${what} is used${at ? ` until ${at}` : ''}.`;
+}
+/**
+ * The ways past a spent allowance, in this order and two at most: keep going
+ * on credits — or, with none the server would let pay, add some — then the
+ * upgrade; and a switch to another model where the server offers one. Taken
+ * from what the server sent, so nothing is offered that it would refuse.
+ */
+export function ways(actions) {
+    const pick = (kind) => actions.find((a) => a.kind === kind);
+    const topup = pick('topup');
+    return [pick('credits') ?? (topup ? { ...topup, label: 'Add credits' } : undefined), pick('upgrade'), pick('switch')].filter((a) => a !== undefined);
+}

package/lib/project.js

@@ -41,9 +41,10 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { SizableText, useMedia, XStack, YStack } from '@hanzo/gui';
 import { Clock, ExternalLink, MousePointerClick, PanelLeft, RefreshCcw, Share2, Upload, } from '@hanzogui/lucide-icons-2';
 import { Attachments, CHAT, Console, DEVICES, Feedback, FileTabs, FileTree, ModeSelect, PageSelect, PreviewFrame, ProjectChip, Suggestions, SUGGESTIONS, VIEWS, Views, Workspace, fold, } from '@hanzo/ui/agents';
-import { Composer, Message } from '@hanzo/ui/chat';
+import { Message } from '@hanzo/ui/chat';
 import { Button, Dialog, DialogContent, DialogTitle } from '@hanzo/ui';
 import { HanzoMark } from '@hanzo/ui/product';
+import { useDictation, useVoice } from '@hanzo/voice';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { read as pushed } from './api/changes.js';
 import { codebases, one } from './api/codebases.js';
@@ -52,17 +53,20 @@ import { blob, tree } from './api/git.js';
 import { declare } from './api/platform.js';
 import { address, deployments, name as repoName, ours, templates } from './api/projects.js';
 import { list, message, stop } from './api/sessions.js';
-import { decode, outcome, pull, said, who } from './api/turn.js';
+import { decode, outcome, pull, said, scrub, who } from './api/turn.js';
 import { verdict as record } from './api/verdict.js';
 import { useKept, useProjects, useRead, useRun } from './data.js';
 import { Merge } from './git.js';
 import { Grip } from './grip.js';
 import { useHost, useTarget } from './host.js';
 import { MODES } from './landing.js';
+import { useMind } from './mind.js';
 import { Out } from './out.js';
+import { Prompt, useEar } from './prompt.js';
+import { useSpoken } from './voice.js';
 import { Publish } from './publish.js';
 import { path } from './route.js';
-import { Attach, compose, Dictate, Files } from './tools.js';
+import { compose, Files, pick } from './tools.js';
 const LIVE = new Set(['running', 'paused']);
 /** How often a project being published is read again, ms. */
 const AGAIN = 5000;
@@ -196,6 +200,9 @@ export function Project({ at }) {
     const [note, setNote] = useState('');
     const [picked, setPicked] = useState([]);
     const [attached, setAttached] = useState([]);
+    // The model and effort Chat and New share, and dictation into the ask.
+    const mind = useMind(t);
+    const voice = useVoice({ speech: useEar(t), language: useSpoken(), ...useDictation(draft, setDraft) });
     const [bridge, setBridge] = useState(false);
     const [editing, setEditing] = useState(false);
     const [pageLines, setPageLines] = useState([]);
@@ -286,7 +293,7 @@ export function Project({ at }) {
             .map((e) => {
             // The console is where a run's error is read whole; the chat says it in one plain line.
             const body = decode(e.payload);
-            const error = e.kind === 'status' && body && typeof body === 'object' && typeof body.error === 'string' ? body.error : '';
+            const error = e.kind === 'status' && body && typeof body === 'object' && typeof body.error === 'string' ? scrub(body.error) : '';
             return {
                 id: `r${e.seq || e.id}`,
                 level: error || (e.kind === 'status' && /error/.test(said(e, run.record?.mode).toLowerCase())) ? 'error' : e.kind === 'tool-call' ? 'info' : 'log',
@@ -339,6 +346,9 @@ export function Project({ at }) {
                 base: named ? forge.value?.branch : project?.branch,
                 after: current ?? undefined,
                 mode,
+                // Enso named as itself: a run that names none takes the person's saved coding default.
+                model: mind.model,
+                effort: mind.effort,
             });
             setDraft('');
             setPicked([]);
@@ -407,9 +417,9 @@ export function Project({ at }) {
                                                 ? `${project.name} is loaded and nothing is published yet. Say what to change and it gets built.`
                                                 : named
                                                     ? `${named.org}/${named.name} is open on ${home}. Say what to change and it gets built there.`
-                                                    : `${slug} is loaded. Say what to change and it gets built.` })) : (ordered.map((r) => (_jsxs(YStack, { gap: "$2", children: [_jsx(Turn, { run: r, open: r.id === current, onOpen: () => setChosen(r.id), project: slug }), r.id === current ? (_jsxs(YStack, { gap: "$1", pl: "$2", borderLeftWidth: 1, borderColor: "$borderColor", children: [fold(run.events.map((e) => ({ kind: e.kind, actor: who(e.actor), seq: e.seq, id: e.id, text: said(e, run.record?.mode) })).filter((b) => b.text)).map((b) => (_jsx(SizableText, { size: "$1", color: "$soft", children: b.text }, b.key))), pr.href ? (_jsxs(XStack, { items: "center", gap: "$2", flexWrap: "wrap", children: [_jsxs(Out, { href: pr.href, label: `Open pull request ${pr.label}`, children: [_jsxs(SizableText, { size: "$1", color: "$ink", textDecorationLine: "underline", children: ["Pull request ", pr.label] }), _jsx(ExternalLink, { size: 11 })] }), _jsx(Merge, { session: r.id, open: proposing, onMerged: merged })] })) : null] })) : null] }, r.id)))) }), _jsxs(YStack, { "data-slot": "project-ask", px: "$3", pb: "$3", gap: "$2", minW: 0, $md: { pr: 0 }, children: [!dismissed && !running ? _jsx(Suggestions, { items: SUGGESTIONS, onPick: (s) => void send(s), onDismiss: () => setDismissed(true) }) : null, note ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note })) : null, picked.length ? _jsx(Attachments, { items: picked, onRemove: () => setPicked([]) }) : null, attached.length ? (_jsx(XStack, { gap: 6, flexWrap: "wrap", children: _jsx(Files, { files: attached, onFiles: setAttached }) })) : null, _jsxs(Composer, { value: draft, onChange: setDraft, onSend: () => void (current && running ? steer(current) : send()), onStop: current
+                                                    : `${slug} is loaded. Say what to change and it gets built.` })) : (ordered.map((r) => (_jsxs(YStack, { gap: "$2", children: [_jsx(Turn, { run: r, open: r.id === current, onOpen: () => setChosen(r.id), project: slug }), r.id === current ? (_jsxs(YStack, { gap: "$1", pl: "$2", borderLeftWidth: 1, borderColor: "$borderColor", children: [fold(run.events.map((e) => ({ kind: e.kind, actor: who(e.actor), seq: e.seq, id: e.id, text: said(e, run.record?.mode) })).filter((b) => b.text)).map((b) => (_jsx(SizableText, { size: "$1", color: "$soft", children: b.text }, b.key))), pr.href ? (_jsxs(XStack, { items: "center", gap: "$2", flexWrap: "wrap", children: [_jsxs(Out, { href: pr.href, label: `Open pull request ${pr.label}`, children: [_jsxs(SizableText, { size: "$1", color: "$ink", textDecorationLine: "underline", children: ["Pull request ", pr.label] }), _jsx(ExternalLink, { size: 11 })] }), _jsx(Merge, { session: r.id, open: proposing, onMerged: merged })] })) : null] })) : null] }, r.id)))) }), _jsxs(YStack, { "data-slot": "project-ask", px: "$3", pb: "$3", gap: "$2", minW: 0, $md: { pr: 0 }, children: [!dismissed && !running ? _jsx(Suggestions, { items: SUGGESTIONS, onPick: (s) => void send(s), onDismiss: () => setDismissed(true) }) : null, note ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note })) : null, picked.length ? _jsx(Attachments, { items: picked, onRemove: () => setPicked([]) }) : null, attached.length ? (_jsx(XStack, { gap: 6, flexWrap: "wrap", children: _jsx(Files, { files: attached, onFiles: setAttached }) })) : null, _jsx(Prompt, { framed: true, value: draft, onChange: setDraft, onSend: () => void (current && running ? steer(current) : send()), onStop: current
                             ? () => void stop(t, current).then(() => setNote('Stop requested — the run keeps its work on its branch'), (e) => setNote(e.message))
-                            : undefined, busy: busy || (running && !draft.trim()), rows: 3, placeholder: running ? 'Steer this run' : 'Ask Hanzo for edits', label: "Ask Hanzo for edits", children: [_jsx(Attach, { files: attached, onFiles: setAttached, onNote: setNote }), _jsx(XStack, { flex: 1 }), _jsx(ModeSelect, { modes: MODES, value: mode, onChange: (m) => setMode(m), self: "center" }), _jsx(Dictate, { onText: (said) => setDraft((d) => (d ? `${d} ${said}` : said)), onNote: setNote })] })] }), wide && !shut ? (_jsx(Grip, { side: "left", span: across, floor: CHAT_FLOOR, ceil: most, reset: CHAT_WIDTH, onSpan: setSplit, label: "Resize the chat", r: -GUTTER, width: GUTTER })) : null] }));
+                            : undefined, busy: busy || (running && !draft.trim()), placeholder: running ? 'Steer this run' : 'Ask Hanzo for edits', label: "Ask Hanzo for edits", onAttach: () => pick(attached, setAttached, setNote), tools: _jsx(ModeSelect, { modes: MODES, value: mode, onChange: (m) => setMode(m), bg: "transparent", minH: 24, px: "$1.5", self: "center" }), mind: running ? null : mind, voice: voice })] }), wide && !shut ? (_jsx(Grip, { side: "left", span: across, floor: CHAT_FLOOR, ceil: most, reset: CHAT_WIDTH, onSpan: setSplit, label: "Resize the chat", r: -GUTTER, width: GUTTER })) : null] }));
     // The preview stays loaded while another view is open, so coming back to it
     // is the page as it was left.
     const preview = (_jsxs(YStack, { "data-slot": "preview", flex: 1, minH: 0, minW: 0, gap: "$2", display: view === 'preview' ? 'flex' : 'none', children: [_jsxs(XStack, { "data-slot": "preview-bar", items: "center", gap: "$1.5", minW: 0, shrink: 0, "$max-md": { px: '$2' }, children: [_jsx(XStack, { render: "button", "aria-label": "Reload the preview", onPress: () => frame.current?.reload(), p: "$1.5", rounded: "$3", hoverStyle: { bg: '$hover' }, children: _jsx(RefreshCcw, { size: 16 }) }), _jsx(PageSelect, { pages: pages, value: page, onChange: setPage, shrink: 1 }), _jsx(XStack, { flex: 1 }), _jsx(Views, { views: DEVICES, value: device, onChange: (d) => setDevice(d), label: "Device", labels: "none" }), src ? (_jsx(Out, { href: src, label: "Open in a new tab", children: _jsx(XStack, { p: "$1.5", rounded: "$3", hoverStyle: { bg: '$hover' }, children: _jsx(ExternalLink, { size: 16 }) }) })) : null] }), _jsx(PreviewFrame, { ref: frame, src: src, title: `${title} preview`, device: device, onBridge: onBridge, empty: _jsxs(YStack, { items: "center", gap: "$2", p: "$6", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: stalled

package/lib/prompt.d.ts

@@ -0,0 +1,75 @@
+import { type ComposerProps } from '@hanzo/ui/chat';
+import { type PauseSource } from '@hanzo/ui/models';
+import { type Machine, type Speech } from '@hanzo/voice';
+import { type ReactNode } from 'react';
+import type { Target } from './api/call.ts';
+import { type Mind } from './mind.ts';
+/** The reading measure: @hanzo/design's prose width, which Width (appearance) retunes. */
+export declare const MEASURE = "var(--container-prose, 48rem)";
+/** The space between turns, px: one rhythm for Chat and Dev. */
+export declare const GAP = 20;
+/** The composer's width: the measure less the thread column's 0.75rem gutters, centred, so its edges are the text's. */
+export declare const measure: {
+    readonly width: 'calc(100% - 1.5rem)';
+    readonly maxW: "calc(var(--container-prose, 48rem) - 1.5rem)";
+    readonly mx: 'auto';
+};
+/** The round controls' box, px: a line of the footer row. */
+export declare const ROUND = 30;
+/**
+ * The frame as a pane of its own, floating on the pane it is drawn in: the
+ * `--pane-*` cut on design's first paper rung (a second rung's drop reads as a
+ * gradient through a translucent pane).
+ */
+export declare const cut: {
+    readonly bg: 'var(--pane-fill, var(--sheet-1))';
+    readonly rounded: 'var(--pane-round, var(--radius-xl))';
+    readonly borderWidth: 1;
+    readonly borderColor: 'var(--pane-edge, var(--white-08))';
+    readonly backdropFilter: 'var(--pane-blur, blur(20px) saturate(1.8))';
+    readonly boxShadow: 'var(--shadow-sheet-1)';
+};
+/** The platform's ear and voice for a target: dictation, talk and Listen all hear through it. */
+export declare function useEar(t: Target): Speech;
+export interface PromptOptions {
+    value: string;
+    onChange: (value: string) => void;
+    onSend: () => void;
+    /** Stop the turn in flight. Absent, busy only disables send. */
+    onStop?: () => void;
+    busy?: boolean;
+    disabled?: boolean;
+    /** Whether send is lit. Default: the draft has words. */
+    ready?: boolean;
+    placeholder?: string;
+    label?: string;
+    /** Above the frame, at its width: what the draft is sent with. */
+    head?: ReactNode;
+    field?: ComposerProps['field'];
+    /** The model and effort. Null where the next send uses neither (steering a run). */
+    mind?: Mind | null;
+    limits?: PauseSource | null;
+    /** The paperclip. Absent, there is none. */
+    onAttach?: () => void;
+    /** After the paperclip: what this surface alone offers (Dev's mode). */
+    tools?: ReactNode;
+    /** Dictation into the draft (@hanzo/voice `useVoice` + `useDictation`). */
+    voice?: Machine;
+    /** A spoken conversation (@hanzo/voice `useTalk`). */
+    talk?: Machine;
+    /** Drawn on a pane: the frame is cut as a pane of its own (`cut`). */
+    framed?: boolean;
+}
+/**
+ * The chip beside send, and the panel it opens: the effort, a sentence saying
+ * what serves the ask, and the model.
+ */
+export declare function Tune({ mind, limits, disabled }: {
+    mind: Mind;
+    limits?: PauseSource | null;
+    disabled?: boolean;
+}): import("react").JSX.Element;
+/** @hanzo/ui `Composer` props for the one composer. */
+export declare function prompt(o: PromptOptions): ComposerProps;
+/** The composer drawn on its own. */
+export declare function Prompt(o: PromptOptions): import("react").JSX.Element;

package/lib/prompt.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The composer, once, for Chat and Dev: the field, and under it in the frame
+ * the attach button and the surface's own tools at the start, then the model
+ * and effort (`Tune`), dictation, talk and send at the end.
+ *
+ * `prompt` builds @hanzo/ui's `Composer` props, so a surface that draws the
+ * composer through `Chat` (its `composer` prop) and one that draws it directly
+ * (`<Prompt>`) draw the same thing. What each surface sends, and what it puts
+ * above the frame (`head`), stays its own.
+ *
+ * The frame is as wide as the text above it: the reading measure, less the
+ * thread column's own gutters, centred (`measure`). A transcript reads at
+ * `MEASURE` and this lines up with its words.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { ArrowUp, AudioLines, Check, ChevronDown, Mic, Paperclip, Square } from '@hanzogui/lucide-icons-2';
+import { Control } from '@hanzo/composer';
+import { Popover, PopoverContent, PopoverTrigger, Separator, Tooltip, TooltipContent, TooltipTrigger } from '@hanzo/ui';
+import { Composer } from '@hanzo/ui/chat';
+import { ModelPicker } from '@hanzo/ui/models';
+import { speech, Voice } from '@hanzo/voice';
+import { useMemo, useState } from 'react';
+import { ENSO } from './api/models.js';
+import { EFFORTS, nameOf, reasons } from './mind.js';
+/** The reading measure: @hanzo/design's prose width, which Width (appearance) retunes. */
+export const MEASURE = 'var(--container-prose, 48rem)';
+/** The space between turns, px: one rhythm for Chat and Dev. */
+export const GAP = 20;
+/** The composer's width: the measure less the thread column's 0.75rem gutters, centred, so its edges are the text's. */
+export const measure = { width: 'calc(100% - 1.5rem)', maxW: `calc(${MEASURE} - 1.5rem)`, mx: 'auto' };
+/** The round controls' box, px: a line of the footer row. */
+export const ROUND = 30;
+/**
+ * The frame as a pane of its own, floating on the pane it is drawn in: the
+ * `--pane-*` cut on design's first paper rung (a second rung's drop reads as a
+ * gradient through a translucent pane).
+ */
+export const cut = {
+    bg: 'var(--pane-fill, var(--sheet-1))',
+    rounded: 'var(--pane-round, var(--radius-xl))',
+    borderWidth: 1,
+    borderColor: 'var(--pane-edge, var(--white-08))',
+    backdropFilter: 'var(--pane-blur, blur(20px) saturate(1.8))',
+    boxShadow: 'var(--shadow-sheet-1)',
+};
+/** The platform's ear and voice for a target: dictation, talk and Listen all hear through it. */
+export function useEar(t) {
+    return useMemo(() => speech({ baseUrl: t.api, token: t.token, ...(t.org ? { org: t.org } : {}) }), [t]);
+}
+/** Enso's mark: the ring. */
+function Ring() {
+    return _jsx(YStack, { "aria-hidden": true, width: 12, height: 12, rounded: 99, borderWidth: 1.5, borderColor: "$ink", shrink: 0 });
+}
+/**
+ * The chip beside send, and the panel it opens: the effort, a sentence saying
+ * what serves the ask, and the model.
+ */
+export function Tune({ mind, limits, disabled = false }) {
+    const [open, setOpen] = useState(false);
+    const name = nameOf(mind.model, mind.models);
+    const thinks = reasons(mind.model, mind.models);
+    const pace = EFFORTS.find((e) => e.id === mind.effort);
+    const routed = mind.model === ENSO;
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, allowFlip: true, children: [_jsx(PopoverTrigger, { disabled: disabled, children: _jsxs(XStack, { "data-slot": "mind", role: "button", tabIndex: disabled ? -1 : 0, "aria-label": thinks ? `Model and effort: ${name}, ${pace.label}` : `Model: ${name}`, "aria-haspopup": "dialog", "aria-expanded": open, items: "center", gap: "$1.5", px: "$2.5", height: 30, maxW: 220, rounded: "$10", borderWidth: 1, borderColor: "$borderColor", cursor: disabled ? 'default' : 'pointer', hoverStyle: disabled ? undefined : { bg: '$hover' }, focusVisibleStyle: { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' }, opacity: disabled ? 0.4 : 1, onKeyDown: (e) => {
+                        if (disabled || (e.key !== 'Enter' && e.key !== ' ' && e.key !== 'ArrowUp' && e.key !== 'ArrowDown'))
+                            return;
+                        e.preventDefault?.();
+                        setOpen(true);
+                    }, children: [routed ? _jsx(Ring, {}) : null, _jsx(SizableText, { size: "$1", color: "$ink", fontWeight: "600", numberOfLines: 1, minW: 0, shrink: 1, children: name }), thinks ? (_jsx(SizableText, { size: "$1", color: "$soft", fontWeight: "500", shrink: 0, children: pace.label })) : null, _jsx(ChevronDown, { size: 12, color: "$soft", "aria-hidden": true })] }) }), _jsx(PopoverContent, { solid: true, align: "end", p: 6, width: 280, children: _jsxs(YStack, { gap: "$1", "data-slot": "mind-panel", role: "dialog", "aria-label": "Model and effort", children: [EFFORTS.map((e) => (_jsxs(XStack, { render: "button", role: "button", "aria-pressed": e.id === mind.effort, "aria-disabled": !thinks || undefined, onPress: () => {
+                                if (!thinks)
+                                    return;
+                                mind.pace(e.id);
+                                setOpen(false);
+                            }, items: "center", gap: "$2", px: "$2", py: "$2", rounded: "$3", width: "100%", opacity: thinks ? 1 : 0.45, cursor: thinks ? 'pointer' : 'default', hoverStyle: thinks ? { bg: '$hover' } : undefined, children: [_jsxs(YStack, { flex: 1, minW: 0, items: "flex-start", children: [_jsx(SizableText, { size: "$2", color: "$ink", style: { textAlign: 'left' }, children: e.label }), _jsx(SizableText, { size: "$1", color: "$soft", style: { textAlign: 'left' }, children: e.note })] }), e.id === mind.effort && thinks ? _jsx(Check, { size: 14, "aria-hidden": true }) : null] }, e.id))), _jsx(Separator, { my: "$1" }), _jsxs(YStack, { px: "$2", pt: "$1", pb: "$2", gap: "$2", children: [_jsx(SizableText, { size: "$1", color: "$soft", "data-slot": "mind-note", children: routed
+                                        ? 'Enso picks the model for each message and step. Pick one to use it instead.'
+                                        : `${name} answers every message and step${thinks ? '' : ', without an effort setting'}.` }), routed ? null : (_jsxs(XStack, { render: "button", role: "button", "aria-label": "Use Enso", onPress: () => {
+                                        mind.pick(ENSO);
+                                        setOpen(false);
+                                    }, items: "center", gap: "$2", px: "$2", height: 28, rounded: "$3", self: "flex-start", borderWidth: 1, borderColor: "$borderColor", cursor: "pointer", hoverStyle: { bg: '$hover' }, children: [_jsx(Ring, {}), _jsx(SizableText, { size: "$1", color: "$ink", children: "Use Enso" })] })), _jsx(ModelPicker, { size: "sm", name: "Model", models: mind.models, limits: limits, 
+                                    // The router is named on the chip; a catalog that does not list it leaves the picker open.
+                                    value: routed && !mind.models.some((m) => m.id === ENSO) ? undefined : mind.model, placeholder: "Pick a model", onChange: (id) => {
+                                        mind.pick(id);
+                                        setOpen(false);
+                                    }, loading: mind.loading, error: mind.error })] })] }) })] }));
+}
+/** The paperclip, with its name on hover. */
+function Attach({ onAttach, disabled }) {
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { children: _jsx(Control, { type: "button", size: ROUND, "aria-label": "Attach files", "aria-disabled": disabled || undefined, onClick: disabled ? undefined : onAttach, children: _jsx(Paperclip, { size: 15 }) }) }), _jsx(TooltipContent, { children: _jsx(SizableText, { size: "$2", children: "Attach files" }) })] }));
+}
+/** @hanzo/ui `Composer` props for the one composer. */
+export function prompt(o) {
+    const lit = o.ready ?? Boolean(o.value.trim());
+    const busy = Boolean(o.busy);
+    const disabled = Boolean(o.disabled);
+    const live = busy ? Boolean(o.onStop) : lit && !disabled;
+    return {
+        value: o.value,
+        onChange: o.onChange,
+        onSend: o.onSend,
+        ...(o.onStop ? { onStop: o.onStop } : {}),
+        busy,
+        disabled,
+        ...(o.placeholder ? { placeholder: o.placeholder } : {}),
+        ...(o.label ? { label: o.label } : {}),
+        ...(o.field ? { field: o.field } : {}),
+        // Above the frame and at its width, so a chip lines up with the field's edge.
+        head: o.head ? (_jsx(YStack, { ...measure, gap: "$1.5", "data-slot": "prompt-head", children: o.head })) : undefined,
+        ...measure,
+        ...(o.framed ? cut : null),
+        children: (_jsxs(XStack, { items: "center", gap: "$2", "data-slot": "prompt-start", children: [o.onAttach ? _jsx(Attach, { onAttach: o.onAttach, disabled: disabled }) : null, o.tools] })),
+        send: (_jsxs(XStack, { items: "center", gap: "$2", "data-slot": "prompt-end", children: [o.mind ? _jsx(Tune, { mind: o.mind, limits: o.limits, disabled: disabled && !busy }) : null, o.voice ? (_jsx(Control, { asChild: true, size: ROUND, children: _jsx(Voice, { voice: o.voice, disabled: disabled, says: { idle: 'Dictate', listening: 'Dictating — click to stop' }, children: (state) => _jsx(Mic, { size: 15, fill: state === 'idle' ? 'none' : 'currentColor' }) }) })) : null, o.talk ? (_jsx(Control, { asChild: true, size: ROUND, children: _jsx(Voice, { voice: o.talk, disabled: disabled, "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 }) }) })) : null, _jsx(Control, { type: "button", size: ROUND, fill: true, "data-slot": "composer-send", "aria-label": busy ? 'Stop' : 'Send', "aria-disabled": !live || undefined, opacity: live ? 1 : 0.4, onClick: () => {
+                        if (!live)
+                            return;
+                        if (busy)
+                            o.onStop?.();
+                        else
+                            o.onSend();
+                    }, children: busy ? _jsx(Square, { size: 13, fill: "currentColor" }) : _jsx(ArrowUp, { size: 15, strokeWidth: 2.5 }) })] })),
+    };
+}
+/** The composer drawn on its own. */
+export function Prompt(o) {
+    return _jsx(Composer, { ...prompt(o) });
+}

package/lib/prose.js

@@ -6,6 +6,10 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * only the part agents use. Nothing here produces HTML from the text: every
  * piece is a React element holding a string, and a link is drawn only for an
  * http(s) address, opened in a new tab.
+ *
+ * Set at Chat's sizes (@hanzo/rooms `Prose`): running text at $2 on a $3 line,
+ * headings a rung apart from $6, code in @hanzo/ui's `Code`, blocks $2 apart,
+ * so an answer reads the same in Chat and in a run.
  */
 import { ScrollView, SizableText, XStack, YStack } from '@hanzo/gui';
 import { Code } from '@hanzo/ui/chat';
@@ -16,38 +20,38 @@ function Inline({ text }) {
     return (_jsx(_Fragment, { children: spans(text).map((s, i) => {
             switch (s.kind) {
                 case 'code':
-                    return (_jsx(SizableText, { size: "$2", color: "$ink", bg: "$hover", px: "$1", rounded: "$1", style: mono, children: s.text }, i));
+                    return (_jsx(SizableText, { size: "$1", color: "$ink", bg: "$hover", px: "$1", rounded: "$1", style: mono, children: s.text }, i));
                 case 'strong':
-                    return (_jsx(SizableText, { size: "$3", color: "$ink", fontWeight: "600", children: s.text }, i));
+                    return (_jsx(SizableText, { size: "$2", lineHeight: "$3", color: "$ink", fontWeight: "600", children: s.text }, i));
                 case 'em':
-                    return (_jsx(SizableText, { size: "$3", color: "$ink", fontStyle: "italic", children: s.text }, i));
+                    return (_jsx(SizableText, { size: "$2", lineHeight: "$3", color: "$ink", fontStyle: "italic", children: s.text }, i));
                 case 'link':
-                    return (_jsx(Out, { href: s.href, children: _jsx(SizableText, { size: "$3", color: "$ink", textDecorationLine: "underline", children: s.text }) }, i));
+                    return (_jsx(Out, { href: s.href, children: _jsx(SizableText, { size: "$2", lineHeight: "$3", color: "$ink", textDecorationLine: "underline", children: s.text }) }, i));
                 default:
                     return s.text;
             }
         }) }));
 }
-const SIZES = ['$6', '$5', '$4', '$4', '$3', '$3'];
+const SIZES = ['$6', '$4', '$3', '$2', '$2', '$2'];
 function Draw({ block }) {
     switch (block.kind) {
         case 'heading':
-            return (_jsx(SizableText, { size: SIZES[block.level - 1], color: "$ink", fontWeight: "600", pt: "$1", children: _jsx(Inline, { text: block.text }) }));
+            return (_jsx(SizableText, { size: SIZES[block.level - 1], color: "$ink", fontWeight: "600", children: _jsx(Inline, { text: block.text }) }));
         case 'code':
             return (_jsx(Code, { language: block.lang || 'text', value: block.text, children: block.text }));
         case 'rule':
             return _jsx(YStack, { height: 1, bg: "$borderColor", my: "$1" });
         case 'quote':
-            return (_jsx(YStack, { borderLeftWidth: 2, borderColor: "$borderColor", pl: "$3", children: _jsx(SizableText, { size: "$3", color: "$soft", children: _jsx(Inline, { text: block.text }) }) }));
+            return (_jsx(YStack, { borderLeftWidth: 2, borderColor: "$borderColor", pl: "$3", children: _jsx(SizableText, { size: "$2", lineHeight: "$3", color: "$soft", children: _jsx(Inline, { text: block.text }) }) }));
         case 'list':
-            return (_jsx(YStack, { gap: "$1", role: "list", children: block.items.map((item, i) => (_jsxs(XStack, { gap: "$2", pl: item.depth * 16, role: "listitem", children: [_jsx(SizableText, { size: "$3", color: "$soft", minW: 16, style: { textAlign: 'right' }, children: block.ordered ? `${block.start + i}.` : '•' }), _jsx(SizableText, { flex: 1, minW: 0, size: "$3", color: "$ink", children: _jsx(Inline, { text: item.text }) })] }, i))) }));
+            return (_jsx(YStack, { gap: "$1", role: "list", children: block.items.map((item, i) => (_jsxs(XStack, { gap: "$1", pl: item.depth * 16, role: "listitem", children: [_jsx(SizableText, { size: "$2", lineHeight: "$3", color: "$soft", minW: 14, style: { textAlign: 'right' }, children: block.ordered ? `${block.start + i}.` : '•' }), _jsx(SizableText, { flex: 1, minW: 0, size: "$2", lineHeight: "$3", color: "$ink", children: _jsx(Inline, { text: item.text }) })] }, i))) }));
         case 'table':
             return (_jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: _jsx(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", minW: "100%", children: [block.head, ...block.rows].map((row, r) => (_jsx(XStack, { borderTopWidth: r ? 1 : 0, borderColor: "$borderColor", bg: r ? 'transparent' : '$hover', children: block.head.map((_, c) => (_jsx(SizableText, { flex: 1, minW: 96, px: "$2", py: "$1.5", size: "$2", color: "$ink", fontWeight: r ? '400' : '600', children: _jsx(Inline, { text: row[c] ?? '' }) }, c))) }, r))) }) }));
         default:
-            return (_jsx(SizableText, { size: "$3", color: "$ink", children: _jsx(Inline, { text: block.text }) }));
+            return (_jsx(SizableText, { size: "$2", lineHeight: "$3", color: "$ink", children: _jsx(Inline, { text: block.text }) }));
     }
 }
 /** A markdown text, drawn. */
 export function Prose({ text }) {
-    return (_jsx(YStack, { gap: "$2.5", minW: 0, children: blocks(text).map((b, i) => (_jsx(Draw, { block: b }, i))) }));
+    return (_jsx(YStack, { "data-slot": "prose", gap: "$2", minW: 0, children: blocks(text).map((b, i) => (_jsx(Draw, { block: b }, i))) }));
 }

package/lib/reply.d.ts

@@ -0,0 +1,36 @@
+import { type ReactNode } from 'react';
+import type { Target } from './api/call.ts';
+/** A fenced block an answer wrote out. */
+export interface Artifact {
+    /** The name it was given, or what it is: `index.html`, `html block`. */
+    name: string;
+    body: string;
+    /** What a browser should take it as. */
+    mime: string;
+}
+/** Every fenced block in `text`, in order. */
+export declare function artifacts(text: string): Artifact[];
+/** Whether a browser draws it as a page or a picture rather than as source. */
+export declare const renders: (a: Artifact) => boolean;
+/** The artifact worth opening first: the last page or picture, else the last block. */
+export declare function lead(list: readonly Artifact[]): Artifact | null;
+/** An address for an artifact's own bytes, typed so a browser renders it. */
+export declare const blob: (a: Artifact) => string;
+/** Markdown as a sentence a voice can read: code said as code, marks dropped. */
+export declare function speakable(raw: string): string;
+/** Reads `text` aloud, calls `done` when it stops for any reason, and answers the way to stop it. */
+export type Listen = (text: string, done: () => void) => () => void;
+/** A reader on the platform's voice (`/v1/audio/speech`), one reply at a time on the page. */
+export declare function speaker(t: Target): Listen;
+/** Copy, Listen and Open under an answer; `children` follow them. */
+export declare function Reply({ text, listen, onOpen, children }: {
+    text: string;
+    listen?: Listen;
+    onOpen?: () => void;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/** Which model answered, where the gateway says it was not the one asked for or a router. */
+export declare function Served({ served, asked }: {
+    served: string;
+    asked?: string;
+}): import("react").JSX.Element;