@hanzo/build 0.2.10 → 0.2.11

package/lib/builder.js

@@ -11,12 +11,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *   /-/issues    the forge's issues
  *   /-/artifacts what this org has built
  *   /-/templates the public starters
- *   /-/mcp       the fleet's native MCP servers
+ *   /-/customize skills, connectors, plugins and agents
  *   /<slug>      a deployed project's workspace, in this same window
  *
  * The rail is the sessions rail every Hanzo surface shares: New, the builder's
- * places, the org's coding runs newest first with a live status dot, and the
- * account. Its collapse is an explicit toggle kept per browser.
+ * places with the rest under More, the org's coding runs newest first with a
+ * live status dot, and at the foot the offer of Hanzo in Slack and the account,
+ * whose menu opens Settings, Usage, the plans, help and logging out (foot.tsx).
+ * Its collapse is an explicit toggle kept per browser.
  *
  * A project's workspace takes the whole window — it has its own chat column,
  * bar and panes — and its mark leads back here.
@@ -26,22 +28,27 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * left column, never two.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
-import { Blocks, BookOpen, CircleDot, Cpu, FolderGit2, Kanban, LayoutTemplate, Menu, Puzzle, Workflow } from '@hanzogui/lucide-icons-2';
+import { Blocks, BookOpen, CircleDot, Cpu, FolderGit2, Kanban, LayoutTemplate, Menu, SlidersHorizontal, Workflow } from '@hanzogui/lucide-icons-2';
 import { Button } from '@hanzo/ui';
 import { SessionRail } from '@hanzo/ui/chat';
 import { HanzoMark } from '@hanzo/ui/product';
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { pinBoard } from './choice.js';
+import { Customize } from './customize/index.js';
 import { useKept, useRecents } from './data.js';
 import { Forge } from './forge.js';
 import { HostProvider, useHost, useTarget } from './host.js';
 import { Landing } from './landing.js';
+import { PrefsProvider } from './prefs.js';
 import { Project } from './project.js';
+import { Plans } from './plans.js';
 import { path, route } from './route.js';
 import { Run } from './run.js';
 import { DOTS } from './section.js';
 import { Artifacts, Templates } from './shelf.js';
