@hanzo/build 0.2.80 → 0.2.82

package/lib/environment.js

@@ -7,9 +7,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * the review. While a setup run on the codebase is still working the scripts are
  * its to find, so they cannot be edited. A member reads; an org admin saves and
  * sets secrets, 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, a
+ * secret's, the scripts and what the setup agent wrote are drawn as given.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
 import { Plus, X } from '@hanzogui/lucide-icons-2';
+import { useI18n } from '@hanzo/i18n/react';
 import { Button, Dialog, DialogContent, DialogTitle, Input, Textarea } from '@hanzo/ui';
 import { useEffect, useState } from 'react';
 import { start } from './api/coding.js';
@@ -19,11 +23,12 @@ import { matches } from './merge.js';
 import { useHost, useTarget } from './host.js';
 const mono = { fontFamily: 'var(--f-mono, ui-monospace, monospace)' };
 export function Environment({ repo, busy }) {
+    const { t } = useI18n();
     const host = useHost();
-    const t = useTarget();
+    const target = useTarget();
     const signed = Boolean(host.person);
     // Read again when a setup run on it stops, which is when its proposal lands.
-    const env = useRead(signed && repo ? () => read(t, repo) : null, null, [t, repo, signed, busy]);
+    const env = useRead(signed && repo ? () => read(target, repo) : null, null, [target, repo, signed, busy]);
     const [install, setInstall] = useState('');
     const [startCmd, setStart] = useState('');
     const [adding, setAdding] = useState(false);
@@ -39,20 +44,20 @@ export function Environment({ repo, busy }) {
         setStart(shown.proposal?.start ?? shown.start);
     }, [shown]);
     if (!signed) {
-        return _jsx(Soft, { children: "Sign in to see this codebase\u2019s environment." });
+        return _jsx(Soft, { children: t('Sign in to see this codebase’s environment.') });
     }
     if (!repo) {
-        return _jsx(Soft, { children: "This run has no codebase, so it has no environment." });
+        return _jsx(Soft, { children: t('This run has no codebase, so it has no environment.') });
     }
     if (env.error) {
-        return _jsx(Soft, { children: `${repo}’s environment could not be read right now.` });
+        return _jsx(Soft, { children: t('{repo}’s environment could not be read right now.', { repo }) });
     }
     if (!shown) {
-        return _jsx(Soft, { children: "Reading the environment\u2026" });
+        return _jsx(Soft, { children: t('Reading the environment…') });
     }
     const changed = install !== shown.install || startCmd !== shown.start || shown.proposal !== null;
     const needed = (shown.proposal?.secrets ?? []).filter((n) => !shown.secrets.includes(n));
