@hanzo/build 0.2.10 → 0.2.12

package/lib/settings/privacy.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Privacy: the two data-sharing answers IAM records for the person — whether
+ * Hanzo may train on their data, and whether anonymous usage is counted — and
+ * who can see the organization's projects: a public one is in the community
+ * catalogue with its source readable by anyone, until it is made private.
+ */
+import { YStack } from '@hanzo/gui';
+import { Button, Switch } from '@hanzo/ui';
+import { useState } from 'react';
+import { consent, setConsent } from '../api/consent.js';
+import { change, projects } from '../api/projects.js';
+import { useRead } from '../data.js';
+import { useHost, useTarget } from '../host.js';
+import { Card, Group, Heading, Note, Row, Soft } from './ui.js';
+export function Privacy() {
+    const host = useHost();
+    const t = useTarget();
+    const signed = Boolean(host.person);
+    const answers = useRead(signed ? () => consent(t) : null, null, [t, signed]);
+    const published = useRead(signed ? () => projects(t) : null, [], [t, signed]);
+    const [shown, setShown] = useState(null);
+    const [busy, setBusy] = useState('');
+    const [note, setNote] = useState('');
+    if (!signed) {
+        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Privacy" }), _jsx(Soft, { children: "Sign in to see your privacy settings." })] }));
+    }
+    const now = shown ?? answers.value;
+    const answer = async (change) => {
+        setBusy('consent');
+        setNote('');
+        try {
+            setShown(await setConsent(t, change));
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'That was not saved');
+        }
+        finally {
+            setBusy('');
+        }
+    };
+    const flip = async (p) => {
+        setBusy(p.slug);
+        setNote('');
+        try {
+            const saved = await change(t, p.slug, { visibility: p.visibility === 'private' ? 'public' : 'private' });
+            published.reload();
+            setNote(`${saved.name} is ${saved.visibility || 'saved'}`);
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'That was not saved');
+        }
+        finally {
+            setBusy('');
+        }
+    };
+    const training = now?.training ?? '';
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Privacy", detail: "What Hanzo may do with your data, and what your organization shows the world." }), _jsx(Group, { title: "Your data", detail: "Recorded on your Hanzo account and honoured by every Hanzo surface.", children: answers.error && !now ? (_jsx(Soft, { children: answers.error.message })) : !now ? (_jsx(Soft, { children: "Reading your answers\u2026" })) : (_jsxs(Card, { children: [_jsx(Row, { first: true, title: "Help improve Hanzo models", detail: training === 'granted'
+                                ? 'Hanzo may train on your prompts and runs.'
+                                : training === 'refused'
+                                    ? 'Hanzo does not train on your data.'
+                                    : 'Not answered yet. Until you say yes, Hanzo does not train on your data.', trailing: _jsx(Switch, { "aria-label": "Help improve Hanzo models", checked: training === 'granted', disabled: busy === 'consent', onCheckedChange: (on) => void answer({ training: on ? 'granted' : 'refused' }) }) }), _jsx(Row, { title: "Usage insights", detail: "Anonymous counts of how the product is used. No prompts, code or answers.", trailing: _jsx(Switch, { "aria-label": "Usage insights", checked: now.insights, disabled: busy === 'consent', onCheckedChange: (on) => void answer({ insights: on }) }) })] })) }), _jsx(Group, { title: "Projects", detail: "A public project is listed in the community catalogue, and anyone can read its source. Keeping one private needs a paid plan.", children: published.error ? (_jsx(Soft, { children: published.error.message })) : published.loading && !published.value.length ? (_jsx(Soft, { children: "Reading projects\u2026" })) : !published.value.length ? (_jsx(Soft, { children: "Your organization has no projects yet." })) : (_jsx(Card, { children: published.value.map((p, i) => (_jsx(Row, { first: i === 0, title: p.name, detail: p.visibility === 'private' ? 'Private' : p.visibility === 'public' ? 'Public' : 'Visibility not reported', trailing: p.visibility ? (_jsx(Button, { size: "sm", variant: "outline", disabled: busy === p.slug, onPress: () => void flip(p), children: p.visibility === 'private' ? 'Make public' : 'Make private' })) : null }, p.slug))) })) }), _jsx(Note, { children: note })] }));
+}

package/lib/settings/sections.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The sections of Settings, in the order the page lists them. A section is one
+ * file under settings/ and one entry here; the route grammar names every
+ * section there can be (route.ts SECTIONS), and this lists the ones built.
+ */
+import type { ReactNode } from 'react';
+import type { Section } from '../route.ts';
+export type Group = 'Settings' | 'Code' | 'Organization';
+export declare const GROUPS: readonly Group[];
+export interface Entry {
+    id: Section;
+    label: string;
+    group: Group;
+    body: () => ReactNode;
+}
+export declare const ENTRIES: Entry[];

