@hanzo/build 0.2.51 → 0.2.53

package/lib/customize/skills.js

@@ -3,9 +3,9 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * 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.
+ * Browse is Hanzo's catalogue; adding one switches it on for the org, which is
+ * all adding is: the platform keeps no copy. Yours is the org's own skills —
+ * written here, each with its switch — and the catalogue's skills it has added.
  * A skill written here is switched on when it is saved.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
@@ -15,19 +15,20 @@ 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, Visitor } from './ui.js';
+import { useLoad } from './load.js';
+import { say } from './say.js';
+import { Add, Confirm, day, Empty, Failed, Field, Grid, Line, Mark, matches, mono, Part, Sheet, Soft, Tile, useCount, Visitor } from './ui.js';
 const PAGE = 60;
-export function Skills({ view, q, adding, onAdding, onView }) {
+export function Skills({ view, q, adding, onAdding, onView, onCount }) {
     const host = useHost();
     const t = useTarget();
     const signed = Boolean(host.person);
     // What every run in the org loads is an org admin's to change; a member reads it.
     const may = signed && host.admin;
-    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 own = useLoad(signed ? () => authored(t) : null, [], [t, signed]);
+    const on = useLoad(signed ? () => active(t) : null, [], [t, signed]);
+    const shelf = useLoad(view === 'discover' ? () => brand(t) : null, null, [t.api, view]);
     const [editing, setEditing] = useState(null);
     const [reading, setReading] = useState(null);
     const [busy, setBusy] = useState('');
@@ -35,6 +36,8 @@ export function Skills({ view, q, adding, onAdding, onView }) {
     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]);
+    const added = on.value.filter((x) => nameOf(x.name) && !mine.has(nameOf(x.name)));
+    useCount(own.value.length + added.length, onCount);
     /** Switch one skill on or off, then read what is on again. */
     const flip = async (name, next) => {
         setBusy(name);
@@ -45,7 +48,7 @@ export function Skills({ view, q, adding, onAdding, onView }) {
             setNote(next ? `${name} is on` : `${name} is off`);
         }
         catch (e) {
-            setNote(e.message);
+            setNote(say(e));
         }
         finally {
             setBusy('');
@@ -71,15 +74,18 @@ export function Skills({ view, q, adding, onAdding, onView }) {
     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: may ? _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] }));
