@hanzo/build 0.2.52 → 0.2.53

package/lib/customize/connectors.js

@@ -2,13 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Connectors: MCP servers whose tools an agent calls.
  *
- * Yours is the servers the org added — by URL, or off the shelf — each with the
- * tools it brings and a switch for each; a tool is called only while it is on.
- * Adding a server switches its tools on. Discover is the shelf (our copy of the
- * public MCP registry) and the fleet's own servers, which every run can call and
- * nothing adds. A listing is added here only when it serves streamable HTTP; one
- * that ships only a package needs somewhere to run it first, so it has no plus.
- * A server's secret is sealed in KMS and never shown again.
+ * Browse is the shelf (our copy of the public MCP registry), then the fleet's
+ * own servers, which every run can call and nothing adds; that list is read
+ * only when asked for, since listing it asks every subsystem at once. A listing
+ * is added here only when it serves streamable HTTP; one that ships only a
+ * package needs somewhere to run it first, so it has no Add. Yours is the
+ * servers the org added — by URL, or off the shelf — each with one switch for
+ * all its tools on its card and one per tool inside; a tool is called only
+ * while it is on. Adding a server switches its tools on. A server's secret is
+ * sealed in KMS and never shown again.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
 import { ChevronDown, ExternalLink, KeyRound, Server as ServerIcon } from '@hanzogui/lucide-icons-2';
@@ -17,24 +19,49 @@ import { useEffect, useMemo, useState } from 'react';
 import { add, one, owns, ready, remove, servers, shelf, titleOf } from '../api/connectors.js';
 import { natives } from '../api/mcp.js';
 import { toggle, tools } from '../api/tools.js';
-import { useRead } from '../data.js';
 import { useHost, useTarget } from '../host.js';
 import { Out } from '../out.js';