-    const status = busy ? 'Setting up' : shown.state === 'proposed' ? 'Proposed' : shown.state === 'ready' ? 'Ready' : 'Not set up';
+    const status = busy ? t('Setting up') : shown.state === 'proposed' ? t('Proposed') : shown.state === 'ready' ? t('Ready') : t('Not set up');
     /** One write, then the record read again. Answers whether it took. */
     const act = async (what, done = '') => {
         setWorking(true);
@@ -64,7 +69,7 @@ export function Environment({ repo, busy }) {
             return true;
         }
         catch (e) {
-            setNote(plain(e, repo, 'save'));
+            setNote(plain(e, repo, 'save', t));
             return false;
         }
         finally {
@@ -75,22 +80,22 @@ export function Environment({ repo, busy }) {
         setWorking(true);
         setNote('');
         try {
-            const run = await start(t, { prompt: SETUP, repo, mode: 'setup' });
+            const run = await start(target, { prompt: SETUP, repo, mode: 'setup' });
             host.go(run.session);
         }
         catch (e) {
-            setNote(plain(e, repo, 'start'));
+            setNote(plain(e, repo, 'start', t));
             setWorking(false);
         }
     };
     const add = () => {
         const n = name.trim();
-        const why = refuse(n) || (value ? '' : 'A secret needs a value');
+        const why = refuse(n, t) || (value ? '' : t('A secret needs a value'));
         if (why) {
             setNote(why);
             return;
         }
-        void act(() => setSecret(t, repo, n, value), `${n} is set`).then((took) => {
+        void act(() => setSecret(target, repo, n, value), t('{name} is set', { name: n })).then((took) => {
             if (!took)
                 return;
             setAdding(false);
@@ -98,7 +103,7 @@ export function Environment({ repo, busy }) {
             setValue('');
         });
     };
-    return (_jsxs(YStack, { gap: "$4", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { flex: 1, size: "$4", color: "$ink", numberOfLines: 1, children: repo }), _jsxs(XStack, { items: "center", gap: "$1.5", children: [_jsx(YStack, { width: 6, height: 6, rounded: 999, bg: busy ? '$ink' : shown.state === 'ready' ? '$ink' : '$soft', opacity: busy ? 1 : 0.7 }), _jsx(SizableText, { size: "$1", color: "$soft", children: status })] }), host.admin ? (_jsx(Button, { size: "sm", variant: "outline", disabled: busy || working || !changed, onPress: () => void act(() => save(t, repo, { install, start: startCmd }), 'Saved'), children: "Save" })) : null] }), shown.proposal?.note ? (_jsxs(YStack, { gap: "$1", px: "$3", py: "$2", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "What the setup agent found" }), _jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 8, children: shown.proposal.note })] })) : null, _jsx(Script, { label: "Install Script", value: install, onChange: setInstall, locked: busy || !host.admin, hint: busy ? 'Install script editing will be available when the agent stops running' : 'pnpm install --frozen-lockfile' }), _jsx(Script, { label: "Start Script", value: startCmd, onChange: setStart, locked: busy || !host.admin, hint: busy ? 'Start script editing will be available when the agent stops running' : 'pnpm dev' }), _jsxs(YStack, { gap: "$2", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { size: "$2", color: "$ink", flex: 1, children: "Secrets" }), host.admin ? (_jsxs(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => setAdding(true), children: [_jsx(Plus, { size: 14 }), "New Secret"] })) : null] }), _jsxs(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: [shown.secrets.length === 0 && needed.length === 0 && !adding ? (_jsx(YStack, { py: "$5", items: "center", children: _jsx(SizableText, { size: "$2", color: "$soft", children: "No secrets yet" }) })) : null, shown.secrets.map((s, i) => (_jsxs(XStack, { items: "center", gap: "$2", px: "$3", py: "$2", borderTopWidth: i ? 1 : 0, borderColor: "$borderColor", children: [_jsx(SizableText, { flex: 1, size: "$2", color: "$ink", style: mono, children: s }), _jsx(SizableText, { size: "$1", color: "$soft", children: "set" }), host.admin ? (_jsx(XStack, { render: "button", "aria-label": `Remove ${s}`, px: "$1", onPress: () => void act(() => removeSecret(t, repo, s), `${s} is removed`), children: _jsx(X, { size: 14 }) })) : null] }, s))), needed.map((s) => (_jsxs(XStack, { items: "center", gap: "$2", px: "$3", py: "$2", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { flex: 1, size: "$2", color: "$ink", style: mono, children: s }), _jsx(SizableText, { size: "$1", color: "$soft", children: "needed, not set" }), host.admin ? (_jsx(XStack, { render: "button", "aria-label": `Set ${s}`, px: "$1", onPress: () => { setAdding(true); setName(s); }, children: _jsx(Plus, { size: 14 }) })) : null] }, s))), adding ? (_jsxs(YStack, { gap: "$2", px: "$3", py: "$3", borderTopWidth: shown.secrets.length || needed.length ? 1 : 0, borderColor: "$borderColor", children: [_jsx(Input, { value: name, onChangeText: setName, placeholder: "NAME", "aria-label": "Secret name", autoCapitalize: "characters" }), _jsx(Input, { value: value, onChangeText: setValue, placeholder: "Value", "aria-label": "Secret value", secureTextEntry: true }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => { setAdding(false); setName(''); setValue(''); }, children: "Cancel" }), _jsx(Button, { size: "sm", disabled: working, onPress: add, children: "Add secret" })] })] })) : null] }), _jsx(SizableText, { size: "$1", color: "$soft", children: "Values are sealed in KMS and exported to every run on this codebase. They are never shown again." })] }), shown.state === 'none' && !busy ? (_jsxs(YStack, { gap: "$2", items: "flex-start", children: [_jsx(Button, { size: "sm", disabled: working, onPress: () => void setup(), children: "Set up with an agent" }), _jsx(SizableText, { size: "$1", color: "$soft", children: "An agent explores the codebase, installs and checks it, and proposes the scripts for you to review and save." })] })) : null, !host.admin ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "An org admin saves the environment and sets its secrets." })) : null, note ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note })) : null] }));
+    return (_jsxs(YStack, { gap: "$4", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { flex: 1, size: "$4", color: "$ink", numberOfLines: 1, children: repo }), _jsxs(XStack, { items: "center", gap: "$1.5", children: [_jsx(YStack, { width: 6, height: 6, rounded: 999, bg: busy ? '$ink' : shown.state === 'ready' ? '$ink' : '$soft', opacity: busy ? 1 : 0.7 }), _jsx(SizableText, { size: "$1", color: "$soft", children: status })] }), host.admin ? (_jsx(Button, { size: "sm", variant: "outline", disabled: busy || working || !changed, onPress: () => void act(() => save(target, repo, { install, start: startCmd }), t('Saved')), children: t('Save') })) : null] }), shown.proposal?.note ? (_jsxs(YStack, { gap: "$1", px: "$3", py: "$2", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: t('What the setup agent found') }), _jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 8, children: shown.proposal.note })] })) : null, _jsx(Script, { label: t('Install Script'), value: install, onChange: setInstall, locked: busy || !host.admin, hint: busy ? t('Install script editing will be available when the agent stops running') : 'pnpm install --frozen-lockfile' }), _jsx(Script, { label: t('Start Script'), value: startCmd, onChange: setStart, locked: busy || !host.admin, hint: busy ? t('Start script editing will be available when the agent stops running') : 'pnpm dev' }), _jsxs(YStack, { gap: "$2", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { size: "$2", color: "$ink", flex: 1, children: t('Secrets') }), host.admin ? (_jsxs(Button, { size: "sm", variant: "outline", disabled: working, onPress: () => setAdding(true), children: [_jsx(Plus, { size: 14 }), t('New Secret')] })) : null] }), _jsxs(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: [shown.secrets.length === 0 && needed.length === 0 && !adding ? (_jsx(YStack, { py: "$5", items: "center", children: _jsx(SizableText, { size: "$2", color: "$soft", children: t('No secrets yet') }) })) : null, shown.secrets.map((s, i) => (_jsxs(XStack, { items: "center", gap: "$2", px: "$3", py: "$2", borderTopWidth: i ? 1 : 0, borderColor: "$borderColor", children: [_jsx(SizableText, { flex: 1, size: "$2", color: "$ink", style: mono, children: s }), _jsx(SizableText, { size: "$1", color: "$soft", children: t('set') }), host.admin ? (_jsx(XStack, { render: "button", "aria-label": t('Remove {name}', { name: s }), px: "$1", onPress: () => void act(() => removeSecret(target, repo, s), t('{name} is removed', { name: s })), children: _jsx(X, { size: 14 }) })) : null] }, s))), needed.map((s) => (_jsxs(XStack, { items: "center", gap: "$2", px: "$3", py: "$2", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { flex: 1, size: "$2", color: "$ink", style: mono, children: s }), _jsx(SizableText, { size: "$1", color: "$soft", children: t('needed, not set') }), host.admin ? (_jsx(XStack, { render: "button", "aria-label": t('Set {name}', { name: s }), px: "$1", onPress: () => { setAdding(true); setName(s); }, children: _jsx(Plus, { size: 14 }) })) : null] }, s))), adding ? (_jsxs(YStack, { gap: "$2", px: "$3", py: "$3", borderTopWidth: shown.secrets.length || needed.length ? 1 : 0, borderColor: "$borderColor", children: [_jsx(Input, { value: name, onChangeText: setName, placeholder: t('NAME'), "aria-label": t('Secret name'), autoCapitalize: "characters" }), _jsx(Input, { value: value, onChangeText: setValue, placeholder: t('Value'), "aria-label": t('Secret value'), secureTextEntry: true }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => { setAdding(false); setName(''); setValue(''); }, children: t('Cancel') }), _jsx(Button, { size: "sm", disabled: working, onPress: add, children: t('Add secret') })] })] })) : null] }), _jsx(SizableText, { size: "$1", color: "$soft", children: t('Values are sealed in KMS and exported to every run on this codebase. They are never shown again.') })] }), shown.state === 'none' && !busy ? (_jsxs(YStack, { gap: "$2", items: "flex-start", children: [_jsx(Button, { size: "sm", disabled: working, onPress: () => void setup(), children: t('Set up with an agent') }), _jsx(SizableText, { size: "$1", color: "$soft", children: t('An agent explores the codebase, installs and checks it, and proposes the scripts for you to review and save.') })] })) : null, !host.admin ? (_jsx(SizableText, { size: "$1", color: "$soft", children: t('An org admin saves the environment and sets its secrets.') })) : null, note ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note })) : null] }));
 }
 /**
  * New's offer to set a codebase up. An agent onboards it, or an org admin saves
@@ -109,8 +114,9 @@ export function Environment({ repo, busy }) {
  * board's key handed over as a codebase — is said so and cannot be set up.
  */
 export function SetupDialog({ repo, homes, open, onOpenChange, onStart, onSaved, onRepo, }) {
+    const { t } = useI18n();
     const host = useHost();
-    const t = useTarget();
+    const target = useTarget();
     const [chosen, setChosen] = useState(repo);
     const [q, setQ] = useState('');
     const [working, setWorking] = useState('');
@@ -140,7 +146,7 @@ export function SetupDialog({ repo, homes, open, onOpenChange, onStart, onSaved,
         setNote('');
         try {
             if (what === 'save') {
-                await save(t, repo, { install: '', start: '' });
+                await save(target, repo, { install: '', start: '' });
                 onSaved(repo);
             }
             else {
@@ -149,20 +155,20 @@ export function SetupDialog({ repo, homes, open, onOpenChange, onStart, onSaved,
             }
         }
         catch (e) {
-            setNote(plain(e, repo, what));
+            setNote(plain(e, repo, what, t));
         }
         finally {
             setWorking('');
         }
     };
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 480, showCloseButton: false, children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [_jsx(DialogTitle, { children: "Set up an environment" }), _jsx(XStack, { render: "button", "aria-label": "Close", p: "$1", onPress: () => onOpenChange(false), children: _jsx(X, { size: 16 }) })] }), _jsxs(YStack, { gap: "$3", children: [_jsxs(YStack, { gap: "$1.5", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: "Repository" }), _jsx(XStack, { px: "$3", py: "$2", rounded: "$3", borderWidth: 1, borderColor: stranger ? '$ink' : '$borderColor', items: "center", gap: "$2", "aria-label": "Chosen repository", children: _jsx(SizableText, { size: "$2", color: home || (chosen && !stranger) ? '$ink' : '$soft', numberOfLines: 1, flex: 1, minW: 0, children: home ? home.label : chosen || 'Choose a repository' }) }), stranger ? (_jsx(SizableText, { size: "$1", color: "$ink", role: "alert", children: `${chosen} is not one of this organization’s repositories. Choose one below.` })) : null, _jsx(Input, { value: q, onChangeText: setQ, placeholder: "Find a repository\u2026", "aria-label": "Find a repository" }), _jsx(YStack, { gap: 2, "aria-label": "Repositories", children: homes.loading && !list.length ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "Reading the repositories\u2026" })) : homes.error && !list.length ? (_jsxs(XStack, { items: "center", gap: "$2", flexWrap: "wrap", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "The repository list could not be read right now." }), _jsx(Button, { size: "sm", variant: "outline", onPress: homes.reload, children: "Read again" })] })) : shown.length === 0 ? (_jsx(SizableText, { size: "$1", color: "$soft", children: list.length ? 'Nothing matches.' : 'This organization has no repositories on the forge yet.' })) : (shown.map((h) => {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 480, showCloseButton: false, children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [_jsx(DialogTitle, { children: t('Set up an environment') }), _jsx(XStack, { render: "button", "aria-label": t('Close'), p: "$1", onPress: () => onOpenChange(false), children: _jsx(X, { size: 16 }) })] }), _jsxs(YStack, { gap: "$3", children: [_jsxs(YStack, { gap: "$1.5", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: t('Repository') }), _jsx(XStack, { px: "$3", py: "$2", rounded: "$3", borderWidth: 1, borderColor: stranger ? '$ink' : '$borderColor', items: "center", gap: "$2", "aria-label": t('Chosen repository'), children: _jsx(SizableText, { size: "$2", color: home || (chosen && !stranger) ? '$ink' : '$soft', numberOfLines: 1, flex: 1, minW: 0, children: home ? home.label : chosen || t('Choose a repository') }) }), stranger ? (_jsx(SizableText, { size: "$1", color: "$ink", role: "alert", children: t('{repo} is not one of this organization’s repositories. Choose one below.', { repo: chosen }) })) : null, _jsx(Input, { value: q, onChangeText: setQ, placeholder: t('Find a repository…'), "aria-label": t('Find a repository') }), _jsx(YStack, { gap: 2, "aria-label": t('Repositories'), children: homes.loading && !list.length ? (_jsx(SizableText, { size: "$1", color: "$soft", children: t('Reading the repositories…') })) : homes.error && !list.length ? (_jsxs(XStack, { items: "center", gap: "$2", flexWrap: "wrap", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: t('The repository list could not be read right now.') }), _jsx(Button, { size: "sm", variant: "outline", onPress: homes.reload, children: t('Read again') })] })) : shown.length === 0 ? (_jsx(SizableText, { size: "$1", color: "$soft", children: list.length ? t('Nothing matches.') : t('This organization has no repositories on the forge yet.') })) : (shown.map((h) => {
                                         const on = h.name.toLowerCase() === chosen.toLowerCase();
-                                        return (_jsx(XStack, { render: "button", "aria-pressed": on, "aria-label": `Choose ${h.label}`, onPress: () => {
+                                        return (_jsx(XStack, { render: "button", "aria-pressed": on, "aria-label": t('Choose {repo}', { repo: h.label }), onPress: () => {
                                                 setChosen(h.name);
                                                 setNote('');
                                                 onRepo(h);
                                             }, px: "$2.5", py: "$1.5", rounded: "$2", bg: on ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, children: _jsx(SizableText, { size: "$2", color: on ? '$ink' : '$soft', numberOfLines: 1, children: h.label }) }, h.name));
-                                    })) })] }), _jsx(SizableText, { size: "$2", color: "$soft", children: "An agent onboards the codebase: it explores it, writes the install and start scripts, and names the secrets it needs. It takes several minutes. Interrupt it anytime, or take over in the terminal." }), note ? (_jsxs(XStack, { items: "center", gap: "$2", flexWrap: "wrap", children: [_jsx(SizableText, { size: "$1", color: "$ink", role: "status", flex: 1, minW: 200, children: note }), last ? (_jsx(Button, { size: "sm", variant: "outline", disabled: working !== '', onPress: () => void run(last), children: "Try again" })) : null] })) : null, _jsxs(XStack, { gap: "$2", justify: "space-between", items: "center", children: [host.admin ? (_jsx(Button, { size: "sm", variant: "secondary", disabled: working !== '' || !ready, onPress: () => void run('save'), children: working === 'save' ? 'Saving…' : 'Skip & save' })) : (_jsx(YStack, {})), _jsx(Button, { size: "sm", variant: "primary", disabled: working !== '' || !ready, onPress: () => void run('start'), children: working === 'start' ? 'Starting the agent…' : 'Start agent' })] })] })] }) }));
+                                    })) })] }), _jsx(SizableText, { size: "$2", color: "$soft", children: t('An agent onboards the codebase: it explores it, writes the install and start scripts, and names the secrets it needs. It takes several minutes. Interrupt it anytime, or take over in the terminal.') }), note ? (_jsxs(XStack, { items: "center", gap: "$2", flexWrap: "wrap", children: [_jsx(SizableText, { size: "$1", color: "$ink", role: "status", flex: 1, minW: 200, children: note }), last ? (_jsx(Button, { size: "sm", variant: "outline", disabled: working !== '', onPress: () => void run(last), children: t('Try again') })) : null] })) : null, _jsxs(XStack, { gap: "$2", justify: "space-between", items: "center", children: [host.admin ? (_jsx(Button, { size: "sm", variant: "secondary", disabled: working !== '' || !ready, onPress: () => void run('save'), children: working === 'save' ? t('Saving…') : t('Skip & save') })) : (_jsx(YStack, {})), _jsx(Button, { size: "sm", variant: "primary", disabled: working !== '' || !ready, onPress: () => void run('start'), children: working === 'start' ? t('Starting the agent…') : t('Start agent') })] })] })] }) }));
 }
 function Script({ label, value, onChange, locked, hint }) {
     return (_jsxs(YStack, { gap: "$2", children: [_jsx(SizableText, { size: "$2", color: "$ink", children: label }), _jsx(Textarea, { value: value, onChangeText: onChange, disabled: locked, placeholder: hint, "aria-label": label, rows: 3, style: mono })] }));

package/lib/files.js

@@ -6,8 +6,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * or changed and the whole change as a patch, kept after its sandbox is gone; its
  * previews, pull request and deployments — then its published site, its branch,
  * its environment proposal and its project.
+ *
+ * Its words are the reader's language (@hanzo/i18n `t`); names, paths and a
+ * file's contents are drawn as given.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { useI18n } from '@hanzo/i18n/react';
 import { Download, ExternalLink, File, FileDiff, Folder, Globe, GitBranch, GitPullRequest, Layers, MonitorPlay, Rocket, Settings2 } from '@hanzogui/lucide-icons-2';
 import { useState } from 'react';
 import { blob, tree } from './api/changes.js';
@@ -18,25 +22,27 @@ import { useHost, useTarget } from './host.js';
 import { away, Out } from './out.js';
 const monoWrap = { whiteSpace: 'pre-wrap', fontFamily: 'var(--f-mono, ui-monospace, monospace)' };
 export function Files({ session, repo, branch, sandbox, live, }) {
+    const { t } = useI18n();
     const reachable = live && Boolean(sandbox);
     // Live once the sandbox is reachable, unless the branch was picked.
     const [source, setSource] = useState(null);
     const from = reachable ? (source ?? 'live') : 'branch';
-    return (_jsxs(YStack, { gap: "$3", children: [reachable ? (_jsxs(XStack, { gap: "$1", items: "center", flexWrap: "wrap", children: [_jsx(Pick, { on: from === 'live', onPress: () => setSource('live'), children: "Live" }), _jsx(Pick, { on: from === 'branch', onPress: () => setSource('branch'), children: "Branch" })] })) : null, from === 'live' ? _jsx(Live, { sandbox: sandbox }) : _jsx(Branch, { session: session, label: `${repo}${branch ? `@${branch}` : ''}` })] }));
+    return (_jsxs(YStack, { gap: "$3", children: [reachable ? (_jsxs(XStack, { gap: "$1", items: "center", flexWrap: "wrap", children: [_jsx(Pick, { on: from === 'live', onPress: () => setSource('live'), children: t('Live') }), _jsx(Pick, { on: from === 'branch', onPress: () => setSource('branch'), children: t('Branch') })] })) : null, from === 'live' ? _jsx(Live, { sandbox: sandbox }) : _jsx(Branch, { session: session, label: `${repo}${branch ? `@${branch}` : ''}` })] }));
 }
 /** The sandbox's working tree, as it is right now. */
 function Live({ sandbox }) {
-    const t = useTarget();
+    const target = useTarget();
+    const { t } = useI18n();
     const [dir, setDir] = useState('');
     const [file, setFile] = useState('');
-    const list = useRead(() => look(t, sandbox, dir), null, [t, sandbox, dir]);
-    const body = useRead(file ? () => look(t, sandbox, file) : null, null, [t, sandbox, file]);
+    const list = useRead(() => look(target, sandbox, dir), null, [target, sandbox, dir]);
+    const body = useRead(file ? () => look(target, sandbox, file) : null, null, [target, sandbox, file]);
     const at = (name) => (dir ? `${dir}/${name}` : name);
     // A name is only a name until it is read: the answer says whether it was a directory.
     const open = async (name) => {
         const path = at(name);
         try {
-            const n = await look(t, sandbox, path);
+            const n = await look(target, sandbox, path);
             if (n.dir) {
                 setDir(path);
                 setFile('');
@@ -53,23 +59,24 @@ function Live({ sandbox }) {
             ? body.error.message
             : body.value
                 ? body.value.binary
-                    ? 'Binary file'
+                    ? t('Binary file')
                     : body.value.truncated
-                        ? 'Too large to show'
-                        : body.value.text || 'Empty file'
+                        ? t('Too large to show')
+                        : body.value.text || t('Empty file')
                 : '' }));
 }
 /** The run's branch on the forge; its base until it has pushed. */
 function Branch({ session, label }) {
     const host = useHost();
-    const t = useTarget();
+    const target = useTarget();
+    const { t } = useI18n();
     const signed = Boolean(host.person);
     const [dir, setDir] = useState('');
     const [file, setFile] = useState('');
-    const list = useRead(signed ? () => tree(t, session, dir) : null, [], [t, session, dir, signed]);
-    const body = useRead(file ? () => blob(t, session, file) : null, null, [t, session, file]);
+    const list = useRead(signed ? () => tree(target, session, dir) : null, [], [target, session, dir, signed]);
+    const body = useRead(file ? () => blob(target, session, file) : null, null, [target, session, file]);
     if (!signed)
-        return _jsx(Soft, { children: "Sign in to read this run\u2019s files." });
+        return _jsx(Soft, { children: t('Sign in to read this run’s files.') });
     return (_jsx(Listing, { where: `${label}${dir ? `/${dir}` : ''}`, up: dir ? () => (setDir(dir.includes('/') ? dir.slice(0, dir.lastIndexOf('/')) : ''), setFile('')) : undefined, error: list.error?.message ?? '', loading: list.loading && list.value.length === 0, rows: list.value.map((e) => ({
             key: e.path,
             name: e.name,
@@ -79,34 +86,36 @@ function Branch({ session, label }) {
             ? body.error.message
             : body.value
                 ? body.value.binary
-                    ? 'Binary file'
+                    ? t('Binary file')
                     : body.value.truncated
-                        ? 'Too large to show'
-                        : body.value.text || 'Empty file'
+                        ? t('Too large to show')
+                        : body.value.text || t('Empty file')
                 : '' }));
 }
 function Listing({ where, up, error, loading, rows, file, body, }) {
-    return (_jsxs(YStack, { gap: "$2", children: [_jsxs(XStack, { gap: "$2", items: "center", children: [up ? (_jsx(XStack, { render: "button", "aria-label": "Up one directory", onPress: up, px: "$1", py: "$1", children: _jsx(SizableText, { size: "$1", color: "$soft", children: "Up" }) })) : null, _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: where })] }), error ? (_jsx(SizableText, { size: "$2", color: "$soft", children: error })) : loading ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "Reading\u2026" })) : rows.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "This directory is empty." })) : (rows.map((r) => (_jsxs(XStack, { render: "button", "aria-label": r.dir === false ? `Read ${r.name}` : `Open ${r.name}`, onPress: r.onPress, items: "center", gap: "$2", py: "$1", hoverStyle: { bg: '$hover' }, children: [r.dir === false ? _jsx(File, { size: 14 }) : r.dir ? _jsx(Folder, { size: 14 }) : _jsx(File, { size: 14, opacity: 0.6 }), _jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, style: { textAlign: 'left' }, children: r.name })] }, r.key)))), file && body ? (_jsxs(YStack, { gap: "$1", pt: "$2", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: file }), _jsx(SizableText, { size: "$1", color: "$ink", style: monoWrap, children: body })] })) : null] }));
+    const { t } = useI18n();
+    return (_jsxs(YStack, { gap: "$2", children: [_jsxs(XStack, { gap: "$2", items: "center", children: [up ? (_jsx(XStack, { render: "button", "aria-label": t('Up one directory'), onPress: up, px: "$1", py: "$1", children: _jsx(SizableText, { size: "$1", color: "$soft", children: t('Up') }) })) : null, _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: where })] }), error ? (_jsx(SizableText, { size: "$2", color: "$soft", children: error })) : loading ? (_jsx(SizableText, { size: "$2", color: "$soft", children: t('Reading…') })) : rows.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", children: t('This directory is empty.') })) : (rows.map((r) => (_jsxs(XStack, { render: "button", "aria-label": r.dir === false ? t('Read {name}', { name: r.name }) : t('Open {name}', { name: r.name }), onPress: r.onPress, items: "center", gap: "$2", py: "$1", hoverStyle: { bg: '$hover' }, children: [r.dir === false ? _jsx(File, { size: 14 }) : r.dir ? _jsx(Folder, { size: 14 }) : _jsx(File, { size: 14, opacity: 0.6 }), _jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, text: "start", children: r.name })] }, r.key)))), file && body ? (_jsxs(YStack, { gap: "$1", pt: "$2", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: file }), _jsx(SizableText, { size: "$1", color: "$ink", style: monoWrap, children: body })] })) : null] }));
 }
 /** A stored artifact's size, as a person reads it. */
 const size = (n) => (n < 1024 ? `${n} B` : n < 1 << 20 ? `${(n / 1024).toFixed(1)} KB` : `${(n / (1 << 20)).toFixed(1)} MB`);
-/** What each kind of artifact is drawn with, and says it is. */
+/** What each kind of artifact is drawn with, and says it is, in the reader's language. */
 const KIND = {
-    file: { icon: _jsx(File, { size: 16 }), note: (a) => `Changed file · ${size(a.size)}` },
-    patch: { icon: _jsx(FileDiff, { size: 16 }), note: (a) => `The whole change as a patch · ${size(a.size)}` },
-    preview: { icon: _jsx(MonitorPlay, { size: 16 }), note: (a) => `What the run served on port ${a.port}` },
-    pull: { icon: _jsx(GitPullRequest, { size: 16 }), note: () => 'Pull request' },
-    deploy: { icon: _jsx(Rocket, { size: 16 }), note: () => 'Deployment' },
+    file: { icon: _jsx(File, { size: 16 }), note: (a, t) => t('Changed file · {size}', { size: size(a.size) }) },
+    patch: { icon: _jsx(FileDiff, { size: 16 }), note: (a, t) => t('The whole change as a patch · {size}', { size: size(a.size) }) },
+    preview: { icon: _jsx(MonitorPlay, { size: 16 }), note: (a, t) => t('What the run served on port {port}', { port: a.port }) },
+    pull: { icon: _jsx(GitPullRequest, { size: 16 }), note: (_, t) => t('Pull request') },
+    deploy: { icon: _jsx(Rocket, { size: 16 }), note: (_, t) => t('Deployment') },
 };
 export function Artifacts({ session, sandbox, repo, branch, mode, project, site, pr, onEnvironment, }) {
     const host = useHost();
-    const t = useTarget();
-    const left = useRead(host.person ? () => artifacts(t, session) : null, { saved: '', artifacts: [] }, [t, session, host.person]);
+    const target = useTarget();
+    const { t } = useI18n();
+    const left = useRead(host.person ? () => artifacts(target, session) : null, { saved: '', artifacts: [] }, [target, session, host.person]);
     const [note, setNote] = useState('');
     // Bytes come with the person's bearer, so a stored artifact is fetched, then saved.
     const save = async (a) => {
         try {
-            const url = URL.createObjectURL(await artifact(t, session, a.name));
+            const url = URL.createObjectURL(await artifact(target, session, a.name));
             const link = document.createElement('a');
             link.href = url;
             link.download = a.name.split('/').pop() || a.name;
@@ -118,7 +127,7 @@ export function Artifacts({ session, sandbox, repo, branch, mode, project, site,
         }
     };
     // A preview is opened with a fresh ticket, in a tab of its own.
-    const open = (a) => away(preview(t, sandbox, a.port)).catch((e) => setNote(e.message));
+    const open = (a) => away(preview(target, sandbox, a.port)).catch((e) => setNote(e.message));
     const items = [];
     for (const a of left.value.artifacts) {
         const stored = a.kind === 'file' || a.kind === 'patch';
@@ -129,26 +138,26 @@ export function Artifacts({ session, sandbox, repo, branch, mode, project, site,
             key: `${a.kind}:${a.name}`,
             icon: KIND[a.kind].icon,
             title: link ? a.url.replace(/^https:\/\//, '') : a.name,
-            note: KIND[a.kind].note(a),
+            note: KIND[a.kind].note(a, t),
             href: link ? a.url : undefined,
             onPress: stored ? () => void save(a) : a.kind === 'preview' ? () => void open(a) : undefined,
             action: stored ? _jsx(Download, { size: 14 }) : a.kind === 'preview' ? _jsx(ExternalLink, { size: 14 }) : undefined,
         });
     }
     if (site)
-        items.push({ key: 'site', icon: _jsx(Globe, { size: 16 }), title: site.replace(/^https:\/\//, ''), note: 'Where this run is published', href: site });
+        items.push({ key: 'site', icon: _jsx(Globe, { size: 16 }), title: site.replace(/^https:\/\//, ''), note: t('Where this run is published'), href: site });
     if (pr.href)
-        items.push({ key: 'pr', icon: _jsx(GitPullRequest, { size: 16 }), title: `Pull request ${pr.label}`, note: 'Opened on the forge', href: pr.href });
+        items.push({ key: 'pr', icon: _jsx(GitPullRequest, { size: 16 }), title: t('Pull request {pr}', { pr: pr.label }), note: t('Opened on the forge'), href: pr.href });
     if (branch)
-        items.push({ key: 'branch', icon: _jsx(GitBranch, { size: 16 }), title: branch, note: repo ? `The branch this run pushes to in ${repo}` : 'The branch this run pushes to' });
+        items.push({ key: 'branch', icon: _jsx(GitBranch, { size: 16 }), title: branch, note: repo ? t('The branch this run pushes to in {repo}', { repo }) : t('The branch this run pushes to') });
     if (mode === 'setup')
-        items.push({ key: 'environment', icon: _jsx(Settings2, { size: 16 }), title: 'Environment proposal', note: 'The install and start scripts this run found', onPress: onEnvironment });
+        items.push({ key: 'environment', icon: _jsx(Settings2, { size: 16 }), title: t('Environment proposal'), note: t('The install and start scripts this run found'), onPress: onEnvironment });
     if (project)
-        items.push({ key: 'project', icon: _jsx(Layers, { size: 16 }), title: project, note: 'The project this run builds', onPress: () => host.go(project) });
+        items.push({ key: 'project', icon: _jsx(Layers, { size: 16 }), title: project, note: t('The project this run builds'), onPress: () => host.go(project) });
     if (!items.length)
-        return _jsx(Soft, { children: left.error?.message || (left.loading ? 'Reading what this run left…' : 'This run has produced no artifacts yet.') });
+        return _jsx(Soft, { children: left.error?.message || (left.loading ? t('Reading what this run left…') : t('This run has produced no artifacts yet.')) });
     return (_jsxs(YStack, { gap: "$2", children: [note ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note })) : null, _jsx(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: items.map((a, i) => {
-                    const row = (_jsxs(XStack, { items: "center", gap: "$3", px: "$3", py: "$2.5", borderTopWidth: i ? 1 : 0, borderColor: "$borderColor", hoverStyle: a.href || a.onPress ? { bg: '$hover' } : undefined, children: [a.icon, _jsxs(YStack, { flex: 1, minW: 0, style: { textAlign: 'left' }, children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: a.title }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: a.note })] }), a.action ?? (a.href ? _jsx(ExternalLink, { size: 14 }) : null)] }));
+                    const row = (_jsxs(XStack, { items: "center", gap: "$3", px: "$3", py: "$2.5", borderTopWidth: i ? 1 : 0, borderColor: "$borderColor", hoverStyle: a.href || a.onPress ? { bg: '$hover' } : undefined, children: [a.icon, _jsxs(YStack, { flex: 1, minW: 0, "$platform-web": { textAlign: 'start' }, children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: a.title }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: a.note })] }), a.action ?? (a.href ? _jsx(ExternalLink, { size: 14 }) : null)] }));
                     return a.href ? (_jsx(Out, { href: a.href, label: a.title, children: _jsx(YStack, { width: "100%", children: row }) }, a.key)) : a.onPress ? (_jsx(YStack, { render: "button", "aria-label": a.title, onPress: a.onPress, children: row }, a.key)) : (_jsx(YStack, { children: row }, a.key));
                 }) })] }));
 }

