@hanzo/build 0.2.17 → 0.2.19

package/README.md

@@ -193,7 +193,7 @@ picker and open-in-tab; Share and Publish; the console dock under it.
 
 | call | what |
 |---|---|
-| `POST /v1/agent/coding` | start a run → 202 `{sessionId, …}` |
+| `POST /v1/agent/coding` | start a run → 202 `{sessionId, …}`; with no `repo` the platform starts a new project named from the ask |
 | `GET /v1/agent/sessions?kind=coding` | Recents, and a project's runs |
 | `GET /v1/agent/sessions/{id}` · `GET /v1/agent/sessions/stream?root=` | a run, and its live feed (SSE over fetch) |
 | `POST /v1/agent/sessions/{id}/message` · `/pause` · `/resume` · `/stop` | steer, pause, resume a machine's run, stop |

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.d.ts

@@ -1,4 +1,14 @@
+import { type RailLink } from '@hanzo/ui/chat';
 import { type Host } from './host.tsx';
+/**
+ * The builder's places, as a rail draws them: four in view and the rest under
+ * More. Every one moves the builder through `go`, so a host that draws its own
+ * rail lists the same places, in the same words, as the builder's rail does.
+ */
+export declare function nav(host: Host, go: (path: string) => void): {
+    links: RailLink[];
+    more: RailLink[];
+};
 /**
  * The builder. Mount it under a gui root (`<Hanzo>`), in a box with a height.
  *

package/lib/builder.js

@@ -24,15 +24,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * bar and panes — and its mark leads back here.
  *
  * A host with a rail of its own mounts `<Builder rail={false}>` and draws the
- * builder's places and runs in that rail with `DevSection` (section.tsx): one
- * left column, never two.
+ * builder's places (`nav`) and runs in that rail (`useSessions`, or `DevSection`,
+ * section.tsx): one left column, never two.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
 import { Blocks, BookOpen, CircleDot, Cpu, FolderGit2, Kanban, LayoutTemplate, Menu, Search, SlidersHorizontal, Workflow } from '@hanzogui/lucide-icons-2';
 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();
@@ -70,12 +72,31 @@ function Shell() {
             list.sort((a, b) => Number(b.status === 'running') - Number(a.status === 'running'));
         return list;
     }, [recents.value, order]);
-    const screen = r.kind === 'screen' ? r.screen : '';
     // The top left, as on claude.ai: the builder's name, which leads to New, and under
     // 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, more } = nav(host, go);
+    return (_jsxs(XStack, { flex: 1, minH: 0, minW: 0, bg: "$background", children: [_jsxs(YStack, { position: "relative", shrink: 0, children: [_jsx(SessionRail, { onNew: () => go(''), fresh: r.kind === 'new', links: links, more: more, recents: rows, active: r.kind === 'run' ? r.id : null, onOpen: (id) => go(id), onSort: () => setOrder(order === 'newest' ? 'running' : 'newest'), sortLabel: order === 'newest' ? 'Show running first' : 'Show newest first', empty: _jsx(SizableText, { size: "$1", color: "$soft", px: "$2", children: !host.person ? 'Sign in to see your runs.' : recents.error ? recents.error.message : recents.loading ? 'Reading…' : 'No runs yet.' }), notice: host.person && !slack ? (_jsx(Slack, { onOpen: () => go(path({ kind: 'settings', section: 'integrations' })), onDismiss: () => setSlack(true) })) : undefined, account: host.person
+                            ? {
+                                // Who, and in which organization, as claude.ai says who and on which plan.
+                                name: [host.person.name || host.person.email, host.org].filter(Boolean).join(' · '),
+                                onPress: () => {
+                                    setDrawer(false);
+                                    setMenu(true);
+                                },
+                            }
+                            : { 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 builder's places, as a rail draws them: four in view and the rest under
+ * More. Every one moves the builder through `go`, so a host that draws its own
+ * rail lists the same places, in the same words, as the builder's rail does.
+ */
+export function nav(host, go) {
+    const r = route(host.path);
+    const screen = r.kind === 'screen' ? r.screen : '';
     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' },
@@ -104,16 +125,32 @@ function Shell() {
         },
         { id: 'docs', label: 'Docs', icon: _jsx(BookOpen, { size: 16 }), onPress: () => window.open(DOCS, '_blank', 'noopener,noreferrer') },
     ];
