@hanzo/build 0.2.79 → 0.2.81

package/lib/settings/code.js

@@ -5,12 +5,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * — and the model and effort, which are the one choice Chat and Dev share
  * (mind.tsx): changed here, changed in both composers. Beside them, the
  * codebases' environments and the organization's machines, each on its own page.
+ *
+ * Its words are the reader's language (@hanzo/i18n `t`); a model's and a
+ * machine's names are drawn as given.
  */
 import { YStack } from '@hanzo/gui';
+import { useI18n } from '@hanzo/i18n/react';
 import { ChevronRight } from '@hanzogui/lucide-icons-2';
 import { ChipSelect } from '@hanzo/ui/product';
 import { ModelPicker } from '@hanzo/ui/models';
 import { useState } from 'react';
+import { told } from '../api/call.js';
 import { unhonoured } from '../api/coding.js';
 import { ENSO } from '../api/models.js';
 import { SANDBOX } from '../api/places.js';
@@ -20,29 +25,31 @@ import { MODES } from '../landing.js';
 import { EFFORTS, useCatalog, useChoice } from '../mind.js';
 import { usePrefs } from '../prefs.js';
 import { path } from '../route.js';
+import { said } from './machines.js';
 import { Card, Group, Heading, Note, Row, Soft } from './ui.js';
 export function Code() {
+    const { t } = useI18n();
     const host = useHost();
-    const t = useTarget();
+    const target = useTarget();
     const signed = Boolean(host.person);
     const { prefs, save } = usePrefs();
-    const catalog = useCatalog(t);
+    const catalog = useCatalog(target);
     const [choice, choose] = useChoice();
-    const places = usePlaces(t, signed);
+    const places = usePlaces(target, signed);
     const [note, setNote] = useState('');
     if (!signed) {
-        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Code" }), _jsx(Soft, { children: "Sign in to set how your runs start." })] }));
+        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: t('Code') }), _jsx(Soft, { children: t('Sign in to set how your runs start.') })] }));
     }
     const now = { mode: 'build', place: '', ...prefs.code };
     const keep = (change) => {
         setNote('');
-        save({ code: { ...prefs.code, ...change } }).catch((e) => setNote(e.message));
+        save({ code: { ...prefs.code, ...change } }).catch((e) => setNote(told(e, t)));
     };
     const where = (places.value.length ? places.value : [SANDBOX]).map((p) => ({
         id: p.id || 'sandbox',
-        label: p.id ? p.label : 'Default',
+        label: p.id ? p.label : t('Default'),
         // A machine offline now can still be the default; its status shows beside it.
-        hint: p.id ? [p.status, p.capacity].filter(Boolean).join(' · ') : 'The platform’s own sandbox',
+        hint: p.id ? [said(p.status, t), p.capacity].filter(Boolean).join(' · ') : t('The platform’s own sandbox'),
         place: p.id,
     }));
     // The sandbox is always listed, so a place not found is a machine that is not: it reads as its id.
@@ -50,10 +57,14 @@ export function Code() {
     // A default is never premium: a premium model is picked for one run, in New.
     const offered = catalog.models.filter((m) => m.class !== 'premium');
     const go = (section) => host.go(path({ kind: 'settings', section }));
-    const effort = EFFORTS.find((e) => e.id === choice.effort);
-    const mode = MODES.find((m) => m.id === now.mode);
-    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Code", detail: "How a new run starts. The model and effort are the ones Chat uses too." }), _jsxs(Group, { title: "Defaults", children: [_jsxs(Card, { children: [_jsx(Row, { first: true, title: "Model", detail: "Enso picks one for each step; any other model runs them all.", trailing: _jsx(ModelPicker, { size: "sm", name: "Default model", models: offered, scope: "chat", value: choice.model || ENSO, onChange: (id) => choose({ model: id }), loading: catalog.loading, error: catalog.error }) }), _jsx(Row, { title: "Effort", detail: "How long the agent thinks before it acts.", trailing: _jsx(ChipSelect, { name: "Default effort", label: effort.label, chosen: effort, items: EFFORTS, onChange: (e) => choose({ effort: e.id }), placement: "bottom-end", width: 180 }) }), _jsx(Row, { title: "Mode", detail: mode.hint, trailing: _jsx(ChipSelect, { name: "Default mode", label: mode.label, chosen: mode, items: MODES, onChange: (m) => keep({ mode: m.id }), placement: "bottom-end", width: 260 }) }), _jsx(Row, { title: "Where it runs", detail: "The Hanzo sandbox, or one of your organization\u2019s machines.", trailing: _jsx(ChipSelect, { name: "Default place", label: place.label, chosen: place, items: where, onChange: (w) => keep({ place: w.place }), placeholder: "Search machines\u2026", placement: "bottom-end", loading: places.loading, error: places.error?.message ?? null }) })] }), _jsx(Note, { children: unhonoured(now.mode, now.place) })] }), _jsx(Group, { title: "Workspace", children: _jsxs(Card, { children: [_jsx(Row, { first: true, title: "Environments", detail: "What a run installs and starts in each codebase, and the secrets it exports.", trailing: _jsx(Link, { label: "Environments", onPress: () => go('environments') }) }), _jsx(Row, { title: "Machines", detail: "Your organization\u2019s own computers that take runs.", trailing: _jsx(Link, { label: "Machines", onPress: () => go('machines') }) })] }) }), _jsx(Note, { children: note })] }));
+    // The choices in the reader's words, kept by id.
+    const efforts = EFFORTS.map((e) => ({ ...e, label: t(e.label) }));
+    const modes = MODES.map((m) => ({ ...m, label: t(m.label), hint: t(m.hint) }));
+    const effort = efforts.find((e) => e.id === choice.effort);
+    const mode = modes.find((m) => m.id === now.mode);
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: t('Code'), detail: t('How a new run starts. The model and effort are the ones Chat uses too.') }), _jsxs(Group, { title: t('Defaults'), children: [_jsxs(Card, { children: [_jsx(Row, { first: true, title: t('Model'), detail: t('Enso picks one for each step; any other model runs them all.'), trailing: _jsx(ModelPicker, { size: "sm", name: t('Default model'), models: offered, scope: "chat", value: choice.model || ENSO, onChange: (id) => choose({ model: id }), loading: catalog.loading, error: catalog.error }) }), _jsx(Row, { title: t('Effort'), detail: t('How long the agent thinks before it acts.'), trailing: _jsx(ChipSelect, { name: t('Default effort'), label: effort.label, chosen: effort, items: efforts, onChange: (e) => choose({ effort: e.id }), placement: "bottom-end", width: 180 }) }), _jsx(Row, { title: t('Mode'), detail: mode.hint, trailing: _jsx(ChipSelect, { name: t('Default mode'), label: mode.label, chosen: mode, items: modes, onChange: (m) => keep({ mode: m.id }), placement: "bottom-end", width: 260 }) }), _jsx(Row, { title: t('Where it runs'), detail: t('The Hanzo sandbox, or one of your organization’s machines.'), trailing: _jsx(ChipSelect, { name: t('Default place'), label: place.label, chosen: place, items: where, onChange: (w) => keep({ place: w.place }), placeholder: t('Search machines…'), placement: "bottom-end", loading: places.loading, error: places.error ? told(places.error, t) : null }) })] }), _jsx(Note, { children: unhonoured(now.mode, now.place, t) })] }), _jsx(Group, { title: t('Workspace'), children: _jsxs(Card, { children: [_jsx(Row, { first: true, title: t('Environments'), detail: t('What a run installs and starts in each codebase, and the secrets it exports.'), trailing: _jsx(Link, { label: t('Open Environments'), onPress: () => go('environments') }) }), _jsx(Row, { title: t('Machines'), detail: t('Your organization’s own computers that take runs.'), trailing: _jsx(Link, { label: t('Open Machines'), onPress: () => go('machines') }) })] }) }), _jsx(Note, { children: note })] }));
 }
