@hanzo/build 0.2.9 → 0.2.11

package/lib/customize/skills.js

@@ -0,0 +1,125 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Skills: what the agent knows how to do, each a SKILL.md it reads when an agent
+ * names it.
+ *
+ * Yours is the org's own skills — written here, switched on and off — and the
+ * catalogue's skills it has added. Discover is the brand's catalogue; adding one
+ * switches it on for the org, which is all adding is: the platform keeps no copy.
+ * A skill written here is switched on when it is saved.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { BookOpen } from '@hanzogui/lucide-icons-2';
+import { Button, Input, Switch, Textarea } from '@hanzo/ui';
+import { Code } from '@hanzo/ui/chat';
+import { useMemo, useState } from 'react';
+import { active, authored, brand, document, nameOf, remove, tool, write } from '../api/skills.js';
+import { toggle } from '../api/tools.js';
+import { useRead } from '../data.js';
+import { useHost, useTarget } from '../host.js';
+import { Add, Confirm, day, Field, Grid, Line, Mark, matches, mono, Part, Sheet, Soft, Tile } from './ui.js';
+const PAGE = 60;
+export function Skills({ view, q, adding, onAdding, onView }) {
+    const host = useHost();
+    const t = useTarget();
+    const signed = Boolean(host.person);
+    const own = useRead(signed ? () => authored(t) : null, [], [t, signed]);
+    const on = useRead(signed ? () => active(t) : null, [], [t, signed]);
+    const shelf = useRead(view === 'discover' ? () => brand(t) : null, null, [t.api, view]);
+    const [editing, setEditing] = useState(null);
+    const [reading, setReading] = useState(null);
+    const [busy, setBusy] = useState('');
+    const [note, setNote] = useState('');
+    const [shown, setShown] = useState(PAGE);
+    const lit = useMemo(() => new Set(on.value.map((x) => x.name)), [on.value]);
+    const mine = useMemo(() => new Set(own.value.map((s) => s.name)), [own.value]);
+    /** Switch one skill on or off, then read what is on again. */
+    const flip = async (name, next) => {
+        setBusy(name);
+        setNote('');
+        try {
+            await toggle(t, next ? [tool(name)] : [], next ? [] : [tool(name)]);
+            on.reload();
+            setNote(next ? `${name} is on` : `${name} is off`);
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'That did not work');
+        }
+        finally {
+            setBusy('');
+        }
+    };
+    const reader = reading ? (_jsx(Reader, { skill: reading, added: lit.has(tool(reading.name)), signed: signed, busy: busy === reading.name, onFlip: (next) => void flip(reading.name, next), onClose: () => setReading(null) })) : null;
+    const editor = adding || editing ? (_jsx(Editor, { skill: editing, onClose: () => {
+            setEditing(null);
+            onAdding(false);
+        }, onSaved: (s, fresh) => {
+            setEditing(null);
+            onAdding(false);
+            own.reload();
+            on.reload();
+            onView('yours');
+            setNote(fresh ? `${s.name} is saved and on` : `${s.name} is saved`);
+        }, onDeleted: (name) => {
+            setEditing(null);
+            own.reload();
+            on.reload();
+            setNote(`${name} is deleted`);
+        } })) : null;
+    if (view === 'discover') {
+        const all = shelf.value?.skills ?? [];
+        const found = all.filter((e) => matches(q, e.name, e.description, e.product));
+        return (_jsxs(YStack, { gap: "$3", children: [_jsx(Line, { children: note }), shelf.error && !shelf.value ? (_jsx(Soft, { children: shelf.error.message })) : !shelf.value ? (_jsx(Soft, { children: "Reading the catalogue\u2026" })) : !found.length ? (_jsx(Soft, { children: all.length ? 'No skill matches.' : 'The catalogue lists no skills.' })) : (_jsxs(_Fragment, { children: [_jsx(SizableText, { size: "$1", color: "$soft", children: found.length === all.length ? `${all.length} skills across ${shelf.value.products.length} products` : `${found.length} of ${all.length} skills` }), _jsx(Grid, { label: "Skills to add", children: found.slice(0, shown).map((e) => (_jsx(Tile, { title: e.name, detail: e.description, meta: e.product, mark: _jsx(Mark, { name: e.name, icon: _jsx(BookOpen, { size: 15 }) }), onOpen: () => setReading(e), action: signed ? _jsx(Add, { name: e.name, added: lit.has(tool(e.name)), busy: busy === e.name, onPress: () => void flip(e.name, true) }) : undefined }, e.name))) }), found.length > shown ? (_jsx(XStack, { justify: "center", children: _jsx(Button, { size: "sm", variant: "outline", onPress: () => setShown(shown + PAGE), children: "Show more" }) })) : null] })), reader, editor] }));
+    }
+    if (!signed) {
+        return _jsx(Soft, { action: host.signIn ? _jsx(Button, { size: "sm", onPress: () => host.signIn?.(), children: "Sign in" }) : undefined, children: "Sign in to see your skills." });
+    }
+    const ownShown = own.value.filter((s) => matches(q, s.name, s.description));
+    const added = on.value.filter((x) => nameOf(x.name) && !mine.has(nameOf(x.name)) && matches(q, nameOf(x.name), x.description));
+    const error = own.error ?? on.error;
+    return (_jsxs(YStack, { gap: "$5", children: [_jsx(Line, { children: note }), error && !own.value.length && !on.value.length ? (_jsx(Soft, { children: error.message })) : (own.loading || on.loading) && !own.value.length && !on.value.length ? (_jsx(Soft, { children: "Reading your skills\u2026" })) : !own.value.length && !added.length && !q ? (_jsx(Soft, { action: _jsx(Button, { size: "sm", variant: "outline", onPress: () => onView('discover'), children: "Discover skills" }), children: "No skills yet. Write one, or add one from the catalogue." })) : (_jsxs(_Fragment, { children: [_jsx(Part, { title: "Written here", detail: "Your organization\u2019s own. Off keeps it, and keeps it out of every agent\u2019s prompt.", children: ownShown.length ? (_jsx(Grid, { label: "Your skills", children: ownShown.map((s) => (_jsx(Tile, { title: s.name, detail: s.description || firstLine(s.content), meta: s.source ? `From ${s.source}` : day(s.created) ? `Saved ${day(s.created)}` : undefined, mark: _jsx(Mark, { name: s.name }), onOpen: () => setEditing(s), action: _jsx(Switch, { checked: lit.has(tool(s.name)), disabled: busy === s.name, onCheckedChange: (v) => void flip(s.name, v), "aria-label": `${s.name} on` }) }, s.id))) })) : (_jsx(SizableText, { size: "$2", color: "$soft", children: own.value.length ? 'None of yours matches.' : 'None yet.' })) }), added.length ? (_jsx(Part, { title: "Added from the catalogue", detail: "On for every agent that names them.", children: _jsx(Grid, { label: "Added skills", children: added.map((x) => {
+                                const name = nameOf(x.name);
+                                return (_jsx(Tile, { title: name, detail: x.description, mark: _jsx(Mark, { name: name, icon: _jsx(BookOpen, { size: 15 }) }), onOpen: () => setReading({ name, description: x.description, product: '' }), action: _jsx(Button, { size: "sm", variant: "ghost", disabled: busy === name, onPress: () => void flip(name, false), "aria-label": `Remove ${name}`, children: "Remove" }) }, x.name));
+                            }) }) })) : null] })), reader, editor] }));
+}
+const firstLine = (md) => md
+    .split('\n')
+    .map((l) => l.replace(/^#+\s*/, '').trim())
+    .find(Boolean) ?? '';
+/** One catalogue skill: what it is, its SKILL.md, and adding or removing it. */
+function Reader({ skill, added, signed, busy, onFlip, onClose, }) {
+    const t = useTarget();
+    const doc = useRead(() => document(t, skill.name), '', [t.api, skill.name]);
+    return (_jsxs(Sheet, { title: skill.name, open: true, onOpenChange: (o) => !o && onClose(), width: 720, children: [skill.description ? (_jsx(SizableText, { size: "$2", color: "$soft", children: skill.description })) : null, signed ? (_jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(Button, { size: "sm", variant: added ? 'outline' : 'default', disabled: busy, onPress: () => onFlip(!added), children: added ? 'Remove' : 'Add to your skills' }), _jsx(SizableText, { size: "$1", color: "$soft", flex: 1, children: added ? 'On for your organization.' : 'Adding it switches it on for your organization.' })] })) : null, doc.error ? (_jsx(Soft, { children: doc.error.message })) : doc.loading && !doc.value ? (_jsx(Soft, { children: "Reading SKILL.md\u2026" })) : (_jsx(Code, { language: "SKILL.md", value: doc.value, children: _jsx(SizableText, { size: "$1", color: "$ink", style: { ...mono, whiteSpace: 'pre-wrap' }, children: doc.value }) }))] }));
+}
+/** Write a skill, or revise one of the org's own. Its name is its id, so a saved skill keeps its name. */
+function Editor({ skill, onClose, onSaved, onDeleted, }) {
+    const t = useTarget();
+    const [name, setName] = useState(skill?.name ?? '');
+    const [description, setDescription] = useState(skill?.description ?? '');
+    const [content, setContent] = useState(skill?.content ?? '');
+    const [working, setWorking] = useState(false);
+    const [note, setNote] = useState('');
+    const [asking, setAsking] = useState(false);
+    const save = async () => {
+        setWorking(true);
+        setNote('');
+        try {
+            const saved = await write(t, { name: name.trim(), description: description.trim(), content });
+            // A new skill is switched on as it is saved; a revised one keeps its switch.
+            if (!skill)
+                await toggle(t, [tool(saved.name)]);
+            onSaved(saved, !skill);
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'The skill was not saved');
+        }
+        finally {
+            setWorking(false);
+        }
+    };
+    return (_jsxs(Sheet, { title: skill ? skill.name : 'New skill', open: true, onOpenChange: (o) => !o && onClose(), width: 680, children: [skill?.source ? (_jsxs(SizableText, { size: "$2", color: "$soft", children: ["Read from ", skill.source, ". The next push of that repository replaces what is saved here."] })) : null, _jsx(Field, { label: "Name", hint: skill ? 'A skill’s name is its id; save under another name to make a new one.' : 'One lowercase word: letters, digits, _ or -. Agents name it as skill_<name>.', children: _jsx(Input, { value: name, onChangeText: setName, placeholder: "triage", "aria-label": "Name", disabled: Boolean(skill), autoCapitalize: "none" }) }), _jsx(Field, { label: "Description", hint: "The one line an agent reads to decide whether it needs this skill.", children: _jsx(Input, { value: description, onChangeText: setDescription, placeholder: "How we triage an incoming issue", "aria-label": "Description" }) }), _jsx(Field, { label: "SKILL.md", hint: "Markdown: what the skill is for, when to use it, and the steps.", children: _jsx(Textarea, { value: content, onChangeText: setContent, placeholder: '# Triage\n\n1. Read the issue…', "aria-label": "SKILL.md", rows: 14, style: mono }) }), _jsx(Line, { children: note }), _jsxs(XStack, { gap: "$2", items: "center", children: [skill ? (_jsx(Button, { size: "sm", variant: "ghost", onPress: () => setAsking(true), children: "Delete" })) : null, _jsx(XStack, { flex: 1 }), _jsx(Button, { size: "sm", variant: "ghost", onPress: onClose, children: "Cancel" }), _jsx(Button, { size: "sm", disabled: working, onPress: () => void save(), children: "Save" })] }), skill ? (_jsx(Confirm, { what: skill.name, says: "The skill leaves your organization and every agent that names it.", open: asking, onOpenChange: setAsking, onYes: async () => {
+                    await remove(t, skill.id);
+                    onDeleted(skill.name);
+                } })) : null] }));
+}

