@hanzo/build 0.2.18 → 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/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,8 +24,8 @@ 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';
@@ -72,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(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,16 +125,7 @@ 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 }) {

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';
@@ -105,8 +108,9 @@ export function Landing({ onStarted }) {
             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 +119,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,
@@ -172,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/build",
-  "version": "0.2.18",
+  "version": "0.2.19",
   "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).",