@hanzo/build 0.2.10 → 0.2.11

package/lib/settings/account.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Account: who is signed in and how Hanzo should know them — the photo and
+ * full name on their Hanzo identity, what to call them, what they work on and
+ * the instructions every coding run reads — then the organizations they belong
+ * to, the one this page acts in, a way to act in another, and logging out.
+ *
+ * The email is how the person signs in, so it is shown and not edited here.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { Check, Copy, LogOut } from '@hanzogui/lucide-icons-2';
+import { Button, Input, Textarea } from '@hanzo/ui';
+import { ChipSelect } from '@hanzo/ui/product';
+import { useEffect, useRef, useState } from 'react';
+import { PHOTO, photo, rename } from '../api/profile.js';
+import { useHost, useTarget } from '../host.js';
+import { usePrefs } from '../prefs.js';
+import { Card, Field, Group, Heading, Note, Row, Soft } from './ui.js';
+export const WORK = [
+    { id: 'engineering', label: 'Software engineering' },
+    { id: 'data', label: 'Data science' },
+    { id: 'design', label: 'Design' },
+    { id: 'product', label: 'Product management' },
+    { id: 'research', label: 'Research' },
+    { id: 'writing', label: 'Writing' },
+    { id: 'education', label: 'Education' },
+    { id: 'operations', label: 'Operations' },
+    { id: 'marketing', label: 'Marketing and sales' },
+    { id: 'other', label: 'Something else' },
+];
+/** Long enough for real guidance, short enough to sit in the settings document beside everything else. */
+const INSTRUCTIONS = 3000;
+export function Account() {
+    const host = useHost();
+    const t = useTarget();
+    const { prefs, save } = usePrefs();
+    const who = host.person;
+    const [name, setName] = useState(who?.name ?? '');
+    const [shownName, setShownName] = useState(who?.name ?? '');
+    const [face, setFace] = useState(who?.avatar ?? '');
+    const [callName, setCallName] = useState('');
+    const [work, setWork] = useState('');
+    const [instructions, setInstructions] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [note, setNote] = useState('');
+    const picker = useRef(null);
+    const [copied, setCopied] = useState(false);
+    // The identity can arrive after the page does.
+    useEffect(() => {
+        setName(who?.name ?? '');
+        setShownName(who?.name ?? '');
+        setFace(who?.avatar ?? '');
+    }, [who?.name, who?.avatar]);
+    useEffect(() => {
+        setCallName(prefs.callName ?? '');
+        setWork(prefs.work ?? '');
+        setInstructions(prefs.instructions ?? '');
+    }, [prefs.callName, prefs.work, prefs.instructions]);
+    if (!who) {
+        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Account" }), _jsx(Soft, { children: "Sign in to see your account." }), host.signIn ? (_jsx(XStack, { justify: "center", children: _jsx(Button, { size: "sm", onPress: () => host.signIn?.(), children: "Sign in" }) })) : null] }));
+    }
+    const patch = {};
+    if (callName.trim() !== (prefs.callName ?? ''))
+        patch.callName = callName.trim() || null;
+    if (work !== (prefs.work ?? ''))
+        patch.work = work || null;
+    if (instructions.trim() !== (prefs.instructions ?? '').trim())
+        patch.instructions = instructions.trim() || null;
+    const renamed = name.trim() !== shownName.trim();
+    const changed = renamed || Object.keys(patch).length > 0;
+    const submit = async () => {
+        setBusy(true);
+        setNote('');
+        try {
+            if (renamed)
+                setShownName((await rename(t, name)).displayName || name.trim());
+            if (Object.keys(patch).length)
+                await save(patch);
+            setNote('Saved');
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'That was not saved');
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const upload = async (file) => {
+        setBusy(true);
+        setNote('');
+        try {
+            setFace(await photo(t, file));
+            setNote('Your photo is saved');
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'The photo was not saved');
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const orgs = host.memberships ?? (host.org ? [host.org] : []);
+    const chosenWork = WORK.find((w) => w.id === work) ?? (work ? { id: work, label: work } : null);
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Account", detail: "Your Hanzo identity, and what Hanzo should know about you.", action: host.signOut ? (_jsxs(Button, { size: "sm", variant: "outline", onPress: () => host.signOut?.(), children: [_jsx(LogOut, { size: 14 }), " Log out"] })) : undefined }), _jsx(Group, { title: "Profile", children: _jsxs(YStack, { gap: "$4", children: [_jsxs(XStack, { items: "center", gap: "$3", children: [face ? (_jsx("img", { src: face, alt: "", width: 48, height: 48, style: { borderRadius: 999, objectFit: 'cover' } })) : (_jsx(YStack, { width: 48, height: 48, rounded: 999, bg: "$raised", items: "center", justify: "center", children: _jsx(SizableText, { size: "$5", color: "$ink", children: (shownName || who.email || '?').charAt(0).toUpperCase() }) })), _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$4", color: "$ink", numberOfLines: 1, children: shownName || who.email }), _jsx(SizableText, { size: "$2", color: "$soft", numberOfLines: 1, children: who.email })] }), _jsx(Button, { size: "sm", variant: "outline", disabled: busy, onPress: () => picker.current?.click(), children: "Change photo" }), _jsx("input", { ref: picker, type: "file", accept: PHOTO, hidden: true, style: { display: 'none' }, tabIndex: -1, "aria-label": "Photo", onChange: (e) => {
+                                        const input = e.currentTarget;
+                                        const file = input.files?.[0];
+                                        input.value = '';
+                                        if (file)
+                                            void upload(file);
+                                    } })] }), _jsx(Field, { label: "Full name", children: _jsx(Input, { value: name, onChangeText: setName, "aria-label": "Full name", placeholder: "Your name" }) }), _jsx(Field, { label: "Email", hint: "You sign in with this address, so it is not changed here.", children: _jsx(SizableText, { size: "$2", color: "$soft", numberOfLines: 1, children: who.email || 'No email on this account' }) }), _jsx(Field, { label: "What should Hanzo call you?", children: _jsx(Input, { value: callName, onChangeText: setCallName, "aria-label": "What should Hanzo call you?", placeholder: shownName.split(' ')[0] || 'A first name' }) }), _jsx(Field, { label: "What best describes your work?", children: _jsx(XStack, { children: _jsx(ChipSelect, { name: "Work", label: chosenWork?.label ?? 'Choose one', chosen: chosenWork, items: WORK, onChange: (w) => setWork(w.id), placement: "bottom-start", width: 260 }) }) }), _jsx(Field, { label: "Instructions for Hanzo", hint: `Every coding run reads these before it starts. ${instructions.length}/${INSTRUCTIONS}`, children: _jsx(Textarea, { value: instructions, onChangeText: (v) => setInstructions(v.slice(0, INSTRUCTIONS)), "aria-label": "Instructions for Hanzo", placeholder: "How you like to work: the languages and tools you prefer, the style to follow, what to avoid.", rows: 5 }) }), _jsxs(XStack, { items: "center", gap: "$3", children: [_jsx(Button, { size: "sm", disabled: busy || !changed, onPress: () => void submit(), children: "Save" }), _jsx(Note, { children: note })] })] }) }), host.org ? (_jsx(Group, { title: "Organization", detail: "The organization this page acts in. Runs, codebases and settings belong to it.", children: _jsx(Card, { children: _jsx(Row, { first: true, mono: true, title: host.org, detail: `Organization ID${host.admin ? ' · you are an admin' : ''}`, trailing: _jsx(Button, { size: "icon-sm", variant: "ghost", "aria-label": copied ? 'Organization ID copied' : 'Copy organization ID', onPress: () => void navigator.clipboard?.writeText(host.org ?? '').then(() => setCopied(true)), children: copied ? _jsx(Check, { size: 14 }) : _jsx(Copy, { size: 14 }) }) }) }) })) : null, _jsx(Group, { title: "Organizations", detail: "Every organization you belong to. Switch to act in another.", children: orgs.length ? (_jsx(Card, { children: orgs.map((o, i) => (_jsx(Row, { first: i === 0, title: o, detail: o === host.org ? `Acting in ${o}${host.admin ? ' as an admin' : ''}` : undefined, trailing: o === host.org ? (_jsx(Check, { size: 16 })) : host.chooseOrg ? (_jsx(Button, { size: "sm", variant: "ghost", onPress: () => host.chooseOrg?.(o), children: "Switch" })) : null }, o))) })) : (_jsx(Soft, { children: "You belong to no organization yet." })) })] }));
+}

