@hanzo/build 0.2.47 → 0.2.49

package/lib/api/billing.d.ts

@@ -90,6 +90,15 @@ export declare function subscribe(t: Target, p: Purchase): Promise<{
 /** End a plan when its paid period does, not before. */
 export declare function cancel(t: Target, id: string): Promise<Subscription>;
 export declare function reactivate(t: Target, id: string): Promise<Subscription>;
+export interface Address {
+    name?: string;
+    line1?: string;
+    line2?: string;
+    city?: string;
+    state?: string;
+    postalCode?: string;
+    country?: string;
+}
 export interface Method {
     id: string;
     type: string;
@@ -100,16 +109,23 @@ export interface Method {
     default: boolean;
     /** What the platform calls it when it is not a card. */
     name: string;
+    billingAddress?: Address;
 }
 export declare function method(raw: unknown): Method;
+/** Formats a billing address as a readable line: `Acme Inc · 123 Main St · San Francisco CA 94105 · US`. */
+export declare function formatAddress(a?: Address): string;
 /** How a saved method reads in a row: `Visa •••• 4242`. */
 export declare function label(m: Method): string;
 export declare function methods(t: Target): Promise<Method[]>;
 /** The card a charge uses: the default, or the newest. */
 export declare function chosen(list: Method[]): Method | null;
-/** Save a card from the single-use token the processor's form returned. */
-export declare function save(t: Target, token: string): Promise<Method>;
+/** Save a card from the single-use token the processor's form returned, optionally with billing info. */
+export declare function save(t: Target, token: string, billingAddress?: Address): Promise<Method>;
+export declare function updateMethod(t: Target, id: string, what: {
+    billingAddress?: Address;
+}): Promise<Method>;
 export declare function detach(t: Target, id: string): Promise<void>;
+export declare function makeDefault(t: Target, id: string): Promise<Method>;
 export interface Processor {
     /** `square`, or '' where none is configured. */
     provider: string;

package/lib/api/billing.js

@@ -125,6 +125,7 @@ export async function reactivate(t, id) {
 export function method(raw) {
     const m = obj(raw);
     const c = obj(m.card);
+    const a = obj(m.billingAddress);
     const month = num(c.expMonth);
     const year = num(c.expYear);
     return {
@@ -135,8 +136,31 @@ export function method(raw) {
         expires: month && year ? `${String(month).padStart(2, '0')}/${String(year % 100).padStart(2, '0')}` : '',
         default: m.isDefault === true,
         name: str(m.name),
+        billingAddress: a && (a.line1 || a.city || a.country || a.name || a.postalCode || a.state)
+            ? {
+                name: str(a.name),
+                line1: str(a.line1),
+                line2: str(a.line2),
+                city: str(a.city),
+                state: str(a.state),
+                postalCode: str(a.postalCode),
+                country: str(a.country),
+            }
+            : undefined,
     };
 }
+/** Formats a billing address as a readable line: `Acme Inc · 123 Main St · San Francisco CA 94105 · US`. */
+export function formatAddress(a) {
+    if (!a)
+        return '';
+    const parts = [
+        a.name,
+        [a.line1, a.line2].filter(Boolean).join(', '),
+        [a.city, a.state, a.postalCode].filter(Boolean).join(' '),
+        a.country,
+    ].filter(Boolean);
+    return parts.join(' · ');
+}
 /** How a saved method reads in a row: `Visa •••• 4242`. */
 export function label(m) {
     if (m.last4)
@@ -152,15 +176,25 @@ export async function methods(t) {
 export function chosen(list) {
     return list.find((m) => m.default) ?? list[0] ?? null;
 }
-/** Save a card from the single-use token the processor's form returned. */
-export async function save(t, token) {
+/** Save a card from the single-use token the processor's form returned, optionally with billing info. */
+export async function save(t, token, billingAddress) {
     if (!token)
         throw new Error('The card form returned no token');
-    return method(await call(t, 'POST', '/v1/billing/methods', { type: 'card', providerRef: token }));
+    const body = { type: 'card', providerRef: token };
+    if (billingAddress && Object.values(billingAddress).some(Boolean)) {
+        body.billingAddress = billingAddress;
+    }
+    return method(await call(t, 'POST', '/v1/billing/methods', body));
+}
+export async function updateMethod(t, id, what) {
+    return method(await call(t, 'PATCH', `/v1/billing/methods/${seg(id)}`, what));
 }
 export async function detach(t, id) {
     await call(t, 'DELETE', `/v1/billing/methods/${seg(id)}`);
 }
+export async function makeDefault(t, id) {
+    return method(await call(t, 'POST', `/v1/billing/methods/${seg(id)}/default`));
+}
 export async function processor(t) {
     const p = obj(await call(t, 'GET', '/v1/billing/settings'));
     return {

package/lib/api/machines.d.ts

@@ -16,6 +16,46 @@
 import { type Target } from './call.ts';
 export declare const KINDS: readonly ['laptop', 'gpu', 'cloud', 'cluster', 'machine'];
 export type Kind = (typeof KINDS)[number];
+export interface GPU {
+    vendor?: string;
+    model?: string;
+    memory?: number;
+}
+export interface MachineSpec {
+    os?: string;
+    arch?: string;
+    cpus?: number;
+    memory?: number;
+    gpus?: GPU[];
+}
+export interface MachineMetrics {
+    load1?: number;
+    load5?: number;
+    load15?: number;
+    memUsed?: number;
+    memFree?: number;
+    gpuUtil?: number;
+    cpuUtil?: number;
+    cpuTemp?: number;
+    gpuTemp?: number;
+    gpuPower?: number;
+    gpuPowerLimit?: number;
+    gpuMemUsed?: number;
+    gpuMemTotal?: number;
+    diskUsed?: number;
+    diskTotal?: number;
+    diskRead?: number;
+    diskWrite?: number;
+    netRx?: number;
+    netTx?: number;
+    model?: string;
+    decode?: number;
+    prefill?: number;
+    ttft?: number;
+    running?: number;
+    waiting?: number;
+    at?: number;
+}
 export interface Machine {
     /** `tgt_…` */
     id: string;
@@ -33,7 +73,16 @@ export interface Machine {
     running: number;
     /** When it last beat, RFC 3339, or '' when it never has. */
     seen: string;
+    serving?: boolean;
+    createdAt?: string;
+    updatedAt?: string;
+    spec?: MachineSpec;
+    metrics?: MachineMetrics;
 }
+export declare function formatBytes(bytes?: number): string;
+export declare function formatPercent(fraction?: number): string;
+export declare function formatRelative(isoDate?: string): string;
+export declare function specSummary(m: Machine): string;
 export declare function machine(raw: unknown): Machine;
 export declare function machines(t: Target): Promise<Machine[]>;
 /**
@@ -44,6 +93,7 @@ export declare function add(t: Target, what: {
     label: string;
     kind: Kind;
     host?: string;
+    capacity?: string;
 }): Promise<Machine>;
 /**
  * A machine's status as a person reads it. The platform reports a hand-registered
@@ -55,6 +105,9 @@ export declare function state(m: Machine): string;
 export declare function change(t: Target, id: string, what: {
     label?: string;
     status?: 'online' | 'draining';
+    capacity?: string;
+    kind?: Kind;
+    host?: string;
 }): Promise<Machine>;
 export declare function remove(t: Target, id: string): Promise<void>;
 /**

package/lib/api/machines.js

@@ -17,9 +17,101 @@ import { call, Refusal, seg } from './call.js';
 export const KINDS = ['laptop', 'gpu', 'cloud', 'cluster', 'machine'];
 const str = (v) => (typeof v === 'string' ? v : '');
 const num = (v) => (typeof v === 'number' && Number.isFinite(v) ? v : 0);
+const obj = (v) => (v && typeof v === 'object' ? v : {});
+export function formatBytes(bytes) {
+    if (!bytes || bytes <= 0)
+        return '';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    const val = bytes / Math.pow(k, i);
+    return `${val >= 10 || i === 0 ? Math.round(val) : val.toFixed(1)} ${sizes[i]}`;
+}
+export function formatPercent(fraction) {
+    if (fraction === undefined || !Number.isFinite(fraction))
+        return '';
+    return `${Math.round(fraction * 100)}%`;
+}
+export function formatRelative(isoDate) {
+    if (!isoDate)
+        return '';
+    const t = new Date(isoDate).getTime();
+    if (Number.isNaN(t))
+        return '';
+    const diffSec = Math.max(0, Math.floor((Date.now() - t) / 1000));
+    if (diffSec < 60)
+        return `${diffSec}s ago`;
+    if (diffSec < 3600)
+        return `${Math.floor(diffSec / 60)}m ago`;
+    if (diffSec < 86400)
+        return `${Math.floor(diffSec / 3600)}h ago`;
+    return `${Math.floor(diffSec / 86400)}d ago`;
+}
+export function specSummary(m) {
+    if (m.spec) {
+        const parts = [];
+        if (m.spec.cpus)
+            parts.push(`${m.spec.cpus} vCPU`);
+        if (m.spec.memory)
+            parts.push(formatBytes(m.spec.memory));
+        if (m.spec.gpus && m.spec.gpus.length > 0) {
+            const g = m.spec.gpus[0];
+            parts.push(`${m.spec.gpus.length}× ${g.model || g.vendor || 'GPU'}${g.memory ? ` (${formatBytes(g.memory)})` : ''}`);
+        }
+        if (parts.length > 0)
+            return parts.join(' · ');
+    }
+    return m.capacity || '';
+}
 export function machine(raw) {
     const o = (raw && typeof raw === 'object' ? raw : {});
-    return {
+    const specObj = obj(o.spec);
+    const metricsObj = obj(o.metrics);
+    let spec;
+    if (Object.keys(specObj).length > 0) {
+        const rawGpus = Array.isArray(specObj.gpus) ? specObj.gpus : [];
+        spec = {
+            os: str(specObj.os),
+            arch: str(specObj.arch),
+            cpus: num(specObj.cpus),
+            memory: num(specObj.memory),
+            gpus: rawGpus.map((g) => {
+                const go = obj(g);
+                return { vendor: str(go.vendor), model: str(go.model), memory: num(go.memory) };
+            }),
+        };
+    }
+    let metrics;
+    if (Object.keys(metricsObj).length > 0) {
+        metrics = {
+            load1: num(metricsObj.load1),
+            load5: num(metricsObj.load5),
+            load15: num(metricsObj.load15),
+            memUsed: num(metricsObj.memUsed),
+            memFree: num(metricsObj.memFree),
+            gpuUtil: num(metricsObj.gpuUtil),
+            cpuUtil: num(metricsObj.cpuUtil),
+            cpuTemp: num(metricsObj.cpuTemp),
+            gpuTemp: num(metricsObj.gpuTemp),
+            gpuPower: num(metricsObj.gpuPower),
+            gpuPowerLimit: num(metricsObj.gpuPowerLimit),
+            gpuMemUsed: num(metricsObj.gpuMemUsed),
+            gpuMemTotal: num(metricsObj.gpuMemTotal),
+            diskUsed: num(metricsObj.diskUsed),
+            diskTotal: num(metricsObj.diskTotal),
+            diskRead: num(metricsObj.diskRead),
+            diskWrite: num(metricsObj.diskWrite),
+            netRx: num(metricsObj.netRx),
+            netTx: num(metricsObj.netTx),
+            model: str(metricsObj.model),
+            decode: num(metricsObj.decode),
+            prefill: num(metricsObj.prefill),
+            ttft: num(metricsObj.ttft),
+            running: num(metricsObj.running),
+            waiting: num(metricsObj.waiting),
+        };
+    }
+    const m = {
         id: str(o.id),
         label: str(o.label) || str(o.host) || str(o.id),
         kind: str(o.kind),
@@ -30,6 +122,14 @@ export function machine(raw) {
         running: num(o.running),
         seen: str(o.metricsAt),
     };
+    Object.defineProperties(m, {
+        serving: { value: o.serving === true, enumerable: false, writable: true },
+        createdAt: { value: str(o.createdAt), enumerable: false, writable: true },
+        updatedAt: { value: str(o.updatedAt), enumerable: false, writable: true },
+        spec: { value: spec, enumerable: false, writable: true },
+        metrics: { value: metrics, enumerable: false, writable: true },
+    });
+    return m;
 }
 export async function machines(t) {
     const raw = (await call(t, 'GET', '/v1/agent/targets')) ?? {};
@@ -55,7 +155,12 @@ export async function add(t, what) {
     const label = what.label.trim() || host;
     if (!label)
         throw new Error('A machine needs a name or a hostname');
-    return machine(await call(t, 'POST', '/v1/agent/targets', { label, kind: what.kind, ...(host ? { host } : {}) }));
+    const body = { label, kind: what.kind };
+    if (host)
+        body.host = host;
+    if (what.capacity?.trim())
+        body.capacity = what.capacity.trim();
+    return machine(await call(t, 'POST', '/v1/agent/targets', body));
 }
 /**
  * A machine's status as a person reads it. The platform reports a hand-registered
@@ -76,6 +181,12 @@ export async function change(t, id, what) {
     }
     if (what.status !== undefined)
         body.status = what.status;
+    if (what.capacity !== undefined)
+        body.capacity = what.capacity.trim();
+    if (what.kind !== undefined)
+        body.kind = what.kind;
+    if (what.host !== undefined)
+        body.host = what.host.trim();
     return machine(await owned(call(t, 'PATCH', `/v1/agent/targets/${seg(id)}`, body)));
 }
 export async function remove(t, id) {

package/lib/customize/agents.js

@@ -110,7 +110,7 @@ function Editor({ agent, start, onClose, onSaved, onDeleted, }) {
         }
     };
     const pick = (name, yes) => set({ tools: yes ? [...d.tools, name] : d.tools.filter((n) => n !== name) });
-    return (_jsx(Sheet, { title: agent ? agent.name : 'New agent', open: true, onOpenChange: (o) => !o && onClose(), width: 680, children: agent && full.error && !full.value ? (_jsx(Soft, { children: full.error.message })) : !ready ? (_jsx(Soft, { children: "Reading the agent\u2026" })) : (_jsxs(_Fragment, { children: [_jsx(Field, { label: "Name", hint: agent ? 'An agent keeps its name.' : 'Letters, digits, . _ or -. Other agents call it as agent_<name>.', children: _jsx(Input, { value: d.name, onChangeText: (v) => set({ name: v }), placeholder: "helper", "aria-label": "Name", disabled: Boolean(agent), autoCapitalize: "none" }) }), _jsx(Field, { label: "Description", hint: "The line another agent reads to decide whether to call this one.", children: _jsx(Input, { value: d.description, onChangeText: (v) => set({ description: v }), placeholder: "Answers questions about our codebase", "aria-label": "Description" }) }), _jsx(Field, { label: "Model", children: _jsxs(XStack, { items: "center", gap: "$2", flexWrap: "wrap", children: [_jsx(ModelPicker, { size: "sm", name: "Model", placeholder: "The deployment\u2019s default", models: catalog.value, scope: "chat", value: d.model || undefined, onChange: (id) => set({ model: id }), loading: catalog.loading, error: catalog.error?.message ?? null }), d.model && !agent ? (_jsx(Button, { size: "sm", variant: "ghost", onPress: () => set({ model: '' }), children: "Use the default" })) : null] }) }), _jsx(Field, { label: "Instructions", hint: "The system prompt: what the model reads before every run.", children: _jsx(Textarea, { value: d.instructions, onChangeText: (v) => set({ instructions: v }), placeholder: "Be terse, and cite the file you read.", "aria-label": "Instructions", rows: 8 }) }), _jsxs(YStack, { gap: "$2", children: [_jsxs(XStack, { items: "center", gap: "$3", children: [_jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$2", color: "$ink", children: "Tools" }), _jsx(SizableText, { size: "$1", color: "$soft", children: every ? 'Every tool the fleet’s MCP server serves when it runs.' : d.tools.length ? `${d.tools.length} chosen. It can call only these.` : 'None chosen: it can call no tool.' })] }), _jsx(SizableText, { size: "$1", color: "$soft", children: "Every tool" }), _jsx(Switch, { checked: every, onCheckedChange: (v) => set({ tools: v ? [ALL] : [] }), "aria-label": "Every tool" })] }), every ? null : (_jsxs(_Fragment, { children: [_jsx(Input, { value: find, onChangeText: setFind, placeholder: "Find a tool\u2026", "aria-label": "Find a tool" }), _jsx(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", maxH: 240, overflow: "scroll", children: on.loading && !on.value.length ? (_jsx(Soft, { children: "Reading the tools that are on\u2026" })) : on.error && !on.value.length ? (_jsx(Soft, { children: on.error.message })) : !shownTools.length ? (_jsx(Soft, { children: choices.length ? 'No tool matches.' : 'No tool is on for your organization. Switch skills and connectors on first.' })) : (shownTools.map((x, i) => (_jsxs(XStack, { items: "center", gap: "$3", px: "$3", py: "$2", borderTopWidth: i ? 1 : 0, borderColor: "$borderColor", children: [_jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$2", color: "$ink", style: mono, numberOfLines: 1, children: x.name }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: [x.source, x.description].filter(Boolean).join(' · ') })] }), _jsx(Switch, { checked: d.tools.includes(x.name), onCheckedChange: (v) => pick(x.name, v), "aria-label": `Use ${x.name}` })] }, x.name)))) })] }))] }), _jsxs(YStack, { gap: "$2", children: [_jsx(SizableText, { size: "$2", color: "$ink", children: "Budget" }), _jsxs(XStack, { gap: "$3", flexWrap: "wrap", rowGap: "$2", items: "flex-end", children: [_jsxs(YStack, { gap: "$1", width: 140, children: [_jsxs(SizableText, { size: "$1", color: "$soft", children: ["Each ", d.period, ", USD"] }), _jsx(Input, { value: d.cap, onChangeText: (v) => set({ cap: v }), placeholder: "10", "aria-label": "Budget each period", inputMode: "decimal" })] }), _jsxs(YStack, { gap: "$1", width: 140, children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "One run, USD" }), _jsx(Input, { value: d.task, onChangeText: (v) => set({ task: v }), placeholder: "1", "aria-label": "Budget for one run", inputMode: "decimal" })] }), _jsx(Choice, { label: "Period", value: d.period, options: PERIODS.map((p) => ({ id: p, label: p[0].toUpperCase() + p.slice(1) })), onChange: (p) => set({ period: p }) })] }), _jsxs(SizableText, { size: "$1", color: "$soft", children: [full.value && full.value.cap ? `Spent ${money(full.value.spent)} this ${full.value.period}. ` : '', "A run stops at either limit."] })] }), _jsx(Line, { children: note }), _jsxs(XStack, { gap: "$2", items: "center", children: [agent && onDeleted ? (_jsx(Button, { size: "sm", variant: "ghost", onPress: () => setAsking(true), children: "Delete" })) : null, _jsx(XStack, { flex: 1 }), _jsx(Button, { size: "sm", variant: "ghost", onPress: onClose, children: "Cancel" }), _jsx(Button, { size: "sm", disabled: working, onPress: () => void save(), children: agent ? 'Save' : 'Create' })] }), agent && onDeleted ? (_jsx(Confirm, { what: agent.name, says: "The agent and every run recorded against it are removed.", open: asking, onOpenChange: setAsking, onYes: async () => {
+    return (_jsx(Sheet, { title: agent ? agent.name : 'New agent', open: true, onOpenChange: (o) => !o && onClose(), width: 680, children: agent && full.error && !full.value ? (_jsx(Soft, { children: full.error.message })) : !ready ? (_jsx(Soft, { children: "Reading the agent\u2026" })) : (_jsxs(_Fragment, { children: [_jsx(Field, { label: "Name", hint: agent ? 'An agent keeps its name.' : 'Letters, digits, . _ or -. Other agents call it as agent_<name>.', children: _jsx(Input, { value: d.name, onChangeText: (v) => set({ name: v }), "aria-label": "Name", disabled: Boolean(agent), autoCapitalize: "none" }) }), _jsx(Field, { label: "Description", hint: "The line another agent reads to decide whether to call this one.", children: _jsx(Input, { value: d.description, onChangeText: (v) => set({ description: v }), placeholder: "Answers questions about our codebase", "aria-label": "Description" }) }), _jsx(Field, { label: "Model", children: _jsxs(XStack, { items: "center", gap: "$2", flexWrap: "wrap", children: [_jsx(ModelPicker, { size: "sm", name: "Model", placeholder: "The deployment\u2019s default", models: catalog.value, scope: "chat", value: d.model || undefined, onChange: (id) => set({ model: id }), loading: catalog.loading, error: catalog.error?.message ?? null }), d.model && !agent ? (_jsx(Button, { size: "sm", variant: "ghost", onPress: () => set({ model: '' }), children: "Use the default" })) : null] }) }), _jsx(Field, { label: "Instructions", hint: "The system prompt: what the model reads before every run.", children: _jsx(Textarea, { value: d.instructions, onChangeText: (v) => set({ instructions: v }), placeholder: "Be terse, and cite the file you read.", "aria-label": "Instructions", rows: 8 }) }), _jsxs(YStack, { gap: "$2", children: [_jsxs(XStack, { items: "center", gap: "$3", children: [_jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$2", color: "$ink", children: "Tools" }), _jsx(SizableText, { size: "$1", color: "$soft", children: every ? 'Every tool the fleet’s MCP server serves when it runs.' : d.tools.length ? `${d.tools.length} chosen. It can call only these.` : 'None chosen: it can call no tool.' })] }), _jsx(SizableText, { size: "$1", color: "$soft", children: "Every tool" }), _jsx(Switch, { checked: every, onCheckedChange: (v) => set({ tools: v ? [ALL] : [] }), "aria-label": "Every tool" })] }), every ? null : (_jsxs(_Fragment, { children: [_jsx(Input, { value: find, onChangeText: setFind, placeholder: "Find a tool\u2026", "aria-label": "Find a tool" }), _jsx(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", maxH: 240, overflow: "scroll", children: on.loading && !on.value.length ? (_jsx(Soft, { children: "Reading the tools that are on\u2026" })) : on.error && !on.value.length ? (_jsx(Soft, { children: on.error.message })) : !shownTools.length ? (_jsx(Soft, { children: choices.length ? 'No tool matches.' : 'No tool is on for your organization. Switch skills and connectors on first.' })) : (shownTools.map((x, i) => (_jsxs(XStack, { items: "center", gap: "$3", px: "$3", py: "$2", borderTopWidth: i ? 1 : 0, borderColor: "$borderColor", children: [_jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$2", color: "$ink", style: mono, numberOfLines: 1, children: x.name }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: [x.source, x.description].filter(Boolean).join(' · ') })] }), _jsx(Switch, { checked: d.tools.includes(x.name), onCheckedChange: (v) => pick(x.name, v), "aria-label": `Use ${x.name}` })] }, x.name)))) })] }))] }), _jsxs(YStack, { gap: "$2", children: [_jsx(SizableText, { size: "$2", color: "$ink", children: "Budget" }), _jsxs(XStack, { gap: "$3", flexWrap: "wrap", rowGap: "$2", items: "flex-end", children: [_jsxs(YStack, { gap: "$1", width: 140, children: [_jsxs(SizableText, { size: "$1", color: "$soft", children: ["Each ", d.period, ", USD"] }), _jsx(Input, { value: d.cap, onChangeText: (v) => set({ cap: v }), placeholder: "10", "aria-label": "Budget each period", inputMode: "decimal" })] }), _jsxs(YStack, { gap: "$1", width: 140, children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "One run, USD" }), _jsx(Input, { value: d.task, onChangeText: (v) => set({ task: v }), placeholder: "1", "aria-label": "Budget for one run", inputMode: "decimal" })] }), _jsx(Choice, { label: "Period", value: d.period, options: PERIODS.map((p) => ({ id: p, label: p[0].toUpperCase() + p.slice(1) })), onChange: (p) => set({ period: p }) })] }), _jsxs(SizableText, { size: "$1", color: "$soft", children: [full.value && full.value.cap ? `Spent ${money(full.value.spent)} this ${full.value.period}. ` : '', "A run stops at either limit."] })] }), _jsx(Line, { children: note }), _jsxs(XStack, { gap: "$2", items: "center", children: [agent && onDeleted ? (_jsx(Button, { size: "sm", variant: "ghost", onPress: () => setAsking(true), children: "Delete" })) : null, _jsx(XStack, { flex: 1 }), _jsx(Button, { size: "sm", variant: "ghost", onPress: onClose, children: "Cancel" }), _jsx(Button, { size: "sm", disabled: working, onPress: () => void save(), children: agent ? 'Save' : 'Create' })] }), agent && onDeleted ? (_jsx(Confirm, { what: agent.name, says: "The agent and every run recorded against it are removed.", open: asking, onOpenChange: setAsking, onYes: async () => {
                         await remove(t, agent.id || agent.name);
                         onDeleted();
                     } })) : null] })) }));

package/lib/customize/plugins.js

@@ -78,7 +78,7 @@ function Build({ onClose, onBuilt }) {
             setWorking(false);
         }
     };
-    return (_jsxs(Sheet, { title: "Build a plugin", open: true, onOpenChange: (o) => !o && onClose(), width: 680, children: [_jsx(Field, { label: "Name", hint: "One lowercase word: letters, digits, _ or -. The runtime loads it by this name.", children: _jsx(Input, { value: name, onChangeText: setName, placeholder: "acme", "aria-label": "Name", autoCapitalize: "none" }) }), _jsx(Field, { label: "Connector", hint: "Optional. The connector whose credential the plugin reads when it runs. A plugin never holds a key itself.", children: _jsx(Input, { value: provider, onChangeText: setProvider, placeholder: "acme", "aria-label": "Connector", autoCapitalize: "none" }) }), _jsx(Choice, { label: "Build from", value: way, options: WAYS, onChange: setWay }), _jsx(Field, { label: way === 'source' ? 'Source' : 'The API', hint: way === 'source'
+    return (_jsxs(Sheet, { title: "Build a plugin", open: true, onOpenChange: (o) => !o && onClose(), width: 680, children: [_jsx(Field, { label: "Name", hint: "One lowercase word: letters, digits, _ or -. The runtime loads it by this name.", children: _jsx(Input, { value: name, onChangeText: setName, "aria-label": "Name", autoCapitalize: "none" }) }), _jsx(Field, { label: "Connector", hint: "Optional. The connector whose credential the plugin reads when it runs. A plugin never holds a key itself.", children: _jsx(Input, { value: provider, onChangeText: setProvider, "aria-label": "Connector", autoCapitalize: "none" }) }), _jsx(Choice, { label: "Build from", value: way, options: WAYS, onChange: setWay }), _jsx(Field, { label: way === 'source' ? 'Source' : 'The API', hint: way === 'source'
                     ? 'It is bundled and compiled in the runtime that will run it, and kept only if both succeed.'
                     : 'An OpenAPI document, or prose naming the endpoints. A model writes the TypeScript; you read it before it runs.', children: _jsx(Textarea, { value: way === 'source' ? source : spec, onChangeText: way === 'source' ? setSource : setSpec, "aria-label": way === 'source' ? 'Source' : 'The API', placeholder: way === 'source' ? 'export const acme = createProvider({ … })' : 'POST /v1/things creates a thing…', rows: 14, style: mono }) }), _jsx(Line, { children: note }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: onClose, children: "Cancel" }), _jsx(Button, { size: "sm", disabled: working, onPress: () => void go(), children: "Build" })] })] }));
 }

package/lib/customize/skills.js

@@ -120,7 +120,7 @@ function Editor({ skill, may, onClose, onSaved, onDeleted, }) {
             setWorking(false);
         }
     };
-    return (_jsxs(Sheet, { title: skill ? skill.name : 'New skill', open: true, onOpenChange: (o) => !o && onClose(), width: 680, children: [skill?.source ? (_jsxs(SizableText, { size: "$2", color: "$soft", children: ["Read from ", skill.source, ". The next push of that repository replaces what is saved here."] })) : null, _jsx(Field, { label: "Name", hint: skill ? 'A skill’s name is its id; save under another name to make a new one.' : 'One lowercase word: letters, digits, _ or -. Agents name it as skill_<name>.', children: _jsx(Input, { value: name, onChangeText: setName, placeholder: "triage", "aria-label": "Name", disabled: Boolean(skill), autoCapitalize: "none" }) }), _jsx(Field, { label: "Description", hint: "The one line an agent reads to decide whether it needs this skill.", children: _jsx(Input, { value: description, onChangeText: setDescription, placeholder: "How we triage an incoming issue", "aria-label": "Description" }) }), _jsx(Field, { label: "SKILL.md", hint: "Markdown: what the skill is for, when to use it, and the steps.", children: _jsx(Textarea, { value: content, onChangeText: setContent, placeholder: '# Triage\n\n1. Read the issue…', "aria-label": "SKILL.md", rows: 14, style: mono }) }), _jsx(Line, { children: note || (may ? '' : 'An org admin writes and deletes the organization’s skills.') }), _jsxs(XStack, { gap: "$2", items: "center", children: [skill && may ? (_jsx(Button, { size: "sm", variant: "ghost", onPress: () => setAsking(true), children: "Delete" })) : null, _jsx(XStack, { flex: 1 }), _jsx(Button, { size: "sm", variant: "ghost", onPress: onClose, children: may ? 'Cancel' : 'Close' }), may ? (_jsx(Button, { size: "sm", disabled: working, onPress: () => void save(), children: "Save" })) : null] }), skill ? (_jsx(Confirm, { what: skill.name, says: "The skill leaves your organization and every agent that names it.", open: asking, onOpenChange: setAsking, onYes: async () => {
+    return (_jsxs(Sheet, { title: skill ? skill.name : 'New skill', open: true, onOpenChange: (o) => !o && onClose(), width: 680, children: [skill?.source ? (_jsxs(SizableText, { size: "$2", color: "$soft", children: ["Read from ", skill.source, ". The next push of that repository replaces what is saved here."] })) : null, _jsx(Field, { label: "Name", hint: skill ? 'A skill’s name is its id; save under another name to make a new one.' : 'One lowercase word: letters, digits, _ or -. Agents name it as skill_<name>.', children: _jsx(Input, { value: name, onChangeText: setName, "aria-label": "Name", disabled: Boolean(skill), autoCapitalize: "none" }) }), _jsx(Field, { label: "Description", hint: "The one line an agent reads to decide whether it needs this skill.", children: _jsx(Input, { value: description, onChangeText: setDescription, placeholder: "How we triage an incoming issue", "aria-label": "Description" }) }), _jsx(Field, { label: "SKILL.md", hint: "Markdown: what the skill is for, when to use it, and the steps.", children: _jsx(Textarea, { value: content, onChangeText: setContent, placeholder: '# Triage\n\n1. Read the issue…', "aria-label": "SKILL.md", rows: 14, style: mono }) }), _jsx(Line, { children: note || (may ? '' : 'An org admin writes and deletes the organization’s skills.') }), _jsxs(XStack, { gap: "$2", items: "center", children: [skill && may ? (_jsx(Button, { size: "sm", variant: "ghost", onPress: () => setAsking(true), children: "Delete" })) : null, _jsx(XStack, { flex: 1 }), _jsx(Button, { size: "sm", variant: "ghost", onPress: onClose, children: may ? 'Cancel' : 'Close' }), may ? (_jsx(Button, { size: "sm", disabled: working, onPress: () => void save(), children: "Save" })) : null] }), skill ? (_jsx(Confirm, { what: skill.name, says: "The skill leaves your organization and every agent that names it.", open: asking, onOpenChange: setAsking, onYes: async () => {
                     await remove(t, skill.id);
                     onDeleted(skill.name);
                 } })) : null] }));

package/lib/forge.js

@@ -60,11 +60,12 @@ function Codebases() {
     const [q, setQ] = useState('');
     const [making, setMaking] = useState(false);
     const [sort, setSort] = useState('name');
+    const [filter, setFilter] = useState('all');
     const [page, setPage] = useState(0);
     const [landed, setLanded] = useState(0);
     useEffect(() => {
         setPage(0);
-    }, [q, sort]);
+    }, [q, sort, filter]);
     const list = useRead(signed ? () => codebases(t) : null, [], [t, signed, making, landed]);
     // Which codebases have an environment. A codebase absent here has none.
     const envs = useRead(signed ? () => environments(t) : null, [], [t, signed]);
@@ -109,6 +110,13 @@ function Codebases() {
             branches: ['main'],
         })),
     ]
+        .filter((c) => {
+        if (filter === 'ready')
+            return envOf.get(c.name) === 'ready';
+        if (filter === 'syncing')
+            return syncing.has(c.name);
+        return true;
+    })
         .filter((c) => !needle || `${c.org}/${c.name} ${c.description}`.toLowerCase().includes(needle))
         .slice()
         .sort((a, b) => {
@@ -128,7 +136,7 @@ function Codebases() {
         pinCodebase(host.org, c);
         host.go('');
     };
-    return (_jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", children: [_jsxs(YStack, { width: "100%", maxW: 1040, mx: "auto", gap: "$4", children: [_jsxs(XStack, { justify: "space-between", items: "flex-start", gap: "$4", children: [_jsxs(YStack, { gap: "$1", flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$6", fontWeight: "500", color: "$ink", children: host.org || 'Forge' }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Create and browse this organization\u2019s repositories." })] }), _jsxs(XStack, { render: "button", "aria-label": "Settings", shrink: 0, items: "center", gap: "$1.5", px: "$2", py: "$1", rounded: "$3", hoverStyle: { bg: '$hover' }, onPress: () => host.go('-/settings/environments'), children: [_jsx(Settings, { size: 14 }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Settings" })] })] }), _jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(XStack, { px: "$2.5", py: "$1.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", shrink: 0, "$max-md": { display: 'none' }, children: _jsx(SizableText, { size: "$2", color: "$ink", children: "All repos" }) }), _jsx(YStack, { flex: 1, "$max-md": { display: 'none' } }), _jsx(YStack, { width: 240, minW: 0, shrink: 1, "$max-md": { width: 'auto', flex: 1 }, children: _jsx(Input, { value: q, onChangeText: setQ, placeholder: "Find repo\u2026", "aria-label": "Find a repository", disabled: !signed }) }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => host.go(path({ kind: 'screen', screen: 'sync' })), children: "Sync" }), _jsxs(Button, { size: "sm", disabled: !signed, onPress: () => setMaking(true), children: [_jsx(Plus, { size: 14 }), "New"] })] }), list.error ? (_jsx(Note, { children: list.error.message })) : !signed ? (_jsx(Note, { children: "Sign in to see this organization's repositories." })) : list.loading && list.value.length === 0 ? (_jsx(Note, { children: "Reading the forge\u2026" })) : shown.length === 0 ? (_jsx(Note, { children: list.value.length === 0 ? 'No repositories yet.' : 'Nothing matches.' })) : (_jsxs(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: [_jsxs(XStack, { px: "$3", py: "$2", gap: "$3", items: "center", children: [_jsxs(XStack, { flex: 1, render: "button", "aria-label": "Sort by name", items: "center", gap: "$1", onPress: () => setSort('name'), children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "Name" }), sort === 'name' ? _jsx(ChevronDown, { size: 12 }) : null] }), _jsx(SizableText, { size: "$1", color: "$soft", width: 96, "$max-md": { display: 'none' }, children: "Environment" }), _jsxs(XStack, { render: "button", "aria-label": "Sort by last updated", items: "center", justify: "flex-end", gap: "$1", width: 140, onPress: () => setSort('updated'), children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "Last updated" }), sort === 'updated' ? _jsx(ChevronDown, { size: 12 }) : null] })] }), slice.map((c) => (_jsxs(XStack, { render: "button", "aria-label": `Work on ${c.name}`, onPress: () => open(c), items: "center", gap: "$3", px: "$3", py: "$2.5", borderTopWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: [_jsx(GitBranch, { size: 14 }), _jsx(SizableText, { flex: 1, size: "$2", color: "$ink", numberOfLines: 1, children: c.name }), _jsx(SizableText, { size: "$1", color: "$soft", width: 96, "$max-md": { display: 'none' }, children: envOf.get(c.name) === 'ready' ? 'Ready' : envOf.get(c.name) === 'proposed' ? 'To review' : '—' }), _jsx(SizableText, { size: "$1", color: "$soft", width: 140, style: { textAlign: 'right' }, children: syncing.has(c.name) ? 'Syncing…' : ago(c.updated) })] }, `${c.org}/${c.name}`))), _jsxs(XStack, { px: "$3", py: "$2", justify: "space-between", items: "center", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: `Showing ${from}–${to} of ${shown.length}` }), _jsxs(XStack, { gap: "$3", items: "center", children: [_jsx(XStack, { render: "button", "aria-label": "Previous page", disabled: safePage === 0, onPress: () => setPage(safePage - 1), children: _jsx(SizableText, { size: "$1", color: safePage === 0 ? '$soft' : '$ink', children: "Prev" }) }), _jsx(SizableText, { size: "$1", color: "$soft", children: `${safePage + 1} / ${pages}` }), _jsx(XStack, { render: "button", "aria-label": "Next page", disabled: safePage >= pages - 1, onPress: () => setPage(safePage + 1), children: _jsx(SizableText, { size: "$1", color: safePage >= pages - 1 ? '$soft' : '$ink', children: "Next" }) })] })] })] }))] }), _jsx(NewRepo, { open: making, onOpenChange: setMaking, onCreate: async (name, description) => {
+    return (_jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", children: [_jsxs(YStack, { width: "100%", maxW: 1040, mx: "auto", gap: "$4", children: [_jsxs(XStack, { justify: "space-between", items: "flex-start", gap: "$4", children: [_jsxs(YStack, { gap: "$1", flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$6", fontWeight: "500", color: "$ink", children: host.org || 'Forge' }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Create and browse this organization\u2019s repositories." })] }), _jsxs(XStack, { render: "button", "aria-label": "Settings", shrink: 0, items: "center", gap: "$1.5", px: "$2", py: "$1", rounded: "$3", hoverStyle: { bg: '$hover' }, onPress: () => host.go('-/settings/environments'), children: [_jsx(Settings, { size: 14 }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Settings" })] })] }), _jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(XStack, { render: "button", "aria-label": "Filter repositories", onPress: () => setFilter((f) => (f === 'all' ? 'ready' : f === 'ready' ? 'syncing' : 'all')), px: "$2.5", py: "$1.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", shrink: 0, hoverStyle: { bg: '$hover' }, "$max-md": { display: 'none' }, children: _jsx(SizableText, { size: "$2", color: "$ink", children: filter === 'ready' ? 'Ready env' : filter === 'syncing' ? 'Syncing' : 'All repos' }) }), _jsx(YStack, { flex: 1, "$max-md": { display: 'none' } }), _jsx(YStack, { width: 240, minW: 0, shrink: 1, "$max-md": { width: 'auto', flex: 1 }, children: _jsx(Input, { value: q, onChangeText: setQ, placeholder: "Find repo\u2026", "aria-label": "Find a repository", disabled: !signed }) }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => host.go(path({ kind: 'screen', screen: 'sync' })), children: "Sync" }), _jsxs(Button, { size: "sm", disabled: !signed, onPress: () => setMaking(true), children: [_jsx(Plus, { size: 14 }), "New"] })] }), list.error ? (_jsx(Note, { children: list.error.message })) : !signed ? (_jsx(Note, { children: "Sign in to see this organization's repositories." })) : list.loading && list.value.length === 0 ? (_jsx(Note, { children: "Reading the forge\u2026" })) : shown.length === 0 ? (_jsxs(YStack, { gap: "$3", py: "$2", children: [_jsx(Note, { children: list.value.length === 0 ? 'No repositories yet.' : 'Nothing matches.' }), list.value.length === 0 ? (_jsxs(XStack, { gap: "$2", pt: "$1", children: [_jsxs(Button, { size: "sm", disabled: !signed, onPress: () => setMaking(true), children: [_jsx(Plus, { size: 14 }), "Create repository"] }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => host.go(path({ kind: 'screen', screen: 'sync' })), children: "Sync from GitHub" }), _jsx(Button, { size: "sm", variant: "ghost", onPress: () => host.go('-/templates'), children: "Start from template" })] })) : null] })) : (_jsxs(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: [_jsxs(XStack, { px: "$3", py: "$2", gap: "$3", items: "center", children: [_jsxs(XStack, { flex: 1, render: "button", "aria-label": "Sort by name", items: "center", gap: "$1", onPress: () => setSort('name'), children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "Name" }), sort === 'name' ? _jsx(ChevronDown, { size: 12 }) : null] }), _jsx(SizableText, { size: "$1", color: "$soft", width: 96, "$max-md": { display: 'none' }, children: "Environment" }), _jsxs(XStack, { render: "button", "aria-label": "Sort by last updated", items: "center", justify: "flex-end", gap: "$1", width: 140, onPress: () => setSort('updated'), children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "Last updated" }), sort === 'updated' ? _jsx(ChevronDown, { size: 12 }) : null] })] }), slice.map((c) => (_jsxs(XStack, { render: "button", "aria-label": `Work on ${c.name}`, onPress: () => open(c), items: "center", gap: "$3", px: "$3", py: "$2.5", borderTopWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: [_jsx(GitBranch, { size: 14 }), _jsx(SizableText, { flex: 1, size: "$2", color: "$ink", numberOfLines: 1, children: c.name }), _jsx(SizableText, { size: "$1", color: "$soft", width: 96, "$max-md": { display: 'none' }, children: envOf.get(c.name) === 'ready' ? 'Ready' : envOf.get(c.name) === 'proposed' ? 'To review' : '—' }), _jsx(SizableText, { size: "$1", color: "$soft", width: 140, style: { textAlign: 'right' }, children: syncing.has(c.name) ? 'Syncing…' : ago(c.updated) })] }, `${c.org}/${c.name}`))), _jsxs(XStack, { px: "$3", py: "$2", justify: "space-between", items: "center", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: `Showing ${from}–${to} of ${shown.length}` }), _jsxs(XStack, { gap: "$3", items: "center", children: [_jsx(XStack, { render: "button", "aria-label": "Previous page", disabled: safePage === 0, onPress: () => setPage(safePage - 1), children: _jsx(SizableText, { size: "$1", color: safePage === 0 ? '$soft' : '$ink', children: "Prev" }) }), _jsx(SizableText, { size: "$1", color: "$soft", children: `${safePage + 1} / ${pages}` }), _jsx(XStack, { render: "button", "aria-label": "Next page", disabled: safePage >= pages - 1, onPress: () => setPage(safePage + 1), children: _jsx(SizableText, { size: "$1", color: safePage >= pages - 1 ? '$soft' : '$ink', children: "Next" }) })] })] })] }))] }), _jsx(NewRepo, { open: making, onOpenChange: setMaking, onCreate: async (name, description) => {
                     const row = await create(t, name, description);
                     pinCodebase(host.org, row);
                     setMaking(false);
@@ -140,6 +148,13 @@ function NewRepo({ open, onOpenChange, onCreate, }) {
     const [description, setDescription] = useState('');
     const [busy, setBusy] = useState(false);
     const [error, setError] = useState('');
+    useEffect(() => {
+        if (!open) {
+            setName('');
+            setDescription('');
+            setError('');
+        }
+    }, [open]);
     const submit = async () => {
         setBusy(true);
         setError('');
@@ -166,7 +181,7 @@ function Projects() {
         pinBoard(host.org, b.key);
         host.go(path({ kind: 'screen', screen: 'issues' }));
     };
-    return (_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", items: "center", children: _jsxs(YStack, { width: "100%", maxW: 720, gap: "$3", children: [_jsx(Head, { title: "Projects", says: "Boards on the forge. A board is a repository that has work on it." }), list.error ? (_jsx(Note, { children: list.error.message })) : !signed ? (_jsx(Note, { children: "Sign in to see this organization's boards." })) : list.loading && list.value.length === 0 ? (_jsx(Note, { children: "Reading the forge\u2026" })) : list.value.length === 0 ? (_jsx(Note, { children: "No boards yet. A repository shows up here once it has an issue." })) : (_jsx(YStack, { gap: "$2", children: list.value.map((b) => (_jsx(Row, { label: `Open ${b.name}`, onPress: () => open(b), children: _jsxs(YStack, { flex: 1, minW: 0, gap: "$1", children: [_jsx(SizableText, { size: "$3", color: "$ink", numberOfLines: 1, children: b.name }), b.description ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: b.description })) : (_jsx(SizableText, { size: "$1", color: "$soft", children: b.key }))] }) }, b.key))) }))] }) }));
+    return (_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", items: "center", children: _jsxs(YStack, { width: "100%", maxW: 720, gap: "$3", children: [_jsx(Head, { title: "Projects", says: "Boards on the forge. A board is a repository that has work on it." }), list.error ? (_jsx(Note, { children: list.error.message })) : !signed ? (_jsx(Note, { children: "Sign in to see this organization's boards." })) : list.loading && list.value.length === 0 ? (_jsx(Note, { children: "Reading the forge\u2026" })) : list.value.length === 0 ? (_jsxs(YStack, { gap: "$3", py: "$2", children: [_jsx(Note, { children: "No boards yet. A repository shows up here once it has an issue." }), _jsxs(XStack, { gap: "$2", pt: "$1", children: [_jsx(Button, { size: "sm", variant: "outline", onPress: () => host.go(path({ kind: 'screen', screen: 'codebases' })), children: "View repositories" }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => host.go(path({ kind: 'screen', screen: 'sync' })), children: "Sync from GitHub" })] })] })) : (_jsx(YStack, { gap: "$2", children: list.value.map((b) => (_jsx(Row, { label: `Open ${b.name}`, onPress: () => open(b), children: _jsxs(YStack, { flex: 1, minW: 0, gap: "$1", children: [_jsx(SizableText, { size: "$3", color: "$ink", numberOfLines: 1, children: b.name }), b.description ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: b.description })) : (_jsx(SizableText, { size: "$1", color: "$soft", children: b.key }))] }) }, b.key))) }))] }) }));
 }
 function Issues() {
     const host = useHost();
@@ -196,5 +211,5 @@ function Issues() {
         }
         host.go('');
     };
-    return (_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", items: "center", children: _jsxs(YStack, { width: "100%", maxW: 720, gap: "$3", children: [_jsx(Head, { title: "Issues", says: board ? `Open work on ${board}. Choosing one starts the next run on that codebase.` : 'Open work across every board. Choosing one starts the next run on that codebase.' }), board ? (_jsx(XStack, { render: "button", onPress: () => setBoard(''), "aria-label": "Show every board", self: "flex-start", children: _jsx(SizableText, { size: "$1", color: "$soft", children: "All boards" }) })) : null, list.error ? (_jsx(Note, { children: list.error.message })) : !signed ? (_jsx(Note, { children: "Sign in to see this organization's issues." })) : list.loading && list.value.length === 0 ? (_jsx(Note, { children: "Reading the forge\u2026" })) : list.value.length === 0 ? (_jsx(Note, { children: "Nothing open." })) : (_jsx(YStack, { gap: "$2", children: list.value.map((w) => (_jsxs(Row, { label: `Build ${w.identifier || w.title}`, onPress: () => open(w), children: [_jsx(SizableText, { size: "$1", color: "$soft", width: 88, numberOfLines: 1, children: w.identifier || w.kind }), _jsx(SizableText, { size: "$3", color: "$ink", flex: 1, minW: 0, numberOfLines: 1, children: w.title }), _jsx(SizableText, { size: "$1", color: "$soft", children: STATUS[w.status] ?? w.status })] }, w.id))) }))] }) }));
+    return (_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", items: "center", children: _jsxs(YStack, { width: "100%", maxW: 720, gap: "$3", children: [_jsx(Head, { title: "Issues", says: board ? `Open work on ${board}. Choosing one starts the next run on that codebase.` : 'Open work across every board. Choosing one starts the next run on that codebase.' }), board ? (_jsx(XStack, { render: "button", onPress: () => setBoard(''), "aria-label": "Show every board", self: "flex-start", children: _jsx(SizableText, { size: "$1", color: "$soft", children: "All boards" }) })) : null, list.error ? (_jsx(Note, { children: list.error.message })) : !signed ? (_jsx(Note, { children: "Sign in to see this organization's issues." })) : list.loading && list.value.length === 0 ? (_jsx(Note, { children: "Reading the forge\u2026" })) : list.value.length === 0 ? (_jsxs(YStack, { gap: "$3", py: "$2", children: [_jsx(Note, { children: "Nothing open." }), _jsxs(XStack, { gap: "$2", pt: "$1", children: [_jsx(Button, { size: "sm", variant: "outline", onPress: () => host.go(path({ kind: 'screen', screen: 'codebases' })), children: "View repositories" }), _jsx(Button, { size: "sm", onPress: () => host.go(''), children: "Start a new run" })] })] })) : (_jsx(YStack, { gap: "$2", children: list.value.map((w) => (_jsxs(Row, { label: `Build ${w.identifier || w.title}`, onPress: () => open(w), children: [_jsx(SizableText, { size: "$1", color: "$soft", width: 88, numberOfLines: 1, children: w.identifier || w.kind }), _jsx(SizableText, { size: "$3", color: "$ink", flex: 1, minW: 0, numberOfLines: 1, children: w.title }), _jsx(SizableText, { size: "$1", color: "$soft", children: STATUS[w.status] ?? w.status })] }, w.id))) }))] }) }));
 }

package/lib/settings/billing.js

@@ -6,14 +6,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
 import { CreditCard, Download, Plus, X } from '@hanzogui/lucide-icons-2';
-import { Button, Dialog, DialogContent, DialogTitle, toast } from '@hanzo/ui';
-import { useState } from 'react';
-import { cancel, current, detach, invoices, label, methods, money, pdf, reactivate, subscriptions, } from '../api/billing.js';
+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 { useRead } from '../data.js';
 import { useHost, useTarget } from '../host.js';
 import { path } from '../route.js';
 import { AddCard } from './card.js';
-import { Card, day, Group, Heading, Note, Row, Soft } from './ui.js';
+import { Card, day, Field, Group, Heading, Note, Row, Soft } from './ui.js';
 export function Billing() {
     const host = useHost();
     const t = useTarget();
@@ -23,6 +23,7 @@ export function Billing() {
     const bills = useRead(signed ? () => invoices(t) : null, [], [t, signed]);
     const [adding, setAdding] = useState(false);
     const [ending, setEnding] = useState(false);
+    const [editingBilling, setEditingBilling] = useState(null);
     const [open, setOpen] = useState(null);
     const [working, setWorking] = useState(false);
     const [note, setNote] = useState('');
@@ -31,6 +32,7 @@ export function Billing() {
     }
     const plan = current(subs.value);
     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.
     const act = async (what, done, after) => {
         setWorking(true);
@@ -51,14 +53,85 @@ export function Billing() {
                                     ? 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, { 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' : ''].filter(Boolean).join(' · ') || undefined, trailing: host.admin ? (_jsx(Button, { size: "sm", variant: "ghost", "aria-label": `Remove ${label(m)}`, disabled: working, onPress: () => void act(() => detach(t, m.id), `${label(m)} is removed`, cards.reload), children: "Remove" })) : undefined }, m.id))) })), !host.admin && cards.value.length ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "An org admin adds and removes cards." })) : null] }), _jsx(Group, { title: "Invoices", children: bills.error ? (_jsx(Soft, { children: bills.error.message })) : bills.loading && !bills.value.length ? (_jsx(Soft, { children: "Reading invoices\u2026" })) : bills.value.length === 0 ? (_jsx(Card, { children: _jsx(Soft, { children: "No invoices yet." }) })) : (_jsxs(Card, { children: [_jsxs(XStack, { px: "$3", py: "$2", gap: "$3", children: [_jsx(SizableText, { flex: 1, size: "$1", color: "$soft", children: "Date" }), _jsx(SizableText, { width: 90, size: "$1", color: "$soft", style: { textAlign: 'right' }, children: "Total" }), _jsx(SizableText, { width: 70, size: "$1", color: "$soft", "$max-sm": { display: 'none' }, children: "Status" }), _jsx(YStack, { width: 64 })] }), bills.value.map((b) => (_jsxs(XStack, { items: "center", gap: "$3", px: "$3", py: "$2.5", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { flex: 1, size: "$2", color: "$ink", numberOfLines: 1, children: day(b.date) || b.number || b.id }), _jsx(SizableText, { width: 90, size: "$2", color: "$ink", style: { textAlign: 'right' }, children: money(b.total, b.currency) }), _jsx(SizableText, { width: 70, size: "$1", color: "$soft", "$max-sm": { display: 'none' }, children: word(b.status) }), _jsx(XStack, { width: 64, justify: "flex-end", children: _jsx(Button, { size: "sm", variant: "ghost", "aria-label": `View invoice ${b.number || day(b.date)}`, onPress: () => setOpen(b), children: "View" }) })] }, b.id)))] })) }), plan ? (_jsx(Group, { title: "Cancellation", children: _jsx(Card, { children: _jsx(Row, { first: true, title: plan.ending ? `Your plan ends on ${day(plan.ends)}` : 'Cancel plan', detail: plan.ending ? 'Keep it, and it renews as before.' : 'It runs to the end of the period you paid for, then ends.', trailing: !host.admin ? undefined : plan.ending ? (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void act(() => reactivate(t, plan.id), 'Your plan renews as before', subs.reload), children: "Keep plan" })) : (_jsx(Button, { size: "sm", variant: "destructive", disabled: working, onPress: () => setEnding(true), children: "Cancel" })) }) }) })) : null, _jsx(Note, { children: note }), _jsx(AddCard, { open: adding, onOpenChange: setAdding, onSaved: (m) => {
+                                        : '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: [
+                                m.expires ? `Expires ${m.expires}` : '',
+                                m.default ? 'Default' : '',
+                                m.billingAddress ? formatAddress(m.billingAddress) : '',
+                            ]
+                                .filter(Boolean)
+                                .join(' · ') || undefined, trailing: host.admin ? (_jsxs(XStack, { gap: "$2", items: "center", children: [!m.default ? (_jsx(Button, { size: "sm", variant: "ghost", "aria-label": `Make ${label(m)} default`, disabled: working, onPress: () => void act(() => makeDefault(t, m.id), `${label(m)} is now the default`, cards.reload), children: "Make default" })) : null, _jsx(Button, { size: "sm", variant: "ghost", "aria-label": `Edit billing info for ${label(m)}`, disabled: working, onPress: () => setEditingBilling(m), children: "Edit info" }), _jsx(Button, { size: "sm", variant: "ghost", "aria-label": `Remove ${label(m)}`, disabled: working, onPress: () => void act(() => detach(t, m.id), `${label(m)} is removed`, cards.reload), children: "Remove" })] })) : undefined }, m.id))) })), !host.admin && cards.value.length ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "An org admin adds and removes cards." })) : null] }), _jsx(Group, { title: "Billing details", detail: "Information printed on invoices and payment receipts.", action: host.admin && defaultCard ? (_jsx(Button, { size: "sm", variant: "outline", onPress: () => setEditingBilling(defaultCard), children: defaultCard.billingAddress ? 'Edit details' : 'Add billing info' })) : undefined, children: defaultCard?.billingAddress ? (_jsx(Card, { children: _jsxs(YStack, { p: "$3", gap: "$1.5", children: [defaultCard.billingAddress.name ? (_jsx(SizableText, { size: "$3", color: "$ink", style: { fontWeight: 600 }, children: defaultCard.billingAddress.name })) : null, defaultCard.billingAddress.line1 ? (_jsxs(SizableText, { size: "$2", color: "$soft", children: [defaultCard.billingAddress.line1, defaultCard.billingAddress.line2 ? `, ${defaultCard.billingAddress.line2}` : ''] })) : null, defaultCard.billingAddress.city || defaultCard.billingAddress.state || defaultCard.billingAddress.postalCode ? (_jsx(SizableText, { size: "$2", color: "$soft", children: [defaultCard.billingAddress.city, defaultCard.billingAddress.state, defaultCard.billingAddress.postalCode]
+                                    .filter(Boolean)
+                                    .join(' ') })) : null, defaultCard.billingAddress.country ? (_jsx(SizableText, { size: "$2", color: "$soft", children: defaultCard.billingAddress.country })) : null] }) })) : (_jsxs(XStack, { items: "center", justify: "space-between", gap: "$3", px: "$4", py: "$3", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", flexWrap: "wrap", children: [_jsxs(YStack, { flex: 1, minW: 180, gap: "$1", children: [_jsx(SizableText, { size: "$2", color: "$ink", children: "No billing address on file." }), _jsx(SizableText, { size: "$1", color: "$soft", children: "Add your company name and address so they appear on monthly invoices and receipts." })] }), host.admin ? (_jsxs(Button, { size: "sm", variant: "outline", onPress: () => (defaultCard ? setEditingBilling(defaultCard) : setAdding(true)), children: [_jsx(Plus, { size: 14 }), " ", defaultCard ? 'Add billing info' : 'Set billing info'] })) : null] })) }), _jsx(Group, { title: "Invoices", children: bills.error ? (_jsx(Soft, { children: bills.error.message })) : bills.loading && !bills.value.length ? (_jsx(Soft, { children: "Reading invoices\u2026" })) : bills.value.length === 0 ? (_jsx(Card, { children: _jsx(Soft, { children: "No invoices yet." }) })) : (_jsxs(Card, { children: [_jsxs(XStack, { px: "$3", py: "$2", gap: "$3", children: [_jsx(SizableText, { flex: 1, size: "$1", color: "$soft", children: "Date" }), _jsx(SizableText, { width: 90, size: "$1", color: "$soft", style: { textAlign: 'right' }, children: "Total" }), _jsx(SizableText, { width: 70, size: "$1", color: "$soft", "$max-sm": { display: 'none' }, children: "Status" }), _jsx(YStack, { width: 64 })] }), bills.value.map((b) => (_jsxs(XStack, { items: "center", gap: "$3", px: "$3", py: "$2.5", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { flex: 1, size: "$2", color: "$ink", numberOfLines: 1, children: day(b.date) || b.number || b.id }), _jsx(SizableText, { width: 90, size: "$2", color: "$ink", style: { textAlign: 'right' }, children: money(b.total, b.currency) }), _jsx(SizableText, { width: 70, size: "$1", color: "$soft", "$max-sm": { display: 'none' }, children: word(b.status) }), _jsx(XStack, { width: 64, justify: "flex-end", children: _jsx(Button, { size: "sm", variant: "ghost", "aria-label": `View invoice ${b.number || day(b.date)}`, onPress: () => setOpen(b), children: "View" }) })] }, b.id)))] })) }), plan ? (_jsx(Group, { title: "Cancellation", children: _jsx(Card, { children: _jsx(Row, { first: true, title: plan.ending ? `Your plan ends on ${day(plan.ends)}` : 'Cancel plan', detail: plan.ending ? 'Keep it, and it renews as before.' : 'It runs to the end of the period you paid for, then ends.', trailing: !host.admin ? undefined : plan.ending ? (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void act(() => reactivate(t, plan.id), 'Your plan renews as before', subs.reload), children: "Keep plan" })) : (_jsx(Button, { size: "sm", variant: "destructive", disabled: working, onPress: () => setEnding(true), children: "Cancel" })) }) }) })) : null, _jsx(Note, { children: note }), _jsx(AddCard, { open: adding, onOpenChange: setAdding, onSaved: (m) => {
                     cards.reload();
                     toast.success(`${label(m)} is saved`);
+                } }), _jsx(EditBilling, { open: editingBilling !== null, onOpenChange: (o) => !o && setEditingBilling(null), card: editingBilling, onSaved: () => {
+                    cards.reload();
                 } }), plan ? (_jsx(Ending, { plan: plan, open: ending, working: working, onOpenChange: setEnding, onConfirm: () => void act(() => cancel(t, plan.id), `Your plan ends on ${day(plan.ends)}`, () => {
                     setEnding(false);
                     subs.reload();
                 }) })) : null, open ? _jsx(Bill, { invoice: open, onClose: () => setOpen(null) }) : null] }));
 }
+function EditBilling({ open, onOpenChange, card, onSaved, }) {
+    const t = useTarget();
+    const [name, setName] = useState('');
+    const [line1, setLine1] = useState('');
+    const [line2, setLine2] = useState('');
+    const [city, setCity] = useState('');
+    const [stateVal, setStateVal] = useState('');
+    const [postalCode, setPostalCode] = useState('');
+    const [country, setCountry] = useState('US');
+    const [working, setWorking] = useState(false);
+    const [note, setNote] = useState('');
+    useEffect(() => {
+        if (card?.billingAddress) {
+            setName(card.billingAddress.name ?? '');
+            setLine1(card.billingAddress.line1 ?? '');
+            setLine2(card.billingAddress.line2 ?? '');
+            setCity(card.billingAddress.city ?? '');
+            setStateVal(card.billingAddress.state ?? '');
+            setPostalCode(card.billingAddress.postalCode ?? '');
+            setCountry(card.billingAddress.country ?? 'US');
+        }
+        else {
+            setName('');
+            setLine1('');
+            setLine2('');
+            setCity('');
+            setStateVal('');
+            setPostalCode('');
+            setCountry('US');
+        }
+        setNote('');
+    }, [card]);
+    const save = async () => {
+        if (!card)
+            return;
+        setWorking(true);
+        setNote('');
+        try {
+            const address = {
+                name: name.trim() || undefined,
+                line1: line1.trim() || undefined,
+                line2: line2.trim() || undefined,
+                city: city.trim() || undefined,
+                state: stateVal.trim() || undefined,
+                postalCode: postalCode.trim() || undefined,
+                country: country.trim() || undefined,
+            };
+            await updateMethod(t, card.id, { billingAddress: address });
+            onSaved();
+            onOpenChange(false);
+            toast.success('Billing details updated');
+        }
+        catch (e) {
+            setNote(e.message);
+        }
+        finally {
+            setWorking(false);
+        }
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 460, showCloseButton: false, children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [_jsx(DialogTitle, { children: "Billing details" }), _jsx(XStack, { render: "button", "aria-label": "Close", p: "$1", onPress: () => onOpenChange(false), children: _jsx(X, { size: 16 }) })] }), _jsxs(YStack, { gap: "$3", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: "These details appear on your invoices and receipts." }), _jsx(Field, { label: "Business or personal name", children: _jsx(Input, { value: name, onChangeText: setName, placeholder: "e.g. Webby AI, Inc. or Joshua Lynch" }) }), _jsx(Field, { label: "Address line 1", children: _jsx(Input, { value: line1, onChangeText: setLine1, placeholder: "Street address or P.O. Box" }) }), _jsx(Field, { label: "Address line 2", hint: "Optional", children: _jsx(Input, { value: line2, onChangeText: setLine2, placeholder: "Suite, unit, building, floor" }) }), _jsxs(XStack, { gap: "$2", children: [_jsx(YStack, { flex: 1, children: _jsx(Field, { label: "City", children: _jsx(Input, { value: city, onChangeText: setCity, placeholder: "City" }) }) }), _jsx(YStack, { width: 100, children: _jsx(Field, { label: "State", children: _jsx(Input, { value: stateVal, onChangeText: setStateVal, placeholder: "State / Prov" }) }) })] }), _jsxs(XStack, { gap: "$2", children: [_jsx(YStack, { flex: 1, children: _jsx(Field, { label: "Postal / ZIP code", children: _jsx(Input, { value: postalCode, onChangeText: setPostalCode, placeholder: "ZIP or Postal Code" }) }) }), _jsx(YStack, { width: 110, children: _jsx(Field, { label: "Country", children: _jsx(Input, { value: country, onChangeText: setCountry, placeholder: "Country (US)" }) }) })] }), note ? (_jsx(SizableText, { size: "$2", color: "$red10", role: "alert", children: note })) : null, _jsxs(XStack, { gap: "$2", justify: "flex-end", pt: "$2", children: [_jsx(Button, { size: "sm", variant: "ghost", disabled: working, onPress: () => onOpenChange(false), children: "Cancel" }), _jsx(Button, { size: "sm", disabled: working, onPress: () => void save(), children: "Save details" })] })] })] }) }));
+}
 /** What the plan costs, and when it renews or ends. */
 function terms(p) {
     const cost = `${money(p.price * p.seats, p.currency)} a ${p.interval}${p.seats > 1 ? ` for ${p.seats} seats` : ''}.`;

package/lib/settings/card.js

@@ -8,12 +8,13 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * it will be charged on.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
-import { X } from '@hanzogui/lucide-icons-2';
-import { Button, Dialog, DialogContent, DialogTitle } from '@hanzo/ui';
+import { ChevronDown, ChevronUp, X } from '@hanzogui/lucide-icons-2';
+import { Button, Dialog, DialogContent, DialogTitle, Input } from '@hanzo/ui';
 import { useEffect, useRef, useState } from 'react';
 import { processor, save } from '../api/billing.js';
 import { useRead } from '../data.js';
 import { useTarget } from '../host.js';
+import { Field as FormField } from './ui.js';
 /** Anything but production loads the sandbox SDK, so a misread setting never arms real charges. */
 export const sdk = (environment) => environment === 'production' ? 'https://web.squarecdn.com/v1/square.js' : 'https://sandbox.web.squarecdn.com/v1/square.js';
 const loads = new Map();
@@ -47,6 +48,13 @@ export function AddCard({ open, onOpenChange, onSaved }) {
     const [mounted, setMounted] = useState(false);
     const [working, setWorking] = useState(false);
     const [note, setNote] = useState('');
+    const [name, setName] = useState('');
+    const [postalCode, setPostalCode] = useState('');
+    const [moreAddress, setMoreAddress] = useState(false);
+    const [line1, setLine1] = useState('');
+    const [city, setCity] = useState('');
+    const [stateVal, setStateVal] = useState('');
+    const [country, setCountry] = useState('US');
     const p = cfg.value;
     useEffect(() => {
         if (!open || !box || !ready(p))
@@ -87,7 +95,17 @@ export function AddCard({ open, onOpenChange, onSaved }) {
             const r = await f.tokenize();
             if (r.status !== 'OK' || !r.token)
                 throw new Error(r.errors?.map((e) => e.message).filter(Boolean).join('; ') || 'The card details are incomplete');
-            const m = await save(t, r.token);
+            const billingAddress = name.trim() || postalCode.trim() || line1.trim() || city.trim() || stateVal.trim()
+                ? {
+                    name: name.trim() || undefined,
+                    postalCode: postalCode.trim() || undefined,
+                    line1: line1.trim() || undefined,
+                    city: city.trim() || undefined,
+                    state: stateVal.trim() || undefined,
+                    country: country.trim() || 'US',
+                }
+                : undefined;
+            const m = await save(t, r.token, billingAddress);
             onSaved(m);
             onOpenChange(false);
         }
@@ -99,7 +117,7 @@ export function AddCard({ open, onOpenChange, onSaved }) {
         }
     };
     const why = cfg.error ? cfg.error.message : !cfg.loading && !ready(p) ? 'This deployment takes no cards yet.' : '';
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 440, showCloseButton: false, children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [_jsx(DialogTitle, { children: "Add a card" }), _jsx(XStack, { render: "button", "aria-label": "Close", p: "$1", onPress: () => onOpenChange(false), children: _jsx(X, { size: 16 }) })] }), _jsxs(YStack, { gap: "$3", children: [why ? (_jsx(SizableText, { size: "$2", color: "$soft", children: why })) : (_jsxs(_Fragment, { children: [_jsxs(YStack, { minH: 96, "aria-label": "Card details", children: [_jsx("div", { ref: setBox, style: { minHeight: 96 } }), !mounted && !note ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "Loading the card form\u2026" })) : null] }), _jsx(SizableText, { size: "$1", color: "$soft", children: p && p.environment !== 'production'
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 460, showCloseButton: false, children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [_jsx(DialogTitle, { children: "Add a card" }), _jsx(XStack, { render: "button", "aria-label": "Close", p: "$1", onPress: () => onOpenChange(false), children: _jsx(X, { size: 16 }) })] }), _jsxs(YStack, { gap: "$3", children: [why ? (_jsx(SizableText, { size: "$2", color: "$soft", children: why })) : (_jsxs(_Fragment, { children: [_jsxs(YStack, { minH: 96, "aria-label": "Card details", children: [_jsx("div", { ref: setBox, style: { minHeight: 96 } }), !mounted && !note ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "Loading the card form\u2026" })) : null] }), _jsxs(XStack, { gap: "$2", children: [_jsx(YStack, { flex: 1, children: _jsx(FormField, { label: "Name on card", hint: "Optional", children: _jsx(Input, { value: name, onChangeText: setName, placeholder: "Name or business" }) }) }), _jsx(YStack, { width: 120, children: _jsx(FormField, { label: "Postal code", hint: "Optional", children: _jsx(Input, { value: postalCode, onChangeText: setPostalCode, placeholder: "ZIP / Postal" }) }) })] }), _jsx(XStack, { children: _jsxs(Button, { size: "sm", variant: "ghost", onPress: () => setMoreAddress(!moreAddress), children: [moreAddress ? _jsx(ChevronUp, { size: 14 }) : _jsx(ChevronDown, { size: 14 }), moreAddress ? 'Hide address' : 'Add billing address'] }) }), moreAddress ? (_jsxs(YStack, { gap: "$2", pt: "$1", children: [_jsx(FormField, { label: "Street address", children: _jsx(Input, { value: line1, onChangeText: setLine1, placeholder: "Address line 1" }) }), _jsxs(XStack, { gap: "$2", children: [_jsx(YStack, { flex: 1, children: _jsx(FormField, { label: "City", children: _jsx(Input, { value: city, onChangeText: setCity, placeholder: "City" }) }) }), _jsx(YStack, { width: 90, children: _jsx(FormField, { label: "State", children: _jsx(Input, { value: stateVal, onChangeText: setStateVal, placeholder: "State" }) }) }), _jsx(YStack, { width: 90, children: _jsx(FormField, { label: "Country", children: _jsx(Input, { value: country, onChangeText: setCountry, placeholder: "Country (US)" }) }) })] })] })) : null, _jsx(SizableText, { size: "$1", color: "$soft", children: p && p.environment !== 'production'
                                         ? 'Sandbox: use a test card. Nothing is charged.'
                                         : 'The card number goes to the payment processor, never to Hanzo. Saving it charges nothing.' })] })), note ? (_jsx(SizableText, { size: "$2", color: "$red10", role: "alert", children: note })) : null, _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => onOpenChange(false), children: "Cancel" }), _jsx(Button, { size: "sm", disabled: !mounted || working, onPress: () => void add(), children: "Save card" })] })] })] }) }));
 }

package/lib/settings/machines.js

@@ -7,11 +7,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * mints its claim key or removes it.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
-import { MoreHorizontal, Plus } from '@hanzogui/lucide-icons-2';
+import { Activity, ChevronDown, ChevronUp, Cloud, Cpu, HardDrive, Laptop, MoreHorizontal, Plus, Server, Terminal, Zap, } from '@hanzogui/lucide-icons-2';
 import { Button, Dialog, DialogContent, DialogTitle, DropdownMenu, Input } from '@hanzo/ui';
 import { CopyButton } from '@hanzo/ui/product';
 import { useEffect, useState } from 'react';
-import { add, change, KINDS, key, machines, remove, state } from '../api/machines.js';
+import { add, change, formatBytes, formatPercent, formatRelative, key, KINDS, machines, remove, state, } from '../api/machines.js';
 import { Confirm, Rename } from '../ask.js';
 import { useRead } from '../data.js';
 import { useHost, useTarget } from '../host.js';
@@ -32,6 +32,44 @@ function Dot({ m }) {
     const on = state(m) === 'online';
     return (_jsx(YStack, { width: 8, height: 8, rounded: 999, shrink: 0, bg: on ? '$green10' : 'transparent', borderWidth: on ? 0 : 1, borderColor: m.status === 'draining' ? '$yellow10' : '$soft', "aria-hidden": true }));
 }
+function KindIcon({ kind, size = 16 }) {
+    switch (kind) {
+        case 'laptop':
+            return _jsx(Laptop, { size: size });
+        case 'gpu':
+            return _jsx(Cpu, { size: size });
+        case 'cloud':
+            return _jsx(Cloud, { size: size });
+        case 'cluster':
+            return _jsx(Server, { size: size });
+        default:
+            return _jsx(Terminal, { size: size });
+    }
+}
+function StatusBadge({ m }) {
+    const s = state(m);
+    if (!s)
+        return null;
+    let color = '$soft';
+    let text = s;
+    if (s === 'online') {
+        color = '$green10';
+        text = 'Online';
+    }
+    else if (s === 'draining') {
+        color = '$yellow10';
+        text = 'Draining';
+    }
+    else if (s === 'not seen yet') {
+        color = '$blue10';
+        text = 'Not seen yet';
+    }
+    else if (s === 'offline') {
+        color = '$soft';
+        text = 'Offline';
+    }
+    return (_jsxs(XStack, { px: "$2", py: "$0.5", rounded: "$10", borderWidth: 1, borderColor: color, items: "center", gap: "$1.5", children: [_jsx(Dot, { m: m }), _jsx(SizableText, { size: "$1", color: color, style: { fontWeight: 500 }, children: text })] }));
+}
 export function Machines() {
     const host = useHost();
     const t = useTarget();
@@ -42,6 +80,8 @@ export function Machines() {
     const [removing, setRemoving] = useState(null);
     const [keying, setKeying] = useState(null);
     const [minted, setMinted] = useState(null);
+    const [expandedId, setExpandedId] = useState(null);
+    const [showAdvancedLink, setShowAdvancedLink] = useState(false);
     const [note, setNote] = useState('');
     // Read again on the agent's beat; "Reading machines…" stays for the first read only.
     const again = list.reload;
@@ -65,15 +105,20 @@ export function Machines() {
             setNote(e.message);
         }
     };
-    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Machines", detail: "Your organization\u2019s own computers. A run sent to one runs there instead of in the Hanzo sandbox." }), _jsxs(Group, { title: "Link a machine", detail: "Run these on it. It registers under its hostname, and stays online while hanzo link runs.", children: [_jsxs(XStack, { items: "flex-start", gap: "$2", px: "$3", py: "$2.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$raised", children: [_jsx(SizableText, { flex: 1, minW: 0, size: "$2", color: "$ink", "aria-label": "Link commands", style: { ...mono, whiteSpace: 'pre-wrap' }, children: LINK }), _jsx(CopyButton, { value: LINK, label: "Copy the commands" })] }), _jsx(XStack, { children: _jsxs(Button, { size: "sm", variant: "ghost", onPress: () => setAdding(true), children: [_jsx(Plus, { size: 14 }), " Register one by hand"] }) })] }), _jsxs(Group, { title: "Linked", children: [list.value === UNREAD ? (_jsx(Soft, { children: list.error ? list.error.message : 'Reading machines…' })) : list.value.length === 0 ? (_jsx(Soft, { children: "No machine is linked yet." })) : (_jsx(Card, { children: list.value.map((m, i) => (_jsx(Row, { first: i === 0, leading: _jsx(Dot, { m: m }), title: m.label, detail: about(m), trailing: _jsx(DropdownMenu, { trigger: _jsx(XStack, { render: "button", "aria-label": `Actions for ${m.label}`, px: "$1.5", py: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(MoreHorizontal, { size: 16 }) }), items: [
-                                    { key: 'rename', label: 'Rename', onSelect: () => setRenaming(m) },
-                                    m.status === 'draining'
-                                        ? { key: 'online', label: 'Take runs again', onSelect: () => void drain(m, 'online') }
-                                        : { key: 'drain', label: 'Drain', description: 'Finish what it has, take nothing new', onSelect: () => void drain(m, 'draining') },
-                                    { key: 'key', label: 'Claim key', onSelect: () => setKeying(m) },
-                                    { type: 'separator' },
-                                    { key: 'remove', label: 'Remove', destructive: true, onSelect: () => setRemoving(m) },
-                                ] }) }, m.id))) })), list.error && list.value !== UNREAD ? _jsx(Soft, { children: list.error.message }) : null] }), _jsx(Note, { children: note }), _jsx(Adding, { open: adding, onOpenChange: setAdding, onAdded: (m) => {
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Machines", detail: "Your organization\u2019s own computers. A run sent to one runs there instead of in the Hanzo sandbox." }), _jsxs(Group, { title: "Link a machine", detail: "Run these on it. It registers under its hostname, and stays online while hanzo link runs.", children: [_jsxs(XStack, { items: "flex-start", gap: "$2", px: "$3", py: "$2.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$raised", children: [_jsx(SizableText, { flex: 1, minW: 0, size: "$2", color: "$ink", "aria-label": "Link commands", style: { ...mono, whiteSpace: 'pre-wrap' }, children: LINK }), _jsx(CopyButton, { value: LINK, label: "Copy the commands" })] }), _jsxs(XStack, { items: "center", justify: "space-between", flexWrap: "wrap", gap: "$2", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsxs(Button, { size: "sm", variant: "ghost", onPress: () => setAdding(true), children: [_jsx(Plus, { size: 14 }), " Register one by hand"] }), _jsxs(Button, { size: "sm", variant: "ghost", onPress: () => setShowAdvancedLink(!showAdvancedLink), children: [showAdvancedLink ? _jsx(ChevronUp, { size: 14 }) : _jsx(ChevronDown, { size: 14 }), showAdvancedLink ? 'Hide options' : 'More connection options'] })] }), _jsx(SizableText, { size: "$1", color: "$soft", children: "Supported: macOS, Linux, Windows, NVIDIA CUDA GPUs, Cloud VMs" })] }), showAdvancedLink ? (_jsxs(YStack, { gap: "$2.5", p: "$3", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$raised", children: [_jsxs(YStack, { gap: "$1", children: [_jsx(SizableText, { size: "$2", color: "$ink", style: { fontWeight: 600 }, children: "1. Background daemon (system service)" }), _jsx(SizableText, { size: "$1", color: "$soft", children: "Run worker continuously in the background without keeping a terminal open:" }), _jsxs(XStack, { items: "center", justify: "space-between", px: "$2.5", py: "$1.5", rounded: "$2", bg: "$raised", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$1", color: "$ink", style: mono, children: "hanzo code --serve" }), _jsx(CopyButton, { value: "hanzo code --serve", label: "Copy daemon command" })] })] }), _jsxs(YStack, { gap: "$1", pt: "$1", children: [_jsx(SizableText, { size: "$2", color: "$ink", style: { fontWeight: 600 }, children: "2. Install CLI from shell" }), _jsxs(XStack, { items: "center", justify: "space-between", px: "$2.5", py: "$1.5", rounded: "$2", bg: "$raised", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$1", color: "$ink", style: mono, children: "curl -fsSL https://hanzo.sh | sh" }), _jsx(CopyButton, { value: "curl -fsSL https://hanzo.sh | sh", label: "Copy install command" })] })] })] })) : null] }), _jsxs(Group, { title: "Linked", children: [list.value === UNREAD ? (_jsx(Soft, { children: list.error ? list.error.message : 'Reading machines…' })) : list.value.length === 0 ? (_jsxs(YStack, { gap: "$3", children: [_jsx(Soft, { children: "No machine is linked yet." }), _jsx(Card, { children: _jsxs(YStack, { p: "$4", gap: "$3", children: [_jsxs(XStack, { items: "center", gap: "$2.5", children: [_jsx(Server, { size: 20 }), _jsxs(YStack, { gap: "$0.5", children: [_jsx(SizableText, { size: "$3", color: "$ink", style: { fontWeight: 600 }, children: "Connect your first computer or GPU server" }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Execute code, runs, and local models directly on your hardware with full privacy and zero cloud fees." })] })] }), _jsxs(YStack, { gap: "$2", pt: "$1", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { size: "$1", color: "$soft", style: { ...mono, width: 20 }, children: "1." }), _jsxs(SizableText, { size: "$2", color: "$ink", children: ["Install Hanzo CLI: ", _jsx("span", { style: mono, children: "curl -fsSL https://hanzo.sh | sh" })] })] }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { size: "$1", color: "$soft", style: { ...mono, width: 20 }, children: "2." }), _jsxs(SizableText, { size: "$2", color: "$ink", children: ["Sign in with your account: ", _jsx("span", { style: mono, children: "hanzo login" })] })] }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { size: "$1", color: "$soft", style: { ...mono, width: 20 }, children: "3." }), _jsxs(SizableText, { size: "$2", color: "$ink", children: ["Link the machine: ", _jsx("span", { style: mono, children: "hanzo link" })] })] })] }), _jsx(XStack, { pt: "$1", children: _jsxs(Button, { size: "sm", variant: "outline", onPress: () => setAdding(true), children: [_jsx(Plus, { size: 14 }), " Register one by hand"] }) })] }) })] })) : (_jsx(Card, { children: list.value.map((m, i) => {
+                            const isExpanded = expandedId === m.id;
+                            const hasTelemetry = Boolean(m.metrics || m.spec);
+                            return (_jsxs(YStack, { borderTopWidth: i > 0 ? 1 : 0, borderColor: "$borderColor", children: [_jsx(Row, { first: i === 0, leading: _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Dot, { m: m }), _jsx(KindIcon, { kind: m.kind, size: 16 })] }), title: m.label, detail: about(m), trailing: _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(StatusBadge, { m: m }), m.serving ? (_jsx(XStack, { px: "$1.5", py: "$0.5", rounded: "$10", borderWidth: 1, borderColor: "$green10", children: _jsx(SizableText, { size: "$1", color: "$green10", children: "Serving" }) })) : null, m.running > 0 ? (_jsxs(XStack, { px: "$1.5", py: "$0.5", rounded: "$10", bg: "$raised", items: "center", gap: "$1", children: [_jsx(Activity, { size: 12, color: "$green10" }), _jsxs(SizableText, { size: "$1", color: "$ink", children: [m.running, " active"] })] })) : null, _jsx(CopyButton, { value: `hanzo link --target ${m.id}`, label: `Copy link command for ${m.label}` }), _jsx(DropdownMenu, { trigger: _jsx(XStack, { render: "button", "aria-label": `Actions for ${m.label}`, px: "$1.5", py: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(MoreHorizontal, { size: 16 }) }), items: [
+                                                        { key: 'details', label: isExpanded ? 'Hide details' : 'Show details', onSelect: () => setExpandedId(isExpanded ? null : m.id) },
+                                                        { key: 'rename', label: 'Rename', onSelect: () => setRenaming(m) },
+                                                        m.status === 'draining'
+                                                            ? { key: 'online', label: 'Take runs again', onSelect: () => void drain(m, 'online') }
+                                                            : { key: 'drain', label: 'Drain', description: 'Finish what it has, take nothing new', onSelect: () => void drain(m, 'draining') },
+                                                        { key: 'key', label: 'Claim key', onSelect: () => setKeying(m) },
+                                                        { type: 'separator' },
+                                                        { key: 'remove', label: 'Remove', destructive: true, onSelect: () => setRemoving(m) },
+                                                    ] })] }) }), isExpanded || hasTelemetry ? (_jsxs(YStack, { px: "$4", pb: "$3", pt: "$1", gap: "$2.5", children: [m.spec ? (_jsxs(XStack, { flexWrap: "wrap", gap: "$2", items: "center", children: [m.spec.os ? (_jsxs(XStack, { px: "$2", py: "$1", rounded: "$2", bg: "$raised", borderWidth: 1, borderColor: "$borderColor", items: "center", gap: "$1.5", children: [_jsx(Terminal, { size: 12 }), _jsxs(SizableText, { size: "$1", color: "$ink", children: [m.spec.os, m.spec.arch ? ` · ${m.spec.arch}` : ''] })] })) : null, m.spec.cpus ? (_jsxs(XStack, { px: "$2", py: "$1", rounded: "$2", bg: "$raised", borderWidth: 1, borderColor: "$borderColor", items: "center", gap: "$1.5", children: [_jsx(Cpu, { size: 12 }), _jsxs(SizableText, { size: "$1", color: "$ink", children: [m.spec.cpus, " cores"] })] })) : null, m.spec.memory ? (_jsxs(XStack, { px: "$2", py: "$1", rounded: "$2", bg: "$raised", borderWidth: 1, borderColor: "$borderColor", items: "center", gap: "$1.5", children: [_jsx(HardDrive, { size: 12 }), _jsxs(SizableText, { size: "$1", color: "$ink", children: [formatBytes(m.spec.memory), " RAM"] })] })) : null, m.spec.gpus && m.spec.gpus.length > 0 ? (_jsxs(XStack, { px: "$2", py: "$1", rounded: "$2", bg: "$raised", borderWidth: 1, borderColor: "$borderColor", items: "center", gap: "$1.5", children: [_jsx(Zap, { size: 12, color: "$yellow10" }), _jsx(SizableText, { size: "$1", color: "$ink", children: m.spec.gpus.map((g) => `${g.model || g.vendor || 'GPU'}${g.memory ? ` (${formatBytes(g.memory)})` : ''}`).join(', ') })] })) : null] })) : null, m.metrics && (m.metrics.cpuUtil || m.metrics.load1 || m.metrics.memUsed || m.metrics.gpuUtil) ? (_jsxs(XStack, { flexWrap: "wrap", gap: "$3", p: "$2.5", rounded: "$2", bg: "$raised", borderWidth: 1, borderColor: "$borderColor", items: "center", children: [m.metrics.cpuUtil ? (_jsxs(YStack, { gap: "$0.5", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "CPU Utilization" }), _jsxs(SizableText, { size: "$2", color: "$ink", style: { fontWeight: 600 }, children: [formatPercent(m.metrics.cpuUtil), " ", m.metrics.cpuTemp ? `· ${m.metrics.cpuTemp}°C` : ''] })] })) : m.metrics.load1 ? (_jsxs(YStack, { gap: "$0.5", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "Load (1m, 5m, 15m)" }), _jsxs(SizableText, { size: "$2", color: "$ink", style: { fontWeight: 600 }, children: [m.metrics.load1, ", ", m.metrics.load5 ?? 0, ", ", m.metrics.load15 ?? 0] })] })) : null, m.metrics.memUsed ? (_jsxs(YStack, { gap: "$0.5", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "Memory" }), _jsxs(SizableText, { size: "$2", color: "$ink", style: { fontWeight: 600 }, children: [formatBytes(m.metrics.memUsed), " ", m.spec?.memory ? `/ ${formatBytes(m.spec.memory)}` : 'used'] })] })) : null, m.metrics.gpuUtil !== undefined && m.metrics.gpuUtil > 0 ? (_jsxs(YStack, { gap: "$0.5", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "GPU" }), _jsxs(SizableText, { size: "$2", color: "$ink", style: { fontWeight: 600 }, children: [formatPercent(m.metrics.gpuUtil), " ", m.metrics.gpuTemp ? `· ${m.metrics.gpuTemp}°C` : '', " ", m.metrics.gpuPower ? `· ${m.metrics.gpuPower}W` : ''] })] })) : null, m.metrics.model ? (_jsxs(YStack, { gap: "$0.5", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "Serving Model" }), _jsxs(SizableText, { size: "$2", color: "$ink", style: { fontWeight: 600 }, children: [m.metrics.model, " ", m.metrics.decode ? `(${m.metrics.decode} tok/s)` : ''] })] })) : null] })) : null, _jsxs(XStack, { justify: "space-between", items: "center", flexWrap: "wrap", gap: "$2", pt: "$0.5", children: [_jsxs(XStack, { items: "center", gap: "$3", children: [_jsxs(SizableText, { size: "$1", color: "$soft", style: mono, children: ["ID: ", m.id] }), m.seen ? (_jsxs(SizableText, { size: "$1", color: "$soft", children: ["Last heartbeat: ", formatRelative(m.seen)] })) : null] }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "Run directly on this machine:" }), _jsxs(XStack, { items: "center", gap: "$1", px: "$2", py: "$0.5", rounded: "$2", bg: "$raised", borderWidth: 1, borderColor: "$borderColor", children: [_jsxs(SizableText, { size: "$1", color: "$ink", style: mono, children: ["hanzo run --target ", m.id] }), _jsx(CopyButton, { value: `hanzo run --target ${m.id}`, label: `Copy run command for ${m.label}` })] })] })] })] })) : null] }, m.id));
+                        }) })), list.error && list.value !== UNREAD ? _jsx(Soft, { children: list.error.message }) : null] }), _jsx(Note, { children: note }), _jsx(Adding, { open: adding, onOpenChange: setAdding, onAdded: (m) => {
                     setNote(`${m.label} is registered`);
                     list.reload();
                 } }), _jsx(Rename, { open: renaming !== null, onOpenChange: (o) => !o && setRenaming(null), title: "Rename machine", name: renaming?.label ?? '', 
@@ -89,7 +134,7 @@ export function Machines() {
                 } }), _jsx(Confirm, { open: keying !== null, onOpenChange: (o) => !o && setKeying(null), title: `Mint a claim key for ${keying?.label ?? 'this machine'}?`, says: "A key it had before stops working, so a runner using it stops getting runs until it has the new one. The new key is shown once.", act: "Mint key", run: async () => {
                     const k = await key(t, keying.id);
                     setMinted({ machine: keying, key: k });
-                } }), _jsx(Dialog, { open: minted !== null, onOpenChange: (o) => !o && setMinted(null), children: _jsxs(DialogContent, { maxW: 480, showCloseButton: false, children: [_jsxs(DialogTitle, { children: ["Claim key for ", minted?.machine.label ?? ''] }), minted ? (_jsx(Once, { value: minted.key, label: "Claim key", children: _jsxs(SizableText, { size: "$1", color: "$soft", children: ["A runner on this machine sends it as X-Target-Key when it claims the runs sent here, at POST /v1/agent/targets/", minted.machine.id, "/claim."] }) })) : null, _jsx(XStack, { justify: "flex-end", children: _jsx(Button, { size: "sm", onPress: () => setMinted(null), children: "Done" }) })] }) })] }));
+                } }), _jsx(Dialog, { open: minted !== null, onOpenChange: (o) => !o && setMinted(null), children: _jsxs(DialogContent, { maxW: 480, showCloseButton: false, children: [_jsxs(DialogTitle, { children: ["Claim key for ", minted?.machine.label ?? ''] }), minted ? (_jsxs(YStack, { gap: "$3", children: [_jsx(Once, { value: minted.key, label: "Claim key", children: _jsxs(SizableText, { size: "$1", color: "$soft", children: ["A runner on this machine sends it as X-Target-Key when it claims the runs sent here, at POST /v1/agent/targets/", minted.machine.id, "/claim."] }) }), _jsxs(YStack, { gap: "$1", p: "$2.5", rounded: "$2", bg: "$raised", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$1", color: "$ink", style: { fontWeight: 600 }, children: "Start background worker with this key:" }), _jsxs(XStack, { items: "center", justify: "space-between", px: "$2", py: "$1", rounded: "$2", bg: "$raised", children: [_jsxs(SizableText, { size: "$1", color: "$ink", style: mono, children: ["export HANZO_TARGET_KEY=\"", minted.key, "\""] }), _jsx(CopyButton, { value: `export HANZO_TARGET_KEY="${minted.key}"\nhanzo code --serve --target ${minted.machine.id}`, label: "Copy key command" })] })] })] })) : null, _jsx(XStack, { justify: "flex-end", pt: "$2", children: _jsx(Button, { size: "sm", onPress: () => setMinted(null), children: "Done" }) })] }) })] }));
 }
 /** Registering a machine by hand: its name, what it is, and the hostname its runs report. */
 function Adding({ open, onOpenChange, onAdded }) {
@@ -97,6 +142,7 @@ function Adding({ open, onOpenChange, onAdded }) {
     const [label, setLabel] = useState('');
     const [kind, setKind] = useState('machine');
     const [hostname, setHostname] = useState('');
+    const [capacity, setCapacity] = useState('');
     const [working, setWorking] = useState(false);
     const [note, setNote] = useState('');
     const close = () => {
@@ -105,6 +151,7 @@ function Adding({ open, onOpenChange, onAdded }) {
         setLabel('');
         setKind('machine');
         setHostname('');
+        setCapacity('');
         setNote('');
         onOpenChange(false);
     };
@@ -112,7 +159,10 @@ function Adding({ open, onOpenChange, onAdded }) {
         setWorking(true);
         setNote('');
         try {
-            const m = await add(t, { label, kind, host: hostname });
+            const targetLabel = label.trim() || hostname.trim();
+            if (!targetLabel)
+                throw new Error('A machine needs a name or a hostname');
+            const m = await add(t, { label: targetLabel, kind, host: hostname, capacity: capacity.trim() || undefined });
             setWorking(false);
             onAdded(m);
             close();
@@ -122,5 +172,5 @@ function Adding({ open, onOpenChange, onAdded }) {
             setWorking(false);
         }
     };
-    return (_jsx(Dialog, { open: open, onOpenChange: (o) => !o && close(), children: _jsxs(DialogContent, { maxW: 440, showCloseButton: false, children: [_jsx(DialogTitle, { children: "Register a machine" }), _jsxs(YStack, { gap: "$3", children: [_jsx(Field, { label: "Name", hint: "Left empty, it takes the hostname.", children: _jsx(Input, { value: label, onChangeText: setLabel, "aria-label": "Machine name", autoFocus: true }) }), _jsx(Field, { label: "Kind", children: _jsx(XStack, { flexWrap: "wrap", gap: "$1.5", role: "radiogroup", "aria-label": "Kind", children: KINDS.map((k) => (_jsx(XStack, { render: "button", role: "radio", "aria-checked": k === kind, "aria-label": k, onPress: () => setKind(k), px: "$2.5", py: "$1", rounded: "$10", borderWidth: 1, borderColor: k === kind ? '$ink' : '$borderColor', children: _jsx(SizableText, { size: "$1", color: k === kind ? '$ink' : '$soft', children: k }) }, k))) }) }), _jsx(Field, { label: "Hostname", hint: "Optional. What its runs report. hanzo link, signed in as you on a machine with this hostname, takes this row over.", children: _jsx(Input, { value: hostname, onChangeText: setHostname, "aria-label": "Hostname", autoCapitalize: "none" }) }), note ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note })) : null, _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", disabled: working, onPress: close, children: "Cancel" }), _jsx(Button, { size: "sm", disabled: working, onPress: () => void save(), children: "Register" })] })] })] }) }));
+    return (_jsx(Dialog, { open: open, onOpenChange: (o) => !o && close(), children: _jsxs(DialogContent, { maxW: 460, showCloseButton: false, children: [_jsx(DialogTitle, { children: "Register a machine" }), _jsxs(YStack, { gap: "$3", children: [_jsx(Field, { label: "Name", hint: "Left empty, it takes the hostname.", children: _jsx(Input, { value: label, onChangeText: setLabel, "aria-label": "Machine name", autoFocus: true }) }), _jsx(Field, { label: "Kind", children: _jsx(XStack, { flexWrap: "wrap", gap: "$1.5", role: "radiogroup", "aria-label": "Kind", children: KINDS.map((k) => (_jsxs(XStack, { render: "button", role: "radio", "aria-checked": k === kind, "aria-label": k, onPress: () => setKind(k), px: "$2.5", py: "$1", rounded: "$10", borderWidth: 1, borderColor: k === kind ? '$ink' : '$borderColor', items: "center", gap: "$1.5", children: [_jsx(KindIcon, { kind: k, size: 14 }), _jsx(SizableText, { size: "$1", color: k === kind ? '$ink' : '$soft', children: k })] }, k))) }) }), _jsx(Field, { label: "Hostname", hint: "Optional. What its runs report. hanzo link, signed in as you on a machine with this hostname, takes this row over.", children: _jsx(Input, { value: hostname, onChangeText: setHostname, "aria-label": "Hostname", autoCapitalize: "none" }) }), _jsx(Field, { label: "Capacity / Hardware", hint: "Optional human summary (e.g. 16 vCPU / 64G / 1\u00D7 RTX 4090).", children: _jsx(Input, { value: capacity, onChangeText: setCapacity, "aria-label": "Capacity", placeholder: "e.g. 16 vCPU / 64G / 1\u00D7 RTX 4090" }) }), note ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note })) : null, _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", disabled: working, onPress: close, children: "Cancel" }), _jsx(Button, { size: "sm", disabled: working, onPress: () => void save(), children: "Register" })] })] })] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/build",
-  "version": "0.2.47",
+  "version": "0.2.49",
   "type": "module",
   "license": "Apache-2.0 OR MIT",
   "description": "Hanzo Build — say what you want, watch it built, deployed and running. The builder as a component, mounted by the Hanzo app at hanzo.ai.",