@hanzo/build 0.2.80 → 0.2.81

package/lib/settings/keys.js

@@ -5,55 +5,69 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * own credential: creating one never touches another, and revoking one stops only
  * that one. A secret key is shown once, when it is made. A limit narrows what a
  * key reaches; it never reaches further than you do.
+ *
+ * Its words are the reader's language (@hanzo/i18n `t`); a key's name, its
+ * prefix and its kind:name limits are drawn as given.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { phrase } from '@hanzo/i18n';
+import { useI18n } from '@hanzo/i18n/react';
 import { Button, Dialog, DialogContent, DialogTitle, Input } from '@hanzo/ui';
 import { CopyButton } from '@hanzo/ui/product';
 import { useState } from 'react';
+import { told } from '../api/call.js';
 import { keys, KINDS, limits, mint, revoke } from '../api/keys.js';
 import { Confirm } from '../ask.js';
 import { useRead } from '../data.js';
 import { useHost, useTarget } from '../host.js';
 import { Card, Field, Heading, Note, Once, Row, Soft } from './ui.js';
-const NAME = { secret: 'Secret key', publishable: 'Publishable key' };
+/** Each kind's words, whole, so a language says the kind its own way: its name, its create control and label, and the dialog's titles. */
+const NAME = { secret: phrase('Secret key'), publishable: phrase('Publishable key') };
+const CREATE = { secret: phrase('Create secret key'), publishable: phrase('Create publishable key') };
+const CREATE_A = { secret: phrase('Create a secret key'), publishable: phrase('Create a publishable key') };
+const NEW = { secret: phrase('Your new secret key'), publishable: phrase('Your new publishable key') };
+/** The statuses IAM names besides active, as words; one it does not is drawn as given. */
+const STATUS = { expired: phrase('Expired'), revoked: phrase('Revoked'), disabled: phrase('Disabled') };
 /** The line under a key: its head, what it reaches, when it was made, and where it stands. */
-function about(k) {
+function about(k, t) {
     const when = k.created ? new Date(k.created) : null;
     return [
         k.type === 'secret' && k.prefix ? `${k.prefix}…` : '',
-        k.type === 'publishable' ? 'Publishable' : '',
-        k.limit.length ? `Reaches ${k.limit.join(', ')}` : 'Unrestricted',
-        when && !Number.isNaN(when.getTime()) ? `Created ${when.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })}` : '',
-        k.status !== 'active' ? k.status[0].toUpperCase() + k.status.slice(1) : '',
+        k.type === 'publishable' ? t('Publishable') : '',
+        k.limit.length ? t('Reaches {limits}', { limits: k.limit.join(', ') }) : t('Unrestricted'),
+        when && !Number.isNaN(when.getTime()) ? t('Created {date}', { date: when.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }) }) : '',
+        k.status !== 'active' ? (STATUS[k.status] ? t(STATUS[k.status]) : k.status[0].toUpperCase() + k.status.slice(1)) : '',
     ]
         .filter(Boolean)
         .join(' · ');
 }
 export function Keys() {
+    const { t } = useI18n();
     const host = useHost();
-    const t = useTarget();
+    const target = useTarget();
     const signed = Boolean(host.person);
-    const list = useRead(signed ? () => keys(t) : null, [], [t, signed]);
+    const list = useRead(signed ? () => keys(target) : null, [], [target, signed]);
     const [making, setMaking] = useState(null);
     const [revoking, setRevoking] = useState(null);
     const [note, setNote] = useState('');
     if (!signed) {
-        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "API keys" }), _jsx(Soft, { children: "Sign in to see your API keys." })] }));
+        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: t('API keys') }), _jsx(Soft, { children: t('Sign in to see your API keys.') })] }));
     }
-    return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "API keys", detail: "Your keys for calling api.hanzo.ai from code. Make one for each app; revoking one stops only that one." }), _jsx(XStack, { gap: "$2", children: KINDS.map((type) => (_jsx(Button, { size: "sm", variant: "outline", "aria-label": `Create a ${type} key`, onPress: () => setMaking(type), children: `Create ${NAME[type].toLowerCase()}` }, type))) }), list.error ? (_jsx(Soft, { children: list.error.message })) : list.loading && list.value.length === 0 ? (_jsx(Soft, { children: "Reading your keys\u2026" })) : list.value.length === 0 ? (_jsx(Soft, { children: "No keys yet." })) : (_jsx(Card, { children: list.value.map((k, i) => (_jsxs(YStack, { borderTopWidth: i ? 1 : 0, borderColor: "$borderColor", opacity: k.status === 'active' ? 1 : 0.55, children: [_jsx(Row, { first: true, title: k.name || NAME[k.type], detail: about(k), trailing: k.status === 'revoked' ? null : (_jsx(Button, { size: "sm", variant: "ghost", "aria-label": `Revoke ${k.name || k.id}`, onPress: () => setRevoking(k), children: "Revoke" })) }), k.type === 'publishable' && k.key ? (_jsxs(XStack, { items: "center", gap: "$2", px: "$3", pb: "$2.5", children: [_jsx(SizableText, { flex: 1, minW: 0, size: "$1", color: "$soft", numberOfLines: 1, "aria-label": "Publishable key", style: { fontFamily: 'var(--f-mono, ui-monospace, monospace)' }, children: k.key }), _jsx(CopyButton, { value: k.key, label: "Copy publishable key" })] })) : null] }, k.id))) })), _jsx(Note, { children: note }), _jsx(Making, { type: making, onClose: () => setMaking(null), onMade: (m) => {
-                    setNote(`${m.name || NAME[m.type]} created`);
+    return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: t('API keys'), detail: t('Your keys for calling {api} from code. Make one for each app; revoking one stops only that one.', { api: 'api.hanzo.ai' }) }), _jsx(XStack, { gap: "$2", children: KINDS.map((type) => (_jsx(Button, { size: "sm", variant: "outline", "aria-label": t(CREATE_A[type]), onPress: () => setMaking(type), children: t(CREATE[type]) }, type))) }), list.error ? (_jsx(Soft, { children: told(list.error, t) })) : list.loading && list.value.length === 0 ? (_jsx(Soft, { children: t('Reading your keys…') })) : list.value.length === 0 ? (_jsx(Soft, { children: t('No keys yet.') })) : (_jsx(Card, { children: list.value.map((k, i) => (_jsxs(YStack, { borderTopWidth: i ? 1 : 0, borderColor: "$borderColor", opacity: k.status === 'active' ? 1 : 0.55, children: [_jsx(Row, { first: true, title: k.name || t(NAME[k.type]), detail: about(k, t), trailing: k.status === 'revoked' ? null : (_jsx(Button, { size: "sm", variant: "ghost", "aria-label": t('Revoke {name}', { name: k.name || k.id }), onPress: () => setRevoking(k), children: t('Revoke') })) }), k.type === 'publishable' && k.key ? (_jsxs(XStack, { items: "center", gap: "$2", px: "$3", pb: "$2.5", children: [_jsx(SizableText, { flex: 1, minW: 0, size: "$1", color: "$soft", numberOfLines: 1, "aria-label": t('Publishable key'), style: { fontFamily: 'var(--f-mono, ui-monospace, monospace)' }, children: k.key }), _jsx(CopyButton, { value: k.key, label: t('Copy publishable key') })] })) : null] }, k.id))) })), _jsx(Note, { children: note }), _jsx(Making, { type: making, onClose: () => setMaking(null), onMade: (m) => {
+                    setNote(t('{name} created', { name: m.name || t(NAME[m.type]) }));
                     list.reload();
-                } }), _jsx(Confirm, { open: revoking !== null, onOpenChange: (o) => !o && setRevoking(null), title: `Revoke ${revoking?.name || 'this key'}?`, says: "It stops working within a minute, and anything using it is refused. Your other keys keep working.", act: "Revoke", 
+                } }), _jsx(Confirm, { open: revoking !== null, onOpenChange: (o) => !o && setRevoking(null), title: revoking?.name ? t('Revoke {name}?', { name: revoking.name }) : t('Revoke this key?'), says: t('It stops working within a minute, and anything using it is refused. Your other keys keep working.'), act: t('Revoke'), 
                 // It acts only while it is open, which is while a key is chosen.
                 run: async () => {
-                    await revoke(t, revoking.id);
-                    setNote(`${revoking.name || NAME[revoking.type]} revoked`);
+                    await revoke(target, revoking.id);
+                    setNote(t('{name} revoked', { name: revoking.name || t(NAME[revoking.type]) }));
                     list.reload();
                 } })] }));
 }
 /** Creating one key: a name and an optional limit, then the key itself, once. */
 function Making({ type, onClose, onMade }) {
-    const t = useTarget();
+    const { t } = useI18n();
+    const target = useTarget();
     const [name, setName] = useState('');
     const [limit, setLimit] = useState('');
     const [made, setMade] = useState(null);
@@ -76,21 +90,25 @@ function Making({ type, onClose, onMade }) {
             list = limits(limit);
         }
         catch (e) {
-            setNote(e.message);
+            setNote(told(e, t));
             return;
         }
         setWorking(true);
         try {
-            const m = await mint(t, type, name, list);
+            const m = await mint(target, type, name, list);
             setMade(m);
             onMade(m);
         }
         catch (e) {
-            setNote(e.message);
+            setNote(told(e, t));
         }
         finally {
             setWorking(false);
         }
     };