package/lib/settings/sections.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Account } from './account.js';
+import { Billing } from './billing.js';
+import { Capabilities } from './capabilities.js';
+import { Code } from './code.js';
+import { Environments } from './environments.js';
+import { General } from './general.js';
+import { Integrations } from './integrations.js';
+import { Keys } from './keys.js';
+import { Machines } from './machines.js';
+import { Members } from './members.js';
+import { Memory } from './memory.js';
+import { Notifications } from './notifications.js';
+import { Privacy } from './privacy.js';
+import { Usage } from './usage.js';
+export const GROUPS = ['Settings', 'Code', 'Organization'];
+export const ENTRIES = [
+    { id: 'general', label: 'General', group: 'Settings', body: () => _jsx(General, {}) },
+    { id: 'account', label: 'Account', group: 'Settings', body: () => _jsx(Account, {}) },
+    { id: 'privacy', label: 'Privacy', group: 'Settings', body: () => _jsx(Privacy, {}) },
+    { id: 'billing', label: 'Billing', group: 'Settings', body: () => _jsx(Billing, {}) },
+    { id: 'usage', label: 'Usage', group: 'Settings', body: () => _jsx(Usage, {}) },
+    { id: 'capabilities', label: 'Capabilities', group: 'Settings', body: () => _jsx(Capabilities, {}) },
+    { id: 'memory', label: 'Memory', group: 'Settings', body: () => _jsx(Memory, {}) },
+    { id: 'code', label: 'Code', group: 'Code', body: () => _jsx(Code, {}) },
+    { id: 'environments', label: 'Environments', group: 'Code', body: () => _jsx(Environments, {}) },
+    { id: 'machines', label: 'Machines', group: 'Code', body: () => _jsx(Machines, {}) },
+    { id: 'keys', label: 'API keys', group: 'Code', body: () => _jsx(Keys, {}) },
+    { id: 'members', label: 'Members', group: 'Organization', body: () => _jsx(Members, {}) },
+    { id: 'integrations', label: 'Integrations', group: 'Organization', body: () => _jsx(Integrations, {}) },
+    { id: 'notifications', label: 'Notifications', group: 'Organization', body: () => _jsx(Notifications, {}) },
+];

