@hanzo/build 0.2.79 → 0.2.81

package/lib/settings/memory.js

@@ -4,11 +4,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * first. Each can be forgotten, and anything said in the box is remembered as
  * written. The memories are the person's own; nobody else in the organization
  * reads them.
+ *
+ * Its words are the reader's language (@hanzo/i18n `t`); a memory is drawn as
+ * it was said.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { useI18n } from '@hanzo/i18n/react';
 import { Trash2 } from '@hanzogui/lucide-icons-2';
 import { Button, Input } from '@hanzo/ui';
 import { useState } from 'react';
+import { told } from '../api/call.js';
 import { forget, memories, remember } from '../api/memory.js';
 import { useRead } from '../data.js';
 import { useHost, useTarget } from '../host.js';
@@ -19,15 +24,16 @@ const day = (at) => {
     return Number.isNaN(d.getTime()) ? '' : d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
 };
 export function Memory() {
+    const { t } = useI18n();
     const host = useHost();
-    const t = useTarget();
+    const target = useTarget();
     const signed = Boolean(host.person);
-    const list = useRead(signed ? () => memories(t) : null, [], [t, signed]);
+    const list = useRead(signed ? () => memories(target) : null, [], [target, signed]);
     const [said, setSaid] = useState('');
     const [busy, setBusy] = useState('');
     const [note, setNote] = useState('');
     if (!signed) {
-        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Memory" }), _jsx(Soft, { children: "Sign in to see what Hanzo remembers." })] }));
+        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: t('Memory') }), _jsx(Soft, { children: t('Sign in to see what Hanzo remembers.') })] }));
     }
     const act = async (what, run, done) => {
         setBusy(what);
@@ -39,7 +45,7 @@ export function Memory() {
             return true;
         }
         catch (e) {
-            setNote(e.message);
+            setNote(told(e, t));
             return false;
         }
         finally {
@@ -50,7 +56,7 @@ export function Memory() {
         const words = said.trim();
         if (!words)
             return;
-        void act('remember', () => remember(t, words), 'Remembered').then((took) => took && setSaid(''));
+        void act('remember', () => remember(target, words), t('Remembered')).then((took) => took && setSaid(''));
     };
-    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Memory", detail: "What Hanzo remembers about you here, to carry from one run to the next. Only you see it." }), _jsx(Group, { title: "Tell Hanzo what to remember or change", children: _jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(YStack, { flex: 1, minW: 0, children: _jsx(Input, { value: said, onChangeText: setSaid, onSubmitEditing: keep, "aria-label": "Tell Hanzo what to remember or change", placeholder: "I prefer small pull requests, one change each." }) }), _jsx(Button, { size: "sm", disabled: !said.trim() || busy !== '', onPress: keep, children: "Remember" })] }) }), _jsx(Group, { title: "What Hanzo remembers", detail: list.value.length ? `${list.value.length} ${list.value.length === 1 ? 'memory' : 'memories'}, newest first.` : undefined, children: list.error ? (_jsx(Soft, { children: list.error.message })) : list.loading && !list.value.length ? (_jsx(Soft, { children: "Reading memories\u2026" })) : !list.value.length ? (_jsx(Soft, { children: "Nothing yet. What you tell Hanzo to remember shows here." })) : (_jsx(Card, { children: list.value.map((m, i) => (_jsxs(XStack, { items: "flex-start", gap: "$3", px: "$3", py: "$2.5", borderTopWidth: i ? 1 : 0, borderColor: "$borderColor", children: [_jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { size: "$2", color: "$ink", children: m.content }), _jsx(SizableText, { size: "$1", color: "$soft", children: [m.kind, day(m.updated)].filter(Boolean).join(' · ') })] }), _jsx(Button, { size: "icon-sm", variant: "ghost", "aria-label": `Forget ${m.content.slice(0, 60)}`, disabled: busy !== '', onPress: () => void act(m.id, () => forget(t, m.id), 'Forgotten'), children: _jsx(Trash2, { size: 14 }) })] }, m.id))) })) }), _jsx(Note, { children: note })] }));
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: t('Memory'), detail: t('What Hanzo remembers about you here, to carry from one run to the next. Only you see it.') }), _jsx(Group, { title: t('Tell Hanzo what to remember or change'), children: _jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(YStack, { flex: 1, minW: 0, children: _jsx(Input, { value: said, onChangeText: setSaid, onSubmitEditing: keep, "aria-label": t('Tell Hanzo what to remember or change'), placeholder: t('I prefer small pull requests, one change each.') }) }), _jsx(Button, { size: "sm", disabled: !said.trim() || busy !== '', onPress: keep, children: t('Remember') })] }) }), _jsx(Group, { title: t('What Hanzo remembers'), detail: list.value.length ? (list.value.length === 1 ? t('1 memory, newest first.') : t('{n} memories, newest first.', { n: list.value.length })) : undefined, children: list.error ? (_jsx(Soft, { children: told(list.error, t) })) : list.loading && !list.value.length ? (_jsx(Soft, { children: t('Reading memories…') })) : !list.value.length ? (_jsx(Soft, { children: t('Nothing yet. What you tell Hanzo to remember shows here.') })) : (_jsx(Card, { children: list.value.map((m, i) => (_jsxs(XStack, { items: "flex-start", gap: "$3", px: "$3", py: "$2.5", borderTopWidth: i ? 1 : 0, borderColor: "$borderColor", children: [_jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { size: "$2", color: "$ink", children: m.content }), _jsx(SizableText, { size: "$1", color: "$soft", children: [m.kind, day(m.updated)].filter(Boolean).join(' · ') })] }), _jsx(Button, { size: "icon-sm", variant: "ghost", "aria-label": t('Forget {memory}', { memory: m.content.slice(0, 60) }), disabled: busy !== '', onPress: () => void act(m.id, () => forget(target, m.id), t('Forgotten')), children: _jsx(Trash2, { size: 14 }) })] }, m.id))) })) }), _jsx(Note, { children: note })] }));
 }

package/lib/settings/notifications.js

@@ -4,21 +4,27 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * every matching event is POSTed to, signed with a secret shown once, when the
  * webhook is added. A test sends one signed event now; the log says what each
  * delivery got back.
+ *
+ * Its words are the reader's language (@hanzo/i18n `t`); an address, an event
+ * pattern, a description and what an endpoint answered are drawn as given.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { useI18n } from '@hanzo/i18n/react';
 import { Copy, Plus, Webhook, X } from '@hanzogui/lucide-icons-2';
 import { Button, Input } from '@hanzo/ui';
 import { useState } from 'react';
