@hanzo/build 0.2.56 → 0.2.58

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/lib/summary.d.ts

@@ -0,0 +1,50 @@
+/**
+ * A surface's summary: what it made and what went into it, as sections of
+ * rows, each one press from a tab beside it. Chat draws its Outputs and Sources
+ * here; Studio its artifacts. The rows are the caller's: this draws them and
+ * knows nothing of a conversation.
+ *
+ * `Summary` is the popover off the header's outline mark: each section's
+ * heading with what it adds at its end, its leading action (Chat's Create file
+ * or site), its rows, and one quiet line when it has none. `useKinds` makes
+ * each section a kind of tab for `Panel`, the same rows in the panel.
+ */
+import { type ReactNode } from 'react';
+import type { Kind } from './panel.tsx';
+/** One row: what it is called, its mark, and what pressing it opens. */
+export interface Entry {
+    id: string;
+    title: string;
+    icon?: ReactNode;
+    /** A quieter second line: what a lookup asked, what came back. */
+    detail?: string;
+    open?: () => void;
+}
+/** A section: its heading, its rows, and what it says with none. */
+export interface Section {
+    id: string;
+    title: string;
+    entries: readonly Entry[];
+    /** The line drawn when it has no rows; none, and it draws only its heading. */
+    empty?: string;
+    /** At the heading's end: what adds to it (Chat's `+` on Sources). */
+    action?: ReactNode;
+    /** A row before the others that does something rather than opens something. */
+    lead?: {
+        title: string;
+        run: () => void;
+    };
+}
+/**
+ * The summary, from the outline mark in a header. `onOpen` runs after a row is
+ * pressed, for the host to show the panel the row opened a tab in.
+ */
+export declare function Summary({ sections, onOpen, label }: {
+    sections: readonly Section[];
+    onOpen?: () => void;
+    label?: string;
+}): import("react").JSX.Element;
+/** Each section as a kind of tab for `Panel`: the same rows, with their second lines. */
+export declare function kinds(sections: readonly Section[], icons?: Record<string, ReactNode>): Kind[];
+/** `kinds`, kept while the sections are the same. */
+export declare function useKinds(sections: readonly Section[], icons?: Record<string, ReactNode>): Kind[];

package/lib/summary.js

@@ -0,0 +1,60 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A surface's summary: what it made and what went into it, as sections of
+ * rows, each one press from a tab beside it. Chat draws its Outputs and Sources
+ * here; Studio its artifacts. The rows are the caller's: this draws them and
+ * knows nothing of a conversation.
+ *
+ * `Summary` is the popover off the header's outline mark: each section's
+ * heading with what it adds at its end, its leading action (Chat's Create file
+ * or site), its rows, and one quiet line when it has none. `useKinds` makes
+ * each section a kind of tab for `Panel`, the same rows in the panel.
+ */
+import { useMemo, useState } from 'react';
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { ListTodo } from '@hanzogui/lucide-icons-2';
+import { Popover, PopoverContent, PopoverTrigger } from '@hanzo/ui';
+/** A row of the summary: its mark and its name, one press from a tab. */
+function Line({ icon, children, detail, onPress, quiet = false }) {
+    return (_jsxs(XStack, { render: onPress ? 'button' : undefined, role: onPress ? 'button' : undefined, onPress: onPress, items: "center", gap: "$2.5", px: "$2", minH: 30, width: "100%", rounded: "$3", cursor: onPress ? 'pointer' : undefined, hoverStyle: onPress ? { bg: '$hover' } : undefined, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: [icon ? (_jsx(XStack, { width: 16, justify: "center", shrink: 0, opacity: 0.75, children: icon })) : null, _jsxs(YStack, { flex: 1, minW: 0, py: detail ? '$1' : 0, children: [_jsx(SizableText, { fontSize: 13, color: quiet ? '$soft' : '$ink', numberOfLines: 1, children: children }), detail ? (_jsx(SizableText, { fontSize: 12, color: "$soft", numberOfLines: 2, children: detail })) : null] })] }));
+}
+/** A section's heading, with what it adds at its end. */
+const Head = ({ children, action }) => (_jsxs(XStack, { items: "center", justify: "space-between", px: "$2", pt: "$1.5", pb: "$1", minH: 28, children: [_jsx(SizableText, { fontSize: 13, color: "$soft", children: children }), action] }));
+/** One section's rows; `done` runs after a row is pressed (the popover puts itself away). */
+function Rows({ section, done, details = false }) {
+    const { entries, empty, lead } = section;
+    return (_jsxs(_Fragment, { children: [lead ? (_jsx(Line, { quiet: true, onPress: () => {
+                    done?.();
+                    lead.run();
+                }, children: lead.title })) : null, entries.map((e) => (_jsx(Line, { icon: e.icon, detail: details ? e.detail : undefined, onPress: e.open
+                    ? () => {
+                        done?.();
+                        e.open?.();
+                    }
+                    : undefined, children: e.title }, e.id))), !entries.length && empty ? _jsx(Line, { quiet: true, children: empty }) : null] }));
+}
+/**
+ * The summary, from the outline mark in a header. `onOpen` runs after a row is
+ * pressed, for the host to show the panel the row opened a tab in.
+ */
+export function Summary({ sections, onOpen, label = 'Summary' }) {
+    const [open, setOpen] = useState(false);
+    const done = () => {
+        setOpen(false);
+        onOpen?.();
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, allowFlip: true, children: [_jsx(PopoverTrigger, { children: _jsx(XStack, { render: "button", "data-slot": "summary-toggle", "aria-label": label, "aria-haspopup": "dialog", "aria-expanded": open, ...{ title: label }, width: 32, height: 32, rounded: "$3", items: "center", justify: "center", cursor: "pointer", bg: open ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: _jsx(ListTodo, { size: 16, "aria-hidden": true }) }) }), _jsx(PopoverContent, { solid: true, align: "end", p: 6, width: 300, children: _jsx(YStack, { "data-slot": "summary", role: "dialog", "aria-label": label, gap: 1, self: "stretch", width: "100%", maxH: "min(70dvh, 520px)", overflowY: "auto", overflowX: "hidden", children: sections.map((s, i) => (_jsxs(YStack, { gap: 1, children: [i ? _jsx(XStack, { height: 1, bg: "$borderColor", my: "$1.5", mx: "$1" }) : null, _jsx(Head, { action: s.action, children: s.title }), _jsx(Rows, { section: s, done: done })] }, s.id))) }) })] }));
+}
+/** Each section as a kind of tab for `Panel`: the same rows, with their second lines. */
+export function kinds(sections, icons = {}) {
+    return sections.map((s) => ({
+        id: s.id,
+        label: s.title,
+        icon: icons[s.id],
+        render: () => (_jsxs(YStack, { gap: 1, children: [_jsx(Head, { action: s.action, children: s.title }), _jsx(Rows, { section: s, details: true })] })),
+    }));
+}
+/** `kinds`, kept while the sections are the same. */
+export function useKinds(sections, icons) {
+    return useMemo(() => kinds(sections, icons), [sections, icons]);
+}

