@hanzo/build 0.2.17 → 0.2.18

package/lib/ask.js

@@ -20,7 +20,7 @@ function useAct(onDone) {
             onDone();
         }
         catch (e) {
-            setNote(e instanceof Error ? e.message : 'That did not work');
+            setNote(e.message);
             setWorking(false);
         }
     };
@@ -63,7 +63,7 @@ export function Rename({ open, onOpenChange, title, name, run, }) {
         void go(() => run(next));
     };
     return (_jsx(Dialog, { open: open, onOpenChange: close, children: _jsxs(DialogContent, { maxW: 420, showCloseButton: false, children: [_jsx(DialogTitle, { children: title }), _jsx(Input, { autoFocus: true, value: value, onChangeText: setValue, "aria-label": "Name", onKeyDown: (e) => {
-                        if ((e.key ?? e.nativeEvent?.key) === 'Enter')
+                        if (e.key === 'Enter')
                             save();
                     } }), _jsx(Said, { note: note }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", disabled: working, onPress: () => close(false), children: "Cancel" }), _jsx(Button, { size: "sm", disabled: working, onPress: save, children: "Save" })] })] }) }));
 }

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 { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { pinBoard } from './choice.js';
 import { Customize } from './customize/index.js';
 import { useKept, useRecents } from './data.js';
@@ -49,6 +49,8 @@ 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();
@@ -75,7 +77,7 @@ function Shell() {
     // it the search that finds a run. The organization is the account's, so it is
     // switched from the account menu at the foot. Beside the rail from md up, beside
     // the drawer's button below it — one place at a time.
-    const name = (_jsx(XStack, { render: "button", "aria-label": "Hanzo Build", items: "center", onPress: () => go(''), children: _jsx(SizableText, { size: "$5", fontWeight: "600", color: "$ink", numberOfLines: 1, children: "Hanzo Build" }) }));
+    const name = _jsx(Name, { onPress: () => go('') });
     const links = [
         { id: 'projects', label: 'Projects', icon: _jsx(Kanban, { size: 16 }), onPress: () => go(path({ kind: 'screen', screen: 'projects' })), active: screen === 'projects' },
         { id: 'artifacts', label: 'Artifacts', icon: _jsx(Blocks, { size: 16 }), onPress: () => go(path({ kind: 'screen', screen: 'artifacts' })), active: screen === 'artifacts' },
@@ -115,6 +117,31 @@ function Shell() {
                             }
                             : { name: 'Sign in', onPress: () => host.signIn?.() }, collapsed: collapsed, onCollapse: setCollapsed, mark: _jsx(Brand, { org: host.org }), pt: collapsed ? undefined : 92, open: drawer, onOpenChange: setDrawer, label: "Runs" }), collapsed ? null : (_jsxs(YStack, { position: "absolute", t: 10, l: 8, r: 8, z: 2, gap: "$2.5", "$max-md": { display: 'none' }, children: [_jsx(XStack, { px: "$2.5", children: name }), _jsxs(XStack, { render: "button", "aria-label": "Search runs", onPress: () => setFinding(true), items: "center", gap: "$2", px: "$2.5", height: 34, rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", hoverStyle: { bg: '$hover' }, children: [_jsx(Search, { size: 15, color: "$soft" }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Search" })] })] })), host.person ? _jsx(Who, { open: menu, onOpenChange: setMenu, narrow: collapsed }) : null] }), _jsxs(YStack, { flex: 1, minW: 0, minH: 0, position: "relative", children: [_jsxs(XStack, { height: 44, px: "$2", gap: "$2", items: "center", shrink: 0, $md: { display: 'none' }, children: [_jsx(Button, { variant: "ghost", size: "icon-sm", onPress: () => setDrawer(true), "aria-label": "Open runs", children: _jsx(Menu, { size: 18 }) }), name, _jsx(XStack, { flex: 1 }), _jsx(Button, { variant: "ghost", size: "icon-sm", onPress: () => setFinding(true), "aria-label": "Search runs", children: _jsx(Search, { size: 18 }) })] }), _jsx(Pane, { onStarted: () => recents.reload() })] }), _jsx(Find, { open: finding, onOpenChange: setFinding, recents: rows, onOpen: (id) => { setFinding(false); go(id); } })] }));
 }