package/lib/customize/ui.d.ts

@@ -0,0 +1,110 @@
+import { type ReactNode } from 'react';
+export declare const mono: {
+    fontFamily: string;
+};
+/** A button that holds a card's text reads from the left, not from the middle a button centres it in. */
+export declare const left: {
+    readonly textAlign: 'left';
+};
+/** Which half of a tab: what the org has, or what it can add. */
+export type View = 'yours' | 'discover';
+/** What the shell hands a tab: which half, the search, and the Add dialog's state. */
+export interface Pane {
+    view: View;
+    q: string;
+    adding: boolean;
+    onAdding: (open: boolean) => void;
+    onView: (v: View) => void;
+}
+/** Whether a row answers a search: every word of it somewhere in the row's text. */
+export declare function matches(q: string, ...text: string[]): boolean;
+/** Cards in as many columns as fit, one column on a phone. */
+export declare function Grid({ children, label }: {
+    children: ReactNode;
+    label: string;
+}): import("react").JSX.Element;
+/** A square with the thing's picture, or its initial. */
+export declare function Mark({ name, logo, icon, size }: {
+    name: string;
+    logo?: string;
+    icon?: ReactNode;
+    size?: number;
+}): import("react").JSX.Element;
+/**
+ * One card: what it is, a few lines about it, a quiet fact under them, and its
+ * action at the top right. Pressing the card opens it; the action is its own
+ * control beside that, never inside it.
+ */
+export declare function Tile({ title, detail, meta, mark, action, onOpen, }: {
+    title: string;
+    detail?: string;
+    meta?: string;
+    mark?: ReactNode;
+    action?: ReactNode;
+    onOpen?: () => void;
+}): import("react").JSX.Element;
+/** The one card the shelf puts first, drawn larger. */
+export declare function Featured({ title, detail, meta, mark, action, onOpen }: {
+    title: string;
+    detail: string;
+    meta?: string;
+    mark: ReactNode;
+    action?: ReactNode;
+    onOpen: () => void;
+}): import("react").JSX.Element;
+/** A card's add control: a plus while it is not yours, a check once it is. */
+export declare function Add({ name, added, busy, onPress }: {
+    name: string;
+    added: boolean;
+    busy?: boolean;
+    onPress: () => void;
+}): import("react").JSX.Element;
+/** A dialog with a title, a close control and a body that scrolls inside the window. */
+export declare function Sheet({ title, open, onOpenChange, width, children }: {
+    title: string;
+    open: boolean;
+    onOpenChange: (o: boolean) => void;
+    width?: number;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Asks before a delete; says what goes with it. */
+export declare function Confirm({ what, says, open, onOpenChange, onYes }: {
+    what: string;
+    says: string;
+    open: boolean;
+    onOpenChange: (o: boolean) => void;
+    onYes: () => Promise<void>;
+}): import("react").JSX.Element;
+/** The quiet line for empty, loading, signed-out and refused. */
+export declare function Soft({ children, action }: {
+    children: string;
+    action?: ReactNode;
+}): import("react").JSX.Element;
+/** What the last action did, said once, where it was done. */
+export declare function Line({ children }: {
+    children: string;
+}): import("react").JSX.Element | null;
+/** A small heading over a run of cards. */
+export declare function Part({ title, detail, children }: {
+    title: string;
+    detail?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** A labelled control, with a line under it when there is more to say. */
+export declare function Field({ label, hint, children }: {
+    label: string;
+    hint?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Two or three choices side by side; the chosen one is filled. */
+export declare function Choice<T extends string>({ value, options, onChange, label }: {
+    value: T;
+    options: readonly {
+        id: T;
+        label: string;
+    }[];
+    onChange: (v: T) => void;
+    label: string;
+}): import("react").JSX.Element;
+/** A date from Unix seconds, or ''. */
+export declare const day: (s: number) => string;

package/lib/customize/ui.js

@@ -0,0 +1,99 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * What every Customize tab is drawn from, so the four read as one page: a grid
+ * of cards that stacks on a phone, the card itself with its one action, the
+ * featured card, a dialog with a title and a scrolling body, a delete that asks
+ * first, and the quiet line for empty, loading, signed-out and refused.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { Check, Plus, X } from '@hanzogui/lucide-icons-2';
+import { Button, Dialog, DialogContent, DialogTitle } from '@hanzo/ui';
+import { useState } from 'react';
+export const mono = { fontFamily: 'var(--f-mono, ui-monospace, monospace)' };
+/** A button that holds a card's text reads from the left, not from the middle a button centres it in. */
+export const left = { textAlign: 'left' };
+/** Whether a row answers a search: every word of it somewhere in the row's text. */
+export function matches(q, ...text) {
+    const words = q.trim().toLowerCase().split(/\s+/).filter(Boolean);
+    if (!words.length)
+        return true;
+    const hay = text.join(' ').toLowerCase();
+    return words.every((w) => hay.includes(w));
+}
+/** Cards in as many columns as fit, one column on a phone. */
+export function Grid({ children, label }) {
+    return (_jsx("div", { role: "list", "aria-label": label, style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(min(100%, 280px), 1fr))', gap: 12 }, children: children }));
+}
+/** A square with the thing's picture, or its initial. */
+export function Mark({ name, logo, icon, size = 32 }) {
+    const [gone, setGone] = useState(false);
+    return (_jsx(YStack, { width: size, height: size, rounded: "$3", bg: "$raised", items: "center", justify: "center", shrink: 0, overflow: "hidden", "aria-hidden": true, children: logo && !gone ? (_jsx("img", { src: logo, alt: "", width: size, height: size, onError: () => setGone(true), style: { objectFit: 'contain' } })) : ((icon ?? (_jsx(SizableText, { size: "$3", color: "$ink", children: (name.trim().charAt(0) || '?').toUpperCase() })))) }));
+}
+/**
+ * One card: what it is, a few lines about it, a quiet fact under them, and its
+ * action at the top right. Pressing the card opens it; the action is its own
+ * control beside that, never inside it.
+ */
+export function Tile({ title, detail, meta, mark, action, onOpen, }) {
+    const body = (_jsxs(_Fragment, { children: [mark, _jsxs(YStack, { flex: 1, minW: 0, gap: "$1", children: [_jsx(SizableText, { size: "$3", color: "$ink", numberOfLines: 1, children: title }), detail ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 3, children: detail })) : null, meta ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, opacity: 0.8, children: meta })) : null] })] }));
+    return (_jsxs(XStack, { role: "listitem", items: "flex-start", gap: "$2", p: "$3", minW: 0, rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", hoverStyle: onOpen ? { borderColor: '$edge' } : undefined, children: [onOpen ? (_jsx(XStack, { render: "button", "aria-label": title, onPress: onOpen, flex: 1, minW: 0, gap: "$3", items: "flex-start", cursor: "pointer", style: left, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: body })) : (_jsx(XStack, { flex: 1, minW: 0, gap: "$3", items: "flex-start", children: body })), action] }));
+}
+/** The one card the shelf puts first, drawn larger. */
+export function Featured({ title, detail, meta, mark, action, onOpen }) {
+    return (_jsxs(XStack, { items: "flex-start", gap: "$4", p: "$4", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", flexWrap: "wrap", rowGap: "$3", children: [_jsxs(XStack, { render: "button", "aria-label": title, onPress: onOpen, flex: 1, minW: 220, gap: "$4", items: "flex-start", cursor: "pointer", style: left, children: [mark, _jsxs(YStack, { flex: 1, minW: 0, gap: "$1.5", children: [_jsx(SizableText, { size: "$1", color: "$soft", textTransform: "uppercase", letterSpacing: 1, children: "Featured" }), _jsx(SizableText, { size: "$6", color: "$ink", numberOfLines: 1, children: title }), _jsx(SizableText, { size: "$2", color: "$soft", numberOfLines: 3, children: detail }), meta ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: meta })) : null] })] }), action] }));
+}
+/** A card's add control: a plus while it is not yours, a check once it is. */
+export function Add({ name, added, busy, onPress }) {
+    if (added) {
+        return (_jsx(XStack, { "aria-label": `${name} is added`, width: 32, height: 32, items: "center", justify: "center", shrink: 0, children: _jsx(Check, { size: 16 }) }));
+    }
+    return (_jsx(Button, { size: "icon-sm", variant: "outline", "aria-label": `Add ${name}`, disabled: busy, onPress: onPress, children: _jsx(Plus, { size: 14 }) }));
+}
+/** A dialog with a title, a close control and a body that scrolls inside the window. */
+export function Sheet({ title, open, onOpenChange, width = 560, children }) {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: width, showCloseButton: false, maxH: "88vh", gap: "$3", children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [_jsx(DialogTitle, { numberOfLines: 1, flex: 1, children: title }), _jsx(XStack, { render: "button", "aria-label": "Close", p: "$1", onPress: () => onOpenChange(false), children: _jsx(X, { size: 16 }) })] }), _jsx(YStack, { gap: "$3", overflow: "scroll", minH: 0, shrink: 1, children: children })] }) }));
+}
+/** Asks before a delete; says what goes with it. */
+export function Confirm({ what, says, open, onOpenChange, onYes }) {
+    const [busy, setBusy] = useState(false);
+    const [note, setNote] = useState('');
+    const yes = async () => {
+        setBusy(true);
+        setNote('');
+        try {
+            await onYes();
+            onOpenChange(false);
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'That did not work');
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsxs(Sheet, { title: `Delete ${what}?`, open: open, onOpenChange: onOpenChange, width: 420, children: [_jsx(SizableText, { size: "$2", color: "$soft", children: says }), _jsx(Line, { children: note }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => onOpenChange(false), children: "Cancel" }), _jsx(Button, { size: "sm", variant: "destructive", disabled: busy, onPress: () => void yes(), children: "Delete" })] })] }));
+}
+/** The quiet line for empty, loading, signed-out and refused. */
+export function Soft({ children, action }) {
+    return (_jsxs(YStack, { py: "$6", items: "center", gap: "$3", children: [_jsx(SizableText, { size: "$2", color: "$soft", style: { textAlign: 'center' }, children: children }), action] }));
+}
+/** What the last action did, said once, where it was done. */
+export function Line({ children }) {
+    if (!children)
+        return null;
+    return (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: children }));
+}
+/** A small heading over a run of cards. */
+export function Part({ title, detail, children }) {
+    return (_jsxs(YStack, { gap: "$2.5", children: [_jsxs(YStack, { gap: "$0.5", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: title }), detail ? (_jsx(SizableText, { size: "$1", color: "$soft", children: detail })) : null] }), children] }));
+}
+/** A labelled control, with a line under it when there is more to say. */
+export function Field({ label, hint, children }) {
+    return (_jsxs(YStack, { gap: "$1.5", children: [_jsx(SizableText, { size: "$2", color: "$ink", children: label }), children, hint ? (_jsx(SizableText, { size: "$1", color: "$soft", children: hint })) : null] }));
+}
+/** Two or three choices side by side; the chosen one is filled. */
+export function Choice({ value, options, onChange, label }) {
+    return (_jsx(XStack, { role: "group", "aria-label": label, p: 2, gap: 2, rounded: "$3", borderWidth: 1, borderColor: "$borderColor", self: "flex-start", children: options.map((o) => (_jsx(XStack, { render: "button", "aria-pressed": o.id === value, onPress: () => onChange(o.id), px: "$3", py: "$1", rounded: "$2", bg: o.id === value ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, children: _jsx(SizableText, { size: "$2", color: o.id === value ? '$ink' : '$soft', children: o.label }) }, o.id))) }));
+}
+/** A date from Unix seconds, or ''. */
+export const day = (s) => (s ? new Date(s * 1000).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' }) : '');

package/lib/desk.d.ts

@@ -1,5 +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, events, live, refused, retry, onRetry, onHide, }: {
+export declare function Desk({ id, repo, branch, base, environment, mode, pr, title, project, sandbox, events, live, menu, refused, retry, onRetry, onHide, }: {
     id: string;
     repo: string;
     branch: string;
@@ -10,8 +11,14 @@ export declare function Desk({ id, repo, branch, base, environment, mode, pr, ev
         href: string;
         label: string;
     };
+    title: string;
+    project: string;
+    /** The sandbox the run holds, or '' before it leases one and on a machine. */
+    sandbox: string;
     events: Event[];
     live: boolean;
+    /** What can be done to the run — rename, share, copy its id — as its header's menu offers it. */
+    menu?: NonNullable<DropdownMenuProps['items']>;
     refused: string;
     /** The refusal's one action: Retry, or Sign in when nobody is. */
     retry?: string;

package/lib/desk.js

@@ -1,36 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * The pane beside a run's transcript: the machine it runs on, the branch it
- * writes, the commands it ran, and the files on that branch.
+ * 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.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
-import { Copy, File, Folder, MoreHorizontal, PanelRightClose } from '@hanzogui/lucide-icons-2';
+import { Info, MoreHorizontal, PanelRightClose } from '@hanzogui/lucide-icons-2';
 import { Button, DropdownMenu } from '@hanzo/ui';
 import { useState } from 'react';
-import { blob, tree } from './api/git.js';
 import { shell } from './api/turn.js';
-import { useRead } from './data.js';
-import { useTarget } from './host.js';
-import { Out } from './out.js';
-export function Desk({ id, repo, branch, base, environment, mode, pr, events, live, refused, retry = 'Retry', onRetry, onHide, }) {
-    const [tab, setTab] = useState('terminal');
-    const [copied, setCopied] = useState(false);
+import { Door } from './door.js';
+import { Environment } from './environment.js';
+import { Files } from './files.js';
+import { Git } from './git.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 = 'Retry', onRetry, onHide, }) {
+    // A setup run's work IS the environment, so it opens there.
+    const [tab, setTab] = useState(mode === 'setup' ? 'environment' : 'terminal');
     const name = repo.split('/').filter(Boolean).pop() || repo;
-    const ref = branch || base || 'main';
     const lines = shell(events);
-    const copy = async () => {
-        try {
-            await navigator.clipboard.writeText(id);
-            setCopied(true);
-        }
-        catch {
-            setCopied(false);
-        }
-    };
-    return (_jsxs(YStack, { 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: [_jsx(TabButton, { id: "environment", tab: tab, onPick: setTab, children: "Environment" }), _jsx(TabButton, { id: "git", tab: tab, onPick: setTab, children: "Git" }), _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, { flex: 1 }), onHide ? (_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 }) })) : null, _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: [
-                            { key: 'copy', label: copied ? 'Copied' : 'Copy run id', icon: _jsx(Copy, { size: 16 }), description: id, onSelect: () => void copy() },
-                            { key: 'details', label: 'Details', onSelect: () => setTab('environment') },
-                        ] })] }), _jsxs(YStack, { flex: 1, minH: 0, overflow: tab === 'terminal' ? 'hidden' : 'scroll', p: tab === 'terminal' ? 0 : undefined, px: tab === 'terminal' ? 0 : '$3', py: tab === 'terminal' ? 0 : '$3', children: [tab === 'environment' ? (_jsxs(YStack, { gap: "$2", children: [_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' ? (_jsxs(YStack, { gap: "$2", children: [_jsx(Fact, { label: "Writing", value: branch || '—' }), _jsx(Fact, { label: "From", value: base || '—' }), pr.href ? (_jsx(Out, { href: pr.href, label: `Open pull request ${pr.label}`, children: _jsxs(SizableText, { size: "$2", color: "$ink", children: ["Pull request ", pr.label] }) })) : (_jsx(Fact, { label: "Pull request", value: "None yet" }))] })) : null, tab === 'terminal' ? (_jsx(Terminal, { lines: lines, live: live, refused: refused, retry: retry, onRetry: onRetry })) : null, tab === 'files' ? _jsx(Files, { repo: name, refName: ref }) : 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] })] }));
+    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: [_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, { flex: 1 }), onHide ? (_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 }) })) : null, _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] })] }));
 }
 function TabButton({ id, tab, onPick, children }) {
     const on = tab === id;
@@ -40,17 +30,21 @@ function Fact({ label, value }) {
     return (_jsxs(XStack, { gap: "$3", items: "baseline", children: [_jsx(SizableText, { size: "$1", color: "$soft", width: 96, children: label }), _jsx(SizableText, { flex: 1, size: "$2", color: "$ink", numberOfLines: 2, children: value })] }));
 }
 const mono = { fontFamily: 'var(--f-mono, ui-monospace, monospace)', whiteSpace: 'pre' };
-function Terminal({ lines, live, refused, retry, onRetry, }) {
+/**
+ * The Terminal tab: a shell in the run's sandbox, in the same working tree as the
+ * agent, while the run holds one; and the commands the agent itself ran, which
+ * outlive the sandbox. The shell is a tmux session named for the run, so a
+ * reopened tab reattaches to it.
+ */
+function Terminal({ id, sandbox, lines, live, refused, retry, onRetry, }) {
+    const reachable = live && Boolean(sandbox);
+    // The shell while there is one, unless the log was asked for.
+    const [log, setLog] = useState(false);
+    const showShell = reachable && !log;
+    return (_jsxs(YStack, { flex: 1, minH: 0, bg: "$background", children: [_jsxs(XStack, { px: "$2", py: "$1.5", gap: "$1", borderBottomWidth: 1, borderColor: "$borderColor", items: "center", children: [reachable ? (_jsx(XStack, { render: "button", "aria-label": "Shell", onPress: () => setLog(false), px: "$2", py: "$1", rounded: "$2", bg: showShell ? '$hover' : 'transparent', children: _jsx(SizableText, { size: "$1", color: showShell ? '$ink' : '$soft', children: "Shell" }) })) : null, _jsx(XStack, { render: "button", "aria-label": "Agent log", onPress: () => setLog(true), px: "$2", py: "$1", rounded: "$2", bg: showShell ? 'transparent' : '$hover', children: _jsx(SizableText, { size: "$1", color: showShell ? '$soft' : '$ink', children: "Agent log" }) })] }), showShell ? _jsx(Door, { which: "terminal", sandbox: sandbox, live: live, session: `run-${id.replace(/^sess_/, '').slice(0, 12)}` }) : _jsx(Log, { lines: lines, live: live, refused: refused, retry: retry, onRetry: onRetry })] }));
+}
+function Log({ lines, live, refused, retry, onRetry, }) {
     const prompt = 'workspace';
     const idle = lines.length === 0 && !live;
-    return (_jsxs(YStack, { flex: 1, minH: 0, bg: "$background", children: [_jsx(XStack, { px: "$3", py: "$2", borderBottomWidth: 1, borderColor: "$borderColor", children: _jsx(SizableText, { size: "$1", color: "$soft", children: "Terminal 1" }) }), _jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$3", py: "$3", gap: "$1", children: [idle ? (_jsxs(YStack, { flex: 1, items: "center", justify: "center", gap: "$3", py: "$8", children: [_jsx(SizableText, { size: "$2", color: "$soft", style: { textAlign: 'center' }, children: refused || 'This run finished without writing a command.' }), refused ? (_jsx(Button, { size: "sm", variant: "outline", onPress: onRetry, children: retry })) : null] })) : (lines.map((line, i) => line.role === 'cmd' ? (_jsxs(XStack, { gap: "$2", children: [_jsx(SizableText, { size: "$1", color: "$soft", style: mono, children: `${prompt} $` }), _jsx(SizableText, { flex: 1, size: "$1", color: "$ink", style: mono, children: line.text })] }, i)) : (_jsx(SizableText, { size: "$1", color: "$ink", style: mono, children: line.text }, i)))), live ? (_jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(SizableText, { size: "$1", color: "$soft", style: mono, children: `${prompt} $` }), _jsx(YStack, { width: 7, height: 14, bg: "$ink" })] })) : null] }), _jsx(XStack, { px: "$3", py: "$2", borderTopWidth: 1, borderColor: "$borderColor", children: _jsx(SizableText, { size: "$1", color: "$soft", children: "Commands appear here as the run writes them." }) })] }));
-}
-function Files({ repo, refName }) {
-    const t = useTarget();
-    const [dir, setDir] = useState('');
-    const [file, setFile] = useState('');
-    const list = useRead(repo ? () => tree(t, repo, refName, dir) : null, [], [t, repo, refName, dir]);
-    const body = useRead(file ? () => blob(t, repo, refName, file) : null, null, [t, repo, refName, file]);
-    const parent = dir.includes('/') ? dir.slice(0, dir.lastIndexOf('/')) : '';
-    return (_jsxs(YStack, { gap: "$2", children: [_jsxs(XStack, { gap: "$2", items: "center", children: [dir ? (_jsx(XStack, { render: "button", "aria-label": "Up one directory", onPress: () => { setDir(parent); setFile(''); }, px: "$1", py: "$1", children: _jsx(SizableText, { size: "$1", color: "$soft", children: "Up" }) })) : null, _jsxs(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: [repo, refName ? `@${refName}` : '', dir ? `/${dir}` : ''] })] }), list.error ? (_jsx(SizableText, { size: "$2", color: "$soft", children: list.error.message })) : list.loading && list.value.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "Reading the branch\u2026" })) : !repo ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "This run has no repository yet." })) : list.value.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "This directory is empty." })) : (list.value.map((e) => (_jsxs(XStack, { render: "button", "aria-label": e.dir ? `Open ${e.name}` : `Read ${e.name}`, onPress: () => (e.dir ? (setDir(e.path), setFile('')) : setFile(e.path)), items: "center", gap: "$2", py: "$1", hoverStyle: { bg: '$hover' }, children: [e.dir ? _jsx(Folder, { size: 14 }) : _jsx(File, { size: 14 }), _jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: e.name })] }, e.path)))), file && body.value ? (_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: { whiteSpace: 'pre-wrap', fontFamily: 'var(--f-mono, ui-monospace, monospace)' }, children: body.value.binary ? 'Binary file' : body.value.truncated ? 'Too large to show' : body.value.text || 'Empty file' })] })) : null, file && body.error ? (_jsx(SizableText, { size: "$1", color: "$soft", children: body.error.message })) : null] }));
+    return (_jsxs(YStack, { flex: 1, minH: 0, children: [_jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$3", py: "$3", gap: "$1", children: [idle ? (_jsxs(YStack, { flex: 1, items: "center", justify: "center", gap: "$3", py: "$8", children: [_jsx(SizableText, { size: "$2", color: "$soft", style: { textAlign: 'center' }, children: refused || 'This run finished without writing a command.' }), refused ? (_jsx(Button, { size: "sm", variant: "outline", onPress: onRetry, children: retry })) : null] })) : (lines.map((line, i) => line.role === 'cmd' ? (_jsxs(XStack, { gap: "$2", children: [_jsx(SizableText, { size: "$1", color: "$soft", style: mono, children: `${prompt} $` }), _jsx(SizableText, { flex: 1, size: "$1", color: "$ink", style: mono, children: line.text })] }, i)) : (_jsx(SizableText, { size: "$1", color: "$ink", style: mono, children: line.text }, i)))), live ? (_jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(SizableText, { size: "$1", color: "$soft", style: mono, children: `${prompt} $` }), _jsx(YStack, { width: 7, height: 14, bg: "$ink" })] })) : null] }), _jsx(XStack, { px: "$3", py: "$2", borderTopWidth: 1, borderColor: "$borderColor", children: _jsx(SizableText, { size: "$1", color: "$soft", children: "Commands appear here as the run writes them." }) })] }));
 }

package/lib/door.d.ts

@@ -0,0 +1,7 @@
+import { type Door as Which } from './api/sandbox.ts';
+export declare function Door({ which, sandbox, live, session }: {
+    which: Which;
+    sandbox: string;
+    live: boolean;
+    session: string;
+}): import("react").JSX.Element;

package/lib/door.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * One door into a run's sandbox — its screen or its shell — framed from cloud's
+ * own page with a fresh ticket in its address.
+ *
+ * The page says when its socket is up. A page that says it failed, or silence
+ * past the deadline, is a failed connection, and Retry mints a new ticket: a
+ * ticket is spent the moment its socket opens, so reloading the old address can
+ * only fail again.
+ */
+import { SizableText, YStack } from '@hanzo/gui';
+import { Button } from '@hanzo/ui';
+import { useEffect, useRef, useState } from 'react';
+import { door } from './api/sandbox.js';
+import { useTarget } from './host.js';
+/** What each page signs its messages to the window that frames it with. */
+const SOURCE = { screen: 'hanzo-screen', terminal: 'hanzo-term' };
+const WHAT = { screen: 'desktop', terminal: 'terminal' };
+const DEADLINE = 20_000;
+export function Door({ which, sandbox, live, session }) {
+    const t = useTarget();
+    const frame = useRef(null);
+    const [src, setSrc] = useState('');
+    const [state, setState] = useState('opening');
+    const [why, setWhy] = useState('');
+    const [attempt, setAttempt] = useState(0);
+    const up = live && Boolean(sandbox);
+    useEffect(() => {
+        if (!up)
+            return;
+        let gone = false;
+        setSrc('');
+        setState('opening');
+        setWhy('');
+        door(t, sandbox, which, session).then((u) => {
+            if (!gone)
+                setSrc(u);
+        }, (e) => {
+            if (gone)
+                return;
+            setState('failed');
+            setWhy(e instanceof Error ? e.message : '');
+        });
+        return () => {
+            gone = true;
+        };
+    }, [t, sandbox, which, session, up, attempt]);
+    useEffect(() => {
+        if (!src)
+            return;
+        const origin = new URL(src, window.location.href).origin;
+        const hear = (e) => {
+            if (e.origin !== origin || e.source !== frame.current?.contentWindow)
+                return;
+            const m = e.data;
+            if (!m || m.source !== SOURCE[which])
+                return;
+            if (m.retry === true) {
+                setAttempt((a) => a + 1);
+            }
+            else if (m.ready === true) {
+                setState('open');
+            }
+            else if (m.ready === false) {
+                setState('failed');
+                setWhy(typeof m.why === 'string' ? m.why : '');
+            }
+        };
+        window.addEventListener('message', hear);
+        const late = setTimeout(() => setState((s) => (s === 'opening' ? 'failed' : s)), DEADLINE);
+        return () => {
+            window.removeEventListener('message', hear);
+            clearTimeout(late);
+        };
+    }, [src, which]);
+    if (!live) {
+        return _jsx(Shut, { title: "Not running", body: `This run’s ${WHAT[which]} closed when the run stopped.` });
+    }
+    if (!sandbox) {
+        return _jsx(Shut, { title: "Starting", body: `The ${WHAT[which]} opens once the run’s sandbox is up.` });
+    }
+    if (state === 'failed') {
+        return (_jsx(Shut, { title: "Failed to connect", body: why || `Unable to reach the ${WHAT[which]}. The run may have stopped.`, children: _jsx(Button, { size: "sm", variant: "outline", onPress: () => setAttempt((a) => a + 1), children: "Retry" }) }));
+    }
+    return (_jsxs(YStack, { flex: 1, minH: 0, position: "relative", bg: "#000", children: [src ? (_jsx("iframe", { ref: frame, src: src, title: which === 'screen' ? 'The run’s desktop' : 'The run’s terminal', allow: "clipboard-read; clipboard-write", style: { border: 0, width: '100%', height: '100%', display: 'block', background: '#000' } })) : null, state === 'opening' ? (_jsx(YStack, { position: "absolute", t: 0, l: 0, r: 0, b: 0, items: "center", justify: "center", pointerEvents: "none", children: _jsx(SizableText, { size: "$2", color: "$soft", children: `Connecting to the ${WHAT[which]}…` }) })) : null] }));
+}
+function Shut({ title, body, children }) {
+    return (_jsxs(YStack, { flex: 1, items: "center", justify: "center", gap: "$2", px: "$6", py: "$8", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: title }), _jsx(SizableText, { size: "$2", color: "$soft", style: { textAlign: 'center', maxWidth: 360 }, children: body }), children] }));
+}

package/lib/environment.d.ts

@@ -0,0 +1,15 @@
+export declare function Environment({ repo, busy }: {
+    repo: string;
+    busy: boolean;
+}): import("react").JSX.Element;
+/**
+ * New's offer to set a codebase up. An agent onboards it, or an org admin saves
+ * it empty and writes the scripts by hand beside the next run.
+ */
+export declare function SetupDialog({ repo, open, onOpenChange, onStart, onSaved, }: {
+    repo: string;
+    open: boolean;
+    onOpenChange: (o: boolean) => void;
+    onStart: () => Promise<void>;
+    onSaved: () => void;
+}): import("react").JSX.Element;