package/lib/settings/billing.d.ts

@@ -0,0 +1 @@
+export declare function Billing(): import("react").JSX.Element;

package/lib/settings/billing.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Billing: the plan this organization is on and the way to change it, the cards
+ * it pays with, its invoices, and ending the plan. Changing plan is the Plans
+ * screen; this page says what is true now.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { CreditCard, Download, Plus, X } from '@hanzogui/lucide-icons-2';
+import { Button, Dialog, DialogContent, DialogTitle } from '@hanzo/ui';
+import { useState } from 'react';
+import { cancel, current, detach, invoices, label, methods, money, pdf, reactivate, subscriptions, } 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';
+export function Billing() {
+    const host = useHost();
+    const t = useTarget();
+    const signed = Boolean(host.person);
+    const subs = useRead(signed ? () => subscriptions(t) : null, [], [t, signed]);
+    const cards = useRead(signed ? () => methods(t) : null, [], [t, signed]);
+    const bills = useRead(signed ? () => invoices(t) : null, [], [t, signed]);
+    const [adding, setAdding] = useState(false);
+    const [ending, setEnding] = useState(false);
+    const [open, setOpen] = useState(null);
+    const [working, setWorking] = useState(false);
+    const [note, setNote] = useState('');
+    if (!signed) {
+        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Billing" }), _jsx(Soft, { children: "Sign in to see this organization\u2019s billing." })] }));
+    }
+    const plan = current(subs.value);
+    const act = async (what, done, after) => {
+        setWorking(true);
+        setNote('');
+        try {
+            await what();
+            after();
+            setNote(done);
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'That did not work');
+        }
+        finally {
+            setWorking(false);
+        }
+    };
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Billing", detail: `The plan ${host.org ?? 'this organization'} is on, the cards it pays with, and its invoices.` }), _jsxs(XStack, { items: "center", gap: "$3", px: "$4", py: "$4", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", flexWrap: "wrap", children: [_jsxs(YStack, { flex: 1, minW: 200, gap: "$1", children: [_jsx(SizableText, { size: "$5", color: "$ink", children: subs.loading && !subs.value.length ? 'Reading your plan…' : plan ? `${plan.name} plan` : 'Free plan' }), _jsx(SizableText, { size: "$2", color: "$soft", children: subs.error
+                                    ? subs.error.message
+                                    : plan
+                                        ? terms(plan)
+                                        : 'No paid plan. Usage is paid from the balance.' })] }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => host.go(path({ kind: 'screen', screen: 'plans' })), children: "Adjust plan" })] }), _jsx(Group, { title: "Payment", detail: "The card a plan renews on and a top-up charges.", action: host.admin ? (_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" })) : cards.value.length === 0 ? (_jsx(Card, { children: _jsx(Soft, { children: "No card on file." }) })) : (_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(XStack, { render: "button", "aria-label": `Remove ${label(m)}`, p: "$1", onPress: () => void act(() => detach(t, m.id), `${label(m)} is removed`, cards.reload), children: _jsx(X, { size: 14 }) })) : undefined }, m.id))) })) }), _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();
+                    setNote(`${label(m)} is saved`);
+                } }), _jsx(Ending, { plan: plan, open: ending, working: working, onOpenChange: setEnding, onConfirm: () => {
+                    if (!plan)
+                        return;
+                    void act(() => cancel(t, plan.id), `Your plan ends on ${day(plan.ends)}`, () => {
+                        setEnding(false);
+                        subs.reload();
+                    });
+                } }), _jsx(Bill, { invoice: open, onClose: () => setOpen(null) })] }));
+}
+/** 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` : ''}.`;
+    return p.ends ? `${cost} ${p.ending ? 'Ends' : 'Renews'} on ${day(p.ends)}.` : cost;
+}
+const word = (s) => (s ? s.charAt(0).toUpperCase() + s.slice(1).replace(/_/g, ' ') : '');
+function Ending({ plan, open, working, onOpenChange, onConfirm, }) {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 420, showCloseButton: false, children: [_jsx(DialogTitle, { children: "Cancel your plan?" }), _jsxs(YStack, { gap: "$3", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: plan
+                                ? `${plan.name} stays on until ${day(plan.ends) || 'the end of this period'}, and nothing is charged after that. You can keep it any time before then.`
+                                : '' }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => onOpenChange(false), children: "Keep plan" }), _jsx(Button, { size: "sm", variant: "destructive", disabled: working, onPress: onConfirm, children: "Cancel plan" })] })] })] }) }));
+}
+/** One invoice, read in the page, with its PDF to keep. */
+function Bill({ invoice, onClose }) {
+    const t = useTarget();
+    const [note, setNote] = useState('');
+    const [working, setWorking] = useState(false);
+    const b = invoice;
+    const keep = async () => {
+        if (!b)
+            return;
+        setWorking(true);
+        setNote('');
+        try {
+            const blob = await pdf(t, b.id);
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `${b.number || b.id}.pdf`;
+            a.click();
+            window.setTimeout(() => URL.revokeObjectURL(url), 1000);
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'The PDF did not download');
+        }
+        finally {
+            setWorking(false);
+        }
+    };
+    const line = (what, cents, strong = false) => (_jsxs(XStack, { justify: "space-between", gap: "$3", children: [_jsx(SizableText, { size: "$2", color: strong ? '$ink' : '$soft', children: what }), _jsx(SizableText, { size: "$2", color: strong ? '$ink' : '$soft', children: b ? money(cents, b.currency) : '' })] }, what));
+    return (_jsx(Dialog, { open: Boolean(b), onOpenChange: (o) => (o ? undefined : onClose()), children: _jsxs(DialogContent, { maxW: 480, showCloseButton: false, children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [_jsx(DialogTitle, { children: b?.number ? `Invoice ${b.number}` : 'Invoice' }), _jsx(XStack, { render: "button", "aria-label": "Close", p: "$1", onPress: onClose, children: _jsx(X, { size: 16 }) })] }), b ? (_jsxs(YStack, { gap: "$3", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: [day(b.date), word(b.status), b.start && b.end ? `for ${day(b.start)} – ${day(b.end)}` : ''].filter(Boolean).join(' · ') }), _jsx(YStack, { gap: "$1.5", borderTopWidth: 1, borderColor: "$borderColor", pt: "$3", children: b.lines.length ? b.lines.map((l, i) => line(l.description || `Line ${i + 1}`, l.amount)) : line('Subtotal', b.subtotal) }), _jsxs(YStack, { gap: "$1.5", borderTopWidth: 1, borderColor: "$borderColor", pt: "$3", children: [b.discount ? line('Discount', -b.discount) : null, b.tax ? line('Tax', b.tax) : null, line('Total', b.total, true), b.credit ? line('Credit applied', -b.credit) : null, line('Paid', b.paid), b.due ? line('Due', b.due, true) : null] }), _jsx(Note, { children: note }), _jsx(XStack, { justify: "flex-end", children: _jsxs(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void keep(), children: [_jsx(Download, { size: 14 }), " Download PDF"] }) })] })) : null] }) }));
+}

