@hanzo/build 0.2.52 → 0.2.54

package/lib/reply.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * What sits under an answer, the same in Chat and Dev: copy what was written,
+ * listen to it, and open what it made in the side panel. A surface adds its own
+ * after these (Dev's verdict).
+ *
+ * An answer's artifacts are its fenced blocks (`artifacts`): a page, a picture,
+ * a file it wrote out whole. One opens as a page tab in the side panel, rendered
+ * from its own bytes (`blob`).
+ */
+import { SizableText, XStack } from '@hanzo/gui';
+import { Check, Copy, PanelRight, Square, Volume2 } from '@hanzogui/lucide-icons-2';
+import { mouth, speech } from '@hanzo/voice';
+import { useEffect, useRef, useState } from 'react';
+const FENCE = /```([^\n`]*)\n([\s\S]*?)```/g;
+const MIME = {
+    html: 'text/html',
+    htm: 'text/html',
+    svg: 'image/svg+xml',
+    css: 'text/css',
+    csv: 'text/csv',
+    json: 'application/json',
+    md: 'text/markdown',
+    markdown: 'text/markdown',
+    txt: 'text/plain',
+};
+const suffix = (s) => {
+    const dot = s.lastIndexOf('.');
+    return dot > 0 ? s.slice(dot + 1).toLowerCase() : '';
+};
+/** An info string is a file name (a dot, no spaces) or a language. */
+const called = (info, n) => {
+    const word = info.trim().split(/\s+/)[0] ?? '';
+    if (!word)
+        return `Block ${n}`;
+    if (word.includes('.') && suffix(word))
+        return word;
+    return `${word} block`;
+};
+/** Every fenced block in `text`, in order. */
+export function artifacts(text) {
+    const out = [];
+    let n = 0;
+    for (const [, info = '', body = ''] of text.matchAll(FENCE)) {
+        n += 1;
+        const name = called(info, n);
+        out.push({ name, body, mime: MIME[suffix(name) || info.trim().toLowerCase().split(/\s+/)[0] || ''] ?? 'text/plain' });
+    }
+    return out;
+}
+/** Whether a browser draws it as a page or a picture rather than as source. */
+export const renders = (a) => a.mime === 'text/html' || a.mime === 'image/svg+xml';
+/** The artifact worth opening first: the last page or picture, else the last block. */
+export function lead(list) {
+    return [...list].reverse().find(renders) ?? list[list.length - 1] ?? null;
+}
+/** An address for an artifact's own bytes, typed so a browser renders it. */
+export const blob = (a) => URL.createObjectURL(new Blob([a.body], { type: a.mime }));
+/** Markdown as a sentence a voice can read: code said as code, marks dropped. */
+export function speakable(raw) {
+    return raw
+        .replace(/```[\s\S]*?```/g, ' [code snippet] ')
+        .replace(/`([^`]+)`/g, '$1')
+        .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
+        .replace(/^#{1,6}\s+/gm, '')
+        .replace(/[*_]{1,3}([^*_]+)[*_]{1,3}/g, '$1')
+        .replace(/^>\s+/gm, '')
+        .replace(/^[-*_]{3,}\s*$/gm, '')
+        .replace(/^[\s]*[-+*]\s+/gm, '')
+        .replace(/\n+/g, '. ')
+        .replace(/\s+/g, ' ')
+        .trim();
+}
+let hush = null;
+/** A reader on the platform's voice (`/v1/audio/speech`), one reply at a time on the page. */
+export function speaker(t) {
+    return (text, done) => {
+        hush?.();
+        const said = speakable(text);
+        if (!said) {
+            done();
+            return () => { };
+        }
+        const lips = mouth({ speech: speech({ baseUrl: t.api, token: t.token }) });
+        const stop = () => {
+            lips.hush();
+            if (hush === stop)
+                hush = null;
+        };
+        hush = stop;
+        lips.say(said).then(done, done);
+        return stop;
+    };
+}
+/** One quiet control in the row. It rests dim and comes up under a pointer or focus. */
+function Act({ label, onPress, children, lit = false }) {
+    return (_jsx(XStack, { render: "button", role: "button", "aria-label": label, onPress: onPress, items: "center", gap: "$1", px: "$1", height: 24, rounded: "$2", cursor: "pointer", opacity: lit ? 1 : 0.55, hoverStyle: { opacity: 1, bg: '$hover' }, focusStyle: { opacity: 1 }, children: children }));
+}
+/** Copy, Listen and Open under an answer; `children` follow them. */
+export function Reply({ text, listen, onOpen, children }) {
+    const [took, setTook] = useState(false);
+    const [speaking, setSpeaking] = useState(false);
+    const stop = useRef(null);
+    useEffect(() => {
+        if (!took)
+            return;
+        const t = setTimeout(() => setTook(false), 1400);
+        return () => clearTimeout(t);
+    }, [took]);
+    useEffect(() => () => stop.current?.(), []);
+    return (_jsxs(XStack, { "data-slot": "reply", ml: "$-1", items: "center", gap: "$1.5", flexWrap: "wrap", children: [_jsx(Act, { label: took ? 'Copied' : 'Copy this answer', lit: took, onPress: () => void navigator.clipboard?.writeText(text).then(() => setTook(true), () => { }), children: took ? _jsx(Check, { size: 13 }) : _jsx(Copy, { size: 13 }) }), listen ? (_jsxs(Act, { label: speaking ? 'Stop reading' : 'Listen to this answer', lit: speaking, onPress: () => {
+                    if (speaking) {
+                        stop.current?.();
+                        setSpeaking(false);
+                        return;
+                    }
+                    setSpeaking(true);
+                    stop.current = listen(text, () => setSpeaking(false));
+                }, children: [speaking ? _jsx(Square, { size: 12 }) : _jsx(Volume2, { size: 13 }), _jsx(SizableText, { size: "$1", color: "$ink", children: speaking ? 'Stop' : 'Listen' })] })) : null, onOpen ? (_jsxs(Act, { label: "Open in the side panel", onPress: onOpen, children: [_jsx(PanelRight, { size: 13 }), _jsx(SizableText, { size: "$1", color: "$ink", children: "Open" })] })) : null, children] }));
+}
+/** Which model answered, where the gateway says it was not the one asked for or a router. */
+export function Served({ served, asked }) {
+    return (_jsx(SizableText, { size: "$1", color: "$soft", "data-slot": "served", children: `answered by ${served}${asked && asked !== served ? ` · ${asked} was unavailable` : ''}` }));
+}

package/lib/route.d.ts

@@ -15,6 +15,16 @@
  * so it can hold neither the `_` a session id carries nor start with `-`, and a
  * repository is the one address with two segments, each starting with a letter
  * or a digit. Anything else is not an address here and reads as the empty state.
+ *
+ * A host whose address bar shows real paths writes a route with `href` and
+ * reads one back with `parse` (hanzo.ai/dev/<href>):
+ *
+ *   ''                            New
+ *   /run/<id>                     one run
+ *   /projects/<org>/<repo>        a repository's workspace
+ *   /projects/<slug>              a deployed site's workspace
+ *   /machines · /environments     the rail's own words for -/settings/machines and -/settings/environments
+ *   /<rest>                       every other address, its `-/` dropped: /projects, /customize/connectors, /settings/usage
  */
 export type Screen = 'artifacts' | 'templates' | 'projects' | 'issues' | 'automations' | 'sync' | 'mcp' | 'plans';
 /** Settings, one section each. Every setting the builder has lives on this page, none elsewhere. */
@@ -55,5 +65,11 @@ export declare const NAME: RegExp;
 /** An automation's id, or `new` for one not yet written. */
 export declare const AUTOMATION: RegExp;
 export declare function route(path: string): Route;
+/** Every route that names no record, for a host that writes a page per address ahead of time. */
+export declare const PLACES: readonly Route[];
+/** A route as a real path under the host's mount: '' for New, `/run/<id>`, `/projects/<org>/<repo>`, `/projects/<slug>`, else its path without `-/`. */
+export declare function href(r: Route): string;
+/** The route a real path under the mount names — the inverse of `href`. A query or fragment is not part of it. */
+export declare function parse(address: string): Route;
 /** The path for a route — the inverse of `route`. */
 export declare function path(r: Route): string;

package/lib/route.js

@@ -51,6 +51,46 @@ export function route(path) {
         return { kind: 'repo', org, name };
     return { kind: 'new' };
 }
+/** Every route that names no record, for a host that writes a page per address ahead of time. */
+export const PLACES = [
+    { kind: 'new' },
+    { kind: 'automation', id: 'new' },
+    ...SCREENS.map((screen) => ({ kind: 'screen', screen })),
+    ...SECTIONS.map((section) => ({ kind: 'settings', section })),
+    ...TABS.map((tab) => ({ kind: 'customize', tab })),
+];
+/** The places a real path names in the rail's words rather than the builder's: each rail row is a path of its own. */
+const WORDS = new Map([
+    ['-/settings/machines', 'machines'],
+    ['-/settings/environments', 'environments'],
+]);
+const NAMES = new Map([...WORDS].map(([p, word]) => [word, p]));
+/** A route as a real path under the host's mount: '' for New, `/run/<id>`, `/projects/<org>/<repo>`, `/projects/<slug>`, else its path without `-/`. */
+export function href(r) {
+    if (r.kind === 'run')
+        return `/run/${r.id}`;
+    if (r.kind === 'repo')
+        return `/projects/${r.org}/${r.name}`;
+    if (r.kind === 'project')
+        return `/projects/${r.slug}`;
+    const p = path(r);
+    return p && `/${WORDS.get(p) ?? p.slice(2)}`;
+}
+/** The route a real path under the mount names — the inverse of `href`. A query or fragment is not part of it. */
+export function parse(address) {
+    const p = address.split(/[?#]/)[0].replace(/^\/+|\/+$/g, '');
+    const [head, one, two, ...rest] = p.split('/');
+    if (head === 'run')
+        return one && !two && SESSION.test(one) ? { kind: 'run', id: one } : { kind: 'new' };
+    if (head === 'projects' && one) {
+        if (rest.length)
+            return { kind: 'new' };
+        if (two)
+            return NAME.test(one) && NAME.test(two) ? { kind: 'repo', org: one, name: two } : { kind: 'new' };
+        return SLUG.test(one) ? { kind: 'project', slug: one } : { kind: 'new' };
+    }
+    return p ? route(NAMES.get(p) ?? `-/${p}`) : { kind: 'new' };
+}
 /** The path for a route — the inverse of `route`. */
 export function path(r) {
     switch (r.kind) {

package/lib/run.js

@@ -16,45 +16,46 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * (apps/coding steer.go), so what continues it is a new run: a paused run is
  * carried on, and a finished one followed up, by `POST /v1/agent/coding` from
  * the branch its work was kept on — the platform's own continue, done here —
- * with the model and effort the composer's foot shows, which New shares.
+ * with the model and effort the composer shows (mind.tsx), which Chat and New share.
  *
  * It reads as a chat: the person's ask opens it, each thing the agent said can
  * be copied and judged (a verdict is `build.verdict` on the event bus, as a
  * project's turns send it), and the title is the menu of what can be done to
  * the run. Share opens its story to the public build route.
  */
-import { SizableText, XStack, YStack } from '@hanzo/gui';
-import { ChevronDown, ChevronRight, Copy, ExternalLink, GitPullRequest, Globe, PanelRight, Pencil, Share } from '@hanzogui/lucide-icons-2';
+import { SizableText, useMedia, XStack, YStack } from '@hanzo/gui';
+import { ChevronDown, ChevronRight, Copy, ExternalLink, GitPullRequest, Globe, Pencil, Share } from '@hanzogui/lucide-icons-2';
 import { Button, Dialog, DialogContent, DialogTitle, DropdownMenu, Input } from '@hanzo/ui';
 import { Steer } from '@hanzo/ui/agents';
-import { Composer } from '@hanzo/ui/chat';
-import { ChipSelect } from '@hanzo/ui/product';
-import { ModelPicker } from '@hanzo/ui/models';
+import { Failure } from '@hanzo/ui/chat';
 import { useLimits } from '@hanzo/ui/product/useLimits';
+import { useDictation, useVoice } from '@hanzo/voice';
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { approve, followUp, headline, retry, start } from './api/coding.js';
-import { ENSO, limits as readLimits, models } from './api/models.js';
-import { usePick } from './pick.js';
+import { limits as readLimits } from './api/models.js';
 import { list, message, pause, publish, rename, resume, stop, story, took } from './api/sessions.js';
 import { answer, cards, outcome, pull, settled, steps } from './api/turn.js';
 import { verdict } from './api/verdict.js';
 import { useKept, useProjects, useRead, useRun } from './data.js';
-import { Desk } from './desk.js';
+import { Desk, SEED } from './desk.js';
 import { Grip } from './grip.js';
 import { useHost, useTarget } from './host.js';
-import { EFFORTS } from './landing.js';
+import { useMind } from './mind.js';
 import { Out } from './out.js';
 import { gap, pane } from './pane.js';
-import { usePrefs } from './prefs.js';
+import { measure, Prompt, useEar } from './prompt.js';
+import { useSpoken } from './voice.js';
+import { speaker } from './reply.js';
+import { PanelToggle } from './panel.js';
+import { PAGE, useDeck, useKey, usePanel } from './tabs.js';
+import { compose, Files, pick } from './tools.js';
 import { Transcript } from './transcript.js';
 const LIVE = new Set(['running', 'paused', '']);
-// What this browser kept is read as it is found: a stored value that is not a string is none.
-const text = (v) => (typeof v === 'string' ? v : '');
-/** The side pane's width, px: its default, the floor a drag holds, and what the transcript keeps beside it. */
+/** The side panel's width, px: its default, the floor a drag holds, and what the transcript keeps beside it. */
 const DESK_WIDTH = 480;
 const DESK_FLOOR = 240;
 const TALK_FLOOR = 300;
-/** The most the side pane is drawn at before its row is measured, px. */
+/** The most the side panel is drawn at before its row is measured, px. */
 const DESK_CEIL = 960;
 /**
  * How wide an element is drawn, px, read before the first paint and again as it
@@ -82,17 +83,22 @@ export function Run({ id }) {
     const signed = Boolean(host.person);
     const { detail, record, events, status, refused } = useRun(t, signed ? id : null);
     const [draft, setDraft] = useState('');
+    const [files, setFiles] = useState([]);
     const [note, setNote] = useState('');
     const [busy, setBusy] = useState(false);
     const [notify, setNotify] = useState(false);
-    const [desk, setDesk] = useKept('hanzo.build.desk', true);
-    // The side pane's width is the reader's, kept, and gives way so the
+    // The side panel: open or shut as Dev was left, its tabs as they were arranged.
+    const wide = useMedia().md;
+    const [desk, setDesk] = usePanel('dev', true, wide);
+    const side = useDeck('dev', SEED);
+    useKey(() => setDesk(!desk));
+    // The side panel's width is the reader's, kept, and gives way so the
     // transcript keeps its floor: bounded by the row it is drawn in once that is
     // measured, and by its own `maxWidth` until then.
-    const [side, setSide] = useKept('hanzo.build.desk.span', DESK_WIDTH);
-    const [room, measure] = useWidth();
+    const [reach, setReach] = useKept('hanzo.build.desk.span', DESK_WIDTH);
+    const [room, size] = useWidth();
     const most = room ? Math.max(DESK_FLOOR, room - TALK_FLOOR) : DESK_CEIL;
-    const across = Math.round(Math.min(most, Math.max(DESK_FLOOR, typeof side === 'number' ? side : DESK_WIDTH)));
+    const across = Math.round(Math.min(most, Math.max(DESK_FLOOR, typeof reach === 'number' ? reach : DESK_WIDTH)));
     // A drag repaints the pane's width directly and tells React once, on letting go.
     const deskBox = useRef(null);
     // Stop was pressed here: the run keeps its work after it answers, and says so with its status.
@@ -101,13 +107,11 @@ export function Run({ id }) {
     const [name, setName] = useState('');
     const [copied, setCopied] = useState('');
     const [unfolded, setUnfolded] = useState(false);
-    // The model and effort a run started here uses: New's choice, which a change here changes too.
-    const { prefs } = usePrefs();
-    const [chose, choose] = useKept(`hanzo.build.new.${host.org ?? 'none'}`, null);
-    const catalog = useRead(signed ? () => models(t) : null, [], [t, signed]);
+    // The model and effort a run started here uses: the one choice Chat and New share.
+    const mind = useMind(t);
     const { limits } = useLimits(signed ? (signal) => readLimits(t, signal) : null, t);
-    const [model, pickModel] = usePick(text(chose?.model) || prefs.code?.model || ENSO, (id) => choose({ ...chose, model: id }), catalog.value);
-    const pace = EFFORTS.find((e) => e.id === chose?.effort) ?? EFFORTS.find((e) => e.id === prefs.code?.effort) ?? EFFORTS[1];
+    const voice = useVoice({ speech: useEar(t), language: useSpoken(), ...useDictation(draft, setDraft) });
+    const listen = useMemo(() => speaker(t), [t]);
     const mode = record?.mode ?? '';
     // A run that narrated no ask of its own opens with the one its title records, once it has said anything.
     const shown = useMemo(() => {
@@ -128,6 +132,15 @@ export function Run({ id }) {
         if (end.published)
             rebuilt();
     }, [end.published, rebuilt]);
+    // What a run publishes opens in the panel: the Preview, chosen and shown.
+    useEffect(() => {
+        if (!end.published)
+            return;
+        side.open({ kind: 'preview', title: 'Preview' });
+        setDesk(true);
+        // On each publish, not on each render.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [end.published]);
     const site = built.value.find((p) => p.slug === record?.project)?.live ?? '';
     const pr = pull(record?.pr ?? '', record?.repo ?? '');
     const live = LIVE.has(state);
@@ -207,8 +220,24 @@ export function Run({ id }) {
             setBusy(false);
         }
     };
-    /** A new run's ask with the model and effort the foot shows. The router is the platform's default, so it is not named. */
-    const tuned = (a) => ({ ...a, model: model === ENSO ? undefined : model, effort: pace.id });
+    /**
+     * A new run's ask with the model and effort the composer shows, Enso named as
+     * itself: a run that names none takes the person's saved coding default
+     * (apps/coding start.go), which is not what the composer shows.
+     */
+    const tuned = (a) => ({ ...a, model: mind.model, effort: mind.effort });
+    // A setup run's work IS its environment: the panel opens on it.
+    useEffect(() => {
+        if (mode === 'setup')
+            side.open({ kind: 'environment', title: 'Environment' });
+        // Once the run says what it is.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mode]);
+    /** An answer's artifact, open in the panel as a page rendered from its own bytes. */
+    const look = (a) => {
+        side.open({ kind: PAGE, title: a.name, body: a.body, type: a.mime });
+        setDesk(true);
+    };
     /**
      * A new run from this one's work, opened. A paused run it carries on is let go
      * first: the new run works in the same sandbox, where nothing else may be at work.
@@ -221,16 +250,18 @@ export function Run({ id }) {
         const ask = how === 'approve' ? approve(earlier, said) : how === 'retry' ? retry(earlier, said) : followUp(earlier, said);
         const run = await start(t, tuned(ask));
         setDraft('');
+        setFiles([]);
         host.go(run.session);
         return '';
     };
-    // The composer sends only words, and only while it is enabled.
+    // The composer sends words, with any files fenced after them, and only while it is enabled.
     const send = () => {
-        const words = draft.trim();
+        const words = compose(draft.trim(), files);
         if (steering) {
             void act(async () => {
                 await message(t, id, words);
                 setDraft('');
+                setFiles([]);
                 return 'Sent — recorded on this run';
             });
             return;
@@ -325,9 +356,11 @@ export function Run({ id }) {
                     : finished
                         ? 'Follow up — continues in a new run'
                         : 'Reading this run…';
-    // What a new run from here is made with; words that steer this run use neither.
-    const tuning = signed && !steering ? (_jsxs(XStack, { flex: 1, items: "center", gap: "$2", justify: "flex-end", flexWrap: "wrap", rowGap: "$1", children: [_jsx(ModelPicker, { quiet: true, size: "sm", name: "Model", models: catalog.value, scope: "chat", limits: limits, value: model, onChange: pickModel, loading: catalog.loading, error: catalog.error?.message ?? null }), _jsx(ChipSelect, { quiet: true, name: "Effort", label: pace.label, chosen: pace, items: EFFORTS, onChange: (e) => choose({ ...chose, effort: e.id }), placement: "top-end", width: 180 })] })) : undefined;
-    return (_jsxs(XStack, { ref: measure, "data-slot": "run-split", flex: 1, minH: 0, minW: 0, width: "100%", children: [_jsxs(YStack, { "data-slot": "run", ...pane, flex: 1, minH: 0, minW: 0, width: "100%", px: "$6", "$max-md": { px: '$4' }, children: [_jsxs(XStack, { pt: "$3", pb: "$2", gap: "$3", items: "center", minH: 44, children: [_jsxs(YStack, { flex: 1, minW: 0, items: "flex-start", children: [_jsx(DropdownMenu, { trigger: _jsxs(XStack, { render: "button", "aria-label": "Manage this run", items: "center", gap: "$1.5", maxW: "100%", px: "$1.5", mx: "$-1.5", py: "$0.5", rounded: "$2", hoverStyle: { bg: '$hover' }, children: [_jsx(SizableText, { render: "h1", size: "$5", color: "$ink", numberOfLines: 1, minW: 0, children: title }), _jsx(ChevronDown, { size: 14 })] }), items: manage }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, maxW: "100%", children: [state || (detail.loading ? 'reading' : ''), record?.repo, record?.branch, record?.published ? 'shared' : ''].filter(Boolean).join(' · ') })] }), desk ? null : (_jsx(XStack, { render: "button", "aria-label": "Show the side pane", px: "$2", py: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, onPress: () => setDesk(true), "$max-md": { display: 'none' }, children: _jsx(PanelRight, { size: 16 }) })), pr.href ? (_jsx(Out, { href: pr.href, label: `Open pull request ${pr.label}`, children: _jsxs(XStack, { items: "center", gap: "$1.5", px: "$2.5", py: "$1.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: [_jsx(GitPullRequest, { size: 14 }), _jsx(SizableText, { size: "$2", color: "$ink", children: pr.label }), _jsx(ExternalLink, { size: 12, opacity: 0.6 })] }) })) : null, sharing.length ? (_jsx(DropdownMenu, { trigger: _jsxs(XStack, { render: "button", "aria-label": "Share", items: "center", gap: "$1.5", px: "$2.5", py: "$1.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: [_jsx(Share, { size: 14 }), _jsx(SizableText, { size: "$2", color: "$ink", children: "Share" })] }), items: sharing })) : null] }), _jsx(Transcript, { cards: shown, 
+    const desk_ = (sheet) => (_jsx(Desk, { id: id, repo: record?.repo ?? '', branch: record?.branch ?? '', base: record?.base ?? '', environment: record?.environment ?? '', mode: mode, pr: pr, title: title, project: record?.project ?? '', sandbox: record?.sandbox ?? '', site: site, published: end.published, events: events, live: running, menu: [...manage, ...sharing], refused: signed ? refused || (detail.error ? detail.error.message : '') : 'Sign in to follow this run.', retry: signed ? 'Retry' : 'Sign in', onRetry: signed ? detail.reload : () => host.signIn?.(), side: side, sheet: sheet, onHide: () => setDesk(false) }));
+    return (_jsxs(XStack, { ref: size, "data-slot": "run-split", flex: 1, minH: 0, minW: 0, width: "100%", children: [_jsxs(YStack, { "data-slot": "run", ...pane, flex: 1, minH: 0, minW: 0, width: "100%", children: [_jsxs(XStack, { px: "$4", pt: "$3", pb: "$2", gap: "$2", items: "center", minH: 44, children: [_jsxs(YStack, { flex: 1, minW: 0, items: "flex-start", children: [_jsx(DropdownMenu, { trigger: _jsxs(XStack, { render: "button", "aria-label": "Manage this run", items: "center", gap: "$1.5", maxW: "100%", px: "$1.5", mx: "$-1.5", py: "$0.5", rounded: "$2", hoverStyle: { bg: '$hover' }, children: [_jsx(SizableText, { render: "h1", size: "$5", color: "$ink", numberOfLines: 1, minW: 0, children: title }), _jsx(ChevronDown, { size: 14 })] }), items: manage }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, maxW: "100%", children: [state || (detail.loading ? 'reading' : ''), record?.repo, record?.branch, record?.published ? 'shared' : ''].filter(Boolean).join(' · ') })] }), pr.href ? (_jsx(Out, { href: pr.href, label: `Open pull request ${pr.label}`, children: _jsxs(XStack, { items: "center", gap: "$1.5", px: "$2.5", py: "$1.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: [_jsx(GitPullRequest, { size: 14 }), _jsx(SizableText, { size: "$2", color: "$ink", children: pr.label }), _jsx(ExternalLink, { size: 12, opacity: 0.6 })] }) })) : null, sharing.length ? (_jsx(DropdownMenu, { trigger: _jsxs(XStack, { render: "button", "aria-label": "Share", items: "center", gap: "$1.5", px: "$2.5", py: "$1.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: [_jsx(Share, { size: 14 }), _jsx(SizableText, { size: "$2", color: "$ink", children: "Share" })] }), items: sharing })) : null, _jsx(PanelToggle, { open: desk, onToggle: () => setDesk(!desk) })] }), _jsx(Transcript, { cards: shown, onOpen: look, onDiff: () => {
+                            side.open({ kind: 'diff', title: 'Diff' });
+                            setDesk(true);
+                        }, listen: signed ? listen : undefined, end: failed ? (_jsx(Failure, { onRetry: busy ? undefined : () => void act(() => carry(again, 'retry')), children: end.problem ? 'This run stopped before it finished.' : 'This run stopped with an error. Its work so far is on its branch.' })) : null, 
                         // A paused run's agent was stopped where it stood; what it was running is cut off.
                         live: running && !paused, header: hidden ? (_jsx(SizableText, { size: "$1", color: "$soft", children: `${hidden} earlier ${hidden === 1 ? 'turn is' : 'turns are'} not shown. The run’s Git tab has everything it pushed.` })) : null, onApprove: planned && earlier ? (p) => void act(() => carry(p, 'approve')) : undefined, approving: busy, onVerdict: (v) => verdict(t, id, record?.project ?? '', v), empty: signed ? (_jsx(SizableText, { size: "$2", color: "$soft", children: detail.error
                                 ? detail.error.message
@@ -337,29 +370,31 @@ export function Run({ id }) {
                                         ? setup
                                             ? 'Setting up environment'
                                             : 'Starting…'
-                                        : 'Waiting for the run’s first step…' })) : (_jsxs(YStack, { gap: "$3", items: "flex-start", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: "Sign in to follow this run." }), _jsx(Button, { size: "sm", onPress: () => host.signIn?.(), children: "Sign in" })] })) }), _jsxs(YStack, { pb: "$3", pt: "$2", gap: "$2", children: [end.problem ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "The branch is pushed, and the pull request could not be opened." })) : null, note || (signed && refused) ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note || refused })) : null, failed ? (_jsx(XStack, { items: "center", gap: "$2", children: _jsx(Button, { size: "sm", disabled: busy, onPress: () => void act(() => carry(again, 'retry')), children: busy ? 'Starting…' : 'Try again' }) })) : null, plan.length ? (_jsxs(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: [_jsxs(XStack, { render: "button", "aria-label": `Steps · ${plan.length}`, "aria-expanded": unfolded, onPress: () => setUnfolded(!unfolded), px: "$3", py: "$1.5", gap: "$2", items: "center", hoverStyle: { bg: '$hover' }, children: [unfolded ? _jsx(ChevronDown, { size: 14 }) : _jsx(ChevronRight, { size: 14 }), _jsx(SizableText, { size: "$2", color: "$ink", children: `Steps · ${plan.length}` }), current && !unfolded ? (_jsx(SizableText, { flex: 1, minW: 0, size: "$1", color: "$soft", numberOfLines: 1, style: { textAlign: 'right' }, children: current.name })) : null] }), unfolded
-                                        ? plan.map((s) => {
-                                            const on = s === current;
-                                            return (_jsxs(XStack, { items: "center", gap: "$2", px: "$3", py: "$1.5", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$2", color: s.done || on ? '$ink' : '$soft', children: s.done ? '✓' : on ? '●' : '○' }), _jsx(SizableText, { size: "$2", color: s.done ? '$soft' : '$ink', numberOfLines: 1, children: s.name })] }, s.name));
-                                        })
-                                        : null] })) : null, setup && running && !seen ? _jsx(Onboarding, { onDone: () => setSeen(true) }) : null, running ? (_jsxs(XStack, { items: "center", gap: "$2", px: "$3", py: "$2", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", flexWrap: "wrap", rowGap: "$1", children: [_jsx(SizableText, { size: "$2", color: "$ink", flex: 1, minW: 160, children: paused
-                                            ? kept.pushed
-                                                ? 'Paused — its work so far is on its branch.'
-                                                : 'Paused.'
-                                            : setup
-                                                ? span
-                                                    ? `Environment setup takes ~${span[0] === span[1] ? span[0] : `${span[0]}–${span[1]}`} minutes.`
-                                                    : 'Environment setup takes several minutes.'
-                                                : 'This run is still working.' }), _jsx(Steer, { onCommand: command, withhold: [
-                                            ...(paused ? ['pause'] : ['resume']),
-                                            ...(busy || waiting ? ['pause', 'resume', 'stop'] : []),
-                                        ] }), _jsx(Button, { size: "sm", disabled: notify, onPress: () => void ask(), children: notify ? 'You will be notified' : 'Notify me' })] })) : null, _jsx(Composer, { inline: true, ...pane, value: draft, onChange: setDraft, onSend: send, disabled: !signed || busy || waiting || !(running || finished), placeholder: placeholder, label: steering ? 'Steer this run' : 'Follow up on this run', foot: tuning }), _jsx(SizableText, { size: "$1", color: "$soft", style: { textAlign: 'center' }, children: "Hanzo is AI and can make mistakes." })] })] }), desk ? (_jsxs(YStack, { "data-slot": "desk", ref: (el) => {
+                                        : 'Waiting for the run’s first step…' })) : (_jsxs(YStack, { gap: "$3", items: "flex-start", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: "Sign in to follow this run." }), _jsx(Button, { size: "sm", onPress: () => host.signIn?.(), children: "Sign in" })] })) }), _jsxs(YStack, { pb: "$3", pt: "$2", gap: "$2", children: [_jsxs(YStack, { ...measure, gap: "$2", children: [end.problem ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "The branch is pushed, and the pull request could not be opened." })) : null, note || (signed && refused) ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note || refused })) : null, plan.length ? (_jsxs(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: [_jsxs(XStack, { render: "button", "aria-label": `Steps · ${plan.length}`, "aria-expanded": unfolded, onPress: () => setUnfolded(!unfolded), px: "$3", py: "$1.5", gap: "$2", items: "center", hoverStyle: { bg: '$hover' }, children: [unfolded ? _jsx(ChevronDown, { size: 14 }) : _jsx(ChevronRight, { size: 14 }), _jsx(SizableText, { size: "$2", color: "$ink", children: `Steps · ${plan.length}` }), current && !unfolded ? (_jsx(SizableText, { flex: 1, minW: 0, size: "$1", color: "$soft", numberOfLines: 1, style: { textAlign: 'right' }, children: current.name })) : null] }), unfolded
+                                                ? plan.map((s) => {
+                                                    const on = s === current;
+                                                    return (_jsxs(XStack, { items: "center", gap: "$2", px: "$3", py: "$1.5", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$2", color: s.done || on ? '$ink' : '$soft', children: s.done ? '✓' : on ? '●' : '○' }), _jsx(SizableText, { size: "$2", color: s.done ? '$soft' : '$ink', numberOfLines: 1, children: s.name })] }, s.name));
+                                                })
+                                                : null] })) : null, setup && running && !seen ? _jsx(Onboarding, { onDone: () => setSeen(true) }) : null, running ? (_jsxs(XStack, { items: "center", gap: "$2", px: "$3", py: "$2", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", flexWrap: "wrap", rowGap: "$1", children: [_jsx(SizableText, { size: "$2", color: "$ink", flex: 1, minW: 160, children: paused
+                                                    ? kept.pushed
+                                                        ? 'Paused — its work so far is on its branch.'
+                                                        : 'Paused.'
+                                                    : setup
+                                                        ? span
+                                                            ? `Environment setup takes ~${span[0] === span[1] ? span[0] : `${span[0]}–${span[1]}`} minutes.`
+                                                            : 'Environment setup takes several minutes.'
+                                                        : 'This run is still working.' }), _jsx(Steer, { onCommand: command, withhold: [
+                                                    ...(paused ? ['pause'] : ['resume']),
+                                                    ...(busy || waiting ? ['pause', 'resume', 'stop'] : []),
+                                                ] }), _jsx(Button, { size: "sm", disabled: notify, onPress: () => void ask(), children: notify ? 'You will be notified' : 'Notify me' })] })) : null] }), _jsx(Prompt, { framed: true, value: draft, onChange: setDraft, onSend: send, ready: Boolean(draft.trim()), disabled: !signed || busy || waiting || !(running || finished), placeholder: placeholder, label: steering ? 'Steer this run' : 'Follow up on this run', head: files.length ? _jsx(XStack, { gap: "$1.5", flexWrap: "wrap", children: _jsx(Files, { files: files, onFiles: setFiles }) }) : undefined, onAttach: () => pick(files, setFiles, setNote), 
+                                // What a new run from here is made with; words that steer this run use neither.
+                                mind: signed && !steering ? mind : null, limits: limits, voice: voice }), _jsx(SizableText, { size: "$1", color: "$soft", style: { textAlign: 'center' }, children: "Hanzo is AI and can make mistakes." })] })] }), desk && !wide ? desk_(true) : null, desk && wide ? (_jsxs(YStack, { "data-slot": "desk", ref: (el) => {
                     deskBox.current = el instanceof HTMLElement ? el : null;
                 }, ...pane, 
                 // A pane of its own beside the run's, the gutter between them.
-                ml: gap, position: "relative", shrink: 0, minH: 0, display: "none", $md: { display: 'flex' }, style: { width: across, maxWidth: `calc(100% - ${TALK_FLOOR}px)`, minWidth: DESK_FLOOR }, children: [_jsx(Grip, { side: "right", span: across, floor: DESK_FLOOR, ceil: most, reset: Math.min(most, DESK_WIDTH), onSpan: (n) => deskBox.current?.style.setProperty('width', `${n}px`), onKeep: setSide, onShut: () => setDesk(false), label: "Resize the side pane", 
+                ml: gap, position: "relative", shrink: 0, minH: 0, style: { width: across, maxWidth: `calc(100% - ${TALK_FLOOR}px)`, minWidth: DESK_FLOOR }, children: [_jsx(Grip, { side: "right", span: across, floor: DESK_FLOOR, ceil: most, reset: Math.min(most, DESK_WIDTH), onSpan: (n) => deskBox.current?.style.setProperty('width', `${n}px`), onKeep: setReach, onShut: () => setDesk(false), label: "Resize the side panel", 
                         // In the gutter between the two panes; `left` is measured inside the pane's 1px edge.
-                        l: `calc(-1 * ${gap} - ${pane.borderWidth}px)`, width: gap }), _jsx(Desk, { id: id, repo: record?.repo ?? '', branch: record?.branch ?? '', base: record?.base ?? '', environment: record?.environment ?? '', mode: mode, pr: pr, title: title, project: record?.project ?? '', sandbox: record?.sandbox ?? '', site: site, published: end.published, events: events, live: running, menu: [...manage, ...sharing], refused: signed ? refused || (detail.error ? detail.error.message : '') : 'Sign in to follow this run.', retry: signed ? 'Retry' : 'Sign in', onRetry: signed ? detail.reload : () => host.signIn?.(), onHide: () => setDesk(false) })] })) : null, _jsx(Dialog, { open: naming, onOpenChange: setNaming, children: _jsxs(DialogContent, { maxW: 480, children: [_jsx(DialogTitle, { children: "Rename this run" }), _jsx(Input, { autoFocus: true, value: name, onChangeText: setName, "aria-label": "The run\u2019s name", maxLength: 512, onKeyDown: (e) => {
+                        l: `calc(-1 * ${gap} - ${pane.borderWidth}px)`, width: gap }), desk_(false)] })) : null, _jsx(Dialog, { open: naming, onOpenChange: setNaming, children: _jsxs(DialogContent, { maxW: 480, children: [_jsx(DialogTitle, { children: "Rename this run" }), _jsx(Input, { autoFocus: true, value: name, onChangeText: setName, "aria-label": "The run\u2019s name", maxLength: 512, onKeyDown: (e) => {
                                 if (e.key === 'Enter')
                                     save();
                             } }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "outline", onPress: () => setNaming(false), children: "Cancel" }), _jsx(Button, { size: "sm", disabled: busy || !name.trim(), onPress: save, children: "Save" })] })] }) })] }));

package/lib/section.d.ts

@@ -8,7 +8,7 @@ export declare const DOTS: Record<string, SessionStatus>;
 /** The org's coding runs, newest first, kept live by the org's feed. */
 export declare function useSessions(host: Host): Read<Session[]>;
 /**
- * New, Automations, the forge (Projects, Issues), Artifacts, Templates, then the
+ * The builder's places, grouped as every rail groups them (nav.tsx), then the
  * runs. `children` sit between the places and the runs — where a host lists its
  * own. `onPick` fires after a move, so a host that draws its rail as a drawer
  * on a phone can close it.

package/lib/section.js

@@ -11,12 +11,11 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * host's own `go`.
  */
 import { SizableText } from '@hanzo/gui';
-import { Blocks, CircleDot, FolderGit2, LayoutTemplate, SlidersHorizontal, SquarePen, Workflow } from '@hanzogui/lucide-icons-2';
 import { SidebarItem, SidebarSection, StatusDot } from '@hanzo/ui/chat';
 import { useMemo } from 'react';
-import { pinBoard } from './choice.js';
 import { useRecents } from './data.js';
-import { path, route } from './route.js';
+import { nav } from './nav.js';
+import { route } from './route.js';
 /** A run's status, as the rail's dot draws it. Anything else is idle. */
 export const DOTS = {
     running: 'running',
@@ -32,7 +31,7 @@ export function useSessions(host) {
 }
 const Note = ({ children }) => (_jsx(SizableText, { size: "$1", color: "$soft", px: "$2", py: "$1", children: children }));
 /**
- * New, Automations, the forge (Projects, Issues), Artifacts, Templates, then the
+ * The builder's places, grouped as every rail groups them (nav.tsx), then the
  * runs. `children` sit between the places and the runs — where a host lists its
  * own. `onPick` fires after a move, so a host that draws its rail as a drawer
  * on a phone can close it.
@@ -40,13 +39,10 @@ const Note = ({ children }) => (_jsx(SizableText, { size: "$1", color: "$soft",
 export function DevSection({ host, onPick, label = 'Runs', children, }) {
     const sessions = useSessions(host);
     const r = route(host.path);
-    const go = (p) => {
-        host.go(p);
+    // Every row, a place or a run, closes a drawer behind it.
+    const then = (press) => () => {
+        press?.();
         onPick?.();
     };
-    const screen = r.kind === 'screen' ? r.screen : '';
-    return (_jsxs(_Fragment, { children: [_jsx(SidebarItem, { icon: _jsx(SquarePen, { size: 16, "aria-hidden": true }), active: r.kind === 'new', onPress: () => go(''), children: "New run" }), _jsx(SidebarItem, { icon: _jsx(Workflow, { size: 16, "aria-hidden": true }), active: screen === 'automations' || r.kind === 'automation', onPress: () => go(path({ kind: 'screen', screen: 'automations' })), children: "Automations" }), _jsx(SidebarItem, { icon: _jsx(FolderGit2, { size: 16, "aria-hidden": true }), active: screen === 'projects' || screen === 'sync' || r.kind === 'repo', onPress: () => go(path({ kind: 'screen', screen: 'projects' })), children: "Projects" }), _jsx(SidebarItem, { icon: _jsx(CircleDot, { size: 16, "aria-hidden": true }), active: screen === 'issues', onPress: () => {
-                    pinBoard(host.org, '');
-                    go(path({ kind: 'screen', screen: 'issues' }));
-                }, children: "Issues" }), _jsx(SidebarItem, { icon: _jsx(SlidersHorizontal, { size: 16, "aria-hidden": true }), active: r.kind === 'customize', onPress: () => go(path({ kind: 'customize', tab: 'connectors' })), children: "Customize" }), _jsx(SidebarItem, { icon: _jsx(Blocks, { size: 16, "aria-hidden": true }), active: screen === 'artifacts', onPress: () => go(path({ kind: 'screen', screen: 'artifacts' })), children: "Artifacts" }), _jsx(SidebarItem, { icon: _jsx(LayoutTemplate, { size: 16, "aria-hidden": true }), active: screen === 'templates', onPress: () => go(path({ kind: 'screen', screen: 'templates' })), children: "Templates" }), children, _jsx(SidebarSection, { label: label, children: !host.person ? (_jsx(Note, { children: "Sign in to see your runs." })) : sessions.value.length ? (sessions.value.map((s) => (_jsx(SidebarItem, { icon: _jsx(StatusDot, { status: DOTS[s.status] ?? 'idle' }), active: r.kind === 'run' && r.id === s.id, onPress: () => go(s.id), children: s.title || 'Untitled run' }, s.id)))) : (_jsx(Note, { children: sessions.error ? sessions.error.message : sessions.loading ? 'Reading…' : 'No runs yet. Say what to build and it lands here.' })) })] }));
+    return (_jsxs(_Fragment, { children: [nav(host, host.go).map((g) => (_jsx(SidebarSection, { label: g.label, children: g.links.map((l) => (_jsx(SidebarItem, { icon: l.icon, active: l.active, onPress: then(l.onPress), children: l.label }, l.id))) }, g.id))), children, _jsx(SidebarSection, { label: label, children: !host.person ? (_jsx(Note, { children: "Sign in to see your runs." })) : sessions.value.length ? (sessions.value.map((s) => (_jsx(SidebarItem, { icon: _jsx(StatusDot, { status: DOTS[s.status] ?? 'idle' }), active: r.kind === 'run' && r.id === s.id, onPress: then(() => host.go(s.id)), children: s.title || 'Untitled run' }, s.id)))) : (_jsx(Note, { children: sessions.error ? sessions.error.message : sessions.loading ? 'Reading…' : 'No runs yet. Say what to build and it lands here.' })) })] }));
 }

package/lib/settings/billing.js

@@ -1,18 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Billing: the plan this organization is on and the way to change it, the cards
- * it pays with, its invoices, and ending the plan. Changing plan is the Plans
- * screen; this page says what is true now.
+ * Billing: the plan this organization is on and the way to change it, its
+ * credits (`Credits`: the balance, grants, top-ups, auto-reload, this month's
+ * spend and its limit), the cards it pays with, its invoices, and ending the
+ * plan. Changing plan is the Plans screen; this page says what is true now.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
 import { CreditCard, Download, Plus, X } from '@hanzogui/lucide-icons-2';
 import { Button, Dialog, DialogContent, DialogTitle, Input, toast } from '@hanzo/ui';
 import { useEffect, useState } from 'react';
-import { cancel, chosen, current, detach, formatAddress, invoices, label, makeDefault, methods, money, pdf, reactivate, subscriptions, updateMethod, } from '../api/billing.js';
+import { cancel, chosen, current, detach, formatAddress, invoices, label, makeDefault, methods, money, pdf, reactivate, subscriptions, tier, updateMethod, } from '../api/billing.js';
 import { useRead } from '../data.js';
 import { useHost, useTarget } from '../host.js';
+import { Title } from '../meter.js';
+import { label as named } from '../plan.js';
 import { path } from '../route.js';
 import { AddCard } from './card.js';
+import { Credits } from './credits.js';
 import { Card, day, Field, Group, Heading, Note, Row, Soft } from './ui.js';
 export function Billing() {
     const host = useHost();
@@ -21,6 +25,7 @@ export function Billing() {
     const subs = useRead(signed ? () => subscriptions(t) : null, [], [t, signed]);
     const cards = useRead(signed ? () => methods(t) : null, [], [t, signed]);
     const bills = useRead(signed ? () => invoices(t) : null, [], [t, signed]);
+    const billed = useRead(signed ? () => tier(t) : null, null, [t, signed]);
     const [adding, setAdding] = useState(false);
     const [ending, setEnding] = useState(false);
     const [editingBilling, setEditingBilling] = useState(null);
@@ -31,6 +36,12 @@ export function Billing() {
         return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Billing" }), _jsx(Soft, { children: "Sign in to see this organization\u2019s billing." })] }));
     }
     const plan = current(subs.value);
+    // The plan by its family, `Max` with `20x` beside it; the subscription names
+    // it, else the rung billing serves.
+    const title = named(plan?.plan || billed.value?.plan, billed.value?.tier) ?? (plan ? { name: plan.name, tag: '' } : null);
+    // Nothing is said about the plan until both reads have answered: a page that
+    // has not asked yet is not a page on Free.
+    const reading = (subs.loading && !subs.value.length) || (billed.value === null && !billed.error && !subs.error);
     const empty = !cards.error && !cards.loading && cards.value.length === 0;
     const defaultCard = chosen(cards.value);
     // A done act is a toast; a refused one stays on the page, beside what was tried.
@@ -49,11 +60,7 @@ export function Billing() {
             setWorking(false);
         }
     };
-    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Billing", detail: `The plan ${host.org ?? 'this organization'} is on, the cards it pays with, and its invoices.` }), _jsxs(XStack, { items: "center", gap: "$3", px: "$4", py: "$4", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", flexWrap: "wrap", children: [_jsxs(YStack, { flex: 1, minW: 200, gap: "$1", children: [_jsx(SizableText, { size: "$5", color: "$ink", children: subs.loading && !subs.value.length ? 'Reading your plan…' : plan ? `${plan.name} plan` : 'Free plan' }), _jsx(SizableText, { size: "$2", color: "$soft", children: subs.error
-                                    ? subs.error.message
-                                    : plan
-                                        ? terms(plan)
-                                        : 'No paid plan. Usage is paid from the balance.' })] }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => host.go(path({ kind: 'screen', screen: 'plans' })), children: "Adjust plan" })] }), _jsxs(Group, { title: "Payment", detail: "The card a plan renews on and a top-up charges.", action: host.admin && (cards.error || cards.value.length > 0) ? (_jsxs(Button, { size: "sm", variant: "outline", onPress: () => setAdding(true), children: [_jsx(Plus, { size: 14 }), " Add card"] })) : undefined, children: [cards.error ? (_jsx(Soft, { children: cards.error.message })) : cards.loading && !cards.value.length ? (_jsx(Soft, { children: "Reading cards\u2026" })) : empty ? (_jsxs(XStack, { items: "center", gap: "$3", px: "$4", py: "$4", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", flexWrap: "wrap", children: [_jsx(CreditCard, { size: 20 }), _jsxs(YStack, { flex: 1, minW: 180, gap: "$1", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: "No card on file." }), _jsx(SizableText, { size: "$2", color: "$soft", children: host.admin ? 'Add one to pay for a plan or a top-up. Adding it charges nothing.' : 'An org admin adds cards.' })] }), host.admin ? (_jsxs(Button, { variant: "primary", onPress: () => setAdding(true), children: [_jsx(Plus, { size: 16 }), " Add card"] })) : null] })) : (_jsx(Card, { children: cards.value.map((m, i) => (_jsx(Row, { first: i === 0, leading: _jsx(CreditCard, { size: 16 }), title: label(m), detail: [
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Billing", detail: `The plan ${host.org ?? 'this organization'} is on, the cards it pays with, and its invoices.` }), _jsxs(XStack, { items: "center", gap: "$3", px: "$4", py: "$4", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", flexWrap: "wrap", children: [_jsxs(YStack, { flex: 1, minW: 200, gap: "$1", "data-slot": "billing-plan", children: [reading ? (_jsx(SizableText, { size: "$5", color: "$ink", children: "Reading your plan\u2026" })) : (_jsx(Title, { label: title ?? { name: 'Free', tag: '' }, size: "$5" })), _jsx(SizableText, { size: "$2", color: "$soft", children: subs.error ? subs.error.message : plan ? terms(plan) : title ? 'Your plan.' : 'No paid plan. Usage is paid from credits.' })] }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => host.go(path({ kind: 'screen', screen: 'plans' })), children: "Adjust plan" })] }), _jsx(Credits, { target: t, admin: host.admin, onCard: () => setAdding(true) }), _jsxs(Group, { title: "Payment", detail: "The card a plan renews on and a top-up charges.", action: host.admin && (cards.error || cards.value.length > 0) ? (_jsxs(Button, { size: "sm", variant: "outline", onPress: () => setAdding(true), children: [_jsx(Plus, { size: 14 }), " Add card"] })) : undefined, children: [cards.error ? (_jsx(Soft, { children: cards.error.message })) : cards.loading && !cards.value.length ? (_jsx(Soft, { children: "Reading cards\u2026" })) : empty ? (_jsxs(XStack, { items: "center", gap: "$3", px: "$4", py: "$4", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", flexWrap: "wrap", children: [_jsx(CreditCard, { size: 20 }), _jsxs(YStack, { flex: 1, minW: 180, gap: "$1", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: "No card on file." }), _jsx(SizableText, { size: "$2", color: "$soft", children: host.admin ? 'Add one to pay for a plan or a top-up. Adding it charges nothing.' : 'An org admin adds cards.' })] }), host.admin ? (_jsxs(Button, { variant: "primary", onPress: () => setAdding(true), children: [_jsx(Plus, { size: 16 }), " Add card"] })) : null] })) : (_jsx(Card, { children: cards.value.map((m, i) => (_jsx(Row, { first: i === 0, leading: _jsx(CreditCard, { size: 16 }), title: label(m), detail: [
                                 m.expires ? `Expires ${m.expires}` : '',
                                 m.default ? 'Default' : '',
                                 m.billingAddress ? formatAddress(m.billingAddress) : '',