package/lib/settings/ui.d.ts

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+/** A section's title, what it is for, and its one action. */
+export declare function Heading({ title, detail, action }: {
+    title: string;
+    detail?: string;
+    action?: ReactNode;
+}): import("react").JSX.Element;
+/** A group inside a section: a small title over what it holds. */
+export declare function Group({ title, detail, action, children }: {
+    title: string;
+    detail?: string;
+    action?: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** A bordered list. Its rows draw their own dividers. */
+export declare function Card({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** One row of a Card: what it is, a line about it, and what can be done to it. */
+export declare function Row({ title, detail, leading, trailing, first, mono, }: {
+    title: string;
+    detail?: string;
+    leading?: ReactNode;
+    trailing?: ReactNode;
+    first?: boolean;
+    mono?: boolean;
+}): import("react").JSX.Element;
+/** A labelled control, with a line under it when there is more to say. */
+export declare function Field({ label, hint, children }: {
+    label: string;
+    hint?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The quiet line for empty, loading, signed-out and refused. */
+export declare function Soft({ children }: {
+    children: string;
+}): import("react").JSX.Element;
+/** `Sep 27, 2026` from an RFC 3339 instant, or '' when there is none. UTC, the calendar the platform bills and resets on. */
+export declare function day(iso: string): string;
+/** A credential the platform answers once: the value to copy, and what it is for. */
+export declare function Once({ value, label, children }: {
+    value: string;
+    label: string;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/** What the last action did, said once, where it was done. */
+export declare function Note({ children }: {
+    children: string;
+}): import("react").JSX.Element | null;

package/lib/settings/ui.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * What every Settings section is drawn from, so they read as one page: a
+ * heading with its action, bordered lists of rows, labelled fields, and the
+ * quiet lines for empty, loading and refused.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { CopyButton } from '@hanzo/ui/product';
+/** A section's title, what it is for, and its one action. */
+export function Heading({ title, detail, action }) {
+    return (_jsxs(XStack, { items: "flex-start", gap: "$3", children: [_jsxs(YStack, { flex: 1, minW: 0, gap: "$1", children: [_jsx(SizableText, { size: "$6", color: "$ink", children: title }), detail ? (_jsx(SizableText, { size: "$2", color: "$soft", children: detail })) : null] }), action] }));
+}
+/** A group inside a section: a small title over what it holds. */
+export function Group({ title, detail, action, children }) {
+    return (_jsxs(YStack, { gap: "$2", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: title }), detail ? (_jsx(SizableText, { size: "$1", color: "$soft", children: detail })) : null] }), action] }), children] }));
+}
+/** A bordered list. Its rows draw their own dividers. */
+export function Card({ children }) {
+    return (_jsx(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: children }));
+}
+/** One row of a Card: what it is, a line about it, and what can be done to it. */
+export function Row({ title, detail, leading, trailing, first, mono, }) {
+    return (_jsxs(XStack, { items: "center", gap: "$3", px: "$3", py: "$2.5", borderTopWidth: first ? 0 : 1, borderColor: "$borderColor", children: [leading, _jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, style: mono ? { fontFamily: 'var(--f-mono, ui-monospace, monospace)' } : undefined, children: title }), detail ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 2, children: detail })) : null] }), trailing] }));
+}
+/** A labelled control, with a line under it when there is more to say. */
+export function Field({ label, hint, children }) {
+    return (_jsxs(YStack, { gap: "$1.5", children: [_jsx(SizableText, { size: "$2", color: "$ink", children: label }), children, hint ? (_jsx(SizableText, { size: "$1", color: "$soft", children: hint })) : null] }));
+}
+/** The quiet line for empty, loading, signed-out and refused. */
+export function Soft({ children }) {
+    return (_jsx(YStack, { py: "$5", items: "center", children: _jsx(SizableText, { size: "$2", color: "$soft", style: { textAlign: 'center' }, children: children }) }));
+}
+/** `Sep 27, 2026` from an RFC 3339 instant, or '' when there is none. UTC, the calendar the platform bills and resets on. */
+export function day(iso) {
+    const d = iso ? new Date(iso) : null;
+    return d && !Number.isNaN(d.getTime()) ? d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' }) : '';
+}
+/** A credential the platform answers once: the value to copy, and what it is for. */
+export function Once({ value, label, children }) {
+    return (_jsxs(YStack, { gap: "$2", px: "$3", py: "$3", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$raised", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { flex: 1, minW: 0, size: "$2", color: "$ink", "aria-label": label, style: { fontFamily: 'var(--f-mono, ui-monospace, monospace)', wordBreak: 'break-all' }, children: value }), _jsx(CopyButton, { value: value, label: `Copy ${label.toLowerCase()}` })] }), _jsx(SizableText, { size: "$1", color: "$soft", children: "Copy it now. It is not shown again." }), children] }));
+}
+/** What the last action did, said once, where it was done. */
+export function Note({ children }) {
+    if (!children)
+        return null;
+    return (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: children }));
+}

package/lib/settings/usage.d.ts

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

package/lib/settings/usage.js

@@ -0,0 +1,114 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Usage: what the plan includes and how much of it is used, what the
+ * organization has left to spend and has spent this month, and the monthly
+ * limit that stops spend past it. Buying more charges the saved card into the
+ * balance; the limit is an org admin's to set.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { Button, Input } from '@hanzo/ui';
+import { useState } from 'react';
+import { balance, caps, cents, chosen, credit, label, lift, limit, methods, money, month, monthly, spend, topup, } from '../api/billing.js';
+import { useRead } from '../data.js';
+import { useHost, useTarget } from '../host.js';
+import { path } from '../route.js';
+import { Card, day, Group, Heading, Note, Row, Soft } from './ui.js';
+const SPAN = { hour: 'This hour', day: 'Today', week: 'This week', month: 'This month' };
+/** A thin bar: how much of a whole is used. */
+function Bar({ part, whole, limit }) {
+    const pct = whole > 0 ? Math.min(100, Math.max(0, (part / whole) * 100)) : 0;
+    return (_jsx(YStack, { height: 6, rounded: 999, bg: "$hover", overflow: "hidden", role: "progressbar", "aria-valuenow": Math.round(pct), "aria-valuemin": 0, "aria-valuemax": 100, children: _jsx(YStack, { height: 6, width: `${pct}%`, rounded: 999, bg: limit && pct >= 100 ? '$red10' : '$ink' }) }));
+}
+/**
+ * One measured row: what, how much, when it starts over, and its bar. A limit's
+ * bar turns red when it is used up; a share of a total never does.
+ */
+function Meter({ title, used, of, says, first, limit = true }) {
+    return (_jsxs(YStack, { gap: "$2", px: "$3", py: "$3", borderTopWidth: first ? 0 : 1, borderColor: "$borderColor", children: [_jsxs(XStack, { items: "baseline", justify: "space-between", flexWrap: "wrap", columnGap: "$3", rowGap: "$1", children: [_jsx(SizableText, { size: "$2", color: "$ink", children: title }), _jsx(SizableText, { size: "$1", color: "$soft", children: says })] }), _jsx(Bar, { part: used, whole: of, limit: limit })] }));
+}
+/** `in 3 hr 12 min` or `Oct 1, 2026`, for when a window starts over. */
+function resets(iso) {
+    const at = iso ? new Date(iso).getTime() : NaN;
+    if (Number.isNaN(at))
+        return '';
+    const mins = Math.round((at - Date.now()) / 60000);
+    if (mins <= 0)
+        return 'Resets now';
+    if (mins < 60)
+        return `Resets in ${mins} min`;
+    if (mins < 24 * 60)
+        return `Resets in ${Math.floor(mins / 60)} hr ${mins % 60} min`;
+    return `Resets ${day(iso)}`;
+}
+export function Usage() {
+    const host = useHost();
+    const t = useTarget();
+    const signed = Boolean(host.person);
+    const plan = useRead(signed ? () => month(t) : null, null, [t, signed]);
+    const left = useRead(signed ? () => balance(t) : null, 0, [t, signed]);
+    const granted = useRead(signed ? () => credit(t) : null, 0, [t, signed]);
+    const spent = useRead(signed ? () => spend(t) : null, null, [t, signed]);
+    const ceilings = useRead(signed ? () => caps(t) : null, [], [t, signed]);
+    const cards = useRead(signed ? () => methods(t) : null, [], [t, signed]);
+    const [buying, setBuying] = useState(false);
+    const [amount, setAmount] = useState('25');
+    const [ceiling, setCeiling] = useState('');
+    const [working, setWorking] = useState(false);
+    const [note, setNote] = useState('');
+    if (!signed) {
+        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Usage" }), _jsx(Soft, { children: "Sign in to see this organization\u2019s usage." })] }));
+    }
+    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);
+        }
+    };
+    const m = plan.value;
+    const windows = (m?.windows ?? []).filter((w) => w.limit > 0);
+    const card = chosen(cards.value);
+    const cap = monthly(ceilings.value);
+    const others = ceilings.value.filter((c) => c !== cap);
+    const s = spent.value;
+    const top = Math.max(0, ...(s?.categories ?? []).map((c) => c.cents));
+    const buy = () => {
+        const c = cents(amount);
+        if (!c) {
+            setNote('Enter an amount in dollars');
+            return;
+        }
+        if (!card)
+            return;
+        void act(() => topup(t, c, card.id), `${money(c)} is added to the balance`, () => {
+            setBuying(false);
+            left.reload();
+        });
+    };
+    const setLimit = () => {
+        const c = cents(ceiling);
+        if (!c) {
+            setNote('Enter a monthly limit in dollars');
+            return;
+        }
+        void act(() => limit(t, ceilings.value, c), `Spend stops at ${money(c)} a month`, () => {
+            setCeiling('');
+            ceilings.reload();
+        });
+    };
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Usage", detail: `What ${host.org ?? 'this organization'} has used, has left, and may spend.` }), _jsx(Group, { title: "Plan usage limits", detail: m?.plan ? `Included with ${m.plan}.` : 'What the plan includes.', children: plan.error ? (_jsx(Soft, { children: plan.error.message })) : plan.loading && !m ? (_jsx(Soft, { children: "Reading the plan\u2019s limits\u2026" })) : !m || (windows.length === 0 && m.included === 0) ? (_jsx(Card, { children: _jsx(Soft, { children: "This plan sets no usage limits. Usage is paid from the balance." }) })) : (_jsxs(Card, { children: [m.included > 0 ? (_jsx(Meter, { first: true, title: "Included spend", used: m.used, of: m.included, says: `${money(m.used)} of ${money(m.included)}${m.overage ? ` · ${money(m.overage)} over` : ''}` })) : null, windows.map((w, i) => (_jsx(Meter, { first: i === 0 && m.included === 0, title: `${SPAN[w.span] ?? w.span} · ${w.used.toLocaleString()} of ${w.limit.toLocaleString()} requests`, used: w.used, of: w.limit, says: `${Math.round((Math.min(w.used, w.limit) / w.limit) * 100)}% used${resets(w.resets) ? ` · ${resets(w.resets)}` : ''}` }, w.span)))] })) }), _jsx(Group, { title: "Balance", detail: "Prepaid money pays for usage past the plan. Credits are spent first.", action: buying || !host.admin ? undefined : (_jsx(Button, { size: "sm", variant: "outline", onPress: () => setBuying(true), children: "Buy more" })), children: _jsxs(Card, { children: [_jsx(Row, { first: true, title: "Balance", detail: "What is left to spend", trailing: _jsx(Figure, { read: left }) }), _jsx(Row, { title: "Credits", detail: "Granted, and spent before the balance", trailing: _jsx(Figure, { read: granted }) }), _jsx(Row, { title: "Spent this month", detail: s && !s.known ? 'The ledger did not answer, so this is not a measurement' : undefined, trailing: _jsx(Figure, { read: { ...spent, value: s?.total ?? 0 } }) }), buying ? (_jsx(YStack, { gap: "$2", px: "$3", py: "$3", borderTopWidth: 1, borderColor: "$borderColor", children: card ? (_jsxs(_Fragment, { children: [_jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", children: [_jsx(YStack, { width: 140, children: _jsx(Input, { value: amount, onChangeText: setAmount, "aria-label": "Amount in dollars", placeholder: "25", inputMode: "decimal" }) }), _jsxs(SizableText, { flex: 1, minW: 160, size: "$1", color: "$soft", children: ["Charged to ", label(card)] })] }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => setBuying(false), children: "Cancel" }), _jsx(Button, { size: "sm", disabled: working, onPress: buy, children: cents(amount) ? `Add ${money(cents(amount) ?? 0)}` : 'Add funds' })] })] })) : (_jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", children: [_jsx(SizableText, { flex: 1, minW: 160, size: "$2", color: "$soft", children: cards.loading ? 'Reading cards…' : 'Add a card in Billing to buy more.' }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => host.go(path({ kind: 'settings', section: 'billing' })), children: "Billing" })] })) })) : null] }) }), _jsx(Group, { title: "Spend this month", detail: "By what it paid for.", children: spent.error ? (_jsx(Soft, { children: spent.error.message })) : !s ? (_jsx(Soft, { children: "Reading spend\u2026" })) : s.categories.length === 0 ? (_jsx(Card, { children: _jsx(Soft, { children: "Nothing spent this month." }) })) : (_jsx(Card, { children: s.categories.map((c, i) => (_jsx(Meter, { first: i === 0, title: c.name, used: c.cents, of: top, says: money(c.cents), limit: false }, c.name))) })) }), _jsxs(Group, { title: "Monthly limit", detail: "Spend past it is refused until the month starts over.", children: [ceilings.error ? (_jsx(Soft, { children: ceilings.error.message })) : (_jsxs(Card, { children: [cap ? (_jsx(Meter, { first: true, title: `${money(cap.threshold)} a month`, used: cap.spent ?? 0, of: cap.threshold, says: [cap.spent === null ? 'Spend unknown' : `${money(cap.spent)} spent`, resets(cap.resets)].filter(Boolean).join(' · ') })) : (_jsx(Row, { first: true, title: "No monthly limit", detail: "Spend is bounded by the balance alone." })), others.map((c) => (_jsx(Row, { title: c.title || 'Limit', detail: [c.project && `project ${c.project}`, c.service && `service ${c.service}`, c.enforce ? 'refuses spend past it' : 'warns only']
+                                    .filter(Boolean)
+                                    .join(' · '), trailing: _jsx(SizableText, { size: "$2", color: "$ink", children: c.threshold ? money(c.threshold) : '—' }) }, c.id))), host.admin ? (_jsxs(XStack, { gap: "$2", items: "center", px: "$3", py: "$3", borderTopWidth: 1, borderColor: "$borderColor", flexWrap: "wrap", children: [_jsx(YStack, { width: 160, children: _jsx(Input, { value: ceiling, onChangeText: setCeiling, "aria-label": "Monthly limit in dollars", placeholder: cap ? String(cap.threshold / 100) : '500', inputMode: "decimal" }) }), _jsxs(XStack, { flex: 1, gap: "$2", justify: "flex-end", children: [cap ? (_jsx(Button, { size: "sm", variant: "ghost", disabled: working, onPress: () => void act(() => lift(t, cap.id), 'The monthly limit is lifted', ceilings.reload), children: "Remove" })) : null, _jsx(Button, { size: "sm", variant: "outline", disabled: working || !ceiling.trim(), onPress: setLimit, children: cap ? 'Change limit' : 'Set limit' })] })] })) : null] })), !host.admin ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "An org admin sets the monthly limit." })) : null] }), _jsx(Note, { children: note })] }));
+}
+/** A money figure as read: the amount, or why there is none. */
+function Figure({ read }) {
+    return (_jsx(SizableText, { size: "$2", color: read.error ? '$soft' : '$ink', numberOfLines: 1, maxW: 200, children: read.error ? 'Unavailable' : read.loading ? '…' : money(read.value) }));
+}