+/** The wordmark: the product's name, as its host calls it, which leads to New. */
+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();
@@ -143,7 +170,7 @@ function Pane({ onStarted }) {
 function Brand({ org }) {
     if (!org || org === 'hanzo')
         return _jsx(HanzoMark, { size: 18 });
-    const letter = org.trim().charAt(0).toUpperCase() || 'H';
+    const letter = org.charAt(0).toUpperCase();
     return (_jsx(XStack, { width: 18, height: 18, rounded: "$1", items: "center", justify: "center", bg: "$raised", "aria-hidden": true, children: _jsx(SizableText, { size: "$1", fontWeight: "600", color: "$ink", children: letter }) }));
 }
 function Screens({ rail }) {
@@ -151,7 +178,12 @@ function Screens({ rail }) {
     const r = route(host.path);
     if (r.kind === 'project')
         return _jsx(Project, { slug: r.slug }, r.slug);
-    return rail ? _jsx(Shell, {}) : _jsx(Pane, {});
+    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, {});
 }
 /**
  * The builder. Mount it under a gui root (`<Hanzo>`), in a box with a height.

package/lib/choice.js

@@ -29,7 +29,7 @@ function write(org, value) {
 /** Point New at a forge codebase, and optionally a first draft. */
 export function pinCodebase(org, c, ask = '') {
     const repo = asRepo(c);
-    write(org, { ...read(org), repo, branch: repo.default_branch || 'main', ask });
+    write(org, { ...read(org), repo, branch: repo.default_branch, ask });
 }
 /** Which board Issues is showing. '' is every board. */
 export function pinBoard(org, key) {
@@ -39,7 +39,7 @@ export function pinBoard(org, key) {
     catch {
         /* Issues then shows every board */
     }
-    window.dispatchEvent(new Event('hanzo-board'));
+    window.dispatchEvent(new CustomEvent('hanzo-board', { detail: key }));
 }
 export const isForge = (repo) => Boolean(repo && repo.forge === true && repo.name);
 const syncingKey = (org) => `hanzo.build.sync.${org ?? 'none'}`;

package/lib/data.js

@@ -32,7 +32,8 @@ export function useRead(load, initial, key) {
             setValue(v);
             setError(null);
         })
-            .catch((e) => live && setError(e instanceof Error ? e : new Error(String(e))))
+            // Every read goes through the platform's client, which refuses with an Error.
+            .catch((e) => live && setError(e))
             .finally(() => live && setLoading(false));
         return () => {
             live = false;
@@ -50,27 +51,28 @@ export function useRecents(t, signed) {
     const read = useRead(signed ? () => list(t, { kind: 'coding', limit: 50 }) : null, [], [t, signed]);
     const [rows, setRows] = useState([]);
     useEffect(() => setRows(read.value), [read.value]);
-    // A feed of the whole org carries every agent's heartbeat, so an unseen id
-    // re-reads the list at most every five seconds.
     const last = useRef(0);
-    const reload = useRef(() => { });
-    reload.current = () => {
-        const now = Date.now();
-        if (now - last.current < 5000)
-            return;
-        last.current = now;
-        read.reload();
-    };
+    // useRead's reload is the same function every render, so it never reopens the feed.
+    const again = read.reload;
     useEffect(() => {
         if (!signed)
             return;
+        // A feed of the whole org carries every agent's heartbeat, so an unseen id
+        // re-reads the list at most every five seconds.
+        const reload = () => {
+            const now = Date.now();
+            if (now - last.current < 5000)
+                return;
+            last.current = now;
+            again();
+        };
         const ctl = new AbortController();
         void watch(t, '', {
             session: (s) => setRows((prev) => {
                 const i = prev.findIndex((r) => r.id === s.id);
                 if (i === -1) {
                     // A run this list has not seen: re-read rather than guess its kind.
-                    reload.current();
+                    reload();
                     return prev;
                 }
                 const next = prev.slice();
@@ -79,13 +81,13 @@ export function useRecents(t, signed) {
             }),
             open: (n) => {
                 if (n > 0)
-                    reload.current();
+                    reload();
             },
         }, ctl.signal).catch(() => {
             /* a refused feed leaves the list as read */
         });
         return () => ctl.abort();
-    }, [t, signed]);
+    }, [t, signed, again]);
     return { ...read, value: rows };
 }
 export function usePlaces(t, signed) {
@@ -149,7 +151,7 @@ export function useRun(t, id) {
                 if (n > 0)
                     reload.current();
             },
-        }, ctl.signal).catch((e) => setRefused(e instanceof Error ? e.message : 'The feed was refused'));
+        }, ctl.signal).catch((e) => setRefused(e.message));
         return () => ctl.abort();
     }, [t, id]);
     // The read and the frames describe THIS run or nothing: a read kept from the

