@hanzo/build 0.2.80 → 0.2.81

package/lib/customize/index.js

@@ -9,8 +9,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Skills and connectors ride into every run in the org, so adding, switching
  * and removing them is an org admin's and a member reads them; plugins and
  * agents are any member's.
+ *
+ * Its words are the reader's language (@hanzo/i18n `t`).
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { phrase } from '@hanzo/i18n';
+import { useI18n } from '@hanzo/i18n/react';
 import { BookOpen, Bot, Plug, Plus, Puzzle } from '@hanzogui/lucide-icons-2';
 import { Button, Input } from '@hanzo/ui';
 import { useCallback, useState } from 'react';
@@ -23,13 +27,42 @@ import { Skills } from './skills.js';
 import { Choice } from './ui.js';
 /** What every run in the org loads: an org admin's to add to, a member's to read. */
 export const ORG_KIT = ['skills', 'connectors'];
+/**
+ * Each tab's words, English and marked (`phrase`), drawn through `t`: its name,
+ * its line, its add control, its search and the search's hint, and, for a tab
+ * an org admin keeps (ORG_KIT), what a member is told.
+ */
 const LABEL = {
-    skills: { title: 'Skills', says: 'Know-how an agent reads before it works.', add: 'New skill', find: 'Search skills', icon: _jsx(BookOpen, { size: 15 }) },
-    connectors: { title: 'Connectors', says: 'Apps and tools an agent can call.', add: 'Add by URL', find: 'Search connectors', icon: _jsx(Plug, { size: 15 }) },
-    plugins: { title: 'Plugins', says: 'Connectors you build in TypeScript.', add: 'Build plugin', find: 'Search plugins', icon: _jsx(Puzzle, { size: 15 }) },
-    agents: { title: 'Agents', says: 'Agents with their own model, instructions and budget.', add: 'New agent', find: 'Search agents', icon: _jsx(Bot, { size: 15 }) },
+    skills: {
+        title: phrase('Skills'),
+        says: phrase('Know-how an agent reads before it works.'),
+        add: phrase('New skill'),
+        find: phrase('Search skills'),
+        typing: phrase('Search skills…'),
+        admin: phrase('Only an org admin can add or change skills. You can see what is on.'),
+        icon: _jsx(BookOpen, { size: 15 }),
+    },
+    connectors: {
+        title: phrase('Connectors'),
+        says: phrase('Apps and tools an agent can call.'),
+        add: phrase('Add by URL'),
+        find: phrase('Search connectors'),
+        typing: phrase('Search connectors…'),
+        admin: phrase('Only an org admin can add or change connectors. You can see what is on.'),
+        icon: _jsx(Plug, { size: 15 }),
+    },
+    plugins: { title: phrase('Plugins'), says: phrase('Connectors you build in TypeScript.'), add: phrase('Build plugin'), find: phrase('Search plugins'), typing: phrase('Search plugins…'), icon: _jsx(Puzzle, { size: 15 }) },
+    agents: {
+        title: phrase('Agents'),
+        says: phrase('Agents with their own model, instructions and budget.'),
+        add: phrase('New agent'),
+        find: phrase('Search agents'),
+        typing: phrase('Search agents…'),
+        icon: _jsx(Bot, { size: 15 }),
+    },
 };
 export function Customize({ tab, view: first }) {
+    const { t } = useI18n();
     const host = useHost();
     const [view, setView] = useState(first ?? 'discover');
     const [q, setQ] = useState('');
@@ -46,11 +79,11 @@ export function Customize({ tab, view: first }) {
     const pane = { view, q, adding, onAdding: setAdding, onView: setView, onCount };
     const kit = ORG_KIT.includes(tab);
     const may = Boolean(host.person) && (host.admin || !kit);
-    return (_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", "$max-md": { px: '$4', py: '$4' }, children: _jsxs(YStack, { width: "100%", maxW: 1080, mx: "auto", gap: "$4", children: [_jsxs(YStack, { gap: "$1", children: [_jsx(SizableText, { render: "h1", size: "$6", color: "$ink", children: host.sections ? LABEL[tab].title : 'Customize' }), _jsx(SizableText, { size: "$2", color: "$soft", children: host.sections ? LABEL[tab].says : 'What your agent can use in every run.' })] }), host.sections ? null : (_jsx(XStack, { role: "tablist", "aria-label": "Customize", gap: "$4", borderBottomWidth: 1, borderColor: "$borderColor", "$max-md": { gap: '$3' }, children: TABS.map((id) => {
+    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: host.sections ? t(LABEL[tab].title) : t('Customize') }), _jsx(SizableText, { size: "$2", color: "$soft", children: host.sections ? t(LABEL[tab].says) : t('What your agent can use in every run.') })] }), host.sections ? null : (_jsx(XStack, { role: "tablist", "aria-label": t('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));
-                    }) })), host.sections ? null : (_jsx(SizableText, { size: "$2", color: "$soft", children: LABEL[tab].says })), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Choice, { label: "Show", value: view, options: [
-                                { id: 'discover', label: 'Browse' },
-                                { id: 'yours', label: 'Yours', count },
-                            ], onChange: setView }), _jsx(XStack, { flex: 1 }), may ? (_jsxs(Button, { size: "sm", onPress: () => setAdding(true), children: [_jsx(Plus, { size: 14 }), " ", LABEL[tab].add] })) : null] }), _jsx(Input, { value: q, onChangeText: setQ, placeholder: `${LABEL[tab].find}…`, "aria-label": LABEL[tab].find }), host.person && kit && !host.admin ? (_jsxs(SizableText, { size: "$1", color: "$soft", children: ["Only an org admin can add or change ", LABEL[tab].title.toLowerCase(), ". You can see what is on."] })) : null, tab === 'skills' ? (_jsx(Skills, { ...pane })) : tab === 'connectors' ? (_jsx(Connectors, { ...pane })) : tab === 'plugins' ? (_jsx(Plugins, { ...pane })) : (_jsx(Agents, { ...pane }))] }) }));
+                        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: t(LABEL[id].title) })] }, id));
+                    }) })), host.sections ? null : (_jsx(SizableText, { size: "$2", color: "$soft", children: t(LABEL[tab].says) })), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Choice, { label: t('Show'), value: view, options: [
+                                { id: 'discover', label: t('Browse') },
+                                { id: 'yours', label: t('Yours'), count },
+                            ], onChange: setView }), _jsx(XStack, { flex: 1 }), may ? (_jsxs(Button, { size: "sm", onPress: () => setAdding(true), children: [_jsx(Plus, { size: 14 }), " ", t(LABEL[tab].add)] })) : null] }), _jsx(Input, { value: q, onChangeText: setQ, placeholder: t(LABEL[tab].typing), "aria-label": t(LABEL[tab].find) }), host.person && kit && !host.admin && LABEL[tab].admin ? (_jsx(SizableText, { size: "$1", color: "$soft", children: t(LABEL[tab].admin) })) : null, tab === 'skills' ? (_jsx(Skills, { ...pane })) : tab === 'connectors' ? (_jsx(Connectors, { ...pane })) : tab === 'plugins' ? (_jsx(Plugins, { ...pane })) : (_jsx(Agents, { ...pane }))] }) }));
 }