package/lib/tabs.d.ts

@@ -11,6 +11,8 @@ export interface Tab {
     /** The addresses a page came from, oldest first, and those Back stepped over, nearest first. */
     back?: string[];
     ahead?: string[];
+    /** Leads the strip, and closes only on purpose. */
+    pinned?: boolean;
 }
 /** The tabs in a scope, in order, and the chosen one. */
 export interface Tabs {
@@ -26,8 +28,12 @@ export declare function opened(was: Tabs, tab: Omit<Tab, 'id'> & {
 }): Tabs;
 /** A tab shut: the one to its right is chosen, else the one to its left, as a browser does. */
 export declare function shut(was: Tabs, id: string): Tabs;
-/** A tab moved to `to`, the others closing up around it. */
+/** A tab moved to `to`, the others closing up around it, and kept in its group: pinned or not. */
 export declare function moved(was: Tabs, id: string, to: number): Tabs;
+/** A tab pinned, or let go: it joins the end of the pinned tabs, or leads the rest. */
+export declare function pinned(was: Tabs, id: string, on: boolean): Tabs;
+/** Every tab closed but the pinned ones and those `keep` names; the chosen one stays if it is left. */
+export declare function cleared(was: Tabs, keep?: (t: Tab) => boolean): Tabs;
 export interface Deck extends Tabs {
     open: (tab: Omit<Tab, 'id'> & {
         id?: string;
@@ -35,6 +41,11 @@ export interface Deck extends Tabs {
     pick: (id: string) => void;
     shut: (id: string) => void;
     move: (id: string, to: number) => void;
+    /** Pin a tab: it leads the strip and closes only on purpose. */
+    pin: (id: string) => void;
+    unpin: (id: string) => void;
+    /** Close every tab but the pinned ones and those `keep` names. */
+    clear: (keep?: (t: Tab) => boolean) => void;
     /** Point a page somewhere else: where it was goes on its Back, and Forward is forgotten. */
     go: (id: string, url: string) => void;
     /** A page's Back and Forward. */

package/lib/tabs.js

@@ -15,6 +15,11 @@
  * A page keeps the addresses it went through (`back`, `ahead`), so its bar's
  * Back and Forward walk them as a browser's do.
  *
+ * A PINNED tab leads the strip and closes only on purpose: its own close (`shut`)
+ * takes it, and nothing that closes tabs in bulk (`clear`) does. Pinned tabs
+ * keep their order among themselves, the others theirs; a tab moved stays in
+ * its group.
+ *
  */
 import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
 export const PAGE = 'page';
@@ -53,7 +58,7 @@ export function read(scope) {
         if (raw) {
             const v = JSON.parse(raw);
             // An object URL dies with the document that minted it: a page holding only one is not kept.
-            const tabs = (Array.isArray(v.tabs) ? v.tabs.filter(isTab) : []).filter((t) => t.kind !== PAGE || t.body !== undefined || !t.url?.startsWith('blob:'));
+            const tabs = ranked((Array.isArray(v.tabs) ? v.tabs.filter(isTab) : []).filter((t) => t.kind !== PAGE || t.body !== undefined || !t.url?.startsWith('blob:')));
             held = { tabs, at: tabs.some((t) => t.id === v.at) ? v.at : (tabs[0]?.id ?? null) };
         }
     }
@@ -74,6 +79,10 @@ function write(scope, next) {
     }
     announce();
 }
+/** Pinned tabs first, each group in the order it had. */
+function ranked(tabs) {
+    return [...tabs.filter((t) => t.pinned), ...tabs.filter((t) => !t.pinned)];
+}
 let minted = 0;
 const mint = () => `p${Date.now().toString(36)}${(minted++).toString(36)}`;
 /** A tab opened: a kind already open is chosen, a page already open on the same thing is chosen. */
@@ -82,7 +91,7 @@ export function opened(was, tab) {
     if (same)
         return { ...was, at: same.id };
     const id = tab.id ?? (tab.kind === PAGE ? mint() : tab.kind);
-    return { tabs: [...was.tabs, { ...tab, id }], at: id };
+    return { tabs: ranked([...was.tabs, { ...tab, id }]), at: id };
 }
 /** A tab shut: the one to its right is chosen, else the one to its left, as a browser does. */
 export function shut(was, id) {
@@ -94,16 +103,37 @@ export function shut(was, id) {
         return { ...was, tabs };
     return { tabs, at: (tabs[gone] ?? tabs[gone - 1])?.id ?? null };
 }
-/** A tab moved to `to`, the others closing up around it. */
+/** A tab moved to `to`, the others closing up around it, and kept in its group: pinned or not. */
 export function moved(was, id, to) {
     const from = was.tabs.findIndex((t) => t.id === id);
     if (from < 0)
         return was;
     const tabs = was.tabs.slice();
     const [tab] = tabs.splice(from, 1);
-    tabs.splice(Math.max(0, Math.min(tabs.length, to)), 0, tab);
+    const pins = tabs.filter((t) => t.pinned).length;
+    const [low, high] = tab.pinned ? [0, pins] : [pins, tabs.length];
+    tabs.splice(Math.max(low, Math.min(high, to)), 0, tab);
     return { ...was, tabs };
 }
+/** A tab pinned, or let go: it joins the end of the pinned tabs, or leads the rest. */
+export function pinned(was, id, on) {
+    const tab = was.tabs.find((t) => t.id === id);
+    if (!tab || Boolean(tab.pinned) === on)
+        return was;
+    const rest = was.tabs.filter((t) => t.id !== id);
+    const pins = rest.filter((t) => t.pinned);
+    const others = rest.filter((t) => !t.pinned);
+    const plain = { ...tab };
+    delete plain.pinned;
+    return { ...was, tabs: on ? [...pins, { ...tab, pinned: true }, ...others] : [...pins, plain, ...others] };
+}
+/** Every tab closed but the pinned ones and those `keep` names; the chosen one stays if it is left. */
+export function cleared(was, keep = () => false) {
+    const tabs = was.tabs.filter((t) => t.pinned || keep(t));
+    if (tabs.length === was.tabs.length)
+        return was;
+    return { tabs, at: tabs.some((t) => t.id === was.at) ? was.at : (tabs[0]?.id ?? null) };
+}
 /** How many addresses a page's Back keeps. */
 const DEPTH = 50;
 /** A page pointed at `url`, where it was on its Back. */
@@ -136,6 +166,9 @@ export function useDeck(scope, seed) {
         pick: (id) => change((was) => ({ ...was, at: id })),
         shut: (id) => change((was) => shut(was, id)),
         move: (id, to) => change((was) => moved(was, id, to)),
+        pin: (id) => change((was) => pinned(was, id, true)),
+        unpin: (id) => change((was) => pinned(was, id, false)),
+        clear: (keep) => change((was) => cleared(was, keep)),
         go: (id, url) => change((was) => ({ ...was, tabs: was.tabs.map((t) => (t.id === id ? went(t, url) : t)) })),
         back: (id) => change((was) => ({ ...was, tabs: was.tabs.map((t) => (t.id === id ? stepped(t, 'back') : t)) })),
         forward: (id) => change((was) => ({ ...was, tabs: was.tabs.map((t) => (t.id === id ? stepped(t, 'forward') : t)) })),

package/package.json

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