@hanzo/build 0.2.80 → 0.2.81

package/lib/customize/agents.js

@@ -15,8 +15,14 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * 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.
+ *
+ * Its words are the reader's language (@hanzo/i18n `t`); an agent's name,
+ * description, instructions, model and runs, and the categories the host and
+ * the platform give their templates, are drawn as given.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { phrase } from '@hanzo/i18n';
+import { useI18n } from '@hanzo/i18n/react';
 import { ArrowLeft, Upload } from '@hanzogui/lucide-icons-2';
 import { Button, Input, Switch, Textarea } from '@hanzo/ui';
 import { ModelPicker } from '@hanzo/ui/models';
@@ -31,7 +37,7 @@ import { say } from './say.js';
 import { Add, Choice, Confirm, Empty, Failed, Field, Grid, Line, Mark, matches, mono, Part, Sheet, Soft, Tile, useCount, Visitor } from './ui.js';
 /** How many cards Browse draws at a time. */
 const PAGE = 60;
-const ANY = 'All';
+const ANY = phrase('All');
 /** Categories as Browse offers them: the default agents' and presets' first, as listed, then the rest by how many each holds. */
 export function kinds(first, rest) {
     const lead = [...new Set(first.map((c) => c.category))];
@@ -42,13 +48,40 @@ export function kinds(first, rest) {
     return [ANY, ...lead, ...[...count.keys()].sort((a, b) => count.get(b) - count.get(a) || a.localeCompare(b))];
 }
 const money = (m) => `$${(m / 1_000_000).toFixed(m % 10_000 ? 4 : 2).replace(/\.?0+$/, '')}`;
+/** A category as Browse names it: All, and the platform's presets and people, in the reader's words; the rest are the host's, as given. */
+const category = (c, t) => (c === ANY || c === 'Preset' || c === 'Person' ? t(c) : c);
+/**
+ * A budget's sentences by its period ('' where the agent names none): whole
+ * sentences, so a language says the period its own way.
+ */
+const SPENT = {
+    day: phrase('{spent} of {cap} this day'),
+    week: phrase('{spent} of {cap} this week'),
+    month: phrase('{spent} of {cap} this month'),
+    '': phrase('{spent} of {cap} this period'),
+};
+const BUDGET = {
+    day: phrase('{spent} of {cap} spent this day; at most {task} a run.'),
+    week: phrase('{spent} of {cap} spent this week; at most {task} a run.'),
+    month: phrase('{spent} of {cap} spent this month; at most {task} a run.'),
+    '': phrase('{spent} of {cap} spent this period; at most {task} a run.'),
+};
+const SO_FAR = {
+    day: phrase('Spent {spent} this day.'),
+    week: phrase('Spent {spent} this week.'),
+    month: phrase('Spent {spent} this month.'),
+    '': phrase('Spent {spent} this period.'),
+};
+const EACH = { day: phrase('Each day, USD'), week: phrase('Each week, USD'), month: phrase('Each month, USD') };
+const PERIOD = { day: phrase('Day'), week: phrase('Week'), month: phrase('Month') };
 export function Agents({ view, q, adding, onAdding, onView, onCount }) {
+    const { t } = useI18n();
     const host = useHost();
-    const t = useTarget();
+    const target = useTarget();
     const signed = Boolean(host.person);
     const browsing = view === 'discover';
-    const mine = useLoad(signed ? () => agents(t) : null, [], [t, signed]);
-    const offered = useLoad(browsing ? () => presets(t) : null, [], [t, view]);
+    const mine = useLoad(signed ? () => agents(target) : null, [], [target, signed]);
+    const offered = useLoad(browsing ? () => presets(target) : null, [], [target, view]);
     const figures = useLoad(browsing && host.personas ? host.personas : null, [], [view]);
     useCount(mine.value.length, onCount);
     const [note, setNote] = useState('');
@@ -62,10 +95,10 @@ export function Agents({ view, q, adding, onAdding, onView, onCount }) {
         setUsing(c);
         setNote('');
         try {
-            opened(await use(t, c, window.location.href));
+            opened(await use(target, c, window.location.href));
         }
         catch (e) {
-            setNote(say(e));
+            setNote(say(e, t));
         }
         finally {
             setUsing(null);
@@ -75,25 +108,33 @@ export function Agents({ view, q, adding, onAdding, onView, onCount }) {
             onAdding(false);
             onView('yours');
             mine.reload();
-            setNote(`${a.name} is saved`);
+            setNote(t('{name} is saved', { name: a.name }));
         } })) : null;
     if (browsing) {
         const first = [...(host.cast ?? []), ...offered.value.map(fromPreset)];
         const all = [...first, ...figures.value];
         const shown = all.filter((c) => (kind === ANY || c.category === kind) && matches(q, c.title, c.name, c.description, c.category));
         const failed = figures.error ?? offered.error;
-        return (_jsxs(YStack, { gap: "$3", children: [signed ? (_jsxs(XStack, { gap: "$2", flexWrap: "wrap", children: [_jsx(Button, { size: "sm", variant: "outline", onPress: () => onAdding(true), children: "Start from scratch" }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => setMaking('self'), children: "Clone yourself" }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => setMaking('person'), children: "Create from a person" })] })) : null, _jsx(XStack, { overflowX: "auto", overflowY: "hidden", pb: "$1", children: _jsx(Choice, { label: "Category", value: kind, options: kinds(first, figures.value).map((id) => ({ id, label: id })), onChange: setKind }) }), _jsx(Line, { children: note }), shown.length ? (_jsx(Grid, { label: "Agents to start from", children: shown.slice(0, more).map((c) => (_jsx(Tile, { title: c.title, detail: c.description === c.title || c.description === c.category ? undefined : c.description, meta: c.category, mark: _jsx(Mark, { name: c.title, size: 40, logo: c.avatar }), action: signed ? _jsx(Add, { name: c.title, label: "Use", added: false, busy: using !== null, onPress: () => void take(c) }) : undefined }, `${c.category}/${c.name}/${c.title}`))) })) : figures.loading || offered.loading ? null : (_jsx(Soft, { children: `No agent matches “${q.trim()}”.` })), shown.length > more ? (_jsx(XStack, { children: _jsx(Button, { size: "sm", variant: "ghost", onPress: () => setMore(more + PAGE), children: "More" }) })) : null, failed ? _jsx(Failed, { error: failed, onRetry: figures.error ? figures.reload : offered.reload }) : figures.loading || offered.loading ? _jsx(Soft, { children: "Loading\u2026" }) : null, editor, making ? _jsx(Person, { self: making === 'self', onClose: () => setMaking(null), onMade: opened }) : null] }));
+        return (_jsxs(YStack, { gap: "$3", children: [signed ? (_jsxs(XStack, { gap: "$2", flexWrap: "wrap", children: [_jsx(Button, { size: "sm", variant: "outline", onPress: () => onAdding(true), children: t('Start from scratch') }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => setMaking('self'), children: t('Clone yourself') }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => setMaking('person'), children: t('Create from a person') })] })) : null, _jsx(XStack, { overflowX: "auto", overflowY: "hidden", pb: "$1", children: _jsx(Choice, { label: t('Category'), value: kind, options: kinds(first, figures.value).map((id) => ({ id, label: category(id, t) })), onChange: setKind }) }), _jsx(Line, { children: note }), shown.length ? (_jsx(Grid, { label: t('Agents to start from'), children: shown.slice(0, more).map((c) => (_jsx(Tile, { title: c.title, detail: c.description === c.title || c.description === c.category ? undefined : c.description, meta: category(c.category, t), mark: _jsx(Mark, { name: c.title, size: 40, logo: c.avatar }), action: signed ? _jsx(Add, { name: c.title, use: true, added: false, busy: using !== null, onPress: () => void take(c) }) : undefined }, `${c.category}/${c.name}/${c.title}`))) })) : figures.loading || offered.loading ? null : (_jsx(Soft, { children: t('No agent matches “{q}”.', { q: q.trim() }) })), shown.length > more ? (_jsx(XStack, { children: _jsx(Button, { size: "sm", variant: "ghost", onPress: () => setMore(more + PAGE), children: t('More') }) })) : null, failed ? _jsx(Failed, { error: failed, onRetry: figures.error ? figures.reload : offered.reload }) : figures.loading || offered.loading ? _jsx(Soft, { children: t('Loading…') }) : null, editor, making ? _jsx(Person, { self: making === 'self', onClose: () => setMaking(null), onMade: opened }) : null] }));
     }
     if (!signed) {
-        return _jsx(Visitor, { children: "Sign in to see your agents." });
+        return _jsx(Visitor, { children: t('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(Failed, { error: mine.error, onRetry: mine.reload })) : mine.loading && !mine.value.length ? (_jsx(Soft, { children: "Loading your agents\u2026" })) : !mine.value.length ? (_jsxs(Empty, { title: "No agents yet", detail: "", children: [_jsx(Button, { size: "sm", variant: "outline", onPress: () => onView('discover'), children: "Browse agents" }), _jsx(Button, { size: "sm", onPress: () => onAdding(true), children: "New agent" })] })) : !shown.length ? (_jsx(Soft, { children: `No agent of yours matches “${q.trim()}”.` })) : (_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(Face, { agent: a, cast: host.cast ?? [] }), onOpen: () => opened(a) }, a.id || a.name))) })), editor] }));
+    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: t('Loading your agents…') })) : !mine.value.length ? (_jsxs(Empty, { title: t('No agents yet'), detail: "", children: [_jsx(Button, { size: "sm", variant: "outline", onPress: () => onView('discover'), children: t('Browse agents') }), _jsx(Button, { size: "sm", onPress: () => onAdding(true), children: t('New agent') })] })) : !shown.length ? (_jsx(Soft, { children: t('No agent of yours matches “{q}”.', { q: q.trim() }) })) : (_jsx(Grid, { label: t('Your agents'), children: shown.map((a) => (_jsx(Tile, { title: a.name, detail: a.description || t('No description.'), meta: [
+                        a.model,
+                        a.runs === 1 ? t('1 run') : t('{n} runs', { n: a.runs }),
+                        reach(a, t),
+                        a.cap ? t(SPENT[a.period], { spent: money(a.spent), cap: money(a.cap) }) : '',
+                    ]
+                        .filter(Boolean)
+                        .join(' · '), mark: _jsx(Face, { agent: a, cast: host.cast ?? [] }), onOpen: () => opened(a) }, a.id || a.name))) })), editor] }));
 }
 /** Clone yourself, or anyone named: a name, who they are, and writing of theirs, pasted or uploaded. */
 function Person({ self, onClose, onMade }) {
+    const { t } = useI18n();
     const host = useHost();
-    const t = useTarget();
+    const target = useTarget();
     const me = self ? host.person : null;
     const [name, setName] = useState(me?.name ?? '');
     const [about, setAbout] = useState('');
@@ -109,22 +150,22 @@ function Person({ self, onClose, onMade }) {
         setWorking(true);
         setNote('');
         try {
-            onMade(await use(t, person(name, about, writing, me?.avatar), window.location.href));
+            onMade(await use(target, person(name, about, writing, me?.avatar), window.location.href));
         }
         catch (e) {
-            setNote(say(e));
+            setNote(say(e, t));
             setWorking(false);
         }
     };
-    return (_jsxs(Sheet, { title: self ? 'Clone yourself' : 'Create from a person', open: true, onOpenChange: (o) => !o && onClose(), children: [_jsx(Field, { label: "Name", children: _jsx(Input, { value: name, onChangeText: setName, "aria-label": "Name" }) }), _jsx(Field, { label: "Description", children: _jsx(Textarea, { value: about, onChangeText: setAbout, "aria-label": "Description", rows: 3 }) }), _jsx(Field, { label: "Writing", children: _jsx(Textarea, { value: writing, onChangeText: setWriting, "aria-label": "Writing", rows: 6 }) }), _jsxs(XStack, { children: [_jsxs(Button, { size: "sm", variant: "ghost", onPress: () => file.current?.click(), children: [_jsx(Upload, { size: 14 }), " Upload"] }), _jsx("input", { ref: file, type: "file", multiple: true, accept: ".txt,.md,.markdown,.csv,.json,.html,text/*", hidden: true, "aria-label": "Upload writing", onChange: (e) => {
+    return (_jsxs(Sheet, { title: self ? t('Clone yourself') : t('Create from a person'), open: true, onOpenChange: (o) => !o && onClose(), children: [_jsx(Field, { label: t('Name'), children: _jsx(Input, { value: name, onChangeText: setName, "aria-label": t('Name') }) }), _jsx(Field, { label: t('Description'), children: _jsx(Textarea, { value: about, onChangeText: setAbout, "aria-label": t('Description'), rows: 3 }) }), _jsx(Field, { label: t('Writing'), children: _jsx(Textarea, { value: writing, onChangeText: setWriting, "aria-label": t('Writing'), rows: 6 }) }), _jsxs(XStack, { children: [_jsxs(Button, { size: "sm", variant: "ghost", onPress: () => file.current?.click(), children: [_jsx(Upload, { size: 14 }), " ", t('Upload')] }), _jsx("input", { ref: file, type: "file", multiple: true, accept: ".txt,.md,.markdown,.csv,.json,.html,text/*", hidden: true, "aria-label": t('Upload writing'), onChange: (e) => {
                             void read(e.currentTarget.files);
                             e.currentTarget.value = '';
-                        } })] }), _jsx(Line, { children: note }), _jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(XStack, { flex: 1 }), _jsx(Button, { size: "sm", variant: "ghost", onPress: onClose, children: "Cancel" }), _jsx(Button, { size: "sm", disabled: working || !name.trim(), onPress: () => void save(), children: "Create" })] })] }));
+                        } })] }), _jsx(Line, { children: note }), _jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(XStack, { flex: 1 }), _jsx(Button, { size: "sm", variant: "ghost", onPress: onClose, children: t('Cancel') }), _jsx(Button, { size: "sm", disabled: working || !name.trim(), onPress: () => void save(), children: t('Create') })] })] }));
 }
