@hanzo/build 0.2.0 → 0.2.1

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/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/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.1",
   "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"
   },