+/** A row's way to its own page; `label` is what it opens, already said. */
 function Link({ label, onPress }) {
-    return (_jsx(YStack, { render: "button", "aria-label": `Open ${label}`, p: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, onPress: onPress, children: _jsx(ChevronRight, { size: 16 }) }));
+    return (_jsx(YStack, { render: "button", "aria-label": label, p: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, onPress: onPress, children: _jsx(ChevronRight, { size: 16, 'data-i18n-mirror': '' }) }));
 }

package/lib/settings/credits.d.ts

@@ -1,7 +1,7 @@
-import type { Target } from '../api/call.ts';
-/** What the credits section says first, on every surface. */
-export declare const SEPARATE = "Credits are separate from your plan\u2019s usage allowance. They pay for usage past it when you choose to continue with credits, and for all usage when there is no plan.";
-export declare function Credits({ target: t, admin, add, onCard }: {
+import { type Target } from '../api/call.ts';
+/** What the credits section says first, on every surface: English, marked (`phrase`), drawn through `t`. */
+export declare const SEPARATE: string;
+export declare function Credits({ target, admin, add, onCard }: {
     target: Target;
     admin: boolean;
     add?: string;

package/lib/settings/credits.js

@@ -13,18 +13,25 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * Money moves two ways, the host's choice: `add` names a page that takes it (the
  * pay site); without one a saved card is charged here (POST /v1/billing/topup)
  * and a person with no card is sent to add one (`onCard`).
+ *
+ * Its words are the reader's language (@hanzo/i18n `t`); a grant's, a limit's
+ * and a kind of spend's names are the ledger's, drawn as given.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { phrase } from '@hanzo/i18n';
+import { useI18n } from '@hanzo/i18n/react';
 import { Button, Input, Switch } from '@hanzo/ui';
 import { useEffect, useState } from 'react';
 import { arm, balance, caps, cents, chosen, credit, grants, label, lift, limit, methods, money, monthly, recharge, spend, topup, } from '../api/billing.js';
+import { told } from '../api/call.js';
 import { useRead } from '../data.js';
 import { Card, day, Group, Note, Row, Soft } from './ui.js';
-/** What the credits section says first, on every surface. */
-export const SEPARATE = 'Credits are separate from your plan’s usage allowance. They pay for usage past it when you choose to continue with credits, and for all usage when there is no plan.';
+/** What the credits section says first, on every surface: English, marked (`phrase`), drawn through `t`. */
+export const SEPARATE = phrase('Credits are separate from your plan’s usage allowance. They pay for usage past it when you choose to continue with credits, and for all usage when there is no plan.');
 /** A money figure as read: the amount, or why there is none. */
 function Figure({ read }) {
-    return (_jsx(SizableText, { size: "$2", color: read.error ? '$soft' : '$ink', numberOfLines: 1, maxW: 200, children: read.error ? 'Unavailable' : read.loading ? '…' : money(read.value) }));
+    const { t } = useI18n();
+    return (_jsx(SizableText, { size: "$2", color: read.error ? '$soft' : '$ink', numberOfLines: 1, maxW: 200, children: read.error ? t('Unavailable') : read.loading ? '…' : money(read.value) }));
 }
 /** A thin bar of a whole, red once a limit is used up. */
 function Bar({ part, whole, limit }) {
@@ -35,15 +42,16 @@ function Meter({ title, used, of, says, first, limit = true }) {
     return (_jsxs(YStack, { gap: "$2", px: "$3", py: "$3", borderTopWidth: first ? 0 : 1, borderColor: "$borderColor", 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: "$soft", children: says })] }), _jsx(Bar, { part: used, whole: of, limit: limit })] }));
 }
 /** `Resets Oct 1, 2026`, or '' for none. */
