@hanzo/build 0.2.27 → 0.2.29

package/lib/api/harness.d.ts

@@ -15,6 +15,17 @@
  *     ✓ step / → step / • step            its plan
  *   tokens used / <n>                     the end; the final message follows once more, bare
  *
+ * The sandbox's older harness (dev 0.6.94) prints another grammar: it stamps
+ * each item `[2026-09-29T16:07:35] ` and spells its headers its own way —
+ * `User instructions:`, `dev`, `thinking`, `exec <command> in <dir>`,
+ * `<command> succeeded in 1m 05s:`, `tool <call>`, `🌐 Search: <query>`,
+ * `apply_patch auto_approved=true:`, `turn diff:`, `tokens used: <n>`. A stamped
+ * line starts an item and says where the unstamped lines after it belong
+ * (`stamped`). Every stamped line no header owns is the harness's diagnostics.
+ *
+ * Warnings, errors, retries and diagnostics are the agent's log, one collapsed
+ * step, never the conversation; token counts are dropped.
+ *
  * The chunks are cut by a clock, not by line, so a line is read only once it
  * is whole. Lines no header owns — reasoning, or the tail of output from before
  * the recorded events begin — are prose. Everything here becomes TEXT on the

package/lib/api/harness.js

@@ -129,6 +129,13 @@ export function sections(diff) {
     return out;
 }
 const HEAD = /^(exec|codex|thinking|user|apply patch|tokens used|turn interrupted|context compacted)$/;
+/** The older harness's stamp on each item it starts. */
+const STAMP = /^\[\d{4}-\d\d-\d\dT\d\d:\d\d:\d\d(?:\.\d+)?Z?\] /;
+/** How long a stamped command or tool took: `14ms`, `2.1s`, `1m 05s`, `1h 02m`. */
+const TOOK = '(?: in [\\dhms. ]+)?';
+const RAN = new RegExp(`^(.+) (succeeded|exited (-?\\d+))${TOOK}:$`);
+const CALLED = new RegExp(`^(.+) (success|failed)${TOOK}:$`);
+const PATCHED = new RegExp(`^apply_patch\\(.*\\) exited (-?\\d+)${TOOK}:$`);
 const LEAD = /^(patch|mcp|web search|warning|ERROR|deprecated|model rerouted|hook): /;
 const RESULT = /^\s*(succeeded|exited (-?\d+)|declined|in progress)( in [\d.]+m?s)?:$/;
 /** A reader that appends the cards it finds to `out`, keyed by `mint`. */
@@ -168,8 +175,181 @@ export function harness(out, mint) {
         out.push(c);
         return c;
     };