+import { told } from '../api/call.js';
 import { add, deliveries, endpoints, patterns, refuse, remove, test } from '../api/webhooks.js';
 import { useRead } from '../data.js';
 import { useHost, useTarget } from '../host.js';
 import { Card, day, Field, Group, Heading, Note, Row, Soft } from './ui.js';
 const mono = { fontFamily: 'var(--f-mono, ui-monospace, monospace)' };
 export function Notifications() {
+    const { t } = useI18n();
     const host = useHost();
-    const t = useTarget();
+    const target = useTarget();
     const signed = Boolean(host.person);
-    const list = useRead(signed ? () => endpoints(t) : null, [], [t, signed]);
+    const list = useRead(signed ? () => endpoints(target) : null, [], [target, signed]);
     const [adding, setAdding] = useState(false);
     const [url, setUrl] = useState('');
     const [events, setEvents] = useState('');
@@ -28,7 +34,7 @@ export function Notifications() {
     const [working, setWorking] = useState(false);
     const [note, setNote] = useState('');
     if (!signed) {
-        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Notifications" }), _jsx(Soft, { children: "Sign in to see this organization\u2019s webhooks." })] }));
+        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: t('Notifications') }), _jsx(Soft, { children: t('Sign in to see this organization’s webhooks.') })] }));
     }
     const act = async (what) => {
         setWorking(true);
@@ -37,7 +43,7 @@ export function Notifications() {
             setNote(await what());
         }
         catch (e) {
-            setNote(e.message);
+            setNote(told(e, t));
         }
         finally {
             setWorking(false);
@@ -47,34 +53,39 @@ export function Notifications() {
         const draft = { url, events: patterns(events), description };
         const why = refuse(draft);
         if (why) {
-            setNote(why);
+            setNote(t(why));
             return;
         }
         void act(async () => {
-            const e = await add(t, draft);
+            const e = await add(target, draft);
             setSecret(e.secret);
             setAdding(false);
             setUrl('');
             setEvents('');
             setDescription('');
             list.reload();
-            return `${e.url} is added`;
+            return t('{url} is added', { url: e.url });
         });
     };
     const trial = (e) => void act(async () => {
-        const r = await test(t, e.id);
+        const r = await test(target, e.id);
         if (log?.id === e.id)
-            setLog({ id: e.id, rows: await deliveries(t, e.id) });
+            setLog({ id: e.id, rows: await deliveries(target, e.id) });
+        // What the endpoint answered is its own; the sentence around it is ours.
         return r.delivered
-            ? `The test reached ${e.url}: ${r.status} in ${r.ms} ms`
-            : `The test did not reach ${e.url}: ${r.error || (r.status ? `it answered ${r.status}` : 'no answer')}`;
+            ? t('The test reached {url}: {status} in {ms} ms', { url: e.url, status: r.status, ms: r.ms })
+            : r.error
+                ? t('The test did not reach {url}: {error}', { url: e.url, error: r.error })
+                : r.status
+                    ? t('The test did not reach {url}: it answered {status}', { url: e.url, status: r.status })
+                    : t('The test did not reach {url}: no answer', { url: e.url });
     });
     const drop = (e) => void act(async () => {
-        await remove(t, e.id);
+        await remove(target, e.id);
         if (log?.id === e.id)
             setLog(null);
         list.reload();
-        return `${e.url} is deleted`;
+        return t('{url} is deleted', { url: e.url });
     });
     const show = (e) => {
         if (log?.id === e.id) {
@@ -82,16 +93,18 @@ export function Notifications() {
             return;
         }
         void act(async () => {
-            setLog({ id: e.id, rows: await deliveries(t, e.id) });
+            setLog({ id: e.id, rows: await deliveries(target, e.id) });
             return '';
         });
     };
-    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Notifications", detail: `Webhooks: events in ${host.org ?? 'this organization'}, POSTed and signed to an address you run.`, action: adding || !host.admin ? undefined : (_jsxs(Button, { size: "sm", variant: "outline", onPress: () => setAdding(true), children: [_jsx(Plus, { size: 14 }), " Add webhook"] })) }), adding ? (_jsxs(YStack, { gap: "$3", p: "$4", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", children: [_jsx(Field, { label: "Endpoint URL", hint: "https only.", children: _jsx(Input, { value: url, onChangeText: setUrl, placeholder: "https://example.com/hooks/hanzo", "aria-label": "Endpoint URL", autoCapitalize: "none", inputMode: "url" }) }), _jsx(Field, { label: "Events", hint: "Subject patterns, comma separated, such as commerce.order.> \u2014 leave empty for every event.", children: _jsx(Input, { value: events, onChangeText: setEvents, placeholder: "commerce.order.>, event.>", "aria-label": "Events", autoCapitalize: "none" }) }), _jsx(Field, { label: "Description", children: _jsx(Input, { value: description, onChangeText: setDescription, placeholder: "What this endpoint is for", "aria-label": "Description" }) }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => setAdding(false), children: "Cancel" }), _jsx(Button, { size: "sm", disabled: working || !url.trim(), onPress: create, children: "Add webhook" })] })] })) : null, secret ? (_jsxs(YStack, { gap: "$2", p: "$4", borderWidth: 1, borderColor: "$ink", rounded: "$3", children: [_jsx(SizableText, { size: "$2", color: "$ink", children: "Signing secret" }), _jsx(SizableText, { size: "$1", color: "$soft", children: "Shown this once. Keep it where your endpoint checks each delivery\u2019s signature." }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { flex: 1, size: "$2", color: "$ink", style: { ...mono, wordBreak: 'break-all' }, "aria-label": "Signing secret", children: secret }), _jsxs(Button, { size: "sm", variant: "outline", onPress: () => void navigator.clipboard?.writeText(secret).then(() => setNote('The secret is copied')), children: [_jsx(Copy, { size: 14 }), " Copy"] }), _jsx(XStack, { render: "button", "aria-label": "Hide the secret", p: "$1", onPress: () => setSecret(''), children: _jsx(X, { size: 14 }) })] })] })) : null, _jsx(Group, { title: "Webhooks", children: list.error ? (_jsx(Soft, { children: list.error.message })) : list.loading && !list.value.length ? (_jsx(Soft, { children: "Reading webhooks\u2026" })) : list.value.length === 0 ? (_jsx(Card, { children: _jsx(Soft, { children: "No webhooks yet." }) })) : (_jsx(Card, { children: list.value.map((e, i) => (_jsxs(YStack, { borderTopWidth: i ? 1 : 0, borderColor: "$borderColor", children: [_jsx(Row, { first: true, mono: true, leading: _jsx(Webhook, { size: 16 }), title: e.url, detail: [
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: t('Notifications'), detail: host.org
+                    ? t('Webhooks: events in {org}, POSTed and signed to an address you run.', { org: host.org })
+                    : t('Webhooks: events in this organization, POSTed and signed to an address you run.'), action: adding || !host.admin ? undefined : (_jsxs(Button, { size: "sm", variant: "outline", onPress: () => setAdding(true), children: [_jsx(Plus, { size: 14 }), " ", t('Add webhook')] })) }), adding ? (_jsxs(YStack, { gap: "$3", p: "$4", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", children: [_jsx(Field, { label: t('Endpoint URL'), hint: t('https only.'), children: _jsx(Input, { value: url, onChangeText: setUrl, placeholder: "https://example.com/hooks/hanzo", "aria-label": t('Endpoint URL'), autoCapitalize: "none", inputMode: "url" }) }), _jsx(Field, { label: t('Events'), hint: t('Subject patterns, comma separated, such as {example} — leave empty for every event.', { example: 'commerce.order.>' }), children: _jsx(Input, { value: events, onChangeText: setEvents, placeholder: "commerce.order.>, event.>", "aria-label": t('Events'), autoCapitalize: "none" }) }), _jsx(Field, { label: t('Description'), children: _jsx(Input, { value: description, onChangeText: setDescription, placeholder: t('What this endpoint is for'), "aria-label": t('Description') }) }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => setAdding(false), children: t('Cancel') }), _jsx(Button, { size: "sm", disabled: working || !url.trim(), onPress: create, children: t('Add webhook') })] })] })) : null, secret ? (_jsxs(YStack, { gap: "$2", p: "$4", borderWidth: 1, borderColor: "$ink", rounded: "$3", children: [_jsx(SizableText, { size: "$2", color: "$ink", children: t('Signing secret') }), _jsx(SizableText, { size: "$1", color: "$soft", children: t('Shown this once. Keep it where your endpoint checks each delivery’s signature.') }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { flex: 1, size: "$2", color: "$ink", fontFamily: "$mono", "$platform-web": { wordBreak: 'break-all' }, "aria-label": t('Signing secret'), children: secret }), _jsxs(Button, { size: "sm", variant: "outline", onPress: () => void navigator.clipboard?.writeText(secret).then(() => setNote(t('The secret is copied'))), children: [_jsx(Copy, { size: 14 }), " ", t('Copy')] }), _jsx(XStack, { render: "button", "aria-label": t('Hide the secret'), p: "$1", onPress: () => setSecret(''), children: _jsx(X, { size: 14 }) })] })] })) : null, _jsx(Group, { title: t('Webhooks'), children: list.error ? (_jsx(Soft, { children: told(list.error, t) })) : list.loading && !list.value.length ? (_jsx(Soft, { children: t('Reading webhooks…') })) : list.value.length === 0 ? (_jsx(Card, { children: _jsx(Soft, { children: t('No webhooks yet.') }) })) : (_jsx(Card, { children: list.value.map((e, i) => (_jsxs(YStack, { borderTopWidth: i ? 1 : 0, borderColor: "$borderColor", children: [_jsx(Row, { first: true, mono: true, leading: _jsx(Webhook, { size: 16 }), title: e.url, detail: [
                                     e.description,
-                                    e.events.length ? e.events.join(', ') : 'every event',
-                                    e.status === 'disabled' ? 'disabled' : '',
-                                    `${e.deliveries} delivered, ${e.failures} failed this week`,
+                                    e.events.length ? e.events.join(', ') : t('every event'),
+                                    e.status === 'disabled' ? t('disabled') : '',
+                                    t('{delivered} delivered, {failed} failed this week', { delivered: e.deliveries, failed: e.failures }),
                                 ]
                                     .filter(Boolean)
-                                    .join(' · '), trailing: host.admin ? (_jsx(XStack, { render: "button", "aria-label": `Delete ${e.url}`, p: "$1", onPress: () => drop(e), children: _jsx(X, { size: 14 }) })) : undefined }), _jsxs(XStack, { gap: "$2", px: "$3", pb: "$2.5", flexWrap: "wrap", children: [host.admin ? (_jsx(Button, { size: "sm", variant: "outline", disabled: working, "aria-label": `Send a test to ${e.url}`, onPress: () => trial(e), children: "Send test" })) : null, _jsx(Button, { size: "sm", variant: "ghost", disabled: working, "aria-label": `Deliveries to ${e.url}`, onPress: () => show(e), children: log?.id === e.id ? 'Hide deliveries' : 'Deliveries' })] }), log?.id === e.id ? (_jsx(YStack, { px: "$3", pb: "$3", gap: "$1.5", children: log.rows.length === 0 ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "Nothing delivered yet." })) : (log.rows.map((a, n) => (_jsxs(XStack, { gap: "$3", items: "baseline", children: [_jsx(SizableText, { size: "$1", color: a.status === 'ok' ? '$ink' : '$soft', width: 64, children: a.status === 'ok' ? 'OK' : a.status === 'failed' ? 'Failed' : 'Retrying' }), _jsx(SizableText, { flex: 1, size: "$1", color: "$soft", numberOfLines: 1, style: mono, children: `${a.subject}${a.code ? ` → ${a.code}` : ''}${a.error ? ` · ${a.error}` : ''}` }), _jsx(SizableText, { size: "$1", color: "$soft", "$max-sm": { display: 'none' }, children: day(a.at) })] }, `${a.at}-${n}`)))) })) : null] }, e.id))) })) }), _jsx(Note, { children: note })] }));
+                                    .join(' · '), trailing: host.admin ? (_jsx(XStack, { render: "button", "aria-label": t('Delete {url}', { url: e.url }), p: "$1", onPress: () => drop(e), children: _jsx(X, { size: 14 }) })) : undefined }), _jsxs(XStack, { gap: "$2", px: "$3", pb: "$2.5", flexWrap: "wrap", children: [host.admin ? (_jsx(Button, { size: "sm", variant: "outline", disabled: working, "aria-label": t('Send a test to {url}', { url: e.url }), onPress: () => trial(e), children: t('Send test') })) : null, _jsx(Button, { size: "sm", variant: "ghost", disabled: working, "aria-label": t('Deliveries to {url}', { url: e.url }), onPress: () => show(e), children: log?.id === e.id ? t('Hide deliveries') : t('Deliveries') })] }), log?.id === e.id ? (_jsx(YStack, { px: "$3", pb: "$3", gap: "$1.5", children: log.rows.length === 0 ? (_jsx(SizableText, { size: "$1", color: "$soft", children: t('Nothing delivered yet.') })) : (log.rows.map((a, n) => (_jsxs(XStack, { gap: "$3", items: "baseline", children: [_jsx(SizableText, { size: "$1", color: a.status === 'ok' ? '$ink' : '$soft', width: 64, children: a.status === 'ok' ? t('OK') : a.status === 'failed' ? t('Failed') : t('Retrying') }), _jsx(SizableText, { flex: 1, size: "$1", color: "$soft", numberOfLines: 1, style: mono, children: `${a.subject}${a.code ? ` → ${a.code}` : ''}${a.error ? ` · ${a.error}` : ''}` }), _jsx(SizableText, { size: "$1", color: "$soft", "$max-sm": { display: 'none' }, children: day(a.at) })] }, `${a.at}-${n}`)))) })) : null] }, e.id))) })) }), _jsx(Note, { children: note })] }));
 }

