@hanzo/build 0.2.51 → 0.2.53

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.d.ts

@@ -1,3 +1,18 @@
-export declare function Project({ slug }: {
+import { type Project as Row } from './api/projects.ts';
+/** What a workspace is opened on: a repository on the forge, or a deployed site by its slug. */
+export type Where = {
     slug: string;
+} | {
+    org: string;
+    name: string;
+};
+/** Whether the site `p` is the repository `r`'s: built from it, or named as it is. */
+export declare function siteOf(p: Row, r: {
+    org: string;
+    name: string;
+}): boolean;
+/** A site's slug for a repository's name: lowercase letters, digits and hyphens, at most 40. */
+export declare function slugOf(name: string): string;
+export declare function Project({ at }: {
+    at: Where;
 }): import("react").JSX.Element;

package/lib/project.js

@@ -3,6 +3,11 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * A project's workspace, in the same window: the chat on the left, what it
  * built on the right.
  *
+ * A project is a repository on the forge, addressed `<org>/<repo>`; the site it
+ * publishes to, when it has one, is the org's project row on that repository
+ * (or of the same name). A deployed site with no repository on the forge is
+ * opened by its slug (Artifacts), and works the same way.
+ *
  *   bar     mark · project · history · chat toggle | Preview Files Code Layers |
  *           Share · Publish
  *   left    the project's runs as a conversation, suggestions, and the ask
@@ -36,27 +41,32 @@ 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';
 import { start } from './api/coding.js';
 import { blob, tree } from './api/git.js';
 import { declare } from './api/platform.js';
-import { deployments, name as repoName, ours, templates } from './api/projects.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 { pane as cut } from './pane.js';
+import { Prompt, useEar } from './prompt.js';
+import { useSpoken } from './voice.js';
 import { Publish } from './publish.js';
-import { Attach, compose, Dictate, Files } from './tools.js';
+import { path } from './route.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;
@@ -70,6 +80,20 @@ const CHAT_CEIL = 640;
 const GUTTER = 12;
 /** What the work keeps beside the chat however wide the chat was asked to be, px. */
 const WORK = 400 + 2 * GUTTER;
+/** Whether the site `p` is the repository `r`'s: built from it, or named as it is. */
+export function siteOf(p, r) {
+    const want = `${r.org}/${r.name}`.toLowerCase();
+    return (p.repo !== '' && address(p.repo).toLowerCase() === want) || p.slug === r.name.toLowerCase();
+}
+/** A site's slug for a repository's name: lowercase letters, digits and hyphens, at most 40. */
+export function slugOf(name) {
+    return name
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '')
+        .slice(0, 40)
+        .replace(/-+$/, '');
+}
 /** One run in the conversation: what was asked, and what it came to. */
 function Turn({ run, open, onOpen, project }) {
     const t = useTarget();
@@ -83,12 +107,18 @@ function Turn({ run, open, onOpen, project }) {
                                 });
                             } }), note ? (_jsx(SizableText, { size: "$1", color: "$soft", children: note })) : null, !open ? (_jsx(XStack, { render: "button", onPress: onOpen, hitSlop: 8, children: _jsx(SizableText, { size: "$1", color: "$soft", textDecorationLine: "underline", children: "Show steps" }) })) : null] }), children: _jsx(SizableText, { size: "$2", color: "$ink", children: run.status === 'done' ? 'Done.' : run.status === 'error' ? 'This run hit an error.' : run.status === 'stopped' ? 'Stopped.' : 'Working…' }) })] }));
 }