package/lib/settings/capabilities.d.ts

@@ -0,0 +1 @@
+export declare function Capabilities(): import("react").JSX.Element;

package/lib/settings/capabilities.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Capabilities: what the agent may use, by where it comes from — connector
+ * actions, functions, services, agents, skills and the organization's own MCP
+ * servers. A tool that is off is still listed to the agent's discovery but is
+ * refused when called. Switching a kind on turns on every tool of that kind;
+ * off turns them all off. It is the organization's setting, not only yours.
+ */
+import { SizableText, YStack } from '@hanzo/gui';
+import { Switch } from '@hanzo/ui';
+import { useState } from 'react';
+import { activate, SOURCES, tools } from '../api/capabilities.js';
+import { useRead } from '../data.js';
+import { useHost, useTarget } from '../host.js';
+import { Card, Group, Heading, Note, Row, Soft } from './ui.js';
+const KINDS = {
+    connector: { label: 'Connector actions', about: 'Actions in the apps your organization connected' },
+    function: { label: 'Functions', about: 'Functions your organization wrote' },
+    'zap-service': { label: 'Services', about: 'Routes of the services your organization runs' },
+    agent: { label: 'Agents', about: 'Your organization’s agents, called as tools' },
+    skill: { label: 'Skills', about: 'Skills attached to agents' },
+    mcp: { label: 'MCP servers', about: 'Tools on the MCP servers your organization added' },
+};
+export function Capabilities() {
+    const host = useHost();
+    const t = useTarget();
+    const signed = Boolean(host.person);
+    const list = useRead(signed ? () => tools(t) : null, [], [t, signed]);
+    const [busy, setBusy] = useState('');
+    const [note, setNote] = useState('');
+    if (!signed) {
+        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Capabilities" }), _jsx(Soft, { children: "Sign in to see what the agent may use." })] }));
+    }
+    const kinds = SOURCES.map((s) => ({ source: s, all: list.value.filter((x) => x.source === s) })).filter((k) => k.all.length);
+    const flip = async (source, all, on) => {
+        setBusy(source);
+        setNote('');
+        try {
+            await activate(t, all.map((x) => x.name), on);
+            list.reload();
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'That was not saved');
+        }
+        finally {
+            setBusy('');
+        }
+    };
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Capabilities", detail: `What the agent may use in ${host.org ?? 'this organization'}. A tool that is off is refused when the agent calls it.` }), _jsx(Group, { title: "Tools", detail: host.admin
+                    ? 'Switching a kind on or off applies to every tool of that kind, for everyone in the organization.'
+                    : 'An org admin switches these, for everyone in the organization.', children: list.error ? (_jsx(Soft, { children: list.error.message })) : list.loading && !list.value.length ? (_jsx(Soft, { children: "Reading tools\u2026" })) : !kinds.length ? (_jsx(Soft, { children: "No tools are available to this organization yet." })) : (_jsx(Card, { children: kinds.map(({ source, all }, i) => {
+                        const on = all.filter((x) => x.activated).length;
+                        return (_jsx(Row, { first: i === 0, title: KINDS[source].label, detail: `${KINDS[source].about}. ${on === all.length ? `All ${all.length} on` : on ? `${on} of ${all.length} on` : `${all.length} available, all off`}.`, trailing: host.admin ? (_jsx(Switch, { "aria-label": KINDS[source].label, checked: on === all.length, disabled: busy !== '', onCheckedChange: (v) => void flip(source, all, v) })) : (_jsx(SizableText, { size: "$1", color: "$soft", children: on === all.length ? 'On' : on ? 'Partly on' : 'Off' })) }, source));
+                    }) })) }), _jsx(Note, { children: note })] }));
+}

