@hanzo/build 0.2.0

package/lib/project.js

@@ -0,0 +1,250 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A project's workspace, in the same window: the chat on the left, what it
+ * built on the right.
+ *
+ *   bar     mark · project · history · chat toggle | Preview Files Code Layers ·
+ *           device · reload · page · open | Share · Publish
+ *   left    the project's runs as a conversation, suggestions, and the ask
+ *   right   the deployed page, framed; the repository at the run's branch as a
+ *           tree and as read-only code; the element a person picked
+ *   dock    the run's console — its steps and its log, as they stream
+ *
+ * A chat turn IS a coding run: `POST /v1/agent/coding` with the project, the
+ * mode, and the previous run as `after`, so the next ask builds on the branch
+ * the last one pushed. Files and Code read native git at that branch. The
+ * preview is the project's own deployed address; a run's sandbox serves no
+ * address the platform publishes, and nothing here invents one.
+ *
+ * Derived from the Hanzo App v2 editor (github.com/hanzoai/build-v2), itself
+ * derived from OSW Studio and DeepSite (MIT). See NOTICE.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { Clock, ExternalLink, MousePointerClick, PanelLeft, RefreshCcw, Share2, Upload, } from '@hanzogui/lucide-icons-2';
+import { Attachments, Console, DEVICES, Feedback, FileTabs, FileTree, ModeSelect, PageSelect, PreviewFrame, ProjectChip, Suggestions, SUGGESTIONS, VIEWS, Views, Workspace, fold, } from '@hanzo/ui/agents';
+import { Composer, Message } from '@hanzo/ui/chat';
+import { Button, Dialog, DialogContent, DialogTitle } from '@hanzo/ui';
+import { HanzoMark } from '@hanzo/ui/product';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { start, unhonoured } from './api/coding.js';
+import { blob, tree } from './api/git.js';
+import { name as repoName, ours } from './api/projects.js';
+import { list, message, stop } from './api/sessions.js';
+import { outcome, pull, said, who } from './api/turn.js';
+import { verdict as record } from './api/verdict.js';
+import { useKept, useProjects, useRead, useRun } from './data.js';
+import { useHost, useTarget } from './host.js';
+import { MODES } from './landing.js';
+import { Out } from './out.js';
+import { Publish } from './publish.js';
+import { Attach, compose, Dictate, Files } from './tools.js';
+const LIVE = new Set(['running', 'paused']);
+/** `owner/name` from a GitHub clone URL, or '' for a repository that lives elsewhere. */
+function github(clone) {
+    const m = /^https:\/\/github\.com\/([^/]+)\/([^/]+?)(?:\.git)?\/?$/.exec(clone);
+    return m ? `${m[1]}/${m[2]}` : '';
+}
+/** One run in the conversation: what was asked, and what it came to. */
+function Turn({ run, open, onOpen, project }) {
+    const t = useTarget();
+    const [v, setV] = useState(null);
+    const [note, setNote] = useState('');
+    return (_jsxs(YStack, { gap: "$2", children: [_jsx(Message, { role: "user", children: _jsx(SizableText, { size: "$2", color: "$ink", children: run.title || 'Untitled run' }) }), _jsx(Message, { role: "assistant", busy: LIVE.has(run.status), actions: _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Feedback, { text: run.title, verdict: v, onVerdict: (next) => {
+                                setV(next);
+                                record(t, run.id, project, next).catch((e) => {
+                                    setV(null);
+                                    setNote(e instanceof Error ? e.message : 'Not recorded');
+                                });
+                            } }), note ? (_jsx(SizableText, { size: "$1", color: "$soft", children: note })) : null, !open ? (_jsx(XStack, { render: "button", onPress: onOpen, hitSlop: 8, children: _jsx(SizableText, { size: "$1", color: "$soft", textDecorationLine: "underline", children: "Show steps" }) })) : null] }), children: _jsx(SizableText, { size: "$2", color: "$ink", children: run.status === 'done' ? 'Done.' : run.status === 'error' ? 'This run hit an error.' : run.status === 'stopped' ? 'Stopped.' : 'Working…' }) })] }));
+}
+export function Project({ slug }) {
+    const host = useHost();
+    const t = useTarget();
+    const signed = Boolean(host.person);
+    const all = useProjects(t, signed);
+    const project = all.value.find((p) => p.slug === slug) ?? null;
+    const listed = useRead(signed ? () => list(t, { kind: 'coding', project: slug, limit: 50 }) : null, [], [t, signed, slug]);
+    // Only the runs on this project's own repository: a record can be moved into
+    // any project, and a run's branch is what Files, Code and Publish read.
+    const runs = { ...listed, value: listed.value.filter((r) => ours(r.repo, project?.repo ?? '')) };
+    const ordered = useMemo(() => [...runs.value].reverse(), [listed.value, project?.repo]);
+    const [chosen, setChosen] = useState(null);
+    const current = chosen ?? runs.value[0]?.id ?? null;
+    const run = useRun(t, current);
+    const end = outcome(run.events);
+    const pr = pull(run.record?.pr ?? '', run.record?.repo ?? '');
+    const running = LIVE.has(run.status || end.status);
+    const [view, setView] = useKept(`hanzo.build.view.${slug}`, 'preview');
+    const [device, setDevice] = useState('desktop');
+    const [collapsed, setCollapsed] = useKept('hanzo.build.chat', false);
+    const [pane, setPane] = useState('chat');
+    const [dock, setDock] = useKept('hanzo.build.dock', 36);
+    const [dismissed, setDismissed] = useKept(`hanzo.build.hints.${slug}`, false);
+    const [mode, setMode] = useKept('hanzo.build.mode', 'build');
+    const [page, setPage] = useState('/');
+    const [draft, setDraft] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [note, setNote] = useState('');
+    const [picked, setPicked] = useState([]);
+    const [attached, setAttached] = useState([]);
+    const [bridge, setBridge] = useState(false);
+    const [editing, setEditing] = useState(false);
+    const [pageLines, setPageLines] = useState([]);
+    const [history, setHistory] = useState(false);
+    const [publish, setPublish] = useState(null);
+    const [switcher, setSwitcher] = useState(false);
+    const frame = useRef(null);
+    // Files and Code: native git, at the branch the open run pushed (or the project's own).
+    const repo = project?.repo ? repoName(project.repo) : '';
+    const ref = run.record?.branch || project?.branch || 'main';
+    const [files, setFiles] = useState([]);
+    const [file, setFile] = useState(null);
+    useEffect(() => {
+        setFiles([]);
+        setFile(null);
+    }, [repo, ref]);
+    const openFile = async (path) => {
+        setFile(path);
+        setView('code');
+        if (files.some((f) => f.path === path))
+            return;
+        setFiles((was) => [...was, { path, readOnly: true }]);
+        try {
+            const b = await blob(t, repo, ref, path);
+            const content = b.binary ? '' : b.truncated ? '' : b.text;
+            const error = b.binary ? 'A binary file — nothing to show as text.' : b.truncated ? 'Past the 1 MiB view cap — clone the repository to read it.' : undefined;
+            setFiles((was) => was.map((f) => (f.path === path ? { ...f, content, error } : f)));
+        }
+        catch (e) {
+            setFiles((was) => was.map((f) => (f.path === path ? { ...f, error: e instanceof Error ? e.message : 'Could not read this file' } : f)));
+        }
+    };
+    // Pages: the HTML files at the repository's root, as the page picker's list.
+    const root = useRead(repo ? () => tree(t, repo, ref, '') : null, [], [t, repo, ref]);
+    const pages = useMemo(() => [
+        { id: '/', label: 'Homepage' },
+        ...root.value
+            .filter((e) => !e.dir && /\.html?$/i.test(e.name) && !/^index\.html?$/i.test(e.name))
+            .map((e) => ({ id: `/${e.path}`, label: e.name.replace(/\.html?$/i, '') })),
+    ], [root.value]);
+    const src = project?.live ? new URL(page, project.live).toString() : null;
+    const lines = useMemo(() => [
+        ...run.events
+            .filter((e) => e.kind === 'log' || e.kind === 'tool-call' || e.kind === 'status')
+            .map((e) => ({
+            id: `r${e.seq || e.id}`,
+            level: e.kind === 'status' && /error/.test(said(e).toLowerCase()) ? 'error' : e.kind === 'tool-call' ? 'info' : 'log',
+            text: said(e),
+            source: e.kind === 'status' ? 'run' : who(e.actor),
+        }))
+            .filter((l) => l.text),
+        ...pageLines,
+    ], [run.events, pageLines]);
+    const onBridge = (e) => {
+        if (e.type === 'preview:ready') {
+            setBridge(true);
+            // A new document starts closed to picking; open it again if the person had.
+            if (editing)
+                frame.current?.post({ type: 'preview:editable', active: true });
+        }
+        else if (e.type === 'preview:select')
+            // The whole selector, as it will ride the next ask — never a shortened name
+            // that hides what the page sent.
+            setPicked([{ id: e.info.selector, kind: 'element', label: e.info.selector }]);
+        else if (e.type === 'preview:navigate' && project?.live) {
+            // Resolved on the live site's own origin, and kept as its path and query.
+            const to = new URL(e.path, project.live);
+            if (to.origin === new URL(project.live).origin)
+                setPage(`${to.pathname}${to.search}`);
+        }
+        else if (e.type === 'preview:console')
+            setPageLines((was) => [...was.slice(-400), { id: `p${was.length}-${Date.now()}`, level: e.level, text: e.text, source: 'page' }]);
+    };
+    const send = async (text) => {
+        const ask = (text ?? draft).trim();
+        if (!ask || busy)
+            return;
+        if (!signed)
+            return host.signIn?.();
+        setBusy(true);
+        setNote('');
+        try {
+            // The page's own strings ride as quoted data, never as prose, and the page
+            // is named only when the person chose it from the picker.
+            const where = pages.find((p) => p.id === page)?.label;
+            const context = picked.length
+                ? `\n\nThe person picked an element in the preview${where ? ` of the ${where} page` : ''}. Its CSS selector, as data: ${JSON.stringify(picked[0].id)}`
+                : '';
+            const gh = project ? github(project.repo) : '';
+            const next = await start(t, {
+                prompt: compose(`${ask}${context}`, attached),
+                project: slug,
+                repo: gh || undefined,
+                base: gh ? project?.branch || undefined : undefined,
+                after: current ?? undefined,
+                mode,
+            });
+            setDraft('');
+            setPicked([]);
+            setAttached([]);
+            setChosen(next.session);
+            runs.reload();
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'The run could not start');
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const steer = async () => {
+        if (!current || !draft.trim())
+            return;
+        try {
+            await message(t, current, draft);
+            setDraft('');
+            setNote('Sent — the run reads it before its next step');
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'Could not reach this run');
+        }
+    };
+    const share = async () => {
+        const link = project?.live || `${window.location.origin}${window.location.pathname}`;
+        try {
+            await navigator.clipboard.writeText(link);
+            setNote(`Copied ${link}`);
+        }
+        catch {
+            setNote(link);
+        }
+    };
+    if (!signed) {
+        return (_jsxs(YStack, { flex: 1, items: "center", justify: "center", gap: "$3", children: [_jsx(SizableText, { size: "$4", color: "$ink", children: "Sign in to open this project." }), _jsx(Button, { onPress: () => host.signIn?.(), children: "Sign in" })] }));
+    }
+    if (!all.loading && !project && !all.error) {
+        return (_jsxs(YStack, { flex: 1, items: "center", justify: "center", gap: "$3", px: "$4", children: [_jsx(SizableText, { size: "$4", color: "$ink", children: host.org ? `${host.org} has no project named ${slug}.` : `There is no project named ${slug}.` }), _jsx(Button, { variant: "outline", onPress: () => host.go('-/artifacts'), children: "See what this organization has built" })] }));
+    }
+    const chat = (_jsxs(YStack, { flex: 1, minH: 0, children: [_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$3", py: "$4", gap: "$4", children: ordered.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$ink", px: "$2", children: runs.loading
+                        ? 'Reading this project’s runs…'
+                        : `${project?.name ?? slug} is loaded — it is in the preview, and every run on it is under the clock above. Say what to change and it gets built.` })) : (ordered.map((r) => (_jsxs(YStack, { gap: "$2", children: [_jsx(Turn, { run: r, open: r.id === current, onOpen: () => setChosen(r.id), project: slug }), r.id === current ? (_jsxs(YStack, { gap: "$1", pl: "$2", borderLeftWidth: 1, borderColor: "$borderColor", children: [fold(run.events.map((e) => ({ kind: e.kind, actor: who(e.actor), seq: e.seq, id: e.id, text: said(e) })).filter((b) => b.text)).map((b) => (_jsx(SizableText, { size: "$1", color: "$soft", children: b.text }, b.key))), pr.href ? (_jsxs(Out, { href: pr.href, label: `Open pull request ${pr.label}`, children: [_jsxs(SizableText, { size: "$1", color: "$ink", textDecorationLine: "underline", children: ["Pull request ", pr.label] }), _jsx(ExternalLink, { size: 11 })] })) : null] })) : null] }, r.id)))) }), _jsxs(YStack, { px: "$3", pb: "$3", gap: "$2", children: [!dismissed && !running ? _jsx(Suggestions, { items: SUGGESTIONS, onPick: (s) => void send(s), onDismiss: () => setDismissed(true) }) : null, note || unhonoured(mode) ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note || unhonoured(mode) })) : null, picked.length ? _jsx(Attachments, { items: picked, onRemove: () => setPicked([]) }) : null, attached.length ? (_jsx(XStack, { gap: 6, flexWrap: "wrap", children: _jsx(Files, { files: attached, onFiles: setAttached }) })) : null, _jsxs(Composer, { value: draft, onChange: setDraft, onSend: () => void (running ? steer() : send()), onStop: current ? () => void stop(t, current).then(() => setNote('Stop requested — the run keeps its work on its branch')) : undefined, busy: busy || (running && !draft.trim()), rows: 3, placeholder: running ? 'Steer this run' : 'Ask Hanzo for edits', label: "Ask Hanzo for edits", children: [_jsx(Attach, { files: attached, onFiles: setAttached, onNote: setNote }), _jsx(XStack, { flex: 1 }), _jsx(ModeSelect, { modes: MODES, value: mode, onChange: (m) => setMode(m), self: "center" }), _jsx(Dictate, { onText: (said) => setDraft((d) => (d ? `${d} ${said}` : said)), onNote: setNote })] })] })] }));
+    const body = view === 'preview' ? (_jsx(PreviewFrame, { ref: frame, src: src, title: `${project?.name ?? slug} preview`, device: device, onBridge: onBridge, empty: _jsxs(YStack, { items: "center", gap: "$2", p: "$6", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: "Nothing deployed yet" }), _jsx(SizableText, { size: "$2", color: "$soft", text: "center", children: "Publish this project and its page appears here." })] }), toolbar: bridge ? (_jsx(XStack, { render: "button", "aria-pressed": editing, "aria-label": editing ? 'Stop picking elements' : 'Pick an element to edit', onPress: () => {
+                const next = !editing;
+                setEditing(next);
+                frame.current?.post({ type: 'preview:editable', active: next });
+            }, p: "$2", rounded: "$10", children: _jsx(MousePointerClick, { size: 16 }) })) : undefined })) : view === 'files' ? (repo ? (_jsx(FileTree, { load: async (dir) => (await tree(t, repo, ref, dir)).map((e) => ({ path: e.path, kind: e.dir ? 'dir' : 'file' })), value: file, onSelect: (p) => void openFile(p), label: `${repo} at ${ref}` })) : (_jsx(SizableText, { size: "$2", color: "$soft", p: "$4", children: "This project has no repository yet. Its first run creates one." }))) : view === 'code' ? (_jsx(FileTabs, { files: files, value: file, onSelect: setFile, onClose: (p) => {
+            setFiles((was) => was.filter((f) => f.path !== p));
+            if (file === p)
+                setFile(null);
+        }, 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 &&
+                                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);
+                                }, justify: "space-between", px: "$2", py: "$1.5", rounded: "$3", hoverStyle: { bg: '$hover' }, children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, flex: 1, children: r.title || 'Untitled run' }), _jsx(SizableText, { size: "$1", color: "$soft", children: r.status })] }, r.id)))) })] }) }), _jsx(Dialog, { open: switcher, onOpenChange: setSwitcher, children: _jsxs(DialogContent, { maxW: 420, children: [_jsx(DialogTitle, { children: "Projects" }), _jsx(YStack, { gap: "$1", maxH: 420, overflow: "scroll", children: all.value.map((p) => (_jsx(XStack, { render: "button", onPress: () => {
+                                    setSwitcher(false);
+                                    host.go(p.slug);
+                                }, px: "$2", py: "$1.5", rounded: "$3", bg: p.slug === slug ? '$hover' : undefined, hoverStyle: { bg: '$hover' }, children: _jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: p.name }) }, p.slug))) })] }) }), _jsx(Publish, { source: publish, onClose: () => setPublish(null) })] }));
+}