package/lib/customize/plugins.js

@@ -9,8 +9,12 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * Describe an API instead of writing the TypeScript and a model writes it; the
  * result opens to be read. A plugin carries no credential: it names the
  * connector whose credential it reads when it runs.
+ *
+ * Its words are the reader's language (@hanzo/i18n `t`); a plugin's name, its
+ * source and the bundler's reasons are drawn as given.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { useI18n } from '@hanzo/i18n/react';
 import { Puzzle } from '@hanzogui/lucide-icons-2';
 import { Button, Input, Textarea } from '@hanzo/ui';
 import { Code } from '@hanzo/ui/chat';
@@ -22,11 +26,12 @@ import { say } from './say.js';
 import { Choice, Confirm, day, Empty, Failed, Field, Grid, Line, Mark, matches, mono, Part, Sheet, Soft, Tile, useCount, Visitor } from './ui.js';
 const kb = (n) => (n < 1024 ? `${n} B` : `${(n / 1024).toFixed(1)} KB`);
 export function Plugins({ view, q, adding, onAdding, onView, onCount }) {
+    const { t } = useI18n();
     const host = useHost();
-    const t = useTarget();
+    const target = useTarget();
     const signed = Boolean(host.person);
-    const mine = useLoad(signed ? () => authored(t) : null, [], [t, signed]);
-    const mounts = useLoad(signed && view === 'discover' ? () => mounted(t) : null, [], [t, signed, view]);
+    const mine = useLoad(signed ? () => authored(target) : null, [], [target, signed]);
+    const mounts = useLoad(signed && view === 'discover' ? () => mounted(target) : null, [], [target, signed, view]);
     const [opened, setOpened] = useState(null);
     const [note, setNote] = useState('');
     useCount(mine.value.length, onCount);
@@ -37,27 +42,24 @@ export function Plugins({ view, q, adding, onAdding, onView, onCount }) {
                     setNote(said);
                     setOpened(p);
                 } })) : null, opened ? (_jsx(Source, { plugin: opened, onClose: () => setOpened(null), onDeleted: () => {
-                    setNote(`${opened.name} is deleted`);
+                    setNote(t('{name} is deleted', { name: opened.name }));
                     setOpened(null);
                     mine.reload();
                 } })) : null] }));
     if (!signed) {
-        return _jsx(Visitor, { children: view === 'discover' ? 'Sign in to browse plugins.' : 'Sign in to see your plugins.' });
+        return _jsx(Visitor, { children: view === 'discover' ? t('Sign in to browse plugins.') : t('Sign in to see your plugins.') });
     }
     if (view === 'discover') {
         const shown = mounts.value.filter((m) => matches(q, m.name, ...m.prefixes));
-        return (_jsxs(YStack, { gap: "$6", children: [_jsx(Line, { children: note }), _jsx(Part, { title: "Build your own", detail: "Write a connector in TypeScript, or describe an API and Hanzo writes it.", children: _jsx(XStack, { children: _jsx(Button, { size: "sm", onPress: () => onAdding(true), children: "Build a plugin" }) }) }), _jsx(Part, { title: "Built in", detail: "Part of Hanzo. Always on, nothing to add.", children: mounts.error && !mounts.value.length ? (_jsx(Failed, { error: mounts.error, onRetry: mounts.reload })) : mounts.loading && !mounts.value.length ? (_jsx(Soft, { children: "Loading built-in plugins\u2026" })) : !shown.length ? (_jsx(Soft, { children: mounts.value.length ? `Nothing built in matches “${q.trim()}”.` : 'Nothing built in is listed.' })) : (_jsxs(_Fragment, { children: [_jsxs(SizableText, { size: "$1", color: "$soft", children: [shown.length, " built in"] }), _jsx(Grid, { label: "Mounted subsystems", children: shown.map((m) => (_jsx(Tile, { title: m.name, detail: m.prefixes.join('  '), meta: m.enabled ? 'On' : 'Off', mark: _jsx(Mark, { name: m.name, icon: _jsx(Puzzle, { size: 15 }) }) }, m.name))) })] })) }), sheets] }));
+        return (_jsxs(YStack, { gap: "$6", children: [_jsx(Line, { children: note }), _jsx(Part, { title: t('Build your own'), detail: t('Write a connector in TypeScript, or describe an API and Hanzo writes it.'), children: _jsx(XStack, { children: _jsx(Button, { size: "sm", onPress: () => onAdding(true), children: t('Build a plugin') }) }) }), _jsx(Part, { title: t('Built in'), detail: t('Part of Hanzo. Always on, nothing to add.'), children: mounts.error && !mounts.value.length ? (_jsx(Failed, { error: mounts.error, onRetry: mounts.reload })) : mounts.loading && !mounts.value.length ? (_jsx(Soft, { children: t('Loading built-in plugins…') })) : !shown.length ? (_jsx(Soft, { children: mounts.value.length ? t('Nothing built in matches “{q}”.', { q: q.trim() }) : t('Nothing built in is listed.') })) : (_jsxs(_Fragment, { children: [_jsx(SizableText, { size: "$1", color: "$soft", children: t('{n} built in', { n: shown.length }) }), _jsx(Grid, { label: t('Mounted subsystems'), children: shown.map((m) => (_jsx(Tile, { title: m.name, detail: m.prefixes.join('  '), meta: m.enabled ? t('On') : t('Off'), mark: _jsx(Mark, { name: m.name, icon: _jsx(Puzzle, { size: 15 }) }) }, m.name))) })] })) }), sheets] }));
     }
     const shown = mine.value.filter((p) => matches(q, p.name, p.provider));