package/lib/settings/card.d.ts

@@ -0,0 +1,31 @@
+import { type Method } from '../api/billing.ts';
+/** The part of Square's Web Payments SDK this uses. */
+interface Field {
+    attach(el: HTMLElement): Promise<void>;
+    tokenize(): Promise<{
+        status: string;
+        token?: string;
+        errors?: {
+            message?: string;
+        }[];
+    }>;
+    destroy(): Promise<void>;
+}
+interface Sdk {
+    payments(application: string, location: string): {
+        card(options?: object): Promise<Field>;
+    };
+}
+declare global {
+    interface Window {
+        Square?: Sdk;
+    }
+}
+/** Anything but production loads the sandbox SDK, so a misread setting never arms real charges. */
+export declare const sdk: (environment: string) => string;
+export declare function AddCard({ open, onOpenChange, onSaved }: {
+    open: boolean;
+    onOpenChange: (o: boolean) => void;
+    onSaved: (m: Method) => void;
+}): import("react").JSX.Element;
+export {};

package/lib/settings/card.js

@@ -0,0 +1,105 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Adding a card. The card number is typed into the payment processor's own
+ * field — its iframe, served from its own host — and never reaches this page or
+ * the platform: the field hands back a single-use token, and the platform vaults
+ * the card from that. Which processor, and its sandbox or live account, is the
+ * platform's answer at /v1/billing/settings, so the card is saved to the account
+ * 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 { useEffect, useRef, useState } from 'react';
+import { processor, save } from '../api/billing.js';
+import { useRead } from '../data.js';
+import { useTarget } from '../host.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();
+function load(environment) {
+    if (window.Square)
+        return Promise.resolve(window.Square);
+    const src = sdk(environment);
+    const was = loads.get(src);
+    if (was)
+        return was;
+    const p = new Promise((resolve, reject) => {
+        const s = document.createElement('script');
+        s.src = src;
+        s.async = true;
+        s.onload = () => (window.Square ? resolve(window.Square) : reject(new Error('The card form did not load')));
+        s.onerror = () => {
+            loads.delete(src);
+            reject(new Error('The card form did not load'));
+        };
+        document.head.appendChild(s);
+    });
+    loads.set(src, p);
+    return p;
+}
+const ready = (p) => Boolean(p && p.provider === 'square' && p.application && p.location);
+export function AddCard({ open, onOpenChange, onSaved }) {
+    const t = useTarget();
+    const cfg = useRead(open ? () => processor(t) : null, null, [t, open]);
+    const [box, setBox] = useState(null);
+    const field = useRef(null);
+    const [mounted, setMounted] = useState(false);
+    const [working, setWorking] = useState(false);
+    const [note, setNote] = useState('');
+    const p = cfg.value;
+    useEffect(() => {
+        if (!open || !box || !ready(p))
+            return;
+        let gone = false;
+        setMounted(false);
+        setNote('');
+        load(p.environment)
+            .then((square) => square.payments(p.application, p.location).card())
+            .then(async (f) => {
+            if (gone) {
+                void f.destroy().catch(() => { });
+                return;
+            }
+            await f.attach(box);
+            field.current = f;
+            setMounted(true);
+        })
+            .catch((e) => {
+            if (!gone)
+                setNote(e instanceof Error ? e.message : 'The card form did not load');
+        });
+        return () => {
+            gone = true;
+            const f = field.current;
+            field.current = null;
+            if (f)
+                void f.destroy().catch(() => { });
+        };
+    }, [open, box, p]);
+    const add = async () => {
+        const f = field.current;
+        if (!f)
+            return;
+        setWorking(true);
+        setNote('');
+        try {
+            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);
+            onSaved(m);
+            onOpenChange(false);
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'The card was not saved');
+        }
+        finally {
+            setWorking(false);
+        }
+    };
+    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'
+                                        ? 'Sandbox: use a test card. Nothing is charged.'
+                                        : 'The card number goes to the payment processor, never to Hanzo.' })] })), 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", onPress: () => onOpenChange(false), children: "Cancel" }), _jsx(Button, { size: "sm", disabled: !mounted || working, onPress: () => void add(), children: "Save card" })] })] })] }) }));
+}

