@hanzo/build 0.2.18 → 0.2.20

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
@@ -193,7 +201,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/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 { 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();
@@ -72,12 +70,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(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' },
@@ -106,42 +123,13 @@ 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 }) {
     const host = useHost();
@@ -180,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/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.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

@@ -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,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();
@@ -57,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);
@@ -102,11 +123,13 @@ 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;
         }
-        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);
@@ -115,9 +138,10 @@ export function Landing({ onStarted }) {
             const run = await start(t, {
                 prompt: compose(draft.trim(), files),
                 // The name alone. The org rides the request, and a slash is not a repo name.
+                // 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: kept.repo.name,
-                base: kept.branch,
+                repo: repo?.name,
+                base: repo ? kept.branch : undefined,
                 targetId: place.id,
                 mode: kept.mode,
                 model: kept.model === ENSO ? undefined : kept.model,
@@ -134,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' });
@@ -172,7 +206,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/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@hanzo/build",
-  "version": "0.2.18",
+  "version": "0.2.20",
   "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 }) })] }));
-}