package/lib/find.js

@@ -6,20 +6,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * the first page lands it searches the rail's own recents.
  */
 import { ScrollView, 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 { useEffect, useMemo, useRef, useState } from 'react';
 import { page } from './api/sessions.js';
 import { useHost, useTarget } from './host.js';
 /** The statuses the platform filters on, and every run. */
 const FILTERS = [
-    { id: '', label: 'All' },
-    { id: 'running', label: 'Running' },
-    { id: 'paused', label: 'Paused' },
-    { id: 'done', label: 'Done' },
-    { id: 'error', label: 'Error' },
+    { id: '', label: phrase('All') },
+    { id: 'running', label: phrase('Running') },
+    { id: 'paused', label: phrase('Paused') },
+    { id: 'done', label: phrase('Done') },
+    { id: 'error', label: phrase('Error') },
 ];
 const PAGE = 50;
 export function Find({ open, onOpenChange, recents, onOpen, }) {
+    const { t: say } = useI18n();
     const host = useHost();
     const t = useTarget();
     const signed = Boolean(host.person);
@@ -64,14 +67,14 @@ export function Find({ open, onOpenChange, recents, onOpen, }) {
     const hits = useMemo(() => {
         const n = q.trim().toLowerCase();
         const all = rows
-            ? rows.map((s) => ({ id: s.id, title: s.title || 'Untitled run', line: [s.repo, s.status].filter(Boolean).join(' · ') }))
+            ? rows.map((s) => ({ id: s.id, title: s.title || say('Untitled run'), line: [s.repo, s.status].filter(Boolean).join(' · ') }))
             : status
                 ? []
                 : recents.map((r) => ({ id: r.id, title: r.title, line: '' }));
         return n ? all.filter((h) => `${h.title} ${h.line}`.toLowerCase().includes(n)) : all;
-    }, [q, rows, recents, status]);
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 520, children: [_jsx(DialogTitle, { children: "Find a run" }), _jsx(Input, { autoFocus: true, value: q, onChangeText: setQ, placeholder: "Search runs\u2026", "aria-label": "Search runs", onKeyDown: (e) => {
+    }, [q, rows, recents, status, say]);
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 520, children: [_jsx(DialogTitle, { children: say('Find a run') }), _jsx(Input, { autoFocus: true, value: q, onChangeText: setQ, placeholder: say('Search runs…'), "aria-label": say('Search runs'), onKeyDown: (e) => {
                         if (e.key === 'Enter' && hits[0])
                             onOpen(hits[0].id);
-                    } }), _jsx(XStack, { gap: "$1", flexWrap: "wrap", role: "group", "aria-label": "Status", children: FILTERS.map((f) => (_jsx(XStack, { render: "button", "aria-label": f.label, "aria-pressed": status === f.id, onPress: () => setStatus(f.id), px: "$2.5", py: "$1", rounded: "$10", borderWidth: 1, borderColor: status === f.id ? '$ink' : '$borderColor', bg: status === f.id ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, children: _jsx(SizableText, { size: "$1", color: status === f.id ? '$ink' : '$soft', children: f.label }) }, f.id || 'all'))) }), _jsx(ScrollView, { maxH: 360, children: _jsxs(YStack, { gap: "$1", role: "list", children: [hits.map((h) => (_jsxs(XStack, { role: "listitem", render: "button", "aria-label": h.title, onPress: () => onOpen(h.id), px: "$2", py: "$1.5", rounded: "$3", hoverStyle: { bg: '$hover' }, items: "center", gap: "$3", children: [_jsx(SizableText, { flex: 1, minW: 0, size: "$2", color: "$ink", numberOfLines: 1, style: { textAlign: 'left' }, children: h.title }), h.line ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, shrink: 0, maxW: "45%", children: h.line })) : null] }, h.id))), !loading && !error && hits.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", px: "$2", children: rows && next ? 'No run read so far matches.' : 'No run matches.' })) : null] }) }), error ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: error })) : null, loading ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: "Reading runs\u2026" })) : next ? (_jsx(XStack, { children: _jsx(Button, { size: "sm", variant: "outline", onPress: () => void read(next), children: "Older runs" }) })) : null] }) }));
+                    } }), _jsx(XStack, { gap: "$1", flexWrap: "wrap", role: "group", "aria-label": say('Status'), children: FILTERS.map((f) => (_jsx(XStack, { render: "button", "aria-label": say(f.label), "aria-pressed": status === f.id, onPress: () => setStatus(f.id), px: "$2.5", py: "$1", rounded: "$10", borderWidth: 1, borderColor: status === f.id ? '$ink' : '$borderColor', bg: status === f.id ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, children: _jsx(SizableText, { size: "$1", color: status === f.id ? '$ink' : '$soft', children: say(f.label) }) }, f.id || 'all'))) }), _jsx(ScrollView, { maxH: 360, children: _jsxs(YStack, { gap: "$1", role: "list", children: [hits.map((h) => (_jsxs(XStack, { role: "listitem", render: "button", "aria-label": h.title, onPress: () => onOpen(h.id), px: "$2", py: "$1.5", rounded: "$3", hoverStyle: { bg: '$hover' }, items: "center", gap: "$3", children: [_jsx(SizableText, { flex: 1, minW: 0, size: "$2", color: "$ink", numberOfLines: 1, style: { textAlign: 'left' }, children: h.title }), h.line ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, shrink: 0, maxW: "45%", children: h.line })) : null] }, h.id))), !loading && !error && hits.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", px: "$2", children: rows && next ? say('No run read so far matches.') : say('No run matches.') })) : null] }) }), error ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: error })) : null, loading ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: say('Reading runs…') })) : next ? (_jsx(XStack, { children: _jsx(Button, { size: "sm", variant: "outline", onPress: () => void read(next), children: say('Older runs') }) })) : null] }) }));
 }

package/lib/foot.js

@@ -9,6 +9,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  */
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Popover, SizableText, XStack, YStack } from '@hanzo/gui';
+import { useI18n } from '@hanzo/i18n/react';
 import { CreditCard, Gauge, LifeBuoy, LogOut, Settings, Slack as Mark, Sparkles, X } from '@hanzogui/lucide-icons-2';
 import { MenuLabel, MenuRow, MenuRule } from '@hanzo/ui/product';
 import { useHost, useTarget } from './host.js';
@@ -18,7 +19,8 @@ import { path } from './route.js';
 export const DOCS = 'https://docs.hanzo.ai/docs/dev';
 /** Hanzo in Slack is set up under Settings; the card goes there, and once dismissed stays gone. */
 export function Slack({ onOpen, onDismiss }) {
-    return (_jsxs(XStack, { items: "center", gap: "$2.5", px: "$3", py: "$2.5", rounded: "var(--radius-lg)", borderWidth: 1, borderColor: "$borderColor", bg: "var(--glass)", children: [_jsx(Mark, { size: 16 }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: "Try Hanzo in Slack" }), _jsx(XStack, { render: "button", "aria-label": "Set up Hanzo in Slack", onPress: onOpen, cursor: "pointer", children: _jsx(SizableText, { size: "$1", color: "$soft", textDecorationLine: "underline", children: "Set up" }) })] }), _jsx(XStack, { render: "button", "aria-label": "Dismiss", onPress: onDismiss, p: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(X, { size: 14 }) })] }));
+    const { t } = useI18n();
+    return (_jsxs(XStack, { items: "center", gap: "$2.5", px: "$3", py: "$2.5", rounded: "var(--radius-lg)", borderWidth: 1, borderColor: "$borderColor", bg: "var(--glass)", children: [_jsx(Mark, { size: 16 }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: t('Try Hanzo in Slack') }), _jsx(XStack, { render: "button", "aria-label": t('Set up Hanzo in Slack'), onPress: onOpen, cursor: "pointer", children: _jsx(SizableText, { size: "$1", color: "$soft", textDecorationLine: "underline", children: t('Set up') }) })] }), _jsx(XStack, { render: "button", "aria-label": t('Dismiss'), onPress: onDismiss, p: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(X, { size: 14 }) })] }));
 }
 /**
  * The account menu's open state, for whatever row opens it.
@@ -54,6 +56,7 @@ export function useWho() {
  * open rail, beside it on the collapsed one.
  */
 export function Who({ open, onOpenChange, narrow }) {
+    const { t } = useI18n();
     const host = useHost();
     const standing = useStanding(useTarget(), open);
     // The organizations this person acts in; choosing one reloads the page scoped to it.
@@ -62,14 +65,14 @@ export function Who({ open, onOpenChange, narrow }) {
         onOpenChange(false);
         host.go(p);
     };
-    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, placement: narrow ? 'right-end' : 'top-start', allowFlip: true, stayInFrame: true, offset: 6, children: [_jsx(Popover.Anchor, { position: "absolute", l: 8, b: 8, width: narrow ? 48 : 256, height: 36, pointerEvents: "none" }), _jsx(Popover.Content, { role: "menu", "aria-label": "Account", items: "stretch", borderWidth: 1, elevation: "$2", px: "$1", py: "$1", width: 260, bg: "$panel", borderColor: "$borderColor", children: _jsxs(YStack, { gap: "$1", children: [_jsx(SizableText, { size: "$2", color: "$soft", px: "$2", py: "$1.5", numberOfLines: 1, children: host.person?.email || host.person?.name || '' }), _jsx(MenuRule, {}), _jsx(Meter, { read: standing, onPlans: () => go(path({ kind: 'screen', screen: 'plans' })), onBilling: () => go(path({ kind: 'settings', section: 'billing' })) }), orgs.length ? (_jsxs(_Fragment, { children: [_jsx(MenuRule, {}), _jsx(MenuLabel, { children: "Organization" }), _jsx(YStack, { role: "radiogroup", "aria-label": "Organizations", gap: "$1", children: orgs.map((o) => (_jsx(MenuRow, { label: o, active: o === host.org, onPress: () => {
+    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, placement: narrow ? 'right-end' : 'top-start', allowFlip: true, stayInFrame: true, offset: 6, children: [_jsx(Popover.Anchor, { position: "absolute", l: 8, b: 8, width: narrow ? 48 : 256, height: 36, pointerEvents: "none" }), _jsx(Popover.Content, { role: "menu", "aria-label": t('Account'), items: "stretch", borderWidth: 1, elevation: "$2", px: "$1", py: "$1", width: 260, bg: "$panel", borderColor: "$borderColor", children: _jsxs(YStack, { gap: "$1", children: [_jsx(SizableText, { size: "$2", color: "$soft", px: "$2", py: "$1.5", numberOfLines: 1, children: host.person?.email || host.person?.name || '' }), _jsx(MenuRule, {}), _jsx(Meter, { read: standing, onPlans: () => go(path({ kind: 'screen', screen: 'plans' })), onBilling: () => go(path({ kind: 'settings', section: 'billing' })) }), orgs.length ? (_jsxs(_Fragment, { children: [_jsx(MenuRule, {}), _jsx(MenuLabel, { children: t('Organization') }), _jsx(YStack, { role: "radiogroup", "aria-label": t('Organizations'), gap: "$1", children: orgs.map((o) => (_jsx(MenuRow, { label: o, active: o === host.org, onPress: () => {
                                             onOpenChange(false);
                                             if (o !== host.org)
                                                 host.chooseOrg?.(o);
-                                        } }, o))) })] })) : null, _jsx(MenuRule, {}), _jsx(MenuRow, { label: "Settings", icon: _jsx(Settings, { size: 16 }), onPress: () => go(path({ kind: 'settings', section: 'general' })) }), _jsx(MenuRow, { label: "Usage", icon: _jsx(Gauge, { size: 16 }), onPress: () => go(path({ kind: 'settings', section: 'usage' })) }), _jsx(MenuRow, { label: "Billing", icon: _jsx(CreditCard, { size: 16 }), onPress: () => go(path({ kind: 'settings', section: 'billing' })) }), _jsx(MenuRow, { label: "View all plans", icon: _jsx(Sparkles, { size: 16 }), onPress: () => go(path({ kind: 'screen', screen: 'plans' })) }), _jsx(MenuRow, { label: "Get help", icon: _jsx(LifeBuoy, { size: 16 }), onPress: () => {
+                                        } }, o))) })] })) : null, _jsx(MenuRule, {}), _jsx(MenuRow, { label: t('Settings'), icon: _jsx(Settings, { size: 16 }), onPress: () => go(path({ kind: 'settings', section: 'general' })) }), _jsx(MenuRow, { label: t('Usage'), icon: _jsx(Gauge, { size: 16 }), onPress: () => go(path({ kind: 'settings', section: 'usage' })) }), _jsx(MenuRow, { label: t('Billing'), icon: _jsx(CreditCard, { size: 16 }), onPress: () => go(path({ kind: 'settings', section: 'billing' })) }), _jsx(MenuRow, { label: t('View all plans'), icon: _jsx(Sparkles, { size: 16 }), onPress: () => go(path({ kind: 'screen', screen: 'plans' })) }), _jsx(MenuRow, { label: t('Get help'), icon: _jsx(LifeBuoy, { size: 16 }), onPress: () => {
                                 onOpenChange(false);
                                 window.open(DOCS, '_blank', 'noopener,noreferrer');
-                            } }), host.signOut ? (_jsxs(_Fragment, { children: [_jsx(MenuRule, {}), _jsx(MenuRow, { label: "Log out", icon: _jsx(LogOut, { size: 16 }), onPress: () => {
+                            } }), host.signOut ? (_jsxs(_Fragment, { children: [_jsx(MenuRule, {}), _jsx(MenuRow, { label: t('Log out'), icon: _jsx(LogOut, { size: 16 }), onPress: () => {
                                         onOpenChange(false);
                                         host.signOut?.();
                                     } })] })) : null] }) })] }));