-export function Project({ slug }) {
+export function Project({ at }) {
     const host = useHost();
     const t = useTarget();
     const signed = Boolean(host.person);
     const all = useProjects(t, signed);
-    const project = all.value.find((p) => p.slug === slug) ?? null;
+    // The repository the address names, and the forge's record of it.
+    const named = 'slug' in at ? null : at;
+    const forge = useRead(named && signed ? () => one(t, named.name) : null, null, [t, signed, named?.name]);
+    const project = all.value.find((p) => (named ? siteOf(p, named) : 'slug' in at && p.slug === at.slug)) ?? null;
+    // The site this workspace publishes to: the project's, or the repository's name as one.
+    const slug = project?.slug ?? ('slug' in at ? at.slug : slugOf(named?.name ?? ''));
+    const title = project?.name ?? named?.name ?? slug;
     // A project that has never served reads `building` while it is published, and
     // is read again until it is live or its build failed.
     const building = project?.status === 'building';
@@ -113,12 +143,15 @@ export function Project({ slug }) {
     const stalled = building && ran > STALL;
     // Publish again: the project's repository, built at its branch, the way Publish builds it.
     const [redo, setRedo] = useState({ busy: false, error: '' });
+    // The repository's clone address: the forge's for a repository, the site's own otherwise.
+    const clone = named ? (forge.value?.clone ?? '') : (project?.repo ?? '');
+    const home = named ? (forge.value?.branch ?? 'main') : project?.branch || 'main';
     const retry = async () => {
-        if (!project?.repo || redo.busy)
+        if (!clone || redo.busy)
             return;
         setRedo({ busy: true, error: '' });
         try {
-            await declare(t, { repo: project.repo, ref: project.branch || 'main', name: slug, project: slug, mode: 'branch' });
+            await declare(t, { repo: clone, ref: home, name: slug, project: slug, mode: 'branch' });
             setNow(Date.now());
             again();
             setRedo({ busy: false, error: '' });
@@ -127,11 +160,14 @@ export function Project({ slug }) {
             setRedo({ busy: false, error: e.message });
         }
     };
-    const listed = useRead(signed ? () => list(t, { kind: 'coding', project: slug, limit: 50 }) : null, [], [t, signed, slug]);
+    // The site's runs, or the org's when the repository has no site yet.
+    const sited = !named || Boolean(project);
+    const listed = useRead(signed ? () => list(t, sited ? { kind: 'coding', project: slug, limit: 50 } : { kind: 'coding', limit: 50 }) : null, [], [t, signed, slug, sited]);
     // Only the runs on this project's own repository: a record can be moved into
     // any project, and a run's branch is what Files, Code and Publish read.
-    const runs = { ...listed, value: listed.value.filter((r) => ours(r.repo, project?.repo ?? '')) };
-    const ordered = useMemo(() => [...runs.value].reverse(), [listed.value, project?.repo]);
+    const mine = (r) => (named ? ours(r.repo, `${named.org}/${named.name}`) && Boolean(r.repo) : ours(r.repo, project?.repo ?? ''));
+    const runs = { ...listed, value: listed.value.filter(mine) };
+    const ordered = useMemo(() => [...runs.value].reverse(), [listed.value, project?.repo, named?.org, named?.name]);
     const [chosen, setChosen] = useState(null);
     const current = chosen ?? runs.value[0]?.id ?? null;
     const run = useRun(t, current);
@@ -149,6 +185,12 @@ export function Project({ slug }) {
     // Below md the chat and the work take turns, and Chat is one more view to switch back to.
     const [pane, setPane] = useState('chat');
     const wide = useMedia().md;
+    // A workspace too narrow for the chat at its floor and the work at its room
+    // (a tablet beside the host's column) shows the work, and the chat when asked:
+    // never both cut. Asked here is for this visit; the kept choice is the wide one's.
+    const cramped = wide && room > 0 && room < CHAT_FLOOR + WORK;
+    const [asked, setAsked] = useState(false);
+    const shut = cramped ? !asked : collapsed;
     const [dock, setDock] = useKept('hanzo.build.dock', 36);
     const [dismissed, setDismissed] = useKept(`hanzo.build.hints.${slug}`, false);
     const [mode, setMode] = useKept('hanzo.build.mode', 'build');
@@ -158,12 +200,16 @@ export function Project({ slug }) {
     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([]);
     const [history, setHistory] = useState(false);
     const [publish, setPublish] = useState(null);
     const [switcher, setSwitcher] = useState(false);
+    const repos = useRead(switcher && signed ? () => codebases(t) : null, [], [t, switcher, signed]);
     const frame = useRef(null);
     // What was published may be new files at the same address: the project is read
     // for its address, and the frame loads again.
@@ -196,8 +242,8 @@ export function Project({ slug }) {
     // Files is drawn again after a merge, from what the forge holds now.
     const [round, setRound] = useState(0);
     // Files and Code: native git, at the branch the open run pushed (or the project's own).
-    const repo = project?.repo ? repoName(project.repo) : '';
-    const ref = run.record?.branch || project?.branch || 'main';
+    const repo = named ? named.name : project?.repo ? repoName(project.repo) : '';
+    const ref = run.record?.branch || home;
     const [files, setFiles] = useState([]);
     const [file, setFile] = useState(null);
     useEffect(() => {
@@ -247,7 +293,7 @@ export function Project({ slug }) {
             .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',
@@ -294,11 +340,15 @@ export function Project({ slug }) {
             // A project with no repository yet sends neither, and its first run makes one.
             const next = await start(t, {
                 prompt: compose(`${ask}${context}`, attached),
-                project: slug,
+                // A repository with no site yet runs on the repository alone.
+                project: project?.slug,
                 repo,
-                base: project?.branch,
+                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([]);
@@ -337,10 +387,21 @@ export function Project({ slug }) {
     if (!signed) {
         return (_jsxs(YStack, { flex: 1, items: "center", justify: "center", gap: "$3", children: [_jsx(SizableText, { size: "$4", color: "$ink", children: "Sign in to open this project." }), _jsx(Button, { onPress: () => host.signIn?.(), children: "Sign in" })] }));
     }
-    if (!all.loading && !project && !all.error) {
-        return (_jsxs(YStack, { flex: 1, items: "center", justify: "center", gap: "$3", px: "$4", children: [_jsx(SizableText, { size: "$4", color: "$ink", children: host.org ? `${host.org} has no project named ${slug}.` : `There is no project named ${slug}.` }), _jsx(Button, { variant: "outline", onPress: () => host.go('-/artifacts'), children: "See what this organization has built" })] }));
+    // A repository of another organization is opened in that one.
+    if (named && host.org && named.org.toLowerCase() !== host.org.toLowerCase()) {
+        const member = host.memberships?.some((m) => m.toLowerCase() === named.org.toLowerCase()) && host.chooseOrg;
+        return (_jsxs(YStack, { flex: 1, items: "center", justify: "center", gap: "$3", px: "$4", children: [_jsx(SizableText, { size: "$4", color: "$ink", text: "center", children: `${named.org}/${named.name} is in ${named.org}, and you are working in ${host.org}.` }), member ? (_jsx(Button, { variant: "outline", onPress: () => host.chooseOrg?.(named.org), children: `Switch to ${named.org}` })) : (_jsx(Button, { variant: "outline", onPress: () => host.go(path({ kind: 'screen', screen: 'projects' })), children: "See this organization\u2019s projects" }))] }));
+    }
+    if (named ? !forge.loading && !forge.value : !all.loading && !project && !all.error) {
+        return (_jsxs(YStack, { flex: 1, items: "center", justify: "center", gap: "$3", px: "$4", children: [_jsx(SizableText, { size: "$4", color: "$ink", text: "center", children: named
+                        ? forge.error && !/not found|404/i.test(forge.error.message)
+                            ? forge.error.message
+                            : `${named.org} has no repository named ${named.name}.`
+                        : host.org
+                            ? `${host.org} has no project named ${slug}.`
+                            : `There is no project named ${slug}.` }), _jsx(Button, { variant: "outline", onPress: () => host.go(path({ kind: 'screen', screen: named ? 'projects' : 'artifacts' })), children: named ? 'See this organization’s projects' : 'See what this organization has built' })] }));
     }
-    const chat = (_jsxs(YStack, { flex: 1, minH: 0, position: "relative", children: [_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$3", py: "$4", gap: "$4", children: ordered.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$ink", px: "$2", children: runs.loading
+    const chat = (_jsxs(YStack, { "data-slot": "project-chat", flex: 1, minH: 0, position: "relative", children: [_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$3", pt: "$2", pb: "$4", gap: "$4", $md: { pr: 0 }, children: ordered.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$ink", children: runs.loading
                         ? 'Reading this project’s runs…'
                         : project?.live
                             ? `${project.name} is loaded — it is in the preview, and every run on it is under the clock above. Say what to change and it gets built.`
@@ -354,12 +415,14 @@ export function Project({ slug }) {
                                             ? `${project?.name} is loaded — the preview shows the ${starter.title} starter until your copy is published. Say what to change and it gets built.`
                                             : project
                                                 ? `${project.name} is loaded and nothing is published yet. Say what to change and it gets built.`
-                                                : `${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, { px: "$3", pb: "$3", gap: "$2", 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, { ...cut, value: draft, onChange: setDraft, onSend: () => void (current && running ? steer(current) : send()), onStop: current
+                                                : 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, _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 && !collapsed ? (_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: `${project?.name ?? slug} preview`, device: device, onBridge: onBridge, empty: _jsxs(YStack, { items: "center", gap: "$2", p: "$6", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: stalled
+    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
                                 ? 'Publishing is taking too long'
                                 : building
                                     ? project?.forked
@@ -373,29 +436,34 @@ export function Project({ slug }) {
                                     ? 'Its page appears here when the build finishes.'
                                     : failed
                                         ? why
-                                        : 'Publish this project and its page appears here.' }), (stalled || failed) && project?.repo ? (_jsx(Button, { variant: "outline", disabled: redo.busy, onPress: () => void retry(), children: "Publish again" })) : null, redo.error ? (_jsx(SizableText, { size: "$2", color: "$soft", text: "center", role: "alert", children: redo.error })) : null] }), toolbar: bridge ? (_jsx(XStack, { render: "button", "aria-pressed": editing, "aria-label": editing ? 'Stop picking elements' : 'Pick an element to edit', onPress: () => {
+                                        : 'Publish this project and its page appears here.' }), (stalled || failed) && clone ? (_jsx(Button, { variant: "outline", disabled: redo.busy, onPress: () => void retry(), children: "Publish again" })) : null, redo.error ? (_jsx(SizableText, { size: "$2", color: "$soft", text: "center", role: "alert", children: redo.error })) : null] }), toolbar: bridge ? (_jsx(XStack, { render: "button", "aria-pressed": editing, "aria-label": editing ? 'Stop picking elements' : 'Pick an element to edit', onPress: () => {
                         const next = !editing;
                         setEditing(next);
                         frame.current?.post({ type: 'preview:editable', active: next });
                     }, p: "$2", rounded: "$10", children: _jsx(MousePointerClick, { size: 16 }) })) : undefined })] }));
-    const body = view === 'preview' ? null : view === 'files' ? (repo ? (_jsx(FileTree, { load: async (dir) => (await tree(t, repo, ref, dir)).map((e) => ({ path: e.path, kind: e.dir ? 'dir' : 'file' })), value: file, onSelect: (p) => void openFile(p), label: `${repo} at ${ref}` }, round)) : (_jsx(SizableText, { size: "$2", color: "$soft", p: "$4", children: "This project has no repository yet. Its first run creates one." }))) : view === 'code' ? (_jsx(FileTabs, { files: files, value: file, onSelect: setFile, onClose: (p) => {
+    const body = view === 'preview' ? null : view === 'files' ? (repo && root.error ? (_jsx(SizableText, { size: "$2", color: "$soft", p: "$4", role: "status", children: `Nothing to show for ${repo} at ${ref}: the forge answered “${root.error.message}”.` })) : repo ? (_jsx(FileTree, { load: async (dir) => (await tree(t, repo, ref, dir)).map((e) => ({ path: e.path, kind: e.dir ? 'dir' : 'file' })), value: file, onSelect: (p) => void openFile(p), label: `${repo} at ${ref}` }, round)) : (_jsx(SizableText, { size: "$2", color: "$soft", p: "$4", children: "This project has no repository yet. Its first run creates one." }))) : view === 'code' ? (_jsx(FileTabs, { files: files, value: file, onSelect: setFile, onClose: (p) => {
             setFiles((was) => was.filter((f) => f.path !== p));
             if (file === p)
                 setFile(null);
         }, empty: _jsxs(SizableText, { size: "$2", color: "$soft", p: "$4", children: ["Open a file from Files. Code here is read at ", ref, "; ask in the chat to change it."] }) })) : (_jsx(YStack, { p: "$4", gap: "$2", children: picked.length ? (picked.map((p) => (_jsxs(SizableText, { size: "$2", color: "$ink", children: [p.label, " \u2014 ", p.id] }, p.id)))) : (_jsx(SizableText, { size: "$2", color: "$soft", children: bridge
                 ? 'Pick an element in the preview to see it here and attach it to your next ask.'
                 : 'Layers are read through the preview bridge, and this page does not run it. Its elements cannot be listed from here.' })) }));
-    return (_jsxs(_Fragment, { children: [_jsxs(Workspace, { start: _jsxs(XStack, { items: "center", gap: "$2", minW: 0, shrink: 1, children: [_jsx(XStack, { render: "button", "aria-label": "All runs", onPress: () => host.go(''), p: "$1", shrink: 0, children: _jsx(HanzoMark, { size: 20 }) }), _jsx(ProjectChip, { name: project?.name ?? slug, onPress: () => setSwitcher(true) }), _jsx(XStack, { render: "button", "aria-label": "History", onPress: () => setHistory(true), p: "$1.5", rounded: "$3", shrink: 0, hoverStyle: { bg: '$hover' }, children: _jsx(Clock, { size: 16 }) }), _jsx(XStack, { render: "button", "aria-label": collapsed ? 'Show the chat' : 'Hide the chat', "aria-pressed": !collapsed, onPress: () => setCollapsed(!collapsed), p: "$1.5", rounded: "$3", shrink: 0, hoverStyle: { bg: '$hover' }, "$max-md": { display: 'none' }, children: _jsx(PanelLeft, { size: 16 }) })] }), middle: _jsx(Views, { views: [...VIEWS, CHAT], value: pane === 'chat' && !wide ? 'chat' : view, onChange: (v) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(Workspace, { start: _jsxs(XStack, { items: "center", gap: "$2", minW: 0, shrink: 1, children: [_jsx(XStack, { render: "button", "aria-label": "All runs", onPress: () => host.go(''), p: "$1", shrink: 0, children: _jsx(HanzoMark, { size: 20 }) }), _jsx(ProjectChip, { name: title, onPress: () => setSwitcher(true) }), _jsx(XStack, { render: "button", "aria-label": "History", onPress: () => setHistory(true), p: "$1.5", rounded: "$3", shrink: 0, hoverStyle: { bg: '$hover' }, children: _jsx(Clock, { size: 16 }) }), _jsx(XStack, { render: "button", "aria-label": shut ? 'Show the chat' : 'Hide the chat', "aria-pressed": !shut, onPress: () => (cramped ? setAsked(!asked) : setCollapsed(!collapsed)), p: "$1.5", rounded: "$3", shrink: 0, hoverStyle: { bg: '$hover' }, "$max-md": { display: 'none' }, children: _jsx(PanelLeft, { size: 16 }) })] }), middle: _jsx(Views, { views: [CHAT, ...VIEWS], value: pane === 'chat' && !wide ? 'chat' : view, onChange: (v) => {
                         if (v === 'chat')
                             return setPane('chat');
                         setView(v);
                         setPane('view');
-                    }, label: "View" }), end: _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(XStack, { display: "none", $md: { display: 'flex' }, children: _jsxs(Button, { variant: "outline", size: "sm", onPress: () => void share(), children: [_jsx(Share2, { size: 14 }), " Share"] }) }), _jsxs(Button, { size: "sm", disabled: !project?.repo, onPress: () => project &&
-                                setPublish({ repo: project.repo, title: project.name, ref, name: project.slug, project: project.slug }), children: [_jsx(Upload, { size: 14 }), " Publish"] })] }), chat: chat, dock: _jsx(Console, { lines: lines, height: dock, onHeight: setDock, onClear: () => setPageLines([]), status: run.status || end.status || undefined, label: "Console" }), collapsed: collapsed, pane: pane, width: across, onLayout: (e) => setRoom(e.nativeEvent.layout.width), children: [preview, body] }), _jsx(Dialog, { open: history, onOpenChange: setHistory, children: _jsxs(DialogContent, { maxW: 480, children: [_jsxs(DialogTitle, { children: ["Runs on ", project?.name ?? slug] }), _jsx(YStack, { gap: "$1", children: runs.value.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "No runs yet." })) : (runs.value.map((r) => (_jsxs(XStack, { render: "button", onPress: () => {
+                    }, label: "View" }), end: _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(XStack, { display: "none", $md: { display: 'flex' }, children: _jsxs(Button, { variant: "outline", size: "sm", onPress: () => void share(), children: [_jsx(Share2, { size: 14 }), " Share"] }) }), _jsxs(Button, { size: "sm", "aria-label": "Publish", disabled: !clone || !slug, onPress: () => setPublish({ repo: clone, title, ref, name: slug, project: slug }), children: [_jsx(Upload, { size: 14 }), _jsx(SizableText, { size: "$2", color: "inherit", "$max-md": { display: 'none' }, children: "Publish" })] })] }), chat: chat, dock: _jsx(Console, { lines: lines, height: dock, onHeight: setDock, onClear: () => setPageLines([]), status: run.status || end.status || undefined, label: "Console" }), collapsed: shut, pane: pane, width: across, onLayout: (e) => setRoom(e.nativeEvent.layout.width), children: [preview, body] }), _jsx(Dialog, { open: history, onOpenChange: setHistory, children: _jsxs(DialogContent, { maxW: 480, children: [_jsxs(DialogTitle, { children: ["Runs on ", title] }), _jsx(YStack, { gap: "$1", children: runs.value.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "No runs yet." })) : (runs.value.map((r) => (_jsxs(XStack, { render: "button", onPress: () => {
                                     setChosen(r.id);
                                     setHistory(false);
-                                }, justify: "space-between", px: "$2", py: "$1.5", rounded: "$3", hoverStyle: { bg: '$hover' }, children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, flex: 1, children: r.title || 'Untitled run' }), _jsx(SizableText, { size: "$1", color: "$soft", children: r.status })] }, r.id)))) })] }) }), _jsx(Dialog, { open: switcher, onOpenChange: setSwitcher, children: _jsxs(DialogContent, { maxW: 420, children: [_jsx(DialogTitle, { children: "Projects" }), _jsx(YStack, { gap: "$1", maxH: 420, overflow: "scroll", children: all.value.map((p) => (_jsx(XStack, { render: "button", onPress: () => {
-                                    setSwitcher(false);
-                                    host.go(p.slug);
-                                }, px: "$2", py: "$1.5", rounded: "$3", bg: p.slug === slug ? '$hover' : undefined, hoverStyle: { bg: '$hover' }, children: _jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: p.name }) }, p.slug))) })] }) }), _jsx(Publish, { source: publish, onClose: () => setPublish(null), onLive: fresh })] }));
+                                }, justify: "space-between", px: "$2", py: "$1.5", rounded: "$3", hoverStyle: { bg: '$hover' }, children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, flex: 1, children: r.title || 'Untitled run' }), _jsx(SizableText, { size: "$1", color: "$soft", children: r.status })] }, r.id)))) })] }) }), _jsx(Dialog, { open: switcher, onOpenChange: setSwitcher, children: _jsxs(DialogContent, { maxW: 420, children: [_jsx(DialogTitle, { children: "Projects" }), _jsx(YStack, { gap: "$1", maxH: 420, overflow: "scroll", children: repos.error ? (_jsx(SizableText, { size: "$2", color: "$soft", children: repos.error.message })) : repos.loading && repos.value.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "Reading the forge\u2026" })) : (repos.value.map((c) => {
+                                const here = Boolean(named) && c.name === named?.name;
+                                return (_jsx(XStack, { render: "button", "aria-label": `Open ${c.org}/${c.name}`, "aria-current": here ? 'page' : undefined, onPress: () => {
+                                        setSwitcher(false);
+                                        host.go(path({ kind: 'repo', org: c.org || host.org || '', name: c.name }));
+                                    }, px: "$2", py: "$1.5", rounded: "$3", bg: here ? '$hover' : undefined, hoverStyle: { bg: '$hover' }, children: _jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: c.name }) }, `${c.org}/${c.name}`));
+                            })) }), _jsx(Button, { variant: "outline", size: "sm", onPress: () => {
+                                setSwitcher(false);
+                                host.go(path({ kind: 'screen', screen: 'projects' }));
+                            }, children: "All projects" })] }) }), _jsx(Publish, { source: publish, onClose: () => setPublish(null), onLive: fresh })] }));
 }

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;