@hanzo/build 0.2.10 → 0.2.12

package/lib/customize/plugins.js

@@ -0,0 +1,93 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Plugins: TypeScript connectors the org builds for the runtime to run.
+ *
+ * Yours is what the org built, each with the source that runs. Building is the
+ * gate — the platform bundles and compiles the source and keeps it only if both
+ * succeed, and a failure says why in the bundler's words. Describe an API
+ * instead of writing the TypeScript and a model writes it; the result opens to
+ * be read. A plugin carries no credential: it names the connector whose
+ * credential it reads when it runs. Discover lists what this deployment mounts,
+ * which is read-only.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { Puzzle } from '@hanzogui/lucide-icons-2';
+import { Button, Input, Textarea } from '@hanzo/ui';
+import { Code } from '@hanzo/ui/chat';
+import { useState } from 'react';
+import { authored, build, mounted, remove } from '../api/plugins.js';
+import { useRead } from '../data.js';
+import { useHost, useTarget } from '../host.js';
+import { Choice, Confirm, day, Field, Grid, Line, Mark, matches, mono, Sheet, Soft, Tile } from './ui.js';
+const kb = (n) => (n < 1024 ? `${n} B` : `${(n / 1024).toFixed(1)} KB`);
+export function Plugins({ view, q, adding, onAdding, onView }) {
+    const host = useHost();
+    const t = useTarget();
+    const signed = Boolean(host.person);
+    const mine = useRead(signed && view === 'yours' ? () => authored(t) : null, [], [t, signed, view]);
+    const mounts = useRead(signed && view === 'discover' ? () => mounted(t) : null, [], [t, signed, view]);
+    const [opened, setOpened] = useState(null);
+    const [note, setNote] = useState('');
+    const sheets = (_jsxs(_Fragment, { children: [adding ? (_jsx(Build, { onClose: () => onAdding(false), onBuilt: (p, said) => {
+                    onAdding(false);
+                    onView('yours');
+                    mine.reload();
+                    setNote(said);
+                    setOpened(p);
+                } })) : null, opened ? (_jsx(Source, { plugin: opened, onClose: () => setOpened(null), onDeleted: () => {
+                    setNote(`${opened.name} is deleted`);
+                    setOpened(null);
+                    mine.reload();
+                } })) : null] }));
+    if (!signed) {
+        return _jsx(Soft, { action: host.signIn ? _jsx(Button, { size: "sm", onPress: () => host.signIn?.(), children: "Sign in" }) : undefined, children: view === 'discover' ? 'Sign in to see what this deployment mounts.' : 'Sign in to see your plugins.' });
+    }
+    if (view === 'discover') {
+        const shown = mounts.value.filter((m) => matches(q, m.name, ...m.prefixes));
+        return (_jsxs(YStack, { gap: "$3", children: [mounts.error && !mounts.value.length ? (_jsx(Soft, { children: mounts.error.message })) : mounts.loading && !mounts.value.length ? (_jsx(Soft, { children: "Reading what is mounted\u2026" })) : !shown.length ? (_jsx(Soft, { children: mounts.value.length ? 'Nothing mounted matches.' : 'This deployment reports nothing mounted.' })) : (_jsxs(_Fragment, { children: [_jsxs(SizableText, { size: "$1", color: "$soft", children: [shown.length, " subsystems mounted in this deployment. They are part of the platform, so there is nothing to add."] }), _jsx(Grid, { label: "Mounted subsystems", children: shown.map((m) => (_jsx(Tile, { title: m.name, detail: m.prefixes.join('  '), mark: _jsx(Mark, { name: m.name, icon: _jsx(Puzzle, { size: 15 }) }) }, m.name))) })] })), sheets] }));
+    }
+    const shown = mine.value.filter((p) => matches(q, p.name, p.provider));
+    return (_jsxs(YStack, { gap: "$3", children: [_jsx(Line, { children: note }), mine.error && !mine.value.length ? (_jsx(Soft, { children: mine.error.message })) : mine.loading && !mine.value.length ? (_jsx(Soft, { children: "Reading your plugins\u2026" })) : !mine.value.length ? (_jsx(Soft, { action: _jsx(Button, { size: "sm", variant: "outline", onPress: () => onAdding(true), children: "Build a plugin" }), children: "No plugins yet. Write a connector in TypeScript, or describe an API and have one written." })) : !shown.length ? (_jsx(Soft, { children: "No plugin matches." })) : (_jsx(Grid, { label: "Your plugins", children: shown.map((p) => (_jsx(Tile, { title: p.name, detail: p.provider ? `Reads the ${p.provider} connector’s credential when it runs.` : 'Needs no credential.', meta: day(p.built) ? `Built ${day(p.built)}` : undefined, mark: _jsx(Mark, { name: p.name }), onOpen: () => setOpened(p) }, p.id))) })), sheets] }));
+}
+const WAYS = [
+    { id: 'source', label: 'TypeScript' },
+    { id: 'spec', label: 'Describe an API' },
+];
+/** Build a plugin from its TypeScript, or from a description of the API it calls. */
+function Build({ onClose, onBuilt }) {
+    const t = useTarget();
+    const [name, setName] = useState('');
+    const [provider, setProvider] = useState('');
+    const [way, setWay] = useState('source');
+    // Each way keeps its own text, so switching between them loses neither.
+    const [source, setSource] = useState('');
+    const [spec, setSpec] = useState('');
+    const [working, setWorking] = useState(false);
+    const [note, setNote] = useState('');
+    const go = async () => {
+        setWorking(true);
+        setNote(way === 'spec' ? 'Writing and building it…' : 'Building it…');
+        try {
+            const out = await build(t, { name: name.trim(), provider, source: way === 'source' ? source : '', spec: way === 'spec' ? spec : '' });
+            onBuilt(out.plugin, `${out.plugin.name} built: ${kb(out.bytes)}${out.generated ? ', written from your description — read it below' : ''}.`);
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'The build failed');
+        }
+        finally {
+            setWorking(false);
+        }
+    };
+    return (_jsxs(Sheet, { title: "Build a plugin", open: true, onOpenChange: (o) => !o && onClose(), width: 680, children: [_jsx(Field, { label: "Name", hint: "One lowercase word: letters, digits, _ or -. The runtime loads it by this name.", children: _jsx(Input, { value: name, onChangeText: setName, placeholder: "acme", "aria-label": "Name", autoCapitalize: "none" }) }), _jsx(Field, { label: "Connector", hint: "Optional. The connector whose credential the plugin reads when it runs. A plugin never holds a key itself.", children: _jsx(Input, { value: provider, onChangeText: setProvider, placeholder: "acme", "aria-label": "Connector", autoCapitalize: "none" }) }), _jsx(Choice, { label: "Build from", value: way, options: WAYS, onChange: setWay }), _jsx(Field, { label: way === 'source' ? 'Source' : 'The API', hint: way === 'source'
+                    ? 'It is bundled and compiled in the runtime that will run it, and kept only if both succeed.'
+                    : 'An OpenAPI document, or prose naming the endpoints. A model writes the TypeScript; you read it before it runs.', children: _jsx(Textarea, { value: way === 'source' ? source : spec, onChangeText: way === 'source' ? setSource : setSpec, "aria-label": way === 'source' ? 'Source' : 'The API', placeholder: way === 'source' ? 'export const acme = createProvider({ … })' : 'POST /v1/things creates a thing…', rows: 14, style: mono }) }), _jsx(Line, { children: note }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: onClose, children: "Cancel" }), _jsx(Button, { size: "sm", disabled: working, onPress: () => void go(), children: "Build" })] })] }));
+}
+/** A built plugin's source, as the runtime will run it, and deleting it. */
+function Source({ plugin, onClose, onDeleted }) {
+    const t = useTarget();
+    const [asking, setAsking] = useState(false);
+    return (_jsxs(Sheet, { title: plugin.name, open: true, onOpenChange: (o) => !o && onClose(), width: 760, children: [_jsxs(SizableText, { size: "$2", color: "$soft", children: [plugin.provider ? `Reads the ${plugin.provider} connector’s credential when it runs.` : 'Needs no credential.', day(plugin.built) ? ` Built ${day(plugin.built)}.` : ''] }), _jsx(Code, { language: "TypeScript", value: plugin.source, children: _jsx(SizableText, { size: "$1", color: "$ink", style: { ...mono, whiteSpace: 'pre' }, children: plugin.source }) }), _jsx(YStack, { items: "flex-start", children: _jsx(Button, { size: "sm", variant: "ghost", onPress: () => setAsking(true), children: "Delete plugin" }) }), _jsx(Confirm, { what: plugin.name, says: "The runtime can no longer load it.", open: asking, onOpenChange: setAsking, onYes: async () => {
+                    await remove(t, plugin.id);
+                    onDeleted();
+                } })] }));
+}