-    return (_jsxs(XStack, { flex: 1, minH: 0, minW: 0, bg: "$background", children: [_jsxs(YStack, { position: "relative", shrink: 0, children: [_jsx(SessionRail, { onNew: () => go(''), fresh: r.kind === 'new', links: links, more: more, recents: rows, active: r.kind === 'run' ? r.id : null, onOpen: (id) => go(id), onSort: () => setOrder(order === 'newest' ? 'running' : 'newest'), sortLabel: order === 'newest' ? 'Show running first' : 'Show newest first', empty: _jsx(SizableText, { size: "$1", color: "$soft", px: "$2", children: !host.person ? 'Sign in to see your runs.' : recents.error ? recents.error.message : recents.loading ? 'Reading…' : 'No runs yet.' }), notice: host.person && !slack ? (_jsx(Slack, { onOpen: () => go(path({ kind: 'settings', section: 'integrations' })), onDismiss: () => setSlack(true) })) : undefined, account: host.person
-                            ? {
-                                // Who, and in which organization, as claude.ai says who and on which plan.
-                                name: [host.person.name || host.person.email, host.org].filter(Boolean).join(' · '),
-                                onPress: () => {
-                                    setDrawer(false);
-                                    setMenu(true);
-                                },
-                            }
-                            : { 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); } })] }));
+    return { links, more };
+}
+/** 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 }) {
@@ -143,7 +180,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 +188,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/index.d.ts

@@ -3,12 +3,16 @@
  *
  * Mount `<Builder host={…} />` under a gui root in a box with a height. The
  * host says where the platform is, who is signed in, and how to move; the
- * builder does everything else. hanzo.build hosts it whole; hanzo.ai and the
- * Hanzo App mount it at /dev with `rail={false}` and list its places and runs in
- * their own rail with `DevSection`.
+ * builder does everything else. hanzo.build hosts it whole. A host with a rail
+ * of its own mounts it with `rail={false}` and draws the builder's parts in that
+ * rail: its places (`nav`), its runs (`useSessions`, or `DevSection` for both),
+ * and at the foot the Slack card and the account menu (`Slack`, `Who`), under
+ * `HostProvider`.
  */
-export { Builder } from './builder.tsx';
+export { Builder, nav } from './builder.tsx';
 export { DevSection, DOTS, useSessions } from './section.tsx';
+export { HostProvider } from './host.tsx';
+export { Slack, Who } from './foot.tsx';
 export { administers } from './claims.ts';
 export type { Host, Person } from './host.tsx';
 export type { Session, Status } from './api/sessions.ts';

package/lib/index.js

@@ -3,11 +3,15 @@
  *
  * Mount `<Builder host={…} />` under a gui root in a box with a height. The
  * host says where the platform is, who is signed in, and how to move; the
- * builder does everything else. hanzo.build hosts it whole; hanzo.ai and the
- * Hanzo App mount it at /dev with `rail={false}` and list its places and runs in
- * their own rail with `DevSection`.
+ * builder does everything else. hanzo.build hosts it whole. A host with a rail
+ * of its own mounts it with `rail={false}` and draws the builder's parts in that
+ * rail: its places (`nav`), its runs (`useSessions`, or `DevSection` for both),
+ * and at the foot the Slack card and the account menu (`Slack`, `Who`), under
+ * `HostProvider`.
  */
-export { Builder } from './builder.js';
+export { Builder, nav } from './builder.js';
 export { DevSection, DOTS, useSessions } from './section.js';
+export { HostProvider } from './host.js';
+export { Slack, Who } from './foot.js';
 export { administers } from './claims.js';
 export { path, route, SESSION, SLUG } from './route.js';

package/lib/landing.js

@@ -6,8 +6,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * which repository and branch it starts from, and the ask itself.
  * Under it: attach, dictate, the mode, and the model and effort on the right.
  *
- * Sending starts a coding run and opens it. The choices a person made here are
- * kept in this browser, per org, so the next New starts where the last one did.
+ * Sending starts a coding run and opens it. The codebase is optional: in the
+ * sandbox a run with none starts a new project named from the ask, as the
+ * platform does for a run that names no repository; a machine works in its own
+ * checkout, so a run there names one. The choices a person made here are kept in
+ * this browser, per org, so the next New starts where the last one did.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
 import { Cloud, Monitor } from '@hanzogui/lucide-icons-2';
@@ -41,6 +44,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 +60,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,35 +94,36 @@ 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;
         }