-function reach(a) {
+function reach(a, t) {
     if (a.tools.includes(ALL))
-        return 'every tool';
-    return a.tools.length === 1 ? '1 tool' : `${a.tools.length} tools`;
+        return t('every tool');
+    return a.tools.length === 1 ? t('1 tool') : t('{n} tools', { n: a.tools.length });
 }
 /** An agent's face: its picture, the default agent's of its name, its emoji, or its initial. */
 function Face({ agent: a, cast, size = 32 }) {
@@ -133,23 +174,25 @@ function Face({ agent: a, cast, size = 32 }) {
 }
 /** One agent's page: who it is, what it runs on and reads, what it may call and spend, and what it has done. */
 export function Profile({ name }) {
+    const { t } = useI18n();
     const host = useHost();
-    const t = useTarget();
-    const got = useLoad(host.person ? () => profile(t, name) : null, null, [t, name]);
+    const target = useTarget();
+    const got = useLoad(host.person ? () => profile(target, name) : null, null, [target, name]);
     const [editing, setEditing] = useState(false);
     const back = () => host.go(path({ kind: 'customize', tab: 'agents' }));
     const a = got.value?.agent;
-    return (_jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", "$max-md": { px: '$4', py: '$4' }, children: [_jsxs(YStack, { width: "100%", maxW: 880, mx: "auto", gap: "$5", children: [_jsxs(XStack, { render: "button", onPress: back, items: "center", gap: "$1.5", self: "flex-start", cursor: "pointer", "aria-label": "Back to agents", children: [_jsx(ArrowLeft, { size: 14, color: "$soft" }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Agents" })] }), !host.person ? (_jsx(Visitor, { children: "Sign in to see this agent." })) : got.error && !a ? (_jsx(Failed, { error: got.error, onRetry: got.reload })) : !a ? (_jsx(Soft, { children: "Loading the agent\u2026" })) : (_jsxs(_Fragment, { children: [_jsxs(XStack, { items: "center", gap: "$4", children: [_jsx(Face, { agent: a, cast: host.cast ?? [], size: 64 }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$1", children: [_jsx(SizableText, { render: "h1", size: "$7", color: "$ink", numberOfLines: 1, children: a.name }), _jsx(SizableText, { size: "$3", color: "$soft", children: a.description || 'No role written yet.' })] }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => setEditing(true), children: "Edit" })] }), _jsx(Part, { title: "Model", detail: a.model || 'The deployment’s default' }), _jsx(Part, { title: "Instructions", detail: a.instructions ? '' : 'None written: it runs on its model alone.', children: a.instructions ? (_jsx(YStack, { p: "$3", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", maxH: 320, overflow: "scroll", children: _jsx(SizableText, { size: "$2", color: "$ink", style: { whiteSpace: 'pre-wrap' }, children: a.instructions }) })) : null }), _jsx(Part, { title: "Tools", detail: a.tools.includes(ALL) ? 'Every tool the fleet’s MCP server serves.' : a.tools.length ? a.tools.join(', ') : 'None: it calls no tool.' }), _jsx(Part, { title: "Budget", detail: a.cap ? `${money(a.spent)} of ${money(a.cap)} spent this ${a.period || 'period'}; at most ${money(a.task)} a run.` : 'No budget set.' }), _jsx(Part, { title: "Runs", detail: a.runs ? `${a.runs} in all; the latest ${Math.min(a.runs, got.value.runs.length)} below.` : 'It has not run yet.', children: got.value.runs.map((r) => (_jsxs(XStack, { gap: "$3", py: "$2", borderTopWidth: 1, borderColor: "$borderColor", items: "flex-start", children: [_jsx(SizableText, { size: "$1", color: r.status === 'ok' ? '$soft' : '$bad', width: 44, shrink: 0, children: r.status === 'ok' ? 'ok' : 'failed' }), _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: r.input || '(no input)' }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 2, children: r.status === 'ok' ? r.output : r.error })] }), _jsx(SizableText, { size: "$1", color: "$soft", shrink: 0, children: [r.model, r.at ? new Date(r.at).toLocaleString() : ''].filter(Boolean).join(' · ') })] }, r.id))) })] }))] }), editing && a ? (_jsx(Editor, { agent: a, onClose: () => setEditing(false), onSaved: () => {
+    return (_jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", "$max-md": { px: '$4', py: '$4' }, children: [_jsxs(YStack, { width: "100%", maxW: 880, mx: "auto", gap: "$5", children: [_jsxs(XStack, { render: "button", onPress: back, items: "center", gap: "$1.5", self: "flex-start", cursor: "pointer", "aria-label": t('Back to agents'), children: [_jsx(ArrowLeft, { size: 14, color: "$soft", 'data-i18n-mirror': '' }), _jsx(SizableText, { size: "$2", color: "$soft", children: t('Agents') })] }), !host.person ? (_jsx(Visitor, { children: t('Sign in to see this agent.') })) : got.error && !a ? (_jsx(Failed, { error: got.error, onRetry: got.reload })) : !a ? (_jsx(Soft, { children: t('Loading the agent…') })) : (_jsxs(_Fragment, { children: [_jsxs(XStack, { items: "center", gap: "$4", children: [_jsx(Face, { agent: a, cast: host.cast ?? [], size: 64 }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$1", children: [_jsx(SizableText, { render: "h1", size: "$7", color: "$ink", numberOfLines: 1, children: a.name }), _jsx(SizableText, { size: "$3", color: "$soft", children: a.description || t('No role written yet.') })] }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => setEditing(true), children: t('Edit') })] }), _jsx(Part, { title: t('Model'), detail: a.model || t('The deployment’s default') }), _jsx(Part, { title: t('Instructions'), detail: a.instructions ? '' : t('None written: it runs on its model alone.'), children: a.instructions ? (_jsx(YStack, { p: "$3", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", maxH: 320, overflow: "scroll", children: _jsx(SizableText, { size: "$2", color: "$ink", style: { whiteSpace: 'pre-wrap' }, children: a.instructions }) })) : null }), _jsx(Part, { title: t('Tools'), detail: a.tools.includes(ALL) ? t('Every tool the fleet’s MCP server serves.') : a.tools.length ? a.tools.join(', ') : t('None: it calls no tool.') }), _jsx(Part, { title: t('Budget'), detail: a.cap ? t(BUDGET[a.period], { spent: money(a.spent), cap: money(a.cap), task: money(a.task) }) : t('No budget set.') }), _jsx(Part, { title: t('Runs'), detail: a.runs ? t('{runs} in all; the latest {n} below.', { runs: a.runs, n: Math.min(a.runs, got.value.runs.length) }) : t('It has not run yet.'), children: got.value.runs.map((r) => (_jsxs(XStack, { gap: "$3", py: "$2", borderTopWidth: 1, borderColor: "$borderColor", items: "flex-start", children: [_jsx(SizableText, { size: "$1", color: r.status === 'ok' ? '$soft' : '$bad', width: 44, shrink: 0, children: r.status === 'ok' ? t('ok') : t('failed') }), _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: r.input || t('(no input)') }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 2, children: r.status === 'ok' ? r.output : r.error })] }), _jsx(SizableText, { size: "$1", color: "$soft", shrink: 0, children: [r.model, r.at ? new Date(r.at).toLocaleString() : ''].filter(Boolean).join(' · ') })] }, r.id))) })] }))] }), editing && a ? (_jsx(Editor, { agent: a, onClose: () => setEditing(false), onSaved: () => {
                     setEditing(false);
                     got.reload();
                 }, onDeleted: back })) : null] }));
 }
 /** Write a new agent, or change one; an existing agent is read whole first, for its instructions. */
 function Editor({ agent, onClose, onSaved, onDeleted, }) {
-    const t = useTarget();
-    const full = useLoad(agent ? () => one(t, agent.id || agent.name) : null, null, [t, agent?.id]);
-    const catalog = useLoad(() => models(t), [], [t]);
-    const on = useLoad(() => tools(t, { activated: true }), [], [t]);
+    const { t } = useI18n();
+    const target = useTarget();
+    const full = useLoad(agent ? () => one(target, agent.id || agent.name) : null, null, [target, agent?.id]);
+    const catalog = useLoad(() => models(target), [], [target]);
+    const on = useLoad(() => tools(target, { activated: true }), [], [target]);
     const [d, setD] = useState(EMPTY);
     const [ready, setReady] = useState(!agent);
     const [working, setWorking] = useState(false);
@@ -168,28 +211,32 @@ function Editor({ agent, onClose, onSaved, onDeleted, }) {
     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: '' }));