package/lib/customize/skills.d.ts

@@ -0,0 +1,2 @@
+import { type Pane } from './ui.tsx';
+export declare function Skills({ view, q, adding, onAdding, onView }: Pane): import("react").JSX.Element;

package/lib/customize/skills.js

@@ -0,0 +1,127 @@
+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);
+    // 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 [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: may, busy: busy === reading.name, onFlip: (next) => void flip(reading.name, next), onClose: () => setReading(null) })) : null;
+    const editor = adding || editing ? (_jsx(Editor, { skill: editing, may: may, 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: 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(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: 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) => {
+                                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] }));
+}
+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, may, 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 || (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 () => {
+                    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, title, project, sandbox, 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;
@@ -16,6 +17,8 @@ export declare function Desk({ id, repo, branch, base, environment, mode, pr, ti
     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

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * pushed, its sandbox's desktop and shell, its files, and what it listens to.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
-import { Copy, 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 { shell } from './api/turn.js';
@@ -14,26 +14,13 @@ 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, refused, retry = 'Retry', onRetry, onHide, }) {
+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 [copied, setCopied] = useState(false);
     const name = repo.split('/').filter(Boolean).pop() || repo;
     const lines = shell(events);
     const bleed = BLEED.includes(tab);
-    const copy = async () => {
-        try {
-            await navigator.clipboard.writeText(id);
-            setCopied(true);
-        }
-        catch {
-            setCopied(false);
-        }
-    };
-    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: [
-                            { 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: bleed ? 'hidden' : 'scroll', px: bleed ? 0 : '$3', py: bleed ? 0 : '$3', children: [tab === 'environment' ? (_jsxs(YStack, { gap: "$2", children: [_jsx(Environment, { repo: name, busy: live && mode === 'setup' }), _jsx(SizableText, { size: "$2", color: "$ink", pt: "$4", children: "This run" }), _jsx(Fact, { label: "Run", value: id }), _jsx(Fact, { label: "Repository", value: name || '—' }), _jsx(Fact, { label: "Branch", value: branch || '—' }), _jsx(Fact, { label: "Base", value: base || '—' }), _jsx(Fact, { label: "Runs on", value: environment || 'sandbox' }), _jsx(Fact, { label: "Mode", value: mode || 'build' })] })) : null, tab === 'git' ? _jsx(Git, { session: id, title: title, live: live }) : null, tab === 'desktop' ? _jsx(Door, { which: "screen", sandbox: sandbox, live: live, session: id }) : null, tab === 'terminal' ? (_jsx(Terminal, { id: id, sandbox: sandbox, lines: lines, live: live, refused: refused, retry: retry, onRetry: onRetry })) : null, tab === 'files' ? (_jsx(Files, { session: id, repo: repo, branch: branch, sandbox: sandbox, live: live, mode: mode, project: project, pr: pr, onEnvironment: () => setTab('environment') })) : null, tab === 'subscriptions' ? (_jsx(YStack, { flex: 1, items: "center", justify: "center", px: "$6", children: _jsx(SizableText, { size: "$2", color: "$soft", style: { textAlign: 'center', maxWidth: 320 }, children: "Ask an agent to subscribe to a Slack channel or thread, a pull request, or a timer." }) })) : null] })] }));
+    return (_jsxs(YStack, { role: "complementary", "aria-label": "Run details", flex: 1, minW: 0, minH: 0, borderLeftWidth: 1, borderColor: "$borderColor", display: "none", $md: { display: 'flex' }, children: [_jsxs(XStack, { px: "$2", pt: "$2", gap: "$1", borderBottomWidth: 1, borderColor: "$borderColor", items: "center", children: [_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;

package/lib/find.d.ts

@@ -0,0 +1,7 @@
+import type { RailSession } from '@hanzo/ui/chat';
+export declare function Find({ open, onOpenChange, recents, onOpen, }: {
+    open: boolean;
+    onOpenChange: (o: boolean) => void;
+    recents: RailSession[];
+    onOpen: (id: string) => void;
+}): import("react").JSX.Element;

package/lib/find.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Finding a run: the rail's search icon. The org's coding runs as the platform
+ * lists them, newest first, filtered by status and paged back as far as they
+ * go; what is typed narrows the runs read so far by name and codebase. Until
+ * the first page lands it searches the rail's own recents.
+ */
+import { ScrollView, SizableText, XStack, YStack } from '@hanzo/gui';
+import { Button, Dialog, DialogContent, DialogTitle, Input } from '@hanzo/ui';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { page } from './api/sessions.js';
+import { useHost, useTarget } from './host.js';
+/** The statuses the platform filters on, and every run. */
+const FILTERS = [
+    { id: '', label: 'All' },
+    { id: 'running', label: 'Running' },
+    { id: 'paused', label: 'Paused' },
+    { id: 'done', label: 'Done' },
+    { id: 'error', label: 'Error' },
+];
+const PAGE = 50;
+export function Find({ open, onOpenChange, recents, onOpen, }) {
+    const host = useHost();
+    const t = useTarget();
+    const signed = Boolean(host.person);
+    const [q, setQ] = useState('');
+    const [status, setStatus] = useState('');
+    const [rows, setRows] = useState(null);
+    const [next, setNext] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+    // A page asked for under another status or an earlier opening lands on nothing.
+    const asked = useRef(0);
+    const read = (after) => {
+        const mine = after ? asked.current : ++asked.current;
+        setLoading(true);
+        setError('');
+        return page(t, { kind: 'coding', status, limit: PAGE, after })
+            .then((p) => {
+            if (mine !== asked.current)
+                return;
+            setRows((prev) => (after && prev ? [...prev, ...p.sessions.filter((s) => !prev.some((r) => r.id === s.id))] : p.sessions));
+            setNext(p.next);
+        })
+            .catch((e) => {
+            if (mine === asked.current)
+                setError(e instanceof Error ? e.message : 'The runs could not be read');
+        })
+            .finally(() => {
+            if (mine === asked.current)
+                setLoading(false);
+        });
+    };
+    // Opening, or another status, reads from the newest again.
+    useEffect(() => {
+        if (!open || !signed)
+            return;
+        setRows(null);
+        setNext('');
+        void read('');
+        // `read` closes over the status and target this effect is keyed on.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open, signed, status, t]);
+    const hits = useMemo(() => {
+        const n = q.trim().toLowerCase();
+        const all = rows
+            ? rows.map((s) => ({ id: s.id, title: s.title || 'Untitled run', line: [s.repo, s.status].filter(Boolean).join(' · ') }))
+            : status
+                ? []
+                : recents.map((r) => ({ id: r.id, title: r.title, line: '' }));
+        return n ? all.filter((h) => `${h.title} ${h.line}`.toLowerCase().includes(n)) : all;
+    }, [q, rows, recents, status]);
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 520, children: [_jsx(DialogTitle, { children: "Find a run" }), _jsx(Input, { autoFocus: true, value: q, onChangeText: setQ, placeholder: "Search runs\u2026", "aria-label": "Search runs", onKeyDown: (e) => {
+                        if ((e.key ?? e.nativeEvent?.key) === 'Enter' && hits[0])
+                            onOpen(hits[0].id);
+                    } }), _jsx(XStack, { gap: "$1", flexWrap: "wrap", role: "group", "aria-label": "Status", children: FILTERS.map((f) => (_jsx(XStack, { render: "button", "aria-label": f.label, "aria-pressed": status === f.id, onPress: () => setStatus(f.id), px: "$2.5", py: "$1", rounded: "$10", borderWidth: 1, borderColor: status === f.id ? '$ink' : '$borderColor', bg: status === f.id ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, children: _jsx(SizableText, { size: "$1", color: status === f.id ? '$ink' : '$soft', children: f.label }) }, f.id || 'all'))) }), _jsx(ScrollView, { maxH: 360, children: _jsxs(YStack, { gap: "$1", role: "list", children: [hits.map((h) => (_jsxs(XStack, { role: "listitem", render: "button", "aria-label": h.title, onPress: () => onOpen(h.id), px: "$2", py: "$1.5", rounded: "$3", hoverStyle: { bg: '$hover' }, items: "center", gap: "$3", children: [_jsx(SizableText, { flex: 1, minW: 0, size: "$2", color: "$ink", numberOfLines: 1, style: { textAlign: 'left' }, children: h.title }), h.line ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, shrink: 0, maxW: "45%", children: h.line })) : null] }, h.id))), !loading && !error && hits.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", px: "$2", children: rows && next ? 'No run read so far matches.' : 'No run matches.' })) : null] }) }), error ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: error })) : null, loading ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: "Reading runs\u2026" })) : next ? (_jsx(XStack, { children: _jsx(Button, { size: "sm", variant: "outline", onPress: () => void read(next), children: "Older runs" }) })) : null] }) }));
+}

package/lib/foot.d.ts

@@ -0,0 +1,16 @@
+export declare const DOCS = "https://docs.hanzo.ai/docs/dev";
+/** Hanzo in Slack is set up under Settings; the card goes there, and once dismissed stays gone. */
+export declare function Slack({ onOpen, onDismiss }: {
+    onOpen: () => void;
+    onDismiss: () => void;
+}): import("react").JSX.Element;
+/**
+ * The account menu. The rail draws the account row and says when it was pressed,
+ * so the menu hangs off an anchor laid over the rail's foot: above it on the
+ * open rail, beside it on the collapsed one.
+ */
+export declare function Who({ open, onOpenChange, narrow }: {
+    open: boolean;
+    onOpenChange: (o: boolean) => void;
+    narrow: boolean;
+}): import("react").JSX.Element;