package/lib/shelf.d.ts

@@ -1,2 +1,8 @@
+/**
+ * What this org has built: a few starters to make something new from, then
+ * every project under the month it was last edited, whether it is public or
+ * private, and its rename, visibility and delete. A project belongs to the org
+ * and names no author, so the list does not split yours from a colleague's.
+ */
 export declare function Artifacts(): import("react").JSX.Element;
 export declare function Templates(): import("react").JSX.Element;

package/lib/shelf.js

@@ -9,9 +9,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * so what opens is that template, not a model's imitation of it.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
-import { Boxes, ExternalLink, Globe } from '@hanzogui/lucide-icons-2';
+import { Boxes, ExternalLink, Globe, Lock, MoreHorizontal } from '@hanzogui/lucide-icons-2';
+import { DropdownMenu } from '@hanzo/ui';
 import { useState } from 'react';
-import { fork, templates } from './api/projects.js';
+import { change, fork, remove, templates } from './api/projects.js';
+import { Confirm, Rename } from './ask.js';
 import { useProjects, useRead } from './data.js';
 import { useHost, useTarget } from './host.js';
 import { Out } from './out.js';
@@ -19,23 +21,13 @@ const SHOTS = 'https://hanzo.ai/templates';
 function Head({ title, says }) {
     return (_jsxs(YStack, { gap: "$1", pb: "$4", children: [_jsx(SizableText, { render: "h1", size: "$6", color: "$ink", children: title }), _jsx(SizableText, { size: "$2", color: "$soft", children: says })] }));
 }