+        return (_jsxs(YStack, { gap: "$3", children: [_jsx(Line, { children: note }), _jsx(Part, { title: "From Hanzo", detail: "Add one and every run in your organization can use it.", children: shelf.error && !shelf.value ? (_jsx(Failed, { error: shelf.error, onRetry: shelf.reload })) : !shelf.value ? (_jsx(Soft, { children: "Loading skills\u2026" })) : !found.length ? (_jsx(Soft, { children: all.length ? `No skill matches “${q.trim()}”.` : 'There are no skills to add yet.' })) : (_jsxs(_Fragment, { children: [_jsx(SizableText, { size: "$1", color: "$soft", children: found.length === all.length ? `${all.length} skills` : `${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: may ? _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(Visitor, { 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 addedShown = added.filter((x) => 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)}` : '', s.admitted ? '' : 'Not in runs until an admin saves it'].filter(Boolean).join(' · ') || undefined, mark: _jsx(Mark, { name: s.name }), onOpen: () => setEditing(s), action: may ? (_jsx(Switch, { checked: lit.has(tool(s.name)), disabled: busy === s.name, onCheckedChange: (v) => void flip(s.name, v), "aria-label": `${s.name} on` })) : (_jsx(SizableText, { size: "$1", color: "$soft", children: lit.has(tool(s.name)) ? 'On' : 'Off' })) }, 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) => {
+    return (_jsxs(YStack, { gap: "$5", children: [_jsx(Line, { children: note }), error && !own.value.length && !on.value.length ? (_jsx(Failed, { error: error, onRetry: () => {
+                    own.reload();
+                    on.reload();
+                } })) : (own.loading || on.loading) && !own.value.length && !on.value.length ? (_jsx(Soft, { children: "Loading your skills\u2026" })) : !own.value.length && !added.length ? (_jsxs(Empty, { title: "No skills yet", detail: may ? 'Add one from Hanzo, or write your own.' : 'An org admin adds skills. Browse what there is.', children: [_jsx(Button, { size: "sm", variant: "outline", onPress: () => onView('discover'), children: "Browse skills" }), may ? (_jsx(Button, { size: "sm", onPress: () => onAdding(true), children: "Write a skill" })) : null] })) : !ownShown.length && !addedShown.length ? (_jsx(Soft, { children: `No skill of yours matches “${q.trim()}”.` })) : (_jsxs(_Fragment, { children: [ownShown.length ? (_jsx(Part, { title: "Made by your team", detail: "Off keeps a skill but leaves it out of every run.", children: _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)}` : '', s.admitted ? '' : 'Not in runs until an admin saves it'].filter(Boolean).join(' · ') || undefined, mark: _jsx(Mark, { name: s.name }), onOpen: () => setEditing(s), action: may ? (_jsx(Switch, { checked: lit.has(tool(s.name)), disabled: busy === s.name, onCheckedChange: (v) => void flip(s.name, v), "aria-label": `${s.name} on` })) : (_jsx(SizableText, { size: "$1", color: "$soft", children: lit.has(tool(s.name)) ? 'On' : 'Off' })) }, s.id))) }) })) : null, addedShown.length ? (_jsx(Part, { title: "Added from Hanzo", detail: "On for every run in your organization.", children: _jsx(Grid, { label: "Added skills", children: addedShown.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: may ? (_jsx(Button, { size: "sm", variant: "ghost", disabled: busy === name, onPress: () => void flip(name, false), "aria-label": `Remove ${name}`, children: "Remove" })) : undefined }, x.name));
                             }) }) })) : null] })), reader, editor] }));
@@ -91,8 +97,8 @@ const firstLine = (md) => md
 /** 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 }) }))] }));
+    const doc = useLoad(() => 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.' : 'Every run in your organization can use it once added.' })] })) : null, doc.error ? (_jsx(Failed, { error: doc.error, onRetry: doc.reload })) : doc.loading && !doc.value ? (_jsx(Soft, { children: "Loading 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, may, onClose, onSaved, onDeleted, }) {
@@ -114,13 +120,13 @@ function Editor({ skill, may, onClose, onSaved, onDeleted, }) {
             onSaved(saved, !skill);
         }
         catch (e) {
-            setNote(e.message);
+            setNote(say(e));
         }
         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, "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 || (may ? '' : 'An org admin writes and deletes the organization’s skills.') }), _jsxs(XStack, { gap: "$2", items: "center", children: [skill && may ? (_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: may ? 'Cancel' : 'Close' }), may ? (_jsx(Button, { size: "sm", disabled: working, onPress: () => void save(), children: "Save" })) : null] }), skill ? (_jsx(Confirm, { what: skill.name, says: "The skill leaves your organization and every agent that names it.", open: asking, onOpenChange: setAsking, onYes: async () => {
+    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 keeps its name. Save under another name to make a new one.' : 'One lowercase word: letters, digits, _ or -.', children: _jsx(Input, { value: name, onChangeText: setName, "aria-label": "Name", disabled: Boolean(skill), autoCapitalize: "none" }) }), _jsx(Field, { label: "Description", hint: "One line. An agent reads it to decide whether it needs the 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 it 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 || (may ? '' : 'Only an org admin can write or delete skills.') }), _jsxs(XStack, { gap: "$2", items: "center", children: [skill && may ? (_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: may ? 'Cancel' : 'Close' }), may ? (_jsx(Button, { size: "sm", disabled: working, onPress: () => void save(), children: "Save" })) : null] }), 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

@@ -6,18 +6,21 @@ export declare const mono: {
 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. */
+/** Which half of a tab: what there is to browse and add (first), or what the org already has. */
+export type View = 'discover' | 'yours';
+/** What the shell hands a tab: which half, the search, the Add dialog's state, and where to say how many are yours. */
 export interface Pane {
     view: View;
     q: string;
     adding: boolean;
     onAdding: (open: boolean) => void;
     onView: (v: View) => void;
+    onCount: (n: number) => void;
 }
+/** Tells the shell how many are yours, whenever that changes. */
+export declare function useCount(n: number, onCount: (n: number) => void): 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;
+export { matches } from '../merge.ts';
 /** Cards in as many columns as fit, one column on a phone. */
 export declare function Grid({ children, label }: {
     children: ReactNode;
@@ -52,12 +55,13 @@ export declare function Featured({ title, detail, meta, mark, action, onOpen }:
     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 }: {
+/** A card's add control: Add while it is not yours, Added once it is. */
+export declare function Add({ name, added, busy, onPress, label }: {
     name: string;
     added: boolean;
     busy?: boolean;
     onPress: () => void;
+    label?: string;
 }): 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 }: {
@@ -75,11 +79,22 @@ export declare function Confirm({ what, says, open, onOpenChange, onYes }: {
     onOpenChange: (o: boolean) => void;
     onYes: () => Promise<void>;
 }): import("react").JSX.Element;
-/** The quiet line for empty, loading, signed-out and refused. */
+/** The quiet line for loading, a search that matched nothing, and signed-out. */
 export declare function Soft({ children, action }: {
     children: string;
     action?: ReactNode;
 }): import("react").JSX.Element;
+/** A read that failed: what went wrong in plain words, and the one control that asks again. */
+export declare function Failed({ error, onRetry }: {
+    error: unknown;
+    onRetry: () => void;
+}): import("react").JSX.Element;
+/** Nothing here yet: what this place holds, and the next step, as buttons. */
+export declare function Empty({ title, detail, children }: {
+    title: string;
+    detail: string;
+    children?: ReactNode;
+}): import("react").JSX.Element;
 /** What a signed-out visitor is told, with the one control that signs them in. */
 export declare function Visitor({ children }: {
     children: string;
@@ -89,10 +104,11 @@ 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 }: {
+export declare function Part({ title, detail, action, children }: {
     title: string;
     detail: string;
-    children: ReactNode;
+    action?: ReactNode;
+    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 }: {
@@ -100,12 +116,13 @@ export declare function Field({ label, hint, children }: {
     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 }: {
+/** Two or three choices side by side; the chosen one is filled. A count, when one is given, follows its label. */
+export declare function Choice<T extends string>({ value, options, onChange, label, }: {
     value: T;
     options: readonly {
         id: T;
         label: string;
+        count?: number;
     }[];
     onChange: (v: T) => void;
     label: string;

package/lib/customize/ui.js

@@ -3,24 +3,24 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * 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.
+ * first, the empty state that names the next step, a failure with its retry,
+ * and the quiet line for loading and signed-out.
  */
 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';
+import { useEffect, useState } from 'react';
 import { useHost } from '../host.js';
+import { say } from './say.js';
 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));
+/** Tells the shell how many are yours, whenever that changes. */
+export function useCount(n, onCount) {
+    useEffect(() => onCount(n), [n, onCount]);
 }
+/** Whether a row answers a search: every word of it somewhere in the row's text. */
+export { matches } from '../merge.js';
 /** 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 }));
@@ -43,12 +43,12 @@ export function Tile({ title, detail, meta, mark, action, onOpen, }) {
 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 }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: meta })] })] }), 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 }) {
+/** A card's add control: Add while it is not yours, Added once it is. */
+export function Add({ name, added, busy, onPress, label = 'Add' }) {
     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 (_jsxs(XStack, { "aria-label": `${name} is added`, gap: "$1", height: 32, items: "center", shrink: 0, children: [_jsx(Check, { size: 14 }), _jsx(SizableText, { size: "$1", color: "$soft", children: "Added" })] }));
     }
-    return (_jsx(Button, { size: "icon-sm", variant: "outline", "aria-label": `Add ${name}`, disabled: busy, onPress: onPress, children: _jsx(Plus, { size: 14 }) }));
+    return (_jsxs(Button, { size: "sm", variant: "outline", "aria-label": `${label} ${name}`, disabled: busy, onPress: onPress, children: [_jsx(Plus, { size: 14 }), " ", label] }));
 }
 /** 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 }) {
@@ -66,7 +66,7 @@ export function Confirm({ what, says, open, onOpenChange, onYes }) {
             onOpenChange(false);
         }
         catch (e) {
-            setNote(e.message);
+            setNote(say(e));
         }
         finally {
             setBusy(false);
@@ -74,9 +74,17 @@ export function Confirm({ what, says, open, onOpenChange, onYes }) {
     };
     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. */
+/** The quiet line for loading, a search that matched nothing, and signed-out. */
 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] }));
+    return (_jsxs(YStack, { py: "$6", items: "center", gap: "$3", children: [_jsx(SizableText, { size: "$2", color: "$soft", text: "center", children: children }), action] }));
+}
+/** A read that failed: what went wrong in plain words, and the one control that asks again. */
+export function Failed({ error, onRetry }) {
+    return (_jsxs(YStack, { py: "$6", items: "center", gap: "$3", role: "alert", children: [_jsx(SizableText, { size: "$2", color: "$soft", text: "center", children: say(error) }), _jsx(Button, { size: "sm", variant: "outline", onPress: onRetry, children: "Try again" })] }));
+}
+/** Nothing here yet: what this place holds, and the next step, as buttons. */
+export function Empty({ title, detail, children }) {
+    return (_jsxs(YStack, { py: "$8", px: "$4", items: "center", gap: "$3", rounded: "$4", borderWidth: 1, borderStyle: "dashed", borderColor: "$borderColor", children: [_jsxs(YStack, { items: "center", gap: "$1", maxW: 420, children: [_jsx(SizableText, { size: "$4", color: "$ink", text: "center", children: title }), _jsx(SizableText, { size: "$2", color: "$soft", text: "center", children: detail })] }), children ? (_jsx(XStack, { gap: "$2", flexWrap: "wrap", justify: "center", children: children })) : null] }));
 }
 /** What a signed-out visitor is told, with the one control that signs them in. */
 export function Visitor({ children }) {
@@ -90,16 +98,16 @@ export function Line({ children }) {
     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 }), _jsx(SizableText, { size: "$1", color: "$soft", children: detail })] }), children] }));
+export function Part({ title, detail, action, children }) {
+    return (_jsxs(YStack, { gap: "$2.5", render: "section", "aria-label": title, children: [_jsxs(XStack, { items: "center", gap: "$3", children: [_jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { render: "h2", size: "$4", color: "$ink", children: title }), _jsx(SizableText, { size: "$2", color: "$soft", children: detail })] }), action] }), 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))) }));
+/** Two or three choices side by side; the chosen one is filled. A count, when one is given, follows its label. */
+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", shrink: 0, children: options.map((o) => (_jsxs(XStack, { render: "button", "aria-pressed": o.id === value, "aria-label": o.count ? `${o.label}, ${o.count}` : o.label, onPress: () => onChange(o.id), items: "center", gap: "$1.5", 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.count ? (_jsx(SizableText, { size: "$1", color: "$soft", fontVariant: ['tabular-nums'], children: o.count })) : null] }, 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/data.d.ts

@@ -10,6 +10,19 @@ export interface Read<T> {
 }
 /** Run `load` whenever `key` changes (and on `reload`), keeping the last good value. */
 export declare function useRead<T>(load: (() => Promise<T>) | null, initial: T, key: unknown[]): Read<T>;
+/** How long a read is waited on before the screen says it is taking too long. */
+export declare const WAIT = 15000;
+/** A read that did not answer in time. */
+export declare class Slow extends Error {
+    constructor();
+}
+/**
+ * A read drawn at once from what this page last read under the same `key`, then
+ * read again behind it: stale while it revalidates, so moving between tabs is
+ * instant and a list never blanks to "reading" on the way back. A read that has
+ * not answered after `wait` ms is let go, as `Slow`. A null key reads nothing.
+ */
+export declare function useCached<T>(key: string | null, load: (signal: AbortSignal) => Promise<T>, initial: T, wait?: number): Read<T>;
 /**
  * The org's coding runs, newest first, kept current by the org's own session
  * stream: a status that moves moves its dot, and a run started anywhere appears.

package/lib/data.js

@@ -43,6 +43,76 @@ export function useRead(load, initial, key) {
     }, [...key, tick]);
     return { value, error, loading, reload };
 }
+/** How long a read is waited on before the screen says it is taking too long. */
+export const WAIT = 15_000;
+/** A read that did not answer in time. */
+export class Slow extends Error {
+    constructor() {
+        super('Hanzo is taking too long to answer.');
+        this.name = 'Slow';
+    }
+}
+/** What this page last read, per key, for the life of the page. */
+const seen = new Map();
+/**
+ * A read drawn at once from what this page last read under the same `key`, then
+ * read again behind it: stale while it revalidates, so moving between tabs is
+ * instant and a list never blanks to "reading" on the way back. A read that has
+ * not answered after `wait` ms is let go, as `Slow`. A null key reads nothing.
+ */
+export function useCached(key, load, initial, wait = WAIT) {
+    const [value, setValue] = useState(() => (key !== null && seen.has(key) ? seen.get(key) : initial));
+    const [error, setError] = useState(null);
+    const [loading, setLoading] = useState(key !== null);
+    const [tick, setTick] = useState(0);
+    const reload = useCallback(() => setTick((n) => n + 1), []);
+    const loader = useRef(load);
+    loader.current = load;
+    const was = useRef(key);
+    useEffect(() => {
+        // Another key (another org, another search) never shows the last one's answer or failure.
+        if (was.current !== key) {
+            was.current = key;
+            setValue(key !== null && seen.has(key) ? seen.get(key) : initial);
+            setError(null);
+        }
+        if (key === null) {
+            setLoading(false);
+            return;
+        }
+        const ctl = new AbortController();
+        const timer = setTimeout(() => {
+            ctl.abort();
+            setError(new Slow());
+            setLoading(false);
+        }, wait);
+        setLoading(true);
+        loader
+            .current(ctl.signal)
+            .then((v) => {
+            if (ctl.signal.aborted)
+                return;
+            seen.set(key, v);
+            setValue(v);
+            setError(null);
+            setLoading(false);
+        })
+            .catch((e) => {
+            if (ctl.signal.aborted)
+                return;
+            setError(e);
+            setLoading(false);
+        })
+            .finally(() => clearTimeout(timer));
+        return () => {
+            clearTimeout(timer);
+            ctl.abort();
+        };
+        // `initial` is the empty value, read only when the key changes.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [key, tick, wait]);
+    return { value, error, loading, reload };
+}
 /**
  * The org's coding runs, newest first, kept current by the org's own session
  * stream: a status that moves moves its dot, and a run started anywhere appears.

package/lib/desk.d.ts

@@ -1,6 +1,9 @@
 import { type DropdownMenuProps } from '@hanzo/ui';
 import type { Event } from './api/sessions.ts';
-export declare function Desk({ id, repo, branch, base, environment, mode, pr, title, project, sandbox, site, published, events, live, menu, refused, retry, onRetry, onHide, }: {
+import type { Deck, Tabs } from './tabs.ts';
+/** A run's panel before anyone has arranged it: what a run is read by, the terminal chosen. */
+export declare const SEED: Tabs;
+export declare function Desk({ id, repo, branch, base, environment, mode, pr, title, project, sandbox, site, published, events, live, menu, refused, retry, onRetry, side, sheet, onHide, }: {
     id: string;
     repo: string;
     branch: string;
@@ -27,5 +30,7 @@ export declare function Desk({ id, repo, branch, base, environment, mode, pr, ti
     /** The refusal's one action: Retry, or Sign in when nobody is. */
     retry: string;
     onRetry: () => void;
+    side: Deck;
+    sheet: boolean;
     onHide: () => void;
 }): import("react").JSX.Element;

package/lib/desk.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * The pane beside a run's transcript, as tabs: the Browser showing what the run's
- * sandbox serves (or where the run is published), its sandbox's Desktop and
- * Terminal, what it produced, its files, what it pushed, and its codebase's
- * environment.
+ * The run's side panel: Dev's kinds of tab in the one panel (panel.tsx) — the
+ * Preview of what the run's sandbox serves (or where it is published), its
+ * Artifacts, Files, Diff and Terminal, and on asking its Desktop and its
+ * codebase's Environment.
  *
  * The sandbox outlives the run: kept when the run ends, parked while nobody
  * watches, retired a day after it parks. The bar under the tabs says which and
  * suspends or resumes it; a tab that needs it running resumes it (sandbox.ts).
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
-import { ExternalLink, Info, MoreHorizontal, PanelRightClose, RefreshCcw } from '@hanzogui/lucide-icons-2';
+import { ExternalLink, Info, MoreHorizontal, RefreshCcw } from '@hanzogui/lucide-icons-2';
 import { Button, DropdownMenu } from '@hanzo/ui';
 import { PreviewFrame } from '@hanzo/ui/agents';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -22,24 +22,52 @@ import { Artifacts, Files } from './files.js';
 import { Git } from './git.js';
 import { useTarget } from './host.js';
 import { away, Out } from './out.js';
-/** The tabs that are a surface of their own, drawn edge to edge. */
-const BLEED = ['browser', 'desktop', 'terminal'];
-/** How often the sandbox's state, and what it serves, is read while the pane is open. */
+import { Panel } from './panel.js';
+/** A run's panel before anyone has arranged it: what a run is read by, the terminal chosen. */
+export const SEED = {
+    tabs: [
+        { id: 'preview', kind: 'preview', title: 'Preview' },
+        { id: 'artifacts', kind: 'artifacts', title: 'Artifacts' },
+        { id: 'files', kind: 'files', title: 'Files' },
+        { id: 'diff', kind: 'diff', title: 'Diff' },
+        { id: 'terminal', kind: 'terminal', title: 'Terminal' },
+    ],
+    at: 'terminal',
+};
+/** How often the sandbox's state, and what it serves, is read while the panel is open. */
 const EVERY = 10_000;
 const PORTS = 5_000;
-export function Desk({ id, repo, branch, base, environment, mode, pr, title, project, sandbox, site, published, events, live, menu, refused, retry, onRetry, onHide, }) {
-    // Until a tab is picked it follows the run: a setup run's work IS the
-    // environment, a published run opens on its site, any other on its terminal.
-    const [picked, setTab] = useState(null);
-    const tab = picked ?? (mode === 'setup' ? 'environment' : site ? 'browser' : 'terminal');
+export function Desk({ id, repo, branch, base, environment, mode, pr, title, project, sandbox, site, published, events, live, menu, refused, retry, onRetry, side, sheet, onHide, }) {
     const name = repo.split('/').filter(Boolean).pop() || repo;
     const lines = shell(events);
     const failed = failure(events);
-    const bleed = BLEED.includes(tab);
     const box = useBox(sandbox);
     // Nothing is said of the sandbox until it has been read.
     const held = box.value?.state ?? '';
-    return (_jsxs(YStack, { role: "complementary", "aria-label": "Run details", flex: 1, minW: 0, minH: 0, overflow: "hidden", style: { borderRadius: 'inherit' }, children: [_jsxs(XStack, { px: "$2", py: "$2", gap: "$1", borderBottomWidth: 1, borderColor: "$borderColor", items: "center", children: [_jsxs(XStack, { flex: 1, minW: 0, gap: "$1", overflow: "scroll", children: [_jsx(TabButton, { id: "browser", tab: tab, onPick: setTab, children: "Browser" }), _jsx(TabButton, { id: "desktop", tab: tab, onPick: setTab, children: "Desktop" }), _jsx(TabButton, { id: "terminal", tab: tab, onPick: setTab, children: "Terminal" }), _jsx(TabButton, { id: "artifacts", tab: tab, onPick: setTab, children: "Artifacts" }), _jsx(TabButton, { id: "files", tab: tab, onPick: setTab, children: "Files" }), _jsx(TabButton, { id: "git", tab: tab, onPick: setTab, children: "Git" }), _jsx(TabButton, { id: "environment", tab: tab, onPick: setTab, children: "Environment" })] }), _jsx(XStack, { render: "button", "aria-label": "Hide the side pane", px: "$2", py: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, onPress: onHide, children: _jsx(PanelRightClose, { size: 16 }) }), _jsx(DropdownMenu, { trigger: _jsx(XStack, { render: "button", "aria-label": "Run actions", px: "$2", py: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(MoreHorizontal, { size: 16 }) }), items: [...menu, { key: 'details', label: 'Details', icon: _jsx(Info, { size: 16 }), onSelect: () => setTab('environment') }] })] }), sandbox ? _jsx(Held, { box: box, live: live }) : null, _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: "Sandbox", value: sandbox || '—' }), _jsx(Fact, { label: "Mode", value: mode || 'build' })] })) : null, tab === 'browser' ? _jsx(Browser, { sandbox: sandbox, held: held, site: site, live: live }, published) : null, tab === 'git' ? _jsx(Git, { session: id, title: title, live: live }) : null, tab === 'desktop' ? _jsx(Door, { which: "screen", sandbox: sandbox, held: held, session: id }) : null, tab === 'terminal' ? (_jsx(Terminal, { id: id, sandbox: sandbox, held: held, lines: lines, live: live, failed: failed, refused: refused, retry: retry, onRetry: onRetry })) : null, tab === 'artifacts' ? (_jsx(Artifacts, { session: id, sandbox: sandbox, repo: repo, branch: branch, mode: mode, project: project, site: site, pr: pr, onEnvironment: () => setTab('environment') })) : null, tab === 'files' ? _jsx(Files, { session: id, repo: repo, branch: branch, sandbox: sandbox, live: held === 'running' }) : null] })] }));
+    const environ = () => side.open({ kind: 'environment', title: 'Environment' });
+    const kinds = [
+        { id: 'preview', label: 'Preview', bleed: true, render: () => _jsx(Browser, { sandbox: sandbox, held: held, site: site, live: live }, published) },
+        {
+            id: 'artifacts',
+            label: 'Artifacts',
+            render: () => _jsx(Artifacts, { session: id, sandbox: sandbox, repo: repo, branch: branch, mode: mode, project: project, site: site, pr: pr, onEnvironment: environ }),
+        },
+        { id: 'files', label: 'Files', render: () => _jsx(Files, { session: id, repo: repo, branch: branch, sandbox: sandbox, live: held === 'running' }) },
+        { id: 'diff', label: 'Diff', render: () => _jsx(Git, { session: id, title: title, live: live }) },
+        {
+            id: 'terminal',
+            label: 'Terminal',
+            bleed: true,
+            render: () => _jsx(Terminal, { id: id, sandbox: sandbox, held: held, lines: lines, live: live, failed: failed, refused: refused, retry: retry, onRetry: onRetry }),
+        },
+        { id: 'desktop', label: 'Desktop', bleed: true, render: () => _jsx(Door, { which: "screen", sandbox: sandbox, held: held, session: id }) },
+        {
+            id: 'environment',
+            label: 'Environment',
+            render: () => (_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: "Sandbox", value: sandbox || '—' }), _jsx(Fact, { label: "Mode", value: mode || 'build' })] })),
+        },
+    ];
+    return (_jsx(Panel, { side: side, kinds: kinds, sheet: sheet, onHide: onHide, label: "Run details", bar: sandbox ? _jsx(Held, { box: box, live: live }) : null, menu: _jsx(DropdownMenu, { trigger: _jsx(XStack, { render: "button", "aria-label": "Run actions", p: "$1.5", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(MoreHorizontal, { size: 16 }) }), items: [...menu, { key: 'details', label: 'Details', icon: _jsx(Info, { size: 16 }), onSelect: environ }] }) }));
 }
 /**
  * The run's sandbox as it stands, and what moves it. It is read while the pane is
@@ -208,10 +236,6 @@ function Site({ site, live, held }) {
                                     ? 'When the run starts a server in its sandbox, the page opens here.'
                                     : 'Nothing listens in this run’s sandbox, and it published no site. Its work is on its branch.' })] }) })] }));
 }
-function TabButton({ id, tab, onPick, children }) {
-    const on = tab === id;
-    return (_jsx(XStack, { render: "button", "aria-label": children, "aria-pressed": on, onPress: () => onPick(id), px: "$3", py: "$1.5", rounded: 999, shrink: 0, bg: on ? '$edge' : 'transparent', hoverStyle: { bg: '$hover' }, children: _jsx(SizableText, { size: "$2", color: on ? '$ink' : '$soft', children: children }) }));
-}
 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 })] }));
 }

package/lib/environment.d.ts

@@ -1,3 +1,5 @@
+import type { Home, Homes } from './api/work.ts';
+import { type Read } from './data.ts';
 export declare function Environment({ repo, busy }: {
     repo: string;
     busy: boolean;
@@ -5,11 +7,17 @@ export declare function Environment({ repo, busy }: {
 /**
  * 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.
+ *
+ * The repository is chosen from the org's own (the forge's, and every linked
+ * repository's copy there), never typed: a name that is not one of them — a
+ * board's key handed over as a codebase — is said so and cannot be set up.
  */
-export declare function SetupDialog({ repo, open, onOpenChange, onStart, onSaved, }: {
+export declare function SetupDialog({ repo, homes, open, onOpenChange, onStart, onSaved, onRepo, }: {
     repo: string;
+    homes: Read<Homes>;
     open: boolean;
     onOpenChange: (o: boolean) => void;
-    onStart: () => Promise<void>;
-    onSaved: () => void;
+    onStart: (repo: string) => Promise<void>;
+    onSaved: (repo: string) => void;
+    onRepo: (home: Home) => void;
 }): import("react").JSX.Element;