package/lib/settings/plan.d.ts

@@ -1,4 +1,4 @@
-import type { Target } from '../api/call.ts';
+import { type Target } from '../api/call.ts';
 import { type Standing } from '../standing.ts';
 /** The view, once read. */
 export declare function Reading({ s, target, onPlans, onBilling, now, }: {

package/lib/settings/plan.js

@@ -16,17 +16,23 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  *
  * It reads as `target`, so it needs no host: a host says where the plans and
  * Billing are (`onPlans`, `onBilling`).
+ *
+ * Its words are the reader's language (@hanzo/i18n `t`); a plan's name, a
+ * model's and the ways on the server offers are drawn as given.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { phrase } from '@hanzo/i18n';
+import { useI18n } from '@hanzo/i18n/react';
 import { Button, Switch } from '@hanzo/ui';
 import { useState } from 'react';
 import { money } from '../api/billing.js';
+import { told } from '../api/call.js';
 import { allow, CLASSES } from '../api/limits.js';
 import { INK, Title } from '../meter.js';
 import { spent, ways, when } from '../plan.js';
 import { left, useStanding } from '../standing.js';
 import { Card, day, Group, Note, Row, Soft } from './ui.js';
-const NAME = { premium: 'Premium models', ours: 'Hanzo models' };
+const NAME = { premium: phrase('Premium models'), ours: phrase('Hanzo models') };
 const FILL = { ok: '$ink', near: '$yellow10', limited: '$red10' };
 /** A thin bar of a share used. */
 function Bar({ percent, state }) {
@@ -34,11 +40,13 @@ function Bar({ percent, state }) {
 }
 /** One measured row: what, how much of it is used, when it starts over, its bar, and what hangs under it. */
 function Gauge({ title, w, first, says, now, children }) {
+    const { t } = useI18n();
     const at = when(w.resets, now);
-    return (_jsxs(YStack, { gap: "$2", px: "$3", py: "$3", borderTopWidth: first ? 0 : 1, borderColor: "$borderColor", "data-slot": "plan-window", "data-state": w.state, children: [_jsxs(XStack, { items: "baseline", justify: "space-between", flexWrap: "wrap", columnGap: "$3", rowGap: "$1", children: [_jsx(SizableText, { size: "$2", color: "$ink", children: title }), _jsx(SizableText, { size: "$1", color: INK[w.state], style: { fontVariantNumeric: 'tabular-nums' }, children: [says ?? `${w.percent}% used`, at ? `Resets ${at}` : ''].filter(Boolean).join(' · ') })] }), _jsx(Bar, { percent: w.percent, state: w.state }), children] }));
+    return (_jsxs(YStack, { gap: "$2", px: "$3", py: "$3", borderTopWidth: first ? 0 : 1, borderColor: "$borderColor", "data-slot": "plan-window", "data-state": w.state, children: [_jsxs(XStack, { items: "baseline", justify: "space-between", flexWrap: "wrap", columnGap: "$3", rowGap: "$1", children: [_jsx(SizableText, { size: "$2", color: "$ink", children: title }), _jsx(SizableText, { size: "$1", color: INK[w.state], style: { fontVariantNumeric: 'tabular-nums' }, children: [says ?? t('{n}% used', { n: w.percent }), at ? t('Resets {time}', { time: at }) : ''].filter(Boolean).join(' · ') })] }), _jsx(Bar, { percent: w.percent, state: w.state }), children] }));
 }
 /** The view, once read. */
 export function Reading({ s, target, onPlans, onBilling, now, }) {
+    const { t } = useI18n();
     const [after, setAfter] = useState(null);
     const [busy, setBusy] = useState(false);
     const [note, setNote] = useState('');
@@ -51,7 +59,7 @@ export function Reading({ s, target, onPlans, onBilling, now, }) {
             setAfter(await allow(target, on));
         }
         catch (e) {
-            setNote(e.message);
+            setNote(told(e, t));
         }
         finally {
             setBusy(false);
@@ -71,38 +79,53 @@ export function Reading({ s, target, onPlans, onBilling, now, }) {
     const used = s.kind === 'plan' && l ? CLASSES.filter((c) => l.classes[c]?.state === 'limited') : [];
     const capped = s.kind === 'plan' ? (l?.paused[0] ?? null) : null;
     const resets = used.map((c) => l.classes[c].resets).sort()[0] ?? '';
+    const until = capped ? when(capped.resets, now) : '';
+    const model = capped ? capped.model.replace(/\*$/, '') : '';
     const notice = used.length
-        ? spent(s.label, used, resets, now)
+        ? spent(s.label, used, resets, now, t)
         : capped
-            ? `${capped.model.replace(/\*$/, '')} is paused${when(capped.resets, now) ? ` until ${when(capped.resets, now)}` : ''}${capped.fallback ? `; chat continues on ${capped.fallback}` : ''}.`
+            ? capped.fallback
+                ? until
+                    ? t('{model} is paused until {time}; chat continues on {fallback}.', { model, time: until, fallback: capped.fallback })
+                    : t('{model} is paused; chat continues on {fallback}.', { model, fallback: capped.fallback })
+                : until
+                    ? t('{model} is paused until {time}.', { model, time: until })
+                    : t('{model} is paused.', { model })
             : '';
     const head = (_jsxs(XStack, { items: "center", gap: "$3", flexWrap: "wrap", "data-slot": "plan-head", children: [_jsxs(YStack, { flex: 1, minW: 200, gap: "$1", children: [s.label ? _jsx(Title, { label: s.label, size: "$5" }) : null, _jsx(SizableText, { size: "$2", color: "$soft", children: s.kind === 'plan'
                             ? l?.start && l.end
-                                ? `Current period ${day(l.start)} – ${day(l.end)}`
-                                : 'Your plan'
+                                ? t('Current period {start} – {end}', { start: day(l.start), end: day(l.end) })
+                                : t('Your plan')
                             : s.kind === 'free'
-                                ? 'Limited usage of free models, from a pool every free account shares.'
-                                : 'No plan. Usage is paid from your credits.' })] }), (upgrade && !notice) || (s.kind !== 'plan' && onPlans) ? (_jsx(Button, { size: "sm", variant: s.kind === 'plan' ? 'outline' : 'primary', onPress: () => (upgrade ? go(upgrade) : onPlans?.()), children: upgrade?.label || 'Upgrade' })) : null] }));
+                                ? t('Limited usage of free models, from a pool every free account shares.')
+                                : t('No plan. Usage is paid from your credits.') })] }), (upgrade && !notice) || (s.kind !== 'plan' && onPlans) ? (_jsx(Button, { size: "sm", variant: s.kind === 'plan' ? 'outline' : 'primary', onPress: () => (upgrade ? go(upgrade) : onPlans?.()), children: upgrade?.label || t('Upgrade') })) : null] }));
     if (s.kind === 'free') {
         const share = left(s.allowance);
         const a = s.allowance;
-        return (_jsxs(YStack, { gap: "$5", "data-slot": "plan-usage", "data-kind": "free", children: [head, a && share !== null ? (_jsxs(Card, { children: [_jsx(Gauge, { first: true, title: a.window === 'hour' ? 'This hour' : 'Today', w: { percent: 100 - share, state: share === 0 ? 'limited' : share <= 20 ? 'near' : 'ok', resets: a.resets }, says: `${share}% left`, now: now }), a.pool ? (_jsx(Row, { title: "Shared pool", detail: a.pool.state === 'exhausted' ? `Used up${when(a.pool.resets, now) ? ` until ${when(a.pool.resets, now)}` : ''}` : a.pool.state === 'busy' ? 'Busy. Try again in a minute.' : 'Every free request is being served.' })) : null] })) : (_jsx(Soft, { children: "The free allowance could not be read." })), _jsxs(XStack, { items: "center", gap: "$3", flexWrap: "wrap", children: [_jsx(SizableText, { size: "$2", color: "$soft", flex: 1, minW: 200, children: "Credits pay as you go for any model, with or without a plan." }), _jsx(Button, { size: "sm", variant: "outline", onPress: onBilling, children: "Add credits" })] })] }));
+        return (_jsxs(YStack, { gap: "$5", "data-slot": "plan-usage", "data-kind": "free", children: [head, a && share !== null ? (_jsxs(Card, { children: [_jsx(Gauge, { first: true, title: a.window === 'hour' ? t('This hour') : t('Today'), w: { percent: 100 - share, state: share === 0 ? 'limited' : share <= 20 ? 'near' : 'ok', resets: a.resets }, says: t('{n}% left', { n: share }), now: now }), a.pool ? (_jsx(Row, { title: t('Shared pool'), detail: a.pool.state === 'exhausted'
+                                ? when(a.pool.resets, now)
+                                    ? t('Used up until {time}', { time: when(a.pool.resets, now) })
+                                    : t('Used up')
+                                : a.pool.state === 'busy'
+                                    ? t('Busy. Try again in a minute.')
+                                    : t('Every free request is being served.') })) : null] })) : (_jsx(Soft, { children: t('The free allowance could not be read.') })), _jsxs(XStack, { items: "center", gap: "$3", flexWrap: "wrap", children: [_jsx(SizableText, { size: "$2", color: "$soft", flex: 1, minW: 200, children: t('Credits pay as you go for any model, with or without a plan.') }), _jsx(Button, { size: "sm", variant: "outline", onPress: onBilling, children: t('Add credits') })] })] }));
     }
     if (s.kind === 'credits') {
-        return (_jsxs(YStack, { gap: "$5", "data-slot": "plan-usage", "data-kind": "credits", children: [head, _jsx(Card, { children: _jsx(Row, { first: true, title: "Credits", detail: "What your usage is paid from, at each model\u2019s list price.", trailing: _jsx(SizableText, { size: "$2", color: "$ink", "data-slot": "plan-balance", children: s.balance === null ? 'Unavailable' : money(s.balance) }) }) }), _jsx(XStack, { children: _jsx(Button, { size: "sm", variant: "outline", onPress: onBilling, children: "Add funds" }) })] }));
+        return (_jsxs(YStack, { gap: "$5", "data-slot": "plan-usage", "data-kind": "credits", children: [head, _jsx(Card, { children: _jsx(Row, { first: true, title: t('Credits'), detail: t('What your usage is paid from, at each model’s list price.'), trailing: _jsx(SizableText, { size: "$2", color: "$ink", "data-slot": "plan-balance", children: s.balance === null ? t('Unavailable') : money(s.balance) }) }) }), _jsx(XStack, { children: _jsx(Button, { size: "sm", variant: "outline", onPress: onBilling, children: t('Add funds') }) })] }));
     }
     const on = l?.credits ?? false;