package/lib/settings/code.d.ts

@@ -0,0 +1 @@
+export declare function Code(): import("react").JSX.Element;

package/lib/settings/code.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Code: where and how a new run starts — the model, the effort, the mode and
+ * the place — for anyone whose New has no choice of its own kept yet. Saved to
+ * the person's own settings. Beside them, the codebases' environments and the
+ * organization's machines, each on its own page.
+ */
+import { YStack } from '@hanzo/gui';
+import { ChevronRight } from '@hanzogui/lucide-icons-2';
+import { ChipSelect } from '@hanzo/ui/product';
+import { useState } from 'react';
+import { unhonoured } from '../api/coding.js';
+import { ENSO, models } from '../api/models.js';
+import { SANDBOX } from '../api/places.js';
+import { usePlaces, useRead } from '../data.js';
+import { useHost, useTarget } from '../host.js';
+import { EFFORTS, MODES } from '../landing.js';
+import { usePrefs } from '../prefs.js';
+import { path } from '../route.js';
+import { Card, Group, Heading, Note, Row, Soft } from './ui.js';
+export function Code() {
+    const host = useHost();
+    const t = useTarget();
+    const signed = Boolean(host.person);
+    const { prefs, save } = usePrefs();
+    const catalog = useRead(signed ? () => models(t) : null, [], [t, signed]);
+    const places = usePlaces(t, signed);
+    const [note, setNote] = useState('');
+    if (!signed) {
+        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Code" }), _jsx(Soft, { children: "Sign in to set how your runs start." })] }));
+    }
+    const now = { model: ENSO, effort: 'medium', mode: 'build', place: '', ...prefs.code };
+    const keep = (change) => {
+        setNote('');
+        save({ code: { ...prefs.code, ...change } }).catch((e) => setNote(e instanceof Error ? e.message : 'That was not saved'));
+    };
+    const where = (places.value.length ? places.value : [SANDBOX]).map((p) => ({
+        id: p.id || 'sandbox',
+        label: p.id ? p.label : 'Default',
+        // A machine offline now can still be the default; its status shows beside it.
+        hint: p.id ? [p.status, p.capacity].filter(Boolean).join(' · ') : 'The platform’s own sandbox',
+        place: p.id,
+    }));
+    const place = where.find((w) => w.place === now.place) ?? { id: now.place, label: now.place || 'Default', place: now.place };
+    const model = catalog.value.find((m) => m.id === now.model) ?? { id: now.model, label: now.model === ENSO ? 'Enso' : now.model };
+    const go = (section) => host.go(path({ kind: 'settings', section }));
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Code", detail: "How a new run starts. New begins from these until you choose otherwise there." }), _jsxs(Group, { title: "Defaults", children: [_jsxs(Card, { children: [_jsx(Row, { first: true, title: "Model", detail: "Enso picks one for each step; any other model runs them all.", trailing: _jsx(ChipSelect, { name: "Default model", label: model.label, chosen: model, items: catalog.value, onChange: (m) => keep({ model: m.id }), placeholder: "Search models\u2026", placement: "bottom-end", loading: catalog.loading, error: catalog.error?.message ?? null }) }), _jsx(Row, { title: "Effort", detail: "How long the agent thinks before it acts.", trailing: _jsx(ChipSelect, { name: "Default effort", label: EFFORTS.find((e) => e.id === now.effort).label, chosen: EFFORTS.find((e) => e.id === now.effort) ?? null, items: EFFORTS, onChange: (e) => keep({ effort: e.id }), placement: "bottom-end", width: 180 }) }), _jsx(Row, { title: "Mode", detail: MODES.find((m) => m.id === now.mode).hint, trailing: _jsx(ChipSelect, { name: "Default mode", label: MODES.find((m) => m.id === now.mode).label, chosen: MODES.find((m) => m.id === now.mode) ?? null, items: MODES, onChange: (m) => keep({ mode: m.id }), placement: "bottom-end", width: 260 }) }), _jsx(Row, { title: "Where it runs", detail: "The Hanzo sandbox, or one of your organization\u2019s machines.", trailing: _jsx(ChipSelect, { name: "Default place", label: place.label, chosen: place, items: where, onChange: (w) => keep({ place: w.place }), placeholder: "Search machines\u2026", placement: "bottom-end", loading: places.loading, error: places.error?.message ?? null }) })] }), _jsx(Note, { children: unhonoured(now.mode, now.place) })] }), _jsx(Group, { title: "Workspace", children: _jsxs(Card, { children: [_jsx(Row, { first: true, title: "Environments", detail: "What a run installs and starts in each codebase, and the secrets it exports.", trailing: _jsx(Link, { label: "Environments", onPress: () => go('environments') }) }), _jsx(Row, { title: "Machines", detail: "Your organization\u2019s own computers that take runs.", trailing: _jsx(Link, { label: "Machines", onPress: () => go('machines') }) })] }) }), _jsx(Note, { children: note })] }));
+}
+function Link({ label, onPress }) {
+    return (_jsx(YStack, { render: "button", "aria-label": `Open ${label}`, p: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, onPress: onPress, children: _jsx(ChevronRight, { size: 16 }) }));
+}