-const resets = (iso) => (day(iso) ? `Resets ${day(iso)}` : '');
-export function Credits({ target: t, admin, add, onCard }) {
-    const left = useRead(() => balance(t), 0, [t]);
-    const granted = useRead(() => credit(t), 0, [t]);
-    const rows = useRead(() => grants(t), [], [t]);
-    const spent = useRead(() => spend(t), null, [t]);
-    const rule = useRead(() => recharge(t), null, [t]);
-    const ceilings = useRead(() => caps(t), [], [t]);
-    const cards = useRead(add ? null : () => methods(t), [], [t, add]);
+const resets = (iso, t) => (day(iso) ? t('Resets {date}', { date: day(iso) }) : '');
+export function Credits({ target, admin, add, onCard }) {
+    const { t } = useI18n();
+    const left = useRead(() => balance(target), 0, [target]);
+    const granted = useRead(() => credit(target), 0, [target]);
+    const rows = useRead(() => grants(target), [], [target]);
+    const spent = useRead(() => spend(target), null, [target]);
+    const rule = useRead(() => recharge(target), null, [target]);
+    const ceilings = useRead(() => caps(target), [], [target]);
+    const cards = useRead(add ? null : () => methods(target), [], [target, add]);
     const [buying, setBuying] = useState(false);
     const [amount, setAmount] = useState('25');
     const [ceiling, setCeiling] = useState('');
@@ -67,7 +75,7 @@ export function Credits({ target: t, admin, add, onCard }) {
             setNote(done);
         }
         catch (e) {
-            setNote(e.message);
+            setNote(told(e, t));
         }
         finally {
             setWorking(false);
@@ -82,8 +90,8 @@ export function Credits({ target: t, admin, add, onCard }) {
     const live = rows.value.filter((g) => g.active && g.remaining > 0);
     const buy = () => {
         if (!adding)
-            return setNote('Enter an amount in dollars');
-        void act(() => topup(t, adding, card.id), `${money(adding)} is added to the balance`, () => {
+            return setNote(t('Enter an amount in dollars'));
+        void act(() => topup(target, adding, card.id), t('{amount} is added to the balance', { amount: money(adding) }), () => {
             setBuying(false);
             left.reload();
         });
@@ -91,8 +99,8 @@ export function Credits({ target: t, admin, add, onCard }) {
     const setLimit = () => {
         const c = cents(ceiling);
         if (!c)
-            return setNote('Enter a monthly limit in dollars');
-        void act(() => limit(t, ceilings.value, c), `Spend stops at ${money(c)} a month`, () => {
+            return setNote(t('Enter a monthly limit in dollars'));
+        void act(() => limit(target, ceilings.value, c), t('Spend stops at {amount} a month', { amount: money(c) }), () => {
             setCeiling('');
             ceilings.reload();
         });
@@ -101,10 +109,15 @@ export function Credits({ target: t, admin, add, onCard }) {
         const threshold = below.trim() === '' || below.trim() === '0' ? 0 : cents(below);
         const each = cents(reload);
         if (enabled && (threshold === null || !each))
-            return setNote('Enter the balance to reload below and the amount to add, in dollars');
-        void act(() => arm(t, { enabled, threshold: threshold ?? 0, amount: each ?? rule.value?.amount ?? 0 }), enabled ? `Adds ${money(each ?? 0)} whenever the balance falls below ${money(threshold ?? 0)}` : 'Auto-reload is off', rule.reload);
+            return setNote(t('Enter the balance to reload below and the amount to add, in dollars'));
+        void act(() => arm(target, { enabled, threshold: threshold ?? 0, amount: each ?? rule.value?.amount ?? 0 }), enabled ? t('Adds {amount} whenever the balance falls below {floor}', { amount: money(each ?? 0), floor: money(threshold ?? 0) }) : t('Auto-reload is off'), rule.reload);
     };
-    return (_jsxs(YStack, { gap: "$6", "data-slot": "credits", children: [_jsxs(Group, { title: "Credits", detail: SEPARATE, action: add ? (_jsx(Button, { size: "sm", variant: "outline", onPress: () => window.open(add, '_blank', 'noopener'), children: "Add funds" })) : buying || !admin ? undefined : (_jsx(Button, { size: "sm", variant: "outline", onPress: () => setBuying(true), children: "Buy more" })), children: [_jsxs(Card, { children: [_jsx(Row, { first: true, title: "Prepaid balance", detail: "Bought with a card", trailing: _jsx(Figure, { read: left }) }), _jsx(Row, { title: "Granted credit", detail: "Given by Hanzo; some models take only prepaid", trailing: _jsx(Figure, { read: granted }) }), _jsx(Row, { title: "Spent this month", detail: s && !s.known ? 'The ledger did not answer, so this is not a measurement' : undefined, trailing: _jsx(Figure, { read: { ...spent, value: s?.total ?? 0 } }) }), buying ? (_jsx(YStack, { gap: "$2", px: "$3", py: "$3", borderTopWidth: 1, borderColor: "$borderColor", children: card ? (_jsxs(_Fragment, { children: [_jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", children: [_jsx(YStack, { width: 140, children: _jsx(Input, { value: amount, onChangeText: setAmount, "aria-label": "Amount in dollars", placeholder: "25", inputMode: "decimal" }) }), _jsxs(SizableText, { flex: 1, minW: 160, size: "$1", color: "$soft", children: ["Charged to ", label(card)] })] }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => setBuying(false), children: "Cancel" }), _jsx(Button, { size: "sm", disabled: working, onPress: buy, children: adding ? `Add ${money(adding)}` : 'Add funds' })] })] })) : (_jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", children: [_jsx(SizableText, { flex: 1, minW: 160, size: "$2", color: "$soft", children: cards.loading ? 'Reading cards…' : 'Add a card to buy more.' }), onCard ? (_jsx(Button, { size: "sm", variant: "outline", onPress: onCard, children: "Add card" })) : null] })) })) : null] }), live.length ? (_jsx(Card, { children: live.map((g, i) => (_jsx(Row, { first: i === 0, title: g.name || 'Credit grant', detail: [`${money(g.remaining, g.currency)} left of ${money(g.amount, g.currency)}`, g.expires ? `expires ${day(g.expires)}` : ''].filter(Boolean).join(' · ') }, g.id))) })) : null] }), _jsx(Group, { title: "Auto-reload", detail: "Tops the balance up from the card on file whenever it falls below a floor.", children: rule.error ? (_jsx(Soft, { children: rule.error.message })) : !rule.value ? (_jsx(Soft, { children: "Reading auto-reload\u2026" })) : (_jsxs(Card, { children: [_jsx(Row, { first: true, title: rule.value.enabled ? `Adds ${money(rule.value.amount)} below ${money(rule.value.threshold)}` : 'Off', detail: rule.value.last ? `Last reloaded ${day(rule.value.last)}` : admin ? undefined : 'An org admin sets auto-reload.', trailing: admin ? (_jsx(Switch, { "aria-label": "Auto-reload", checked: rule.value.enabled, disabled: working, onCheckedChange: (on) => saveRule(on) })) : undefined }), admin ? (_jsxs(XStack, { gap: "$2", items: "center", px: "$3", py: "$3", borderTopWidth: 1, borderColor: "$borderColor", flexWrap: "wrap", children: [_jsx(YStack, { width: 150, children: _jsx(Input, { value: below, onChangeText: setBelow, "aria-label": "Reload below, in dollars", placeholder: "Below $5", inputMode: "decimal" }) }), _jsx(YStack, { width: 150, children: _jsx(Input, { value: reload, onChangeText: setReload, "aria-label": "Amount to add, in dollars", placeholder: "Add $25", inputMode: "decimal" }) }), _jsx(XStack, { flex: 1, justify: "flex-end", children: _jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => saveRule(true), children: rule.value.enabled ? 'Save' : 'Turn on' }) })] })) : null] })) }), _jsx(Group, { title: "Spend this month", detail: "What credits paid for, by kind.", children: spent.error ? (_jsx(Soft, { children: spent.error.message })) : !s ? (_jsx(Soft, { children: "Reading spend\u2026" })) : s.categories.length === 0 ? (_jsx(Card, { children: _jsx(Soft, { children: "Nothing spent this month." }) })) : (_jsx(Card, { children: s.categories.map((c, i) => (_jsx(Meter, { first: i === 0, title: c.name, used: c.cents, of: top, says: money(c.cents), limit: false }, c.name))) })) }), _jsxs(Group, { title: "Monthly limit", detail: "Spend from credits past it is refused until the month starts over.", children: [ceilings.error ? (_jsx(Soft, { children: ceilings.error.message })) : (_jsxs(Card, { children: [cap ? (_jsx(Meter, { first: true, title: `${money(cap.threshold)} a month`, used: cap.spent ?? 0, of: cap.threshold, says: [cap.spent === null ? 'Spend unknown' : `${money(cap.spent)} spent`, resets(cap.resets)].filter(Boolean).join(' · ') })) : (_jsx(Row, { first: true, title: "No monthly limit", detail: "Spend is bounded by the balance alone." })), others.map((c) => (_jsx(Row, { title: c.title || 'Limit', detail: [c.project && `project ${c.project}`, c.service && `service ${c.service}`, c.enforce ? 'refuses spend past it' : 'warns only']
+    return (_jsxs(YStack, { gap: "$6", "data-slot": "credits", children: [_jsxs(Group, { title: t('Credits'), detail: t(SEPARATE), action: add ? (_jsx(Button, { size: "sm", variant: "outline", onPress: () => window.open(add, '_blank', 'noopener'), children: t('Add funds') })) : buying || !admin ? undefined : (_jsx(Button, { size: "sm", variant: "outline", onPress: () => setBuying(true), children: t('Buy more') })), children: [_jsxs(Card, { children: [_jsx(Row, { first: true, title: t('Prepaid balance'), detail: t('Bought with a card'), trailing: _jsx(Figure, { read: left }) }), _jsx(Row, { title: t('Granted credit'), detail: t('Given by Hanzo; some models take only prepaid'), trailing: _jsx(Figure, { read: granted }) }), _jsx(Row, { title: t('Spent this month'), detail: s && !s.known ? t('The ledger did not answer, so this is not a measurement') : undefined, trailing: _jsx(Figure, { read: { ...spent, value: s?.total ?? 0 } }) }), buying ? (_jsx(YStack, { gap: "$2", px: "$3", py: "$3", borderTopWidth: 1, borderColor: "$borderColor", children: card ? (_jsxs(_Fragment, { children: [_jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", children: [_jsx(YStack, { width: 140, children: _jsx(Input, { value: amount, onChangeText: setAmount, "aria-label": t('Amount in dollars'), placeholder: "25", inputMode: "decimal" }) }), _jsx(SizableText, { flex: 1, minW: 160, size: "$1", color: "$soft", children: t('Charged to {card}', { card: label(card) }) })] }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => setBuying(false), children: t('Cancel') }), _jsx(Button, { size: "sm", disabled: working, onPress: buy, children: adding ? t('Add {amount}', { amount: money(adding) }) : t('Add funds') })] })] })) : (_jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", children: [_jsx(SizableText, { flex: 1, minW: 160, size: "$2", color: "$soft", children: cards.loading ? t('Reading cards…') : t('Add a card to buy more.') }), onCard ? (_jsx(Button, { size: "sm", variant: "outline", onPress: onCard, children: t('Add card') })) : null] })) })) : null] }), live.length ? (_jsx(Card, { children: live.map((g, i) => (_jsx(Row, { first: i === 0, title: g.name || t('Credit grant'), detail: [
+                                t('{left} left of {amount}', { left: money(g.remaining, g.currency), amount: money(g.amount, g.currency) }),
+                                g.expires ? t('expires {date}', { date: day(g.expires) }) : '',
+                            ]
+                                .filter(Boolean)
+                                .join(' · ') }, g.id))) })) : null] }), _jsx(Group, { title: t('Auto-reload'), detail: t('Tops the balance up from the card on file whenever it falls below a floor.'), children: rule.error ? (_jsx(Soft, { children: told(rule.error, t) })) : !rule.value ? (_jsx(Soft, { children: t('Reading auto-reload…') })) : (_jsxs(Card, { children: [_jsx(Row, { first: true, title: rule.value.enabled ? t('Adds {amount} below {floor}', { amount: money(rule.value.amount), floor: money(rule.value.threshold) }) : t('Off'), detail: rule.value.last ? t('Last reloaded {date}', { date: day(rule.value.last) }) : admin ? undefined : t('An org admin sets auto-reload.'), trailing: admin ? (_jsx(Switch, { "aria-label": t('Auto-reload'), checked: rule.value.enabled, disabled: working, onCheckedChange: (on) => saveRule(on) })) : undefined }), admin ? (_jsxs(XStack, { gap: "$2", items: "center", px: "$3", py: "$3", borderTopWidth: 1, borderColor: "$borderColor", flexWrap: "wrap", children: [_jsx(YStack, { width: 150, children: _jsx(Input, { value: below, onChangeText: setBelow, "aria-label": t('Reload below, in dollars'), placeholder: t('Below {amount}', { amount: '$5' }), inputMode: "decimal" }) }), _jsx(YStack, { width: 150, children: _jsx(Input, { value: reload, onChangeText: setReload, "aria-label": t('Amount to add, in dollars'), placeholder: t('Add {amount}', { amount: '$25' }), inputMode: "decimal" }) }), _jsx(XStack, { flex: 1, justify: "flex-end", children: _jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => saveRule(true), children: rule.value.enabled ? t('Save') : t('Turn on') }) })] })) : null] })) }), _jsx(Group, { title: t('Spend this month'), detail: t('What credits paid for, by kind.'), children: spent.error ? (_jsx(Soft, { children: told(spent.error, t) })) : !s ? (_jsx(Soft, { children: t('Reading spend…') })) : s.categories.length === 0 ? (_jsx(Card, { children: _jsx(Soft, { children: t('Nothing spent this month.') }) })) : (_jsx(Card, { children: s.categories.map((c, i) => (_jsx(Meter, { first: i === 0, title: c.name, used: c.cents, of: top, says: money(c.cents), limit: false }, c.name))) })) }), _jsxs(Group, { title: t('Monthly limit'), detail: t('Spend from credits past it is refused until the month starts over.'), children: [ceilings.error ? (_jsx(Soft, { children: told(ceilings.error, t) })) : (_jsxs(Card, { children: [cap ? (_jsx(Meter, { first: true, title: t('{amount} a month', { amount: money(cap.threshold) }), used: cap.spent ?? 0, of: cap.threshold, says: [cap.spent === null ? t('Spend unknown') : t('{amount} spent', { amount: money(cap.spent) }), resets(cap.resets, t)].filter(Boolean).join(' · ') })) : (_jsx(Row, { first: true, title: t('No monthly limit'), detail: t('Spend is bounded by the balance alone.') })), others.map((c) => (_jsx(Row, { title: c.title || t('Limit'), detail: [c.project && t('project {name}', { name: c.project }), c.service && t('service {name}', { name: c.service }), c.enforce ? t('refuses spend past it') : t('warns only')]
                                     .filter(Boolean)
-                                    .join(' · '), trailing: _jsx(SizableText, { size: "$2", color: "$ink", children: c.threshold ? money(c.threshold) : '—' }) }, c.id))), admin ? (_jsxs(XStack, { gap: "$2", items: "center", px: "$3", py: "$3", borderTopWidth: 1, borderColor: "$borderColor", flexWrap: "wrap", children: [_jsx(YStack, { width: 160, children: _jsx(Input, { value: ceiling, onChangeText: setCeiling, "aria-label": "Monthly limit in dollars", placeholder: cap ? String(cap.threshold / 100) : '500', inputMode: "decimal" }) }), _jsxs(XStack, { flex: 1, gap: "$2", justify: "flex-end", children: [cap ? (_jsx(Button, { size: "sm", variant: "ghost", disabled: working, onPress: () => void act(() => lift(t, cap.id), 'The monthly limit is lifted', ceilings.reload), children: "Remove" })) : null, _jsx(Button, { size: "sm", variant: "outline", disabled: working || !ceiling.trim(), onPress: setLimit, children: cap ? 'Change limit' : 'Set limit' })] })] })) : null] })), !admin ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "An org admin sets the monthly limit." })) : null] }), _jsx(Note, { children: note })] }));
+                                    .join(' · '), trailing: _jsx(SizableText, { size: "$2", color: "$ink", children: c.threshold ? money(c.threshold) : '—' }) }, c.id))), admin ? (_jsxs(XStack, { gap: "$2", items: "center", px: "$3", py: "$3", borderTopWidth: 1, borderColor: "$borderColor", flexWrap: "wrap", children: [_jsx(YStack, { width: 160, children: _jsx(Input, { value: ceiling, onChangeText: setCeiling, "aria-label": t('Monthly limit in dollars'), placeholder: cap ? String(cap.threshold / 100) : '500', inputMode: "decimal" }) }), _jsxs(XStack, { flex: 1, gap: "$2", justify: "flex-end", children: [cap ? (_jsx(Button, { size: "sm", variant: "ghost", disabled: working, onPress: () => void act(() => lift(target, cap.id), t('The monthly limit is lifted'), ceilings.reload), children: t('Remove') })) : null, _jsx(Button, { size: "sm", variant: "outline", disabled: working || !ceiling.trim(), onPress: setLimit, children: cap ? t('Change limit') : t('Set limit') })] })] })) : null] })), !admin ? (_jsx(SizableText, { size: "$1", color: "$soft", children: t('An org admin sets the monthly limit.') })) : null] }), _jsx(Note, { children: note })] }));
 }

package/lib/settings/environments.js

@@ -5,49 +5,56 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * One opens in the same editor a run shows beside it. A member reads; an org
  * admin saves, sets secrets and forgets an environment, which is the platform's
  * rule and not a choice made here.
+ *
+ * Its words are the reader's language (@hanzo/i18n `t`); a codebase's name is
+ * its own, drawn as given.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
 import { ChevronLeft, ChevronRight } from '@hanzogui/lucide-icons-2';
+import { phrase } from '@hanzo/i18n';
+import { useI18n } from '@hanzo/i18n/react';
 import { Button } from '@hanzo/ui';
 import { useState } from 'react';
+import { told } from '../api/call.js';
 import { environments, forget } from '../api/environment.js';
 import { Confirm } from '../ask.js';
 import { useRead } from '../data.js';
 import { Environment } from '../environment.js';
 import { useHost, useTarget } from '../host.js';
 import { Card, Heading, Note, Row, Soft } from './ui.js';
-const STATE = { none: 'Not set up', proposed: 'Proposed, waiting for review', ready: 'Ready' };
-/** The line under a codebase: where it stands, its secrets, when it was saved. */
-function about(e) {
-    const parts = [STATE[e.state]];
+const STATE = { none: phrase('Not set up'), proposed: phrase('Proposed, waiting for review'), ready: phrase('Ready') };
+/** The line under a codebase: where it stands, its secrets, when it was saved, each fact in the reader's words. */
+function about(e, t) {
+    const parts = [t(STATE[e.state])];
     if (e.secrets.length)
-        parts.push(e.secrets.length === 1 ? '1 secret' : `${e.secrets.length} secrets`);
+        parts.push(e.secrets.length === 1 ? t('1 secret') : t('{n} secrets', { n: e.secrets.length }));
     const when = e.updated ? new Date(e.updated) : null;
     if (when && !Number.isNaN(when.getTime()))
-        parts.push(`Updated ${when.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })}`);
+        parts.push(t('Updated {date}', { date: when.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }) }));
     return parts.join(' · ');
 }
 export function Environments() {
+    const { t } = useI18n();
     const host = useHost();
-    const t = useTarget();
+    const target = useTarget();
     const signed = Boolean(host.person);
-    const list = useRead(signed ? () => environments(t) : null, [], [t, signed]);
+    const list = useRead(signed ? () => environments(target) : null, [], [target, signed]);
     const [open, setOpen] = useState('');
     const [forgetting, setForgetting] = useState(false);
     const [note, setNote] = useState('');
     if (!signed) {
-        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Environments" }), _jsx(Soft, { children: "Sign in to see your organization\u2019s environments." })] }));
+        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: t('Environments') }), _jsx(Soft, { children: t('Sign in to see your organization’s environments.') })] }));
     }
     if (open) {
-        return (_jsxs(YStack, { gap: "$5", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsxs(Button, { size: "sm", variant: "ghost", onPress: () => setOpen(''), children: [_jsx(ChevronLeft, { size: 14 }), " All environments"] }), _jsx(XStack, { flex: 1 }), host.admin ? (_jsx(Button, { size: "sm", variant: "outline", onPress: () => setForgetting(true), children: "Forget" })) : null] }), _jsx(Environment, { repo: open, busy: false }), _jsx(Confirm, { open: forgetting, onOpenChange: setForgetting, title: `Forget ${open}’s environment?`, says: "Later runs on this codebase start bare: its scripts are dropped and every secret it holds is removed from KMS. This cannot be undone.", act: "Forget", run: async () => {
-                        await forget(t, open);
-                        setNote(`${open}’s environment is forgotten`);
+        return (_jsxs(YStack, { gap: "$5", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsxs(Button, { size: "sm", variant: "ghost", onPress: () => setOpen(''), children: [_jsx(ChevronLeft, { size: 14, 'data-i18n-mirror': '' }), " ", t('All environments')] }), _jsx(XStack, { flex: 1 }), host.admin ? (_jsx(Button, { size: "sm", variant: "outline", onPress: () => setForgetting(true), children: t('Forget') })) : null] }), _jsx(Environment, { repo: open, busy: false }), _jsx(Confirm, { open: forgetting, onOpenChange: setForgetting, title: t('Forget {repo}’s environment?', { repo: open }), says: t('Later runs on this codebase start bare: its scripts are dropped and every secret it holds is removed from KMS. This cannot be undone.'), act: t('Forget'), run: async () => {
+                        await forget(target, open);
+                        setNote(t('{repo}’s environment is forgotten', { repo: open }));
                         setOpen('');
                         list.reload();
                     } })] }));
     }
