@hanzo/build 0.2.57 → 0.2.59

package/lib/scheduled.js

@@ -0,0 +1,281 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Scheduled tasks: everything that runs without you watching, in one place —
+ * the prompts you scheduled from Chat and Dev, background runs, Studio renders
+ * and workflows.
+ *
+ *   -/automations        your tasks, then Activity: every run, across products
+ *   -/automations/<id>   one task's editor and runs (automations.tsx)
+ *
+ * Tasks are /v1/auto/automations and runs are /v1/auto/jobs (api/auto.ts), both
+ * the reader's own; /v1/auto/events keeps them live while the page is open, and
+ * a read every half minute keeps them right when the stream is down. A new task
+ * is said in plain words — "every Monday at 9am" — and the platform says back
+ * what it understood before anything is created.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { Clock, ExternalLink, MoreHorizontal, Pencil, Play, Plus, ScrollText, Trash2 } from '@hanzogui/lucide-icons-2';
+import { Button, DropdownMenu, Input, Switch, Textarea } from '@hanzo/ui';
+import { StatusDot } from '@hanzo/ui/chat';
+import { ModelPicker } from '@hanzo/ui/models';
+import { useLimits } from '@hanzo/ui/product/useLimits';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { automations, create, cron, events, jobs, remove, save, start, words } from './api/auto.js';
+import { Refusal } from './api/call.js';
+import { ENSO, limits as readLimits, models } from './api/models.js';
+import { Confirm, Field, Line, Sheet } from './customize/ui.js';
+import { local, PLAN, shaped, tidy, unplanned, unready, When, zone } from './automations.js';
+import { useRead } from './data.js';
+import { useHost, useTarget } from './host.js';
+import { about, dollars, DOTS, lasted, merged, SAID, titled } from './activity.js';
+import { SOURCE } from './api/library.js';
+import { Outputs } from './library.js';
+import { path } from './route.js';
+/** Where a move into Scheduled leaves the prompt a new task should start from. */
+const ASK = 'hanzo.build.scheduled.ask';
+/** Open Scheduled with a new task started from `prompt`: Dev's "Schedule this". */
+export function schedule(prompt, go) {
+    try {
+        sessionStorage.setItem(ASK, prompt);
+    }
+    catch {
+        // Without storage the sheet opens empty.
+    }
+    go(path({ kind: 'screen', screen: 'automations' }));
+}
+function asked() {
+    try {
+        const s = sessionStorage.getItem(ASK) ?? '';
+        sessionStorage.removeItem(ASK);
+        return s;
+    }
+    catch {
+        return '';
+    }
+}
+/** /v1/auto/events, followed while signed in: each job and task as it changes, again after a drop. */
+function useLive(on) {
+    const host = useHost();
+    const t = useTarget();
+    const signed = Boolean(host.person);
+    const heard = useRef(on);
+    heard.current = on;
+    const [live, setLive] = useState(false);
+    useEffect(() => {
+        if (!signed)
+            return;
+        const ctl = new AbortController();
+        let wait = 1000;
+        void (async () => {
+            while (!ctl.signal.aborted) {
+                const began = Date.now();
+                try {
+                    await events(t, (h) => heard.current(h.kind === 'job' ? { job: h.job } : { automation: h.automation }), ctl.signal, () => setLive(true));
+                    // A stream that stayed open a while is the platform's; one that closed at once is waited on longer each time.
+                    if (Date.now() - began > 5000)
+                        wait = 1000;
+                }
+                catch (e) {
+                    // A stream the platform does not serve here is not asked for again; the half-minute read stands in.
+                    if (e instanceof Refusal && (e.status === 404 || e.status === 401 || e.status === 403))
+                        return setLive(false);
+                }
+                setLive(false);
+                if (ctl.signal.aborted)
+                    return;
+                await new Promise((r) => setTimeout(r, wait));
+                wait = Math.min(wait * 2, 30_000);
+            }
+        })();
+        return () => ctl.abort();
+    }, [t, signed]);
+    return live;
+}
+export function Scheduled() {
+    const host = useHost();
+    const t = useTarget();
+    const signed = Boolean(host.person);
+    const [tick, setTick] = useState(0);
+    const tasks = useRead(signed ? () => automations(t) : null, [], [t, signed, tick]);
+    const runs = useRead(signed ? () => jobs(t, { limit: 50 }) : null, [], [t, signed, tick]);
+    const [shownTasks, setTasks] = useState([]);
+    const [shownRuns, setRuns] = useState([]);
+    useEffect(() => setTasks(tasks.value), [tasks.value]);
+    useEffect(() => setRuns(runs.value), [runs.value]);
+    const [problem, setProblem] = useState('');
+    const [making, setMaking] = useState(null);
+    const [deleting, setDeleting] = useState(null);
+    const [looking, setLooking] = useState(null);
+    const [now, setNow] = useState(() => Date.now());
+    // Dev's "Schedule this" arrives with the prompt the sheet starts from.
+    useEffect(() => {
+        const prompt = asked();
+        if (prompt)
+            setMaking(prompt);
+    }, []);
+    const live = useLive(({ job, automation }) => {
+        if (job) {
+            setRuns((was) => merged(was, job));
+            setLooking((was) => (was && was.id === job.id ? job : was));
+        }
+        if (automation)
+            setTasks((was) => (was.some((a) => a.id === automation.id) ? was.map((a) => (a.id === automation.id ? automation : a)) : [automation, ...was]));
+    });
+    // Without the stream, a read every half minute; with it, a clock for the running durations.
+    useEffect(() => {
+        if (!signed)
+            return;
+        const id = setInterval(() => (live ? setNow(Date.now()) : setTick((n) => n + 1)), live ? 1000 : 30_000);
+        return () => clearInterval(id);
+    }, [signed, live]);
+    const act = async (what, work) => {
+        setProblem('');
+        try {
+            await work();
+        }
+        catch (e) {
+            setProblem(unplanned(e) ? PLAN : `${what}: ${e.message}`);
+        }
+    };
+    const flip = (a, on) => act(a.name, async () => {
+        const next = await save(t, a.id, { enabled: on });
+        setTasks((was) => was.map((x) => (x.id === next.id ? next : x)));
+    });
+    const run = (a) => act(a.name, async () => {
+        const r = await start(t, a.id);
+        if (r.status === 'skipped')
+            setProblem(`${a.name}: not started, the previous run is still going.`);
+        setTick((n) => n + 1);
+    });
+    const edit = (id) => host.go(path({ kind: 'automation', id }));
+    return (_jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", "$max-md": { px: '$4', py: '$4' }, children: [_jsxs(YStack, { width: "100%", maxW: 880, mx: "auto", gap: "$5", children: [_jsxs(XStack, { justify: "space-between", items: "flex-start", gap: "$4", children: [_jsxs(YStack, { gap: "$1", flex: 1, minW: 0, children: [_jsx(SizableText, { render: "h1", size: "$7", fontWeight: "600", color: "$ink", children: "Scheduled tasks" }), _jsx(SizableText, { size: "$2", color: "$soft", children: "What runs without you watching: prompts on a schedule, background runs, Studio renders and workflows." })] }), _jsxs(Button, { size: "sm", shrink: 0, disabled: !signed, onPress: () => setMaking(''), children: [_jsx(Plus, { size: 14 }), "New task"] })] }), _jsx(Line, { children: problem }), _jsxs(YStack, { gap: "$2", children: [_jsx(SizableText, { render: "h2", size: "$3", color: "$ink", fontWeight: "500", children: "Tasks" }), !signed ? (_jsx(Said, { says: "Sign in to see your scheduled tasks.", children: _jsx(Button, { size: "sm", onPress: () => host.signIn?.(), children: "Sign in" }) })) : tasks.error && !shownTasks.length ? (_jsx(Said, { says: tasks.error.message })) : tasks.loading && !shownTasks.length ? (_jsx(Said, { says: "Reading your tasks\u2026" })) : !shownTasks.length ? (_jsx(Said, { says: "No scheduled tasks yet. Ask Chat or Dev to do something on a schedule, or start one here.", children: _jsx(Button, { size: "sm", onPress: () => setMaking(''), children: "New task" }) })) : (_jsx(YStack, { role: "list", "aria-label": "Your tasks", borderWidth: 1, borderColor: "$borderColor", rounded: "$4", overflow: "hidden", children: shownTasks.map((a, i) => (_jsx(Task, { a: a, first: i === 0, onOpen: () => edit(a.id), onSwitch: (on) => void flip(a, on), onRun: () => void run(a), onDelete: () => setDeleting(a) }, a.id))) }))] }), signed ? (_jsxs(YStack, { gap: "$2", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { render: "h2", size: "$3", color: "$ink", fontWeight: "500", flex: 1, children: "Activity" }), _jsx(SizableText, { size: "$1", color: "$soft", children: live ? 'Live' : '' })] }), runs.error && !shownRuns.length ? (_jsx(Said, { says: runs.error.message })) : runs.loading && !shownRuns.length ? (_jsx(Said, { says: "Reading what ran\u2026" })) : !shownRuns.length ? (_jsx(Said, { says: "Nothing has run yet. A task's runs, Dev's background runs and Studio's renders show here as they go." })) : (_jsx(YStack, { role: "list", "aria-label": "Activity", borderWidth: 1, borderColor: "$borderColor", rounded: "$4", overflow: "hidden", children: shownRuns.map((j, i) => (_jsx(Ran, { j: j, first: i === 0, now: now, onOpen: () => setLooking(j) }, j.id))) }))] })) : null] }), _jsx(Make, { prompt: making, onClose: () => setMaking(null), onMade: (a) => {
+                    setTasks((was) => [a, ...was.filter((x) => x.id !== a.id)]);
+                    setProblem(`Scheduled: ${a.name}.`);
+                } }), _jsx(Detail, { j: looking, onClose: () => setLooking(null), now: now }), deleting ? (_jsx(Confirm, { what: deleting.name, says: "It stops running, and its schedule and its runs go with it. A run going now is stopped.", open: true, onOpenChange: (o) => !o && setDeleting(null), onYes: async () => {
+                    await remove(t, deleting.id);
+                    setTasks((was) => was.filter((x) => x.id !== deleting.id));
+                    setDeleting(null);
+                } })) : null] }));
+}
+/** One task: what it is and when it runs next, its switch, and its menu. */
+function Task({ a, first, onOpen, onSwitch, onRun, onDelete }) {
+    const when = a.draft
+        ? 'Needs instructions'
+        : [words(a.schedule), a.enabled && a.next ? `next ${local(a.next)}` : a.schedule.kind !== 'manual' && !a.enabled ? 'paused' : ''].filter(Boolean).join(' · ');
+    return (_jsxs(XStack, { role: "listitem", items: "center", gap: "$3", px: "$3", py: "$3", borderTopWidth: first ? 0 : 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: [_jsxs(XStack, { render: "button", "aria-label": `Open ${a.name}`, onPress: onOpen, flex: 1, minW: 0, items: "center", gap: "$3", cursor: "pointer", style: { textAlign: 'left' }, children: [_jsx(YStack, { width: 32, height: 32, rounded: "$3", bg: "$raised", items: "center", justify: "center", shrink: 0, "aria-hidden": true, children: _jsx(Clock, { size: 16 }) }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsxs(XStack, { items: "center", gap: "$2", minW: 0, children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, shrink: 1, children: a.name }), _jsx(Badge, { children: SOURCE[a.source] }), a.draft ? _jsx(Badge, { children: "Draft" }) : null] }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: when })] })] }), _jsx(Switch, { checked: a.enabled, disabled: a.draft, onCheckedChange: onSwitch, "aria-label": `${a.name} on` }), _jsx(DropdownMenu, { trigger: _jsx(XStack, { render: "button", "aria-label": `Actions for ${a.name}`, width: 30, height: 30, items: "center", justify: "center", rounded: "$2", hoverStyle: { bg: '$hover' }, cursor: "pointer", children: _jsx(MoreHorizontal, { size: 16 }) }), items: [
+                    ...(a.draft ? [] : [{ key: 'run', label: 'Run now', icon: _jsx(Play, { size: 16 }), onSelect: onRun }]),
+                    { key: 'edit', label: 'Edit', icon: _jsx(Pencil, { size: 16 }), onSelect: onOpen },
+                    { key: 'delete', label: 'Delete', icon: _jsx(Trash2, { size: 16 }), onSelect: onDelete },
+                ] })] }));
+}
+/** One run in Activity. */
+function Ran({ j, first, now, onOpen }) {
+    return (_jsx(XStack, { role: "listitem", borderTopWidth: first ? 0 : 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: _jsxs(XStack, { render: "button", "aria-label": `${j.title}: ${SAID[j.state]}`, onPress: onOpen, flex: 1, minW: 0, items: "center", gap: "$3", px: "$3", py: "$2.5", cursor: "pointer", style: { textAlign: 'left' }, children: [_jsx(StatusDot, { status: DOTS[j.state] }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: j.title }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: about(j, now) })] }), _jsx(SizableText, { size: "$1", color: "$soft", shrink: 0, children: j.state === 'running' && j.progress !== null ? `${Math.round(j.progress * 100)}%` : SAID[j.state] })] }) }));
+}
+/** One run, opened: how it went, its log, what it made and what it cost. */
+function Detail({ j, onClose, now }) {
+    const host = useHost();
+    return (_jsx(Sheet, { title: j?.title ?? 'Run', open: Boolean(j), onOpenChange: (o) => !o && onClose(), width: 520, children: j ? (_jsxs(YStack, { gap: "$3", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(StatusDot, { status: DOTS[j.state] }), _jsxs(SizableText, { size: "$2", color: "$ink", children: [SAID[j.state], j.status && j.status !== j.state ? ` (${j.status})` : ''] })] }), _jsx(Facts, { rows: [
+                        ['From', SOURCE[j.product]],
+                        ['Started', j.started ? local(j.started) : '—'],
+                        ['Took', lasted(j.started, j.finished, now) || '—'],
+                        ['Cost', j.cost !== null ? dollars(j.cost) : 'Not known yet'],
+                    ] }), j.error ? (_jsx(SizableText, { size: "$2", color: "$soft", style: { whiteSpace: 'pre-wrap' }, children: j.error })) : null, j.summary ? (_jsx(SizableText, { size: "$2", color: "$ink", style: { whiteSpace: 'pre-wrap' }, children: j.summary })) : null, j.outputs.length ? (_jsxs(YStack, { gap: "$1", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: "What it made" }), _jsx(Outputs, { ids: j.outputs })] })) : null, _jsxs(XStack, { gap: "$2", flexWrap: "wrap", rowGap: "$2", children: [j.session ? (_jsxs(Button, { size: "sm", variant: "outline", onPress: () => host.go(j.session), children: [_jsx(ScrollText, { size: 14 }), "Open its log"] })) : null, j.origin ? (_jsxs(Button, { size: "sm", variant: "outline", onPress: () => host.open(j.origin), children: [_jsx(ExternalLink, { size: 14 }), "Open where it runs"] })) : null, j.automation ? (_jsxs(Button, { size: "sm", variant: "ghost", onPress: () => host.go(path({ kind: 'automation', id: j.automation })), children: [_jsx(Pencil, { size: 14 }), "Edit the task"] })) : null] })] })) : null }));
+}
+/** A new task: what it does, when in plain words, and the model it thinks with. */
+function Make({ prompt, onClose, onMade }) {
+    const host = useHost();
+    const t = useTarget();
+    const signed = Boolean(host.person);
+    const open = prompt !== null;
+    const [name, setName] = useState('');
+    const [asks, setAsks] = useState('');
+    const [said, setSaid] = useState('');
+    const [read, setRead] = useState(null);
+    const [reading, setReading] = useState(false);
+    const [unread, setUnread] = useState('');
+    const [picking, setPicking] = useState(false);
+    const [picked, setPicked] = useState(() => shaped('daily', { kind: 'manual' }));
+    const [model, setModel] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const [note, setNote] = useState('');
+    const catalog = useRead(signed && open ? () => models(t) : null, [], [t, signed, open]);
+    const { limits } = useLimits(signed && open ? (signal) => readLimits(t, signal) : null, t);
+    // Each opening starts from what it was handed.
+    useEffect(() => {
+        if (prompt === null)
+            return;
+        setAsks(prompt);
+        setName(titled(prompt));
+        setSaid('');
+        setRead(null);
+        setUnread('');
+        setPicking(false);
+        setNote('');
+    }, [prompt]);
+    // The words are read once the typing settles; the answer is said back before anything is made.
+    useEffect(() => {
+        const text = said.trim();
+        if (!open || !text || picking) {
+            setRead(null);
+            setUnread('');
+            return;
+        }
+        const ctl = new AbortController();
+        const id = setTimeout(() => {
+            setReading(true);
+            cron(t, text, zone(), { signal: ctl.signal })
+                .then((p) => {
+                setRead(p);
+                setUnread('');
+            })
+                .catch((e) => {
+                if (ctl.signal.aborted)
+                    return;
+                setRead(null);
+                setUnread(e.message);
+            })
+                .finally(() => !ctl.signal.aborted && setReading(false));
+        }, 450);
+        return () => {
+            clearTimeout(id);
+            ctl.abort();
+        };
+    }, [said, open, picking, t]);
+    const when = picking ? picked : (read?.schedule ?? null);
+    const wrong = when ? unready(when) : '';
+    const make = async () => {
+        if (!name.trim())
+            return setNote('Name it first.');
+        if (!asks.trim())
+            return setNote('Say what it should do.');
+        if (!when)
+            return setNote(said.trim() ? 'Say when in other words, or choose instead.' : 'Say when it runs.');
+        if (wrong)
+            return setNote(wrong);
+        setBusy(true);
+        setNote('');
+        try {
+            const d = { name: name.trim(), instructions: asks.trim(), model, schedule: when, permissions: 'ask', notify: true, postTo: [], enabled: true, source: 'dev' };
+            onMade(await create(t, tidy(d)));
+            onClose();
+        }
+        catch (e) {
+            setNote(unplanned(e) ? PLAN : e.message);
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const heard = useMemo(() => (read ? [read.says || words(read.schedule), read.next ? `next ${local(read.next)}` : ''].filter(Boolean).join(' · ') : ''), [read]);
+    return (_jsx(Sheet, { title: "New task", open: open, onOpenChange: (o) => !o && !busy && onClose(), width: 560, children: _jsxs(YStack, { gap: "$4", children: [_jsx(Field, { label: "Name", children: _jsx(Input, { value: name, onChangeText: setName, placeholder: "Monday summary", "aria-label": "Task name" }) }), _jsx(Field, { label: "What it does", hint: "Each run is one Dev run in this organization, as you. It reads and proposes; it changes nothing on its own.", children: _jsx(Textarea, { value: asks, onChangeText: setAsks, placeholder: "Summarize what changed in my repositories this week, and what needs me.", "aria-label": "What it does", rows: 5 }) }), _jsx(Field, { label: "When", hint: picking ? undefined : 'In your own words: every weekday at 8am, every 5 minutes, first of the month.', children: picking ? (_jsxs(YStack, { gap: "$2", children: [_jsx(When, { s: picked, onChange: setPicked }), _jsx(XStack, { children: _jsx(Button, { size: "sm", variant: "ghost", onPress: () => setPicking(false), children: "Say it instead" }) })] })) : (_jsxs(YStack, { gap: "$2", children: [_jsx(Input, { value: said, onChangeText: setSaid, placeholder: "Every Monday at 9am", "aria-label": "When it runs" }), _jsx(SizableText, { size: "$1", color: unread ? '$soft' : '$ink', role: "status", minH: 18, children: reading ? 'Reading…' : unread ? `${unread} Choose instead, or say it another way.` : heard }), _jsx(XStack, { children: _jsx(Button, { size: "sm", variant: "ghost", onPress: () => setPicking(true), children: "Choose instead" }) })] })) }), _jsx(Field, { label: "Model", children: _jsx(XStack, { children: _jsx(ModelPicker, { size: "sm", name: "Model", models: catalog.value, scope: "chat", limits: limits, value: model ?? ENSO, onChange: (id) => setModel(id === ENSO ? null : id), loading: catalog.loading, error: catalog.error?.message ?? null }) }) }), _jsx(Line, { children: note }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", disabled: busy, onPress: onClose, children: "Cancel" }), _jsx(Button, { size: "sm", disabled: busy || !signed, onPress: () => void make(), children: busy ? 'Creating…' : 'Create' })] })] }) }));
+}
+function Badge({ children }) {
+    return (_jsx(SizableText, { size: "$1", color: "$soft", px: "$1.5", rounded: "$2", borderWidth: 1, borderColor: "$borderColor", shrink: 0, children: children }));
+}
+function Facts({ rows }) {
+    return (_jsx(YStack, { gap: "$1", children: rows.map(([k, v]) => (_jsxs(XStack, { gap: "$3", children: [_jsx(SizableText, { size: "$1", color: "$soft", width: 72, children: k }), _jsx(SizableText, { size: "$1", color: "$ink", flex: 1, children: v })] }, k))) }));
+}
+function Said({ says, children }) {
+    return (_jsxs(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$4", px: "$4", py: "$8", gap: "$3", items: "center", children: [_jsx(SizableText, { size: "$2", color: "$soft", style: { textAlign: 'center' }, children: says }), children] }));
+}

package/lib/shelf.d.ts

@@ -1,8 +1,9 @@
 /**
- * What this org has built: a few starters to make something new from, then
- * every project under the month it was last edited, whether it is public or
- * private, and its rename, visibility and delete. A project belongs to the org
- * and names no author, so the list does not split yours from a colleague's.
+ * What this org has deployed: a few starters to make something new from, then
+ * every site under the month it was last edited, whether it is public or
+ * private, and its rename, visibility and delete. A site belongs to the org and
+ * names no author, so the list does not split yours from a colleague's — which
+ * is why it is a section of its own under the Library's items, which are yours.
  */
-export declare function Artifacts(): import("react").JSX.Element;
+export declare function Sites(): import("react").JSX.Element;
 export declare function Templates(): import("react").JSX.Element;

package/lib/shelf.js

@@ -1,7 +1,7 @@
 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).
+ * Two shelves: the sites this org has deployed (Sites, drawn at the foot of the
+ * Library — library.tsx), 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
@@ -70,12 +70,13 @@ function edited(s) {
     return `Edited ${d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year })}`;
 }
 /**
- * What this org has built: a few starters to make something new from, then
- * every project under the month it was last edited, whether it is public or
- * private, and its rename, visibility and delete. A project belongs to the org
- * and names no author, so the list does not split yours from a colleague's.
+ * What this org has deployed: a few starters to make something new from, then
+ * every site under the month it was last edited, whether it is public or
+ * private, and its rename, visibility and delete. A site belongs to the org and
+ * names no author, so the list does not split yours from a colleague's — which
+ * is why it is a section of its own under the Library's items, which are yours.
  */
-export function Artifacts() {
+export function Sites() {
     const t = useTarget();
     const host = useHost();
     const list = useProjects(t, Boolean(host.person));
@@ -97,7 +98,7 @@ export function Artifacts() {
         }
     };
     const said = failed || note;
-    return (_jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", items: "center", "$max-md": { px: '$4' }, children: [_jsxs(YStack, { width: "100%", maxW: 1080, children: [_jsx(Head, { title: "Artifacts", says: "What this organization has built. Open one to keep building it." }), said ? (_jsx(SizableText, { size: "$2", color: "$soft", role: "status", pb: "$3", children: said })) : null, starters.value.length ? (_jsxs(YStack, { gap: "$3", pb: "$6", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: "Make something new" }), _jsx(XStack, { flexWrap: "wrap", gap: "$3", children: starters.value.slice(0, 4).map((x) => (_jsxs(Card, { small: true, label: `Start from ${x.title}`, onPress: () => void take(x.slug), children: [_jsx(Shot, { slug: x.slug }), _jsx(YStack, { px: "$3", py: "$2.5", children: _jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: busy === x.slug ? 'Copying…' : x.title }) })] }, x.slug))) })] })) : null, 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 ? (_jsxs(YStack, { gap: "$3", items: "flex-start", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: "Nothing built yet. Describe something on the New page and it lands here." }), _jsx(Button, { size: "sm", onPress: () => host.go(''), children: "New run" })] })) : (_jsx(YStack, { gap: "$5", children: months(list.value).map((g) => (_jsxs(YStack, { gap: "$2", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: g.label }), _jsx(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: g.rows.map((p, i) => (_jsxs(XStack, { items: "center", pr: "$2", borderTopWidth: i ? 1 : 0, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: [_jsxs(XStack, { flex: 1, minW: 0, render: "button", "aria-label": `Open ${p.name}`, onPress: () => host.go(p.slug), items: "center", gap: "$3", px: "$3", py: "$2.5", cursor: "pointer", style: { textAlign: 'left' }, children: [p.visibility === 'private' ? _jsx(Lock, { size: 16, opacity: 0.7 }) : _jsx(Globe, { size: 16, opacity: 0.7 }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { size: "$3", color: "$ink", numberOfLines: 1, children: p.name }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: [p.visibility === 'private' ? 'Private' : 'Public', edited(when(p)), p.live ? new URL(p.live).host : 'Not deployed yet']
+    return (_jsxs(YStack, { width: "100%", role: "region", "aria-label": "Sites", children: [_jsxs(YStack, { width: "100%", children: [_jsxs(YStack, { gap: "$1", pb: "$4", children: [_jsx(SizableText, { render: "h2", size: "$5", color: "$ink", children: "Sites" }), _jsx(SizableText, { size: "$2", color: "$soft", children: "What this organization has built. Open one to keep building it." })] }), said ? (_jsx(SizableText, { size: "$2", color: "$soft", role: "status", pb: "$3", children: said })) : null, starters.value.length ? (_jsxs(YStack, { gap: "$3", pb: "$6", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: "Make something new" }), _jsx(XStack, { flexWrap: "wrap", gap: "$3", children: starters.value.slice(0, 4).map((x) => (_jsxs(Card, { small: true, label: `Start from ${x.title}`, onPress: () => void take(x.slug), children: [_jsx(Shot, { slug: x.slug }), _jsx(YStack, { px: "$3", py: "$2.5", children: _jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: busy === x.slug ? 'Copying…' : x.title }) })] }, x.slug))) })] })) : null, 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 ? (_jsxs(YStack, { gap: "$3", items: "flex-start", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: "Nothing built yet. Describe something on the New page and it lands here." }), _jsx(Button, { size: "sm", onPress: () => host.go(''), children: "New run" })] })) : (_jsx(YStack, { gap: "$5", children: months(list.value).map((g) => (_jsxs(YStack, { gap: "$2", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: g.label }), _jsx(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: g.rows.map((p, i) => (_jsxs(XStack, { items: "center", pr: "$2", borderTopWidth: i ? 1 : 0, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: [_jsxs(XStack, { flex: 1, minW: 0, render: "button", "aria-label": `Open ${p.name}`, onPress: () => host.go(p.slug), items: "center", gap: "$3", px: "$3", py: "$2.5", cursor: "pointer", style: { textAlign: 'left' }, children: [p.visibility === 'private' ? _jsx(Lock, { size: 16, opacity: 0.7 }) : _jsx(Globe, { size: 16, opacity: 0.7 }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { size: "$3", color: "$ink", numberOfLines: 1, children: p.name }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: [p.visibility === 'private' ? 'Private' : 'Public', edited(when(p)), p.live ? new URL(p.live).host : 'Not deployed yet']
                                                                     .filter(Boolean)
                                                                     .join(' · ') })] })] }), _jsx(DropdownMenu, { trigger: _jsx(XStack, { render: "button", "aria-label": `Actions for ${p.name}`, px: "$1.5", py: "$1", rounded: "$2", hoverStyle: { bg: '$raised' }, children: _jsx(MoreHorizontal, { size: 16 }) }), items: [
                                                     { key: 'rename', label: 'Rename', onSelect: () => setRenaming(p) },

package/package.json

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