package/lib/publish.d.ts

@@ -0,0 +1,15 @@
+export interface Source {
+    /** The https clone URL. */
+    repo: string;
+    /** What to call it: `owner/name` or a project's name. */
+    title: string;
+    ref: string;
+    /** The app name to declare. */
+    name: string;
+    /** The project to add it to, when there already is one. */
+    project?: string;
+}
+export declare function Publish({ source, onClose }: {
+    source: Source | null;
+    onClose: () => void;
+}): import("react").JSX.Element | null;

package/lib/publish.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Adding a repository to a project — the one publish path, from a repo row
+ * ("Add to project") and from a workspace's Publish.
+ *
+ * `POST /v1/platform/apps` builds the repository and writes its declaration.
+ * On a branch (everyone) that is a review: nothing deploys until it merges,
+ * and the review link is the thing to open. An org admin can take a green
+ * build to main, which CD applies: that is the second call, with the build's
+ * tag, because main refuses an image that is not built yet.
+ *
+ * Every state shown is one the platform reported; a refusal shows the
+ * platform's own sentence.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { ExternalLink } from '@hanzogui/lucide-icons-2';
+import { Button, Dialog, DialogContent, DialogDescription, DialogTitle, Input } from '@hanzo/ui';
+import { useEffect, useState } from 'react';
+import { builds, declare, label } from './api/platform.js';
+import { useHost, useTarget } from './host.js';
+import { Out } from './out.js';
+export function Publish({ source, onClose }) {
+    const t = useTarget();
+    const host = useHost();
+    const [project, setProject] = useState('');
+    const [phase, setPhase] = useState('ask');
+    const [out, setOut] = useState(null);
+    const [status, setStatus] = useState('');
+    const [error, setError] = useState('');
+    useEffect(() => {
+        setProject(source?.project ?? source?.name ?? '');
+        setPhase('ask');
+        setOut(null);
+        setStatus('');
+        setError('');
+    }, [source]);
+    // The build is asynchronous; its record says when it is green.
+    useEffect(() => {
+        const id = out?.build?.id;
+        if (!id || phase !== 'declared')
+            return;
+        let live = true;
+        const tick = async () => {
+            try {
+                const row = (await builds(t)).find((b) => b.id === id);
+                if (live && row)
+                    setStatus(row.status);
+            }
+            catch {
+                /* the status stays as last read */
+            }
+        };
+        void tick();
+        const every = setInterval(tick, 5000);
+        return () => {
+            live = false;
+            clearInterval(every);
+        };
+    }, [t, out, phase]);
+    if (!source)
+        return null;
+    const send = async () => {
+        setPhase('sending');
+        setError('');
+        try {
+            const d = await declare(t, { repo: source.repo, ref: source.ref, name: source.name, project: project || source.name, mode: 'branch' });
+            setOut(d);
+            setStatus(d.build?.status ?? '');
+            setPhase('declared');
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : 'The platform refused this');
+            setPhase('failed');
+        }
+    };
+    const ship = async () => {
+        if (!out?.build?.id)
+            return;
+        setPhase('shipping');
+        setError('');
+        try {
+            await declare(t, { repo: source.repo, ref: source.ref, name: source.name, project: project || source.name, mode: 'commit', tag: out.build.id });
+            setPhase('shipped');
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : 'The platform refused this');
+            setPhase('declared');
+        }
+    };
+    const green = /^(succeeded|success|done|complete|completed|ok)$/i.test(status);
+    return (_jsx(Dialog, { open: true, onOpenChange: (o) => !o && onClose(), children: _jsxs(DialogContent, { maxW: 480, children: [_jsx(DialogTitle, { children: "Add to project" }), _jsxs(DialogDescription, { children: ["Build ", source.title, " at ", source.ref || 'main', " and declare it in a project. ", host.admin ? 'As an admin you can take a green build to main.' : 'It opens a review; merging it is what deploys.'] }), _jsxs(YStack, { gap: "$1.5", children: [_jsx(SizableText, { render: "label", size: "$2", color: "$soft", htmlFor: "publish-project", children: "Project" }), _jsx(Input, { id: "publish-project", value: project, onChangeText: (v) => setProject(v), disabled: phase !== 'ask' && phase !== 'failed', placeholder: label(source.name), "aria-label": "Project" }), _jsxs(SizableText, { size: "$1", color: "$soft", children: ["Saved as ", label(project || source.name)] })] }), out ? (_jsxs(YStack, { gap: "$2", role: "status", children: [_jsx(SizableText, { size: "$2", color: "$ink", children: phase === 'shipped'
+                                ? 'Declared on main — CD applies it on its next pass.'
+                                : `Build ${out.build?.id ?? ''}: ${status || 'building'}` }), out.review ? (_jsxs(Out, { href: out.review, children: [_jsx(SizableText, { size: "$2", color: "$ink", textDecorationLine: "underline", children: "Open the review" }), _jsx(ExternalLink, { size: 12, opacity: 0.6 })] })) : null] })) : null, error ? (_jsx(SizableText, { size: "$2", color: "$red10", role: "alert", children: error })) : null, _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { variant: "outline", size: "sm", onPress: onClose, children: phase === 'shipped' || phase === 'declared' ? 'Done' : 'Cancel' }), phase === 'ask' || phase === 'failed' || phase === 'sending' ? (_jsx(Button, { size: "sm", disabled: phase === 'sending', onPress: () => void send(), children: phase === 'sending' ? 'Adding…' : 'Add to project' })) : host.admin && (phase === 'declared' || phase === 'shipping') ? (_jsx(Button, { size: "sm", disabled: !green || phase === 'shipping', onPress: () => void ship(), children: phase === 'shipping' ? 'Shipping…' : green ? 'Ship to main' : 'Waiting for the build' })) : null] })] }) }));
+}