-    return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Environments", detail: "What a sandbox run does to a codebase before its agent starts: the install script, the start command, and the secrets it exports." }), list.error ? (_jsx(Soft, { children: list.error.message })) : list.loading && list.value.length === 0 ? (_jsx(Soft, { children: "Reading environments\u2026" })) : list.value.length === 0 ? (_jsx(Soft, { children: "No codebase has an environment yet. Set one up from New, or from a run\u2019s Environment tab." })) : (_jsx(Card, { children: list.value.map((e, i) => (_jsx(YStack, { render: "button", "aria-label": `Open ${e.repo}`, onPress: () => {
+    return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: t('Environments'), detail: t('What a sandbox run does to a codebase before its agent starts: the install script, the start command, and the secrets it exports.') }), list.error ? (_jsx(Soft, { children: told(list.error, t) })) : list.loading && list.value.length === 0 ? (_jsx(Soft, { children: t('Reading environments…') })) : list.value.length === 0 ? (_jsx(Soft, { children: t('No codebase has an environment yet. Set one up from New, or from a run’s Environment tab.') })) : (_jsx(Card, { children: list.value.map((e, i) => (_jsx(YStack, { render: "button", "aria-label": t('Open {repo}', { repo: e.repo }), onPress: () => {
                         setNote('');
                         setOpen(e.repo);
-                    }, cursor: "pointer", hoverStyle: { bg: '$hover' }, style: { textAlign: 'left' }, children: _jsx(Row, { first: i === 0, title: e.repo, detail: about(e), trailing: _jsx(ChevronRight, { size: 16, opacity: 0.6 }) }) }, e.repo))) })), !host.admin ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "An org admin saves an environment and sets its secrets." })) : null, _jsx(Note, { children: note })] }));
+                    }, cursor: "pointer", hoverStyle: { bg: '$hover' }, "$platform-web": { textAlign: 'start' }, children: _jsx(Row, { first: i === 0, title: e.repo, detail: about(e, t), trailing: _jsx(ChevronRight, { size: 16, opacity: 0.6, 'data-i18n-mirror': '' }) }) }, e.repo))) })), !host.admin ? (_jsx(SizableText, { size: "$1", color: "$soft", children: t('An org admin saves an environment and sets its secrets.') })) : null, _jsx(Note, { children: note })] }));
 }