-function Card({ onPress, label, children }) {
-    return (_jsx(YStack, { render: "button", onPress: onPress, "aria-label": label, flexBasis: 260, grow: 1, maxW: 360, minW: 0, rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", overflow: "hidden", cursor: "pointer", hoverStyle: { borderColor: '$edge', bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: children }));
+function Card({ onPress, label, small, children }) {
+    return (_jsx(YStack, { render: "button", onPress: onPress, "aria-label": label, flexBasis: small ? 150 : 260, grow: 1, maxW: small ? 260 : 360, minW: 0, rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", overflow: "hidden", cursor: "pointer", hoverStyle: { borderColor: '$edge', bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, style: { textAlign: 'left' }, children: children }));
 }
-export function Artifacts() {
-    const t = useTarget();
-    const host = useHost();
-    const list = useProjects(t, Boolean(host.person));
-    return (_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", items: "center", children: _jsxs(YStack, { width: "100%", maxW: 1080, children: [_jsx(Head, { title: "Artifacts", says: "What this organization has built. Open one to keep building it." }), list.error ? (_jsx(SizableText, { size: "$2", color: "$soft", children: list.error.message })) : !host.person ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "Sign in to see what your organization has built." })) : list.loading && list.value.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "Reading your projects\u2026" })) : list.value.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "Nothing built yet. Describe something on the New page and it lands here." })) : (_jsx(XStack, { flexWrap: "wrap", gap: "$3", children: list.value.map((p) => (_jsx(Card, { label: `Open ${p.name}`, onPress: () => host.go(p.slug), children: _jsxs(YStack, { p: "$3", gap: "$1.5", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Globe, { size: 14, opacity: 0.7 }), _jsx(SizableText, { size: "$3", color: "$ink", numberOfLines: 1, flex: 1, children: p.name }), _jsx(SizableText, { size: "$1", color: "$soft", children: p.status || 'draft' })] }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: p.live ? new URL(p.live).host : 'Not deployed yet' })] }) }, p.slug))) }))] }) }));
-}
-function Shot({ slug }) {
-    const [gone, setGone] = useState(false);
-    return (_jsxs(YStack, { height: 140, bg: "$hover", items: "center", justify: "center", position: "relative", overflow: "hidden", children: [_jsxs(YStack, { items: "center", gap: "$2", opacity: 0.6, children: [_jsx(Boxes, { size: 24 }), _jsx(SizableText, { size: "$1", color: "$soft", textTransform: "uppercase", letterSpacing: 1, children: slug })] }), gone ? null : (_jsx("img", { src: `${SHOTS}/${encodeURIComponent(slug)}.webp`, alt: "", loading: "lazy", onError: () => setGone(true), style: { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' } }))] }));
-}
-export function Templates() {
+/** Copying a starter into a project of this org, then opening it: one copy at a time. */
+function useFork() {
     const t = useTarget();
     const host = useHost();
-    const list = useRead(() => templates(t), [], [t.api]);
     const [busy, setBusy] = useState('');
     const [failed, setFailed] = useState('');
     const take = async (slug) => {
@@ -56,5 +48,83 @@ export function Templates() {
             setBusy('');
         }
     };
+    return { busy, failed, take };
+}
+/** When a project was last edited, or made if it never was; Unix seconds. */
+const when = (p) => p.updated || p.created;
+/** The org's projects under the month each was last edited, newest first. */
+function months(list) {
+    const out = new Map();
+    for (const p of [...list].sort((a, b) => when(b) - when(a))) {
+        const s = when(p);
+        const label = s ? new Date(s * 1000).toLocaleDateString(undefined, { month: 'long', year: 'numeric' }) : 'Earlier';
+        out.set(label, [...(out.get(label) ?? []), p]);
+    }
+    return [...out].map(([label, rows]) => ({ label, rows }));
+}
+function edited(s) {
+    if (!s)
+        return '';
+    const d = new Date(s * 1000);
+    const year = d.getFullYear() === new Date().getFullYear() ? undefined : 'numeric';
+    return `Edited ${d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year })}`;
+}
+/**
+ * What this org has built: a few starters to make something new from, then
+ * every project under the month it was last edited, whether it is public or
+ * private, and its rename, visibility and delete. A project belongs to the org
+ * and names no author, so the list does not split yours from a colleague's.
+ */
+export function Artifacts() {
+    const t = useTarget();
+    const host = useHost();
+    const list = useProjects(t, Boolean(host.person));
+    const starters = useRead(() => templates(t), [], [t.api]);
+    const { busy, failed, take } = useFork();
+    const [renaming, setRenaming] = useState(null);
+    const [deleting, setDeleting] = useState(null);
+    const [note, setNote] = useState('');
+    const flip = async (p) => {
+        const visibility = p.visibility === 'private' ? 'public' : 'private';
+        setNote('');
+        try {
+            await change(t, p.slug, { visibility });
+            setNote(`${p.name} is ${visibility} now`);
+            list.reload();
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'That did not work');
+        }
+    };
+    const said = failed || note;
+    return (_jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", items: "center", "$max-md": { px: '$4' }, children: [_jsxs(YStack, { width: "100%", maxW: 1080, children: [_jsx(Head, { title: "Artifacts", says: "What this organization has built. Open one to keep building it." }), said ? (_jsx(SizableText, { size: "$2", color: "$soft", role: "status", pb: "$3", children: said })) : null, starters.value.length ? (_jsxs(YStack, { gap: "$3", pb: "$6", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: "Make something new" }), _jsx(XStack, { flexWrap: "wrap", gap: "$3", children: starters.value.slice(0, 4).map((x) => (_jsxs(Card, { small: true, label: `Start from ${x.title}`, onPress: () => void take(x.slug), children: [_jsx(Shot, { slug: x.slug, height: 110 }), _jsx(YStack, { px: "$3", py: "$2.5", children: _jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: busy === x.slug ? 'Copying…' : x.title }) })] }, x.slug))) })] })) : null, list.error ? (_jsx(SizableText, { size: "$2", color: "$soft", children: list.error.message })) : !host.person ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "Sign in to see what your organization has built." })) : list.loading && list.value.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "Reading your projects\u2026" })) : list.value.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "Nothing built yet. Describe something on the New page and it lands here." })) : (_jsx(YStack, { gap: "$5", children: months(list.value).map((g) => (_jsxs(YStack, { gap: "$2", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: g.label }), _jsx(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: g.rows.map((p, i) => (_jsxs(XStack, { items: "center", pr: "$2", borderTopWidth: i ? 1 : 0, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: [_jsxs(XStack, { flex: 1, minW: 0, render: "button", "aria-label": `Open ${p.name}`, onPress: () => host.go(p.slug), items: "center", gap: "$3", px: "$3", py: "$2.5", cursor: "pointer", style: { textAlign: 'left' }, children: [p.visibility === 'private' ? _jsx(Lock, { size: 16, opacity: 0.7 }) : _jsx(Globe, { size: 16, opacity: 0.7 }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { size: "$3", color: "$ink", numberOfLines: 1, children: p.name }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: [p.visibility === 'private' ? 'Private' : 'Public', edited(when(p)), p.live ? new URL(p.live).host : 'Not deployed yet']
+                                                                    .filter(Boolean)
+                                                                    .join(' · ') })] })] }), _jsx(DropdownMenu, { trigger: _jsx(XStack, { render: "button", "aria-label": `Actions for ${p.name}`, px: "$1.5", py: "$1", rounded: "$2", hoverStyle: { bg: '$raised' }, children: _jsx(MoreHorizontal, { size: 16 }) }), items: [
+                                                    { key: 'rename', label: 'Rename', onSelect: () => setRenaming(p) },
+                                                    { key: 'visibility', label: p.visibility === 'private' ? 'Make public' : 'Make private', onSelect: () => void flip(p) },
+                                                    { type: 'separator' },
+                                                    { key: 'delete', label: 'Delete', destructive: true, onSelect: () => setDeleting(p) },
+                                                ] })] }, p.slug))) })] }, g.label))) }))] }), _jsx(Rename, { open: renaming !== null, onOpenChange: (o) => !o && setRenaming(null), title: "Rename", name: renaming?.name ?? '', run: async (name) => {
+                    if (!renaming)
+                        return;
+                    await change(t, renaming.slug, { name });
+                    setNote(`Renamed to ${name}`);
+                    list.reload();
+                } }), _jsx(Confirm, { open: deleting !== null, onOpenChange: (o) => !o && setDeleting(null), title: `Delete ${deleting?.name ?? 'this project'}?`, says: "Its site stops answering, its releases are dropped, and its address is released. This cannot be undone.", act: "Delete", run: async () => {
+                    if (!deleting)
+                        return;
+                    await remove(t, deleting.slug);
+                    setNote(`${deleting.name} is deleted`);
+                    list.reload();
+                } })] }));
+}
+function Shot({ slug, height = 140 }) {
+    const [gone, setGone] = useState(false);
+    return (_jsxs(YStack, { height: height, bg: "$hover", items: "center", justify: "center", position: "relative", overflow: "hidden", children: [_jsxs(YStack, { items: "center", gap: "$2", opacity: 0.6, children: [_jsx(Boxes, { size: 24 }), _jsx(SizableText, { size: "$1", color: "$soft", textTransform: "uppercase", letterSpacing: 1, children: slug })] }), gone ? null : (_jsx("img", { src: `${SHOTS}/${encodeURIComponent(slug)}.webp`, alt: "", loading: "lazy", onError: () => setGone(true), style: { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' } }))] }));
+}
+export function Templates() {
+    const t = useTarget();
+    const list = useRead(() => templates(t), [], [t.api]);
+    const { busy, failed, take } = useFork();
     return (_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", items: "center", children: _jsxs(YStack, { width: "100%", maxW: 1080, children: [_jsx(Head, { title: "Templates", says: "Start from a working app. Picking one copies its repository into a project of yours." }), failed ? (_jsx(SizableText, { size: "$2", color: "$soft", role: "status", pb: "$3", children: failed })) : null, list.error ? (_jsx(SizableText, { size: "$2", color: "$soft", children: list.error.message })) : (_jsx(XStack, { flexWrap: "wrap", gap: "$3", children: list.value.map((x) => (_jsxs(Card, { label: `Start from ${x.title}`, onPress: () => void take(x.slug), children: [_jsx(Shot, { slug: x.slug }), _jsxs(YStack, { p: "$3", gap: "$1", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { size: "$3", color: "$ink", numberOfLines: 1, flex: 1, children: busy === x.slug ? 'Copying…' : x.title }), x.framework ? (_jsx(SizableText, { size: "$1", color: "$soft", children: x.framework })) : null] }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 2, children: x.description })] })] }, x.slug))) })), _jsx(YStack, { pt: "$5", children: _jsxs(Out, { href: "https://gallery.hanzo.ai", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: "The whole catalog" }), _jsx(ExternalLink, { size: 12, opacity: 0.6 })] }) })] }) }));
 }

package/lib/switch.js

@@ -8,7 +8,6 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  */
 import { YStack } from '@hanzo/gui';
 import { MenuLabel, MenuRow, MenuRule, OrgSwitcher } from '@hanzo/ui/product';
-import { revealAccount } from './account.js';
 import { projects } from './api/projects.js';
 import { useRead } from './data.js';
 import { useHost, useTarget } from './host.js';
@@ -35,6 +34,6 @@ export function Where() {
                                     host.go(p.slug);
                                 } }, p.slug))) })] })) : null, _jsx(MenuRule, {}), _jsx(MenuRow, { label: "Settings", onPress: () => {
                         close();
-                        revealAccount();
+                        host.go('-/settings');
                     } })] })) }));
 }