-    return (_jsxs(YStack, { gap: "$5", "data-slot": "plan-usage", "data-kind": "plan", children: [head, notice ? (_jsxs(XStack, { items: "center", gap: "$2.5", flexWrap: "wrap", px: "$3", py: "$2.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", "data-slot": "plan-spent", children: [_jsx(YStack, { width: 8, height: 8, rounded: 4, bg: "$red10", shrink: 0, "aria-hidden": true }), _jsx(SizableText, { size: "$2", color: "$ink", flex: 1, minW: 200, children: notice }), _jsx(XStack, { gap: "$2", flexWrap: "wrap", children: ways(l?.actions ?? []).map((a, i) => (_jsx(Button, { size: "sm", variant: i === 0 ? 'primary' : 'outline', disabled: busy, "data-kind": a.kind, onPress: () => go(a), children: a.label }, a.kind))) })] })) : null, !l ? (_jsx(Soft, { children: "The plan\u2019s usage could not be read." })) : !l.session && !l.day && !Object.keys(l.classes).length ? (_jsx(Soft, { children: "This plan sets no usage limits." })) : (_jsxs(_Fragment, { children: [l.session || l.day ? (_jsx(Group, { title: "Requests", detail: "Every request the plan covers counts in both.", children: _jsxs(Card, { children: [l.session ? _jsx(Gauge, { first: true, title: "Session", w: l.session, says: l.session.resets ? undefined : `${l.session.percent}% used · Starts with your next request`, now: now }) : null, l.day ? _jsx(Gauge, { first: !l.session, title: "Today", w: l.day, now: now }) : null] }) })) : null, Object.keys(l.classes).length ? (_jsx(Group, { title: "By model class", detail: "Each class\u2019s share of the billing period, and of its shorter window where the plan sets one.", children: _jsx(Card, { children: CLASSES.filter((c) => l.classes[c]).map((c, i) => {
+    return (_jsxs(YStack, { gap: "$5", "data-slot": "plan-usage", "data-kind": "plan", children: [head, notice ? (_jsxs(XStack, { items: "center", gap: "$2.5", flexWrap: "wrap", px: "$3", py: "$2.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", "data-slot": "plan-spent", children: [_jsx(YStack, { width: 8, height: 8, rounded: 4, bg: "$red10", shrink: 0, "aria-hidden": true }), _jsx(SizableText, { size: "$2", color: "$ink", flex: 1, minW: 200, children: notice }), _jsx(XStack, { gap: "$2", flexWrap: "wrap", children: ways(l?.actions ?? [], t).map((a, i) => (_jsx(Button, { size: "sm", variant: i === 0 ? 'primary' : 'outline', disabled: busy, "data-kind": a.kind, onPress: () => go(a), children: a.label }, a.kind))) })] })) : null, !l ? (_jsx(Soft, { children: t('The plan’s usage could not be read.') })) : !l.session && !l.day && !Object.keys(l.classes).length ? (_jsx(Soft, { children: t('This plan sets no usage limits.') })) : (_jsxs(_Fragment, { children: [l.session || l.day ? (_jsx(Group, { title: t('Requests'), detail: t('Every request the plan covers counts in both.'), children: _jsxs(Card, { children: [l.session ? (_jsx(Gauge, { first: true, title: t('Session'), w: l.session, says: l.session.resets ? undefined : [t('{n}% used', { n: l.session.percent }), t('Starts with your next request')].join(' · '), now: now })) : null, l.day ? _jsx(Gauge, { first: !l.session, title: t('Today'), w: l.day, now: now }) : null] }) })) : null, Object.keys(l.classes).length ? (_jsx(Group, { title: t('By model class'), detail: t('Each class’s share of the billing period, and of its shorter window where the plan sets one.'), children: _jsx(Card, { children: CLASSES.filter((c) => l.classes[c]).map((c, i) => {
                                 const k = l.classes[c];
-                                return (_jsx(YStack, { "data-class": c, children: _jsx(Gauge, { first: i === 0, title: NAME[c], w: k, says: k.paying === 'credits' ? `${k.percent}% used · Paying from credits` : undefined, now: now, children: k.window ? (_jsxs(XStack, { gap: "$2", items: "center", "data-slot": "plan-short", children: [_jsx(SizableText, { size: "$1", color: "$soft", shrink: 0, children: "Shorter window" }), _jsx(YStack, { flex: 1, children: _jsx(Bar, { percent: k.window.percent, state: k.window.state }) }), _jsx(SizableText, { size: "$1", color: "$soft", shrink: 0, children: [`${k.window.percent}%`, when(k.window.resets, now) ? `Resets ${when(k.window.resets, now)}` : ''].filter(Boolean).join(' · ') })] })) : null }) }, c));
-                            }) }) })) : null, _jsx(Group, { title: "When the allowance runs out", detail: "Credits are separate from your plan\u2019s usage allowance. They live in Billing.", children: _jsxs(Card, { children: [_jsx(Row, { first: true, title: "Use credits when my plan\u2019s allowance runs out", detail: on
-                                        ? 'On. A model whose included usage is used keeps working, paid from credits — prepaid first, then granted credit where the model takes it — at its list price.'
-                                        : 'Off. Chat continues on a free model, and other requests wait for the plan to reset.', trailing: _jsx(Switch, { "aria-label": "Use credits when my plan\u2019s allowance runs out", checked: on, disabled: busy, onCheckedChange: (next) => void choose(next) }) }), _jsx(Row, { title: "Credits", detail: s.balance === 0 ? 'There are no credits to spend yet.' : 'The balance, top-ups and auto-reload.', trailing: _jsx(Button, { size: "sm", variant: "ghost", onPress: onBilling, children: s.balance === 0 ? 'Add credits' : 'Billing' }) })] }) })] })), _jsx(Note, { children: note })] }));
+                                return (_jsx(YStack, { "data-class": c, children: _jsx(Gauge, { first: i === 0, title: t(NAME[c]), w: k, says: k.paying === 'credits' ? [t('{n}% used', { n: k.percent }), t('Paying from credits')].join(' · ') : undefined, now: now, children: k.window ? (_jsxs(XStack, { gap: "$2", items: "center", "data-slot": "plan-short", children: [_jsx(SizableText, { size: "$1", color: "$soft", shrink: 0, children: t('Shorter window') }), _jsx(YStack, { flex: 1, children: _jsx(Bar, { percent: k.window.percent, state: k.window.state }) }), _jsx(SizableText, { size: "$1", color: "$soft", shrink: 0, children: [`${k.window.percent}%`, when(k.window.resets, now) ? t('Resets {time}', { time: when(k.window.resets, now) }) : ''].filter(Boolean).join(' · ') })] })) : null }) }, c));
+                            }) }) })) : null, _jsx(Group, { title: t('When the allowance runs out'), detail: t('Credits are separate from your plan’s usage allowance. They live in Billing.'), children: _jsxs(Card, { children: [_jsx(Row, { first: true, title: t('Use credits when my plan’s allowance runs out'), detail: on
+                                        ? t('On. A model whose included usage is used keeps working, paid from credits — prepaid first, then granted credit where the model takes it — at its list price.')
+                                        : t('Off. Chat continues on a free model, and other requests wait for the plan to reset.'), trailing: _jsx(Switch, { "aria-label": t('Use credits when my plan’s allowance runs out'), checked: on, disabled: busy, onCheckedChange: (next) => void choose(next) }) }), _jsx(Row, { title: t('Credits'), detail: s.balance === 0 ? t('There are no credits to spend yet.') : t('The balance, top-ups and auto-reload.'), trailing: _jsx(Button, { size: "sm", variant: "ghost", onPress: onBilling, children: s.balance === 0 ? t('Add credits') : t('Billing') }) })] }) })] })), _jsx(Note, { children: note })] }));
 }
 /** The plan's usage, read as `target`. */
 export function Plan({ target, onPlans, onBilling, now }) {
+    const { t } = useI18n();
     const read = useStanding(target);
     if (read.value)
         return _jsx(Reading, { s: read.value, target: target, onPlans: onPlans, onBilling: onBilling, now: now });
-    return _jsx(Soft, { children: read.error ? read.error.message : 'Reading the plan…' });
+    return _jsx(Soft, { children: read.error ? told(read.error, t) : t('Reading the plan…') });
 }