package/lib/settings/general.js

@@ -3,43 +3,55 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * General: how the builder looks and listens — the theme, the text size, the
  * motion, and the language dictation hears. Each choice is saved to the
  * person's own settings as it is made, so it follows them to every device.
+ *
+ * Its words are the reader's language (@hanzo/i18n `t`); a language is named
+ * in its own words, as given.
  */
 import { YStack } from '@hanzo/gui';
+import { phrase } from '@hanzo/i18n';
+import { useI18n } from '@hanzo/i18n/react';
 import { ChipSelect } from '@hanzo/ui/product';
 import { useState } from 'react';
+import { told } from '../api/call.js';
 import { useHost } from '../host.js';
 import { usePrefs } from '../prefs.js';
 import { LANGUAGES, spoken } from '../voice.js';
 import { Card, Group, Heading, Note, Row, Soft } from './ui.js';
+/** The choices, each word English and marked (`phrase`): drawn through `t`. */
 const THEMES = [
-    { id: 'system', label: 'System' },
-    { id: 'light', label: 'Light' },
-    { id: 'dark', label: 'Dark' },
+    { id: 'system', label: phrase('System') },
+    { id: 'light', label: phrase('Light') },
+    { id: 'dark', label: phrase('Dark') },
 ];
 const TEXTS = [
-    { id: 'small', label: 'Small' },
-    { id: 'medium', label: 'Medium' },
-    { id: 'large', label: 'Large' },
+    { id: 'small', label: phrase('Small') },
+    { id: 'medium', label: phrase('Medium') },
+    { id: 'large', label: phrase('Large') },
 ];
 const MOTIONS = [
-    { id: 'system', label: 'System', hint: 'As this device is set' },
-    { id: 'reduced', label: 'Reduced', hint: 'No animation anywhere' },
+    { id: 'system', label: phrase('System'), hint: phrase('As this device is set') },
+    { id: 'reduced', label: phrase('Reduced'), hint: phrase('No animation anywhere') },
 ];
 export function General() {
+    const { t } = useI18n();
     const host = useHost();
     const { prefs, save } = usePrefs();
     const [note, setNote] = useState('');
     if (!host.person) {
-        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "General" }), _jsx(Soft, { children: "Sign in to see your settings." })] }));
+        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: t('General') }), _jsx(Soft, { children: t('Sign in to see your settings.') })] }));
     }
     const keep = (patch) => {
         setNote('');
-        save(patch).catch((e) => setNote(e.message));
+        save(patch).catch((e) => setNote(told(e, t)));
     };