package/lib/settings/environments.d.ts

@@ -0,0 +1 @@
+export declare function Environments(): import("react").JSX.Element;

package/lib/settings/environments.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Environments: every codebase in the organization that has one — what a sandbox
+ * run does to its checkout before the agent starts, and the secrets it exports.
+ * One opens in the same editor a run shows beside it. A member reads; an org
+ * admin saves, sets secrets and forgets an environment, which is the platform's
+ * rule and not a choice made here.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { ChevronLeft, ChevronRight } from '@hanzogui/lucide-icons-2';
+import { Button } from '@hanzo/ui';
+import { useState } from 'react';
+import { environments, forget } from '../api/environment.js';
+import { Confirm } from '../ask.js';
+import { useRead } from '../data.js';
+import { Environment } from '../environment.js';
+import { useHost, useTarget } from '../host.js';
+import { Card, Heading, Note, Row, Soft } from './ui.js';
+const STATE = { none: 'Not set up', proposed: 'Proposed, waiting for review', ready: 'Ready' };
+/** The line under a codebase: where it stands, its secrets, when it was saved. */
+function about(e) {
+    const parts = [STATE[e.state]];
+    if (e.secrets.length)
+        parts.push(e.secrets.length === 1 ? '1 secret' : `${e.secrets.length} secrets`);
+    const when = e.updated ? new Date(e.updated) : null;
+    if (when && !Number.isNaN(when.getTime()))
+        parts.push(`Updated ${when.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })}`);
+    return parts.join(' · ');
+}
+export function Environments() {
+    const host = useHost();
+    const t = useTarget();
+    const signed = Boolean(host.person);
+    const list = useRead(signed ? () => environments(t) : null, [], [t, signed]);
+    const [open, setOpen] = useState('');
+    const [forgetting, setForgetting] = useState(false);
+    const [note, setNote] = useState('');
+    if (!signed) {
+        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Environments" }), _jsx(Soft, { children: "Sign in to see your organization\u2019s environments." })] }));
+    }
+    if (open) {
+        return (_jsxs(YStack, { gap: "$5", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsxs(Button, { size: "sm", variant: "ghost", onPress: () => setOpen(''), children: [_jsx(ChevronLeft, { size: 14 }), " All environments"] }), _jsx(XStack, { flex: 1 }), host.admin ? (_jsx(Button, { size: "sm", variant: "outline", onPress: () => setForgetting(true), children: "Forget" })) : null] }), _jsx(Environment, { repo: open, busy: false }), _jsx(Confirm, { open: forgetting, onOpenChange: setForgetting, title: `Forget ${open}’s environment?`, says: "Later runs on this codebase start bare: its scripts are dropped and every secret it holds is removed from KMS. This cannot be undone.", act: "Forget", run: async () => {
+                        await forget(t, open);
+                        setNote(`${open}’s environment is forgotten`);
+                        setOpen('');
+                        list.reload();
+                    } })] }));
+    }
+    return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Environments", detail: "What a sandbox run does to a codebase before its agent starts: the install script, the start command, and the secrets it exports." }), list.error ? (_jsx(Soft, { children: list.error.message })) : list.loading && list.value.length === 0 ? (_jsx(Soft, { children: "Reading environments\u2026" })) : list.value.length === 0 ? (_jsx(Soft, { children: "No codebase has an environment yet. Set one up from New, or from a run\u2019s Environment tab." })) : (_jsx(Card, { children: list.value.map((e, i) => (_jsx(YStack, { render: "button", "aria-label": `Open ${e.repo}`, onPress: () => {
+                        setNote('');
+                        setOpen(e.repo);
+                    }, cursor: "pointer", hoverStyle: { bg: '$hover' }, style: { textAlign: 'left' }, children: _jsx(Row, { first: i === 0, title: e.repo, detail: about(e), trailing: _jsx(ChevronRight, { size: 16, opacity: 0.6 }) }) }, e.repo))) })), !host.admin ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "An org admin saves an environment and sets its secrets." })) : null, _jsx(Note, { children: note })] }));
+}