-import { Add, Confirm, day, Featured, Field, Grid, left, Line, Mark, matches, mono, Part, Sheet, Soft, Tile, Visitor } from './ui.js';
+import { route } from '../route.js';
+import { useLoad } from './load.js';
+import { say } from './say.js';
+import { Add, Confirm, Empty, Failed, Featured, Field, Grid, left, Line, Mark, matches, mono, Part, Sheet, Soft, Tile, useCount, Visitor } from './ui.js';
 const PAGE = 48;
 /** The part of a URL a person reads: its host and path. */
 const where = (url) => url.replace(/^https?:\/\//, '').replace(/\/$/, '');
-export function Connectors({ view, q, adding, onAdding, onView }) {
+export function Connectors({ view, q, adding, onAdding, onView, onCount }) {
     const host = useHost();
     const t = useTarget();
     const signed = Boolean(host.person);
     // What every run in the org connects to is an org admin's to change; a member reads it.
     const may = signed && host.admin;
-    const mine = useRead(signed ? () => servers(t) : null, [], [t, signed]);
+    const mine = useLoad(signed ? () => servers(t) : null, [], [t, signed]);
+    // Every server's tools, for the switch on each card; read once for all of them.
+    const plane = useLoad(signed && view === 'yours' && mine.value.length ? () => tools(t, { source: 'mcp' }) : null, [], [t, signed, view, mine.value]);
     const [opened, setOpened] = useState(null);
     const [listing, setListing] = useState(null);
     const [connecting, setConnecting] = useState(null);
+    const [busy, setBusy] = useState('');
     const [note, setNote] = useState('');
+    useCount(mine.value.length, onCount);
+    /** Switch every tool a server brings on or off at once, then read them again. */
+    const flip = async (s, next) => {
+        const its = plane.value.filter((x) => owns(s, x.name)).map((x) => x.name);
+        if (!its.length)
+            return;
+        setBusy(s.id);
+        setNote('');
+        try {
+            await toggle(t, next ? its : [], next ? [] : its);
+            plane.reload();
+            setNote(next ? `${s.name} is on` : `${s.name} is off`);
+        }
+        catch (e) {
+            setNote(say(e));
+        }
+        finally {
+            setBusy('');
+        }
+    };
     const connect = adding || connecting ? (_jsx(Connect, { listing: connecting, onClose: () => {
             setConnecting(null);
             onAdding(false);
@@ -56,7 +83,21 @@ export function Connectors({ view, q, adding, onAdding, onView }) {
         return _jsx(Visitor, { children: "Sign in to see your connectors." });
     }
     const shown = mine.value.filter((s) => matches(q, s.name, s.url, s.listing));
-    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 connectors\u2026" })) : !mine.value.length ? (_jsx(Soft, { action: _jsx(Button, { size: "sm", variant: "outline", onPress: () => onView('discover'), children: "Discover connectors" }), children: may ? 'No connectors yet. Add an MCP server by its URL, or pick one off the shelf.' : 'No connectors yet. An org admin adds them.' })) : !shown.length ? (_jsx(Soft, { children: "No connector matches." })) : (_jsx(Grid, { label: "Your connectors", children: shown.map((s) => (_jsx(Tile, { title: s.name, detail: where(s.url), meta: [s.listing ? 'From the shelf' : 'Added by URL', s.secret ? 'secret sealed in KMS' : '', day(s.created), s.admitted ? '' : 'not in runs until an admin adds it again'].filter(Boolean).join(' · '), mark: _jsx(Mark, { name: s.name }), onOpen: () => setOpened(s) }, s.id))) })), opened ? (_jsx(Detail, { server: opened, may: may, onClose: () => setOpened(null), onDeleted: () => {
+    return (_jsxs(YStack, { gap: "$3", children: [_jsx(Line, { children: note }), mine.error && !mine.value.length ? (_jsx(Failed, { error: mine.error, onRetry: mine.reload })) : mine.loading && !mine.value.length ? (_jsx(Soft, { children: "Loading your connectors\u2026" })) : !mine.value.length ? (_jsxs(Empty, { title: "No connectors yet", detail: may ? 'Connect an app from Browse, or add any MCP server by its URL.' : 'An org admin adds connectors. Browse what there is.', children: [_jsx(Button, { size: "sm", variant: "outline", onPress: () => onView('discover'), children: "Browse connectors" }), may ? (_jsx(Button, { size: "sm", onPress: () => onAdding(true), children: "Add by URL" })) : null] })) : !shown.length ? (_jsx(Soft, { children: `No connector of yours matches “${q.trim()}”.` })) : (_jsx(Grid, { label: "Your connectors", children: shown.map((s) => {
+                    const its = plane.value.filter((x) => owns(s, x.name));
+                    const lit = its.filter((x) => x.activated).length;
+                    return (_jsx(Tile, { title: s.name, detail: where(s.url), meta: [
+                            its.length ? `${lit} of ${its.length} tools on` : plane.loading ? '' : 'No tools listed yet',
+                            s.listing ? 'From Browse' : 'Added by URL',
+                            s.secret ? 'Secret in KMS' : '',
+                            s.admitted ? '' : 'Not in runs until an admin adds it again',
+                        ]
+                            .filter(Boolean)
+                            .join(' · '), mark: _jsx(Mark, { name: s.name }), onOpen: () => setOpened(s), action: may && its.length ? (_jsx(Switch, { checked: lit > 0, disabled: busy === s.id, onCheckedChange: (v) => void flip(s, v), "aria-label": `${s.name} on` })) : its.length ? (_jsx(SizableText, { size: "$1", color: "$soft", children: lit ? 'On' : 'Off' })) : undefined }, s.id));
+                }) })), plane.error && mine.value.length ? _jsx(Line, { children: `Tools: ${say(plane.error)}` }) : null, opened ? (_jsx(Detail, { server: opened, may: may, onClose: () => {
+                    setOpened(null);
+                    plane.reload();
+                }, onDeleted: () => {
                     setNote(`${opened.name} is removed`);
                     setOpened(null);
                     mine.reload();
@@ -66,19 +107,20 @@ export function Connectors({ view, q, adding, onAdding, onView }) {
 function Shelf({ q, signed, may, added, onOpen, onAdd }) {
     const t = useTarget();
     const text = useSettled(q.trim(), 300);
-    const first = useRead(signed ? () => shelf(t, { text, limit: PAGE }) : null, null, [t, signed, text]);
+    const first = useLoad(signed ? () => shelf(t, { text, limit: PAGE }) : null, null, [t, signed, text]);
     const [more, setMore] = useState([]);
     const [paging, setPaging] = useState(false);
     const [note, setNote] = useState('');
     useEffect(() => setMore([]), [first.value]);
     if (!signed) {
-        return (_jsx(Part, { title: "The shelf", detail: "MCP servers the public registries publish.", children: _jsx(Visitor, { children: "Sign in to browse the shelf." }) }));
+        return (_jsx(Part, { title: "Connect an app", detail: "Give runs the tools you already use.", children: _jsx(Visitor, { children: "Sign in to browse connectors." }) }));
     }
     const page = first.value;
     const list = [...(page?.listings ?? []), ...more];
     const hero = !text ? list.find((l) => l.featured) : undefined;
     const rest = hero ? list.filter((l) => l !== hero) : list;
-    const action = (l) => !may ? undefined : ready(l) ? (_jsx(Add, { name: titleOf(l), added: added.has(l.id), onPress: () => onAdd(l) })) : (_jsx(SizableText, { size: "$1", color: "$soft", shrink: 0, pt: "$1.5", children: "Package" }));
+    // A listing that ships only as a package has no Add: its card says it needs a place to run.
+    const action = (l) => (may && ready(l) ? _jsx(Add, { name: titleOf(l), added: added.has(l.id), onPress: () => onAdd(l) }) : undefined);
     const next = async () => {
         setPaging(true);
         setNote('');
@@ -87,16 +129,16 @@ function Shelf({ q, signed, may, added, onOpen, onAdd }) {
             setMore((m) => [...m, ...got.listings]);
         }
         catch (e) {
-            setNote(e.message);
+            setNote(say(e));
         }
         finally {
             setPaging(false);
         }
     };
-    return (_jsx(Part, { title: "The shelf", detail: "MCP servers the public registries publish. A plus adds one to your organization.", children: first.error && !page ? (_jsx(Soft, { children: first.error.message })) : !page ? (_jsx(Soft, { children: "Reading the shelf\u2026" })) : !list.length ? (_jsx(Soft, { children: text ? 'Nothing on the shelf matches.' : 'The shelf is empty.' })) : (_jsxs(YStack, { gap: "$3", children: [hero ? (_jsx(Featured, { title: titleOf(hero), detail: hero.description, meta: facts(hero), mark: _jsx(Mark, { name: titleOf(hero), logo: hero.logo, size: 48 }), onOpen: () => onOpen(hero), action: action(hero) })) : null, _jsx(SizableText, { size: "$1", color: "$soft", children: list.length < page.total ? `${list.length} of ${page.total} servers` : `${page.total} servers` }), _jsx(Grid, { label: "Servers on the shelf", children: rest.map((l) => (_jsx(Tile, { title: titleOf(l), detail: l.description, meta: facts(l), mark: _jsx(Mark, { name: titleOf(l), logo: l.logo }), onOpen: () => onOpen(l), action: action(l) }, l.id))) }), _jsx(Line, { children: note }), list.length < page.total ? (_jsx(XStack, { justify: "center", children: _jsx(Button, { size: "sm", variant: "outline", disabled: paging, onPress: () => void next(), children: "Show more" }) })) : null] })) }));
+    return (_jsx(Part, { title: "Connect an app", detail: "Give runs the tools you already use. Adding one turns its tools on for your organization.", children: first.error && !page ? (_jsx(Failed, { error: first.error, onRetry: first.reload })) : !page ? (_jsx(Soft, { children: "Loading connectors\u2026" })) : !list.length ? (_jsx(Soft, { children: text ? `No connector matches “${text}”.` : 'There are no connectors to add yet.' })) : (_jsxs(YStack, { gap: "$3", children: [hero ? (_jsx(Featured, { title: titleOf(hero), detail: hero.description, meta: facts(hero), mark: _jsx(Mark, { name: titleOf(hero), logo: hero.logo, size: 48 }), onOpen: () => onOpen(hero), action: action(hero) })) : null, _jsx(SizableText, { size: "$1", color: "$soft", children: list.length < page.total ? `${list.length} of ${page.total} connectors` : `${page.total} connectors` }), _jsx(Grid, { label: "Servers on the shelf", children: rest.map((l) => (_jsx(Tile, { title: titleOf(l), detail: l.description, meta: facts(l), mark: _jsx(Mark, { name: titleOf(l), logo: l.logo }), onOpen: () => onOpen(l), action: action(l) }, l.id))) }), _jsx(Line, { children: note }), list.length < page.total ? (_jsx(XStack, { justify: "center", children: _jsx(Button, { size: "sm", variant: "outline", disabled: paging, onPress: () => void next(), children: "Show more" }) })) : null] })) }));
 }
 /** The facts a card carries under its description. */
-const facts = (l) => [l.vendor, l.official ? 'Official' : '', ready(l) ? 'Hosted' : 'Package only'].filter(Boolean).join(' · ');
+const facts = (l) => [l.vendor, l.official ? 'Official' : '', ready(l) ? 'Hosted' : 'Package only: needs a place to run'].filter(Boolean).join(' · ');
 /** `value` once it has held still for `ms`. */
 function useSettled(value, ms) {
     const [settled, setSettled] = useState(value);
@@ -106,25 +148,32 @@ function useSettled(value, ms) {
     }, [value, ms]);
     return settled;
 }
-/** The fleet's own servers, from the MCP server's tools/list. Every run can call them. */
+/**
+ * The fleet's own servers, from the MCP server's tools/list. Every run can call
+ * them. Listed when asked for — that list starts every subsystem it names — and
+ * at once on the old MCP address, which exists to show them.
+ */
 function Natives({ q }) {
+    const host = useHost();
     const t = useTarget();
-    const list = useRead(() => natives(t), [], [t]);
+    const r = route(host.path);
+    const [asked, setAsked] = useState(r.kind === 'screen' && r.screen === 'mcp');
+    const list = useLoad(asked ? () => natives(t) : null, [], [t, asked]);
     const [open, setOpen] = useState(null);
     const shown = list.value.filter((s) => matches(q, s.name, s.description, ...s.ops));
     const ops = shown.reduce((n, s) => n + s.ops.length, 0);
-    return (_jsx(Part, { title: "Built in", detail: "The fleet\u2019s own servers. A run starts one when it calls it, and nothing needs adding.", children: list.loading && !list.value.length ? (_jsx(Soft, { children: "Reading the servers\u2026" })) : list.error && !list.value.length ? (_jsx(Soft, { children: list.error.message })) : !shown.length ? (_jsx(Soft, { children: list.value.length ? 'No built-in server matches.' : 'The MCP server listed no native servers.' })) : (_jsxs(YStack, { gap: "$1", children: [_jsxs(SizableText, { size: "$1", color: "$soft", children: [shown.length, " servers \u00B7 ", ops, " operations"] }), shown.map((s) => {
+    return (_jsx(Part, { title: "Built in", detail: "Hanzo\u2019s own servers. Always on: every run can call them, and nothing needs adding.", action: asked ? undefined : (_jsx(Button, { size: "sm", variant: "outline", onPress: () => setAsked(true), children: "Show built-in servers" })), children: !asked ? null : list.loading && !list.value.length ? (_jsx(Soft, { children: "Loading built-in servers\u2026" })) : list.error && !list.value.length ? (_jsx(Failed, { error: list.error, onRetry: list.reload })) : !shown.length ? (_jsx(Soft, { children: list.value.length ? `No built-in server matches “${q.trim()}”.` : 'No built-in servers are listed.' })) : (_jsxs(YStack, { gap: "$1", children: [_jsxs(SizableText, { size: "$1", color: "$soft", children: [shown.length, " servers \u00B7 ", ops, " operations"] }), shown.map((s) => {
                     const on = open === s.name;
-                    return (_jsxs(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: [_jsxs(XStack, { render: "button", "aria-expanded": on, "aria-label": s.name, items: "center", gap: "$3", px: "$3", py: "$2.5", hoverStyle: { bg: '$hover' }, style: left, onPress: () => setOpen(on ? null : s.name), children: [_jsxs(YStack, { flex: 1, minW: 0, gap: "$1", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: s.name }), s.description ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: on ? undefined : 2, children: s.description })) : null] }), _jsx(SizableText, { size: "$1", color: "$soft", children: s.ops.length }), _jsx(ChevronDown, { size: 14, style: { transform: on ? 'rotate(180deg)' : undefined } })] }), on ? (_jsx(YStack, { px: "$3", py: "$2", gap: "$1", borderTopWidth: 1, borderColor: "$borderColor", children: s.ops.length ? (s.ops.map((op) => (_jsx(SizableText, { size: "$1", color: "$ink", style: mono, children: op }, op)))) : (_jsx(SizableText, { size: "$1", color: "$soft", children: "This server named no operations." })) })) : null] }, s.name));
+                    return (_jsxs(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: [_jsxs(XStack, { render: "button", "aria-expanded": on, "aria-label": s.name, items: "center", gap: "$3", px: "$3", py: "$2.5", hoverStyle: { bg: '$hover' }, style: left, onPress: () => setOpen(on ? null : s.name), children: [_jsxs(YStack, { flex: 1, minW: 0, gap: "$1", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: s.name }), s.description ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: on ? undefined : 2, children: s.description })) : null] }), _jsx(SizableText, { size: "$1", color: "$soft", children: s.ops.length }), _jsx(ChevronDown, { size: 14, style: { transform: on ? 'rotate(180deg)' : undefined } })] }), on ? (_jsx(YStack, { px: "$3", py: "$2", gap: "$1", borderTopWidth: 1, borderColor: "$borderColor", children: s.ops.length ? (s.ops.map((op) => (_jsx(SizableText, { size: "$1", color: "$ink", style: mono, children: op }, op)))) : (_jsx(SizableText, { size: "$1", color: "$soft", children: "This server lists no operations." })) })) : null] }, s.name));
                 })] })) }));
 }
 /** One listing in full: what it is, where it is served, and adding it. */
 function About({ listing, added, signed, onAdd, onClose }) {
     const t = useTarget();
-    const full = useRead(() => one(t, listing.id), listing, [t, listing.id]);
+    const full = useLoad(() => one(t, listing.id), listing, [t, listing.id]);
     const l = full.value;
     const links = [l.site, l.repo].filter((u) => u.startsWith('https://'));
-    return (_jsxs(Sheet, { title: titleOf(l), open: true, onOpenChange: (o) => !o && onClose(), children: [_jsxs(XStack, { gap: "$3", items: "center", children: [_jsx(Mark, { name: titleOf(l), logo: l.logo, size: 40 }), _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, style: mono, children: l.name }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: [l.vendor, l.version ? `v${l.version}` : '', l.official ? 'Official' : ''].filter(Boolean).join(' · ') })] })] }), l.description ? (_jsx(SizableText, { size: "$2", color: "$soft", children: l.description })) : null, l.remotes.length ? (_jsx(Field, { label: "Served at", children: l.remotes.map((r) => (_jsxs(SizableText, { size: "$1", color: "$ink", style: mono, numberOfLines: 1, children: [r.url, " \u00B7 ", r.transport] }, r.url))) })) : null, l.packages.length ? (_jsx(Field, { label: "Packages", hint: ready(l) ? undefined : 'It ships only as a package, so it needs somewhere to run before it can be added here.', children: l.packages.map((p) => (_jsx(SizableText, { size: "$1", color: "$ink", style: mono, numberOfLines: 1, children: [p.registry, p.identifier, p.version, p.runtime].filter(Boolean).join(' · ') }, `${p.registry}:${p.identifier}`))) })) : null, links.length ? (_jsx(XStack, { gap: "$4", flexWrap: "wrap", children: links.map((u) => (_jsxs(Out, { href: u, children: [_jsx(SizableText, { size: "$2", color: "$soft", children: where(u) }), _jsx(ExternalLink, { size: 12, opacity: 0.6 })] }, u))) })) : null, full.error ? _jsx(Line, { children: full.error.message }) : null, signed && ready(l) ? (_jsx(XStack, { justify: "flex-end", children: _jsx(Button, { size: "sm", disabled: added, onPress: onAdd, children: added ? 'Added' : 'Add to your connectors' }) })) : null] }));
+    return (_jsxs(Sheet, { title: titleOf(l), open: true, onOpenChange: (o) => !o && onClose(), children: [_jsxs(XStack, { gap: "$3", items: "center", children: [_jsx(Mark, { name: titleOf(l), logo: l.logo, size: 40 }), _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, style: mono, children: l.name }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: [l.vendor, l.version ? `v${l.version}` : '', l.official ? 'Official' : ''].filter(Boolean).join(' · ') })] })] }), l.description ? (_jsx(SizableText, { size: "$2", color: "$soft", children: l.description })) : null, l.remotes.length ? (_jsx(Field, { label: "Served at", children: l.remotes.map((r) => (_jsxs(SizableText, { size: "$1", color: "$ink", style: mono, numberOfLines: 1, children: [r.url, " \u00B7 ", r.transport] }, r.url))) })) : null, l.packages.length ? (_jsx(Field, { label: "Packages", hint: ready(l) ? undefined : 'It ships only as a package, so it needs a place to run before it can be added here.', children: l.packages.map((p) => (_jsx(SizableText, { size: "$1", color: "$ink", style: mono, numberOfLines: 1, children: [p.registry, p.identifier, p.version, p.runtime].filter(Boolean).join(' · ') }, `${p.registry}:${p.identifier}`))) })) : null, links.length ? (_jsx(XStack, { gap: "$4", flexWrap: "wrap", children: links.map((u) => (_jsxs(Out, { href: u, children: [_jsx(SizableText, { size: "$2", color: "$soft", children: where(u) }), _jsx(ExternalLink, { size: 12, opacity: 0.6 })] }, u))) })) : null, full.error ? _jsx(Line, { children: `Showing what Browse listed. ${say(full.error)}` }) : null, signed && ready(l) ? (_jsx(XStack, { justify: "flex-end", children: _jsx(Button, { size: "sm", disabled: added, onPress: onAdd, children: added ? 'Added' : 'Add to your connectors' }) })) : null] }));
 }
 /**
  * Add a server: a listing off the shelf, or any MCP URL. The secret, when it
@@ -152,23 +201,23 @@ function Connect({ listing, onClose, onAdded }) {
                 said = its.length ? `${s.name} is added, and its ${its.length} tools are on.` : `${s.name} is added. It listed no tools yet.`;
             }
             catch (e) {
-                said = `${s.name} is added, but its tools could not be switched on: ${e.message}`;
+                said = `${s.name} is added, but its tools could not be switched on. ${say(e)}`;
             }
             onAdded(said);
         }
         catch (e) {
-            setNote(e.message);
+            setNote(say(e));
         }
         finally {
             setWorking(false);
         }
     };
-    return (_jsxs(Sheet, { title: listing ? `Add ${titleOf(listing)}` : 'Add connector', open: true, onOpenChange: (o) => !o && onClose(), width: 500, children: [listing ? (_jsx(SizableText, { size: "$2", color: "$soft", children: listing.description || listing.name })) : (_jsx(SizableText, { size: "$2", color: "$soft", children: "Any MCP server that speaks HTTP. Its tools join your organization\u2019s and are on once it is added." })), _jsx(Field, { label: "Name", hint: listing ? 'Leave it empty to use the listing’s own.' : undefined, children: _jsx(Input, { value: name, onChangeText: setName, placeholder: listing ? titleOf(listing) : 'Docs', "aria-label": "Name" }) }), listing ? null : (_jsx(Field, { label: "URL", hint: "A public http(s) address. Private and loopback addresses are refused.", children: _jsx(Input, { value: url, onChangeText: setUrl, placeholder: "https://mcp.example.com/mcp", "aria-label": "URL", autoCapitalize: "none" }) })), _jsx(Field, { label: "Secret", hint: "Optional. Sealed in KMS and sent in the header below on every call; never shown again.", children: _jsx(Input, { value: secret, onChangeText: setSecret, placeholder: "Bearer \u2026", "aria-label": "Secret", secureTextEntry: true }) }), secret ? (_jsx(Field, { label: "Header", children: _jsx(Input, { value: header, onChangeText: setHeader, "aria-label": "Header", autoCapitalize: "none" }) })) : null, _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 save(), children: "Add" })] })] }));
+    return (_jsxs(Sheet, { title: listing ? `Add ${titleOf(listing)}` : 'Add by URL', open: true, onOpenChange: (o) => !o && onClose(), width: 500, children: [listing ? (_jsx(SizableText, { size: "$2", color: "$soft", children: listing.description || listing.name })) : (_jsx(SizableText, { size: "$2", color: "$soft", children: "Any MCP server that speaks HTTP. Its tools are on once it is added." })), _jsx(Field, { label: "Name", hint: listing ? 'Leave it empty to use the listing’s own.' : undefined, children: _jsx(Input, { value: name, onChangeText: setName, placeholder: listing ? titleOf(listing) : 'Docs', "aria-label": "Name" }) }), listing ? null : (_jsx(Field, { label: "URL", hint: "A public http(s) address. Private and loopback addresses are refused.", children: _jsx(Input, { value: url, onChangeText: setUrl, placeholder: "https://mcp.example.com/mcp", "aria-label": "URL", autoCapitalize: "none" }) })), _jsx(Field, { label: "Secret", hint: "Optional. Kept sealed in KMS, sent on every call, and never shown again.", children: _jsx(Input, { value: secret, onChangeText: setSecret, placeholder: "Bearer \u2026", "aria-label": "Secret", secureTextEntry: true }) }), secret ? (_jsx(Field, { label: "Header", children: _jsx(Input, { value: header, onChangeText: setHeader, "aria-label": "Header", autoCapitalize: "none" }) })) : null, _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 save(), children: "Add" })] })] }));
 }
 /** One of the org's servers: where it is, its secret, its tools and their switches, and removing it. */
 function Detail({ server, may, onClose, onDeleted }) {
     const t = useTarget();
-    const list = useRead(() => tools(t, { source: 'mcp' }), [], [t, server.id]);
+    const list = useLoad(() => tools(t, { source: 'mcp' }), [], [t, server.id]);
     const its = useMemo(() => list.value.filter((x) => owns(server, x.name)), [list.value, server]);
     const [busy, setBusy] = useState(false);
     const [note, setNote] = useState('');
@@ -182,16 +231,16 @@ function Detail({ server, may, onClose, onDeleted }) {
             list.reload();
         }
         catch (e) {
-            setNote(e.message);
+            setNote(say(e));
         }
         finally {
             setBusy(false);
         }
     };