+    // The choices in the reader's words, kept by id.
+    const themes = THEMES.map((x) => ({ ...x, label: t(x.label) }));
+    const texts = TEXTS.map((x) => ({ ...x, label: t(x.label) }));
+    const motions = MOTIONS.map((x) => ({ ...x, label: t(x.label), hint: t(x.hint) }));
     // Each choice is one of its list: a saved one was read against it, and a host's theme is one of THEMES.
-    const theme = THEMES.find((x) => x.id === (prefs.theme ?? host.theme ?? 'dark'));
-    const text = TEXTS.find((x) => x.id === (prefs.text ?? 'medium'));
-    const motion = MOTIONS.find((x) => x.id === (prefs.motion ?? 'system'));
+    const theme = themes.find((x) => x.id === (prefs.theme ?? host.theme ?? 'dark'));
+    const text = texts.find((x) => x.id === (prefs.text ?? 'medium'));
+    const motion = motions.find((x) => x.id === (prefs.motion ?? 'system'));
     const language = LANGUAGES.find((l) => l.id === prefs.language) ?? LANGUAGES.find((l) => l.id === spoken());
-    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "General", detail: "How Hanzo looks and listens. Saved to your account, so it follows you." }), _jsx(Group, { title: "Appearance", children: _jsxs(Card, { children: [host.chooseTheme ? (_jsx(Row, { first: true, title: "Theme", detail: "System follows this device\u2019s light or dark setting.", trailing: _jsx(ChipSelect, { name: "Theme", label: theme.label, chosen: theme, items: THEMES, onChange: (x) => keep({ theme: x.id }), placement: "bottom-end", width: 200 }) })) : null, _jsx(Row, { first: !host.chooseTheme, title: "Text size", detail: "The transcript, the composer and every screen.", trailing: _jsx(ChipSelect, { name: "Text size", label: text.label, chosen: text, items: TEXTS, onChange: (x) => keep({ text: x.id === 'medium' ? null : x.id }), placement: "bottom-end", width: 200 }) }), _jsx(Row, { title: "Motion", detail: "Reduced stops animations and transitions on this page.", trailing: _jsx(ChipSelect, { name: "Motion", label: motion.label, chosen: motion, items: MOTIONS, onChange: (x) => keep({ motion: x.id === 'system' ? null : x.id }), placement: "bottom-end", width: 220 }) })] }) }), _jsx(Group, { title: "Voice", children: _jsx(Card, { children: _jsx(Row, { first: true, title: "Dictation language", detail: "What the microphone in the composer listens for.", trailing: _jsx(ChipSelect, { name: "Dictation language", label: language.label, chosen: language, items: LANGUAGES, onChange: (l) => keep({ language: l.id }), placeholder: "Search languages\u2026", placement: "bottom-end", width: 220 }) }) }) }), _jsx(Note, { children: note })] }));
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: t('General'), detail: t('How Hanzo looks and listens. Saved to your account, so it follows you.') }), _jsx(Group, { title: t('Appearance'), children: _jsxs(Card, { children: [host.chooseTheme ? (_jsx(Row, { first: true, title: t('Theme'), detail: t('System follows this device’s light or dark setting.'), trailing: _jsx(ChipSelect, { name: t('Theme'), label: theme.label, chosen: theme, items: themes, onChange: (x) => keep({ theme: x.id }), placement: "bottom-end", width: 200 }) })) : null, _jsx(Row, { first: !host.chooseTheme, title: t('Text size'), detail: t('The transcript, the composer and every screen.'), trailing: _jsx(ChipSelect, { name: t('Text size'), label: text.label, chosen: text, items: texts, onChange: (x) => keep({ text: x.id === 'medium' ? null : x.id }), placement: "bottom-end", width: 200 }) }), _jsx(Row, { title: t('Motion'), detail: t('Reduced stops animations and transitions on this page.'), trailing: _jsx(ChipSelect, { name: t('Motion'), label: motion.label, chosen: motion, items: motions, onChange: (x) => keep({ motion: x.id === 'system' ? null : x.id }), placement: "bottom-end", width: 220 }) })] }) }), _jsx(Group, { title: t('Voice'), children: _jsx(Card, { children: _jsx(Row, { first: true, title: t('Dictation language'), detail: t('What the microphone in the composer listens for.'), trailing: _jsx(ChipSelect, { name: t('Dictation language'), label: language.label, chosen: language, items: LANGUAGES, onChange: (l) => keep({ language: l.id }), placeholder: t('Search languages…'), placement: "bottom-end", width: 220 }) }) }) }), _jsx(Note, { children: note })] }));
 }

package/lib/settings/index.js

@@ -4,19 +4,22 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * workspace's environments, machines and keys, what the agent brings to a run,
  * and the organization's integrations, members, usage and notifications. A
  * section is its own address, so it can be linked to and comes back on reload.
