@hanzo/build 0.2.19 → 0.2.21

package/README.md

@@ -3,17 +3,25 @@
 Say what you want. Hanzo writes it, runs it, and puts it on a live URL — with
 the database, the sign-in and the storage already there.
 
-The builder is one component, `<Builder host={…} />` from `@hanzo/build`, with
-three hosts: this page (hanzo.build), and the Dev section of the Hanzo app at
-hanzo.ai/dev and hanzo.app/dev. None of them forks it. hanzo.build is this
-frontend. A click stays on this origin — sign-in returns to `/auth/callback`
-here — and github.com is opened only for the repository grant.
+The builder is one component, `<Builder host={…} />` from `@hanzo/build`. The
+Hanzo app at hanzo.ai mounts it as its Dev mode, and that is where people use
+it: hanzo.build and build.hanzo.ai redirect there, to the same place. This
+repository's own page is the development host — the same component, signed in
+through hanzo.id — and a click stays on its origin, with github.com opened only
+for the repository grant.
+
+The page is signed-in only. A visitor is drawn nothing: the tab goes to
+hanzo.id (no popup) and comes back to the address it asked for; hanzo.id
+answers at once, with no screen, for a person already signed in there. Words
+carried on arrival as `?q=` wait in New's composer, and a draft sent while
+signed out is sent once its person is in (`landing.tsx` `hold`). It signs in as
+`hanzo-app`, the Hanzo App's client.
 
 ```
 pnpm install
 pnpm dev            # http://localhost:3200
 pnpm test           # the transport contract and the address grammar
-pnpm site           # every screen of https://hanzo.build in a browser (SITE= for another origin)
+pnpm site           # every browser spec against the dev server (SITE= for another origin)
 pnpm e2e            # one live agent turn, projected the way a run draws it
 pnpm cover          # unit tests and every browser spec against a dev server, one coverage report in coverage/
 pnpm build:lib      # lib/ — what npm ships
@@ -100,7 +108,7 @@ collide.
 
 ## What is on the screen
 
-**The rail** (hanzo.build). At the top, the mark. Signed in to an organization,
+**The rail** (this page, or `rail` left on). At the top, the mark. Signed in to an organization,
 that spot is the organization switcher: the org, and the projects under it.
 New, Projects, Artifacts, Customize, Automations, then More (Codebase, Issues,
 Templates, Machines, Docs), then the org's coding runs newest first with a live

package/lib/api/billing.d.ts

@@ -18,6 +18,7 @@
  *   POST   /v1/billing/topup                     charge a saved card into the balance
  *   GET    /v1/billing/usage/rollup              the plan's month: included spend and request windows
  *   GET    /v1/usage/summary?range=month         this month's spend, by category
+ *   GET    /v1/allowance                         the Free plan's allowance, and the pool it is served from
  *   GET    /v1/billing/alerts                    spend caps (bare array)
  *   POST   /v1/billing/alerts                    open a cap (org admin)
  *   PATCH  /v1/billing/alerts/{id}               change one (org admin)
@@ -183,6 +184,35 @@ export interface Spend {
     }[];
 }
 export declare function spend(t: Target): Promise<Spend>;
+/** The pool every free user shares, as its vendor accounts last said. */
+export interface Pool {
+    /** available, busy or exhausted. */
+    state: string;
+    /** Accounts in the pool, and how many take a free request now. */
+    keys: number;
+    ready: number;
+    /** RFC 3339: when the first account that is out comes back; '' when none is out. */
+    resets: string;
+}
+/**
+ * What the caller has left of the Free plan: limited usage, from a pool shared
+ * by all free users. `pooled` is false for a paid plan, whose usage is its spend.
+ */
+export interface Allowance {
+    plan: string;
+    /** Requests allowed in `window`; 0 is no bound. */
+    limit: number;
+    used: number;
+    spent: boolean;
+    /** hour or day. */
+    window: string;
+    /** RFC 3339. */
+    resets: string;
+    pooled: boolean;
+    /** Absent when the platform could not read it. */
+    pool: Pool | null;
+}
+export declare function allowance(t: Target): Promise<Allowance>;
 export interface Cap {
     id: string;
     title: string;

package/lib/api/billing.js

@@ -18,6 +18,7 @@
  *   POST   /v1/billing/topup                     charge a saved card into the balance
  *   GET    /v1/billing/usage/rollup              the plan's month: included spend and request windows
  *   GET    /v1/usage/summary?range=month         this month's spend, by category
+ *   GET    /v1/allowance                         the Free plan's allowance, and the pool it is served from
  *   GET    /v1/billing/alerts                    spend caps (bare array)
  *   POST   /v1/billing/alerts                    open a cap (org admin)
  *   PATCH  /v1/billing/alerts/{id}               change one (org admin)
@@ -256,6 +257,21 @@ export async function spend(t) {
             .filter((c) => c.cents > 0),
     };
 }
+const stamp = (unix) => (num(unix) > 0 ? new Date(num(unix) * 1000).toISOString() : '');
+export async function allowance(t) {
+    const r = obj(await call(t, 'GET', '/v1/allowance'));
+    const p = r.pool && typeof r.pool === 'object' ? obj(r.pool) : null;
+    return {
+        plan: str(r.plan),
+        limit: num(r.limit),
+        used: num(r.used),
+        spent: r.spent === true,
+        window: str(r.window),
+        resets: stamp(r.resets),
+        pooled: r.pooled === true,
+        pool: p && str(p.state) ? { state: str(p.state), keys: num(p.keys), ready: num(p.ready), resets: stamp(p.resets) } : null,
+    };
+}
 export function cap(raw) {
     const a = obj(raw);
     return {

package/lib/builder.js

@@ -32,7 +32,7 @@ import { Blocks, BookOpen, CircleDot, Cpu, FolderGit2, Kanban, LayoutTemplate, M
 import { Button } from '@hanzo/ui';
 import { SessionRail } from '@hanzo/ui/chat';
 import { HanzoMark } from '@hanzo/ui/product';
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { pinBoard } from './choice.js';
 import { Customize } from './customize/index.js';
 import { useKept, useRecents } from './data.js';
@@ -49,8 +49,6 @@ import { Artifacts, Templates } from './shelf.js';
 import { Find } from './find.js';
 import { DOCS, Slack, Who } from './foot.js';
 import { Settings } from './settings/index.js';
-import { Pitch } from './pitch.js';
-import { Bar } from './visit.js';
 function Shell() {
     const host = useHost();
     const t = useTarget();
@@ -132,26 +130,6 @@ function Name({ onPress }) {
     const { name } = useHost();
     return (_jsx(XStack, { render: "button", "aria-label": name, items: "center", onPress: onPress, children: _jsx(SizableText, { size: "$5", fontWeight: "600", color: "$ink", numberOfLines: 1, children: name }) }));
 }
-/**
- * A visitor: no runs to list, so the product's header stands where the rail
- * would. On New the composer fills the first screen and the pitch follows it.
- */
-function Visit() {
-    const host = useHost();
-    const r = route(host.path);
-    // An address that names a part of the pitch (/#features) opens scrolled to it.
-    useEffect(() => {
-        const id = window.location.hash.slice(1);
-        if (id)
-            document.getElementById(id)?.scrollIntoView();
-    }, []);
-    const start = () => {
-        const page = document.getElementById('visit');
-        page?.scrollTo({ top: 0, behavior: 'smooth' });
-        page?.querySelector('textarea, [contenteditable="true"], input[type="text"]')?.focus();
-    };
-    return (_jsxs(YStack, { flex: 1, minH: 0, minW: 0, bg: "$background", children: [_jsx(Bar, { name: _jsx(Name, { onPress: () => host.go('') }) }), r.kind === 'new' ? (_jsxs(YStack, { id: "visit", flex: 1, minH: 0, overflow: "scroll", children: [_jsx(YStack, { shrink: 0, style: { height: 'calc(100dvh - 60px)' }, children: _jsx(Pane, {}) }), _jsx(Pitch, { onStart: start })] })) : (_jsx(Pane, {}))] }));
-}
 /** Whichever pane the address names, beside a rail — the builder's or the host's. */
 function Pane({ onStarted }) {
     const host = useHost();
@@ -190,9 +168,6 @@ function Screens({ rail }) {
         return _jsx(Project, { slug: r.slug }, r.slug);
     if (!rail)
         return _jsx(Pane, {});
-    // Signed out with no token to wait on: a token still resolving is a person, not a visitor.
-    if (!host.person && !host.token() && host.signIn)
-        return _jsx(Visit, {});
     return _jsx(Shell, {});
 }
 /**

package/lib/landing.d.ts

@@ -1,3 +1,4 @@
+import { type Attached } from './tools.tsx';
 /** One vocabulary for the mode, on New and in a workspace. */
 export declare const MODES: readonly [{
     readonly id: 'build';
@@ -18,6 +19,26 @@ export declare const EFFORTS: readonly [{
     readonly id: 'high';
     readonly label: 'High';
 }];
+/**
+ * What was typed here and not sent, kept in this tab.
+ *
+ * Signing in leaves the page for hanzo.id and comes back (app/enter.ts), and the
+ * sentence is still in the composer after. A draft its person SENT while signed
+ * out is sent on the return: pressing Send was the ask, and the sign-in stood
+ * between it and the run. Only this page writes `sent`, so no link can start a
+ * run on somebody's behalf — an address carrying words only fills the composer.
+ *
+ * sessionStorage, because a draft belongs to the tab it was typed in and not to
+ * the next person at this browser; a browser that refuses storage keeps it for
+ * the life of the page, as before.
+ */
+export interface Unsent {
+    draft: string;
+    files: Attached[];
+    sent?: boolean;
+}
+/** Hold what New has unsent, or forget it once there is nothing. */
+export declare function hold(u: Unsent): void;
 export declare function Landing({ onStarted }: {
     onStarted: (session: string) => void;
 }): import("react").JSX.Element;

package/lib/landing.js

@@ -44,13 +44,32 @@ export const EFFORTS = [
 ];
 const FIRST = { repo: null, branch: '', place: '', mode: 'build', model: ENSO, effort: 'medium', ask: '' };
 const COLUMN = 768;
-/**
- * What was typed here and not sent, for as long as this document lives. Signing
- * in swaps a visitor's page for the rail, which draws New again in another
- * place; the popup keeps the document so the sentence can come along, and this
- * is where it waits.
- */
-let unsent = { draft: '', files: [] };
+const UNSENT = 'hanzo.build.unsent';
+let held = { draft: '', files: [] };
+function unsent() {
+    try {
+        const v = JSON.parse(window.sessionStorage.getItem(UNSENT) ?? 'null');
+        if (v && typeof v.draft === 'string' && Array.isArray(v.files))
+            return v;
+    }
+    catch {
+        /* a browser that refuses storage, or a value that is not ours */
+    }
+    return held;
+}
+/** Hold what New has unsent, or forget it once there is nothing. */
+export function hold(u) {
+    held = u;
+    try {
+        if (!u.draft && !u.files.length)
+            window.sessionStorage.removeItem(UNSENT);
+        else
+            window.sessionStorage.setItem(UNSENT, JSON.stringify(u));
+    }
+    catch {
+        /* kept for the life of the page */
+    }
+}
 export function Landing({ onStarted }) {
     const host = useHost();
     const t = useTarget();
@@ -60,11 +79,10 @@ export function Landing({ onStarted }) {
     // Nothing chosen here yet: start from the person's coding defaults (Settings → Code).
     const kept = stored ?? { ...FIRST, ...prefs.code };
     const set = (patch) => keep({ ...kept, ...patch });
-    const [draft, setDraft] = useState(kept.ask || unsent.draft);
-    const [files, setFiles] = useState(unsent.files);
-    useEffect(() => {
-        unsent = { draft, files };
-    }, [draft, files]);
+    const [was] = useState(unsent);
+    const [draft, setDraft] = useState(kept.ask || was.draft);
+    const [files, setFiles] = useState(was.files);
+    useEffect(() => hold({ draft, files }), [draft, files]);
     const [busy, setBusy] = useState(false);
     const [note, setNote] = useState('');
     const [adding, setAdding] = useState(null);
@@ -105,6 +123,7 @@ export function Landing({ onStarted }) {
     // The composer sends only a draft with words in it, and not while a send is out.
     const send = async () => {
         if (!signed) {
+            hold({ draft, files, sent: true });
             host.signIn?.();
             return;
         }
@@ -139,6 +158,16 @@ export function Landing({ onStarted }) {
             setBusy(false);
         }
     };
+    // A draft sent while signed out goes once its person is in, and only once.
+    const owed = useRef(was.sent === true);
+    useEffect(() => {
+        if (!signed || !owed.current || !draft.trim())
+            return;
+        owed.current = false;
+        void send();
+        // Sent once, on the sign-in that it waited for.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [signed]);
     /** Start the agent that finds this codebase's environment, and open it. A refusal is the dialog's to say. */
     const setup = async () => {
         const run = await start(t, { prompt: SETUP, repo: codebase, mode: 'setup' });

package/lib/settings/usage.js

@@ -8,7 +8,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 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 { allowance, 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';
@@ -40,11 +40,21 @@ function resets(iso) {
         return `Resets in ${Math.floor(mins / 60)} hr ${mins % 60} min`;
     return `Resets ${day(iso)}`;
 }
+const POOL = { available: 'Available', busy: 'Busy', exhausted: 'Exhausted' };
+/** `Refills at 16:00 UTC`, for a window or the pool: the UTC time it opens again, with the date when not today. */
+function refills(iso) {
+    const at = iso ? new Date(iso) : null;
+    if (!at || Number.isNaN(at.getTime()))
+        return '';
+    const hhmm = `${String(at.getUTCHours()).padStart(2, '0')}:${String(at.getUTCMinutes()).padStart(2, '0')} UTC`;
+    return at.toISOString().slice(0, 10) === new Date().toISOString().slice(0, 10) ? `Refills at ${hhmm}` : `Refills ${day(iso)}, ${hhmm}`;
+}
 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 free = useRead(signed ? () => allowance(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]);
@@ -103,7 +113,7 @@ export function Usage() {
             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: adding ? `Add ${money(adding)}` : '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']
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Usage", detail: `What ${host.org ?? 'this organization'} has used, has left, and may spend.` }), free.value?.pooled && free.value.limit > 0 ? (_jsx(Group, { title: "Free plan", detail: "Free \u2014 limited usage, from a pool shared by all free users.", action: _jsx(Button, { size: "sm", variant: "outline", onPress: () => host.go(path({ kind: 'screen', screen: 'plans' })), children: "Upgrade" }), children: _jsxs(Card, { children: [_jsx(Meter, { first: true, title: `${Math.max(0, free.value.limit - free.value.used).toLocaleString()} of ${free.value.limit.toLocaleString()} left ${free.value.window === 'hour' ? 'this hour' : free.value.window === 'day' ? 'today' : 'this period'}`, used: free.value.used, of: free.value.limit, says: [`${free.value.used.toLocaleString()} used`, refills(free.value.resets)].filter(Boolean).join(' · ') }), free.value.pool ? (_jsx(Row, { title: "Shared pool", detail: `${free.value.pool.ready} of ${free.value.pool.keys} accounts serving${free.value.pool.state === 'exhausted' && refills(free.value.pool.resets) ? ` · ${refills(free.value.pool.resets)}` : ''}`, trailing: _jsx(SizableText, { size: "$2", color: free.value.pool.state === 'exhausted' ? '$red10' : '$ink', children: POOL[free.value.pool.state] ?? free.value.pool.state }) })) : null] }) })) : null, _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: adding ? `Add ${money(adding)}` : '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 })] }));
 }

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@hanzo/build",
-  "version": "0.2.19",
+  "version": "0.2.21",
   "type": "module",
   "license": "Apache-2.0 OR MIT",
-  "description": "Hanzo Build — say what you want, watch it built, deployed and running. The builder as a page (hanzo.build) and as a component (hanzo.ai/dev).",
+  "description": "Hanzo Build — say what you want, watch it built, deployed and running. The builder as a component, mounted by the Hanzo app at hanzo.ai.",
   "engines": {
     "node": ">=22.18"
   },

package/lib/pitch.d.ts

@@ -1,4 +0,0 @@
-export declare const INSTALL = "curl -fsSL hanzo.sh | sh";
-export declare function Pitch({ onStart }: {
-    onStart: () => void;
-}): import("react").JSX.Element;

package/lib/pitch.js

@@ -1,39 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * What a visitor reads under New on hanzo.build: the same agent on their own
- * computer, one line to install, and what it brings to a run. Each card names
- * something this page or the CLI does today, and nothing it does not.
- */
-import { SizableText, XStack, YStack } from '@hanzo/gui';
-import { Check, Copy, GitPullRequest, LayoutTemplate, ListChecks, MonitorPlay, Plug, Server, Sparkles, Workflow } from '@hanzogui/lucide-icons-2';
-import { Button } from '@hanzo/ui';
-import { useState } from 'react';
-import { DOCS } from './foot.js';
-export const INSTALL = 'curl -fsSL hanzo.sh | sh';
-const FEATURES = [
-    { icon: _jsx(Sparkles, { size: 18 }), title: 'Skills', body: 'Teach it a workflow once. A skill loads when a task matches, or when you call it by name.' },
-    { icon: _jsx(ListChecks, { size: 18 }), title: 'Plan first', body: 'Start a run in plan mode. Nothing is built until you approve the plan.' },
-    { icon: _jsx(Plug, { size: 18 }), title: 'Connectors and plugins', body: 'MCP servers, skills and agents behind one install. Your org’s credentials reach a run through a relay, never the sandbox.' },
-    { icon: _jsx(Server, { size: 18 }), title: 'Environments', body: 'Point it at a repository. An agent works out install and start, and every later run begins from that setup.' },
-    { icon: _jsx(MonitorPlay, { size: 18 }), title: 'Desktop and terminal', body: 'Watch each run’s browser and shell live, beside the conversation.' },
-    { icon: _jsx(GitPullRequest, { size: 18 }), title: 'Review', body: 'Every run ends as a diff on its own branch, with commits and a pull request to review.' },
-    { icon: _jsx(LayoutTemplate, { size: 18 }), title: 'Templates to live', body: 'Start from a working app and publish it to a live address.' },
-    { icon: _jsx(Workflow, { size: 18 }), title: 'Automations', body: 'Hand it repeating work, and it runs on your schedule.' },
-];
-/** One line to copy, with a button that copies it. */
-function Line({ text }) {
-    const [copied, setCopied] = useState(false);
-    const copy = () => {
-        void navigator.clipboard.writeText(text).then(() => {
-            setCopied(true);
-            setTimeout(() => setCopied(false), 1500);
-        });
-    };
-    return (_jsxs(XStack, { items: "center", gap: "$3", px: "$4", height: 52, rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", width: "100%", maxW: 560, children: [_jsx(SizableText, { size: "$3", color: "$soft", fontFamily: "$mono", "aria-hidden": true, children: "$" }), _jsx(SizableText, { flex: 1, size: "$3", color: "$ink", fontFamily: "$mono", numberOfLines: 1, children: text }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": copied ? 'Copied' : 'Copy the install command', onPress: copy, children: copied ? _jsx(Check, { size: 16 }) : _jsx(Copy, { size: 16 }) })] }));
-}
-function Card({ icon, title, body }) {
-    return (_jsxs(YStack, { gap: "$2", p: "$5", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", flex: 1, minW: 240, children: [_jsxs(XStack, { items: "center", gap: "$2.5", children: [icon, _jsx(SizableText, { size: "$4", fontWeight: "600", color: "$ink", children: title })] }), _jsx(SizableText, { size: "$3", color: "$soft", children: body })] }));
-}
-export function Pitch({ onStart }) {
-    return (_jsxs(YStack, { items: "center", px: "$4", pb: "$12", gap: "$12", children: [_jsxs(YStack, { id: "features", width: "100%", maxW: 1080, items: "center", gap: "$5", pt: "$6", children: [_jsx(SizableText, { size: "$2", color: "$soft", fontFamily: "$mono", children: "Powered by Zen 6 \u00B7 routed by Enso" }), _jsx(SizableText, { role: "heading", "aria-level": 2, size: "$9", color: "$ink", style: { textAlign: 'center' }, children: "Hanzo Dev" }), _jsx(SizableText, { size: "$4", color: "$soft", maxW: 620, style: { textAlign: 'center' }, children: "The agent. It runs in your terminal, on any codebase, in any language. This page is that same agent in the browser." }), _jsx(Line, { text: INSTALL }), _jsx(SizableText, { size: "$2", color: "$soft", fontFamily: "$mono", children: "dev opens it. dev \"fix the failing test\" hands it a task." }), _jsx("a", { href: DOCS, style: { color: 'inherit', textDecoration: 'none' }, children: _jsx(XStack, { items: "center", height: 34, px: "$3", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: _jsx(SizableText, { size: "$3", color: "$ink", children: "Read the docs" }) }) })] }), _jsxs(YStack, { width: "100%", maxW: 1080, gap: "$5", children: [_jsx(SizableText, { role: "heading", "aria-level": 2, size: "$7", color: "$ink", children: "Everything a run needs" }), _jsx(XStack, { flexWrap: "wrap", gap: "$3", children: FEATURES.map((f) => (_jsx(Card, { ...f }, f.title))) })] }), _jsxs(YStack, { width: "100%", maxW: 1080, items: "center", gap: "$4", py: "$8", rounded: "$6", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", children: [_jsx(SizableText, { role: "heading", "aria-level": 2, size: "$7", color: "$ink", style: { textAlign: 'center' }, children: "Say what you want built." }), _jsx(SizableText, { size: "$3", color: "$soft", style: { textAlign: 'center' }, px: "$4", children: "In the browser here, or in your terminal." }), _jsx(Button, { variant: "primary", size: "sm", onPress: onStart, children: "Start building" })] })] }));
-}

package/lib/visit.d.ts

@@ -1,31 +0,0 @@
-import { type ReactNode } from 'react';
-export declare const PLACES: readonly [{
-    readonly label: 'Download';
-    readonly href: '/#features';
-}, {
-    readonly label: 'Enterprise';
-    readonly href: "https://hanzo.ai/enterprise";
-}, {
-    readonly label: 'Pricing';
-    readonly href: "https://hanzo.ai/pricing";
-}];
-export declare const RESOURCES: readonly [{
-    readonly label: 'Docs';
-    readonly href: 'https://docs.hanzo.ai';
-}, {
-    readonly label: 'Blog';
-    readonly href: "https://hanzo.ai/blog";
-}, {
-    readonly label: 'Customers';
-    readonly href: "https://hanzo.ai/customers";
-}, {
-    readonly label: 'Learn';
-    readonly href: "https://hanzo.ai/learn";
-}, {
-    readonly label: 'Support';
-    readonly href: "https://hanzo.ai/support";
-}];
-/** The header a visitor sees. `name` is the wordmark the rail shows once signed in. */
-export declare function Bar({ name }: {
-    name: ReactNode;
-}): import("react").JSX.Element;

package/lib/visit.js

@@ -1,53 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * The page to a visitor: the product's header over New.
- *
- * Signed out there are no runs to list, so the rail gives way to a header —
- * Download (Hanzo Dev, under New, pitch.tsx), Resources, Enterprise, Pricing — and the two
- * doors in, which are one door: IAM's page offers both. New stays the page, and
- * sending from it asks the visitor to sign in with the sentence kept
- * (landing.tsx). Below md the four places fold into one menu beside Log in.
- */
-import { Popover, SizableText, XStack, YStack } from '@hanzo/gui';
-import { ChevronDown, Menu } from '@hanzogui/lucide-icons-2';
-import { Button } from '@hanzo/ui';
-import { MenuLabel, MenuRow, MenuRule } from '@hanzo/ui/product';
-import { useState } from 'react';
-import { useHost } from './host.js';
-const SITE = 'https://hanzo.ai';
-export const PLACES = [
-    { label: 'Download', href: '/#features' },
-    { label: 'Enterprise', href: `${SITE}/enterprise` },
-    { label: 'Pricing', href: `${SITE}/pricing` },
-];
-export const RESOURCES = [
-    { label: 'Docs', href: 'https://docs.hanzo.ai' },
-    { label: 'Blog', href: `${SITE}/blog` },
-    { label: 'Customers', href: `${SITE}/customers` },
-    { label: 'Learn', href: `${SITE}/learn` },
-    { label: 'Support', href: `${SITE}/support` },
-];
-const leave = (href) => window.location.assign(href);
-/** One place in the header: an address, drawn as text. */
-function Place({ href, children }) {
-    return (_jsx("a", { href: href, style: { color: 'inherit', textDecoration: 'none' }, children: _jsx(XStack, { items: "center", height: 34, px: "$2.5", rounded: "$3", hoverStyle: { bg: '$hover' }, children: _jsx(SizableText, { size: "$3", color: "$ink", children: children }) }) }));
-}
-function Resources() {
-    const [open, setOpen] = useState(false);
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, placement: "bottom-start", offset: 6, children: [_jsx(Popover.Trigger, { asChild: true, children: _jsxs(XStack, { render: "button", "aria-label": "Resources", "aria-expanded": open, items: "center", gap: "$1", height: 34, px: "$2.5", rounded: "$3", hoverStyle: { bg: '$hover' }, children: [_jsx(SizableText, { size: "$3", color: "$ink", children: "Resources" }), _jsx(ChevronDown, { size: 14, color: "$soft" })] }) }), _jsx(Popover.Content, { role: "menu", "aria-label": "Resources", items: "stretch", borderWidth: 1, elevation: "$2", p: "$1", width: 220, bg: "$panel", borderColor: "$borderColor", children: _jsx(YStack, { gap: "$1", children: RESOURCES.map((r) => (_jsx(MenuRow, { label: r.label, onPress: () => leave(r.href) }, r.label))) }) })] }));
-}
-/** Below md: every place, the resources and the door, in one menu. */
-function Fold({ onEnter }) {
-    const [open, setOpen] = useState(false);
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, placement: "bottom-end", offset: 6, stayInFrame: true, children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Menu", children: _jsx(Menu, { size: 18 }) }) }), _jsx(Popover.Content, { role: "menu", "aria-label": "Menu", items: "stretch", borderWidth: 1, elevation: "$2", p: "$1", width: 260, bg: "$panel", borderColor: "$borderColor", children: _jsxs(YStack, { gap: "$1", children: [PLACES.map((p) => (_jsx(MenuRow, { label: p.label, onPress: () => leave(p.href) }, p.label))), _jsx(MenuRule, {}), _jsx(MenuLabel, { children: "Resources" }), RESOURCES.map((r) => (_jsx(MenuRow, { label: r.label, onPress: () => leave(r.href) }, r.label))), _jsx(MenuRule, {}), _jsx(MenuRow, { label: "Sign up", onPress: () => {
-                                setOpen(false);
-                                onEnter();
-                            } })] }) })] }));
-}
-/** The header a visitor sees. `name` is the wordmark the rail shows once signed in. */
-export function Bar({ name }) {
-    const host = useHost();
-    const enter = () => host.signIn?.();
-    const [features, enterprise, pricing] = PLACES;
-    return (_jsxs(XStack, { role: "banner", height: 60, px: "$4", gap: "$2", items: "center", shrink: 0, $md: { px: '$6' }, children: [name, _jsxs(XStack, { role: "navigation", "aria-label": "Site", items: "center", gap: "$1", ml: "$4", "$max-md": { display: 'none' }, children: [_jsx(Place, { href: features.href, children: features.label }), _jsx(Resources, {}), _jsx(Place, { href: enterprise.href, children: enterprise.label }), _jsx(Place, { href: pricing.href, children: pricing.label })] }), _jsx(XStack, { flex: 1 }), _jsx(Button, { variant: "ghost", size: "sm", onPress: enter, children: "Log in" }), _jsx(XStack, { "$max-md": { display: 'none' }, children: _jsx(Button, { size: "sm", variant: "primary", onPress: enter, children: "Sign up" }) }), _jsx(XStack, { $md: { display: 'none' }, children: _jsx(Fold, { onEnter: enter }) })] }));
-}