-    return (_jsxs(Sheet, { title: server.name, open: true, onOpenChange: (o) => !o && onClose(), children: [_jsxs(YStack, { gap: "$1", children: [_jsx(SizableText, { size: "$1", color: "$ink", style: mono, numberOfLines: 2, children: server.url }), _jsxs(XStack, { items: "center", gap: "$1.5", children: [server.secret ? _jsx(KeyRound, { size: 12, opacity: 0.7 }) : _jsx(ServerIcon, { size: 12, opacity: 0.7 }), _jsx(SizableText, { size: "$1", color: "$soft", children: server.secret ? `A secret is sealed in KMS and sent in ${server.header || 'its header'}.` : 'No secret: it is called as it is.' })] })] }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { size: "$3", color: "$ink", flex: 1, children: "Tools" }), its.length && may ? (_jsx(Button, { size: "sm", variant: "outline", disabled: busy, onPress: () => void (off.length ? flip(off, []) : flip([], its.map((x) => x.name))), children: off.length ? 'Turn all on' : 'Turn all off' })) : null] }), list.loading && !list.value.length ? (_jsx(Soft, { children: "Asking the server for its tools\u2026" })) : list.error && !list.value.length ? (_jsx(Soft, { children: list.error.message })) : !its.length ? (_jsx(Soft, { children: "The server listed no tools. One that does not answer is left out until it does." })) : (_jsx(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: its.map((x, i) => {
+    return (_jsxs(Sheet, { title: server.name, open: true, onOpenChange: (o) => !o && onClose(), children: [_jsxs(YStack, { gap: "$1", children: [_jsx(SizableText, { size: "$1", color: "$ink", style: mono, numberOfLines: 2, children: server.url }), _jsxs(XStack, { items: "center", gap: "$1.5", children: [server.secret ? _jsx(KeyRound, { size: 12, opacity: 0.7 }) : _jsx(ServerIcon, { size: 12, opacity: 0.7 }), _jsx(SizableText, { size: "$1", color: "$soft", children: server.secret ? `A secret is sealed in KMS and sent in ${server.header || 'its header'}.` : 'No secret: it is called as it is.' })] })] }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { size: "$3", color: "$ink", flex: 1, children: "Tools" }), its.length && may ? (_jsx(Button, { size: "sm", variant: "outline", disabled: busy, onPress: () => void (off.length ? flip(off, []) : flip([], its.map((x) => x.name))), children: off.length ? 'Turn all on' : 'Turn all off' })) : null] }), list.loading && !list.value.length ? (_jsx(Soft, { children: "Loading its tools\u2026" })) : list.error && !list.value.length ? (_jsx(Failed, { error: list.error, onRetry: list.reload })) : !its.length ? (_jsx(Soft, { children: "No tools listed yet. A server that does not answer shows its tools once it does." })) : (_jsx(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: its.map((x, i) => {
                     const short = x.name.slice(server.id.length + 1);
                     return (_jsxs(XStack, { items: "center", gap: "$3", px: "$3", py: "$2", borderTopWidth: i ? 1 : 0, borderColor: "$borderColor", children: [_jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { size: "$2", color: "$ink", style: mono, numberOfLines: 1, children: short }), x.description ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 2, children: x.description })) : null] }), may ? (_jsx(Switch, { checked: x.activated, disabled: busy, onCheckedChange: (v) => void flip(v ? [x.name] : [], v ? [] : [x.name]), "aria-label": `${short} on` })) : (_jsx(SizableText, { size: "$1", color: "$soft", children: x.activated ? 'On' : 'Off' }))] }, x.name));
-                }) })), _jsx(Line, { children: note || (may ? '' : 'An org admin adds, switches and removes the organization’s connectors.') }), may ? (_jsx(XStack, { justify: "flex-start", children: _jsx(Button, { size: "sm", variant: "ghost", onPress: () => setAsking(true), children: "Remove connector" }) })) : null, _jsx(Confirm, { what: server.name, says: "Its tools leave your organization and every agent, and its sealed secret is destroyed.", open: asking, onOpenChange: setAsking, onYes: async () => {
+                }) })), _jsx(Line, { children: note || (may ? '' : 'Only an org admin can switch or remove connectors.') }), may ? (_jsx(XStack, { justify: "flex-start", children: _jsx(Button, { size: "sm", variant: "ghost", onPress: () => setAsking(true), children: "Remove connector" }) })) : null, _jsx(Confirm, { what: server.name, says: "Its tools leave your organization and every agent, and its sealed secret is destroyed.", open: asking, onOpenChange: setAsking, onYes: async () => {
                     await remove(t, server.id);
                     onDeleted();
                 } })] }));