+ * Its words are the reader's language (@hanzo/i18n `t`).
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { useI18n } from '@hanzo/i18n/react';
 import { useHost } from '../host.js';
 import { path } from '../route.js';
 import { heading } from './list.js';
 import { ENTRIES, GROUPS } from './sections.js';
 export function Settings({ section }) {
+    const { t } = useI18n();
     const host = useHost();
     // Every section the route grammar names has an entry.
     const entry = ENTRIES.find((e) => e.id === section);
     const go = (id) => host.go(path({ kind: 'settings', section: id }));
-    return (_jsxs(XStack, { flex: 1, minH: 0, minW: 0, children: [host.sections ? null : (_jsxs(YStack, { role: "navigation", "aria-label": "Settings", width: 220, shrink: 0, borderRightWidth: 1, borderColor: "$borderColor", px: "$2", py: "$4", gap: "$4", overflow: "scroll", "$max-md": { display: 'none' }, children: [_jsx(SizableText, { size: "$4", color: "$ink", px: "$2", children: "Settings" }), GROUPS.map((g) => {
+    return (_jsxs(XStack, { flex: 1, minH: 0, minW: 0, children: [host.sections ? null : (_jsxs(YStack, { role: "navigation", "aria-label": t('Settings'), width: 220, shrink: 0, borderInlineEndWidth: 1, borderColor: "$borderColor", px: "$2", py: "$4", gap: "$4", overflow: "scroll", "$max-md": { display: 'none' }, children: [_jsx(SizableText, { size: "$4", color: "$ink", px: "$2", children: t('Settings') }), GROUPS.map((g) => {
                         const list = ENTRIES.filter((e) => e.group === g);
-                        return (_jsxs(YStack, { gap: "$0.5", children: [heading(g) ? (_jsx(SizableText, { size: "$1", color: "$soft", px: "$2", pb: "$1", children: g })) : null, list.map((e) => (_jsx(XStack, { render: "button", "aria-label": e.label, "aria-current": e.id === entry.id ? 'page' : undefined, onPress: () => go(e.id), px: "$2", py: "$1.5", rounded: "$2", bg: e.id === entry.id ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, children: _jsx(SizableText, { size: "$2", color: e.id === entry.id ? '$ink' : '$soft', children: e.label }) }, e.id)))] }, g));
-                    })] })), _jsxs(YStack, { flex: 1, minW: 0, minH: 0, overflow: "scroll", children: [_jsx(XStack, { flexWrap: "wrap", gap: "$1.5", px: "$4", pt: "$3", $md: { display: 'none' }, children: ENTRIES.map((e) => (_jsx(XStack, { render: "button", "aria-label": e.label, onPress: () => go(e.id), px: "$2.5", py: "$1", rounded: "$10", borderWidth: 1, borderColor: e.id === entry.id ? '$ink' : '$borderColor', children: _jsx(SizableText, { size: "$1", color: e.id === entry.id ? '$ink' : '$soft', children: e.label }) }, e.id))) }), _jsx(YStack, { width: "100%", maxW: 760, self: "center", px: "$5", py: "$6", children: entry.body() })] })] }));
+                        return (_jsxs(YStack, { gap: "$0.5", children: [heading(g) ? (_jsx(SizableText, { size: "$1", color: "$soft", px: "$2", pb: "$1", children: t(heading(g)) })) : null, list.map((e) => (_jsx(XStack, { render: "button", "aria-label": t(e.label), "aria-current": e.id === entry.id ? 'page' : undefined, onPress: () => go(e.id), px: "$2", py: "$1.5", rounded: "$2", bg: e.id === entry.id ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, children: _jsx(SizableText, { size: "$2", color: e.id === entry.id ? '$ink' : '$soft', children: t(e.label) }) }, e.id)))] }, g));
+                    })] })), _jsxs(YStack, { flex: 1, minW: 0, minH: 0, overflow: "scroll", children: [_jsx(XStack, { flexWrap: "wrap", gap: "$1.5", px: "$4", pt: "$3", $md: { display: 'none' }, children: ENTRIES.map((e) => (_jsx(XStack, { render: "button", "aria-label": t(e.label), onPress: () => go(e.id), px: "$2.5", py: "$1", rounded: "$10", borderWidth: 1, borderColor: e.id === entry.id ? '$ink' : '$borderColor', children: _jsx(SizableText, { size: "$1", color: e.id === entry.id ? '$ink' : '$soft', children: t(e.label) }) }, e.id))) }), _jsx(YStack, { width: "100%", maxW: 760, self: "center", px: "$5", py: "$6", children: entry.body() })] })] }));
 }

package/lib/settings/integrations.js

@@ -9,11 +9,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * (../back.ts), which this page finishes and reports. Anyone connects their own
  * GitHub; installing the App and connecting Slack are an org admin's, which is
  * the platform's rule.
+ *
+ * Its words are the reader's language (@hanzo/i18n `t`); an account's,
+ * a channel's and a provider's names, and the platform's own notes, are drawn
+ * as given.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { useI18n } from '@hanzo/i18n/react';
 import { Github, Hash, Lock, Megaphone, Slack } from '@hanzogui/lucide-icons-2';
 import { Button } from '@hanzo/ui';
 import { useState } from 'react';
+import { told } from '../api/call.js';
 import { connect, connection, disconnect as unlinkGithub, installations } from '../api/github.js';
 import { authorize, channels, disconnect, read, SOCIAL } from '../api/provider.js';
 import { here, useBack } from '../back.js';
