@hanzo/build 0.2.51 → 0.2.53

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 (Codebase, 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, Kanban, 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 (Codebase, 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 === 'codebases', onPress: () => go(path({ kind: 'screen', screen: 'codebases' })), children: "Codebase" }), _jsx(SidebarItem, { icon: _jsx(Kanban, { size: 16, "aria-hidden": true }), active: screen === 'projects', 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) : '',

package/lib/settings/code.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Code: where and how a new run starts — the model, the effort, the mode and
- * the place — for anyone whose New has no choice of its own kept yet. Saved to
- * the person's own settings. Beside them, the codebases' environments and the
- * organization's machines, each on its own page.
+ * Code: where and how a new run starts — the mode and the place, saved to the
+ * person's own settings for anyone whose New has no choice of its own kept yet
+ * — and the model and effort, which are the one choice Chat and Dev share
+ * (mind.tsx): changed here, changed in both composers. Beside them, the
+ * codebases' environments and the organization's machines, each on its own page.
  */
 import { YStack } from '@hanzo/gui';
 import { ChevronRight } from '@hanzogui/lucide-icons-2';
@@ -11,11 +12,12 @@ import { ChipSelect } from '@hanzo/ui/product';
 import { ModelPicker } from '@hanzo/ui/models';
 import { useState } from 'react';
 import { unhonoured } from '../api/coding.js';
-import { ENSO, models } from '../api/models.js';
+import { ENSO } from '../api/models.js';
 import { SANDBOX } from '../api/places.js';
-import { usePlaces, useRead } from '../data.js';
+import { usePlaces } from '../data.js';
 import { useHost, useTarget } from '../host.js';
-import { EFFORTS, MODES } from '../landing.js';
+import { MODES } from '../landing.js';
+import { EFFORTS, useCatalog, useChoice } from '../mind.js';
 import { usePrefs } from '../prefs.js';
 import { path } from '../route.js';
 import { Card, Group, Heading, Note, Row, Soft } from './ui.js';
@@ -24,13 +26,14 @@ export function Code() {
     const t = useTarget();
     const signed = Boolean(host.person);
     const { prefs, save } = usePrefs();
-    const catalog = useRead(signed ? () => models(t) : null, [], [t, signed]);
+    const catalog = useCatalog(t);
+    const [choice, choose] = useChoice();
     const places = usePlaces(t, signed);
     const [note, setNote] = useState('');
     if (!signed) {
         return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Code" }), _jsx(Soft, { children: "Sign in to set how your runs start." })] }));
     }
-    const now = { model: ENSO, effort: 'medium', mode: 'build', place: '', ...prefs.code };
+    const now = { mode: 'build', place: '', ...prefs.code };
     const keep = (change) => {
         setNote('');
         save({ code: { ...prefs.code, ...change } }).catch((e) => setNote(e.message));
@@ -45,11 +48,11 @@ export function Code() {
     // The sandbox is always listed, so a place not found is a machine that is not: it reads as its id.
     const place = where.find((w) => w.place === now.place) ?? { id: now.place, label: now.place, place: now.place };
     // A default is never premium: a premium model is picked for one run, in New.
-    const offered = catalog.value.filter((m) => m.class !== 'premium');
+    const offered = catalog.models.filter((m) => m.class !== 'premium');
     const go = (section) => host.go(path({ kind: 'settings', section }));
-    const effort = EFFORTS.find((e) => e.id === now.effort);
+    const effort = EFFORTS.find((e) => e.id === choice.effort);
     const mode = MODES.find((m) => m.id === now.mode);
-    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Code", detail: "How a new run starts. New begins from these until you choose otherwise there." }), _jsxs(Group, { title: "Defaults", children: [_jsxs(Card, { children: [_jsx(Row, { first: true, title: "Model", detail: "Enso picks one for each step; any other model runs them all.", trailing: _jsx(ModelPicker, { size: "sm", name: "Default model", models: offered, scope: "chat", value: now.model || ENSO, onChange: (id) => keep({ model: id }), loading: catalog.loading, error: catalog.error?.message ?? null }) }), _jsx(Row, { title: "Effort", detail: "How long the agent thinks before it acts.", trailing: _jsx(ChipSelect, { name: "Default effort", label: effort.label, chosen: effort, items: EFFORTS, onChange: (e) => keep({ effort: e.id }), placement: "bottom-end", width: 180 }) }), _jsx(Row, { title: "Mode", detail: mode.hint, trailing: _jsx(ChipSelect, { name: "Default mode", label: mode.label, chosen: mode, items: MODES, onChange: (m) => keep({ mode: m.id }), placement: "bottom-end", width: 260 }) }), _jsx(Row, { title: "Where it runs", detail: "The Hanzo sandbox, or one of your organization\u2019s machines.", trailing: _jsx(ChipSelect, { name: "Default place", label: place.label, chosen: place, items: where, onChange: (w) => keep({ place: w.place }), placeholder: "Search machines\u2026", placement: "bottom-end", loading: places.loading, error: places.error?.message ?? null }) })] }), _jsx(Note, { children: unhonoured(now.mode, now.place) })] }), _jsx(Group, { title: "Workspace", children: _jsxs(Card, { children: [_jsx(Row, { first: true, title: "Environments", detail: "What a run installs and starts in each codebase, and the secrets it exports.", trailing: _jsx(Link, { label: "Environments", onPress: () => go('environments') }) }), _jsx(Row, { title: "Machines", detail: "Your organization\u2019s own computers that take runs.", trailing: _jsx(Link, { label: "Machines", onPress: () => go('machines') }) })] }) }), _jsx(Note, { children: note })] }));
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Code", detail: "How a new run starts. The model and effort are the ones Chat uses too." }), _jsxs(Group, { title: "Defaults", children: [_jsxs(Card, { children: [_jsx(Row, { first: true, title: "Model", detail: "Enso picks one for each step; any other model runs them all.", trailing: _jsx(ModelPicker, { size: "sm", name: "Default model", models: offered, scope: "chat", value: choice.model || ENSO, onChange: (id) => choose({ model: id }), loading: catalog.loading, error: catalog.error }) }), _jsx(Row, { title: "Effort", detail: "How long the agent thinks before it acts.", trailing: _jsx(ChipSelect, { name: "Default effort", label: effort.label, chosen: effort, items: EFFORTS, onChange: (e) => choose({ effort: e.id }), placement: "bottom-end", width: 180 }) }), _jsx(Row, { title: "Mode", detail: mode.hint, trailing: _jsx(ChipSelect, { name: "Default mode", label: mode.label, chosen: mode, items: MODES, onChange: (m) => keep({ mode: m.id }), placement: "bottom-end", width: 260 }) }), _jsx(Row, { title: "Where it runs", detail: "The Hanzo sandbox, or one of your organization\u2019s machines.", trailing: _jsx(ChipSelect, { name: "Default place", label: place.label, chosen: place, items: where, onChange: (w) => keep({ place: w.place }), placeholder: "Search machines\u2026", placement: "bottom-end", loading: places.loading, error: places.error?.message ?? null }) })] }), _jsx(Note, { children: unhonoured(now.mode, now.place) })] }), _jsx(Group, { title: "Workspace", children: _jsxs(Card, { children: [_jsx(Row, { first: true, title: "Environments", detail: "What a run installs and starts in each codebase, and the secrets it exports.", trailing: _jsx(Link, { label: "Environments", onPress: () => go('environments') }) }), _jsx(Row, { title: "Machines", detail: "Your organization\u2019s own computers that take runs.", trailing: _jsx(Link, { label: "Machines", onPress: () => go('machines') }) })] }) }), _jsx(Note, { children: note })] }));
 }
 function Link({ label, onPress }) {
     return (_jsx(YStack, { render: "button", "aria-label": `Open ${label}`, p: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, onPress: onPress, children: _jsx(ChevronRight, { size: 16 }) }));

package/lib/settings/credits.d.ts

@@ -0,0 +1,9 @@
+import type { Target } from '../api/call.ts';
+/** What the credits section says first, on every surface. */
+export declare const SEPARATE = "Credits are separate from your plan\u2019s usage allowance. They pay for usage past it when you choose to continue with credits, and for all usage when there is no plan.";
+export declare function Credits({ target: t, admin, add, onCard }: {
+    target: Target;
+    admin: boolean;
+    add?: string;
+    onCard?: () => void;
+}): import("react").JSX.Element;