-        if (!isForge(kept.repo)) {
-            setNote('Choose a codebase on the forge.');
+        const repo = isForge(kept.repo) ? kept.repo : null;
+        if (!repo && place.id) {
+            setNote(`A run on ${place.label} works in its own checkout: choose the codebase, or run it in Cloud.`);
             return;
         }
         setBusy(true);
         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,
+                // No codebase is not sent, and the run starts a new project.
+                // An empty base or place is not sent: the default branch, and the sandbox.
+                repo: repo?.name,
+                base: repo ? kept.branch : undefined,
+                targetId: place.id,
                 mode: kept.mode,
                 model: kept.model === ENSO ? undefined : kept.model,
                 effort: kept.effort,
@@ -119,7 +133,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 +160,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: {
@@ -163,7 +177,7 @@ export function Landing({ onStarted }) {
                             name: r.name,
                         });
                     },
-                }, placeholder: "Codebase", disabled: !signed }, round), isForge(kept.repo) ? _jsx(BranchSelect, { value: branch, onChange: (b) => set({ branch: b }), load: loadBranches }) : null, _jsx(Files, { files: files, onFiles: setFiles })] }));
+                }, placeholder: "New project", disabled: !signed }, round), isForge(kept.repo) ? _jsx(BranchSelect, { value: branch, onChange: (b) => set({ branch: b }), load: loadBranches }) : null, _jsx(Files, { files: files, onFiles: setFiles })] }));
     const foot = (_jsxs(XStack, { flex: 1, items: "center", gap: "$2", flexWrap: "wrap", rowGap: "$1", children: [_jsx(Attach, { files: files, onFiles: setFiles, onNote: setNote }), _jsx(Dictate, { onText: (said) => setDraft((d) => (d ? `${d} ${said}` : said)), onNote: setNote }), _jsx(ModeSelect, { modes: MODES, value: kept.mode, onChange: (m) => set({ mode: m }), bg: "transparent", minH: 24, px: "$1.5", self: "center" }), _jsx(XStack, { flex: 1 }), _jsx(ChipSelect, { quiet: true, name: "Model", label: catalog.value.find((m) => m.id === kept.model)?.label ?? 'Enso', chosen: catalog.value.find((m) => m.id === kept.model) ?? null, items: catalog.value, onChange: (m) => set({ model: m.id }), placeholder: "Search models\u2026", placement: "top-end", loading: catalog.loading, error: catalog.error?.message ?? null }), _jsx(ChipSelect, { quiet: true, name: "Effort", label: EFFORTS.find((e) => e.id === kept.effort)?.label ?? 'Medium', chosen: EFFORTS.find((e) => e.id === kept.effort) ?? null, items: EFFORTS, onChange: (e) => set({ effort: e.id }), placement: "top-end", width: 180 })] }));
     return (_jsxs(YStack, { flex: 1, minH: 0, minW: 0, items: "center", justify: "center", px: "$4", pb: "$10", overflow: "scroll", children: [_jsxs(YStack, { width: "100%", maxW: COLUMN, gap: "$5", children: [_jsxs(XStack, { role: "heading", "aria-level": 1, justify: "center", items: "center", gap: "$3", flexWrap: "wrap", children: [_jsx(HanzoMark, { size: 26 }), _jsx(SizableText, { size: "$8", color: "$ink", style: { textAlign: 'center' }, children: prefs.callName ? `What’s up next, ${prefs.callName}?` : 'What’s up next?' })] }), _jsxs(YStack, { gap: "$2", children: [env.value && env.value.state !== 'ready' && !place.id ? (_jsxs(XStack, { items: "center", justify: "space-between", gap: "$3", px: "$3", py: "$2", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$2", color: "$ink", flex: 1, minW: 0, children: env.value.state === 'proposed'
                                             ? `A proposed environment for ${codebase} is waiting for review.`

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" })] })] }));
+}