+        const kept = d.tools.filter((n) => n !== ALL && !seen.has(n)).map((name) => ({ name, source: t('not on'), description: '' }));
         return [...kept, ...listed];
-    }, [on.value, d.tools]);
+    }, [on.value, d.tools, t]);
     const shownTools = choices.filter((x) => matches(find, x.name, x.source, x.description));
     const save = async () => {
         setWorking(true);
         setNote('');
         try {
             const was = full.value;
-            const saved = agent && was ? await update(t, was, d) : await create(t, d);
+            const saved = agent && was ? await update(target, was, d) : await create(target, d);
             onSaved(saved);
         }
         catch (e) {
-            setNote(say(e));
+            setNote(say(e, t));
         }
         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(Failed, { error: full.error, onRetry: full.reload })) : !ready ? (_jsx(Soft, { children: "Loading 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 }), "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: _jsxs(XStack, { items: "center", gap: "$2", flexWrap: "wrap", children: [_jsx(ModelPicker, { size: "sm", name: "Model", placeholder: "The deployment\u2019s default", models: catalog.value, scope: "chat", value: d.model || undefined, onChange: (id) => set({ model: id }), loading: catalog.loading, error: catalog.error ? say(catalog.error) : null }), d.model && !agent ? (_jsx(Button, { size: "sm", variant: "ghost", onPress: () => set({ model: '' }), children: "Use the default" })) : 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: "Loading the tools that are on\u2026" })) : on.error && !on.value.length ? (_jsx(Failed, { error: on.error, onRetry: on.reload })) : !shownTools.length ? (_jsx(Soft, { children: choices.length ? 'No tool matches.' : 'No tool is on for your organization yet. Add skills or connectors 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);
+    return (_jsx(Sheet, { title: agent ? agent.name : t('New agent'), open: true, onOpenChange: (o) => !o && onClose(), width: 680, children: agent && full.error && !full.value ? (_jsx(Failed, { error: full.error, onRetry: full.reload })) : !ready ? (_jsx(Soft, { children: t('Loading the agent…') })) : (_jsxs(_Fragment, { children: [_jsx(Field, { label: t('Name'), hint: agent ? t('An agent keeps its name.') : t('Letters, digits, . _ or -. Other agents call it as agent_<name>.'), children: _jsx(Input, { value: d.name, onChangeText: (v) => set({ name: v }), "aria-label": t('Name'), disabled: Boolean(agent), autoCapitalize: "none" }) }), _jsx(Field, { label: t('Description'), hint: t('The line another agent reads to decide whether to call this one.'), children: _jsx(Input, { value: d.description, onChangeText: (v) => set({ description: v }), placeholder: t('Answers questions about our codebase'), "aria-label": t('Description') }) }), _jsx(Field, { label: t('Model'), children: _jsxs(XStack, { items: "center", gap: "$2", flexWrap: "wrap", children: [_jsx(ModelPicker, { size: "sm", name: t('Model'), placeholder: t('The deployment’s default'), models: catalog.value, scope: "chat", value: d.model || undefined, onChange: (id) => set({ model: id }), loading: catalog.loading, error: catalog.error ? say(catalog.error, t) : null }), d.model && !agent ? (_jsx(Button, { size: "sm", variant: "ghost", onPress: () => set({ model: '' }), children: t('Use the default') })) : null] }) }), _jsx(Field, { label: t('Instructions'), hint: t('The system prompt: what the model reads before every run.'), children: _jsx(Textarea, { value: d.instructions, onChangeText: (v) => set({ instructions: v }), placeholder: t('Be terse, and cite the file you read.'), "aria-label": t('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: t('Tools') }), _jsx(SizableText, { size: "$1", color: "$soft", children: every
+                                                ? t('Every tool the fleet’s MCP server serves when it runs.')
+                                                : d.tools.length
+                                                    ? t('{n} chosen. It can call only these.', { n: d.tools.length })
+                                                    : t('None chosen: it can call no tool.') })] }), _jsx(SizableText, { size: "$1", color: "$soft", children: t('Every tool') }), _jsx(Switch, { checked: every, onCheckedChange: (v) => set({ tools: v ? [ALL] : [] }), "aria-label": t('Every tool') })] }), every ? null : (_jsxs(_Fragment, { children: [_jsx(Input, { value: find, onChangeText: setFind, placeholder: t('Find a tool…'), "aria-label": t('Find a tool') }), _jsx(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", maxH: 240, overflow: "scroll", children: on.loading && !on.value.length ? (_jsx(Soft, { children: t('Loading the tools that are on…') })) : on.error && !on.value.length ? (_jsx(Failed, { error: on.error, onRetry: on.reload })) : !shownTools.length ? (_jsx(Soft, { children: choices.length ? t('No tool matches.') : t('No tool is on for your organization yet. Add skills or connectors 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": t('Use {name}', { name: x.name }) })] }, x.name)))) })] }))] }), _jsxs(YStack, { gap: "$2", children: [_jsx(SizableText, { size: "$2", color: "$ink", children: t('Budget') }), _jsxs(XStack, { gap: "$3", flexWrap: "wrap", rowGap: "$2", items: "flex-end", children: [_jsxs(YStack, { gap: "$1", width: 140, children: [_jsx(SizableText, { size: "$1", color: "$soft", children: t(EACH[d.period]) }), _jsx(Input, { value: d.cap, onChangeText: (v) => set({ cap: v }), placeholder: "10", "aria-label": t('Budget each period'), inputMode: "decimal" })] }), _jsxs(YStack, { gap: "$1", width: 140, children: [_jsx(SizableText, { size: "$1", color: "$soft", children: t('One run, USD') }), _jsx(Input, { value: d.task, onChangeText: (v) => set({ task: v }), placeholder: "1", "aria-label": t('Budget for one run'), inputMode: "decimal" })] }), _jsx(Choice, { label: t('Period'), value: d.period, options: PERIODS.map((p) => ({ id: p, label: t(PERIOD[p]) })), onChange: (p) => set({ period: p }) })] }), _jsx(SizableText, { size: "$1", color: "$soft", children: [full.value && full.value.cap ? t(SO_FAR[full.value.period], { spent: money(full.value.spent) }) : '', t('A run stops at either limit.')].filter(Boolean).join(' ') })] }), _jsx(Line, { children: note }), _jsxs(XStack, { gap: "$2", items: "center", children: [agent && onDeleted ? (_jsx(Button, { size: "sm", variant: "ghost", onPress: () => setAsking(true), children: t('Delete') })) : null, _jsx(XStack, { flex: 1 }), _jsx(Button, { size: "sm", variant: "ghost", onPress: onClose, children: t('Cancel') }), _jsx(Button, { size: "sm", disabled: working, onPress: () => void save(), children: agent ? t('Save') : t('Create') })] }), agent && onDeleted ? (_jsx(Confirm, { what: agent.name, says: t('The agent and every run recorded against it are removed.'), open: asking, onOpenChange: setAsking, onYes: async () => {
+                        await remove(target, agent.id || agent.name);
                         onDeleted();
                     } })) : null] })) }));
 }