package/lib/customize/index.d.ts

@@ -1,5 +1,7 @@
 import { type Tab } from '../route.ts';
 import { type View } from './ui.tsx';
+/** What every run in the org loads: an org admin's to add to, a member's to read. */
+export declare const ORG_KIT: Tab[];
 export declare function Customize({ tab, view: first }: {
     tab: Tab;
     view?: View;

package/lib/customize/index.js

@@ -2,8 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Customize: what the agent brings to a run — the skills it knows, the
  * connectors it calls, the plugins it runs, and agents of the org's own. Each
- * tab is its own address; in each, Yours is what the org has and Discover is
- * what it can add, with one search box and one Add over both.
+ * tab is its own address. In each, Browse comes first and is where the page
+ * opens: what there is to add, then what Hanzo builds in. Yours is what the org
+ * already has, counted on its button. One search and one Add serve both.
  *
  * Skills and connectors ride into every run in the org, so adding, switching
  * and removing them is an org admin's and a member reads them; plugins and
@@ -12,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SizableText, XStack, YStack } from '@hanzo/gui';
 import { BookOpen, Bot, Plug, Plus, Puzzle } from '@hanzogui/lucide-icons-2';
 import { Button, Input } from '@hanzo/ui';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useHost } from '../host.js';
 import { path, TABS } from '../route.js';
 import { Agents } from './agents.js';