-    return (_jsxs(YStack, { gap: "$3", children: [_jsx(Line, { children: note }), mine.error && !mine.value.length ? (_jsx(Failed, { error: mine.error, onRetry: mine.reload })) : mine.loading && !mine.value.length ? (_jsx(Soft, { children: "Loading your plugins\u2026" })) : !mine.value.length ? (_jsx(Empty, { title: "No plugins yet", detail: "Write a connector in TypeScript, or describe an API and Hanzo writes it.", children: _jsx(Button, { size: "sm", onPress: () => onAdding(true), children: "Build a plugin" }) })) : !shown.length ? (_jsx(Soft, { children: `No plugin of yours matches “${q.trim()}”.` })) : (_jsx(Grid, { label: "Your plugins", children: shown.map((p) => (_jsx(Tile, { title: p.name, detail: p.provider ? `Reads the ${p.provider} connector’s credential when it runs.` : 'Needs no credential.', meta: day(p.built) ? `Built ${day(p.built)}` : undefined, mark: _jsx(Mark, { name: p.name }), onOpen: () => setOpened(p) }, p.id))) })), sheets] }));
+    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 plugins…') })) : !mine.value.length ? (_jsx(Empty, { title: t('No plugins yet'), detail: t('Write a connector in TypeScript, or describe an API and Hanzo writes it.'), children: _jsx(Button, { size: "sm", onPress: () => onAdding(true), children: t('Build a plugin') }) })) : !shown.length ? (_jsx(Soft, { children: t('No plugin of yours matches “{q}”.', { q: q.trim() }) })) : (_jsx(Grid, { label: t('Your plugins'), children: shown.map((p) => (_jsx(Tile, { title: p.name, detail: p.provider ? t('Reads the {provider} connector’s credential when it runs.', { provider: p.provider }) : t('Needs no credential.'), meta: day(p.built) ? t('Built {date}', { date: day(p.built) }) : undefined, mark: _jsx(Mark, { name: p.name }), onOpen: () => setOpened(p) }, p.id))) })), sheets] }));
 }