-import { Account, Find, onAccount } from './account.js';
+import { Find } from './find.js';
+import { DOCS, Slack, Who } from './foot.js';
+import { Settings } from './settings/index.js';
 import { Where } from './switch.js';
 function Shell() {
     const host = useHost();
@@ -51,9 +58,9 @@ function Shell() {
     const [collapsed, setCollapsed] = useKept('hanzo.build.rail', false);
     const [drawer, setDrawer] = useState(false);
     const [order, setOrder] = useState('newest');
-    const [account, setAccount] = useState(false);
     const [finding, setFinding] = useState(false);
-    useEffect(() => onAccount(() => setAccount(true)), []);
+    const [menu, setMenu] = useState(false);
+    const [slack, setSlack] = useKept('hanzo.build.slack', false);
     const go = (p) => {
         setDrawer(false);
         host.go(p);
@@ -70,9 +77,13 @@ function Shell() {
     const switcher = Boolean(host.person && (host.org || (host.memberships?.length ?? 0) > 0));
     const top = switcher ? (_jsx(Where, {})) : (_jsx(XStack, { render: "button", "aria-label": "Hanzo", items: "center", onPress: () => go(''), children: _jsx(HanzoMark, { size: 18 }) }));
     const links = [
+        { id: 'projects', label: 'Projects', icon: _jsx(Kanban, { size: 16 }), onPress: () => go(path({ kind: 'screen', screen: 'projects' })), active: screen === 'projects' },
+        { id: 'artifacts', label: 'Artifacts', icon: _jsx(Blocks, { size: 16 }), onPress: () => go(path({ kind: 'screen', screen: 'artifacts' })), active: screen === 'artifacts' },
+        { id: 'customize', label: 'Customize', icon: _jsx(SlidersHorizontal, { size: 16 }), onPress: () => go(path({ kind: 'customize', tab: 'skills' })), active: r.kind === 'customize' || screen === 'mcp' },
         { id: 'automations', label: 'Automations', icon: _jsx(Workflow, { size: 16 }), onPress: () => go(path({ kind: 'screen', screen: 'automations' })), active: screen === 'automations' },
+    ];
+    const more = [
         { id: 'codebases', label: 'Codebase', icon: _jsx(FolderGit2, { size: 16 }), onPress: () => go(path({ kind: 'screen', screen: 'codebases' })), active: screen === 'codebases' },
-        { id: 'projects', label: 'Projects', icon: _jsx(Kanban, { size: 16 }), onPress: () => go(path({ kind: 'screen', screen: 'projects' })), active: screen === 'projects' },
         {
             id: 'issues',
             label: 'Issues',
@@ -83,22 +94,25 @@ function Shell() {
             },
             active: screen === 'issues',
         },
-        { id: 'artifacts', label: 'Artifacts', icon: _jsx(Blocks, { size: 16 }), onPress: () => go(path({ kind: 'screen', screen: 'artifacts' })), active: screen === 'artifacts' },
-        { id: 'mcp', label: 'MCP', icon: _jsx(Puzzle, { size: 16 }), onPress: () => go(path({ kind: 'screen', screen: 'mcp' })), active: screen === 'mcp' },
-    ];
-    const more = [
         { id: 'templates', label: 'Templates', icon: _jsx(LayoutTemplate, { size: 16 }), onPress: () => go(path({ kind: 'screen', screen: 'templates' })), active: screen === 'templates' },
         {
             id: 'machines',
             label: 'Machines',
             icon: _jsx(Cpu, { size: 16 }),
-            onPress: () => host.go(''),
+            onPress: () => go(path({ kind: 'settings', section: 'machines' })),
+            active: r.kind === 'settings' && r.section === 'machines',
         },
-        { id: 'docs', label: 'Docs', icon: _jsx(BookOpen, { size: 16 }), onPress: () => window.open('https://docs.hanzo.ai/docs/dev', '_blank', 'noopener,noreferrer') },
+        { id: 'docs', label: 'Docs', icon: _jsx(BookOpen, { size: 16 }), onPress: () => window.open(DOCS, '_blank', 'noopener,noreferrer') },
     ];
-    return (_jsxs(XStack, { flex: 1, minH: 0, minW: 0, bg: "$background", children: [_jsxs(YStack, { position: "relative", shrink: 0, children: [_jsx(SessionRail, { onNew: () => go(''), fresh: r.kind === 'new', links: links, more: more, recents: rows, active: r.kind === 'run' ? r.id : null, onOpen: (id) => go(id), onSort: () => setOrder(order === 'newest' ? 'running' : 'newest'), sortLabel: order === 'newest' ? 'Show running first' : 'Show newest first', empty: _jsx(SizableText, { size: "$1", color: "$soft", px: "$2", children: !host.person ? 'Sign in to see your runs.' : recents.error ? recents.error.message : recents.loading ? 'Reading…' : 'No runs yet.' }), account: host.person
-                            ? { name: host.person.email || host.person.name, onPress: () => setAccount(true) }
-                            : { name: 'Sign in', onPress: () => host.signIn?.() }, onSettings: () => setAccount(true), onSearch: () => setFinding(true), collapsed: collapsed, onCollapse: setCollapsed, mark: _jsx(Brand, { org: host.org }), pt: collapsed ? undefined : switcher ? 80 : 40, open: drawer, onOpenChange: setDrawer, label: "Runs" }), collapsed ? null : (_jsx(XStack, { position: "absolute", t: 8, l: 8, r: 8, z: 2, items: "center", "$max-md": { display: 'none' }, children: top }))] }), _jsxs(YStack, { flex: 1, minW: 0, minH: 0, position: "relative", children: [_jsxs(XStack, { height: 44, px: "$2", gap: "$2", items: "center", shrink: 0, $md: { display: 'none' }, children: [_jsx(Button, { variant: "ghost", size: "icon-sm", onPress: () => setDrawer(true), "aria-label": "Open runs", children: _jsx(Menu, { size: 18 }) }), top] }), _jsx(Pane, { onStarted: () => recents.reload() })] }), _jsx(Account, { open: account, onOpenChange: setAccount }), _jsx(Find, { open: finding, onOpenChange: setFinding, recents: rows, onOpen: (id) => { setFinding(false); go(id); } })] }));
+    return (_jsxs(XStack, { flex: 1, minH: 0, minW: 0, bg: "$background", children: [_jsxs(YStack, { position: "relative", shrink: 0, children: [_jsx(SessionRail, { onNew: () => go(''), fresh: r.kind === 'new', links: links, more: more, recents: rows, active: r.kind === 'run' ? r.id : null, onOpen: (id) => go(id), onSort: () => setOrder(order === 'newest' ? 'running' : 'newest'), sortLabel: order === 'newest' ? 'Show running first' : 'Show newest first', empty: _jsx(SizableText, { size: "$1", color: "$soft", px: "$2", children: !host.person ? 'Sign in to see your runs.' : recents.error ? recents.error.message : recents.loading ? 'Reading…' : 'No runs yet.' }), notice: host.person && !slack ? (_jsx(Slack, { onOpen: () => go(path({ kind: 'settings', section: 'integrations' })), onDismiss: () => setSlack(true) })) : undefined, account: host.person
+                            ? {
+                                name: host.person.email || host.person.name,
+                                onPress: () => {
+                                    setDrawer(false);
+                                    setMenu(true);
+                                },
+                            }
+                            : { name: 'Sign in', onPress: () => host.signIn?.() }, onSettings: () => go(path({ kind: 'settings', section: 'general' })), onSearch: () => setFinding(true), collapsed: collapsed, onCollapse: setCollapsed, mark: _jsx(Brand, { org: host.org }), pt: collapsed ? undefined : switcher ? 80 : 40, open: drawer, onOpenChange: setDrawer, label: "Runs" }), collapsed ? null : (_jsx(XStack, { position: "absolute", t: 8, l: 8, r: 8, z: 2, items: "center", "$max-md": { display: 'none' }, children: top })), host.person ? _jsx(Who, { open: menu, onOpenChange: setMenu, narrow: collapsed }) : null] }), _jsxs(YStack, { flex: 1, minW: 0, minH: 0, position: "relative", children: [_jsxs(XStack, { height: 44, px: "$2", gap: "$2", items: "center", shrink: 0, $md: { display: 'none' }, children: [_jsx(Button, { variant: "ghost", size: "icon-sm", onPress: () => setDrawer(true), "aria-label": "Open runs", children: _jsx(Menu, { size: 18 }) }), top] }), _jsx(Pane, { onStarted: () => recents.reload() })] }), _jsx(Find, { open: finding, onOpenChange: setFinding, recents: rows, onOpen: (id) => { setFinding(false); go(id); } })] }));
 }
 /** Whichever pane the address names, beside a rail — the builder's or the host's. */
 function Pane({ onStarted }) {
@@ -106,11 +120,17 @@ function Pane({ onStarted }) {
     const r = route(host.path);
     if (r.kind === 'run')
         return _jsx(Run, { id: r.id }, r.id);
+    if (r.kind === 'settings')
+        return _jsx(Settings, { section: r.section });
+    if (r.kind === 'customize')
+        return _jsx(Customize, { tab: r.tab });
     if (r.kind === 'screen') {
         if (r.screen === 'artifacts')
             return _jsx(Artifacts, {});
         if (r.screen === 'templates')
             return _jsx(Templates, {});
+        if (r.screen === 'plans')
+            return _jsx(Plans, {});
         return _jsx(Forge, { screen: r.screen }, r.screen);
     }
     return (_jsx(Landing, { onStarted: (id) => {
@@ -139,5 +159,5 @@ function Screens({ rail }) {
  * places and runs in its own rail with `DevSection`.
  */
 export function Builder({ host, rail = true }) {
-    return (_jsx(HostProvider, { host: host, children: _jsx(YStack, { flex: 1, minH: 0, minW: 0, height: "100%", bg: "$background", children: _jsx(Screens, { rail: rail }) }) }));
+    return (_jsx(HostProvider, { host: host, children: _jsx(PrefsProvider, { children: _jsx(YStack, { flex: 1, minH: 0, minW: 0, height: "100%", bg: "$background", children: _jsx(Screens, { rail: rail }) }) }) }));
 }

package/lib/customize/agents.d.ts

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

package/lib/customize/agents.js

@@ -0,0 +1,125 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Agents: the org's own — a model, instructions, the tools it may call, and
+ * what it may spend.
+ *
+ * Yours lists them; opening one edits it in place, and only what changed is
+ * sent. An agent calls only the tools it names, and only those that are on for
+ * the org, so the choices are the tools that are on; "every tool" is whatever
+ * the fleet's MCP server serves when it runs. A budget is required: what it may
+ * spend each period, and in one run. Discover is the platform's presets whose
+ * tool calls run on the platform; adding one opens a new agent written from it.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { Bot } from '@hanzogui/lucide-icons-2';
+import { Button, Input, Switch, Textarea } from '@hanzo/ui';
+import { ChipSelect } from '@hanzo/ui/product';
+import { useEffect, useMemo, useState } from 'react';
+import { agents, ALL, create, draft, EMPTY, fromPreset, one, PERIODS, presets, remove, update } from '../api/agents.js';
+import { label as named, models } from '../api/models.js';
+import { tools } from '../api/tools.js';
+import { useRead } from '../data.js';
+import { useHost, useTarget } from '../host.js';
+import { Add, Choice, Confirm, Field, Grid, Line, Mark, matches, mono, Sheet, Soft, Tile } from './ui.js';
+/** The model a new agent runs on when none is chosen: the deployment's own default. */
+const DEFAULT = 'default';
+const money = (m) => `$${(m / 1_000_000).toFixed(m % 10_000 ? 4 : 2).replace(/\.?0+$/, '') || '0'}`;
+export function Agents({ view, q, adding, onAdding, onView }) {
+    const host = useHost();
+    const t = useTarget();
+    const signed = Boolean(host.person);
+    const mine = useRead(signed ? () => agents(t) : null, [], [t, signed]);
+    const offered = useRead(view === 'discover' ? () => presets(t) : null, [], [t, view]);
+    const [opened, setOpened] = useState(null);
+    const [start, setStart] = useState(null);
+    const [note, setNote] = useState('');
+    const closeNew = () => {
+        setStart(null);
+        onAdding(false);
+    };
+    const editor = adding || start ? (_jsx(Editor, { start: start ?? EMPTY, onClose: closeNew, onSaved: (a) => {
+            closeNew();
+            onView('yours');
+            mine.reload();
+            setNote(`${a.name} is saved`);
+        } })) : opened ? (_jsx(Editor, { agent: opened, onClose: () => setOpened(null), onSaved: (a) => {
+            setOpened(null);
+            mine.reload();
+            setNote(`${a.name} is saved`);
+        }, onDeleted: () => {
+            setNote(`${opened.name} is deleted`);
+            setOpened(null);
+            mine.reload();
+        } })) : null;
+    if (view === 'discover') {
+        const names = new Set(mine.value.map((a) => a.name));
+        const shown = offered.value.filter((p) => matches(q, p.id, p.title, p.prompt));
+        return (_jsxs(YStack, { gap: "$3", children: [offered.error && !offered.value.length ? (_jsx(Soft, { children: offered.error.message })) : offered.loading && !offered.value.length ? (_jsx(Soft, { children: "Reading the presets\u2026" })) : !shown.length ? (_jsx(Soft, { children: offered.value.length ? 'No preset matches.' : 'The platform offers no presets.' })) : (_jsxs(_Fragment, { children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "Presets from the platform. Adding one opens a new agent written from it, to change before it is saved." }), _jsx(Grid, { label: "Presets", children: shown.map((p) => (_jsx(Tile, { title: p.title || p.id, detail: p.prompt, meta: `Preset ${p.id}`, mark: _jsx(Mark, { name: p.title || p.id, icon: _jsx(Bot, { size: 15 }) }), action: signed ? _jsx(Add, { name: p.title || p.id, added: names.has(p.id), onPress: () => setStart(fromPreset(p)) }) : undefined }, p.id))) })] })), 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 agents." });
+    }
+    const shown = mine.value.filter((a) => matches(q, a.name, a.description, a.model));
+    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 agents\u2026" })) : !mine.value.length ? (_jsx(Soft, { action: _jsx(Button, { size: "sm", variant: "outline", onPress: () => onAdding(true), children: "New agent" }), children: "No agents yet. Give one a model, instructions and the tools it may call." })) : !shown.length ? (_jsx(Soft, { children: "No agent matches." })) : (_jsx(Grid, { label: "Your agents", children: shown.map((a) => (_jsx(Tile, { title: a.name, detail: a.description || 'No description.', meta: [a.model, `${a.runs} ${a.runs === 1 ? 'run' : 'runs'}`, reach(a), a.cap ? `${money(a.spent)} of ${money(a.cap)} this ${a.period || 'period'}` : ''].filter(Boolean).join(' · '), mark: _jsx(Mark, { name: a.name, icon: a.emoji ? _jsx(SizableText, { size: "$4", children: a.emoji }) : undefined }), onOpen: () => setOpened(a) }, a.id || a.name))) })), editor] }));
+    function reach(a) {
+        if (a.tools.includes(ALL))
+            return 'every tool';
+        return a.tools.length === 1 ? '1 tool' : `${a.tools.length} tools`;
+    }
+}
+/** Write a new agent, or change one; an existing agent is read whole first, for its instructions. */
+function Editor({ agent, start, onClose, onSaved, onDeleted, }) {
+    const t = useTarget();
+    const full = useRead(agent ? () => one(t, agent.id || agent.name) : null, null, [t, agent?.id]);
+    const catalog = useRead(() => models(t), [], [t]);
+    const on = useRead(() => tools(t, { activated: true }), [], [t]);
+    const [d, setD] = useState(start ?? EMPTY);
+    const [ready, setReady] = useState(!agent);
+    const [working, setWorking] = useState(false);
+    const [note, setNote] = useState('');
+    const [asking, setAsking] = useState(false);
+    const [find, setFind] = useState('');
+    useEffect(() => {
+        if (full.value) {
+            setD(draft(full.value));
+            setReady(true);
+        }
+    }, [full.value]);
+    const set = (p) => setD((x) => ({ ...x, ...p }));
+    const every = d.tools.includes(ALL);
+    // The tools that are on, and any the agent already names that are not.
+    const choices = useMemo(() => {
+        const listed = on.value.map((x) => ({ name: x.name, source: x.source, description: x.description }));
+        const seen = new Set(listed.map((x) => x.name));
+        const kept = d.tools.filter((n) => n !== ALL && !seen.has(n)).map((name) => ({ name, source: 'not on', description: '' }));
+        return [...kept, ...listed];
+    }, [on.value, d.tools]);
+    const shownTools = choices.filter((x) => matches(find, x.name, x.source, x.description));
+    const items = useMemo(() => {
+        const list = [{ id: DEFAULT, label: 'Default', hint: 'the deployment’s' }, ...catalog.value.map((m) => ({ id: m.id, label: m.label }))];
+        if (d.model && !list.some((m) => m.id === d.model))
+            list.splice(1, 0, { id: d.model, label: named(d.model) });
+        return agent ? list.filter((m) => m.id !== DEFAULT) : list;
+    }, [catalog.value, d.model, agent]);
+    const chosen = items.find((m) => m.id === (d.model || DEFAULT)) ?? null;
+    const save = async () => {
+        setWorking(true);
+        setNote('');
+        try {
+            const was = full.value;
+            const saved = agent && was ? await update(t, was, d) : await create(t, d);
+            onSaved(saved);
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'The agent was not saved');
+        }
+        finally {
+            setWorking(false);
+        }
+    };
+    const pick = (name, yes) => set({ tools: yes ? [...d.tools, name] : d.tools.filter((n) => n !== name) });
+    return (_jsx(Sheet, { title: agent ? agent.name : 'New agent', open: true, onOpenChange: (o) => !o && onClose(), width: 680, children: agent && full.error && !full.value ? (_jsx(Soft, { children: full.error.message })) : !ready ? (_jsx(Soft, { children: "Reading the agent\u2026" })) : (_jsxs(_Fragment, { children: [_jsx(Field, { label: "Name", hint: agent ? 'An agent keeps its name.' : 'Letters, digits, . _ or -. Other agents call it as agent_<name>.', children: _jsx(Input, { value: d.name, onChangeText: (v) => set({ name: v }), placeholder: "helper", "aria-label": "Name", disabled: Boolean(agent), autoCapitalize: "none" }) }), _jsx(Field, { label: "Description", hint: "The line another agent reads to decide whether to call this one.", children: _jsx(Input, { value: d.description, onChangeText: (v) => set({ description: v }), placeholder: "Answers questions about our codebase", "aria-label": "Description" }) }), _jsx(Field, { label: "Model", children: _jsx(XStack, { children: _jsx(ChipSelect, { name: "Model", label: chosen?.label ?? 'Default', chosen: chosen, items: items, onChange: (m) => set({ model: m.id === DEFAULT ? '' : m.id }), placeholder: "Search models\u2026", placement: "bottom-start", loading: catalog.loading, error: catalog.error?.message ?? null }) }) }), _jsx(Field, { label: "Instructions", hint: "The system prompt: what the model reads before every run.", children: _jsx(Textarea, { value: d.instructions, onChangeText: (v) => set({ instructions: v }), placeholder: "Be terse, and cite the file you read.", "aria-label": "Instructions", rows: 8 }) }), _jsxs(YStack, { gap: "$2", children: [_jsxs(XStack, { items: "center", gap: "$3", children: [_jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$2", color: "$ink", children: "Tools" }), _jsx(SizableText, { size: "$1", color: "$soft", children: every ? 'Every tool the fleet’s MCP server serves when it runs.' : d.tools.length ? `${d.tools.length} chosen. It can call only these.` : 'None chosen: it can call no tool.' })] }), _jsx(SizableText, { size: "$1", color: "$soft", children: "Every tool" }), _jsx(Switch, { checked: every, onCheckedChange: (v) => set({ tools: v ? [ALL] : [] }), "aria-label": "Every tool" })] }), every ? null : (_jsxs(_Fragment, { children: [_jsx(Input, { value: find, onChangeText: setFind, placeholder: "Find a tool\u2026", "aria-label": "Find a tool" }), _jsx(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", maxH: 240, overflow: "scroll", children: on.loading && !on.value.length ? (_jsx(Soft, { children: "Reading the tools that are on\u2026" })) : on.error && !on.value.length ? (_jsx(Soft, { children: on.error.message })) : !shownTools.length ? (_jsx(Soft, { children: choices.length ? 'No tool matches.' : 'No tool is on for your organization. Switch skills and connectors on first.' })) : (shownTools.map((x, i) => (_jsxs(XStack, { items: "center", gap: "$3", px: "$3", py: "$2", borderTopWidth: i ? 1 : 0, borderColor: "$borderColor", children: [_jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$2", color: "$ink", style: mono, numberOfLines: 1, children: x.name }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: [x.source, x.description].filter(Boolean).join(' · ') })] }), _jsx(Switch, { checked: d.tools.includes(x.name), onCheckedChange: (v) => pick(x.name, v), "aria-label": `Use ${x.name}` })] }, x.name)))) })] }))] }), _jsxs(YStack, { gap: "$2", children: [_jsx(SizableText, { size: "$2", color: "$ink", children: "Budget" }), _jsxs(XStack, { gap: "$3", flexWrap: "wrap", rowGap: "$2", items: "flex-end", children: [_jsxs(YStack, { gap: "$1", width: 140, children: [_jsxs(SizableText, { size: "$1", color: "$soft", children: ["Each ", d.period, ", USD"] }), _jsx(Input, { value: d.cap, onChangeText: (v) => set({ cap: v }), placeholder: "10", "aria-label": "Budget each period", inputMode: "decimal" })] }), _jsxs(YStack, { gap: "$1", width: 140, children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "One run, USD" }), _jsx(Input, { value: d.task, onChangeText: (v) => set({ task: v }), placeholder: "1", "aria-label": "Budget for one run", inputMode: "decimal" })] }), _jsx(Choice, { label: "Period", value: d.period, options: PERIODS.map((p) => ({ id: p, label: p[0].toUpperCase() + p.slice(1) })), onChange: (p) => set({ period: p }) })] }), _jsxs(SizableText, { size: "$1", color: "$soft", children: [full.value && full.value.cap ? `Spent ${money(full.value.spent)} this ${full.value.period}. ` : '', "A run stops at either limit."] })] }), _jsx(Line, { children: note }), _jsxs(XStack, { gap: "$2", items: "center", children: [agent && onDeleted ? (_jsx(Button, { size: "sm", variant: "ghost", onPress: () => setAsking(true), children: "Delete" })) : null, _jsx(XStack, { flex: 1 }), _jsx(Button, { size: "sm", variant: "ghost", onPress: onClose, children: "Cancel" }), _jsx(Button, { size: "sm", disabled: working, onPress: () => void save(), children: agent ? 'Save' : 'Create' })] }), agent && onDeleted ? (_jsx(Confirm, { what: agent.name, says: "The agent and every run recorded against it are removed.", open: asking, onOpenChange: setAsking, onYes: async () => {
+                        await remove(t, agent.id || agent.name);
+                        onDeleted();
+                    } })) : null] })) }));
+}

package/lib/customize/connectors.d.ts

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

package/lib/customize/connectors.js

@@ -0,0 +1,197 @@
+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.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { ChevronDown, ExternalLink, KeyRound, Server as ServerIcon } from '@hanzogui/lucide-icons-2';
+import { Button, Input, Switch } from '@hanzo/ui';
+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 } 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 }) {
+    const host = useHost();
+    const t = useTarget();
+    const signed = Boolean(host.person);
+    const mine = useRead(signed ? () => servers(t) : null, [], [t, signed]);
+    const [opened, setOpened] = useState(null);
+    const [listing, setListing] = useState(null);
+    const [connecting, setConnecting] = useState(null);
+    const [note, setNote] = useState('');
+    const connect = adding || connecting ? (_jsx(Connect, { listing: connecting, onClose: () => {
+            setConnecting(null);
+            onAdding(false);
+        }, onAdded: (said) => {
+            setConnecting(null);
+            onAdding(false);
+            mine.reload();
+            onView('yours');
+            setNote(said);
+        } })) : null;
+    const detail = listing ? (_jsx(About, { listing: listing, added: mine.value.some((s) => s.listing === listing.id), signed: signed, onAdd: () => {
+            setConnecting(listing);
+            setListing(null);
+        }, onClose: () => setListing(null) })) : null;
+    if (view === 'discover') {
+        return (_jsxs(YStack, { gap: "$6", children: [_jsx(Line, { children: note }), _jsx(Shelf, { q: q, signed: signed, added: new Set(mine.value.map((s) => s.listing).filter(Boolean)), onOpen: setListing, onAdd: setConnecting }), _jsx(Natives, { q: q }), detail, connect] }));
+    }
+    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 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: "No connectors yet. Add an MCP server by its URL, or pick one off the shelf." })) : !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)].filter(Boolean).join(' · '), mark: _jsx(Mark, { name: s.name }), onOpen: () => setOpened(s) }, s.id))) })), opened ? (_jsx(Detail, { server: opened, onClose: () => setOpened(null), onDeleted: () => {
+                    setNote(`${opened.name} is removed`);
+                    setOpened(null);
+                    mine.reload();
+                } })) : null, connect] }));
+}
+/** The shelf: featured first, then by name, a page at a time. The platform searches it. */
+function Shelf({ q, signed, added, onOpen, onAdd }) {
+    const t = useTarget();
+    const host = useHost();
+    const text = useSettled(q.trim(), 300);
+    const first = useRead(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(Soft, { action: host.signIn ? _jsx(Button, { size: "sm", onPress: () => host.signIn?.(), children: "Sign in" }) : undefined, children: "Sign in to browse the shelf." }) }));
+    }
+    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) => 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" }));
+    const next = async () => {
+        setPaging(true);
+        setNote('');
+        try {
+            const got = await shelf(t, { text, limit: PAGE, offset: list.length });
+            setMore((m) => [...m, ...got.listings]);
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'The next page did not load');
+        }
+        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] })) }));
+}
+/** The facts a card carries under its description. */
+const facts = (l) => [l.vendor, l.official ? 'Official' : '', ready(l) ? 'Hosted' : 'Package only'].filter(Boolean).join(' · ');
+/** `value` once it has held still for `ms`. */
+function useSettled(value, ms) {
+    const [settled, setSettled] = useState(value);
+    useEffect(() => {
+        const id = setTimeout(() => setSettled(value), ms);
+        return () => clearTimeout(id);
+    }, [value, ms]);
+    return settled;
+}
+/** The fleet's own servers, from the MCP server's tools/list. Every run can call them. */
+function Natives({ q }) {
+    const t = useTarget();
+    const list = useRead(() => natives(t), [], [t]);
+    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) => {
+                    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));
+                })] })) }));
+}
+/** 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 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] }));
+}
+/**
+ * Add a server: a listing off the shelf, or any MCP URL. The secret, when it
+ * needs one, is sealed in KMS as it is added; then its tools are switched on.
+ */
+function Connect({ listing, onClose, onAdded }) {
+    const t = useTarget();
+    const [name, setName] = useState('');
+    const [url, setUrl] = useState('');
+    const [header, setHeader] = useState('Authorization');
+    const [secret, setSecret] = useState('');
+    const [working, setWorking] = useState(false);
+    const [note, setNote] = useState('');
+    const save = async () => {
+        setWorking(true);
+        setNote('');
+        const a = listing ? { listing: listing.id, name, header, secret } : { name, url, header, secret };
+        try {
+            const s = await add(t, a);
+            let said = `${s.name} is added.`;
+            try {
+                const its = (await tools(t, { source: 'mcp' })).filter((x) => owns(s, x.name)).map((x) => x.name);
+                if (its.length)
+                    await toggle(t, its);
+                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 instanceof Error ? e.message : 'no answer'}`;
+            }
+            onAdded(said);
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'The connector was not added');
+        }
+        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" })] })] }));
+}
+/** One of the org's servers: where it is, its secret, its tools and their switches, and removing it. */
+function Detail({ server, onClose, onDeleted }) {
+    const t = useTarget();
+    const list = useRead(() => 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('');
+    const [asking, setAsking] = useState(false);
+    const off = its.filter((x) => !x.activated).map((x) => x.name);
+    const flip = async (on, offNames) => {
+        setBusy(true);
+        setNote('');
+        try {
+            await toggle(t, on, offNames);
+            list.reload();
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'That did not work');
+        }
+        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 ? (_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) => {
+                    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] }), _jsx(Switch, { checked: x.activated, disabled: busy, onCheckedChange: (v) => void flip(v ? [x.name] : [], v ? [] : [x.name]), "aria-label": `${short} on` })] }, x.name));
+                }) })), _jsx(Line, { children: note }), _jsx(XStack, { justify: "flex-start", children: _jsx(Button, { size: "sm", variant: "ghost", onPress: () => setAsking(true), children: "Remove connector" }) }), _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

@@ -0,0 +1,6 @@
+import { type Tab } from '../route.ts';
+import { type View } from './ui.tsx';
+export declare function Customize({ tab, view: first }: {
+    tab: Tab;
+    view?: View;
+}): import("react").JSX.Element;

package/lib/customize/index.js

@@ -0,0 +1,50 @@
+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.
+ *
+ * Nothing here is gated to org admins, because the platform gates none of it:
+ * every write on these tabs is open to any member of the org.
+ */
+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 { useHost } from '../host.js';
+import { path, TABS } from '../route.js';
+import { Agents } from './agents.js';
+import { Connectors } from './connectors.js';
+import { Plugins } from './plugins.js';
+import { Skills } from './skills.js';
+import { Choice } from './ui.js';
+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 }) },
+};
+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');
+    const [q, setQ] = useState('');
+    const [adding, setAdding] = useState(false);
+    const pick = (next) => {
+        setQ('');
+        setAdding(false);
+        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 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 ? (_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 }))] }) }));
+}

package/lib/customize/plugins.d.ts

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