package/lib/settings/general.d.ts

@@ -0,0 +1 @@
+export declare function General(): import("react").JSX.Element;

package/lib/settings/general.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * General: how the builder looks and listens — the theme, the text size, the
+ * motion, and the language dictation hears. Each choice is saved to the
+ * person's own settings as it is made, so it follows them to every device.
+ */
+import { YStack } from '@hanzo/gui';
+import { ChipSelect } from '@hanzo/ui/product';
+import { useState } from 'react';
+import { useHost } from '../host.js';
+import { usePrefs } from '../prefs.js';
+import { LANGUAGES, spoken } from '../voice.js';
+import { Card, Group, Heading, Note, Row, Soft } from './ui.js';
+const THEMES = [
+    { id: 'system', label: 'System' },
+    { id: 'light', label: 'Light' },
+    { id: 'dark', label: 'Dark' },
+];
+const TEXTS = [
+    { id: 'small', label: 'Small' },
+    { id: 'medium', label: 'Medium' },
+    { id: 'large', label: 'Large' },
+];
+const MOTIONS = [
+    { id: 'system', label: 'System', hint: 'As this device is set' },
+    { id: 'reduced', label: 'Reduced', hint: 'No animation anywhere' },
+];
+export function General() {
+    const host = useHost();
+    const { prefs, save } = usePrefs();
+    const [note, setNote] = useState('');
+    if (!host.person) {
+        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "General" }), _jsx(Soft, { children: "Sign in to see your settings." })] }));
+    }
+    const keep = (patch) => {
+        setNote('');
+        save(patch).catch((e) => setNote(e instanceof Error ? e.message : 'That was not saved'));
+    };
+    const theme = prefs.theme ?? host.theme ?? 'dark';
+    const text = prefs.text ?? 'medium';
+    const motion = prefs.motion ?? 'system';
+    const language = LANGUAGES.find((l) => l.id === prefs.language) ?? LANGUAGES.find((l) => l.id === spoken());
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "General", detail: "How Hanzo Build looks and listens. Saved to your account, so it follows you." }), _jsx(Group, { title: "Appearance", children: _jsxs(Card, { children: [host.chooseTheme ? (_jsx(Row, { first: true, title: "Theme", detail: "System follows this device\u2019s light or dark setting.", trailing: _jsx(ChipSelect, { name: "Theme", label: THEMES.find((x) => x.id === theme).label, chosen: THEMES.find((x) => x.id === theme) ?? null, items: THEMES, onChange: (x) => keep({ theme: x.id }), placement: "bottom-end", width: 200 }) })) : null, _jsx(Row, { first: !host.chooseTheme, title: "Text size", detail: "The transcript, the composer and every screen.", trailing: _jsx(ChipSelect, { name: "Text size", label: TEXTS.find((x) => x.id === text).label, chosen: TEXTS.find((x) => x.id === text) ?? null, items: TEXTS, onChange: (x) => keep({ text: x.id === 'medium' ? null : x.id }), placement: "bottom-end", width: 200 }) }), _jsx(Row, { title: "Motion", detail: "Reduced stops animations and transitions on this page.", trailing: _jsx(ChipSelect, { name: "Motion", label: MOTIONS.find((x) => x.id === motion).label, chosen: MOTIONS.find((x) => x.id === motion) ?? null, items: MOTIONS, onChange: (x) => keep({ motion: x.id === 'system' ? null : x.id }), placement: "bottom-end", width: 220 }) })] }) }), _jsx(Group, { title: "Voice", children: _jsx(Card, { children: _jsx(Row, { first: true, title: "Dictation language", detail: "What the microphone in the composer listens for.", trailing: _jsx(ChipSelect, { name: "Dictation language", label: language.label, chosen: language, items: LANGUAGES, onChange: (l) => keep({ language: l.id }), placeholder: "Search languages\u2026", placement: "bottom-end", width: 220 }) }) }) }), _jsx(Note, { children: note })] }));
+}