@@ -21,33 +22,36 @@ import { Plugins } from './plugins.js';
 import { Skills } from './skills.js';
 import { Choice } from './ui.js';
 /** What every run in the org loads: an org admin's to add to, a member's to read. */
-const ORG_KIT = ['skills', 'connectors'];
+export const ORG_KIT = ['skills', 'connectors'];
 const LABEL = {
-    skills: { title: 'Skills', add: 'New skill', find: 'Search skills', icon: _jsx(BookOpen, { size: 15 }) },
-    connectors: { title: 'Connectors', add: 'Add connector', find: 'Search connectors', icon: _jsx(Plug, { size: 15 }) },
-    plugins: { title: 'Plugins', add: 'Build plugin', find: 'Search plugins', icon: _jsx(Puzzle, { size: 15 }) },
-    agents: { title: 'Agents', add: 'New agent', find: 'Search agents', icon: _jsx(Bot, { size: 15 }) },
+    skills: { title: 'Skills', says: 'Know-how an agent reads before it works.', add: 'New skill', find: 'Search skills', icon: _jsx(BookOpen, { size: 15 }) },
+    connectors: { title: 'Connectors', says: 'Apps and tools an agent can call.', add: 'Add by URL', find: 'Search connectors', icon: _jsx(Plug, { size: 15 }) },
+    plugins: { title: 'Plugins', says: 'Connectors you build in TypeScript.', add: 'Build plugin', find: 'Search plugins', icon: _jsx(Puzzle, { size: 15 }) },
+    agents: { title: 'Agents', says: 'Agents with their own model, instructions and budget.', add: 'New agent', find: 'Search agents', icon: _jsx(Bot, { size: 15 }) },
 };