package/lib/route.d.ts

@@ -0,0 +1,30 @@
+/**
+ * The builder's addresses, under whatever path the host mounts it at.
+ *
+ *   ''              the empty state: a new run
+ *   sess_<32 hex>   one run
+ *   -/<screen>      a builder screen (artifacts, templates)
+ *   <slug>          a project's workspace
+ *
+ * Unambiguous by construction: a project slug is `^[a-z0-9]([a-z0-9-]{0,38}[a-z0-9])?$`,
+ * so it can hold neither the `_` a session id carries nor start with `-`.
+ * Anything else is not an address here and reads as the empty state.
+ */
+export type Screen = 'artifacts' | 'templates';
+export type Route = {
+    kind: 'new';
+} | {
+    kind: 'run';
+    id: string;
+} | {
+    kind: 'screen';
+    screen: Screen;
+} | {
+    kind: 'project';
+    slug: string;
+};
+export declare const SESSION: RegExp;
+export declare const SLUG: RegExp;
+export declare function route(path: string): Route;
+/** The path for a route — the inverse of `route`. */
+export declare function path(r: Route): string;

package/lib/route.js

@@ -0,0 +1,28 @@
+export const SESSION = /^sess_[0-9a-f]{32}$/;
+export const SLUG = /^[a-z0-9]([a-z0-9-]{0,38}[a-z0-9])?$/;
+const SCREENS = ['artifacts', 'templates'];
+export function route(path) {
+    const p = path.replace(/^\/+|\/+$/g, '');
+    if (SESSION.test(p))
+        return { kind: 'run', id: p };
+    if (p.startsWith('-/')) {
+        const s = p.slice(2);
+        return SCREENS.includes(s) ? { kind: 'screen', screen: s } : { kind: 'new' };
+    }
+    if (SLUG.test(p))
+        return { kind: 'project', slug: p };
+    return { kind: 'new' };
+}
+/** The path for a route — the inverse of `route`. */
+export function path(r) {
+    switch (r.kind) {
+        case 'new':
+            return '';
+        case 'run':
+            return r.id;
+        case 'screen':
+            return `-/${r.screen}`;
+        case 'project':
+            return r.slug;
+    }
+}