package/lib/settings/index.d.ts

@@ -0,0 +1,4 @@
+import { type Section } from '../route.ts';
+export declare function Settings({ section }: {
+    section: Section;
+}): import("react").JSX.Element;

package/lib/settings/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Settings: every setting the builder has, on this page — the account, the
+ * workspace's environments, machines and keys, what the agent brings to a run,
+ * and the organization's integrations, members, usage and notifications. A
+ * section is its own address, so it can be linked to and comes back on reload.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { useHost } from '../host.js';
+import { path } from '../route.js';
+import { ENTRIES, GROUPS } from './sections.js';
+export function Settings({ section }) {
+    const host = useHost();
+    const entry = ENTRIES.find((e) => e.id === section) ?? ENTRIES[0];
+    const go = (id) => host.go(path({ kind: 'settings', section: id }));
+    return (_jsxs(XStack, { flex: 1, minH: 0, minW: 0, children: [_jsxs(YStack, { role: "navigation", "aria-label": "Settings", width: 220, shrink: 0, borderRightWidth: 1, borderColor: "$borderColor", px: "$2", py: "$4", gap: "$4", overflow: "scroll", "$max-md": { display: 'none' }, children: [_jsx(SizableText, { size: "$4", color: "$ink", px: "$2", children: "Settings" }), GROUPS.map((g) => {
+                        const list = ENTRIES.filter((e) => e.group === g);
+                        if (!list.length)
+                            return null;
+                        return (_jsxs(YStack, { gap: "$0.5", children: [_jsx(SizableText, { size: "$1", color: "$soft", px: "$2", pb: "$1", children: g }), list.map((e) => (_jsx(XStack, { render: "button", "aria-label": e.label, "aria-current": e.id === entry.id ? 'page' : undefined, onPress: () => go(e.id), px: "$2", py: "$1.5", rounded: "$2", bg: e.id === entry.id ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, children: _jsx(SizableText, { size: "$2", color: e.id === entry.id ? '$ink' : '$soft', children: e.label }) }, e.id)))] }, g));
+                    })] }), _jsxs(YStack, { flex: 1, minW: 0, minH: 0, overflow: "scroll", children: [_jsx(XStack, { flexWrap: "wrap", gap: "$1.5", px: "$4", pt: "$3", $md: { display: 'none' }, children: ENTRIES.map((e) => (_jsx(XStack, { render: "button", "aria-label": e.label, onPress: () => go(e.id), px: "$2.5", py: "$1", rounded: "$10", borderWidth: 1, borderColor: e.id === entry.id ? '$ink' : '$borderColor', children: _jsx(SizableText, { size: "$1", color: e.id === entry.id ? '$ink' : '$soft', children: e.label }) }, e.id))) }), _jsx(YStack, { width: "100%", maxW: 760, self: "center", px: "$5", py: "$6", children: entry.body() })] })] }));
+}