-const VIEWS = [
-    { id: 'yours', label: 'Yours' },
-    { id: 'discover', label: 'Discover' },
-];
 export function Customize({ tab, view: first }) {
     const host = useHost();
-    // Until a person picks, a visitor sees what there is to add and a member what is theirs:
-    // sign-in lands after the first draw, so the default follows it rather than being fixed then.
-    const [picked, setView] = useState(first ?? null);
-    const view = picked ?? (host.person ? 'yours' : 'discover');
+    // Browse first, always: a first visit has nothing of its own to show, and what there is to add is the page.
+    const [view, setView] = useState(first ?? 'discover');
     const [q, setQ] = useState('');
     const [adding, setAdding] = useState(false);
+    const [count, setCount] = useState(0);
+    const onCount = useCallback((n) => setCount(n), []);
     const pick = (next) => {
         setQ('');
         setAdding(false);
+        setView('discover');
+        setCount(0);
         host.go(path({ kind: 'customize', tab: next }));
     };
-    const pane = { view, q, adding, onAdding: setAdding, onView: setView };
-    return (_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", "$max-md": { px: '$4', py: '$4' }, children: _jsxs(YStack, { width: "100%", maxW: 1080, mx: "auto", gap: "$4", children: [_jsxs(YStack, { gap: "$1", children: [_jsx(SizableText, { render: "h1", size: "$6", color: "$ink", children: "Customize" }), _jsx(SizableText, { size: "$2", color: "$soft", children: "What the agent brings to a run: the skills it knows, the connectors it calls, the plugins it runs, and agents of your own." })] }), _jsx(XStack, { role: "tablist", "aria-label": "Customize", gap: "$4", borderBottomWidth: 1, borderColor: "$borderColor", "$max-md": { gap: '$3' }, children: TABS.map((id) => {
+    const pane = { view, q, adding, onAdding: setAdding, onView: setView, onCount };
+    const kit = ORG_KIT.includes(tab);
+    const may = Boolean(host.person) && (host.admin || !kit);
+    return (_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", "$max-md": { px: '$4', py: '$4' }, children: _jsxs(YStack, { width: "100%", maxW: 1080, mx: "auto", gap: "$4", children: [_jsxs(YStack, { gap: "$1", children: [_jsx(SizableText, { render: "h1", size: "$6", color: "$ink", children: "Customize" }), _jsx(SizableText, { size: "$2", color: "$soft", children: "What your agent can use in every run." })] }), _jsx(XStack, { role: "tablist", "aria-label": "Customize", gap: "$4", borderBottomWidth: 1, borderColor: "$borderColor", "$max-md": { gap: '$3' }, children: TABS.map((id) => {
                         const on = id === tab;
                         return (_jsxs(XStack, { role: "tab", render: "button", "aria-selected": on, onPress: () => pick(id), items: "center", gap: "$1.5", pb: "$2", mb: -1, borderBottomWidth: 2, borderColor: on ? '$ink' : 'transparent', hoverStyle: { borderColor: on ? '$ink' : '$edge' }, children: [_jsx(XStack, { opacity: on ? 1 : 0.6, "$max-md": { display: 'none' }, children: LABEL[id].icon }), _jsx(SizableText, { size: "$3", color: on ? '$ink' : '$soft', children: LABEL[id].title })] }, id));
-                    }) }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Choice, { label: "Show", value: view, options: VIEWS, onChange: setView }), _jsx(XStack, { flex: 1 }), host.person && (host.admin || !ORG_KIT.includes(tab)) ? (_jsxs(Button, { size: "sm", onPress: () => setAdding(true), children: [_jsx(Plus, { size: 14 }), " ", LABEL[tab].add] })) : null] }), _jsx(Input, { value: q, onChangeText: setQ, placeholder: `${LABEL[tab].find}…`, "aria-label": LABEL[tab].find }), tab === 'skills' ? (_jsx(Skills, { ...pane })) : tab === 'connectors' ? (_jsx(Connectors, { ...pane })) : tab === 'plugins' ? (_jsx(Plugins, { ...pane })) : (_jsx(Agents, { ...pane }))] }) }));
+                    }) }), _jsx(SizableText, { size: "$2", color: "$soft", children: LABEL[tab].says }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Choice, { label: "Show", value: view, options: [
+                                { id: 'discover', label: 'Browse' },
+                                { id: 'yours', label: 'Yours', count },
+                            ], onChange: setView }), _jsx(XStack, { flex: 1 }), may ? (_jsxs(Button, { size: "sm", onPress: () => setAdding(true), children: [_jsx(Plus, { size: 14 }), " ", LABEL[tab].add] })) : null] }), _jsx(Input, { value: q, onChangeText: setQ, placeholder: `${LABEL[tab].find}…`, "aria-label": LABEL[tab].find }), host.person && kit && !host.admin ? (_jsxs(SizableText, { size: "$1", color: "$soft", children: ["Only an org admin can add or change ", LABEL[tab].title.toLowerCase(), ". You can see what is on."] })) : null, tab === 'skills' ? (_jsx(Skills, { ...pane })) : tab === 'connectors' ? (_jsx(Connectors, { ...pane })) : tab === 'plugins' ? (_jsx(Plugins, { ...pane })) : (_jsx(Agents, { ...pane }))] }) }));
 }