package/lib/transcript.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import type { Card } from './api/turn.ts';
+export declare function Transcript({ cards, live, empty, header, onApprove, approving, }: {
+    cards: Card[];
+    /** The run is still working: a card still running shows it; otherwise it was cut off. */
+    live: boolean;
+    empty: ReactNode;
+    header?: ReactNode;
+    /** Build what a plan says. Absent, a plan has no button. */
+    onApprove?: (plan: string) => void;
+    approving?: boolean;
+}): import("react").JSX.Element;

package/lib/transcript.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A run's transcript, drawn by what each part is (turn.ts `cards`): what the
+ * agent said as markdown, each command it ran as a card that opens onto its
+ * output, the files it changed with their diff, the files it read as chips,
+ * the run's own steps, and a plan run's plan with the button that builds it.
+ *
+ * It follows the run to the bottom as it streams and stops when the reader
+ * scrolls up (Thread). Everything drawn is text.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { FileText } from '@hanzogui/lucide-icons-2';
+import { Button } from '@hanzo/ui';
+import { Code, Message, Step, Thread } from '@hanzo/ui/chat';
+import { Patch } from './git.js';
+import { Prose } from './prose.js';
+/** A card's output, its tail: what a command said last is why it stopped. */
+const TAIL = 6000;
+const tail = (s) => (s.length > TAIL ? `…${s.slice(-TAIL)}` : s);
+const mono = { fontFamily: 'var(--f-mono, ui-monospace, monospace)' };
+/** Consecutive reads draw as one row of chips. */
+function rows(cards) {
+    const out = [];
+    for (const c of cards) {
+        const last = out[out.length - 1];
+        if (c.kind === 'read' && Array.isArray(last))
+            last.push(c);
+        else
+            out.push(c.kind === 'read' ? [c] : c);
+    }
+    return out;
+}
+export function Transcript({ cards, live, empty, header, onApprove, approving = false, }) {
+    // A card the run never finished is cut off once the run has ended, not still going.
+    const state = (ran) => (ran === 'running' && !live ? 'cancelled' : ran);
+    return (_jsxs(Thread, { maxWidth: 0, gap: 14, column: { px: 0 }, "aria-label": "Transcript", children: [header, cards.length === 0 ? _jsx(YStack, { py: "$2", children: empty }) : null, rows(cards).map((row) => {
+                if (Array.isArray(row)) {
+                    return (_jsx(XStack, { gap: "$1.5", flexWrap: "wrap", children: row.map((r) => (_jsxs(XStack, { "aria-label": `Read ${r.file}`, items: "center", gap: "$1.5", px: "$2", py: "$1", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", maxW: "100%", children: [_jsx(FileText, { size: 12, color: "$soft" }), _jsx(SizableText, { size: "$1", color: "$soft", children: "Read" }), _jsx(SizableText, { size: "$1", color: "$ink", numberOfLines: 1, style: mono, children: r.file })] }, r.key))) }, row[0].key));
+                }
+                const c = row;
+                switch (c.kind) {
+                    case 'said':
+                        return c.who === 'person' ? (_jsx(Message, { role: "user", children: _jsx(SizableText, { size: "$3", color: "$ink", style: { whiteSpace: 'pre-wrap' }, children: c.text }) }, c.key)) : (_jsx(Message, { role: "assistant", children: _jsx(Prose, { text: c.text }) }, c.key));
+                    case 'shell':
+                        return (_jsx(Step, { name: "Shell", detail: c.command, status: state(c.ran), "aria-label": `Command ${c.command}`, children: _jsx(Code, { language: "shell", value: c.output ? `$ ${c.command}\n${c.output}` : `$ ${c.command}`, children: c.output ? `$ ${c.command}\n${tail(c.output)}` : `$ ${c.command}` }) }, c.key));
+                    case 'edit':
+                        return (_jsx(Step, { name: c.files.length === 1 ? 'Edited' : c.files.length ? `Edited ${c.files.length} files` : 'Edited files', detail: c.files.join(', '), status: state(c.ran), "aria-label": `Edited ${c.files.join(', ') || 'files'}`, children: c.patch ? (_jsx(YStack, { overflow: "scroll", maxH: 480, children: _jsx(Patch, { text: c.patch }) })) : (_jsx(SizableText, { size: "$1", color: "$soft", children: c.files.length ? c.files.join('\n') : 'The harness named no files.' })) }, c.key));
+                    case 'step':
+                        return (_jsx(Step, { name: c.name, detail: c.detail, status: state(c.ran), "aria-label": `${c.name} ${c.detail}`.trim(), children: c.output.trim() ? (_jsx(Code, { language: "output", value: c.output, children: tail(c.output.replace(/\n+$/, '')) })) : undefined }, c.key));
+                    case 'note':
+                        return (_jsx(SizableText, { size: "$1", color: "$soft", role: "note", children: c.text }, c.key));
+                    case 'plan':
+                        return (_jsxs(YStack, { gap: "$3", p: "$4", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", "aria-label": "Plan", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: "Plan" }), _jsx(Prose, { text: c.text }), onApprove ? (_jsx(XStack, { children: _jsx(Button, { size: "sm", disabled: approving, onPress: () => onApprove(c.text), children: approving ? 'Starting the build…' : 'Approve and build' }) })) : null] }, c.key));
+                }
+            })] }));
+}

package/lib/voice.d.ts

@@ -3,13 +3,15 @@ export declare const LANGUAGES: {
     id: string;
     label: string;
 }[];
+/** The language this browser is set to, when it is one dictation offers; English otherwise. */
+export declare function spoken(): string;
 export declare function useDictation(t: Target, onText: (text: string) => void, onNote: (note: string) => void): {
     on: boolean;
     busy: boolean;
     able: boolean;
     toggle: () => Promise<void>;
     language: string;
-    setLanguage: import("react").Dispatch<import("react").SetStateAction<string>>;
+    setLanguage: (id: string) => Promise<void>;
     languages: {
         id: string;
         label: string;