package/lib/customize/connectors.js

@@ -11,8 +11,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * 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.
+ *
+ * Its words are the reader's language (@hanzo/i18n `t`); a server's name,
+ * address, description and tools are the registry's or the org's, drawn as given.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { useI18n } from '@hanzo/i18n/react';
 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';
@@ -24,19 +28,20 @@ import { Out } from '../out.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';
+import { Add, Confirm, Empty, Failed, Featured, Field, Grid, 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, onCount }) {
+    const { t } = useI18n();
     const host = useHost();
-    const t = useTarget();
+    const target = 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 = useLoad(signed ? () => servers(t) : null, [], [t, signed]);
+    const mine = useLoad(signed ? () => servers(target) : null, [], [target, 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 plane = useLoad(signed && view === 'yours' && mine.value.length ? () => tools(target, { source: 'mcp' }) : null, [], [target, signed, view, mine.value]);
     const [opened, setOpened] = useState(null);
     const [listing, setListing] = useState(null);
     const [connecting, setConnecting] = useState(null);
@@ -51,12 +56,12 @@ export function Connectors({ view, q, adding, onAdding, onView, onCount }) {
         setBusy(s.id);
         setNote('');
         try {
-            await toggle(t, next ? its : [], next ? [] : its);
+            await toggle(target, next ? its : [], next ? [] : its);
             plane.reload();
-            setNote(next ? `${s.name} is on` : `${s.name} is off`);
+            setNote(next ? t('{name} is on', { name: s.name }) : t('{name} is off', { name: s.name }));
         }
         catch (e) {
-            setNote(say(e));
+            setNote(say(e, t));
         }
         finally {
             setBusy('');
@@ -80,40 +85,41 @@ export function Connectors({ view, q, adding, onAdding, onView, onCount }) {
         return (_jsxs(YStack, { gap: "$6", children: [_jsx(Line, { children: note }), _jsx(Shelf, { q: q, signed: signed, may: may, 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(Visitor, { children: "Sign in to see your connectors." });
+        return _jsx(Visitor, { children: t('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(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) => {
+    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: t('Loading your connectors…') })) : !mine.value.length ? (_jsxs(Empty, { title: t('No connectors yet'), detail: may ? t('Connect an app from Browse, or add any MCP server by its URL.') : t('An org admin adds connectors. Browse what there is.'), children: [_jsx(Button, { size: "sm", variant: "outline", onPress: () => onView('discover'), children: t('Browse connectors') }), may ? (_jsx(Button, { size: "sm", onPress: () => onAdding(true), children: t('Add by URL') })) : null] })) : !shown.length ? (_jsx(Soft, { children: t('No connector of yours matches “{q}”.', { q: q.trim() }) })) : (_jsx(Grid, { label: t('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',
+                            its.length ? t('{on} of {n} tools on', { on: lit, n: its.length }) : plane.loading ? '' : t('No tools listed yet'),
+                            s.listing ? t('From Browse') : t('Added by URL'),
+                            s.secret ? t('Secret in KMS') : '',
+                            s.admitted ? '' : t('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: () => {
+                            .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": t('{name} on', { name: s.name }) })) : its.length ? (_jsx(SizableText, { size: "$1", color: "$soft", children: lit ? t('On') : t('Off') })) : undefined }, s.id));
+                }) })), plane.error && mine.value.length ? _jsx(Line, { children: t('Tools: {reason}', { reason: say(plane.error, t) }) }) : null, opened ? (_jsx(Detail, { server: opened, may: may, onClose: () => {
                     setOpened(null);
                     plane.reload();
                 }, onDeleted: () => {
-                    setNote(`${opened.name} is removed`);
+                    setNote(t('{name} is removed', { name: opened.name }));
                     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, may, added, onOpen, onAdd }) {
-    const t = useTarget();
+    const { t } = useI18n();
+    const target = useTarget();
     const text = useSettled(q.trim(), 300);
-    const first = useLoad(signed ? () => shelf(t, { text, limit: PAGE }) : null, null, [t, signed, text]);
+    const first = useLoad(signed ? () => shelf(target, { text, limit: PAGE }) : null, null, [target, 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: "Connect an app", detail: "Give runs the tools you already use.", children: _jsx(Visitor, { children: "Sign in to browse connectors." }) }));
+        return (_jsx(Part, { title: t('Connect an app'), detail: t('Give runs the tools you already use.'), children: _jsx(Visitor, { children: t('Sign in to browse connectors.') }) }));
     }
     const page = first.value;
     const list = [...(page?.listings ?? []), ...more];
@@ -125,20 +131,20 @@ function Shelf({ q, signed, may, added, onOpen, onAdd }) {
         setPaging(true);
         setNote('');
         try {
-            const got = await shelf(t, { text, limit: PAGE, offset: list.length });
+            const got = await shelf(target, { text, limit: PAGE, offset: list.length });
             setMore((m) => [...m, ...got.listings]);
         }
         catch (e) {
-            setNote(say(e));
+            setNote(say(e, t));
         }
         finally {
             setPaging(false);
         }
     };
-    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] })) }));
+    return (_jsx(Part, { title: t('Connect an app'), detail: t('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: t('Loading connectors…') })) : !list.length ? (_jsx(Soft, { children: text ? t('No connector matches “{q}”.', { q: text }) : t('There are no connectors to add yet.') })) : (_jsxs(YStack, { gap: "$3", children: [hero ? (_jsx(Featured, { title: titleOf(hero), detail: hero.description, meta: facts(hero, t), 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 ? t('{shown} of {n} connectors', { shown: list.length, n: page.total }) : t('{n} connectors', { n: page.total }) }), _jsx(Grid, { label: t('Servers on the shelf'), children: rest.map((l) => (_jsx(Tile, { title: titleOf(l), detail: l.description, meta: facts(l, t), 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: t('Show more') }) })) : null] })) }));
 }
-/** The facts a card carries under its description. */
-const facts = (l) => [l.vendor, l.official ? 'Official' : '', ready(l) ? 'Hosted' : 'Package only: needs a place to run'].filter(Boolean).join(' · ');
+/** The facts a card carries under its description, said in the reader's language. */
+const facts = (l, t) => [l.vendor, l.official ? t('Official') : '', ready(l) ? t('Hosted') : t('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);
@@ -154,33 +160,36 @@ function useSettled(value, ms) {
  * at once on the old MCP address, which exists to show them.
  */
 function Natives({ q }) {
+    const { t } = useI18n();
     const host = useHost();
-    const t = useTarget();
+    const target = useTarget();
     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 list = useLoad(asked ? () => natives(target) : null, [], [target, 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: "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) => {
+    return (_jsx(Part, { title: t('Built in'), detail: t('Hanzo’s 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: t('Show built-in servers') })), children: !asked ? null : list.loading && !list.value.length ? (_jsx(Soft, { children: t('Loading built-in servers…') })) : list.error && !list.value.length ? (_jsx(Failed, { error: list.error, onRetry: list.reload })) : !shown.length ? (_jsx(Soft, { children: list.value.length ? t('No built-in server matches “{q}”.', { q: q.trim() }) : t('No built-in servers are listed.') })) : (_jsxs(YStack, { gap: "$1", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: t('{servers} servers · {ops} operations', { servers: shown.length, ops }) }), 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 lists 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' }, "$platform-web": { textAlign: 'start' }, 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: t('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 = useLoad(() => one(t, listing.id), listing, [t, listing.id]);
+    const { t } = useI18n();
+    const target = useTarget();
+    const full = useLoad(() => one(target, listing.id), listing, [target, 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 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] }));
+    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 ? t('Official') : ''].filter(Boolean).join(' · ') })] })] }), l.description ? (_jsx(SizableText, { size: "$2", color: "$soft", children: l.description })) : null, l.remotes.length ? (_jsx(Field, { label: t('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: t('Packages'), hint: ready(l) ? undefined : t('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: t('Showing what Browse listed. {reason}', { reason: say(full.error, t) }) }) : null, signed && ready(l) ? (_jsx(XStack, { justify: "flex-end", children: _jsx(Button, { size: "sm", disabled: added, onPress: onAdd, children: added ? t('Added') : t('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 { t } = useI18n();
+    const target = useTarget();
     const [name, setName] = useState('');
     const [url, setUrl] = useState('');
     const [header, setHeader] = useState('Authorization');
@@ -192,32 +201,33 @@ function Connect({ listing, onClose, onAdded }) {
         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.`;
+            const s = await add(target, a);
+            let said = t('{name} is added.', { name: s.name });
             try {
-                const its = (await tools(t, { source: 'mcp' })).filter((x) => owns(s, x.name)).map((x) => x.name);
+                const its = (await tools(target, { 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.`;
+                    await toggle(target, its);
+                said = its.length ? t('{name} is added, and its {n} tools are on.', { name: s.name, n: its.length }) : t('{name} is added. It listed no tools yet.', { name: s.name });
             }
             catch (e) {
-                said = `${s.name} is added, but its tools could not be switched on. ${say(e)}`;
+                said = t('{name} is added, but its tools could not be switched on. {reason}', { name: s.name, reason: say(e, t) });
             }
             onAdded(said);
         }
         catch (e) {
-            setNote(say(e));
+            setNote(say(e, t));
         }
         finally {
             setWorking(false);
         }
     };
-    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" })] })] }));
+    return (_jsxs(Sheet, { title: listing ? t('Add {name}', { name: titleOf(listing) }) : t('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: t('Any MCP server that speaks HTTP. Its tools are on once it is added.') })), _jsx(Field, { label: t('Name'), hint: listing ? t('Leave it empty to use the listing’s own.') : undefined, children: _jsx(Input, { value: name, onChangeText: setName, placeholder: listing ? titleOf(listing) : t('Docs'), "aria-label": t('Name') }) }), listing ? null : (_jsx(Field, { label: "URL", hint: t('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: t('Secret'), hint: t('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": t('Secret'), secureTextEntry: true }) }), secret ? (_jsx(Field, { label: t('Header'), children: _jsx(Input, { value: header, onChangeText: setHeader, "aria-label": t('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: t('Cancel') }), _jsx(Button, { size: "sm", disabled: working, onPress: () => void save(), children: t('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 = useLoad(() => tools(t, { source: 'mcp' }), [], [t, server.id]);
+    const { t } = useI18n();
+    const target = useTarget();
+    const list = useLoad(() => tools(target, { source: 'mcp' }), [], [target, 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('');
@@ -227,21 +237,25 @@ function Detail({ server, may, onClose, onDeleted }) {
         setBusy(true);
         setNote('');
         try {
-            await toggle(t, on, offNames);
+            await toggle(target, on, offNames);
             list.reload();
         }
         catch (e) {
-            setNote(say(e));
+            setNote(say(e, t));
         }
         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: "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) => {
+    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
+                                    ? server.header
+                                        ? t('A secret is sealed in KMS and sent in {header}.', { header: server.header })
+                                        : t('A secret is sealed in KMS and sent in its header.')
+                                    : t('No secret: it is called as it is.') })] })] }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { size: "$3", color: "$ink", flex: 1, children: t('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 ? t('Turn all on') : t('Turn all off') })) : null] }), list.loading && !list.value.length ? (_jsx(Soft, { children: t('Loading its tools…') })) : list.error && !list.value.length ? (_jsx(Failed, { error: list.error, onRetry: list.reload })) : !its.length ? (_jsx(Soft, { children: t('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 ? '' : '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);
+                    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": t('{name} on', { name: short }) })) : (_jsx(SizableText, { size: "$1", color: "$soft", children: x.activated ? t('On') : t('Off') }))] }, x.name));
+                }) })), _jsx(Line, { children: note || (may ? '' : t('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: t('Remove connector') }) })) : null, _jsx(Confirm, { what: server.name, says: t('Its tools leave your organization and every agent, and its sealed secret is destroyed.'), open: asking, onOpenChange: setAsking, onYes: async () => {
+                    await remove(target, server.id);
                     onDeleted();
                 } })] }));
 }