package/lib/customize/load.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Customize's reads: data.ts `useRead`, given up on after `WAIT`. A read that
+ * hangs says so and offers a retry instead of loading forever; the request
+ * itself is left to finish or fail on its own.
+ */
+import { type Read } from '../data.ts';
+/** `p`, or a `Slow` refusal once `ms` pass first. */
+export declare function within<T>(p: Promise<T>, ms?: number): Promise<T>;
+export declare function useLoad<T>(load: (() => Promise<T>) | null, initial: T, key: unknown[]): Read<T>;

package/lib/customize/load.js

@@ -0,0 +1,22 @@
+/**
+ * Customize's reads: data.ts `useRead`, given up on after `WAIT`. A read that
+ * hangs says so and offers a retry instead of loading forever; the request
+ * itself is left to finish or fail on its own.
+ */
+import { Slow, useRead, WAIT } from '../data.js';
+/** `p`, or a `Slow` refusal once `ms` pass first. */
+export function within(p, ms = WAIT) {
+    return new Promise((ok, no) => {
+        const id = setTimeout(() => no(new Slow()), ms);
+        p.then((v) => {
+            clearTimeout(id);
+            ok(v);
+        }, (e) => {
+            clearTimeout(id);
+            no(e);
+        });
+    });
+}
+export function useLoad(load, initial, key) {
+    return useRead(load ? () => within(load()) : null, initial, key);
+}

package/lib/customize/plugins.d.ts

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

package/lib/customize/plugins.js