package/lib/find.js

@@ -44,7 +44,7 @@ export function Find({ open, onOpenChange, recents, onOpen, }) {
         })
             .catch((e) => {
             if (mine === asked.current)
-                setError(e instanceof Error ? e.message : 'The runs could not be read');
+                setError(e.message);
         })
             .finally(() => {
             if (mine === asked.current)
@@ -71,7 +71,7 @@ export function Find({ open, onOpenChange, recents, onOpen, }) {
         return n ? all.filter((h) => `${h.title} ${h.line}`.toLowerCase().includes(n)) : all;
     }, [q, rows, recents, status]);
     return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 520, children: [_jsx(DialogTitle, { children: "Find a run" }), _jsx(Input, { autoFocus: true, value: q, onChangeText: setQ, placeholder: "Search runs\u2026", "aria-label": "Search runs", onKeyDown: (e) => {
-                        if ((e.key ?? e.nativeEvent?.key) === 'Enter' && hits[0])
+                        if (e.key === 'Enter' && hits[0])
                             onOpen(hits[0].id);
                     } }), _jsx(XStack, { gap: "$1", flexWrap: "wrap", role: "group", "aria-label": "Status", children: FILTERS.map((f) => (_jsx(XStack, { render: "button", "aria-label": f.label, "aria-pressed": status === f.id, onPress: () => setStatus(f.id), px: "$2.5", py: "$1", rounded: "$10", borderWidth: 1, borderColor: status === f.id ? '$ink' : '$borderColor', bg: status === f.id ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, children: _jsx(SizableText, { size: "$1", color: status === f.id ? '$ink' : '$soft', children: f.label }) }, f.id || 'all'))) }), _jsx(ScrollView, { maxH: 360, children: _jsxs(YStack, { gap: "$1", role: "list", children: [hits.map((h) => (_jsxs(XStack, { role: "listitem", render: "button", "aria-label": h.title, onPress: () => onOpen(h.id), px: "$2", py: "$1.5", rounded: "$3", hoverStyle: { bg: '$hover' }, items: "center", gap: "$3", children: [_jsx(SizableText, { flex: 1, minW: 0, size: "$2", color: "$ink", numberOfLines: 1, style: { textAlign: 'left' }, children: h.title }), h.line ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, shrink: 0, maxW: "45%", children: h.line })) : null] }, h.id))), !loading && !error && hits.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", px: "$2", children: rows && next ? 'No run read so far matches.' : 'No run matches.' })) : null] }) }), error ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: error })) : null, loading ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: "Reading runs\u2026" })) : next ? (_jsx(XStack, { children: _jsx(Button, { size: "sm", variant: "outline", onPress: () => void read(next), children: "Older runs" }) })) : null] }) }));
 }

package/lib/forge.js

@@ -69,7 +69,7 @@ function Automations() {
             setTick((n) => n + 1);
         }
         catch (e) {
-            setProblem(e instanceof Error ? e.message : 'Could not change that automation');
+            setProblem(e.message);
         }
     };
     return (_jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", children: [_jsxs(YStack, { width: "100%", maxW: 1040, mx: "auto", gap: "$4", children: [_jsxs(XStack, { justify: "space-between", items: "flex-start", gap: "$4", children: [_jsxs(YStack, { gap: "$1", flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$6", fontWeight: "500", color: "$ink", children: "Automations" }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Repeating work for this organization. A new one starts off, so you can name it before it runs." })] }), _jsxs(Button, { size: "sm", shrink: 0, disabled: !signed, onPress: () => setMaking(true), children: [_jsx(Plus, { size: 14 }), "New automation"] })] }), _jsx(XStack, { justify: "flex-end", children: _jsx(YStack, { width: 240, maxW: "100%", children: _jsx(Input, { value: q, onChangeText: setQ, placeholder: "Search\u2026", "aria-label": "Search automations", disabled: !signed }) }) }), problem ? _jsx(Note, { children: problem }) : null, list.error ? (_jsx(Note, { children: list.error.message })) : !signed ? (_jsx(Empty, { says: "Sign in to see this organization's automations." })) : list.loading && list.value.length === 0 ? (_jsx(Empty, { says: "Reading automations\u2026" })) : shown.length === 0 ? (_jsx(Empty, { says: list.value.length === 0 ? 'No automations yet.' : 'Nothing matches.', children: list.value.length === 0 ? (_jsx(Button, { size: "sm", onPress: () => setMaking(true), children: "New automation" })) : null })) : (_jsxs(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: [_jsxs(XStack, { px: "$3", py: "$2", gap: "$3", children: [_jsx(SizableText, { flex: 1, size: "$1", color: "$soft", children: "Name" }), _jsx(SizableText, { size: "$1", color: "$soft", width: 80, style: { textAlign: 'right' }, children: "Status" }), _jsx(SizableText, { size: "$1", color: "$soft", width: 120, style: { textAlign: 'right' }, children: "Updated" })] }), shown.map((a) => (_jsxs(XStack, { items: "center", gap: "$3", px: "$3", py: "$2.5", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(Workflow, { size: 14 }), _jsx(SizableText, { flex: 1, size: "$2", color: "$ink", numberOfLines: 1, children: a.name }), _jsx(XStack, { render: "button", "aria-label": a.status === 'ENABLED' ? `Turn off ${a.name}` : `Turn on ${a.name}`, onPress: () => void flip(a), width: 80, justify: "flex-end", children: _jsx(SizableText, { size: "$1", color: "$ink", children: a.status === 'ENABLED' ? 'On' : 'Off' }) }), _jsx(SizableText, { size: "$1", color: "$soft", width: 120, style: { textAlign: 'right' }, children: a.updated ? when(new Date(a.updated).toISOString()) : '—' })] }, a.id)))] }))] }), _jsx(NewAutomation, { open: making, onOpenChange: setMaking, onCreate: async (name) => {
@@ -93,7 +93,7 @@ function NewAutomation({ open, onOpenChange, onCreate, }) {
             setName('');
         }
         catch (e) {
-            setError(e instanceof Error ? e.message : 'Could not create that automation');
+            setError(e.message);
         }
         finally {
             setBusy(false);
@@ -198,7 +198,7 @@ function NewRepo({ open, onOpenChange, onCreate, }) {
             setDescription('');
         }
         catch (e) {
-            setError(e instanceof Error ? e.message : 'Could not create that repository');
+            setError(e.message);
         }
         finally {
             setBusy(false);
@@ -240,20 +240,12 @@ function Issues() {
     const signed = Boolean(host.person);
     const [board, setBoard] = useKept(boardKey(host.org), '');
     const list = useRead(signed ? () => issues(t, board) : null, [], [t, signed, board]);
+    // Another screen chose the board (the rail's Issues chooses every board) while this one is open.
     useEffect(() => {
-        const on = () => {
-            try {
-                const raw = window.localStorage.getItem(boardKey(host.org));
-                const next = raw === null ? '' : JSON.parse(raw);
-                setBoard(typeof next === 'string' ? next : '');
-            }
-            catch {
-                setBoard('');
-            }
-        };
+        const on = (e) => setBoard(e.detail);
         window.addEventListener('hanzo-board', on);
         return () => window.removeEventListener('hanzo-board', on);
-    }, [host.org, setBoard]);
+    }, [setBoard]);
     const open = (w) => {
         const name = w.repo || w.project;
         if (name) {

package/lib/host.d.ts

@@ -17,6 +17,8 @@ export interface Person {
     avatar: string;
 }
 export interface Host {
+    /** The product's name, drawn at the top left: `Hanzo Build` on hanzo.build, `Hanzo` on hanzo.ai. */
+    name: string;
     /** The platform origin, no trailing slash. */
     api: string;
     /** The signed-in person's bearer, or null. Read at call time, so a refresh is picked up. */

package/lib/landing.js

@@ -41,6 +41,13 @@ 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: [] };
 export function Landing({ onStarted }) {
     const host = useHost();
     const t = useTarget();
@@ -50,8 +57,11 @@ 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 || '');
-    const [files, setFiles] = useState([]);
+    const [draft, setDraft] = useState(kept.ask || unsent.draft);
+    const [files, setFiles] = useState(unsent.files);
+    useEffect(() => {
+        unsent = { draft, files };
+    }, [draft, files]);
     const [busy, setBusy] = useState(false);
     const [note, setNote] = useState('');
     const [adding, setAdding] = useState(null);
@@ -81,18 +91,16 @@ export function Landing({ onStarted }) {
             known.current.set(r.name, r);
         return { repos, next: null };
     }, [t]);
+    // Drawn only once a forge codebase is chosen; one the forge no longer lists offers its default branch.
+    const home = kept.repo?.default_branch || 'main';
     const loadBranches = useCallback(async (q) => {
-        if (!kept.repo)
-            return { branches: [], next: null };
-        const found = await one(t, kept.repo.name);
+        const found = await one(t, codebase);
         const needle = q.trim().toLowerCase();
-        const names = (found?.branches ?? [kept.repo.default_branch || 'main']).filter((b) => !needle || b.toLowerCase().includes(needle));
+        const names = (found?.branches ?? [home]).filter((b) => !needle || b.toLowerCase().includes(needle));
         return { branches: names.map((name) => ({ name })), next: null };
-    }, [t, kept.repo]);
+    }, [t, codebase, home]);
+    // The composer sends only a draft with words in it, and not while a send is out.
     const send = async () => {
-        const prompt = draft.trim();
-        if (!prompt || busy)
-            return;
         if (!signed) {
             host.signIn?.();
             return;
@@ -105,11 +113,12 @@ export function Landing({ onStarted }) {
         setNote('');
         try {
             const run = await start(t, {
-                prompt: compose(prompt, files),
+                prompt: compose(draft.trim(), files),
                 // The name alone. The org rides the request, and a slash is not a repo name.
-                repo: isForge(kept.repo) ? kept.repo.name : undefined,
-                base: isForge(kept.repo) ? kept.branch || kept.repo.default_branch || undefined : undefined,
-                targetId: place.id || undefined,
+                // An empty base or place is not sent: the default branch, and the sandbox.
+                repo: kept.repo.name,
+                base: kept.branch,
+                targetId: place.id,
                 mode: kept.mode,
                 model: kept.model === ENSO ? undefined : kept.model,
                 effort: kept.effort,
@@ -119,7 +128,7 @@ export function Landing({ onStarted }) {
             onStarted(run.session);
         }
         catch (e) {
-            setNote(e instanceof Error ? e.message : 'The run could not start');
+            setNote(e.message);
         }
         finally {
             setBusy(false);
@@ -146,7 +155,7 @@ export function Landing({ onStarted }) {
         place: p,
     })), [places.value, setUp]);
     const branch = kept.branch || kept.repo?.default_branch || 'main';
-    const head = (_jsxs(XStack, { gap: 6, items: "center", flexWrap: "wrap", children: [_jsx(ChipSelect, { name: "Where the run runs", icon: place.id ? _jsx(Monitor, { size: 13 }) : _jsx(Cloud, { size: 13 }), label: place.id ? place.label : 'Cloud', chosen: placeItems.find((i) => i.place.id === place.id) ?? null, items: placeItems, onChange: (i) => set({ place: i.place.id }), placeholder: "Search machines\u2026", loading: places.loading, error: places.error?.message ?? null, footer: _jsxs(YStack, { gap: "$0.5", children: [_jsx(SizableText, { size: "$1", color: "$ink", children: "Set up remote control" }), _jsxs(SizableText, { size: "$1", color: "$soft", children: ["Run", ' ', _jsx(SizableText, { size: "$1", color: "$ink", style: { fontFamily: 'var(--f-mono, ui-monospace, monospace)' }, children: "hanzo link" }), ' ', "on a machine: it joins this list, and a run there uses its checkout and credentials."] })] }) }), _jsx(RepoSelect, { open: picking, onOpenChange: setPicking, value: isForge(kept.repo) ? kept.repo : null, onChange: (r) => {
+    const head = (_jsxs(XStack, { gap: 6, items: "center", flexWrap: "wrap", children: [_jsx(ChipSelect, { name: "Where the run runs", icon: place.id ? _jsx(Monitor, { size: 13 }) : _jsx(Cloud, { size: 13 }), label: place.id ? place.label : 'Cloud', chosen: placeItems.find((i) => i.place.id === place.id), items: placeItems, onChange: (i) => set({ place: i.place.id }), placeholder: "Search machines\u2026", loading: places.loading, error: places.error?.message ?? null, footer: _jsxs(YStack, { gap: "$0.5", children: [_jsx(SizableText, { size: "$1", color: "$ink", children: "Set up remote control" }), _jsxs(SizableText, { size: "$1", color: "$soft", children: ["Run", ' ', _jsx(SizableText, { size: "$1", color: "$ink", style: { fontFamily: 'var(--f-mono, ui-monospace, monospace)' }, children: "hanzo link" }), ' ', "on a machine: it joins this list, and a run there uses its checkout and credentials."] })] }) }), _jsx(RepoSelect, { open: picking, onOpenChange: setPicking, value: isForge(kept.repo) ? kept.repo : null, onChange: (r) => {
                     const row = known.current.get(r.name) ?? chosen(r);
                     set({ repo: row, branch: row.default_branch });
                 }, load: loadRepos, troubleshoot: {

package/lib/markdown.js

@@ -5,7 +5,8 @@ const RULE = /^\s{0,3}([-*_])(\s*\1){2,}\s*$/;
 const QUOTE = /^\s{0,3}>\s?(.*)$/;
 const ROW = /^\s*\|(.*)\|\s*$/;
 const DIVIDER = /^\s*\|?\s*:?-{3,}:?\s*(\|\s*:?-{3,}:?\s*)*\|?\s*$/;
-const cells = (line) => (ROW.exec(line)?.[1] ?? line).split('|').map((c) => c.trim());
+/** A table row's cells. Only a line ROW matched is one. */
+const cells = (line) => ROW.exec(line)[1].split('|').map((c) => c.trim());
 /** The blocks of a markdown text, in order. */
 export function blocks(md) {
     const lines = md.replace(/\r\n?/g, '\n').split('\n');
@@ -25,7 +26,7 @@ export function blocks(md) {
             i++;
             while (i < lines.length && !lines[i].trim().startsWith(fence[1]))
                 body.push(lines[i++]);
-            out.push({ kind: 'code', lang: fence[2] ?? '', text: body.join('\n') });
+            out.push({ kind: 'code', lang: fence[2], text: body.join('\n') });
             continue;
         }
         if (!line.trim()) {
@@ -78,7 +79,7 @@ export function blocks(md) {
                     continue;
                 }
                 // A line indented under an item continues it.
-                if (lines[j].trim() && /^\s{2,}/.test(lines[j]) && items.length) {
+                if (lines[j].trim() && /^\s{2,}/.test(lines[j])) {
                     items[items.length - 1].text += ` ${lines[j].trim()}`;
                     j++;
                     continue;
@@ -113,7 +114,8 @@ export function spans(text) {
             out.push({ kind: 'strong', text: (m[5] ?? m[6]) });
         else if (m[7] !== undefined || m[8] !== undefined)
             out.push({ kind: 'em', text: (m[7] ?? m[8]) });
-        else if (m[9] !== undefined)
+        // What is left is the bare address, the only other thing INLINE matches.
+        else
             out.push({ kind: 'link', text: m[9], href: m[9] });
         at = m.index + m[0].length;
     }

package/lib/pitch.d.ts

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

package/lib/pitch.js

@@ -0,0 +1,39 @@
+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/plans.js

@@ -37,6 +37,7 @@ export function Plans() {
     const [working, setWorking] = useState(false);
     const [note, setNote] = useState('');
     const on = current(subs.value);
+    const who = host.org ?? 'This organization';
     const card = chosen(cards.value);
     const yearly = list.value.some((p) => p.yearly > 0);
     const free = (p) => p.monthly === 0 && !p.sales;
@@ -51,7 +52,7 @@ export function Plans() {
             subs.reload();
         }
         catch (e) {
-            setNote(e instanceof Error ? e.message : 'That did not work');
+            setNote(e.message);
         }
         finally {
             setWorking(false);
@@ -73,10 +74,10 @@ export function Plans() {
         if (!settled)
             return null;
         if (free(p)) {
-            if (!on)
-                return null;
-            if (on.ending)
-                return _jsx(Line, { children: `You move to ${p.name} when ${on.name} ends on ${day(on.ends)}.` });
+            // A free plan that is not the org's means a paid one is.
+            const paid = on;
+            if (paid.ending)
+                return _jsx(Line, { children: `You move to ${p.name} when ${paid.name} ends on ${day(paid.ends)}.` });
             return (_jsx(Button, { size: "sm", variant: "outline", onPress: () => setLeaving(true), children: `Switch to ${p.name}` }));
         }
         if (on && on.price > 0)
@@ -89,17 +90,17 @@ export function Plans() {
     return (_jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", children: [_jsxs(YStack, { width: "100%", maxW: 1100, mx: "auto", px: "$5", py: "$5", gap: "$5", children: [_jsxs(XStack, { render: "button", "aria-label": "Back to billing", items: "center", gap: "$1", self: "flex-start", onPress: () => host.go(path({ kind: 'settings', section: 'billing' })), children: [_jsx(ChevronLeft, { size: 16 }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Billing" })] }), _jsxs(XStack, { items: "flex-end", gap: "$4", flexWrap: "wrap", children: [_jsxs(YStack, { flex: 1, minW: 240, gap: "$1", children: [_jsx(SizableText, { render: "h1", size: "$7", color: "$ink", children: "Plans that grow with you" }), _jsx(SizableText, { size: "$2", color: "$soft", children: !signed
                                             ? 'Sign in to see the plan you are on.'
                                             : on
-                                                ? `${host.org ?? 'This organization'} is on ${on.name}.`
-                                                : `${host.org ?? 'This organization'} is on the free plan.` })] }), yearly ? (_jsx(XStack, { role: "radiogroup", "aria-label": "Billing period", p: "$1", gap: "$1", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", children: ['month', 'year'].map((k) => (_jsx(XStack, { render: "button", role: "radio", "aria-checked": term === k, "aria-label": k === 'month' ? 'Monthly' : 'Yearly', onPress: () => setTerm(k), px: "$3", py: "$1.5", rounded: "$10", bg: term === k ? '$hover' : 'transparent', children: _jsx(SizableText, { size: "$2", color: term === k ? '$ink' : '$soft', children: k === 'month' ? 'Monthly' : 'Yearly' }) }, k))) })) : null] }), list.error ? (_jsx(Line, { children: list.error.message })) : list.loading && !list.value.length ? (_jsx(Line, { children: "Reading plans\u2026" })) : list.value.length === 0 ? (_jsx(Line, { children: "This brand sells no plans." })) : (_jsx(XStack, { flexWrap: "wrap", gap: "$4", children: list.value.map((p) => {
+                                                ? `${who} is on ${on.name}.`
+                                                : `${who} is on the free plan.` })] }), yearly ? (_jsx(XStack, { role: "radiogroup", "aria-label": "Billing period", p: "$1", gap: "$1", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", children: ['month', 'year'].map((k) => (_jsx(XStack, { render: "button", role: "radio", "aria-checked": term === k, "aria-label": k === 'month' ? 'Monthly' : 'Yearly', onPress: () => setTerm(k), px: "$3", py: "$1.5", rounded: "$10", bg: term === k ? '$hover' : 'transparent', children: _jsx(SizableText, { size: "$2", color: term === k ? '$ink' : '$soft', children: k === 'month' ? 'Monthly' : 'Yearly' }) }, k))) })) : null] }), list.error ? (_jsx(Line, { children: list.error.message })) : list.loading && !list.value.length ? (_jsx(Line, { children: "Reading plans\u2026" })) : list.value.length === 0 ? (_jsx(Line, { children: "This brand sells no plans." })) : (_jsx(XStack, { flexWrap: "wrap", gap: "$4", children: list.value.map((p) => {
                             const cost = price(p, term);
                             return (_jsxs(YStack, { "aria-label": `${p.name} plan`, flex: 1, minW: 240, maxW: 360, "$max-sm": { maxW: '100%' }, gap: "$3", p: "$4", rounded: "$4", borderWidth: 1, borderColor: mine(p) || p.popular ? '$ink' : '$borderColor', bg: "$panel", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { flex: 1, size: "$5", color: "$ink", children: p.name }), mine(p) ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "Current" })) : p.popular ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "Popular" })) : null] }), p.description ? (_jsx(SizableText, { size: "$2", color: "$soft", children: p.description })) : null, _jsxs(YStack, { gap: "$0.5", children: [_jsx(SizableText, { size: "$7", color: "$ink", children: p.sales ? 'Custom' : cost.month === 0 ? 'Free' : money(cost.month, p.currency) }), _jsx(SizableText, { size: "$1", color: "$soft", children: p.sales
                                                     ? 'Talk to us'
                                                     : cost.month === 0
                                                         ? 'Forever'
                                                         : `${p.perSeat ? 'per seat, ' : ''}a month${term === 'year' && p.yearly ? `, ${money(cost.now, p.currency)} billed yearly` : ''}` })] }), _jsx(XStack, { children: move(p) }), p.features.length ? (_jsx(YStack, { gap: "$2", borderTopWidth: 1, borderColor: "$borderColor", pt: "$3", children: p.features.map((f) => (_jsxs(XStack, { gap: "$2", items: "flex-start", children: [_jsx(YStack, { pt: 2, children: _jsx(Check, { size: 14 }) }), _jsx(SizableText, { flex: 1, size: "$2", color: "$soft", children: f })] }, f))) })) : null] }, p.id));
-                        }) })), note ? (_jsx(SizableText, { size: "$2", color: "$soft", role: "status", children: note })) : null] }), _jsx(Dialog, { open: Boolean(buying), onOpenChange: (o) => (o ? undefined : setBuying(null)), children: _jsxs(DialogContent, { maxW: 420, showCloseButton: false, children: [_jsx(DialogTitle, { children: buying ? `Upgrade to ${buying.name}` : 'Upgrade' }), buying && card ? (_jsxs(YStack, { gap: "$3", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: `${label(card)} is charged ${money(price(buying, term).now, buying.currency)} now, and again every ${term} until you cancel.` }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => setBuying(null), children: "Not now" }), _jsx(Button, { size: "sm", disabled: working, onPress: () => void act(async () => {
+                        }) })), note ? (_jsx(SizableText, { size: "$2", color: "$soft", role: "status", children: note })) : null] }), _jsx(Dialog, { open: Boolean(buying), onOpenChange: (o) => !o && setBuying(null), children: _jsxs(DialogContent, { maxW: 420, showCloseButton: false, children: [_jsx(DialogTitle, { children: buying ? `Upgrade to ${buying.name}` : 'Upgrade' }), buying && card ? (_jsxs(YStack, { gap: "$3", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: `${label(card)} is charged ${money(price(buying, term).now, buying.currency)} now, and again every ${term} until you cancel.` }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => setBuying(null), children: "Not now" }), _jsx(Button, { size: "sm", disabled: working, onPress: () => void act(async () => {
                                                 await subscribe(t, { plan: buying.id, interval: yearly && buying.yearly ? term : 'month', method: card.id });
-                                                return `${host.org ?? 'This organization'} is on ${buying.name}`;
+                                                return `${who} is on ${buying.name}`;
                                             }), children: "Upgrade" })] })] })) : null] }) }), _jsx(Dialog, { open: leaving, onOpenChange: setLeaving, children: _jsxs(DialogContent, { maxW: 420, showCloseButton: false, children: [_jsx(DialogTitle, { children: "Switch to the free plan?" }), on ? (_jsxs(YStack, { gap: "$3", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: `${on.name} stays on until ${day(on.ends) || 'the end of this period'}, and nothing is charged after that.` }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => setLeaving(false), children: `Keep ${on.name}` }), _jsx(Button, { size: "sm", variant: "destructive", disabled: working, onPress: () => void act(async () => {
                                                 await cancel(t, on.id);
                                                 return `${on.name} ends on ${day(on.ends)}`;