@@ -21,25 +27,26 @@ import { useRead } from '../data.js';
 import { useHost, useTarget } from '../host.js';
 import { Card, day, Group, Heading, Note, Row, Soft } from './ui.js';
 export function Integrations() {
+    const { t } = useI18n();
     const host = useHost();
-    const t = useTarget();
+    const target = useTarget();
     const signed = Boolean(host.person);
-    const mine = useRead(signed ? () => connection(t) : null, null, [t, signed]);
-    const installed = useRead(signed ? () => installations(t) : null, [], [t, signed]);
-    const slack = useRead(signed ? () => read(t, 'slack') : null, null, [t, signed]);
+    const mine = useRead(signed ? () => connection(target) : null, null, [target, signed]);
+    const installed = useRead(signed ? () => installations(target) : null, [], [target, signed]);
+    const slack = useRead(signed ? () => read(target, 'slack') : null, null, [target, signed]);
     const joined = slack.value?.connected ?? false;
-    const rooms = useRead(signed && joined ? () => channels(t) : null, { channels: [], next: '' }, [t, signed, joined]);
+    const rooms = useRead(signed && joined ? () => channels(target) : null, { channels: [], next: '' }, [target, signed, joined]);
     const social = useSocial(signed, SOCIAL.map((p) => p.id));
     const [working, setWorking] = useState(false);
     const [note, setNote] = useState('');
-    useBack(t, signed, setNote, () => {
+    useBack(target, signed, setNote, () => {
         mine.reload();
         installed.reload();
         slack.reload();
         social.reload();
     });
     if (!signed) {
-        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Integrations" }), _jsx(Soft, { children: "Sign in to see this organization\u2019s integrations." })] }));
+        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: t('Integrations') }), _jsx(Soft, { children: t('Sign in to see this organization’s integrations.') })] }));
     }
     const act = async (what, done, after) => {
         setWorking(true);
@@ -50,7 +57,7 @@ export function Integrations() {
             setNote(done);
         }
         catch (e) {
-            setNote(e.message);
+            setNote(told(e, t));
         }
         finally {
             setWorking(false);
@@ -64,42 +71,49 @@ export function Integrations() {
             host.open(await where());
         }
         catch (e) {
-            setNote(e.message);
+            setNote(told(e, t));
             setWorking(false);
         }
     };
     const me = mine.value;
     const s = slack.value;
-    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Integrations", detail: `What ${host.org ?? 'this organization'} and you have connected.` }), _jsxs(Group, { title: "GitHub", detail: "Your connection brings your repositories; the App brings an account\u2019s to the organization.", children: [_jsxs(Card, { children: [_jsx(Row, { first: true, leading: _jsx(Github, { size: 16 }), title: "Your GitHub", detail: mine.error
-                                    ? mine.error.message
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: t('Integrations'), detail: host.org ? t('What {org} and you have connected.', { org: host.org }) : t('What this organization and you have connected.') }), _jsxs(Group, { title: "GitHub", detail: t('Your connection brings your repositories; the App brings an account’s to the organization.'), children: [_jsxs(Card, { children: [_jsx(Row, { first: true, leading: _jsx(Github, { size: 16 }), title: t('Your GitHub'), detail: mine.error
+                                    ? told(mine.error, t)
                                     : !me
-                                        ? 'Reading…'
+                                        ? t('Reading…')
                                         : !me.configured
-                                            ? 'This deployment cannot connect GitHub yet.'
+                                            ? t('This deployment cannot connect GitHub yet.')
                                             : me.connected
-                                                ? `Connected as @${me.login}`
-                                                : 'Not connected', trailing: me?.configured ? (me.connected ? (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void act(() => unlinkGithub(t), 'Your GitHub is disconnected', mine.reload), children: "Disconnect" })) : (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void away(() => connect(t, here())), children: "Connect" }))) : null }), installed.error ? (_jsx(Row, { title: "App installations", detail: installed.error.message })) : (installed.value.map((i) => (_jsx(Row, { leading: _jsx(Github, { size: 16 }), title: i.login, detail: [i.type, i.grant === 'all' ? 'every repository' : i.grant === 'selected' ? 'selected repositories' : ''].filter(Boolean).join(' · '), trailing: _jsx(SizableText, { size: "$1", color: i.connected ? '$ink' : '$soft', children: i.connected ? 'Installed' : 'Removed on GitHub' }) }, i.login)))), !installed.error && !installed.loading && installed.value.length === 0 ? (_jsx(Row, { title: "No GitHub accounts installed", detail: "Install the App on a GitHub account to bring its repositories here." })) : null] }), host.admin ? (_jsx(XStack, { children: _jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void away(() => authorize(t, 'github', here())), children: "Install on a GitHub account" }) })) : (_jsx(SizableText, { size: "$1", color: "$soft", children: "An org admin installs the App on a GitHub account." }))] }), _jsxs(Group, { title: "Slack", detail: "Talk to Hanzo from your workspace\u2019s channels.", children: [_jsxs(Card, { children: [_jsx(Row, { first: true, leading: _jsx(Slack, { size: 16 }), title: s?.connected && s.account ? s.account : 'Slack', detail: slack.error
-                                    ? slack.error.message
+                                                ? t('Connected as @{login}', { login: me.login })
+                                                : t('Not connected'), trailing: me?.configured ? (me.connected ? (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void act(() => unlinkGithub(target), t('Your GitHub is disconnected'), mine.reload), children: t('Disconnect') })) : (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void away(() => connect(target, here())), children: t('Connect') }))) : null }), installed.error ? (_jsx(Row, { title: t('App installations'), detail: told(installed.error, t) })) : (installed.value.map((i) => (_jsx(Row, { leading: _jsx(Github, { size: 16 }), title: i.login, detail: [i.type, i.grant === 'all' ? t('every repository') : i.grant === 'selected' ? t('selected repositories') : ''].filter(Boolean).join(' · '), trailing: _jsx(SizableText, { size: "$1", color: i.connected ? '$ink' : '$soft', children: i.connected ? t('Installed') : t('Removed on GitHub') }) }, i.login)))), !installed.error && !installed.loading && installed.value.length === 0 ? (_jsx(Row, { title: t('No GitHub accounts installed'), detail: t('Install the App on a GitHub account to bring its repositories here.') })) : null] }), host.admin ? (_jsx(XStack, { children: _jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void away(() => authorize(target, 'github', here())), children: t('Install on a GitHub account') }) })) : (_jsx(SizableText, { size: "$1", color: "$soft", children: t('An org admin installs the App on a GitHub account.') }))] }), _jsxs(Group, { title: "Slack", detail: t('Talk to Hanzo from your workspace’s channels.'), children: [_jsxs(Card, { children: [_jsx(Row, { first: true, leading: _jsx(Slack, { size: 16 }), title: s?.connected && s.account ? s.account : 'Slack', detail: slack.error
+                                    ? told(slack.error, t)
                                     : !s
-                                        ? 'Reading…'
+                                        ? t('Reading…')
                                         : s.connected
-                                            ? `Connected${s.since ? ` since ${day(s.since)}` : ''}`
+                                            ? s.since
+                                                ? t('Connected since {day}', { day: day(s.since) })
+                                                : t('Connected')
                                             : s.available
-                                                ? 'Not connected'
-                                                : s.note || 'This deployment cannot connect Slack yet.', trailing: host.admin && s && (s.connected || s.available) ? (s.connected ? (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void act(() => disconnect(t, 'slack'), 'Slack is disconnected', slack.reload), children: "Disconnect" })) : (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void away(() => authorize(t, 'slack', here())), children: "Connect" }))) : null }), joined && rooms.error ? _jsx(Row, { title: "Channels", detail: rooms.error.message }) : null, joined
-                                ? rooms.value.channels.map((c) => (_jsx(Row, { leading: c.private ? _jsx(Lock, { size: 14 }) : _jsx(Hash, { size: 14 }), title: c.name || c.id, trailing: _jsx(SizableText, { size: "$1", color: c.member ? '$ink' : '$soft', children: c.member ? 'Joined' : 'Not joined' }) }, c.id)))
-                                : null] }), !host.admin ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "An org admin connects the Slack workspace." })) : null] }), _jsxs(Group, { title: "Social accounts", detail: "Where automations post what their agent writes.", children: [_jsx(Card, { children: SOCIAL.map((p, i) => {
+                                                ? t('Not connected')
+                                                : s.note || t('This deployment cannot connect Slack yet.'), trailing: host.admin && s && (s.connected || s.available) ? (s.connected ? (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void act(() => disconnect(target, 'slack'), t('{name} is disconnected', { name: 'Slack' }), slack.reload), children: t('Disconnect') })) : (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void away(() => authorize(target, 'slack', here())), children: t('Connect') }))) : null }), joined && rooms.error ? _jsx(Row, { title: t('Channels'), detail: told(rooms.error, t) }) : null, joined
+                                ? rooms.value.channels.map((c) => (_jsx(Row, { leading: c.private ? _jsx(Lock, { size: 14 }) : _jsx(Hash, { size: 14 }), title: c.name || c.id, trailing: _jsx(SizableText, { size: "$1", color: c.member ? '$ink' : '$soft', children: c.member ? t('Joined') : t('Not joined') }) }, c.id)))
+                                : null] }), !host.admin ? (_jsx(SizableText, { size: "$1", color: "$soft", children: t('An org admin connects the Slack workspace.') })) : null] }), _jsxs(Group, { title: t('Social accounts'), detail: t('Where automations post what their agent writes.'), children: [_jsx(Card, { children: SOCIAL.map((p, i) => {
                             const c = social.value[p.id];
                             return (_jsx(Row, { first: i === 0, leading: _jsx(Megaphone, { size: 16 }), title: c?.connected && c.account ? `${p.name} · ${c.account}` : p.name, detail: social.error
-                                    ? social.error.message
+                                    ? told(social.error, t)
                                     : !c
-                                        ? 'Reading…'
+                                        ? t('Reading…')
                                         : c.connected
-                                            ? `Connected${c.since ? ` since ${day(c.since)}` : ''}${p.takes ? `. ${p.takes}` : ''}`
+                                            ? // Connected, then what the account takes, as two sentences.
+                                                p.takes
+                                                    ? `${c.since ? t('Connected since {day}.', { day: day(c.since) }) : t('Connected.')} ${t(p.takes)}`
+                                                    : c.since
+                                                        ? t('Connected since {day}', { day: day(c.since) })
+                                                        : t('Connected')
                                             : c.available
-                                                ? p.takes || 'Not connected'
-                                                : p.takes ? `${p.takes} ${p.needs}` : p.needs, trailing: host.admin && c && (c.connected || c.available) ? (c.connected ? (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void act(() => disconnect(t, p.id), `${p.name} is disconnected`, social.reload), children: "Disconnect" })) : (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void away(() => authorize(t, p.id, here())), "aria-label": `Connect ${p.name}`, children: "Connect" }))) : null }, p.id));
-                        }) }), !host.admin ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "An org admin connects the organization\u2019s social accounts." })) : null] }), _jsx(Note, { children: note })] }));
+                                                ? p.takes ? t(p.takes) : t('Not connected')
+                                                : p.takes ? `${t(p.takes)} ${t(p.needs)}` : t(p.needs), trailing: host.admin && c && (c.connected || c.available) ? (c.connected ? (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void act(() => disconnect(target, p.id), t('{name} is disconnected', { name: p.name }), social.reload), children: t('Disconnect') })) : (_jsx(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => void away(() => authorize(target, p.id, here())), "aria-label": t('Connect {name}', { name: p.name }), children: t('Connect') }))) : null }, p.id));
+                        }) }), !host.admin ? (_jsx(SizableText, { size: "$1", color: "$soft", children: t('An org admin connects the organization’s social accounts.') })) : null] }), _jsx(Note, { children: note })] }));
 }
 /**
  * The named social connectors, by id: whether each can be connected here and