@@ -2,13 +2,13 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 /**
  * 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.
+ * Browse offers building one, then lists what this deployment mounts, which is
+ * built in and read-only. 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.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
 import { Puzzle } from '@hanzogui/lucide-icons-2';
@@ -16,18 +16,20 @@ 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, Visitor } from './ui.js';
+import { useLoad } from './load.js';
+import { say } from './say.js';
+import { Choice, Confirm, day, Empty, Failed, Field, Grid, Line, Mark, matches, mono, Part, Sheet, Soft, Tile, useCount, Visitor } from './ui.js';
 const kb = (n) => (n < 1024 ? `${n} B` : `${(n / 1024).toFixed(1)} KB`);
-export function Plugins({ view, q, adding, onAdding, onView }) {
+export function Plugins({ view, q, adding, onAdding, onView, onCount }) {
     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 mine = useLoad(signed ? () => authored(t) : null, [], [t, signed]);
+    const mounts = useLoad(signed && view === 'discover' ? () => mounted(t) : null, [], [t, signed, view]);
     const [opened, setOpened] = useState(null);
     const [note, setNote] = useState('');
+    useCount(mine.value.length, onCount);
     const sheets = (_jsxs(_Fragment, { children: [adding ? (_jsx(Build, { onClose: () => onAdding(false), onBuilt: (p, said) => {
                     onAdding(false);
                     onView('yours');
@@ -40,14 +42,14 @@ export function Plugins({ view, q, adding, onAdding, onView }) {
                     mine.reload();
                 } })) : null] }));
     if (!signed) {
-        return _jsx(Visitor, { children: view === 'discover' ? 'Sign in to see what this deployment mounts.' : 'Sign in to see your plugins.' });
+        return _jsx(Visitor, { children: view === 'discover' ? 'Sign in to browse plugins.' : '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] }));
+        return (_jsxs(YStack, { gap: "$6", children: [_jsx(Line, { children: note }), _jsx(Part, { title: "Build your own", detail: "Write a connector in TypeScript, or describe an API and Hanzo writes it.", children: _jsx(XStack, { children: _jsx(Button, { size: "sm", onPress: () => onAdding(true), children: "Build a plugin" }) }) }), _jsx(Part, { title: "Built in", detail: "Part of Hanzo. Always on, nothing to add.", children: mounts.error && !mounts.value.length ? (_jsx(Failed, { error: mounts.error, onRetry: mounts.reload })) : mounts.loading && !mounts.value.length ? (_jsx(Soft, { children: "Loading built-in plugins\u2026" })) : !shown.length ? (_jsx(Soft, { children: mounts.value.length ? `Nothing built in matches “${q.trim()}”.` : 'Nothing built in is listed.' })) : (_jsxs(_Fragment, { children: [_jsxs(SizableText, { size: "$1", color: "$soft", children: [shown.length, " built in"] }), _jsx(Grid, { label: "Mounted subsystems", children: shown.map((m) => (_jsx(Tile, { title: m.name, detail: m.prefixes.join('  '), meta: m.enabled ? 'On' : 'Off', 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] }));
+    return (_jsxs(YStack, { gap: "$3", children: [_jsx(Line, { children: note }), mine.error && !mine.value.length ? (_jsx(Failed, { error: mine.error, onRetry: mine.reload })) : mine.loading && !mine.value.length ? (_jsx(Soft, { children: "Loading your plugins\u2026" })) : !mine.value.length ? (_jsx(Empty, { title: "No plugins yet", detail: "Write a connector in TypeScript, or describe an API and Hanzo writes it.", children: _jsx(Button, { size: "sm", onPress: () => onAdding(true), children: "Build a plugin" }) })) : !shown.length ? (_jsx(Soft, { children: `No plugin of yours matches “${q.trim()}”.` })) : (_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' },
@@ -72,15 +74,15 @@ function Build({ onClose, onBuilt }) {
             onBuilt(out.plugin, `${out.plugin.name} built: ${kb(out.bytes)}${out.generated ? ', written from your description — read it below' : ''}.`);
         }
         catch (e) {
-            setNote(e.message);
+            setNote(say(e));
         }
         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, "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, "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" })] })] }));
+    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 -.", children: _jsx(Input, { value: name, onChangeText: setName, "aria-label": "Name", autoCapitalize: "none" }) }), _jsx(Field, { label: "Connector", hint: "Optional. The connector whose key it uses when it runs; a plugin never holds a key itself.", children: _jsx(Input, { value: provider, onChangeText: setProvider, "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'
+                    ? 'Kept only if it builds. A failed build says why.'
+                    : 'An OpenAPI document, or the endpoints in plain words. You read the TypeScript 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 }) {

package/lib/customize/say.d.ts

@@ -0,0 +1 @@
+export declare function say(e: unknown): string;

package/lib/customize/say.js

@@ -0,0 +1,38 @@
+/**
+ * What a read or a write that failed tells a person: plain words, never the
+ * platform's internals. A refusal is read by its status; only a 400, 409 or
+ * 422 carries the platform's own sentence, because those name what was wrong
+ * with what was sent (a name taken, a build that failed and why). A sentence
+ * this client wrote itself (a name that does not fit) is said as written.
+ */
+import { Refusal } from '../api/call.js';
+import { Slow } from '../data.js';
+/** The line call.ts writes when the platform gave no reason: a method, a path and a status. */
+const BARE = /^(GET|POST|PUT|PATCH|DELETE) \S* answered \d+$/;
+export function say(e) {
+    if (e instanceof Slow)
+        return 'Hanzo is taking too long to answer. Try again.';
+    if (e instanceof Refusal) {
+        if (e.status === 401)
+            return 'Your sign-in has expired. Sign in again.';
+        if (e.status === 403)
+            return 'Your account can’t do this here. Ask an org admin.';
+        if (e.status === 404)
+            return 'Not found. It may have been removed.';
+        if (e.status === 429)
+            return 'Too many requests. Wait a moment and try again.';
+        if (e.status >= 500)
+            return 'Hanzo could not answer just now. Try again.';
+        if ((e.status === 400 || e.status === 409 || e.status === 422) && e.message && !BARE.test(e.message))
+            return e.message;
+        return 'Hanzo could not do that. Try again.';
+    }
+    // fetch rejects with a TypeError when the network does; a body that is not JSON is a SyntaxError.
+    if (e instanceof TypeError)
+        return 'Could not reach Hanzo. Check your connection and try again.';
+    if (e instanceof SyntaxError)
+        return 'Hanzo answered with something unreadable. Try again.';
+    if (e instanceof Error && e.message)
+        return e.message;
+    return 'Something went wrong. Try again.';
+}

package/lib/customize/skills.d.ts

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