@hanzo/build 0.2.0 → 0.2.2

package/README.md

@@ -3,9 +3,9 @@
 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 with two hosts: this page (hanzo.build), and the
-platform console at platform.hanzo.ai/dev. Both mount `<Builder host={…} />`
-from `@hanzo/build`; neither forks it.
+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.
 
 ```
 pnpm install
@@ -42,6 +42,25 @@ under the mount (`path`) and how to move (`go`), and where to link out
 (`links`, `open`). Peers: `@hanzo/ui`, `@hanzo/gui`, `@hanzogui/lucide-icons-2`,
 `react`.
 
+### In a host that has its own rail
+
+The Hanzo app already has a left column, so it mounts `<Builder host={host}
+rail={false} />` in its pane and lists the builder in its own rail:
+
+```tsx
+import { Builder, DevSection } from '@hanzo/build'
+
+<Sidebar>            {/* the host's rail, @hanzo/ui/chat */}
+  <DevSection host={host} />   {/* New run, Artifacts, Templates, the runs */}
+</Sidebar>
+<Builder host={host} rail={false} />
+```
+
+`DevSection` is rows of `@hanzo/ui/chat`'s Sidebar; `useSessions(host)` is its
+data — the org's coding runs, kept live by the org's feed — for a host that
+draws the rows itself. `administers(token, org)` reads the org-admin bit off a
+hanzo.id token for `Host.admin`. One left column, never two.
+
 ## Addresses
 
 | path | screen |
@@ -57,10 +76,10 @@ collide.
 
 ## What is on the screen
 
-**The rail.** New, Artifacts, Customize (the platform's plugins), More
-(Templates, Machines, Docs), then the org's coding runs newest first with a
-live status dot, and the account. Collapse is an explicit toggle kept in this
-browser.
+**The rail** (hanzo.build). New, Artifacts, Customize (the platform's
+plugins), More (Templates, Machines, Docs), then the org's coding runs newest
+first with a live status dot, and the account. Collapse is an explicit toggle
+kept in this browser. A host with its own rail draws `DevSection` there instead.
 
 **New.** "What's up next?", and at the foot the composer: where the run runs
 (Default is the platform's sandbox; the org's machines follow), the repository

package/lib/api/coding.d.ts

@@ -10,22 +10,19 @@
  * id routes it to one of the org's machines, and `routed` says whether it got
  * there.
  *
- * `mode`, `model` and `effort` are this surface's asks of the contract: `plan`
- * is a run that plans and writes nothing, `build` edits, commits and pushes.
- * They are sent as asked and never simulated here — a run the platform has not
- * been told how to plan is not made to look like one.
+ * `mode` is what the run may do: `build` edits, commits and pushes its branch;
+ * `plan` reads the repository with a credential that can only read and answers
+ * with a plan, as its final status. A plan runs in the platform's sandbox only —
+ * a claimed machine clones and pushes with its own credential — so a plan
+ * routed to one is refused, here before sending as on the platform.
+ *
+ * `model` and `effort` are taken by the dev harness the builder runs (and by
+ * codex); the builder names no other harness, so they are always honoured.
  */
 import { type Target } from './call.ts';
 export type Mode = 'build' | 'plan';
-/**
- * The modes the platform honours today. `CodingStartIn` takes no `mode` yet, so
- * a plan run would edit, commit and push like any other — on a machine, with
- * that machine's credentials. Until the platform takes `plan`, a plan ask is
- * refused here rather than sent to become a build.
- */
-export declare const HONOURED: readonly Mode[];
-/** Why a mode cannot be asked for yet, or '' when it can. */
-export declare const unhonoured: (mode: Mode | undefined) => string;
+/** Why this mode cannot run where it is sent, or '' when it can. */
+export declare const unhonoured: (mode: Mode | undefined, target?: string) => string;
 export interface Ask {
     /** The task, in the words you would use with a colleague. */
     prompt: string;

package/lib/api/coding.js

@@ -10,22 +10,19 @@
  * id routes it to one of the org's machines, and `routed` says whether it got
  * there.
  *
- * `mode`, `model` and `effort` are this surface's asks of the contract: `plan`
- * is a run that plans and writes nothing, `build` edits, commits and pushes.
- * They are sent as asked and never simulated here — a run the platform has not
- * been told how to plan is not made to look like one.
+ * `mode` is what the run may do: `build` edits, commits and pushes its branch;
+ * `plan` reads the repository with a credential that can only read and answers
+ * with a plan, as its final status. A plan runs in the platform's sandbox only —
+ * a claimed machine clones and pushes with its own credential — so a plan
+ * routed to one is refused, here before sending as on the platform.
+ *
+ * `model` and `effort` are taken by the dev harness the builder runs (and by
+ * codex); the builder names no other harness, so they are always honoured.
  */
 import { call, Refusal } from './call.js';
-/**
- * The modes the platform honours today. `CodingStartIn` takes no `mode` yet, so
- * a plan run would edit, commit and push like any other — on a machine, with
- * that machine's credentials. Until the platform takes `plan`, a plan ask is
- * refused here rather than sent to become a build.
- */
-export const HONOURED = ['build'];
-/** Why a mode cannot be asked for yet, or '' when it can. */
-export const unhonoured = (mode) => mode && !HONOURED.includes(mode)
-    ? 'Plan needs the platform’s plan mode, which the coding API does not take yet — this ask would build. Switch to Build, or wait for Plan.'
+/** Why this mode cannot run where it is sent, or '' when it can. */
+export const unhonoured = (mode, target) => mode === 'plan' && target?.trim()
+    ? 'A plan runs in the Hanzo sandbox: a machine clones and pushes with its own credential. Choose Default, or switch to Build.'
     : '';
 /** The request body: only what was asked, with no empty strings sent as values. */
 export function body(ask) {
@@ -40,7 +37,7 @@ export function body(ask) {
 export async function start(t, ask) {
     if (!ask.prompt.trim())
         throw new Refusal(400, 'Say what the run should do');
-    const why = unhonoured(ask.mode);
+    const why = unhonoured(ask.mode, ask.targetId);
     if (why)
         throw new Refusal(400, why);
     const r = await call(t, 'POST', '/v1/agent/coding', body(ask));

package/lib/api/turn.js

@@ -31,6 +31,9 @@ function status(b) {
         case 'routed':
             return 'Sent to a machine';
         case 'done': {
+            // A plan's answer IS its final status: the run read and wrote nothing.
+            if (str(b.mode) === 'plan')
+                return str(b.plan) || 'Planned — the run answered with no plan';
             if (b.changed === false)
                 return 'Done — nothing to change';
             const pr = str(b.pr);

package/lib/builder.d.ts

@@ -1,5 +1,11 @@
 import { type Host } from './host.tsx';
-/** The builder. Mount it under a gui root (`<Hanzo>`), in a box with a height. */
-export declare function Builder({ host }: {
+/**
+ * The builder. Mount it under a gui root (`<Hanzo>`), in a box with a height.
+ *
+ * `rail={false}` leaves the left column to the host, which lists the builder's
+ * places and runs in its own rail with `DevSection`.
+ */
+export declare function Builder({ host, rail }: {
     host: Host;
+    rail?: boolean;
 }): import("react").JSX.Element;

package/lib/builder.js

@@ -14,6 +14,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * A project's workspace takes the whole window — it has its own chat column,
  * 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.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
 import { Blocks, BookOpen, Cpu, LayoutTemplate, Menu, Puzzle } from '@hanzogui/lucide-icons-2';
@@ -27,15 +31,9 @@ import { Landing } from './landing.js';
 import { Project } from './project.js';
 import { path, route } from './route.js';
 import { Run } from './run.js';
+import { DOTS } from './section.js';
 import { Artifacts, Templates } from './shelf.js';
 import { Account, Find } from './account.js';
-const DOTS = {
-    running: 'running',
-    paused: 'paused',
-    done: 'done',
-    stopped: 'stopped',
-    error: 'error',
-};
 function Shell() {
     const host = useHost();
     const t = useTarget();
@@ -68,14 +66,34 @@ function Shell() {
     ];
     return (_jsxs(XStack, { flex: 1, minH: 0, minW: 0, bg: "$background", 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.' }), account: host.person
                     ? { name: host.person.email || host.person.name, onPress: () => setAccount(true) }
-                    : { name: 'Sign in', onPress: () => host.signIn?.() }, onSettings: () => host.open(host.links.settings), onSearch: () => setFinding(true), collapsed: collapsed, onCollapse: setCollapsed, mark: _jsx(HanzoMark, { size: 18 }), open: drawer, onOpenChange: setDrawer, label: "Runs" }), _jsxs(YStack, { flex: 1, minW: 0, minH: 0, position: "relative", children: [_jsx(XStack, { height: 44, px: "$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 }) }) }), r.kind === 'run' ? (_jsx(Run, { id: r.id }, r.id)) : r.kind === 'screen' ? (r.screen === 'artifacts' ? _jsx(Artifacts, {}) : _jsx(Templates, {})) : (_jsx(Landing, { onStarted: (id) => { recents.reload(); go(id); } }))] }), _jsx(Account, { open: account, onOpenChange: setAccount }), _jsx(Find, { open: finding, onOpenChange: setFinding, recents: rows, onOpen: (id) => { setFinding(false); go(id); } })] }));
+                    : { name: 'Sign in', onPress: () => host.signIn?.() }, onSettings: () => host.open(host.links.settings), onSearch: () => setFinding(true), collapsed: collapsed, onCollapse: setCollapsed, mark: _jsx(HanzoMark, { size: 18 }), open: drawer, onOpenChange: setDrawer, label: "Runs" }), _jsxs(YStack, { flex: 1, minW: 0, minH: 0, position: "relative", children: [_jsx(XStack, { height: 44, px: "$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 }) }) }), _jsx(Pane, { onStarted: () => recents.reload() })] }), _jsx(Account, { open: account, onOpenChange: setAccount }), _jsx(Find, { open: finding, onOpenChange: setFinding, recents: rows, onOpen: (id) => { setFinding(false); go(id); } })] }));
+}
+/** Whichever pane the address names, beside a rail — the builder's or the host's. */
+function Pane({ onStarted }) {
+    const host = useHost();
+    const r = route(host.path);
+    if (r.kind === 'run')
+        return _jsx(Run, { id: r.id }, r.id);
+    if (r.kind === 'screen')
+        return r.screen === 'artifacts' ? _jsx(Artifacts, {}) : _jsx(Templates, {});
+    return (_jsx(Landing, { onStarted: (id) => {
+            onStarted?.(id);
+            host.go(id);
+        } }));
 }
-function Screens() {
+function Screens({ rail }) {
     const host = useHost();
     const r = route(host.path);
-    return r.kind === 'project' ? _jsx(Project, { slug: r.slug }, r.slug) : _jsx(Shell, {});
+    if (r.kind === 'project')
+        return _jsx(Project, { slug: r.slug }, r.slug);
+    return rail ? _jsx(Shell, {}) : _jsx(Pane, {});
 }
-/** The builder. Mount it under a gui root (`<Hanzo>`), in a box with a height. */
-export function Builder({ host }) {
-    return (_jsx(HostProvider, { host: host, children: _jsx(YStack, { flex: 1, minH: 0, minW: 0, height: "100%", children: _jsx(Screens, {}) }) }));
+/**
+ * The builder. Mount it under a gui root (`<Hanzo>`), in a box with a height.
+ *
+ * `rail={false}` leaves the left column to the host, which lists the builder's
+ * places and runs in its own rail with `DevSection`.
+ */
+export function Builder({ host, rail = true }) {
+    return (_jsx(HostProvider, { host: host, children: _jsx(YStack, { flex: 1, minH: 0, minW: 0, height: "100%", bg: "$background", children: _jsx(Screens, { rail: rail }) }) }));
 }

package/lib/claims.d.ts

@@ -0,0 +1,13 @@
+/**
+ * What a hanzo.id access token says, read without trusting it for anything the
+ * platform does not check again.
+ */
+/** The token's claims, or null when it is not a JWT. */
+export declare function claims(token: string | null): Record<string, unknown> | null;
+/**
+ * Whether the token says its person administers `org`. Org admin, read off the
+ * token's own `orgs` claim — never the reserved `admin` org, which is platform
+ * authority and not what a builder decides anything by. The platform enforces
+ * it again; this only decides which publish path is offered.
+ */
+export declare function administers(token: string | null, org: string | null): boolean;

package/lib/claims.js

@@ -0,0 +1,30 @@
+/**
+ * What a hanzo.id access token says, read without trusting it for anything the
+ * platform does not check again.
+ */
+/** The token's claims, or null when it is not a JWT. */
+export function claims(token) {
+    if (!token)
+        return null;
+    try {
+        const part = token.split('.')[1];
+        if (!part)
+            return null;
+        return JSON.parse(atob(part.replace(/-/g, '+').replace(/_/g, '/')));
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Whether the token says its person administers `org`. Org admin, read off the
+ * token's own `orgs` claim — never the reserved `admin` org, which is platform
+ * authority and not what a builder decides anything by. The platform enforces
+ * it again; this only decides which publish path is offered.
+ */
+export function administers(token, org) {
+    if (!org)
+        return false;
+    const set = claims(token)?.orgs;
+    return (Array.isArray(set) ? set : []).some((r) => r?.org === org && r.role === 'admin');
+}

package/lib/host.d.ts

@@ -1,11 +1,11 @@
 /**
  * What the builder needs from the page that mounts it.
  *
- * The builder is ONE component with two hosts: its own page (hanzo.build, which
- * signs in through Hanzo IAM and routes with react-router) and the platform
- * console (platform.hanzo.ai/dev, which already has a session and a router).
- * Everything that differs between them is here, as values, so neither host
- * forks the builder and the builder imports neither host.
+ * The builder is ONE component with several hosts: its own page (hanzo.build,
+ * which signs in through Hanzo IAM and routes with react-router) and the Hanzo
+ * app's Dev section (hanzo.ai/dev and hanzo.app/dev, which already have a
+ * session, a router and a rail). Everything that differs between them is here,
+ * as values, so no host forks the builder and the builder imports no host.
  */
 import { type ReactNode } from 'react';
 import type { Target } from './api/call.ts';

package/lib/host.js

@@ -2,11 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * What the builder needs from the page that mounts it.
  *
- * The builder is ONE component with two hosts: its own page (hanzo.build, which
- * signs in through Hanzo IAM and routes with react-router) and the platform
- * console (platform.hanzo.ai/dev, which already has a session and a router).
- * Everything that differs between them is here, as values, so neither host
- * forks the builder and the builder imports neither host.
+ * The builder is ONE component with several hosts: its own page (hanzo.build,
+ * which signs in through Hanzo IAM and routes with react-router) and the Hanzo
+ * app's Dev section (hanzo.ai/dev and hanzo.app/dev, which already have a
+ * session, a router and a rail). Everything that differs between them is here,
+ * as values, so no host forks the builder and the builder imports no host.
  */
 import { createContext, useContext, useMemo } from 'react';
 const Context = createContext(null);

package/lib/index.d.ts

@@ -3,9 +3,14 @@
  *
  * 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 and platform.hanzo.ai/dev are its
- * two hosts.
+ * 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`.
  */
 export { Builder } from './builder.tsx';