+    // The agent's log: its warnings, errors and diagnostics, one step for the run.
+    let log = null;
+    const logged = (text) => {
+        if (!log)
+            log = step('Agent log', '', 'done');
+        log.output += log.output ? `\n${text}` : text;
+    };
+    let stamped = false;
+    let sink = 'none';
+    let into = null;
+    // A stamped command or tool is ended by name: its text as the harness printed it.
+    const running = new Map();
+    const begin = (item, name) => {
+        running.set(name, item);
+    };
+    const end = (name, ok) => {
+        const item = running.get(name);
+        if (!item)
+            return null;
+        running.delete(name);
+        item.ran = ok ? 'done' : 'error';
+        return item;
+    };
+    const stamp = (l) => {
+        settle();
+        into = null;
+        sink = 'none';
+        if (/^Hanzo Dev v\S+$/.test(l)) {
+            rules = 0;
+            sink = 'banner';
+            return;
+        }
+        if (l.startsWith('binary: ')) {
+            sink = 'banner';
+            return;
+        }
+        if (l === 'User instructions:') {
+            const c = { kind: 'said', key: mint(), who: 'person', text: '' };
+            out.push(c);
+            tasks.push({ card: c, lines: [] });
+            sink = 'task';
+            return;
+        }
+        if (l === 'dev') {
+            into = said('');
+            sink = 'said';
+            return;
+        }
+        if (l === 'thinking') {
+            into = step('Thinking', '', 'done');
+            sink = 'out';
+            return;
+        }
+        const exec = /^exec (.+) in (\S+)$/.exec(l);
+        if (exec) {
+            const file = reads(exec[1]);
+            const c = file
+                ? { kind: 'read', key: mint(), file: shown(file), ran: 'running' }
+                : { kind: 'shell', key: mint(), command: unwrap(exec[1]), output: '', ran: 'running' };
+            out.push(c);
+            begin(c, exec[1]);
+            return;
+        }
+        const ran = RAN.exec(l);
+        if (ran) {
+            const c = end(ran[1], ran[2] === 'succeeded');
+            if (c) {
+                // A read's output is the file it read, which the chip already names.
+                into = c;
+                sink = c.kind === 'shell' ? 'out' : 'drop';
+                return;
+            }
+        }
+        const custom = /^tool (.+) (success|failed)$/.exec(l);
+        if (custom) {
+            into = end(custom[1], custom[2] === 'success') ?? step(custom[1], 'tool', custom[2] === 'success' ? 'done' : 'error');
+            sink = 'out';
+            return;
+        }
+        const tool = /^tool (.+)$/.exec(l);
+        if (tool) {
+            into = step(tool[1], 'tool', 'running');
+            begin(into, tool[1]);
+            sink = 'out';
+            return;
+        }
+        const called = CALLED.exec(l);
+        if (called && running.has(called[1])) {
+            into = end(called[1], called[2] === 'success');
+            sink = 'out';
+            return;
+        }
+        const search = /^🌐 Search: (.*)$/.exec(l);
+        if (search) {
+            step('Web search', search[1], 'done');
+            return;
+        }
+        if (/^apply_patch auto_approved=\w+:$/.test(l)) {
+            patch();
+            sink = 'patch';
+            return;
+        }
+        const patched = PATCHED.exec(l);
+        if (patched) {
+            if (edit)
+                edit.card.ran = patched[1] === '0' ? 'done' : 'error';
+            sink = 'drop';
+            return;
+        }
+        if (l === 'turn diff:') {
+            diff = [];
+            sink = 'diff';
+            return;
+        }
+        if (/^tokens used: [\d,]+$/.test(l))
+            return;
+        if (/^task (interrupted|aborted)/.test(l)) {
+            for (const item of running.values())
+                item.ran = 'cancelled';
+            running.clear();
+            out.push({ kind: 'note', key: mint(), text: 'The agent was interrupted' });
+            return;
+        }
+        logged(l);
+        sink = 'log';
+    };
+    // An unstamped line of the stamped grammar, where the last stamped line said.
+    const under = (l) => {
+        switch (sink) {
+            case 'banner':
+                if (l === '--------' && ++rules === 3)
+                    sink = 'none';
+                return;
+            case 'task':
+                tasks[tasks.length - 1].lines.push(l);
+                return;
+            case 'said':
+                if (into && into.kind === 'said')
+                    into.text += into.text ? `\n${l}` : l;
+                return;
+            case 'out':
+                if (into && (into.kind === 'shell' || into.kind === 'step'))
+                    into.output += into.output ? `\n${l}` : l;
+                return;
+            case 'patch': {
+                const file = /^[AMD] (.+?)(?: -> (.+))?$/.exec(l);
+                if (file && edit)
+                    edit.paths.push(file[2] ?? file[1]);
+                return;
+            }
+            case 'diff':
+                diff.push(l);
+                return;
+            case 'log':
+                if (l.trim())
+                    logged(l);
+                return;
+            case 'drop':
+                return;
+        }
+        if (l.trim())
+            logged(l);
+    };
     const line = (raw) => {
         const l = raw.replace(ANSI, '').replace(/\r$/, '');
+        const at = STAMP.exec(l);
+        if (at) {
+            stamped = true;
+            stamp(l.slice(at[0].length));
+            return;
+        }
+        if (stamped) {
+            under(l);
+            return;
+        }
         if (mode === 'config') {
             if (l === '--------' && ++rules === 2)
                 mode = 'prose';
@@ -286,10 +466,10 @@ export function harness(out, mint) {
             mode = 'prose';
             return;
         }
-        const warn = /^(warning|ERROR|deprecated|model rerouted): ?(.*)$/.exec(l);
+        const warn = mode === 'output' || mode === 'agent' ? null : /^(warning|ERROR|deprecated|model rerouted): ?(.*)$/.exec(l);
         if (warn) {
             settle();
-            out.push({ kind: 'note', key: mint(), text: warn[1] === 'ERROR' ? warn[2] : `${warn[1]}: ${warn[2]}` });
+            logged(l);
             card = null;
             mode = 'prose';
             return;

package/lib/api/turn.d.ts

@@ -1,6 +1,11 @@
 import type { Event } from './sessions.ts';
 /** The payload as an object. A live frame may carry it as a JSON string. */
 export declare function decode(payload: unknown): Record<string, unknown> | string | null;
+/**
+ * A run's error as one plain line with what to do, never the log it came from:
+ * that goes in the Error step beside it (cards).
+ */
+export declare function plain(error: string): string;
 /**
  * One event's sentence, or '' when it says nothing a person needs. `mode` is
  * the run's, from its record: a plan run's final status says the plan.

package/lib/api/turn.js

@@ -70,7 +70,7 @@ function status(b, mode) {
             return branch ? `Pushed ${branch}${tail}${site}` : `Done${tail}${site}`;
         }
         case 'error':
-            return str(b.error) || 'The run hit an error';
+            return plain(str(b.error));
         case 'stopped':
             return branch && b.changed ? `Stopped — work kept on ${branch}` : 'Stopped';
         case 'paused':
@@ -81,6 +81,20 @@ function status(b, mode) {
     }
     return str(b.status);
 }
+/**
+ * A run's error as one plain line with what to do, never the log it came from:
+ * that goes in the Error step beside it (cards).
+ */
+export function plain(error) {
+    if (!error)
+        return 'The run hit an error';
+    const ours = /providers_exhausted|every provider refused|temporarily unavailable/i.test(error);
+    if (!ours && /\b402 Payment Required|insufficient (credit|balance)/i.test(error))
+        return 'Your balance is out of credit. Add credit, then try again.';
+    if (ours || /\b(429 Too Many Requests|503 Service Unavailable)|stream disconnected|retries exhausted|rate limit/i.test(error))
+        return 'The model did not answer. Try again in a moment, or pick another model.';
+    return 'The run stopped with an error. Try again, or follow up with what to change.';
+}
 /**
  * One event's sentence, or '' when it says nothing a person needs. `mode` is
  * the run's, from its record: a plan run's final status says the plan.
@@ -353,6 +367,8 @@ export function cards(events, mode = '') {
                 const line = status(b, mode);
                 if (line)
                     out.push({ kind: 'note', key: mint(), text: line });
+                if (str(b.status) === 'error' && str(b.error))
+                    out.push({ kind: 'step', key: mint(), name: 'Error', detail: '', output: str(b.error), ran: 'error' });
                 break;
             }
             case 'control': {

package/lib/desk.d.ts

@@ -1,6 +1,6 @@
 import { type DropdownMenuProps } from '@hanzo/ui';
 import type { Event } from './api/sessions.ts';
-export declare function Desk({ id, repo, branch, base, environment, mode, pr, title, project, sandbox, events, live, menu, refused, retry, onRetry, onHide, }: {
+export declare function Desk({ id, repo, branch, base, environment, mode, pr, title, project, sandbox, site, published, events, live, menu, refused, retry, onRetry, onHide, }: {
     id: string;
     repo: string;
     branch: string;
@@ -15,6 +15,10 @@ export declare function Desk({ id, repo, branch, base, environment, mode, pr, ti
     project: string;
     /** The sandbox the run holds, or '' before it leases one and on a machine. */
     sandbox: string;
+    /** Where the run's work is published, or '' before it is. */
+    site: string;
+    /** The run's latest publish, which loads the page again. */
+    published: number;
     events: Event[];
     live: boolean;
     /** What can be done to the run — rename, share, copy its id — as its header offers it. */

package/lib/desk.js

@@ -1,28 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * The pane beside a run's transcript: its codebase's environment, what it
- * pushed, its sandbox's desktop and shell, its files, and what it listens to.
+ * The pane beside a run's transcript, as tabs: the Browser showing where the run
+ * is published, its sandbox's Desktop and Terminal, what it produced, its files,
+ * what it pushed, and its codebase's environment.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
-import { Info, MoreHorizontal, PanelRightClose } from '@hanzogui/lucide-icons-2';
+import { ExternalLink, Info, MoreHorizontal, PanelRightClose, RefreshCcw } from '@hanzogui/lucide-icons-2';
 import { Button, DropdownMenu } from '@hanzo/ui';
-import { useState } from 'react';
+import { PreviewFrame } from '@hanzo/ui/agents';
+import { useRef, useState } from 'react';
 import { shell } from './api/turn.js';
 import { Door } from './door.js';
 import { Environment } from './environment.js';
-import { Files } from './files.js';
+import { Artifacts, Files } from './files.js';
 import { Git } from './git.js';
+import { Out } from './out.js';
 /** The tabs that are a surface of their own, drawn edge to edge. */
-const BLEED = ['desktop', 'terminal'];
-export function Desk({ id, repo, branch, base, environment, mode, pr, title, project, sandbox, events, live, menu, refused, retry, onRetry, onHide, }) {
-    // Until a tab is picked it follows the run's mode, which is known once the run
-    // is read: a setup run's work IS the environment, so it opens there.
+const BLEED = ['browser', 'desktop', 'terminal'];
+export function Desk({ id, repo, branch, base, environment, mode, pr, title, project, sandbox, site, published, events, live, menu, refused, retry, onRetry, onHide, }) {
+    // Until a tab is picked it follows the run: a setup run's work IS the
+    // environment, a published run opens on its site, any other on its terminal.
     const [picked, setTab] = useState(null);
-    const tab = picked ?? (mode === 'setup' ? 'environment' : 'terminal');
+    const tab = picked ?? (mode === 'setup' ? 'environment' : site ? 'browser' : 'terminal');
     const name = repo.split('/').filter(Boolean).pop() || repo;
     const lines = shell(events);
     const bleed = BLEED.includes(tab);
-    return (_jsxs(YStack, { role: "complementary", "aria-label": "Run details", flex: 1, minW: 0, minH: 0, borderLeftWidth: 1, borderColor: "$borderColor", display: "none", $md: { display: 'flex' }, children: [_jsxs(XStack, { px: "$2", pt: "$2", gap: "$1", borderBottomWidth: 1, borderColor: "$borderColor", items: "center", children: [_jsxs(XStack, { flex: 1, minW: 0, gap: "$1", overflow: "scroll", children: [_jsx(TabButton, { id: "environment", tab: tab, onPick: setTab, children: "Environment" }), _jsx(TabButton, { id: "git", tab: tab, onPick: setTab, children: "Git" }), _jsx(TabButton, { id: "desktop", tab: tab, onPick: setTab, children: "Desktop" }), _jsx(TabButton, { id: "terminal", tab: tab, onPick: setTab, children: "Terminal" }), _jsx(TabButton, { id: "files", tab: tab, onPick: setTab, children: "Files" }), _jsx(TabButton, { id: "subscriptions", tab: tab, onPick: setTab, children: "Subscriptions" })] }), _jsx(XStack, { render: "button", "aria-label": "Hide the side pane", px: "$2", py: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, onPress: onHide, children: _jsx(PanelRightClose, { size: 16 }) }), _jsx(DropdownMenu, { trigger: _jsx(XStack, { render: "button", "aria-label": "Run actions", px: "$2", py: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(MoreHorizontal, { size: 16 }) }), items: [...menu, { key: 'details', label: 'Details', icon: _jsx(Info, { size: 16 }), onSelect: () => setTab('environment') }] })] }), _jsxs(YStack, { flex: 1, minH: 0, overflow: bleed ? 'hidden' : 'scroll', px: bleed ? 0 : '$3', py: bleed ? 0 : '$3', children: [tab === 'environment' ? (_jsxs(YStack, { gap: "$2", children: [_jsx(Environment, { repo: name, busy: live && mode === 'setup' }), _jsx(SizableText, { size: "$2", color: "$ink", pt: "$4", children: "This run" }), _jsx(Fact, { label: "Run", value: id }), _jsx(Fact, { label: "Repository", value: name || '—' }), _jsx(Fact, { label: "Branch", value: branch || '—' }), _jsx(Fact, { label: "Base", value: base || '—' }), _jsx(Fact, { label: "Runs on", value: environment || 'sandbox' }), _jsx(Fact, { label: "Mode", value: mode || 'build' })] })) : null, tab === 'git' ? _jsx(Git, { session: id, title: title, live: live }) : null, tab === 'desktop' ? _jsx(Door, { which: "screen", sandbox: sandbox, live: live, session: id }) : null, tab === 'terminal' ? (_jsx(Terminal, { id: id, sandbox: sandbox, lines: lines, live: live, refused: refused, retry: retry, onRetry: onRetry })) : null, tab === 'files' ? (_jsx(Files, { session: id, repo: repo, branch: branch, sandbox: sandbox, live: live, mode: mode, project: project, pr: pr, onEnvironment: () => setTab('environment') })) : null, tab === 'subscriptions' ? (_jsx(YStack, { flex: 1, items: "center", justify: "center", px: "$6", children: _jsx(SizableText, { size: "$2", color: "$soft", style: { textAlign: 'center', maxWidth: 320 }, children: "Ask an agent to subscribe to a Slack channel or thread, a pull request, or a timer." }) })) : null] })] }));
+    return (_jsxs(YStack, { role: "complementary", "aria-label": "Run details", flex: 1, minW: 0, minH: 0, borderLeftWidth: 1, borderColor: "$borderColor", display: "none", $md: { display: 'flex' }, children: [_jsxs(XStack, { px: "$2", pt: "$2", gap: "$1", borderBottomWidth: 1, borderColor: "$borderColor", items: "center", children: [_jsxs(XStack, { flex: 1, minW: 0, gap: "$1", overflow: "scroll", children: [_jsx(TabButton, { id: "browser", tab: tab, onPick: setTab, children: "Browser" }), _jsx(TabButton, { id: "desktop", tab: tab, onPick: setTab, children: "Desktop" }), _jsx(TabButton, { id: "terminal", tab: tab, onPick: setTab, children: "Terminal" }), _jsx(TabButton, { id: "artifacts", tab: tab, onPick: setTab, children: "Artifacts" }), _jsx(TabButton, { id: "files", tab: tab, onPick: setTab, children: "Files" }), _jsx(TabButton, { id: "git", tab: tab, onPick: setTab, children: "Git" }), _jsx(TabButton, { id: "environment", tab: tab, onPick: setTab, children: "Environment" })] }), _jsx(XStack, { render: "button", "aria-label": "Hide the side pane", px: "$2", py: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, onPress: onHide, children: _jsx(PanelRightClose, { size: 16 }) }), _jsx(DropdownMenu, { trigger: _jsx(XStack, { render: "button", "aria-label": "Run actions", px: "$2", py: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(MoreHorizontal, { size: 16 }) }), items: [...menu, { key: 'details', label: 'Details', icon: _jsx(Info, { size: 16 }), onSelect: () => setTab('environment') }] })] }), _jsxs(YStack, { flex: 1, minH: 0, overflow: bleed ? 'hidden' : 'scroll', px: bleed ? 0 : '$3', py: bleed ? 0 : '$3', children: [tab === 'environment' ? (_jsxs(YStack, { gap: "$2", children: [_jsx(Environment, { repo: name, busy: live && mode === 'setup' }), _jsx(SizableText, { size: "$2", color: "$ink", pt: "$4", children: "This run" }), _jsx(Fact, { label: "Run", value: id }), _jsx(Fact, { label: "Repository", value: name || '—' }), _jsx(Fact, { label: "Branch", value: branch || '—' }), _jsx(Fact, { label: "Base", value: base || '—' }), _jsx(Fact, { label: "Runs on", value: environment || 'sandbox' }), _jsx(Fact, { label: "Mode", value: mode || 'build' })] })) : null, tab === 'browser' ? _jsx(Browser, { site: site, live: live }, published) : null, tab === 'git' ? _jsx(Git, { session: id, title: title, live: live }) : null, tab === 'desktop' ? _jsx(Door, { which: "screen", sandbox: sandbox, live: live, session: id }) : null, tab === 'terminal' ? (_jsx(Terminal, { id: id, sandbox: sandbox, lines: lines, live: live, refused: refused, retry: retry, onRetry: onRetry })) : null, tab === 'artifacts' ? (_jsx(Artifacts, { repo: repo, branch: branch, mode: mode, project: project, site: site, pr: pr, onEnvironment: () => setTab('environment') })) : null, tab === 'files' ? _jsx(Files, { session: id, repo: repo, branch: branch, sandbox: sandbox, live: live }) : null] })] }));
+}
+/**
+ * The Browser tab: the page where the run published its work, framed, with its
+ * address, a reload and the page in a tab of its own.
+ */
+function Browser({ site, live }) {
+    const frame = useRef(null);
+    return (_jsxs(YStack, { flex: 1, minH: 0, children: [_jsxs(XStack, { px: "$2", py: "$1.5", gap: "$1.5", items: "center", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsx(XStack, { render: "button", "aria-label": "Reload the page", onPress: () => frame.current?.reload(), p: "$1.5", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(RefreshCcw, { size: 14 }) }), _jsx(SizableText, { flex: 1, minW: 0, size: "$1", color: "$soft", numberOfLines: 1, style: mono, children: site || 'Not published yet' }), site ? (_jsx(Out, { href: site, label: "Open in a new tab", children: _jsx(XStack, { p: "$1.5", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(ExternalLink, { size: 14 }) }) })) : null] }), _jsx(PreviewFrame, { ref: frame, src: site, title: "Where this run is published", device: "desktop", empty: _jsxs(YStack, { items: "center", gap: "$2", p: "$6", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: live ? 'Not published yet' : 'Nothing was published' }), _jsx(SizableText, { size: "$2", color: "$soft", style: { textAlign: 'center' }, children: live ? 'The page appears here once the run publishes its site.' : 'This run published no site. Its work is on its branch.' })] }) })] }));
 }
 function TabButton({ id, tab, onPick, children }) {
     const on = tab === id;

package/lib/files.d.ts

@@ -1,11 +1,17 @@
-export declare function Files({ session, repo, branch, sandbox, live, mode, project, pr, onEnvironment, }: {
+export declare function Files({ session, repo, branch, sandbox, live, }: {
     session: string;
     repo: string;
     branch: string;
     sandbox: string;
     live: boolean;
+}): import("react").JSX.Element;
+export declare function Artifacts({ repo, branch, mode, project, site, pr, onEnvironment, }: {
+    repo: string;
+    branch: string;
     mode: string;
     project: string;
+    /** Where the run's work is published, or ''. */
+    site: string;
     pr: {
         href: string;
         label: string;

package/lib/files.js

@@ -1,12 +1,12 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * A run's Files tab. Files is its working tree: live from the sandbox while the
- * run holds one — every edit the agent has made, committed or not — and its
- * branch on the forge otherwise. Artifacts is what the run produced: its pull
- * request, its branch, its environment proposal and the project it built.
+ * A run's Files tab: its working tree, live from the sandbox while the run holds
+ * one — every edit the agent has made, committed or not — and its branch on the
+ * forge otherwise. And its Artifacts tab: what the run produced — its published
+ * site, its pull request, its branch, its environment proposal and its project.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
-import { ExternalLink, File, Folder, GitBranch, GitPullRequest, Layers, Settings2 } from '@hanzogui/lucide-icons-2';
+import { ExternalLink, File, Folder, Globe, GitBranch, GitPullRequest, Layers, Settings2 } from '@hanzogui/lucide-icons-2';
 import { useState } from 'react';
 import { blob, tree } from './api/changes.js';
 import { read as look } from './api/sandbox.js';
@@ -14,12 +14,11 @@ import { useRead } from './data.js';
 import { useHost, useTarget } from './host.js';
 import { Out } from './out.js';
 const monoWrap = { whiteSpace: 'pre-wrap', fontFamily: 'var(--f-mono, ui-monospace, monospace)' };
-export function Files({ session, repo, branch, sandbox, live, mode, project, pr, onEnvironment, }) {
-    const [pane, setPane] = useState('files');
+export function Files({ session, repo, branch, sandbox, live, }) {
     const reachable = live && Boolean(sandbox);
     const [source, setSource] = useState(reachable ? 'live' : 'branch');
     const from = reachable ? source : 'branch';
-    return (_jsxs(YStack, { gap: "$3", children: [_jsxs(XStack, { gap: "$1", items: "center", flexWrap: "wrap", children: [_jsx(Pick, { on: pane === 'files', onPress: () => setPane('files'), children: "Files" }), _jsx(Pick, { on: pane === 'artifacts', onPress: () => setPane('artifacts'), children: "Artifacts" }), _jsx(XStack, { flex: 1 }), pane === 'files' && reachable ? (_jsxs(_Fragment, { children: [_jsx(Pick, { on: from === 'live', onPress: () => setSource('live'), children: "Live" }), _jsx(Pick, { on: from === 'branch', onPress: () => setSource('branch'), children: "Branch" })] })) : null] }), pane === 'artifacts' ? (_jsx(Artifacts, { repo: repo, branch: branch, mode: mode, project: project, pr: pr, onEnvironment: onEnvironment })) : from === 'live' ? (_jsx(Live, { sandbox: sandbox })) : (_jsx(Branch, { session: session, label: `${repo}${branch ? `@${branch}` : ''}` }))] }));
+    return (_jsxs(YStack, { gap: "$3", children: [reachable ? (_jsxs(XStack, { gap: "$1", items: "center", flexWrap: "wrap", children: [_jsx(Pick, { on: from === 'live', onPress: () => setSource('live'), children: "Live" }), _jsx(Pick, { on: from === 'branch', onPress: () => setSource('branch'), children: "Branch" })] })) : null, from === 'live' ? _jsx(Live, { sandbox: sandbox }) : _jsx(Branch, { session: session, label: `${repo}${branch ? `@${branch}` : ''}` })] }));
 }
 /** The sandbox's working tree, as it is right now. */
 function Live({ sandbox }) {
@@ -85,9 +84,11 @@ function Branch({ session, label }) {
 function Listing({ where, up, error, loading, rows, file, body, }) {
     return (_jsxs(YStack, { gap: "$2", children: [_jsxs(XStack, { gap: "$2", items: "center", children: [up ? (_jsx(XStack, { render: "button", "aria-label": "Up one directory", onPress: up, px: "$1", py: "$1", children: _jsx(SizableText, { size: "$1", color: "$soft", children: "Up" }) })) : null, _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: where })] }), error ? (_jsx(SizableText, { size: "$2", color: "$soft", children: error })) : loading ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "Reading\u2026" })) : rows.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "This directory is empty." })) : (rows.map((r) => (_jsxs(XStack, { render: "button", "aria-label": r.dir === false ? `Read ${r.name}` : `Open ${r.name}`, onPress: r.onPress, items: "center", gap: "$2", py: "$1", hoverStyle: { bg: '$hover' }, children: [r.dir === false ? _jsx(File, { size: 14 }) : r.dir ? _jsx(Folder, { size: 14 }) : _jsx(File, { size: 14, opacity: 0.6 }), _jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, style: { textAlign: 'left' }, children: r.name })] }, r.key)))), file && body ? (_jsxs(YStack, { gap: "$1", pt: "$2", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: file }), _jsx(SizableText, { size: "$1", color: "$ink", style: monoWrap, children: body })] })) : null] }));
 }