-const WAYS = [
-    { id: 'source', label: 'TypeScript' },
-    { id: 'spec', label: 'Describe an API' },
-];
 /** Build a plugin from its TypeScript, or from a description of the API it calls. */
 function Build({ onClose, onBuilt }) {
-    const t = useTarget();
+    const { t } = useI18n();
+    const target = useTarget();
     const [name, setName] = useState('');
     const [provider, setProvider] = useState('');
     const [way, setWay] = useState('source');
@@ -68,28 +70,38 @@ function Build({ onClose, onBuilt }) {
     const [note, setNote] = useState('');
     const go = async () => {
         setWorking(true);
-        setNote(way === 'spec' ? 'Writing and building it…' : 'Building it…');
+        setNote(way === 'spec' ? t('Writing and building it…') : t('Building it…'));
         try {
-            const out = await build(t, { name: name.trim(), provider, source: way === 'source' ? source : '', spec: way === 'spec' ? spec : '' });
-            onBuilt(out.plugin, `${out.plugin.name} built: ${kb(out.bytes)}${out.generated ? ', written from your description — read it below' : ''}.`);
+            const out = await build(target, { name: name.trim(), provider, source: way === 'source' ? source : '', spec: way === 'spec' ? spec : '' });
+            const built = { name: out.plugin.name, size: kb(out.bytes) };
+            onBuilt(out.plugin, out.generated ? t('{name} built: {size}, written from your description — read it below.', built) : t('{name} built: {size}.', built));
         }
         catch (e) {
-            setNote(say(e));
+            setNote(say(e, t));
         }
         finally {
             setWorking(false);
         }
     };
-    return (_jsxs(Sheet, { title: "Build a plugin", open: true, onOpenChange: (o) => !o && onClose(), width: 680, children: [_jsx(Field, { label: "Name", hint: "One lowercase word: letters, digits, _ or -.", children: _jsx(Input, { value: name, onChangeText: setName, "aria-label": "Name", autoCapitalize: "none" }) }), _jsx(Field, { label: "Connector", hint: "Optional. The connector whose key it uses when it runs; a plugin never holds a key itself.", children: _jsx(Input, { value: provider, onChangeText: setProvider, "aria-label": "Connector", autoCapitalize: "none" }) }), _jsx(Choice, { label: "Build from", value: way, options: WAYS, onChange: setWay }), _jsx(Field, { label: way === 'source' ? 'Source' : 'The API', hint: way === 'source'
-                    ? 'Kept only if it builds. A failed build says why.'
-                    : 'An OpenAPI document, or the endpoints in plain words. You read the TypeScript before it runs.', children: _jsx(Textarea, { value: way === 'source' ? source : spec, onChangeText: way === 'source' ? setSource : setSpec, "aria-label": way === 'source' ? 'Source' : 'The API', placeholder: way === 'source' ? 'export const acme = createProvider({ … })' : 'POST /v1/things creates a thing…', rows: 14, style: mono }) }), _jsx(Line, { children: note }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: onClose, children: "Cancel" }), _jsx(Button, { size: "sm", disabled: working, onPress: () => void go(), children: "Build" })] })] }));
+    return (_jsxs(Sheet, { title: t('Build a plugin'), open: true, onOpenChange: (o) => !o && onClose(), width: 680, children: [_jsx(Field, { label: t('Name'), hint: t('One lowercase word: letters, digits, _ or -.'), children: _jsx(Input, { value: name, onChangeText: setName, "aria-label": t('Name'), autoCapitalize: "none" }) }), _jsx(Field, { label: t('Connector'), hint: t('Optional. The connector whose key it uses when it runs; a plugin never holds a key itself.'), children: _jsx(Input, { value: provider, onChangeText: setProvider, "aria-label": t('Connector'), autoCapitalize: "none" }) }), _jsx(Choice, { label: t('Build from'), value: way, options: [
+                    { id: 'source', label: 'TypeScript' },
+                    { id: 'spec', label: t('Describe an API') },
+                ], onChange: setWay }), _jsx(Field, { label: way === 'source' ? t('Source') : t('The API'), hint: way === 'source'
+                    ? t('Kept only if it builds. A failed build says why.')
+                    : t('An OpenAPI document, or the endpoints in plain words. You read the TypeScript before it runs.'), children: _jsx(Textarea, { value: way === 'source' ? source : spec, onChangeText: way === 'source' ? setSource : setSpec, "aria-label": way === 'source' ? t('Source') : t('The API'), placeholder: way === 'source' ? 'export const acme = createProvider({ … })' : t('POST /v1/things creates a thing…'), rows: 14, style: mono }) }), _jsx(Line, { children: note }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: onClose, children: t('Cancel') }), _jsx(Button, { size: "sm", disabled: working, onPress: () => void go(), children: t('Build') })] })] }));
 }
 /** A built plugin's source, as the runtime will run it, and deleting it. */
 function Source({ plugin, onClose, onDeleted }) {
-    const t = useTarget();
+    const { t } = useI18n();
+    const target = useTarget();
     const [asking, setAsking] = useState(false);
-    return (_jsxs(Sheet, { title: plugin.name, open: true, onOpenChange: (o) => !o && onClose(), width: 760, children: [_jsxs(SizableText, { size: "$2", color: "$soft", children: [plugin.provider ? `Reads the ${plugin.provider} connector’s credential when it runs.` : 'Needs no credential.', day(plugin.built) ? ` Built ${day(plugin.built)}.` : ''] }), _jsx(Code, { language: "TypeScript", value: plugin.source, children: _jsx(SizableText, { size: "$1", color: "$ink", style: { ...mono, whiteSpace: 'pre' }, children: plugin.source }) }), _jsx(YStack, { items: "flex-start", children: _jsx(Button, { size: "sm", variant: "ghost", onPress: () => setAsking(true), children: "Delete plugin" }) }), _jsx(Confirm, { what: plugin.name, says: "The runtime can no longer load it.", open: asking, onOpenChange: setAsking, onYes: async () => {
-                    await remove(t, plugin.id);
+    return (_jsxs(Sheet, { title: plugin.name, open: true, onOpenChange: (o) => !o && onClose(), width: 760, children: [_jsx(SizableText, { size: "$2", color: "$soft", children: [
+                    plugin.provider ? t('Reads the {provider} connector’s credential when it runs.', { provider: plugin.provider }) : t('Needs no credential.'),
+                    day(plugin.built) ? t('Built {date}.', { date: day(plugin.built) }) : '',
+                ]
+                    .filter(Boolean)
+                    .join(' ') }), _jsx(Code, { language: "TypeScript", value: plugin.source, children: _jsx(SizableText, { size: "$1", color: "$ink", style: { ...mono, whiteSpace: 'pre' }, children: plugin.source }) }), _jsx(YStack, { items: "flex-start", children: _jsx(Button, { size: "sm", variant: "ghost", onPress: () => setAsking(true), children: t('Delete plugin') }) }), _jsx(Confirm, { what: plugin.name, says: t('The runtime can no longer load it.'), open: asking, onOpenChange: setAsking, onYes: async () => {
+                    await remove(target, plugin.id);
                     onDeleted();
                 } })] }));
 }

package/lib/customize/say.d.ts

@@ -1 +1,13 @@
-export declare function say(e: unknown): string;
+/**
+ * What a read or a write that failed tells a person: plain words, never the
+ * platform's internals. A refusal is read by its status; only a 400, 409 or
+ * 422 carries the platform's own sentence, because those name what was wrong
+ * with what was sent (a name taken, a build that failed and why). A sentence
+ * this client wrote itself (a name that does not fit) is said as written.
+ *
+ * Said in the reader's language: the screen hands its `t` (English without
+ * one). A sentence a module wrote is English and marked, so it goes through
+ * `t`; the platform's own words are no key and come back from it as given.
+ */
+import type { Say } from '@hanzo/i18n/react';
+export declare function say(e: unknown, t?: Say): string;

package/lib/customize/say.js

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

package/lib/customize/skills.js

@@ -7,8 +7,12 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * all adding is: the platform keeps no copy. Yours is the org's own skills —
  * written here, each with its switch — and the catalogue's skills it has added.
  * A skill written here is switched on when it is saved.
+ *
+ * Its words are the reader's language (@hanzo/i18n `t`); a skill's name,
+ * description and SKILL.md are the platform's or the org's, drawn as given.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { useI18n } from '@hanzo/i18n/react';
 import { BookOpen } from '@hanzogui/lucide-icons-2';
 import { Button, Input, Switch, Textarea } from '@hanzo/ui';
 import { Code } from '@hanzo/ui/chat';
@@ -21,14 +25,15 @@ import { say } from './say.js';
 import { Add, Confirm, day, Empty, Failed, Field, Grid, Line, Mark, matches, mono, Part, Sheet, Soft, Tile, useCount, Visitor } from './ui.js';
 const PAGE = 60;
 export function Skills({ view, q, adding, onAdding, onView, onCount }) {
+    const { t } = useI18n();
     const host = useHost();
-    const t = useTarget();
+    const target = useTarget();
     const signed = Boolean(host.person);
     // What every run in the org loads is an org admin's to change; a member reads it.
     const may = signed && host.admin;
-    const own = useLoad(signed ? () => authored(t) : null, [], [t, signed]);
-    const on = useLoad(signed ? () => active(t) : null, [], [t, signed]);
-    const shelf = useLoad(view === 'discover' ? () => brand(t) : null, null, [t.api, view]);
+    const own = useLoad(signed ? () => authored(target) : null, [], [target, signed]);
+    const on = useLoad(signed ? () => active(target) : null, [], [target, signed]);
+    const shelf = useLoad(view === 'discover' ? () => brand(target) : null, null, [target.api, view]);
     const [editing, setEditing] = useState(null);
     const [reading, setReading] = useState(null);
     const [busy, setBusy] = useState('');
@@ -43,12 +48,12 @@ export function Skills({ view, q, adding, onAdding, onView, onCount }) {
         setBusy(name);
         setNote('');
         try {
-            await toggle(t, next ? [tool(name)] : [], next ? [] : [tool(name)]);
+            await toggle(target, next ? [tool(name)] : [], next ? [] : [tool(name)]);
             on.reload();
-            setNote(next ? `${name} is on` : `${name} is off`);
+            setNote(next ? t('{name} is on', { name }) : t('{name} is off', { name }));
         }
         catch (e) {
-            setNote(say(e));
+            setNote(say(e, t));
         }
         finally {
             setBusy('');
@@ -64,20 +69,20 @@ export function Skills({ view, q, adding, onAdding, onView, onCount }) {
             own.reload();
             on.reload();
             onView('yours');
-            setNote(fresh ? `${s.name} is saved and on` : `${s.name} is saved`);
+            setNote(fresh ? t('{name} is saved and on', { name: s.name }) : t('{name} is saved', { name: s.name }));
         }, onDeleted: (name) => {
             setEditing(null);
             own.reload();
             on.reload();
-            setNote(`${name} is deleted`);
+            setNote(t('{name} is deleted', { name }));
         } })) : null;
     if (view === 'discover') {
         const all = shelf.value?.skills ?? [];
         const found = all.filter((e) => matches(q, e.name, e.description, e.product));
-        return (_jsxs(YStack, { gap: "$3", children: [_jsx(Line, { children: note }), _jsx(Part, { title: "From Hanzo", detail: "Add one and every run in your organization can use it.", children: shelf.error && !shelf.value ? (_jsx(Failed, { error: shelf.error, onRetry: shelf.reload })) : !shelf.value ? (_jsx(Soft, { children: "Loading skills\u2026" })) : !found.length ? (_jsx(Soft, { children: all.length ? `No skill matches “${q.trim()}”.` : 'There are no skills to add yet.' })) : (_jsxs(_Fragment, { children: [_jsx(SizableText, { size: "$1", color: "$soft", children: found.length === all.length ? `${all.length} skills` : `${found.length} of ${all.length} skills` }), _jsx(Grid, { label: "Skills to add", children: found.slice(0, shown).map((e) => (_jsx(Tile, { title: e.name, detail: e.description, meta: e.product, mark: _jsx(Mark, { name: e.name, icon: _jsx(BookOpen, { size: 15 }) }), onOpen: () => setReading(e), action: may ? _jsx(Add, { name: e.name, added: lit.has(tool(e.name)), busy: busy === e.name, onPress: () => void flip(e.name, true) }) : undefined }, e.name))) }), found.length > shown ? (_jsx(XStack, { justify: "center", children: _jsx(Button, { size: "sm", variant: "outline", onPress: () => setShown(shown + PAGE), children: "Show more" }) })) : null] })) }), reader, editor] }));
+        return (_jsxs(YStack, { gap: "$3", children: [_jsx(Line, { children: note }), _jsx(Part, { title: t('From Hanzo'), detail: t('Add one and every run in your organization can use it.'), children: shelf.error && !shelf.value ? (_jsx(Failed, { error: shelf.error, onRetry: shelf.reload })) : !shelf.value ? (_jsx(Soft, { children: t('Loading skills…') })) : !found.length ? (_jsx(Soft, { children: all.length ? t('No skill matches “{q}”.', { q: q.trim() }) : t('There are no skills to add yet.') })) : (_jsxs(_Fragment, { children: [_jsx(SizableText, { size: "$1", color: "$soft", children: found.length === all.length ? t('{n} skills', { n: all.length }) : t('{found} of {n} skills', { found: found.length, n: all.length }) }), _jsx(Grid, { label: t('Skills to add'), children: found.slice(0, shown).map((e) => (_jsx(Tile, { title: e.name, detail: e.description, meta: e.product, mark: _jsx(Mark, { name: e.name, icon: _jsx(BookOpen, { size: 15 }) }), onOpen: () => setReading(e), action: may ? _jsx(Add, { name: e.name, added: lit.has(tool(e.name)), busy: busy === e.name, onPress: () => void flip(e.name, true) }) : undefined }, e.name))) }), found.length > shown ? (_jsx(XStack, { justify: "center", children: _jsx(Button, { size: "sm", variant: "outline", onPress: () => setShown(shown + PAGE), children: t('Show more') }) })) : null] })) }), reader, editor] }));
     }
     if (!signed) {
-        return _jsx(Visitor, { children: "Sign in to see your skills." });
+        return _jsx(Visitor, { children: t('Sign in to see your skills.') });
     }
     const ownShown = own.value.filter((s) => matches(q, s.name, s.description));
     const addedShown = added.filter((x) => matches(q, nameOf(x.name), x.description));
@@ -85,9 +90,11 @@ export function Skills({ view, q, adding, onAdding, onView, onCount }) {
     return (_jsxs(YStack, { gap: "$5", children: [_jsx(Line, { children: note }), error && !own.value.length && !on.value.length ? (_jsx(Failed, { error: error, onRetry: () => {
                     own.reload();
                     on.reload();
-                } })) : (own.loading || on.loading) && !own.value.length && !on.value.length ? (_jsx(Soft, { children: "Loading your skills\u2026" })) : !own.value.length && !added.length ? (_jsxs(Empty, { title: "No skills yet", detail: may ? 'Add one from Hanzo, or write your own.' : 'An org admin adds skills. Browse what there is.', children: [_jsx(Button, { size: "sm", variant: "outline", onPress: () => onView('discover'), children: "Browse skills" }), may ? (_jsx(Button, { size: "sm", onPress: () => onAdding(true), children: "Write a skill" })) : null] })) : !ownShown.length && !addedShown.length ? (_jsx(Soft, { children: `No skill of yours matches “${q.trim()}”.` })) : (_jsxs(_Fragment, { children: [ownShown.length ? (_jsx(Part, { title: "Made by your team", detail: "Off keeps a skill but leaves it out of every run.", children: _jsx(Grid, { label: "Your skills", children: ownShown.map((s) => (_jsx(Tile, { title: s.name, detail: s.description || firstLine(s.content), meta: [s.source ? `From ${s.source}` : day(s.created) ? `Saved ${day(s.created)}` : '', s.admitted ? '' : 'Not in runs until an admin saves it'].filter(Boolean).join(' · ') || undefined, mark: _jsx(Mark, { name: s.name }), onOpen: () => setEditing(s), action: may ? (_jsx(Switch, { checked: lit.has(tool(s.name)), disabled: busy === s.name, onCheckedChange: (v) => void flip(s.name, v), "aria-label": `${s.name} on` })) : (_jsx(SizableText, { size: "$1", color: "$soft", children: lit.has(tool(s.name)) ? 'On' : 'Off' })) }, s.id))) }) })) : null, addedShown.length ? (_jsx(Part, { title: "Added from Hanzo", detail: "On for every run in your organization.", children: _jsx(Grid, { label: "Added skills", children: addedShown.map((x) => {
+                } })) : (own.loading || on.loading) && !own.value.length && !on.value.length ? (_jsx(Soft, { children: t('Loading your skills…') })) : !own.value.length && !added.length ? (_jsxs(Empty, { title: t('No skills yet'), detail: may ? t('Add one from Hanzo, or write your own.') : t('An org admin adds skills. Browse what there is.'), children: [_jsx(Button, { size: "sm", variant: "outline", onPress: () => onView('discover'), children: t('Browse skills') }), may ? (_jsx(Button, { size: "sm", onPress: () => onAdding(true), children: t('Write a skill') })) : null] })) : !ownShown.length && !addedShown.length ? (_jsx(Soft, { children: t('No skill of yours matches “{q}”.', { q: q.trim() }) })) : (_jsxs(_Fragment, { children: [ownShown.length ? (_jsx(Part, { title: t('Made by your team'), detail: t('Off keeps a skill but leaves it out of every run.'), children: _jsx(Grid, { label: t('Your skills'), children: ownShown.map((s) => (_jsx(Tile, { title: s.name, detail: s.description || firstLine(s.content), meta: [s.source ? t('From {source}', { source: s.source }) : day(s.created) ? t('Saved {date}', { date: day(s.created) }) : '', s.admitted ? '' : t('Not in runs until an admin saves it')]
+                                    .filter(Boolean)
+                                    .join(' · ') || undefined, mark: _jsx(Mark, { name: s.name }), onOpen: () => setEditing(s), action: may ? (_jsx(Switch, { checked: lit.has(tool(s.name)), disabled: busy === s.name, onCheckedChange: (v) => void flip(s.name, v), "aria-label": t('{name} on', { name: s.name }) })) : (_jsx(SizableText, { size: "$1", color: "$soft", children: lit.has(tool(s.name)) ? t('On') : t('Off') })) }, s.id))) }) })) : null, addedShown.length ? (_jsx(Part, { title: t('Added from Hanzo'), detail: t('On for every run in your organization.'), children: _jsx(Grid, { label: t('Added skills'), children: addedShown.map((x) => {
                                 const name = nameOf(x.name);
-                                return (_jsx(Tile, { title: name, detail: x.description, mark: _jsx(Mark, { name: name, icon: _jsx(BookOpen, { size: 15 }) }), onOpen: () => setReading({ name, description: x.description, product: '' }), action: may ? (_jsx(Button, { size: "sm", variant: "ghost", disabled: busy === name, onPress: () => void flip(name, false), "aria-label": `Remove ${name}`, children: "Remove" })) : undefined }, x.name));
+                                return (_jsx(Tile, { title: name, detail: x.description, mark: _jsx(Mark, { name: name, icon: _jsx(BookOpen, { size: 15 }) }), onOpen: () => setReading({ name, description: x.description, product: '' }), action: may ? (_jsx(Button, { size: "sm", variant: "ghost", disabled: busy === name, onPress: () => void flip(name, false), "aria-label": t('Remove {name}', { name }), children: t('Remove') })) : undefined }, x.name));
                             }) }) })) : null] })), reader, editor] }));
 }
 const firstLine = (md) => md
@@ -96,13 +103,15 @@ const firstLine = (md) => md
     .find(Boolean) ?? '';
 /** One catalogue skill: what it is, its SKILL.md, and adding or removing it. */
 function Reader({ skill, added, signed, busy, onFlip, onClose, }) {
-    const t = useTarget();
-    const doc = useLoad(() => document(t, skill.name), '', [t.api, skill.name]);
-    return (_jsxs(Sheet, { title: skill.name, open: true, onOpenChange: (o) => !o && onClose(), width: 720, children: [skill.description ? (_jsx(SizableText, { size: "$2", color: "$soft", children: skill.description })) : null, signed ? (_jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(Button, { size: "sm", variant: added ? 'outline' : 'default', disabled: busy, onPress: () => onFlip(!added), children: added ? 'Remove' : 'Add to your skills' }), _jsx(SizableText, { size: "$1", color: "$soft", flex: 1, children: added ? 'On for your organization.' : 'Every run in your organization can use it once added.' })] })) : null, doc.error ? (_jsx(Failed, { error: doc.error, onRetry: doc.reload })) : doc.loading && !doc.value ? (_jsx(Soft, { children: "Loading SKILL.md\u2026" })) : (_jsx(Code, { language: "SKILL.md", value: doc.value, children: _jsx(SizableText, { size: "$1", color: "$ink", style: { ...mono, whiteSpace: 'pre-wrap' }, children: doc.value }) }))] }));
+    const { t } = useI18n();
+    const target = useTarget();
+    const doc = useLoad(() => document(target, skill.name), '', [target.api, skill.name]);
+    return (_jsxs(Sheet, { title: skill.name, open: true, onOpenChange: (o) => !o && onClose(), width: 720, children: [skill.description ? (_jsx(SizableText, { size: "$2", color: "$soft", children: skill.description })) : null, signed ? (_jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(Button, { size: "sm", variant: added ? 'outline' : 'default', disabled: busy, onPress: () => onFlip(!added), children: added ? t('Remove') : t('Add to your skills') }), _jsx(SizableText, { size: "$1", color: "$soft", flex: 1, children: added ? t('On for your organization.') : t('Every run in your organization can use it once added.') })] })) : null, doc.error ? (_jsx(Failed, { error: doc.error, onRetry: doc.reload })) : doc.loading && !doc.value ? (_jsx(Soft, { children: t('Loading SKILL.md…') })) : (_jsx(Code, { language: "SKILL.md", value: doc.value, children: _jsx(SizableText, { size: "$1", color: "$ink", style: { ...mono, whiteSpace: 'pre-wrap' }, children: doc.value }) }))] }));
 }
 /** Write a skill, or revise one of the org's own. Its name is its id, so a saved skill keeps its name. */
 function Editor({ skill, may, onClose, onSaved, onDeleted, }) {
-    const t = useTarget();
+    const { t } = useI18n();
+    const target = useTarget();
     const [name, setName] = useState(skill?.name ?? '');
     const [description, setDescription] = useState(skill?.description ?? '');
     const [content, setContent] = useState(skill?.content ?? '');
@@ -113,21 +122,21 @@ function Editor({ skill, may, onClose, onSaved, onDeleted, }) {
         setWorking(true);
         setNote('');
         try {
-            const saved = await write(t, { name: name.trim(), description: description.trim(), content });
+            const saved = await write(target, { name: name.trim(), description: description.trim(), content });
             // A new skill is switched on as it is saved; a revised one keeps its switch.
             if (!skill)
-                await toggle(t, [tool(saved.name)]);
+                await toggle(target, [tool(saved.name)]);
             onSaved(saved, !skill);
         }
         catch (e) {
-            setNote(say(e));
+            setNote(say(e, t));
         }
         finally {
             setWorking(false);
         }
     };
-    return (_jsxs(Sheet, { title: skill ? skill.name : 'New skill', open: true, onOpenChange: (o) => !o && onClose(), width: 680, children: [skill?.source ? (_jsxs(SizableText, { size: "$2", color: "$soft", children: ["Read from ", skill.source, ". The next push of that repository replaces what is saved here."] })) : null, _jsx(Field, { label: "Name", hint: skill ? 'A skill keeps its name. Save under another name to make a new one.' : 'One lowercase word: letters, digits, _ or -.', children: _jsx(Input, { value: name, onChangeText: setName, "aria-label": "Name", disabled: Boolean(skill), autoCapitalize: "none" }) }), _jsx(Field, { label: "Description", hint: "One line. An agent reads it to decide whether it needs the skill.", children: _jsx(Input, { value: description, onChangeText: setDescription, placeholder: "How we triage an incoming issue", "aria-label": "Description" }) }), _jsx(Field, { label: "SKILL.md", hint: "Markdown: what it is for, when to use it, and the steps.", children: _jsx(Textarea, { value: content, onChangeText: setContent, placeholder: '# Triage\n\n1. Read the issue…', "aria-label": "SKILL.md", rows: 14, style: mono }) }), _jsx(Line, { children: note || (may ? '' : 'Only an org admin can write or delete skills.') }), _jsxs(XStack, { gap: "$2", items: "center", children: [skill && may ? (_jsx(Button, { size: "sm", variant: "ghost", onPress: () => setAsking(true), children: "Delete" })) : null, _jsx(XStack, { flex: 1 }), _jsx(Button, { size: "sm", variant: "ghost", onPress: onClose, children: may ? 'Cancel' : 'Close' }), may ? (_jsx(Button, { size: "sm", disabled: working, onPress: () => void save(), children: "Save" })) : null] }), skill ? (_jsx(Confirm, { what: skill.name, says: "The skill leaves your organization and every agent that names it.", open: asking, onOpenChange: setAsking, onYes: async () => {
-                    await remove(t, skill.id);
+    return (_jsxs(Sheet, { title: skill ? skill.name : t('New skill'), open: true, onOpenChange: (o) => !o && onClose(), width: 680, children: [skill?.source ? (_jsx(SizableText, { size: "$2", color: "$soft", children: t('Read from {source}. The next push of that repository replaces what is saved here.', { source: skill.source }) })) : null, _jsx(Field, { label: t('Name'), hint: skill ? t('A skill keeps its name. Save under another name to make a new one.') : t('One lowercase word: letters, digits, _ or -.'), children: _jsx(Input, { value: name, onChangeText: setName, "aria-label": t('Name'), disabled: Boolean(skill), autoCapitalize: "none" }) }), _jsx(Field, { label: t('Description'), hint: t('One line. An agent reads it to decide whether it needs the skill.'), children: _jsx(Input, { value: description, onChangeText: setDescription, placeholder: t('How we triage an incoming issue'), "aria-label": t('Description') }) }), _jsx(Field, { label: "SKILL.md", hint: t('Markdown: what it is for, when to use it, and the steps.'), children: _jsx(Textarea, { value: content, onChangeText: setContent, placeholder: t('# Triage\n\n1. Read the issue…'), "aria-label": "SKILL.md", rows: 14, fontFamily: "$mono" }) }), _jsx(Line, { children: note || (may ? '' : t('Only an org admin can write or delete skills.')) }), _jsxs(XStack, { gap: "$2", items: "center", children: [skill && may ? (_jsx(Button, { size: "sm", variant: "ghost", onPress: () => setAsking(true), children: t('Delete') })) : null, _jsx(XStack, { flex: 1 }), _jsx(Button, { size: "sm", variant: "ghost", onPress: onClose, children: may ? t('Cancel') : t('Close') }), may ? (_jsx(Button, { size: "sm", disabled: working, onPress: () => void save(), children: t('Save') })) : null] }), skill ? (_jsx(Confirm, { what: skill.name, says: t('The skill leaves your organization and every agent that names it.'), open: asking, onOpenChange: setAsking, onYes: async () => {
+                    await remove(target, skill.id);
                     onDeleted(skill.name);
                 } })) : null] }));
 }

package/lib/customize/ui.d.ts

@@ -2,10 +2,6 @@ import { type ReactNode } from 'react';
 export declare const mono: {
     fontFamily: string;
 };
-/** A button that holds a card's text reads from the left, not from the middle a button centres it in. */
-export declare const left: {
-    readonly textAlign: 'left';
-};
 /** Which half of a tab: what there is to browse and add (first), or what the org already has. */
 export type View = 'discover' | 'yours';
 /** What the shell hands a tab: which half, the search, the Add dialog's state, and where to say how many are yours. */
@@ -55,13 +51,13 @@ export declare function Featured({ title, detail, meta, mark, action, onOpen }:
     action?: ReactNode;
     onOpen: () => void;
 }): import("react").JSX.Element;
-/** A card's add control: Add while it is not yours, Added once it is. */
-export declare function Add({ name, added, busy, onPress, label }: {
+/** A card's add control: Add (Use, for a template one is made from) while it is not yours, Added once it is. */
+export declare function Add({ name, added, busy, onPress, use }: {
     name: string;
     added: boolean;
     busy?: boolean;
     onPress: () => void;
-    label?: string;
+    use?: boolean;
 }): import("react").JSX.Element;
 /** A dialog with a title, a close control and a body that scrolls inside the window. */
 export declare function Sheet({ title, open, onOpenChange, width, children }: {
@@ -71,7 +67,7 @@ export declare function Sheet({ title, open, onOpenChange, width, children }: {
     width?: number;
     children: ReactNode;
 }): import("react").JSX.Element;
-/** Asks before a delete; says what goes with it. */
+/** Asks before a delete; says what goes with it. `what` is the thing's name, `says` comes already said. */
 export declare function Confirm({ what, says, open, onOpenChange, onYes }: {
     what: string;
     says: string;
@@ -116,7 +112,7 @@ export declare function Field({ label, hint, children }: {
     hint?: string;
     children: ReactNode;
 }): import("react").JSX.Element;
-/** Two or three choices side by side; the chosen one is filled. A count, when one is given, follows its label. */
+/** Two or three choices side by side; the chosen one is filled. A count, when one is given, follows its label. Labels come already said. */
 export declare function Choice<T extends string>({ value, options, onChange, label, }: {
     value: T;
     options: readonly {