package/lib/settings/privacy.js

@@ -4,36 +4,42 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Hanzo may train on their data, and whether anonymous usage is counted — and
  * who can see the organization's projects: a public one is in the community
  * catalogue with its source readable by anyone, until it is made private.
+ *
+ * Its words are the reader's language (@hanzo/i18n `t`); a project's name is
+ * drawn as given.
  */
 import { YStack } from '@hanzo/gui';
+import { useI18n } from '@hanzo/i18n/react';
 import { Button, Switch } from '@hanzo/ui';
 import { useState } from 'react';
+import { told } from '../api/call.js';
 import { consent, setConsent } from '../api/consent.js';
 import { change, projects } from '../api/projects.js';
 import { useRead } from '../data.js';
 import { useHost, useTarget } from '../host.js';
 import { Card, Group, Heading, Note, Row, Soft } from './ui.js';
 export function Privacy() {
+    const { t } = useI18n();
     const host = useHost();
-    const t = useTarget();
+    const target = useTarget();
     const signed = Boolean(host.person);
-    const answers = useRead(signed ? () => consent(t) : null, null, [t, signed]);
-    const published = useRead(signed ? () => projects(t) : null, [], [t, signed]);
+    const answers = useRead(signed ? () => consent(target) : null, null, [target, signed]);
+    const published = useRead(signed ? () => projects(target) : null, [], [target, signed]);
     const [shown, setShown] = useState(null);
     const [busy, setBusy] = useState('');
     const [note, setNote] = useState('');
     if (!signed) {
-        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Privacy" }), _jsx(Soft, { children: "Sign in to see your privacy settings." })] }));
+        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: t('Privacy') }), _jsx(Soft, { children: t('Sign in to see your privacy settings.') })] }));
     }
     const now = shown ?? answers.value;
     const answer = async (change) => {
         setBusy('consent');
         setNote('');
         try {
-            setShown(await setConsent(t, change));
+            setShown(await setConsent(target, change));
         }
         catch (e) {
-            setNote(e.message);
+            setNote(told(e, t));
         }
         finally {
             setBusy('');
@@ -43,21 +49,28 @@ export function Privacy() {
         setBusy(p.slug);
         setNote('');
         try {
-            const saved = await change(t, p.slug, { visibility: p.visibility === 'private' ? 'public' : 'private' });
+            const saved = await change(target, p.slug, { visibility: p.visibility === 'private' ? 'public' : 'private' });
             published.reload();
-            setNote(`${saved.name} is ${saved.visibility || 'saved'}`);
+            // The two visibilities this page offers are said in words; any other is the platform's, as given.
+            setNote(saved.visibility === 'public'
+                ? t('{name} is public', { name: saved.name })
+                : saved.visibility === 'private'
+                    ? t('{name} is private', { name: saved.name })
+                    : saved.visibility
+                        ? t('{name} is {visibility}', { name: saved.name, visibility: saved.visibility })
+                        : t('{name} is saved', { name: saved.name }));
         }
         catch (e) {
-            setNote(e.message);
+            setNote(told(e, t));
         }
         finally {
             setBusy('');
         }
     };
     const training = now?.training ?? '';
-    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Privacy", detail: "What Hanzo may do with your data, and what your organization shows the world." }), _jsx(Group, { title: "Your data", detail: "Recorded on your Hanzo account and honoured by every Hanzo surface.", children: answers.error && !now ? (_jsx(Soft, { children: answers.error.message })) : !now ? (_jsx(Soft, { children: "Reading your answers\u2026" })) : (_jsxs(Card, { children: [_jsx(Row, { first: true, title: "Help improve Hanzo models", detail: training === 'granted'
-                                ? 'Hanzo may train on your prompts and runs.'
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: t('Privacy'), detail: t('What Hanzo may do with your data, and what your organization shows the world.') }), _jsx(Group, { title: t('Your data'), detail: t('Recorded on your Hanzo account and honoured by every Hanzo surface.'), children: answers.error && !now ? (_jsx(Soft, { children: told(answers.error, t) })) : !now ? (_jsx(Soft, { children: t('Reading your answers…') })) : (_jsxs(Card, { children: [_jsx(Row, { first: true, title: t('Help improve Hanzo models'), detail: training === 'granted'
+                                ? t('Hanzo may train on your prompts and runs.')
                                 : training === 'refused'
-                                    ? 'Hanzo does not train on your data.'
-                                    : 'Not answered yet. Until you say yes, Hanzo does not train on your data.', trailing: _jsx(Switch, { "aria-label": "Help improve Hanzo models", checked: training === 'granted', disabled: busy === 'consent', onCheckedChange: (on) => void answer({ training: on ? 'granted' : 'refused' }) }) }), _jsx(Row, { title: "Usage insights", detail: "Anonymous counts of how the product is used. No prompts, code or answers.", trailing: _jsx(Switch, { "aria-label": "Usage insights", checked: now.insights, disabled: busy === 'consent', onCheckedChange: (on) => void answer({ insights: on }) }) })] })) }), _jsx(Group, { title: "Projects", detail: "A public project is listed in the community catalogue, and anyone can read its source. Keeping one private needs a paid plan.", children: published.error ? (_jsx(Soft, { children: published.error.message })) : published.loading && !published.value.length ? (_jsx(Soft, { children: "Reading projects\u2026" })) : !published.value.length ? (_jsx(Soft, { children: "Your organization has no projects yet." })) : (_jsx(Card, { children: published.value.map((p, i) => (_jsx(Row, { first: i === 0, title: p.name, detail: p.visibility === 'private' ? 'Private' : p.visibility === 'public' ? 'Public' : 'Visibility not reported', trailing: p.visibility ? (_jsx(Button, { size: "sm", variant: "outline", disabled: busy === p.slug, onPress: () => void flip(p), children: p.visibility === 'private' ? 'Make public' : 'Make private' })) : null }, p.slug))) })) }), _jsx(Note, { children: note })] }));
+                                    ? t('Hanzo does not train on your data.')
+                                    : t('Not answered yet. Until you say yes, Hanzo does not train on your data.'), trailing: _jsx(Switch, { "aria-label": t('Help improve Hanzo models'), checked: training === 'granted', disabled: busy === 'consent', onCheckedChange: (on) => void answer({ training: on ? 'granted' : 'refused' }) }) }), _jsx(Row, { title: t('Usage insights'), detail: t('Anonymous counts of how the product is used. No prompts, code or answers.'), trailing: _jsx(Switch, { "aria-label": t('Usage insights'), checked: now.insights, disabled: busy === 'consent', onCheckedChange: (on) => void answer({ insights: on }) }) })] })) }), _jsx(Group, { title: t('Projects'), detail: t('A public project is listed in the community catalogue, and anyone can read its source. Keeping one private needs a paid plan.'), children: published.error ? (_jsx(Soft, { children: told(published.error, t) })) : published.loading && !published.value.length ? (_jsx(Soft, { children: t('Reading projects…') })) : !published.value.length ? (_jsx(Soft, { children: t('Your organization has no projects yet.') })) : (_jsx(Card, { children: published.value.map((p, i) => (_jsx(Row, { first: i === 0, title: p.name, detail: p.visibility === 'private' ? t('Private') : p.visibility === 'public' ? t('Public') : t('Visibility not reported'), trailing: p.visibility ? (_jsx(Button, { size: "sm", variant: "outline", disabled: busy === p.slug, onPress: () => void flip(p), children: p.visibility === 'private' ? t('Make public') : t('Make private') })) : null }, p.slug))) })) }), _jsx(Note, { children: note })] }));
 }