+export { DevSection, DOTS, useSessions } from './section.tsx';
+export { administers } from './claims.ts';
 export type { Host, Person } from './host.tsx';
+export type { Session, Status } from './api/sessions.ts';
+export type { Read } from './data.ts';
 export { path, route, SESSION, SLUG, type Route, type Screen } from './route.ts';

package/lib/index.js

@@ -3,8 +3,11 @@
  *
  * 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 and platform.hanzo.ai/dev are its
- * two hosts.
+ * 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`.
  */
 export { Builder } from './builder.js';
+export { DevSection, DOTS, useSessions } from './section.js';
+export { administers } from './claims.js';
 export { path, route, SESSION, SLUG } from './route.js';

package/lib/landing.js

@@ -128,5 +128,5 @@ export function Landing({ onStarted }) {
                     }),
                 }, placeholder: "Repository", disabled: !signed }), 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", px: "$4", children: [_jsxs(YStack, { width: "100%", maxW: COLUMN, flex: 1, minH: 0, children: [_jsx(EmptyPrompt, { title: "What\u2019s up next?", mark: _jsx(HanzoMark, { size: 18 }), column: COLUMN }), _jsx(YStack, { flex: 1 }), _jsxs(YStack, { pb: "$2", gap: "$2", children: [note || unhonoured(kept.mode) ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note || unhonoured(kept.mode) })) : null, _jsx(Composer, { inline: true, value: draft, onChange: setDraft, onSend: () => void send(), busy: busy, placeholder: "Describe a task or ask a question", label: "Describe a task or ask a question", head: head, foot: foot })] })] }), _jsx(Publish, { source: adding, onClose: () => setAdding(null) })] }));
+    return (_jsxs(YStack, { flex: 1, minH: 0, minW: 0, items: "center", px: "$4", children: [_jsxs(YStack, { width: "100%", maxW: COLUMN, flex: 1, minH: 0, children: [_jsx(EmptyPrompt, { title: "What\u2019s up next?", mark: _jsx(HanzoMark, { size: 18 }), column: COLUMN }), _jsx(YStack, { flex: 1 }), _jsxs(YStack, { pb: "$2", gap: "$2", children: [note || unhonoured(kept.mode, place.id) ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note || unhonoured(kept.mode, place.id) })) : null, _jsx(Composer, { inline: true, value: draft, onChange: setDraft, onSend: () => void send(), busy: busy, placeholder: "Describe a task or ask a question", label: "Describe a task or ask a question", head: head, foot: foot })] })] }), _jsx(Publish, { source: adding, onClose: () => setAdding(null) })] }));
 }

package/lib/project.js

@@ -239,7 +239,7 @@ export function Project({ slug }) {
         }, empty: _jsxs(SizableText, { size: "$2", color: "$soft", p: "$4", children: ["Open a file from Files. Code here is read at ", ref, "; ask in the chat to change it."] }) })) : (_jsx(YStack, { p: "$4", gap: "$2", children: picked.length ? (picked.map((p) => (_jsxs(SizableText, { size: "$2", color: "$ink", children: [p.label, " \u2014 ", p.id] }, p.id)))) : (_jsx(SizableText, { size: "$2", color: "$soft", children: bridge
                 ? 'Pick an element in the preview to see it here and attach it to your next ask.'
                 : 'Layers are read through the preview bridge, and this page does not run it. Its elements cannot be listed from here.' })) }));
-    return (_jsxs(_Fragment, { children: [_jsx(Workspace, { start: _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(XStack, { render: "button", "aria-label": "All runs", onPress: () => host.go(''), p: "$1", children: _jsx(HanzoMark, { size: 20 }) }), _jsx(ProjectChip, { name: project?.name ?? slug, onPress: () => setSwitcher(true) }), _jsx(XStack, { render: "button", "aria-label": "History", onPress: () => setHistory(true), p: "$1.5", rounded: "$3", hoverStyle: { bg: '$hover' }, children: _jsx(Clock, { size: 16 }) }), _jsx(XStack, { render: "button", "aria-label": collapsed ? 'Show the chat' : 'Hide the chat', "aria-pressed": !collapsed, onPress: () => setCollapsed(!collapsed), p: "$1.5", rounded: "$3", hoverStyle: { bg: '$hover' }, children: _jsx(PanelLeft, { size: 16 }) })] }), middle: _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Views, { views: VIEWS, value: view, onChange: (v) => { setView(v); setPane('view'); }, label: "View" }), _jsx(Views, { views: DEVICES, value: device, onChange: (d) => setDevice(d), label: "Device", labels: "none" }), _jsx(XStack, { render: "button", "aria-label": "Reload the preview", onPress: () => frame.current?.reload(), p: "$1.5", rounded: "$3", hoverStyle: { bg: '$hover' }, children: _jsx(RefreshCcw, { size: 16 }) }), _jsx(PageSelect, { pages: pages, value: page, onChange: setPage }), src ? (_jsx(Out, { href: src, label: "Open in a new tab", children: _jsx(XStack, { p: "$1.5", rounded: "$3", hoverStyle: { bg: '$hover' }, children: _jsx(ExternalLink, { size: 16 }) }) })) : null] }), end: _jsxs(XStack, { items: "center", gap: "$2", children: [_jsxs(Button, { variant: "outline", size: "sm", onPress: () => void share(), children: [_jsx(Share2, { size: 14 }), " Share"] }), _jsxs(Button, { size: "sm", disabled: !project?.repo, onPress: () => project &&
+    return (_jsxs(_Fragment, { children: [_jsx(Workspace, { start: _jsxs(XStack, { items: "center", gap: "$2", minW: 0, shrink: 1, children: [_jsx(XStack, { render: "button", "aria-label": "All runs", onPress: () => host.go(''), p: "$1", shrink: 0, children: _jsx(HanzoMark, { size: 20 }) }), _jsx(ProjectChip, { name: project?.name ?? slug, onPress: () => setSwitcher(true) }), _jsx(XStack, { render: "button", "aria-label": "History", onPress: () => setHistory(true), p: "$1.5", rounded: "$3", shrink: 0, hoverStyle: { bg: '$hover' }, children: _jsx(Clock, { size: 16 }) }), _jsx(XStack, { render: "button", "aria-label": collapsed ? 'Show the chat' : 'Hide the chat', "aria-pressed": !collapsed, onPress: () => setCollapsed(!collapsed), p: "$1.5", rounded: "$3", shrink: 0, hoverStyle: { bg: '$hover' }, children: _jsx(PanelLeft, { size: 16 }) })] }), middle: _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Views, { views: VIEWS, value: view, onChange: (v) => { setView(v); setPane('view'); }, label: "View" }), _jsx(Views, { views: DEVICES, value: device, onChange: (d) => setDevice(d), label: "Device", labels: "none" }), _jsx(XStack, { render: "button", "aria-label": "Reload the preview", onPress: () => frame.current?.reload(), p: "$1.5", rounded: "$3", hoverStyle: { bg: '$hover' }, children: _jsx(RefreshCcw, { size: 16 }) }), _jsx(PageSelect, { pages: pages, value: page, onChange: setPage }), src ? (_jsx(Out, { href: src, label: "Open in a new tab", children: _jsx(XStack, { p: "$1.5", rounded: "$3", hoverStyle: { bg: '$hover' }, children: _jsx(ExternalLink, { size: 16 }) }) })) : null] }), end: _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(XStack, { display: "none", $md: { display: 'flex' }, children: _jsxs(Button, { variant: "outline", size: "sm", onPress: () => void share(), children: [_jsx(Share2, { size: 14 }), " Share"] }) }), _jsxs(Button, { size: "sm", disabled: !project?.repo, onPress: () => project &&
                                 setPublish({ repo: project.repo, title: project.name, ref, name: project.slug, project: project.slug }), children: [_jsx(Upload, { size: 14 }), " Publish"] })] }), chat: chat, dock: _jsx(Console, { lines: lines, height: dock, onHeight: setDock, onClear: () => setPageLines([]), status: run.status || end.status || undefined, label: "Console" }), collapsed: collapsed, pane: pane, children: body }), _jsx(Dialog, { open: history, onOpenChange: setHistory, children: _jsxs(DialogContent, { maxW: 480, children: [_jsxs(DialogTitle, { children: ["Runs on ", project?.name ?? slug] }), _jsx(YStack, { gap: "$1", children: runs.value.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "No runs yet." })) : (runs.value.map((r) => (_jsxs(XStack, { render: "button", onPress: () => {
                                     setChosen(r.id);
                                     setHistory(false);

package/lib/section.d.ts

@@ -0,0 +1,20 @@
+import { type SessionStatus } from '@hanzo/ui/chat';
+import { type ReactNode } from 'react';
+import type { Session } from './api/sessions.ts';
+import { type Read } from './data.ts';
+import type { Host } from './host.tsx';
+/** A run's status, as the rail's dot draws it. Anything else is idle. */
+export declare const DOTS: Record<string, SessionStatus>;
+/** The org's coding runs, newest first, kept live by the org's feed. */
+export declare function useSessions(host: Host): Read<Session[]>;
+/**
+ * New, Artifacts, Templates, then the runs. `children` sit between the places
+ * and the runs — where a host lists its projects. `onPick` fires after a move,
+ * so a host that draws its rail as a drawer on a phone can close it.
+ */
+export declare function DevSection({ host, onPick, label, children, }: {
+    host: Host;
+    onPick?: () => void;
+    label?: string;
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/lib/section.js

@@ -0,0 +1,47 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The builder's places and runs, for a host that draws its own rail.
+ *
+ * A host that mounts `<Builder rail={false}>` keeps ONE left column — its own —
+ * and lists the builder in it with these. `useSessions` is the same read and
+ * the same org-wide feed the built-in rail uses, so a run started in the pane
+ * appears here with its live status. `DevSection` draws the builder's places
+ * and runs as rows of the host's sidebar (the `@hanzo/ui/chat` Sidebar the
+ * built-in rail is made of), and every row moves the builder through the
+ * host's own `go`.
+ */
+import { SizableText } from '@hanzo/gui';
+import { Blocks, LayoutTemplate, SquarePen } from '@hanzogui/lucide-icons-2';
+import { SidebarItem, SidebarSection, StatusDot } from '@hanzo/ui/chat';
+import { useMemo } from 'react';
+import { useRecents } from './data.js';
+import { path, route } from './route.js';
+/** A run's status, as the rail's dot draws it. Anything else is idle. */
+export const DOTS = {
+    running: 'running',
+    paused: 'paused',
+    done: 'done',
+    stopped: 'stopped',
+    error: 'error',
+};
+/** The org's coding runs, newest first, kept live by the org's feed. */
+export function useSessions(host) {
+    const t = useMemo(() => ({ api: host.api, token: host.token, org: host.org }), [host.api, host.token, host.org]);
+    return useRecents(t, Boolean(host.person));
+}
+const Note = ({ children }) => (_jsx(SizableText, { size: "$1", color: "$soft", px: "$2", py: "$1", children: children }));
+/**
+ * New, Artifacts, Templates, then the runs. `children` sit between the places
+ * and the runs — where a host lists its projects. `onPick` fires after a move,
+ * so a host that draws its rail as a drawer on a phone can close it.
+ */
+export function DevSection({ host, onPick, label = 'Runs', children, }) {
+    const sessions = useSessions(host);
+    const r = route(host.path);
+    const go = (p) => {
+        host.go(p);
+        onPick?.();
+    };
+    const screen = r.kind === 'screen' ? r.screen : '';
+    return (_jsxs(_Fragment, { children: [_jsx(SidebarItem, { icon: _jsx(SquarePen, { size: 16, "aria-hidden": true }), active: r.kind === 'new', onPress: () => go(''), children: "New run" }), _jsx(SidebarItem, { icon: _jsx(Blocks, { size: 16, "aria-hidden": true }), active: screen === 'artifacts', onPress: () => go(path({ kind: 'screen', screen: 'artifacts' })), children: "Artifacts" }), _jsx(SidebarItem, { icon: _jsx(LayoutTemplate, { size: 16, "aria-hidden": true }), active: screen === 'templates', onPress: () => go(path({ kind: 'screen', screen: 'templates' })), children: "Templates" }), children, _jsx(SidebarSection, { label: label, children: !host.person ? (_jsx(Note, { children: "Sign in to see your runs." })) : sessions.value.length ? (sessions.value.map((s) => (_jsx(SidebarItem, { icon: _jsx(StatusDot, { status: DOTS[s.status] ?? 'idle' }), active: r.kind === 'run' && r.id === s.id, onPress: () => go(s.id), children: s.title || 'Untitled run' }, s.id)))) : (_jsx(Note, { children: sessions.error ? sessions.error.message : sessions.loading ? 'Reading…' : 'No runs yet. Say what to build and it lands here.' })) })] }));
+}

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@hanzo/build",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "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 (platform.hanzo.ai/dev).",
+  "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).",
   "engines": {
     "node": ">=22.18"
   },