package/lib/run.d.ts

@@ -0,0 +1,3 @@
+export declare function Run({ id }: {
+    id: string;
+}): import("react").JSX.Element;

package/lib/run.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * One run, live: its transcript as it streams, the way to steer or stop it,
+ * and the pull request once it pushes one.
+ *
+ * The detail read is the record and the stream adds to it; the two overlap
+ * whenever a turn lands between the read and the subscribe, so turns are merged
+ * by sequence. A reconnect after a drop re-reads the detail — the platform drops
+ * a subscriber that falls behind, and frames missed then are only in the read.
+ *
+ * Steering is a queue the run drains between steps: a press is confirmed as
+ * RECORDED, and the status is left to the feed to correct.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { ExternalLink, GitPullRequest } from '@hanzogui/lucide-icons-2';
+import { Transcript, fold } from '@hanzo/ui/agents';
+import { Composer } from '@hanzo/ui/chat';
+import { useMemo, useState } from 'react';
+import { message, stop } from './api/sessions.js';
+import { outcome, pull, said, who } from './api/turn.js';
+import { useRun } from './data.js';
+import { useTarget } from './host.js';
+import { Out } from './out.js';
+const LIVE = new Set(['running', 'paused', '']);
+export function Run({ id }) {
+    const t = useTarget();
+    const { detail, record, events, status, refused } = useRun(t, id);
+    const [draft, setDraft] = useState('');
+    const [note, setNote] = useState('');
+    const [busy, setBusy] = useState(false);
+    const blocks = useMemo(() => fold(events
+        .map((e) => ({ kind: e.kind, actor: who(e.actor), seq: e.seq, id: e.id, text: said(e) }))
+        .filter((b) => b.text)), [events]);
+    const end = outcome(events);
+    const state = status || end.status;
+    const pr = pull(record?.pr ?? '', record?.repo ?? '');
+    const running = LIVE.has(state) && !detail.error;
+    const send = async () => {
+        if (!draft.trim() || busy)
+            return;
+        setBusy(true);
+        setNote('');
+        try {
+            await message(t, id, draft);
+            setDraft('');
+            setNote('Sent — the run reads it before its next step');
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'Could not reach this run');
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const halt = async () => {
+        setNote('');
+        try {
+            await stop(t, id);
+            setNote('Stop requested — the run keeps its work on its branch');
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'Could not stop this run');
+        }
+    };
+    const title = detail.value?.title || (detail.loading ? '' : 'Untitled run');
+    return (_jsx(YStack, { flex: 1, minH: 0, minW: 0, width: "100%", items: "center", children: _jsxs(YStack, { flex: 1, minH: 0, width: "100%", maxW: 816, px: "$6", children: [_jsxs(XStack, { pt: "$3", pb: "$2", gap: "$3", items: "center", minH: 44, children: [_jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { render: "h1", size: "$5", color: "$ink", numberOfLines: 1, children: title }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: [state || (detail.loading ? 'reading' : ''), record?.repo, record?.branch].filter(Boolean).join(' · ') })] }), pr.href ? (_jsx(Out, { href: pr.href, label: `Open pull request ${pr.label}`, children: _jsxs(XStack, { items: "center", gap: "$1.5", px: "$2.5", py: "$1.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: [_jsx(GitPullRequest, { size: 14 }), _jsx(SizableText, { size: "$2", color: "$ink", children: pr.label }), _jsx(ExternalLink, { size: 12, opacity: 0.6 })] }) })) : null] }), _jsx(Transcript, { blocks: blocks, empty: _jsx(SizableText, { size: "$2", color: "$soft", children: detail.error ? detail.error.message : detail.loading ? 'Reading this run…' : 'Waiting for the run’s first step…' }) }), _jsxs(YStack, { pb: "$4", pt: "$2", gap: "$2", children: [end.problem ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "The branch is pushed, and the pull request could not be opened." })) : null, note || refused ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note || refused })) : null, _jsx(Composer, { inline: true, value: draft, onChange: setDraft, onSend: () => void send(), onStop: () => void halt(), busy: running && !draft.trim(), disabled: !running || busy, placeholder: running ? 'Steer this run' : 'This run has finished', label: "Steer this run" })] })] }) }));
+}

package/lib/shelf.d.ts

@@ -0,0 +1,2 @@
+export declare function Artifacts(): import("react").JSX.Element;
+export declare function Templates(): import("react").JSX.Element;

package/lib/shelf.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The two shelves the rail opens: what this org has built (Artifacts), and the
+ * public starters (Templates).
+ *
+ * A project is a real row — `/v1/projects`, the same one a deployed site is
+ * served from — so opening one opens its workspace at its own address. A
+ * starter is taken as a COPY of its own repository (`POST /v1/projects/fork`),
+ * so what opens is that template, not a model's imitation of it.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { Boxes, ExternalLink, Globe } from '@hanzogui/lucide-icons-2';
+import { useState } from 'react';
+import { fork, templates } from './api/projects.js';
+import { useProjects, useRead } from './data.js';
+import { useHost, useTarget } from './host.js';
+import { Out } from './out.js';
+const SHOTS = 'https://hanzo.ai/templates';
+function Head({ title, says }) {
+    return (_jsxs(YStack, { gap: "$1", pb: "$4", children: [_jsx(SizableText, { render: "h1", size: "$6", color: "$ink", children: title }), _jsx(SizableText, { size: "$2", color: "$soft", children: says })] }));
+}
+function Card({ onPress, label, children }) {
+    return (_jsx(YStack, { render: "button", onPress: onPress, "aria-label": label, flexBasis: 260, grow: 1, maxW: 360, minW: 0, rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", overflow: "hidden", cursor: "pointer", hoverStyle: { borderColor: '$edge', bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: children }));
+}
+export function Artifacts() {
+    const t = useTarget();
+    const host = useHost();
+    const list = useProjects(t, Boolean(host.person));
+    return (_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", items: "center", children: _jsxs(YStack, { width: "100%", maxW: 1080, children: [_jsx(Head, { title: "Artifacts", says: "What this organization has built. Open one to keep building it." }), list.error ? (_jsx(SizableText, { size: "$2", color: "$soft", children: list.error.message })) : !host.person ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "Sign in to see what your organization has built." })) : list.loading && list.value.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "Reading your projects\u2026" })) : list.value.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "Nothing built yet. Describe something on the New page and it lands here." })) : (_jsx(XStack, { flexWrap: "wrap", gap: "$3", children: list.value.map((p) => (_jsx(Card, { label: `Open ${p.name}`, onPress: () => host.go(p.slug), children: _jsxs(YStack, { p: "$3", gap: "$1.5", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Globe, { size: 14, opacity: 0.7 }), _jsx(SizableText, { size: "$3", color: "$ink", numberOfLines: 1, flex: 1, children: p.name }), _jsx(SizableText, { size: "$1", color: "$soft", children: p.status || 'draft' })] }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: p.live ? new URL(p.live).host : 'Not deployed yet' })] }) }, p.slug))) }))] }) }));
+}
+function Shot({ slug }) {
+    const [gone, setGone] = useState(false);
+    return (_jsxs(YStack, { height: 140, bg: "$hover", items: "center", justify: "center", position: "relative", overflow: "hidden", children: [_jsxs(YStack, { items: "center", gap: "$2", opacity: 0.6, children: [_jsx(Boxes, { size: 24 }), _jsx(SizableText, { size: "$1", color: "$soft", textTransform: "uppercase", letterSpacing: 1, children: slug })] }), gone ? null : (_jsx("img", { src: `${SHOTS}/${encodeURIComponent(slug)}.webp`, alt: "", loading: "lazy", onError: () => setGone(true), style: { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' } }))] }));
+}
+export function Templates() {
+    const t = useTarget();
+    const host = useHost();
+    const list = useRead(() => templates(t), [], [t.api]);
+    const [busy, setBusy] = useState('');
+    const [failed, setFailed] = useState('');
+    const take = async (slug) => {
+        if (busy)
+            return;
+        if (!host.person)
+            return host.signIn?.();
+        setBusy(slug);
+        setFailed('');
+        try {
+            const made = await fork(t, slug);
+            host.go(made.slug || slug);
+        }
+        catch (e) {
+            setFailed(e instanceof Error ? e.message : 'Could not copy this template');
+        }
+        finally {
+            setBusy('');
+        }
+    };
+    return (_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", items: "center", children: _jsxs(YStack, { width: "100%", maxW: 1080, children: [_jsx(Head, { title: "Templates", says: "Start from a working app. Picking one copies its repository into a project of yours." }), failed ? (_jsx(SizableText, { size: "$2", color: "$soft", role: "status", pb: "$3", children: failed })) : null, list.error ? (_jsx(SizableText, { size: "$2", color: "$soft", children: list.error.message })) : (_jsx(XStack, { flexWrap: "wrap", gap: "$3", children: list.value.map((x) => (_jsxs(Card, { label: `Start from ${x.title}`, onPress: () => void take(x.slug), children: [_jsx(Shot, { slug: x.slug }), _jsxs(YStack, { p: "$3", gap: "$1", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { size: "$3", color: "$ink", numberOfLines: 1, flex: 1, children: busy === x.slug ? 'Copying…' : x.title }), x.framework ? (_jsx(SizableText, { size: "$1", color: "$soft", children: x.framework })) : null] }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 2, children: x.description })] })] }, x.slug))) })), _jsx(YStack, { pt: "$5", children: _jsxs(Out, { href: "https://gallery.hanzo.ai", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: "The whole catalog" }), _jsx(ExternalLink, { size: 12, opacity: 0.6 })] }) })] }) }));
+}

package/lib/tools.d.ts

@@ -0,0 +1,25 @@
+export interface Attached {
+    name: string;
+    text: string;
+}
+/** The ask with its attachments appended as fenced text. */
+export declare function compose(prompt: string, files: Attached[]): string;
+/** Read `list` into `have`, within the caps; answers the new list and what was refused. */
+export declare function read(have: Attached[], list: FileList): Promise<{
+    files: Attached[];
+    note: string;
+}>;
+export declare function Attach({ files, onFiles, onNote }: {
+    files: Attached[];
+    onFiles: (f: Attached[]) => void;
+    onNote: (n: string) => void;
+}): import("react").JSX.Element;
+/** The attached files as small removable marks. */
+export declare function Files({ files, onFiles }: {
+    files: Attached[];
+    onFiles: (f: Attached[]) => void;
+}): import("react").JSX.Element;
+export declare function Dictate({ onText, onNote }: {
+    onText: (text: string) => void;
+    onNote: (note: string) => void;
+}): import("react").JSX.Element;