package/lib/settings/ui.d.ts

@@ -37,10 +37,11 @@ export declare function Soft({ children }: {
 }): import("react").JSX.Element;
 /** `Sep 27, 2026` from an RFC 3339 instant, or '' when there is none. UTC, the calendar the platform bills and resets on. */
 export declare function day(iso: string): string;
-/** A credential the platform answers once: the value to copy, and what it is for. */
-export declare function Once({ value, label, children }: {
+/** A credential the platform answers once: the value to copy, what it is, and what its copy control says. */
+export declare function Once({ value, label, copy, children }: {
     value: string;
     label: string;
+    copy: string;
     children?: ReactNode;
 }): import("react").JSX.Element;
 /** What the last action did, said once, where it was done. */

package/lib/settings/ui.js

@@ -3,8 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * What every Settings section is drawn from, so they read as one page: a
  * heading with its action, bordered lists of rows, labelled fields, and the
  * quiet lines for empty, loading and refused.
+ *
+ * What a section hands them comes already said in the reader's language
+ * (@hanzo/i18n `t`), since a row's title may be a name drawn as given; their
+ * own few words they say themselves.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { useI18n } from '@hanzo/i18n/react';
 import { CopyButton } from '@hanzo/ui/product';
 /** A section's title, what it is for, and its one action. */
 export function Heading({ title, detail, action }) {
@@ -35,9 +40,10 @@ export function day(iso) {
     const d = iso ? new Date(iso) : null;
     return d && !Number.isNaN(d.getTime()) ? d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' }) : '';
 }
-/** A credential the platform answers once: the value to copy, and what it is for. */
-export function Once({ value, label, children }) {
-    return (_jsxs(YStack, { gap: "$2", px: "$3", py: "$3", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$raised", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { flex: 1, minW: 0, size: "$2", color: "$ink", "aria-label": label, style: { fontFamily: 'var(--f-mono, ui-monospace, monospace)', wordBreak: 'break-all' }, children: value }), _jsx(CopyButton, { value: value, label: `Copy ${label.toLowerCase()}` })] }), _jsx(SizableText, { size: "$1", color: "$soft", children: "Copy it now. It is not shown again." }), children] }));
+/** A credential the platform answers once: the value to copy, what it is, and what its copy control says. */
+export function Once({ value, label, copy, children }) {
+    const { t } = useI18n();
+    return (_jsxs(YStack, { gap: "$2", px: "$3", py: "$3", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$raised", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { flex: 1, minW: 0, size: "$2", color: "$ink", "aria-label": label, style: { fontFamily: 'var(--f-mono, ui-monospace, monospace)', wordBreak: 'break-all' }, children: value }), _jsx(CopyButton, { value: value, label: copy })] }), _jsx(SizableText, { size: "$1", color: "$soft", children: t('Copy it now. It is not shown again.') }), children] }));
 }
 /** What the last action did, said once, where it was done. */
 export function Note({ children }) {

package/lib/settings/usage.js

@@ -4,17 +4,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * shares; the free allowance on Free; the balance with no plan. What happens
  * when a plan's allowance runs out is chosen here. Credits themselves — the
  * balance, top-ups, auto-reload, spend and its limit — are Billing's.
+ * Its words are the reader's language (@hanzo/i18n `t`); the org's name is its own.
  */
 import { YStack } from '@hanzo/gui';
+import { useI18n } from '@hanzo/i18n/react';
+import { told } from '../api/call.js';
 import { useHost, useTarget } from '../host.js';
 import { path } from '../route.js';
 import { useStanding } from '../standing.js';
 import { Reading } from './plan.js';
 import { Heading, Soft } from './ui.js';
 export function Usage() {
+    const { t } = useI18n();
     const host = useHost();
-    const t = useTarget();
+    const target = useTarget();
     const signed = Boolean(host.person);
-    const read = useStanding(t, signed);
-    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Usage", detail: `What ${host.org ?? 'this organization'}’s plan includes, and how much of it is used.` }), !signed ? (_jsx(Soft, { children: "Sign in to see this organization\u2019s usage." })) : read.value ? (_jsx(Reading, { s: read.value, target: t, onPlans: () => host.go(path({ kind: 'screen', screen: 'plans' })), onBilling: () => host.go(path({ kind: 'settings', section: 'billing' })) })) : (_jsx(Soft, { children: read.error ? read.error.message : 'Reading the plan…' }))] }));
+    const read = useStanding(target, signed);
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: t('Usage'), detail: host.org ? t('What {org}’s plan includes, and how much of it is used.', { org: host.org }) : t('What this organization’s plan includes, and how much of it is used.') }), !signed ? (_jsx(Soft, { children: t('Sign in to see this organization’s usage.') })) : read.value ? (_jsx(Reading, { s: read.value, target: target, onPlans: () => host.go(path({ kind: 'screen', screen: 'plans' })), onBilling: () => host.go(path({ kind: 'settings', section: 'billing' })) })) : (_jsx(Soft, { children: read.error ? told(read.error, t) : t('Reading the plan…') }))] }));
 }