-    return (_jsx(Dialog, { open: type !== null, onOpenChange: (o) => !o && close(), children: _jsxs(DialogContent, { maxW: 480, showCloseButton: false, children: [_jsx(DialogTitle, { children: made ? `Your new ${made.type} key` : `Create a ${type ?? ''} key` }), made ? (_jsxs(YStack, { gap: "$3", children: [made.type === 'secret' ? (_jsx(Once, { value: made.key, label: "Secret key" })) : (_jsxs(XStack, { items: "center", gap: "$2", px: "$3", py: "$3", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$raised", children: [_jsx(SizableText, { flex: 1, minW: 0, size: "$2", color: "$ink", style: { fontFamily: 'var(--f-mono, ui-monospace, monospace)', wordBreak: 'break-all' }, children: made.key }), _jsx(CopyButton, { value: made.key, label: "Copy publishable key" })] })), made.limit.length ? (_jsxs(SizableText, { size: "$1", color: "$soft", children: ["It reaches ", made.limit.join(', '), " and nothing else."] })) : null, _jsx(XStack, { justify: "flex-end", children: _jsx(Button, { size: "sm", onPress: close, children: "Done" }) })] })) : (_jsxs(YStack, { gap: "$3", children: [_jsx(Field, { label: "Name", hint: "What it is for, so you can tell it from your other keys.", children: _jsx(Input, { value: name, onChangeText: setName, placeholder: "production", "aria-label": "Name" }) }), _jsx(Field, { label: "Limit", hint: "Optional. What it may reach, as kind:name \u2014 model:zen5, project:acme, product:train, read:* for read-only. Empty reaches whatever you do.", children: _jsx(Input, { value: limit, onChangeText: setLimit, placeholder: "model:zen5, project:acme", "aria-label": "Limit", autoCapitalize: "none" }) }), note ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note })) : null, _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", disabled: working, onPress: close, children: "Cancel" }), _jsx(Button, { size: "sm", disabled: working, onPress: () => void go(type), children: "Create" })] })] }))] }) }));
+    return (_jsx(Dialog, { open: type !== null, onOpenChange: (o) => !o && close(), children: _jsxs(DialogContent, { maxW: 480, showCloseButton: false, children: [_jsx(DialogTitle, { children: made ? t(NEW[made.type]) : type ? t(CREATE_A[type]) : '' }), made ? (_jsxs(YStack, { gap: "$3", children: [made.type === 'secret' ? (_jsx(Once, { value: made.key, label: t('Secret key'), copy: t('Copy secret key') })) : (_jsxs(XStack, { items: "center", gap: "$2", px: "$3", py: "$3", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$raised", children: [_jsx(SizableText, { flex: 1, minW: 0, size: "$2", color: "$ink", style: { fontFamily: 'var(--f-mono, ui-monospace, monospace)', wordBreak: 'break-all' }, children: made.key }), _jsx(CopyButton, { value: made.key, label: t('Copy publishable key') })] })), made.limit.length ? (_jsx(SizableText, { size: "$1", color: "$soft", children: t('It reaches {limits} and nothing else.', { limits: made.limit.join(', ') }) })) : null, _jsx(XStack, { justify: "flex-end", children: _jsx(Button, { size: "sm", onPress: close, children: t('Done') }) })] })) : (_jsxs(YStack, { gap: "$3", children: [_jsx(Field, { label: t('Name'), hint: t('What it is for, so you can tell it from your other keys.'), children: _jsx(Input, { value: name, onChangeText: setName, placeholder: t('production'), "aria-label": t('Name') }) }), _jsx(Field, { label: t('Limit'), hint: t('Optional. What it may reach, as {form} — {examples}, {read} for read-only. Empty reaches whatever you do.', {
+                                form: 'kind:name',
+                                examples: 'model:zen5, project:acme, product:train',
+                                read: 'read:*',
+                            }), children: _jsx(Input, { value: limit, onChangeText: setLimit, placeholder: "model:zen5, project:acme", "aria-label": t('Limit'), autoCapitalize: "none" }) }), note ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note })) : null, _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", disabled: working, onPress: close, children: t('Cancel') }), _jsx(Button, { size: "sm", disabled: working, onPress: () => void go(type), children: t('Create') })] })] }))] }) }));
 }

package/lib/settings/list.d.ts

@@ -1,8 +1,3 @@
-/**
- * The sections of Settings, in the order the page lists them, by name and part
- * alone: what a sidebar lists without loading the sections themselves
- * (sections.tsx pairs each with its body).
- */
 import type { Section } from '../route.ts';
 export type Group = 'Settings' | 'Code' | 'Organization';
 export declare const GROUPS: readonly Group[];

package/lib/settings/list.js

@@ -1,19 +1,28 @@
-export const GROUPS = ['Settings', 'Code', 'Organization'];
+/**
+ * The sections of Settings, in the order the page lists them, by name and part
+ * alone: what a sidebar lists without loading the sections themselves
+ * (sections.tsx pairs each with its body).
+ *
+ * A part's id is its name, and every name is English, marked (`phrase`): a
+ * list draws each through `t`.
+ */
+import { phrase } from '@hanzo/i18n';
+export const GROUPS = [phrase('Settings'), phrase('Code'), phrase('Organization')];
 export const LIST = [
-    { id: 'general', label: 'General', group: 'Settings' },
-    { id: 'account', label: 'Account', group: 'Settings' },
-    { id: 'privacy', label: 'Privacy', group: 'Settings' },
-    { id: 'billing', label: 'Billing', group: 'Settings' },
-    { id: 'usage', label: 'Usage', group: 'Settings' },
-    { id: 'capabilities', label: 'Capabilities', group: 'Settings' },
-    { id: 'memory', label: 'Memory', group: 'Settings' },
-    { id: 'code', label: 'Code', group: 'Code' },
-    { id: 'environments', label: 'Environments', group: 'Code' },
-    { id: 'machines', label: 'Machines', group: 'Code' },
-    { id: 'keys', label: 'API keys', group: 'Code' },
-    { id: 'members', label: 'Members', group: 'Organization' },
-    { id: 'integrations', label: 'Integrations', group: 'Organization' },
-    { id: 'notifications', label: 'Notifications', group: 'Organization' },
+    { id: 'general', label: phrase('General'), group: 'Settings' },
+    { id: 'account', label: phrase('Account'), group: 'Settings' },
+    { id: 'privacy', label: phrase('Privacy'), group: 'Settings' },
+    { id: 'billing', label: phrase('Billing'), group: 'Settings' },
+    { id: 'usage', label: phrase('Usage'), group: 'Settings' },
+    { id: 'capabilities', label: phrase('Capabilities'), group: 'Settings' },
+    { id: 'memory', label: phrase('Memory'), group: 'Settings' },
+    { id: 'code', label: phrase('Code'), group: 'Code' },
+    { id: 'environments', label: phrase('Environments'), group: 'Code' },
+    { id: 'machines', label: phrase('Machines'), group: 'Code' },
+    { id: 'keys', label: phrase('API keys'), group: 'Code' },
+    { id: 'members', label: phrase('Members'), group: 'Organization' },
+    { id: 'integrations', label: phrase('Integrations'), group: 'Organization' },
+    { id: 'notifications', label: phrase('Notifications'), group: 'Organization' },
 ];
 /** A part's label as a list draws it: none for the first part, or where the part's first row already says it (Code). */
 export const heading = (g) => (g === 'Settings' || LIST.find((e) => e.group === g)?.label === g ? '' : g);

package/lib/settings/machines.d.ts

@@ -1 +1,4 @@
+import { type Say } from '@hanzo/i18n/react';
+/** A status as a line says it. Code's place list says it the same way. */
+export declare const said: (status: string, t: Say) => string;
 export declare function Machines(): import("react").JSX.Element;

package/lib/settings/machines.js

@@ -5,12 +5,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * and keeps it online while it runs; one can also be registered here by hand.
  * The member who linked a machine, or an org admin, renames it, drains it,
  * mints its claim key or removes it.
+ *
+ * Its words are the reader's language (@hanzo/i18n `t`); a machine's name,
+ * hostname, id and hardware, and the commands to type, are drawn as given.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { phrase } from '@hanzo/i18n';
+import { useI18n } from '@hanzo/i18n/react';
 import { Activity, ChevronDown, ChevronUp, Cloud, Cpu, HardDrive, Laptop, MoreHorizontal, Plus, Server, Terminal, Zap, } from '@hanzogui/lucide-icons-2';
 import { Button, Dialog, DialogContent, DialogTitle, DropdownMenu, Input } from '@hanzo/ui';
 import { CopyButton } from '@hanzo/ui/product';
 import { useEffect, useState } from 'react';
+import { told } from '../api/call.js';
 import { add, change, formatBytes, formatPercent, formatRelative, key, KINDS, machines, remove, state, } from '../api/machines.js';
 import { Confirm, Rename } from '../ask.js';
 import { useRead } from '../data.js';
@@ -23,10 +29,23 @@ const LINK = ['hanzo login', 'hanzo link'].join('\n');
 const BEAT = 30_000;
 /** The list before its first answer; every answer is a new array, even an empty one. */
 const UNREAD = [];
+/** A machine's status in a line, the platform's word or `not seen yet`, said in the reader's language; one it does not name, as given. */
+const STATES = {
+    online: phrase('online'),
+    offline: phrase('offline'),
+    draining: phrase('draining'),
+    'not seen yet': phrase('not seen yet'),
+    '': phrase('unknown'),
+};
+/** What a machine is, as the platform names its kinds, said in the reader's language; one it does not name, as given. */
+const KIND = { laptop: phrase('laptop'), gpu: phrase('gpu'), cloud: phrase('cloud'), cluster: phrase('cluster'), machine: phrase('machine') };
+/** A status as a line says it. Code's place list says it the same way. */
+export const said = (status, t) => (status in STATES ? t(STATES[status]) : status);
+const kindOf = (kind, t) => (KIND[kind] ? t(KIND[kind]) : kind);
 /** The line under a machine: what it is, where, how big, and what it is doing. */
-function about(m) {
-    const load = m.running ? `${m.running} running` : m.sessions ? `${m.sessions} runs` : '';
-    return [state(m) || 'unknown', m.kind, m.host && m.host !== m.label ? m.host : '', m.capacity, load].filter(Boolean).join(' · ');
+function about(m, t) {
+    const load = m.running ? t('{n} running', { n: m.running }) : m.sessions ? t('{n} runs', { n: m.sessions }) : '';
+    return [said(state(m), t), kindOf(m.kind, t), m.host && m.host !== m.label ? m.host : '', m.capacity, load].filter(Boolean).join(' · ');
 }
 function Dot({ m }) {
     const on = state(m) === 'online';
@@ -47,6 +66,7 @@ function KindIcon({ kind, size = 16 }) {
     }
 }
 function StatusBadge({ m }) {
+    const { t } = useI18n();
     const s = state(m);
     if (!s)
         return null;
@@ -54,27 +74,28 @@ function StatusBadge({ m }) {
     let text = s;
     if (s === 'online') {
         color = '$green10';
-        text = 'Online';
+        text = t('Online');
     }
     else if (s === 'draining') {
         color = '$yellow10';
-        text = 'Draining';
+        text = t('Draining');
     }
     else if (s === 'not seen yet') {
         color = '$blue10';
-        text = 'Not seen yet';
+        text = t('Not seen yet');
     }
     else if (s === 'offline') {
         color = '$soft';
-        text = 'Offline';
+        text = t('Offline');
     }
     return (_jsxs(XStack, { px: "$2", py: "$0.5", rounded: "$10", borderWidth: 1, borderColor: color, items: "center", gap: "$1.5", children: [_jsx(Dot, { m: m }), _jsx(SizableText, { size: "$1", color: color, style: { fontWeight: 500 }, children: text })] }));
 }
 export function Machines() {
+    const { t } = useI18n();
     const host = useHost();
-    const t = useTarget();
+    const target = useTarget();
     const signed = Boolean(host.person);
-    const list = useRead(signed ? () => machines(t) : null, UNREAD, [t, signed]);
+    const list = useRead(signed ? () => machines(target) : null, UNREAD, [target, signed]);
     const [adding, setAdding] = useState(false);
     const [renaming, setRenaming] = useState(null);
     const [removing, setRemoving] = useState(null);
@@ -92,53 +113,57 @@ export function Machines() {
         return () => clearInterval(id);
     }, [again, signed]);
     if (!signed) {
-        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Machines" }), _jsx(Soft, { children: "Sign in to see your organization\u2019s machines." })] }));
+        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: t('Machines') }), _jsx(Soft, { children: t('Sign in to see your organization’s machines.') })] }));
     }
     const drain = async (m, status) => {
         setNote('');
         try {
-            await change(t, m.id, { status });
-            setNote(status === 'draining' ? `${m.label} takes no new runs` : `${m.label} takes runs again`);
+            await change(target, m.id, { status });
+            setNote(status === 'draining' ? t('{name} takes no new runs', { name: m.label }) : t('{name} takes runs again', { name: m.label }));
             list.reload();
         }
         catch (e) {
-            setNote(e.message);
+            setNote(told(e, t));
         }
     };
-    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Machines", detail: "Your organization\u2019s own computers. A run sent to one runs there instead of in the Hanzo sandbox." }), _jsxs(Group, { title: "Link a machine", detail: "Run these on it. It registers under its hostname, and stays online while hanzo link runs.", children: [_jsxs(XStack, { items: "flex-start", gap: "$2", px: "$3", py: "$2.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$raised", children: [_jsx(SizableText, { flex: 1, minW: 0, size: "$2", color: "$ink", "aria-label": "Link commands", style: { ...mono, whiteSpace: 'pre-wrap' }, children: LINK }), _jsx(CopyButton, { value: LINK, label: "Copy the commands" })] }), _jsxs(XStack, { items: "center", justify: "space-between", flexWrap: "wrap", gap: "$2", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsxs(Button, { size: "sm", variant: "ghost", onPress: () => setAdding(true), children: [_jsx(Plus, { size: 14 }), " Register one by hand"] }), _jsxs(Button, { size: "sm", variant: "ghost", onPress: () => setShowAdvancedLink(!showAdvancedLink), children: [showAdvancedLink ? _jsx(ChevronUp, { size: 14 }) : _jsx(ChevronDown, { size: 14 }), showAdvancedLink ? 'Hide options' : 'More connection options'] })] }), _jsx(SizableText, { size: "$1", color: "$soft", children: "Supported: macOS, Linux, Windows, NVIDIA CUDA GPUs, Cloud VMs" })] }), showAdvancedLink ? (_jsxs(YStack, { gap: "$2.5", p: "$3", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$raised", children: [_jsxs(YStack, { gap: "$1", children: [_jsx(SizableText, { size: "$2", color: "$ink", style: { fontWeight: 600 }, children: "1. Background daemon (system service)" }), _jsx(SizableText, { size: "$1", color: "$soft", children: "Run worker continuously in the background without keeping a terminal open:" }), _jsxs(XStack, { items: "center", justify: "space-between", px: "$2.5", py: "$1.5", rounded: "$2", bg: "$raised", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$1", color: "$ink", style: mono, children: "hanzo code --serve" }), _jsx(CopyButton, { value: "hanzo code --serve", label: "Copy daemon command" })] })] }), _jsxs(YStack, { gap: "$1", pt: "$1", children: [_jsx(SizableText, { size: "$2", color: "$ink", style: { fontWeight: 600 }, children: "2. Install CLI from shell" }), _jsxs(XStack, { items: "center", justify: "space-between", px: "$2.5", py: "$1.5", rounded: "$2", bg: "$raised", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$1", color: "$ink", style: mono, children: "curl -fsSL https://hanzo.sh | sh" }), _jsx(CopyButton, { value: "curl -fsSL https://hanzo.sh | sh", label: "Copy install command" })] })] })] })) : null] }), _jsxs(Group, { title: "Linked", children: [list.value === UNREAD ? (_jsx(Soft, { children: list.error ? list.error.message : 'Reading machines…' })) : list.value.length === 0 ? (_jsxs(YStack, { gap: "$3", children: [_jsx(Soft, { children: "No machine is linked yet." }), _jsx(Card, { children: _jsxs(YStack, { p: "$4", gap: "$3", children: [_jsxs(XStack, { items: "center", gap: "$2.5", children: [_jsx(Server, { size: 20 }), _jsxs(YStack, { gap: "$0.5", children: [_jsx(SizableText, { size: "$3", color: "$ink", style: { fontWeight: 600 }, children: "Connect your first computer or GPU server" }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Execute code, runs, and local models directly on your hardware with full privacy and zero cloud fees." })] })] }), _jsxs(YStack, { gap: "$2", pt: "$1", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { size: "$1", color: "$soft", style: { ...mono, width: 20 }, children: "1." }), _jsxs(SizableText, { size: "$2", color: "$ink", children: ["Install Hanzo CLI: ", _jsx("span", { style: mono, children: "curl -fsSL https://hanzo.sh | sh" })] })] }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { size: "$1", color: "$soft", style: { ...mono, width: 20 }, children: "2." }), _jsxs(SizableText, { size: "$2", color: "$ink", children: ["Sign in with your account: ", _jsx("span", { style: mono, children: "hanzo login" })] })] }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { size: "$1", color: "$soft", style: { ...mono, width: 20 }, children: "3." }), _jsxs(SizableText, { size: "$2", color: "$ink", children: ["Link the machine: ", _jsx("span", { style: mono, children: "hanzo link" })] })] })] }), _jsx(XStack, { pt: "$1", children: _jsxs(Button, { size: "sm", variant: "outline", onPress: () => setAdding(true), children: [_jsx(Plus, { size: 14 }), " Register one by hand"] }) })] }) })] })) : (_jsx(Card, { children: list.value.map((m, i) => {
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: t('Machines'), detail: t('Your organization’s own computers. A run sent to one runs there instead of in the Hanzo sandbox.') }), _jsxs(Group, { title: t('Link a machine'), detail: t('Run these on it. It registers under its hostname, and stays online while {command} runs.', { command: 'hanzo link' }), children: [_jsxs(XStack, { items: "flex-start", gap: "$2", px: "$3", py: "$2.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$raised", children: [_jsx(SizableText, { flex: 1, minW: 0, size: "$2", color: "$ink", "aria-label": t('Link commands'), 'data-i18n-ltr': '', fontFamily: "$mono", "$platform-web": { whiteSpace: 'pre-wrap' }, children: LINK }), _jsx(CopyButton, { value: LINK, label: t('Copy the commands') })] }), _jsxs(XStack, { items: "center", justify: "space-between", flexWrap: "wrap", gap: "$2", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsxs(Button, { size: "sm", variant: "ghost", onPress: () => setAdding(true), children: [_jsx(Plus, { size: 14 }), " ", t('Register one by hand')] }), _jsxs(Button, { size: "sm", variant: "ghost", onPress: () => setShowAdvancedLink(!showAdvancedLink), children: [showAdvancedLink ? _jsx(ChevronUp, { size: 14 }) : _jsx(ChevronDown, { size: 14 }), showAdvancedLink ? t('Hide options') : t('More connection options')] })] }), _jsx(SizableText, { size: "$1", color: "$soft", children: t('Supported: macOS, Linux, Windows, NVIDIA CUDA GPUs, Cloud VMs') })] }), showAdvancedLink ? (_jsxs(YStack, { gap: "$2.5", p: "$3", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$raised", children: [_jsxs(YStack, { gap: "$1", children: [_jsx(SizableText, { size: "$2", color: "$ink", style: { fontWeight: 600 }, children: t('1. Background daemon (system service)') }), _jsx(SizableText, { size: "$1", color: "$soft", children: t('Run worker continuously in the background without keeping a terminal open:') }), _jsxs(XStack, { items: "center", justify: "space-between", px: "$2.5", py: "$1.5", rounded: "$2", bg: "$raised", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$1", color: "$ink", 'data-i18n-ltr': '', fontFamily: "$mono", children: "hanzo code --serve" }), _jsx(CopyButton, { value: "hanzo code --serve", label: t('Copy daemon command') })] })] }), _jsxs(YStack, { gap: "$1", pt: "$1", children: [_jsx(SizableText, { size: "$2", color: "$ink", style: { fontWeight: 600 }, children: t('2. Install CLI from shell') }), _jsxs(XStack, { items: "center", justify: "space-between", px: "$2.5", py: "$1.5", rounded: "$2", bg: "$raised", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$1", color: "$ink", 'data-i18n-ltr': '', fontFamily: "$mono", children: "curl -fsSL https://hanzo.sh | sh" }), _jsx(CopyButton, { value: "curl -fsSL https://hanzo.sh | sh", label: t('Copy install command') })] })] })] })) : null] }), _jsxs(Group, { title: t('Linked'), children: [list.value === UNREAD ? (_jsx(Soft, { children: list.error ? told(list.error, t) : t('Reading machines…') })) : list.value.length === 0 ? (_jsxs(YStack, { gap: "$3", children: [_jsx(Soft, { children: t('No machine is linked yet.') }), _jsx(Card, { children: _jsxs(YStack, { p: "$4", gap: "$3", children: [_jsxs(XStack, { items: "center", gap: "$2.5", children: [_jsx(Server, { size: 20 }), _jsxs(YStack, { gap: "$0.5", children: [_jsx(SizableText, { size: "$3", color: "$ink", style: { fontWeight: 600 }, children: t('Connect your first computer or GPU server') }), _jsx(SizableText, { size: "$2", color: "$soft", children: t('Execute code, runs, and local models directly on your hardware with full privacy and zero cloud fees.') })] })] }), _jsxs(YStack, { gap: "$2", pt: "$1", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { size: "$1", color: "$soft", style: { ...mono, width: 20 }, children: "1." }), _jsx(SizableText, { size: "$2", color: "$ink", children: t('Install Hanzo CLI: {command}', { command: _jsx(SizableText, { size: "$2", color: "$ink", fontFamily: "$mono", 'data-i18n-ltr': '', children: "curl -fsSL https://hanzo.sh | sh" }) }) })] }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { size: "$1", color: "$soft", style: { ...mono, width: 20 }, children: "2." }), _jsx(SizableText, { size: "$2", color: "$ink", children: t('Sign in with your account: {command}', { command: _jsx(SizableText, { size: "$2", color: "$ink", fontFamily: "$mono", 'data-i18n-ltr': '', children: "hanzo login" }) }) })] }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { size: "$1", color: "$soft", style: { ...mono, width: 20 }, children: "3." }), _jsx(SizableText, { size: "$2", color: "$ink", children: t('Link the machine: {command}', { command: _jsx(SizableText, { size: "$2", color: "$ink", fontFamily: "$mono", 'data-i18n-ltr': '', children: "hanzo link" }) }) })] })] }), _jsx(XStack, { pt: "$1", children: _jsxs(Button, { size: "sm", variant: "outline", onPress: () => setAdding(true), children: [_jsx(Plus, { size: 14 }), " ", t('Register one by hand')] }) })] }) })] })) : (_jsx(Card, { children: list.value.map((m, i) => {
                             const isExpanded = expandedId === m.id;
                             const hasTelemetry = Boolean(m.metrics || m.spec);
-                            return (_jsxs(YStack, { borderTopWidth: i > 0 ? 1 : 0, borderColor: "$borderColor", children: [_jsx(Row, { first: i === 0, leading: _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Dot, { m: m }), _jsx(KindIcon, { kind: m.kind, size: 16 })] }), title: m.label, detail: about(m), trailing: _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(StatusBadge, { m: m }), m.serving ? (_jsx(XStack, { px: "$1.5", py: "$0.5", rounded: "$10", borderWidth: 1, borderColor: "$green10", children: _jsx(SizableText, { size: "$1", color: "$green10", children: "Serving" }) })) : null, m.running > 0 ? (_jsxs(XStack, { px: "$1.5", py: "$0.5", rounded: "$10", bg: "$raised", items: "center", gap: "$1", children: [_jsx(Activity, { size: 12, color: "$green10" }), _jsxs(SizableText, { size: "$1", color: "$ink", children: [m.running, " active"] })] })) : null, _jsx(CopyButton, { value: `hanzo link --target ${m.id}`, label: `Copy link command for ${m.label}` }), _jsx(DropdownMenu, { trigger: _jsx(XStack, { render: "button", "aria-label": `Actions for ${m.label}`, px: "$1.5", py: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(MoreHorizontal, { size: 16 }) }), items: [
-                                                        { key: 'details', label: isExpanded ? 'Hide details' : 'Show details', onSelect: () => setExpandedId(isExpanded ? null : m.id) },
-                                                        { key: 'rename', label: 'Rename', onSelect: () => setRenaming(m) },
+                            return (_jsxs(YStack, { borderTopWidth: i > 0 ? 1 : 0, borderColor: "$borderColor", children: [_jsx(Row, { first: i === 0, leading: _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Dot, { m: m }), _jsx(KindIcon, { kind: m.kind, size: 16 })] }), title: m.label, detail: about(m, t), trailing: _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(StatusBadge, { m: m }), m.serving ? (_jsx(XStack, { px: "$1.5", py: "$0.5", rounded: "$10", borderWidth: 1, borderColor: "$green10", children: _jsx(SizableText, { size: "$1", color: "$green10", children: t('Serving') }) })) : null, m.running > 0 ? (_jsxs(XStack, { px: "$1.5", py: "$0.5", rounded: "$10", bg: "$raised", items: "center", gap: "$1", children: [_jsx(Activity, { size: 12, color: "$green10" }), _jsx(SizableText, { size: "$1", color: "$ink", children: t('{n} active', { n: m.running }) })] })) : null, _jsx(CopyButton, { value: `hanzo link --target ${m.id}`, label: t('Copy link command for {name}', { name: m.label }) }), _jsx(DropdownMenu, { trigger: _jsx(XStack, { render: "button", "aria-label": t('Actions for {name}', { name: m.label }), px: "$1.5", py: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(MoreHorizontal, { size: 16 }) }), items: [
+                                                        { key: 'details', label: isExpanded ? t('Hide details') : t('Show details'), onSelect: () => setExpandedId(isExpanded ? null : m.id) },
+                                                        { key: 'rename', label: t('Rename'), onSelect: () => setRenaming(m) },
                                                         m.status === 'draining'
-                                                            ? { key: 'online', label: 'Take runs again', onSelect: () => void drain(m, 'online') }
-                                                            : { key: 'drain', label: 'Drain', description: 'Finish what it has, take nothing new', onSelect: () => void drain(m, 'draining') },
-                                                        { key: 'key', label: 'Claim key', onSelect: () => setKeying(m) },
+                                                            ? { key: 'online', label: t('Take runs again'), onSelect: () => void drain(m, 'online') }
+                                                            : { key: 'drain', label: t('Drain'), description: t('Finish what it has, take nothing new'), onSelect: () => void drain(m, 'draining') },
+                                                        { key: 'key', label: t('Claim key'), onSelect: () => setKeying(m) },
                                                         { type: 'separator' },
-                                                        { key: 'remove', label: 'Remove', destructive: true, onSelect: () => setRemoving(m) },
-                                                    ] })] }) }), isExpanded || hasTelemetry ? (_jsxs(YStack, { px: "$4", pb: "$3", pt: "$1", gap: "$2.5", children: [m.spec ? (_jsxs(XStack, { flexWrap: "wrap", gap: "$2", items: "center", children: [m.spec.os ? (_jsxs(XStack, { px: "$2", py: "$1", rounded: "$2", bg: "$raised", borderWidth: 1, borderColor: "$borderColor", items: "center", gap: "$1.5", children: [_jsx(Terminal, { size: 12 }), _jsxs(SizableText, { size: "$1", color: "$ink", children: [m.spec.os, m.spec.arch ? ` · ${m.spec.arch}` : ''] })] })) : null, m.spec.cpus ? (_jsxs(XStack, { px: "$2", py: "$1", rounded: "$2", bg: "$raised", borderWidth: 1, borderColor: "$borderColor", items: "center", gap: "$1.5", children: [_jsx(Cpu, { size: 12 }), _jsxs(SizableText, { size: "$1", color: "$ink", children: [m.spec.cpus, " cores"] })] })) : null, m.spec.memory ? (_jsxs(XStack, { px: "$2", py: "$1", rounded: "$2", bg: "$raised", borderWidth: 1, borderColor: "$borderColor", items: "center", gap: "$1.5", children: [_jsx(HardDrive, { size: 12 }), _jsxs(SizableText, { size: "$1", color: "$ink", children: [formatBytes(m.spec.memory), " RAM"] })] })) : null, m.spec.gpus && m.spec.gpus.length > 0 ? (_jsxs(XStack, { px: "$2", py: "$1", rounded: "$2", bg: "$raised", borderWidth: 1, borderColor: "$borderColor", items: "center", gap: "$1.5", children: [_jsx(Zap, { size: 12, color: "$yellow10" }), _jsx(SizableText, { size: "$1", color: "$ink", children: m.spec.gpus.map((g) => `${g.model || g.vendor || 'GPU'}${g.memory ? ` (${formatBytes(g.memory)})` : ''}`).join(', ') })] })) : null] })) : null, m.metrics && (m.metrics.cpuUtil || m.metrics.load1 || m.metrics.memUsed || m.metrics.gpuUtil) ? (_jsxs(XStack, { flexWrap: "wrap", gap: "$3", p: "$2.5", rounded: "$2", bg: "$raised", borderWidth: 1, borderColor: "$borderColor", items: "center", children: [m.metrics.cpuUtil ? (_jsxs(YStack, { gap: "$0.5", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "CPU Utilization" }), _jsxs(SizableText, { size: "$2", color: "$ink", style: { fontWeight: 600 }, children: [formatPercent(m.metrics.cpuUtil), " ", m.metrics.cpuTemp ? `· ${m.metrics.cpuTemp}°C` : ''] })] })) : m.metrics.load1 ? (_jsxs(YStack, { gap: "$0.5", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "Load (1m, 5m, 15m)" }), _jsxs(SizableText, { size: "$2", color: "$ink", style: { fontWeight: 600 }, children: [m.metrics.load1, ", ", m.metrics.load5 ?? 0, ", ", m.metrics.load15 ?? 0] })] })) : null, m.metrics.memUsed ? (_jsxs(YStack, { gap: "$0.5", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "Memory" }), _jsxs(SizableText, { size: "$2", color: "$ink", style: { fontWeight: 600 }, children: [formatBytes(m.metrics.memUsed), " ", m.spec?.memory ? `/ ${formatBytes(m.spec.memory)}` : 'used'] })] })) : null, m.metrics.gpuUtil !== undefined && m.metrics.gpuUtil > 0 ? (_jsxs(YStack, { gap: "$0.5", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "GPU" }), _jsxs(SizableText, { size: "$2", color: "$ink", style: { fontWeight: 600 }, children: [formatPercent(m.metrics.gpuUtil), " ", m.metrics.gpuTemp ? `· ${m.metrics.gpuTemp}°C` : '', " ", m.metrics.gpuPower ? `· ${m.metrics.gpuPower}W` : ''] })] })) : null, m.metrics.model ? (_jsxs(YStack, { gap: "$0.5", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "Serving Model" }), _jsxs(SizableText, { size: "$2", color: "$ink", style: { fontWeight: 600 }, children: [m.metrics.model, " ", m.metrics.decode ? `(${m.metrics.decode} tok/s)` : ''] })] })) : null] })) : null, _jsxs(XStack, { justify: "space-between", items: "center", flexWrap: "wrap", gap: "$2", pt: "$0.5", children: [_jsxs(XStack, { items: "center", gap: "$3", children: [_jsxs(SizableText, { size: "$1", color: "$soft", style: mono, children: ["ID: ", m.id] }), m.seen ? (_jsxs(SizableText, { size: "$1", color: "$soft", children: ["Last heartbeat: ", formatRelative(m.seen)] })) : null] }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "Run directly on this machine:" }), _jsxs(XStack, { items: "center", gap: "$1", px: "$2", py: "$0.5", rounded: "$2", bg: "$raised", borderWidth: 1, borderColor: "$borderColor", children: [_jsxs(SizableText, { size: "$1", color: "$ink", style: mono, children: ["hanzo run --target ", m.id] }), _jsx(CopyButton, { value: `hanzo run --target ${m.id}`, label: `Copy run command for ${m.label}` })] })] })] })] })) : null] }, m.id));
-                        }) })), list.error && list.value !== UNREAD ? _jsx(Soft, { children: list.error.message }) : null] }), _jsx(Note, { children: note }), _jsx(Adding, { open: adding, onOpenChange: setAdding, onAdded: (m) => {
-                    setNote(`${m.label} is registered`);
+                                                        { key: 'remove', label: t('Remove'), destructive: true, onSelect: () => setRemoving(m) },
+                                                    ] })] }) }), isExpanded || hasTelemetry ? (_jsxs(YStack, { px: "$4", pb: "$3", pt: "$1", gap: "$2.5", children: [m.spec ? (_jsxs(XStack, { flexWrap: "wrap", gap: "$2", items: "center", children: [m.spec.os ? (_jsxs(XStack, { px: "$2", py: "$1", rounded: "$2", bg: "$raised", borderWidth: 1, borderColor: "$borderColor", items: "center", gap: "$1.5", children: [_jsx(Terminal, { size: 12 }), _jsxs(SizableText, { size: "$1", color: "$ink", children: [m.spec.os, m.spec.arch ? ` · ${m.spec.arch}` : ''] })] })) : null, m.spec.cpus ? (_jsxs(XStack, { px: "$2", py: "$1", rounded: "$2", bg: "$raised", borderWidth: 1, borderColor: "$borderColor", items: "center", gap: "$1.5", children: [_jsx(Cpu, { size: 12 }), _jsx(SizableText, { size: "$1", color: "$ink", children: t('{n} cores', { n: m.spec.cpus }) })] })) : null, m.spec.memory ? (_jsxs(XStack, { px: "$2", py: "$1", rounded: "$2", bg: "$raised", borderWidth: 1, borderColor: "$borderColor", items: "center", gap: "$1.5", children: [_jsx(HardDrive, { size: 12 }), _jsx(SizableText, { size: "$1", color: "$ink", children: t('{size} RAM', { size: formatBytes(m.spec.memory) }) })] })) : null, m.spec.gpus && m.spec.gpus.length > 0 ? (_jsxs(XStack, { px: "$2", py: "$1", rounded: "$2", bg: "$raised", borderWidth: 1, borderColor: "$borderColor", items: "center", gap: "$1.5", children: [_jsx(Zap, { size: 12, color: "$yellow10" }), _jsx(SizableText, { size: "$1", color: "$ink", children: m.spec.gpus.map((g) => `${g.model || g.vendor || 'GPU'}${g.memory ? ` (${formatBytes(g.memory)})` : ''}`).join(', ') })] })) : null] })) : null, m.metrics && (m.metrics.cpuUtil || m.metrics.load1 || m.metrics.memUsed || m.metrics.gpuUtil) ? (_jsxs(XStack, { flexWrap: "wrap", gap: "$3", p: "$2.5", rounded: "$2", bg: "$raised", borderWidth: 1, borderColor: "$borderColor", items: "center", children: [m.metrics.cpuUtil ? (_jsxs(YStack, { gap: "$0.5", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: t('CPU Utilization') }), _jsxs(SizableText, { size: "$2", color: "$ink", style: { fontWeight: 600 }, children: [formatPercent(m.metrics.cpuUtil), " ", m.metrics.cpuTemp ? `· ${m.metrics.cpuTemp}°C` : ''] })] })) : m.metrics.load1 ? (_jsxs(YStack, { gap: "$0.5", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: t('Load (1m, 5m, 15m)') }), _jsxs(SizableText, { size: "$2", color: "$ink", style: { fontWeight: 600 }, children: [m.metrics.load1, ", ", m.metrics.load5 ?? 0, ", ", m.metrics.load15 ?? 0] })] })) : null, m.metrics.memUsed ? (_jsxs(YStack, { gap: "$0.5", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: t('Memory') }), _jsx(SizableText, { size: "$2", color: "$ink", style: { fontWeight: 600 }, children: m.spec?.memory ? `${formatBytes(m.metrics.memUsed)} / ${formatBytes(m.spec.memory)}` : t('{size} used', { size: formatBytes(m.metrics.memUsed) }) })] })) : null, m.metrics.gpuUtil !== undefined && m.metrics.gpuUtil > 0 ? (_jsxs(YStack, { gap: "$0.5", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: t('GPU') }), _jsxs(SizableText, { size: "$2", color: "$ink", style: { fontWeight: 600 }, children: [formatPercent(m.metrics.gpuUtil), " ", m.metrics.gpuTemp ? `· ${m.metrics.gpuTemp}°C` : '', " ", m.metrics.gpuPower ? `· ${m.metrics.gpuPower}W` : ''] })] })) : null, m.metrics.model ? (_jsxs(YStack, { gap: "$0.5", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: t('Serving Model') }), _jsxs(SizableText, { size: "$2", color: "$ink", style: { fontWeight: 600 }, children: [m.metrics.model, " ", m.metrics.decode ? `(${m.metrics.decode} tok/s)` : ''] })] })) : null] })) : null, _jsxs(XStack, { justify: "space-between", items: "center", flexWrap: "wrap", gap: "$2", pt: "$0.5", children: [_jsxs(XStack, { items: "center", gap: "$3", children: [_jsx(SizableText, { size: "$1", color: "$soft", style: mono, children: t('ID: {id}', { id: m.id }) }), m.seen ? (_jsx(SizableText, { size: "$1", color: "$soft", children: t('Last heartbeat: {when}', { when: formatRelative(m.seen) }) })) : null] }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: t('Run directly on this machine:') }), _jsxs(XStack, { items: "center", gap: "$1", px: "$2", py: "$0.5", rounded: "$2", bg: "$raised", borderWidth: 1, borderColor: "$borderColor", children: [_jsxs(SizableText, { size: "$1", color: "$ink", 'data-i18n-ltr': '', fontFamily: "$mono", children: ["hanzo run --target ", m.id] }), _jsx(CopyButton, { value: `hanzo run --target ${m.id}`, label: t('Copy run command for {name}', { name: m.label }) })] })] })] })] })) : null] }, m.id));
+                        }) })), list.error && list.value !== UNREAD ? _jsx(Soft, { children: told(list.error, t) }) : null] }), _jsx(Note, { children: note }), _jsx(Adding, { open: adding, onOpenChange: setAdding, onAdded: (m) => {
+                    setNote(t('{name} is registered', { name: m.label }));
                     list.reload();
-                } }), _jsx(Rename, { open: renaming !== null, onOpenChange: (o) => !o && setRenaming(null), title: "Rename machine", name: renaming?.label ?? '', 
+                } }), _jsx(Rename, { open: renaming !== null, onOpenChange: (o) => !o && setRenaming(null), title: t('Rename machine'), name: renaming?.label ?? '', 
                 // Each dialog acts only while it is open, which is while its machine is chosen.
                 run: async (label) => {
-                    await change(t, renaming.id, { label });
-                    setNote(`Renamed to ${label}`);
+                    await change(target, renaming.id, { label });
+                    setNote(t('Renamed to {name}', { name: label }));
                     list.reload();
-                } }), _jsx(Confirm, { open: removing !== null, onOpenChange: (o) => !o && setRemoving(null), title: `Remove ${removing?.label ?? 'this machine'}?`, says: "Runs can no longer be sent to it, and its claim key stops working. Linking it again registers it anew.", act: "Remove", run: async () => {
-                    await remove(t, removing.id);
-                    setNote(`${removing.label} is removed`);
+                } }), _jsx(Confirm, { open: removing !== null, onOpenChange: (o) => !o && setRemoving(null), title: removing ? t('Remove {name}?', { name: removing.label }) : t('Remove this machine?'), says: t('Runs can no longer be sent to it, and its claim key stops working. Linking it again registers it anew.'), act: t('Remove'), run: async () => {
+                    await remove(target, removing.id);
+                    setNote(t('{name} is removed', { name: removing.label }));
                     list.reload();
-                } }), _jsx(Confirm, { open: keying !== null, onOpenChange: (o) => !o && setKeying(null), title: `Mint a claim key for ${keying?.label ?? 'this machine'}?`, says: "A key it had before stops working, so a runner using it stops getting runs until it has the new one. The new key is shown once.", act: "Mint key", run: async () => {
-                    const k = await key(t, keying.id);
+                } }), _jsx(Confirm, { open: keying !== null, onOpenChange: (o) => !o && setKeying(null), title: keying ? t('Mint a claim key for {name}?', { name: keying.label }) : t('Mint a claim key for this machine?'), says: t('A key it had before stops working, so a runner using it stops getting runs until it has the new one. The new key is shown once.'), act: t('Mint key'), run: async () => {
+                    const k = await key(target, keying.id);
                     setMinted({ machine: keying, key: k });
-                } }), _jsx(Dialog, { open: minted !== null, onOpenChange: (o) => !o && setMinted(null), children: _jsxs(DialogContent, { maxW: 480, showCloseButton: false, children: [_jsxs(DialogTitle, { children: ["Claim key for ", minted?.machine.label ?? ''] }), minted ? (_jsxs(YStack, { gap: "$3", children: [_jsx(Once, { value: minted.key, label: "Claim key", children: _jsxs(SizableText, { size: "$1", color: "$soft", children: ["A runner on this machine sends it as X-Target-Key when it claims the runs sent here, at POST /v1/agent/targets/", minted.machine.id, "/claim."] }) }), _jsxs(YStack, { gap: "$1", p: "$2.5", rounded: "$2", bg: "$raised", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$1", color: "$ink", style: { fontWeight: 600 }, children: "Start background worker with this key:" }), _jsxs(XStack, { items: "center", justify: "space-between", px: "$2", py: "$1", rounded: "$2", bg: "$raised", children: [_jsxs(SizableText, { size: "$1", color: "$ink", style: mono, children: ["export HANZO_TARGET_KEY=\"", minted.key, "\""] }), _jsx(CopyButton, { value: `export HANZO_TARGET_KEY="${minted.key}"\nhanzo code --serve --target ${minted.machine.id}`, label: "Copy key command" })] })] })] })) : null, _jsx(XStack, { justify: "flex-end", pt: "$2", children: _jsx(Button, { size: "sm", onPress: () => setMinted(null), children: "Done" }) })] }) })] }));
+                } }), _jsx(Dialog, { open: minted !== null, onOpenChange: (o) => !o && setMinted(null), children: _jsxs(DialogContent, { maxW: 480, showCloseButton: false, children: [_jsx(DialogTitle, { children: t('Claim key for {name}', { name: minted?.machine.label ?? '' }) }), minted ? (_jsxs(YStack, { gap: "$3", children: [_jsx(Once, { value: minted.key, label: t('Claim key'), copy: t('Copy claim key'), children: _jsx(SizableText, { size: "$1", color: "$soft", children: t('A runner on this machine sends it as {header} when it claims the runs sent here, at {route}.', {
+                                            header: 'X-Target-Key',
+                                            route: `POST /v1/agent/targets/${minted.machine.id}/claim`,
+                                        }) }) }), _jsxs(YStack, { gap: "$1", p: "$2.5", rounded: "$2", bg: "$raised", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$1", color: "$ink", style: { fontWeight: 600 }, children: t('Start background worker with this key:') }), _jsxs(XStack, { items: "center", justify: "space-between", px: "$2", py: "$1", rounded: "$2", bg: "$raised", children: [_jsxs(SizableText, { size: "$1", color: "$ink", 'data-i18n-ltr': '', fontFamily: "$mono", children: ["export HANZO_TARGET_KEY=\"", minted.key, "\""] }), _jsx(CopyButton, { value: `export HANZO_TARGET_KEY="${minted.key}"\nhanzo code --serve --target ${minted.machine.id}`, label: t('Copy key command') })] })] })] })) : null, _jsx(XStack, { justify: "flex-end", pt: "$2", children: _jsx(Button, { size: "sm", onPress: () => setMinted(null), children: t('Done') }) })] }) })] }));
 }
 /** Registering a machine by hand: its name, what it is, and the hostname its runs report. */
 function Adding({ open, onOpenChange, onAdded }) {
-    const t = useTarget();
+    const { t } = useI18n();
+    const target = useTarget();
     const [label, setLabel] = useState('');
     const [kind, setKind] = useState('machine');
     const [hostname, setHostname] = useState('');
@@ -161,16 +186,16 @@ function Adding({ open, onOpenChange, onAdded }) {
         try {
             const targetLabel = label.trim() || hostname.trim();
             if (!targetLabel)
-                throw new Error('A machine needs a name or a hostname');
-            const m = await add(t, { label: targetLabel, kind, host: hostname, capacity: capacity.trim() || undefined });
+                throw new Error(phrase('A machine needs a name or a hostname'));
+            const m = await add(target, { label: targetLabel, kind, host: hostname, capacity: capacity.trim() || undefined });
             setWorking(false);
             onAdded(m);
             close();
         }
         catch (e) {
-            setNote(e.message);
+            setNote(told(e, t));
             setWorking(false);
         }
     };
-    return (_jsx(Dialog, { open: open, onOpenChange: (o) => !o && close(), children: _jsxs(DialogContent, { maxW: 460, showCloseButton: false, children: [_jsx(DialogTitle, { children: "Register a machine" }), _jsxs(YStack, { gap: "$3", children: [_jsx(Field, { label: "Name", hint: "Left empty, it takes the hostname.", children: _jsx(Input, { value: label, onChangeText: setLabel, "aria-label": "Machine name", autoFocus: true }) }), _jsx(Field, { label: "Kind", children: _jsx(XStack, { flexWrap: "wrap", gap: "$1.5", role: "radiogroup", "aria-label": "Kind", children: KINDS.map((k) => (_jsxs(XStack, { render: "button", role: "radio", "aria-checked": k === kind, "aria-label": k, onPress: () => setKind(k), px: "$2.5", py: "$1", rounded: "$10", borderWidth: 1, borderColor: k === kind ? '$ink' : '$borderColor', items: "center", gap: "$1.5", children: [_jsx(KindIcon, { kind: k, size: 14 }), _jsx(SizableText, { size: "$1", color: k === kind ? '$ink' : '$soft', children: k })] }, k))) }) }), _jsx(Field, { label: "Hostname", hint: "Optional. What its runs report. hanzo link, signed in as you on a machine with this hostname, takes this row over.", children: _jsx(Input, { value: hostname, onChangeText: setHostname, "aria-label": "Hostname", autoCapitalize: "none" }) }), _jsx(Field, { label: "Capacity / Hardware", hint: "Optional human summary (e.g. 16 vCPU / 64G / 1\u00D7 RTX 4090).", children: _jsx(Input, { value: capacity, onChangeText: setCapacity, "aria-label": "Capacity", placeholder: "e.g. 16 vCPU / 64G / 1\u00D7 RTX 4090" }) }), note ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note })) : null, _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", disabled: working, onPress: close, children: "Cancel" }), _jsx(Button, { size: "sm", disabled: working, onPress: () => void save(), children: "Register" })] })] })] }) }));
+    return (_jsx(Dialog, { open: open, onOpenChange: (o) => !o && close(), children: _jsxs(DialogContent, { maxW: 460, showCloseButton: false, children: [_jsx(DialogTitle, { children: t('Register a machine') }), _jsxs(YStack, { gap: "$3", children: [_jsx(Field, { label: t('Name'), hint: t('Left empty, it takes the hostname.'), children: _jsx(Input, { value: label, onChangeText: setLabel, "aria-label": t('Machine name'), autoFocus: true }) }), _jsx(Field, { label: t('Kind'), children: _jsx(XStack, { flexWrap: "wrap", gap: "$1.5", role: "radiogroup", "aria-label": t('Kind'), children: KINDS.map((k) => (_jsxs(XStack, { render: "button", role: "radio", "aria-checked": k === kind, "aria-label": kindOf(k, t), onPress: () => setKind(k), px: "$2.5", py: "$1", rounded: "$10", borderWidth: 1, borderColor: k === kind ? '$ink' : '$borderColor', items: "center", gap: "$1.5", children: [_jsx(KindIcon, { kind: k, size: 14 }), _jsx(SizableText, { size: "$1", color: k === kind ? '$ink' : '$soft', children: kindOf(k, t) })] }, k))) }) }), _jsx(Field, { label: t('Hostname'), hint: t('Optional. What its runs report. {command}, signed in as you on a machine with this hostname, takes this row over.', { command: 'hanzo link' }), children: _jsx(Input, { value: hostname, onChangeText: setHostname, "aria-label": t('Hostname'), autoCapitalize: "none" }) }), _jsx(Field, { label: t('Capacity / Hardware'), hint: t('Optional human summary (e.g. {example}).', { example: '16 vCPU / 64G / 1× RTX 4090' }), children: _jsx(Input, { value: capacity, onChangeText: setCapacity, "aria-label": t('Capacity'), placeholder: t('e.g. {example}', { example: '16 vCPU / 64G / 1× RTX 4090' }) }) }), note ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note })) : null, _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", disabled: working, onPress: close, children: t('Cancel') }), _jsx(Button, { size: "sm", disabled: working, onPress: () => void save(), children: t('Register') })] })] })] }) }));
 }

package/lib/settings/members.js

@@ -3,31 +3,39 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Members: who is in the organization and in what role, and — for an org admin —
  * who has been invited, inviting someone by email, and withdrawing an invitation.
  * IAM holds both lists and decides who may read and write them.
+ *
+ * Its words are the reader's language (@hanzo/i18n `t`); a person's name,
+ * address and id, an invitation's code and IAM's own state are drawn as given.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { phrase } from '@hanzo/i18n';
+import { useI18n } from '@hanzo/i18n/react';
 import { UserPlus } from '@hanzogui/lucide-icons-2';
 import { Button, Input } from '@hanzo/ui';
 import { useState } from 'react';
+import { told } from '../api/call.js';
 import { EMAIL, invitations, invite, revoke, roster } from '../api/members.js';
 import { useRead } from '../data.js';
 import { useHost, useTarget } from '../host.js';
 import { Card, day, Group, Heading, Note, Row, Soft } from './ui.js';
-const ROLE = { owner: 'Owner', admin: 'Admin', member: 'Member' };
+/** A role by its name, English and marked (`phrase`), drawn through `t`. */
+const ROLE = { owner: phrase('Owner'), admin: phrase('Admin'), member: phrase('Member') };
 function Initial({ name }) {
     return (_jsx(YStack, { width: 28, height: 28, rounded: 999, bg: "$raised", items: "center", justify: "center", shrink: 0, children: _jsx(SizableText, { size: "$2", color: "$ink", children: (name || '?').charAt(0).toUpperCase() }) }));
 }
 export function Members() {
+    const { t } = useI18n();
     const host = useHost();
-    const t = useTarget();
+    const target = useTarget();
     const org = host.org ?? '';
     const signed = Boolean(host.person && org);
-    const people = useRead(signed ? () => roster(t, org) : null, [], [t, org, signed]);
-    const asked = useRead(signed && host.admin ? () => invitations(t, org) : null, [], [t, org, signed, host.admin]);
+    const people = useRead(signed ? () => roster(target, org) : null, [], [target, org, signed]);
+    const asked = useRead(signed && host.admin ? () => invitations(target, org) : null, [], [target, org, signed, host.admin]);
     const [email, setEmail] = useState('');
     const [working, setWorking] = useState(false);
     const [note, setNote] = useState('');
     if (!signed) {
-        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Members" }), _jsx(Soft, { children: host.person ? 'Choose an organization to see its members.' : 'Sign in to see this organization’s members.' })] }));
+        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: t('Members') }), _jsx(Soft, { children: host.person ? t('Choose an organization to see its members.') : t('Sign in to see this organization’s members.') })] }));
     }
     const act = async (what, done, after) => {
         setWorking(true);
@@ -38,7 +46,7 @@ export function Members() {
             setNote(done);
         }
         catch (e) {
-            setNote(e.message);
+            setNote(told(e, t));
         }
         finally {
             setWorking(false);
@@ -48,21 +56,22 @@ export function Members() {
         const address = email.trim();
         // Invite is offered only once something is typed.
         if (!EMAIL.test(address)) {
-            setNote(`${address} is not an email address`);
+            setNote(t('{email} is not an email address', { email: address }));
             return;
         }
-        void act(() => invite(t, org, address), `${address} is invited. IAM sends no email: share the code with them.`, () => {
+        void act(() => invite(target, org, address), t('{email} is invited. IAM sends no email: share the code with them.', { email: address }), () => {
             setEmail('');
             asked.reload();
         });
     };
     const open = asked.value.filter((i) => i.state === 'Active' && i.used < i.seats);
-    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Members", detail: `The people who can act in ${org}, and the role each one holds.` }), _jsx(Group, { title: "Members", detail: people.value.length ? `${people.value.length} in ${org}` : undefined, children: people.error ? (_jsx(Soft, { children: people.error.message })) : people.loading && !people.value.length ? (_jsx(Soft, { children: "Reading members\u2026" })) : people.value.length === 0 ? (_jsx(Card, { children: _jsx(Soft, { children: "No one is on this organization\u2019s roster yet." }) })) : (_jsx(Card, { children: people.value.map((m, i) => (_jsx(Row, { first: i === 0, leading: _jsx(Initial, { name: m.name }), title: m.name, detail: [m.user, m.since ? `since ${day(m.since)}` : ''].filter(Boolean).join(' · '), trailing: _jsx(SizableText, { size: "$1", color: m.role === 'member' ? '$soft' : '$ink', children: ROLE[m.role] }) }, m.user))) })) }), host.admin ? (_jsxs(Group, { title: "Invitations", detail: "An invitation is a one-seat code for one address, redeemed when that person signs up.", children: [_jsxs(Card, { children: [_jsxs(XStack, { gap: "$2", items: "center", px: "$3", py: "$3", flexWrap: "wrap", children: [_jsx(YStack, { flex: 1, minW: 200, children: _jsx(Input, { value: email, onChangeText: setEmail, placeholder: "name@company.com", "aria-label": "Email to invite", inputMode: "email", autoCapitalize: "none" }) }), _jsxs(Button, { size: "sm", disabled: working || !email.trim(), onPress: send, children: [_jsx(UserPlus, { size: 14 }), " Invite"] })] }), asked.error ? (_jsx(YStack, { borderTopWidth: 1, borderColor: "$borderColor", children: _jsx(Soft, { children: asked.error.message }) })) : null, asked.value.map((i) => (_jsx(Row, { title: i.email || i.name, mono: !i.email, detail: [
-                                    i.code ? `Code ${i.code}` : '',
-                                    `${i.used} of ${i.seats} joined`,
-                                    i.state !== 'Active' ? i.state.toLowerCase() || 'not redeemable' : '',
-                                    day(i.created) ? `invited ${day(i.created)}` : '',
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: t('Members'), detail: t('The people who can act in {org}, and the role each one holds.', { org }) }), _jsx(Group, { title: t('Members'), detail: people.value.length ? t('{n} in {org}', { n: people.value.length, org }) : undefined, children: people.error ? (_jsx(Soft, { children: told(people.error, t) })) : people.loading && !people.value.length ? (_jsx(Soft, { children: t('Reading members…') })) : people.value.length === 0 ? (_jsx(Card, { children: _jsx(Soft, { children: t('No one is on this organization’s roster yet.') }) })) : (_jsx(Card, { children: people.value.map((m, i) => (_jsx(Row, { first: i === 0, leading: _jsx(Initial, { name: m.name }), title: m.name, detail: [m.user, m.since ? t('since {day}', { day: day(m.since) }) : ''].filter(Boolean).join(' · '), trailing: _jsx(SizableText, { size: "$1", color: m.role === 'member' ? '$soft' : '$ink', children: t(ROLE[m.role]) }) }, m.user))) })) }), host.admin ? (_jsxs(Group, { title: t('Invitations'), detail: t('An invitation is a one-seat code for one address, redeemed when that person signs up.'), children: [_jsxs(Card, { children: [_jsxs(XStack, { gap: "$2", items: "center", px: "$3", py: "$3", flexWrap: "wrap", children: [_jsx(YStack, { flex: 1, minW: 200, children: _jsx(Input, { value: email, onChangeText: setEmail, placeholder: "name@company.com", "aria-label": t('Email to invite'), inputMode: "email", autoCapitalize: "none" }) }), _jsxs(Button, { size: "sm", disabled: working || !email.trim(), onPress: send, children: [_jsx(UserPlus, { size: 14 }), " ", t('Invite')] })] }), asked.error ? (_jsx(YStack, { borderTopWidth: 1, borderColor: "$borderColor", children: _jsx(Soft, { children: told(asked.error, t) }) })) : null, asked.value.map((i) => (_jsx(Row, { title: i.email || i.name, mono: !i.email, detail: [
+                                    i.code ? t('Code {code}', { code: i.code }) : '',
+                                    t('{used} of {seats} joined', { used: i.used, seats: i.seats }),
+                                    // IAM's own word for a state, as given; none at all is ours.
+                                    i.state !== 'Active' ? i.state.toLowerCase() || t('not redeemable') : '',
+                                    day(i.created) ? t('invited {day}', { day: day(i.created) }) : '',
                                 ]
                                     .filter(Boolean)
-                                    .join(' · '), trailing: _jsx(Button, { size: "sm", variant: "ghost", disabled: working, "aria-label": `Revoke the invitation for ${i.email || i.name}`, onPress: () => void act(() => revoke(t, i), 'The invitation is withdrawn', asked.reload), children: "Revoke" }) }, i.name)))] }), !asked.loading && !asked.error && asked.value.length > 0 && open.length === 0 ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "Every invitation has been used or stopped." })) : null] })) : (_jsx(SizableText, { size: "$1", color: "$soft", children: "An org admin invites people and sees the open invitations." })), _jsx(Note, { children: note })] }));
+                                    .join(' · '), trailing: _jsx(Button, { size: "sm", variant: "ghost", disabled: working, "aria-label": t('Revoke the invitation for {who}', { who: i.email || i.name }), onPress: () => void act(() => revoke(target, i), t('The invitation is withdrawn'), asked.reload), children: t('Revoke') }) }, i.name)))] }), !asked.loading && !asked.error && asked.value.length > 0 && open.length === 0 ? (_jsx(SizableText, { size: "$1", color: "$soft", children: t('Every invitation has been used or stopped.') })) : null] })) : (_jsx(SizableText, { size: "$1", color: "$soft", children: t('An org admin invites people and sees the open invitations.') })), _jsx(Note, { children: note })] }));
 }