-function Artifacts({ repo, branch, mode, project, pr, onEnvironment, }) {
+export function Artifacts({ repo, branch, mode, project, site, pr, onEnvironment, }) {
     const host = useHost();
     const items = [];
+    if (site)
+        items.push({ key: 'site', icon: _jsx(Globe, { size: 16 }), title: site.replace(/^https:\/\//, ''), note: 'Where this run is published', href: site });
     if (pr.href)
         items.push({ key: 'pr', icon: _jsx(GitPullRequest, { size: 16 }), title: `Pull request ${pr.label}`, note: 'Opened on the forge', href: pr.href });
     if (branch)

package/lib/grip.d.ts

@@ -0,0 +1,40 @@
+/**
+ * A column's free edge, which is also how wide the column is: a vertical
+ * separator a person drags, or moves with the arrow keys, to size the column
+ * beside it. The project workspace sizes its chat with it, and a host sizes its
+ * own column with it (the Hanzo app's sidebar).
+ *
+ *   side      the edge of the window the column is pinned to: `left` grows
+ *             rightwards (a sidebar, the chat), `right` grows leftwards (an
+ *             aside). One control for both, the arithmetic reflected.
+ *   span      the column's width now, px; `floor` and `ceil` bound it.
+ *   onSpan    the width while it moves, at most once a frame.
+ *   onKeep    the width it settled on: a drag let go, a key, a double-click.
+ *   onShut    when given, a drag pulled well past the floor, or a key pressed
+ *             at it, puts the column away; absent, the floor holds.
+ *   reset     the width a double-click returns to.
+ *
+ * Keys: the arrows step 8px (32px with Shift), Home and End go to the floor and
+ * the ceiling. Pointer events, so a mouse, a trackpad, a touchscreen and a pen
+ * are one path, with the pointer captured: a drag that outruns the handle, or
+ * crosses a framed page, keeps sizing. The drag is measured from the column as
+ * drawn when it begins, so the edge never jumps to the cursor.
+ *
+ * It sits inside the column, absolutely, on the column's free edge; the rest of
+ * its props place it elsewhere (a gutter beside the column) and win.
+ */
+import { YStack } from '@hanzo/gui';
+import { type ComponentProps } from 'react';
+export interface GripProps extends Omit<ComponentProps<typeof YStack>, 'children'> {
+    side: 'left' | 'right';
+    span: number;
+    floor: number;
+    ceil: number;
+    reset: number;
+    onSpan: (n: number) => void;
+    onKeep?: (n: number) => void;
+    onShut?: () => void;
+    /** The separator's accessible name: "Resize sidebar", "Resize the chat". */
+    label: string;
+}
+export declare function Grip({ side, span, floor, ceil, reset, onSpan, onKeep, onShut, label, ...rest }: GripProps): import("react").JSX.Element;

package/lib/grip.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A column's free edge, which is also how wide the column is: a vertical
+ * separator a person drags, or moves with the arrow keys, to size the column
+ * beside it. The project workspace sizes its chat with it, and a host sizes its
+ * own column with it (the Hanzo app's sidebar).
+ *
+ *   side      the edge of the window the column is pinned to: `left` grows
+ *             rightwards (a sidebar, the chat), `right` grows leftwards (an
+ *             aside). One control for both, the arithmetic reflected.
+ *   span      the column's width now, px; `floor` and `ceil` bound it.
+ *   onSpan    the width while it moves, at most once a frame.
+ *   onKeep    the width it settled on: a drag let go, a key, a double-click.
+ *   onShut    when given, a drag pulled well past the floor, or a key pressed
+ *             at it, puts the column away; absent, the floor holds.
+ *   reset     the width a double-click returns to.
+ *
+ * Keys: the arrows step 8px (32px with Shift), Home and End go to the floor and
+ * the ceiling. Pointer events, so a mouse, a trackpad, a touchscreen and a pen
+ * are one path, with the pointer captured: a drag that outruns the handle, or
+ * crosses a framed page, keeps sizing. The drag is measured from the column as
+ * drawn when it begins, so the edge never jumps to the cursor.
+ *
+ * It sits inside the column, absolutely, on the column's free edge; the rest of
+ * its props place it elsewhere (a gutter beside the column) and win.
+ */
+import { YStack } from '@hanzo/gui';
+import { useEffect, useRef, useState } from 'react';
+/** A key's step, px; with Shift, the long one. */
+const STEP = 8;
+const LONG = 32;
+/** How far past the floor a drag is pulled before it shuts the column, px: a deliberate pull, not a twitch. */
+const SLACK = 48;
+export function Grip({ side, span, floor, ceil, reset, onSpan, onKeep, onShut, label, ...rest }) {
+    // The pinned edge in client coordinates, taken as the drag begins.
+    const held = useRef(0);
+    // Whether a press holds the pointer and whether it has moved since, the width
+    // it last asked for, and the frame that will draw it. A press that never moves
+    // keeps nothing.
+    const drag = useRef('none');
+    const want = useRef(span);
+    const frame = useRef(0);
+    const [hovered, setHovered] = useState(false);
+    const [keyed, setKeyed] = useState(false);
+    const [moving, setMoving] = useState(false);
+    useEffect(() => () => cancelAnimationFrame(frame.current), []);
+    const clamp = (n) => Math.round(Math.min(ceil, Math.max(floor, n)));
+    const settle = (n) => {
+        onSpan(n);
+        onKeep?.(n);
+    };
+    const stop = () => {
+        drag.current = 'none';
+        cancelAnimationFrame(frame.current);
+        frame.current = 0;
+        setMoving(false);
+    };
+    const wider = side === 'left' ? 'ArrowRight' : 'ArrowLeft';
+    const narrower = side === 'left' ? 'ArrowLeft' : 'ArrowRight';
+    return (_jsx(YStack, { role: "separator", "aria-orientation": "vertical", "aria-label": label, "aria-valuenow": Math.round(span), "aria-valuemin": floor, "aria-valuemax": ceil, tabIndex: 0, "data-slot": "grip", "data-moving": moving ? '' : undefined, position: "absolute", t: 0, b: 0, ...(side === 'left' ? { r: 0 } : { l: 0 }), width: 8, z: 10, items: "center", cursor: "col-resize", outlineWidth: 0, style: { touchAction: 'none' }, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), 
+        // The line is the focus ring, drawn for a keyboard's focus and not a pointer's.
+        onFocus: (e) => setKeyed(e.currentTarget.matches(':focus-visible')), onBlur: () => setKeyed(false), onPointerDown: (e) => {
+            if (e.button !== 0)
+                return;
+            // No text selection starts under a drag.
+            e.preventDefault();
+            e.currentTarget.setPointerCapture(e.pointerId);
+            const drawn = e.currentTarget.parentElement?.getBoundingClientRect().width ?? span;
+            held.current = side === 'left' ? e.clientX - drawn : e.clientX + drawn;
+            want.current = clamp(drawn);
+            drag.current = 'held';
+            setMoving(true);
+        }, onPointerMove: (e) => {
+            if (drag.current === 'none')
+                return;
+            drag.current = 'moved';
+            const pulled = side === 'left' ? e.clientX - held.current : held.current - e.clientX;
+            if (onShut && pulled < floor - SLACK) {
+                stop();
+                e.currentTarget.releasePointerCapture(e.pointerId);
+                onShut();
+                return;
+            }
+            want.current = clamp(pulled);
+            if (frame.current)
+                return;
+            frame.current = requestAnimationFrame(() => {
+                frame.current = 0;
+                onSpan(want.current);
+            });
+        }, 
+        // A drag ends when the pointer is let go: lifted, or taken by the browser.
+        onLostPointerCapture: () => {
+            const moved = drag.current === 'moved';
+            stop();
+            if (moved)
+                settle(want.current);
+        }, onDoubleClick: () => settle(clamp(reset)), onKeyDown: (e) => {
+            const step = e.shiftKey ? LONG : STEP;
+            const to = e.key === wider ? span + step : e.key === narrower ? span - step : e.key === 'Home' ? floor : e.key === 'End' ? ceil : null;
+            if (to === null)
+                return;
+            e.preventDefault?.();
+            if (onShut && to < floor)
+                return onShut();
+            settle(clamp(to));
+        }, ...rest, children: _jsx(YStack, { width: 2, height: "100%", rounded: 1, bg: keyed || moving ? '$outlineColor' : hovered ? '$rim' : 'transparent', pointerEvents: "none" }) }));
+}

package/lib/index.d.ts

@@ -7,12 +7,14 @@
  * 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`.
+ * `HostProvider`. `Grip` sizes that rail: the edge the builder sizes its own
+ * chat with.
  */
 export { Builder, nav } from './builder.tsx';
 export { DevSection, DOTS, useSessions } from './section.tsx';
 export { HostProvider } from './host.tsx';
 export { Slack, useWho, Who } from './foot.tsx';
+export { Grip, type GripProps } from './grip.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

@@ -7,11 +7,13 @@
  * 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`.
+ * `HostProvider`. `Grip` sizes that rail: the edge the builder sizes its own
+ * chat with.
  */
 export { Builder, nav } from './builder.js';
 export { DevSection, DOTS, useSessions } from './section.js';
 export { HostProvider } from './host.js';
 export { Slack, useWho, Who } from './foot.js';
+export { Grip } from './grip.js';
 export { administers } from './claims.js';
 export { path, route, SESSION, SLUG } from './route.js';

package/lib/project.js

@@ -3,13 +3,19 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * 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
+ *   bar     mark · project · history · chat toggle | Preview Files Code Layers |
+ *           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
+ *   right   the deployed page, framed under its own bar (reload · page · device
+ *           · open), and kept loaded while another view is open; 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
  *
+ * The edge between left and right is dragged, or moved with the arrow keys, to
+ * size the chat, and the width is kept per browser; the right side keeps room
+ * for a page whatever the chat asked for.
+ *
  * 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
@@ -41,6 +47,7 @@ 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 { Merge } from './git.js';
+import { Grip } from './grip.js';
 import { useHost, useTarget } from './host.js';
 import { MODES } from './landing.js';
 import { Out } from './out.js';
@@ -49,6 +56,14 @@ import { Attach, compose, Dictate, Files } from './tools.js';
 const LIVE = new Set(['running', 'paused']);
 /** How often a project being published is read again, ms. */
 const AGAIN = 5000;
+/** The chat's width beside the work, px: its default, and the two it is kept between. */
+const CHAT_WIDTH = 360;
+const CHAT_FLOOR = 300;
+const CHAT_CEIL = 640;
+/** The Workspace's gutter between the chat and the work, and its margin right of the work, px ($3). */
+const GUTTER = 12;
+/** What the work keeps beside the chat however wide the chat was asked to be, px. */
+const WORK = 400 + 2 * GUTTER;
 /** One run in the conversation: what was asked, and what it came to. */
 function Turn({ run, open, onOpen, project }) {
     const t = useTarget();
@@ -95,6 +110,11 @@ export function Project({ slug }) {
     const [view, setView] = useKept(`hanzo.build.view.${slug}`, 'preview');
     const [device, setDevice] = useState('desktop');
     const [collapsed, setCollapsed] = useKept('hanzo.build.chat', false);
+    const [split, setSplit] = useKept('hanzo.build.split', CHAT_WIDTH);
+    // The workspace's width, which bounds the chat so the work keeps its room.
+    const [room, setRoom] = useState(0);
+    const most = room ? Math.max(CHAT_FLOOR, Math.min(CHAT_CEIL, room - WORK)) : CHAT_CEIL;
+    const across = Math.min(most, Math.max(CHAT_FLOOR, split));
     // Below md the chat and the work take turns, and Chat is one more view to switch back to.
     const [pane, setPane] = useState('chat');
     const wide = useMedia().md;
@@ -284,7 +304,7 @@ export function Project({ slug }) {
     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
+    const chat = (_jsxs(YStack, { flex: 1, minH: 0, position: "relative", 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?.live
                             ? `${project.name} 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.`
@@ -296,25 +316,28 @@ export function Project({ slug }) {
                                         ? `${project.name} is loaded and nothing is published yet. Say what to change and it gets built.`
                                         : `${slug} is loaded. 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, run.record?.mode) })).filter((b) => b.text)).map((b) => (_jsx(SizableText, { size: "$1", color: "$soft", children: b.text }, b.key))), pr.href ? (_jsxs(XStack, { items: "center", gap: "$2", flexWrap: "wrap", children: [_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 })] }), _jsx(Merge, { session: r.id, open: proposing, onMerged: merged })] })) : 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 ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note })) : 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 (current && running ? steer(current) : send()), onStop: current
                             ? () => void stop(t, current).then(() => setNote('Stop requested — the run keeps its work on its branch'), (e) => setNote(e.message))
-                            : 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: building ? (project?.forked ? 'Publishing your copy…' : 'Publishing…') : failed ? 'Publishing failed' : 'Nothing deployed yet' }), _jsx(SizableText, { size: "$2", color: "$soft", text: "center", children: building ? 'Its page appears here when the build finishes.' : failed ? why : '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}` }, round)) : (_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) => {
+                            : 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 })] })] }), wide && !collapsed ? (_jsx(Grip, { side: "left", span: across, floor: CHAT_FLOOR, ceil: most, reset: CHAT_WIDTH, onSpan: setSplit, label: "Resize the chat", r: -GUTTER, width: GUTTER })) : null] }));
+    // The preview stays loaded while another view is open, so coming back to it
+    // is the page as it was left.
+    const preview = (_jsxs(YStack, { "data-slot": "preview", flex: 1, minH: 0, minW: 0, gap: "$2", display: view === 'preview' ? 'flex' : 'none', children: [_jsxs(XStack, { "data-slot": "preview-bar", items: "center", gap: "$1.5", minW: 0, shrink: 0, "$max-md": { px: '$2' }, children: [_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, shrink: 1 }), _jsx(XStack, { flex: 1 }), _jsx(Views, { views: DEVICES, value: device, onChange: (d) => setDevice(d), label: "Device", labels: "none" }), 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] }), _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: building ? (project?.forked ? 'Publishing your copy…' : 'Publishing…') : failed ? 'Publishing failed' : 'Nothing deployed yet' }), _jsx(SizableText, { size: "$2", color: "$soft", text: "center", children: building ? 'Its page appears here when the build finishes.' : failed ? why : '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 })] }));
+    const body = view === 'preview' ? null : 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}` }, round)) : (_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", 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' }, "$max-md": { display: 'none' }, children: _jsx(PanelLeft, { size: 16 }) })] }), middle: _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Views, { views: [...VIEWS, CHAT], value: pane === 'chat' && !wide ? 'chat' : view, onChange: (v) => {
-                                if (v === 'chat')
-                                    return setPane('chat');
-                                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: () => {
+    return (_jsxs(_Fragment, { children: [_jsxs(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' }, "$max-md": { display: 'none' }, children: _jsx(PanelLeft, { size: 16 }) })] }), middle: _jsx(Views, { views: [...VIEWS, CHAT], value: pane === 'chat' && !wide ? 'chat' : view, onChange: (v) => {
+                        if (v === 'chat')
+                            return setPane('chat');
+                        setView(v);
+                        setPane('view');
+                    }, label: "View" }), 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, width: across, onLayout: (e) => setRoom(e.nativeEvent.layout.width), children: [preview, 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: () => {

package/lib/run.js

@@ -35,7 +35,7 @@ import { ENSO, label as named, models } from './api/models.js';
 import { list, message, pause, publish, rename, resume, stop, story, took } from './api/sessions.js';
 import { answer, cards, outcome, pull, settled, steps } from './api/turn.js';
 import { verdict } from './api/verdict.js';
-import { useKept, useRead, useRun } from './data.js';
+import { useKept, useProjects, useRead, useRun } from './data.js';
 import { Desk } from './desk.js';
 import { useHost, useTarget } from './host.js';
 import { EFFORTS } from './landing.js';
@@ -74,6 +74,15 @@ export function Run({ id }) {
     const plan = useMemo(() => steps(events), [events]);
     const kept = useMemo(() => settled(events), [events]);
     const state = status || end.status;
+    // Where the run's work is published: its project's own address, read again when
+    // the run says it went live, never an address an event names.
+    const built = useProjects(t, signed && Boolean(record?.project));
+    const rebuilt = built.reload;
+    useEffect(() => {
+        if (end.published)
+            rebuilt();
+    }, [end.published, rebuilt]);
+    const site = built.value.find((p) => p.slug === record?.project)?.live ?? '';
     const pr = pull(record?.pr ?? '', record?.repo ?? '');
     const live = LIVE.has(state);
     const running = signed && live && !detail.error;
@@ -290,7 +299,7 @@ export function Run({ id }) {
                                                 : 'This run is still working.' }), _jsx(Steer, { onCommand: command, withhold: [
                                             ...(paused ? ['pause'] : ['resume']),
                                             ...(busy || waiting ? ['pause', 'resume', 'stop'] : []),
-                                        ] }), _jsx(Button, { size: "sm", disabled: notify, onPress: () => void ask(), children: notify ? 'You will be notified' : 'Notify me' })] })) : null, _jsx(Composer, { inline: true, value: draft, onChange: setDraft, onSend: send, disabled: !signed || busy || waiting || !(running || finished), placeholder: placeholder, label: steering ? 'Steer this run' : 'Follow up on this run', foot: tuning }), _jsx(SizableText, { size: "$1", color: "$soft", style: { textAlign: 'center' }, children: "Hanzo is AI and can make mistakes." })] })] }), desk ? (_jsx(Desk, { id: id, repo: record?.repo ?? '', branch: record?.branch ?? '', base: record?.base ?? '', environment: record?.environment ?? '', mode: mode, pr: pr, title: title, project: record?.project ?? '', sandbox: record?.sandbox ?? '', events: events, live: running, menu: [...manage, ...sharing], refused: signed ? refused || (detail.error ? detail.error.message : '') : 'Sign in to follow this run.', retry: signed ? 'Retry' : 'Sign in', onRetry: signed ? detail.reload : () => host.signIn?.(), onHide: () => setDesk(false) })) : null, _jsx(Dialog, { open: naming, onOpenChange: setNaming, children: _jsxs(DialogContent, { maxW: 480, children: [_jsx(DialogTitle, { children: "Rename this run" }), _jsx(Input, { autoFocus: true, value: name, onChangeText: setName, "aria-label": "The run\u2019s name", maxLength: 512, onKeyDown: (e) => {
+                                        ] }), _jsx(Button, { size: "sm", disabled: notify, onPress: () => void ask(), children: notify ? 'You will be notified' : 'Notify me' })] })) : null, _jsx(Composer, { inline: true, value: draft, onChange: setDraft, onSend: send, disabled: !signed || busy || waiting || !(running || finished), placeholder: placeholder, label: steering ? 'Steer this run' : 'Follow up on this run', foot: tuning }), _jsx(SizableText, { size: "$1", color: "$soft", style: { textAlign: 'center' }, children: "Hanzo is AI and can make mistakes." })] })] }), desk ? (_jsx(Desk, { id: id, repo: record?.repo ?? '', branch: record?.branch ?? '', base: record?.base ?? '', environment: record?.environment ?? '', mode: mode, pr: pr, title: title, project: record?.project ?? '', sandbox: record?.sandbox ?? '', site: site, published: end.published, events: events, live: running, menu: [...manage, ...sharing], refused: signed ? refused || (detail.error ? detail.error.message : '') : 'Sign in to follow this run.', retry: signed ? 'Retry' : 'Sign in', onRetry: signed ? detail.reload : () => host.signIn?.(), onHide: () => setDesk(false) })) : null, _jsx(Dialog, { open: naming, onOpenChange: setNaming, children: _jsxs(DialogContent, { maxW: 480, children: [_jsx(DialogTitle, { children: "Rename this run" }), _jsx(Input, { autoFocus: true, value: name, onChangeText: setName, "aria-label": "The run\u2019s name", maxLength: 512, onKeyDown: (e) => {
                                 if (e.key === 'Enter')
                                     save();
                             } }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "outline", onPress: () => setNaming(false), children: "Cancel" }), _jsx(Button, { size: "sm", disabled: busy || !name.trim(), onPress: save, children: "Save" })] })] }) })] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/build",
-  "version": "0.2.27",
+  "version": "0.2.29",
   "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 component, mounted by the Hanzo app at hanzo.ai.",