@hanzo/build 0.2.80 → 0.2.81

package/lib/customize/ui.js

@@ -5,16 +5,19 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * featured card, a dialog with a title and a scrolling body, a delete that asks
  * first, the empty state that names the next step, a failure with its retry,
  * and the quiet line for loading and signed-out.
+ *
+ * Their own words are the reader's language (@hanzo/i18n `t`); a title, a
+ * line or a label a tab hands them comes already said, since it may be a
+ * name or a description that is drawn as given.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { useI18n } from '@hanzo/i18n/react';
 import { Check, Plus, X } from '@hanzogui/lucide-icons-2';
 import { Button, Dialog, DialogContent, DialogTitle } from '@hanzo/ui';
 import { useEffect, useState } from 'react';
 import { useHost } from '../host.js';
 import { say } from './say.js';
 export const mono = { fontFamily: 'var(--f-mono, ui-monospace, monospace)' };
-/** A button that holds a card's text reads from the left, not from the middle a button centres it in. */
-export const left = { textAlign: 'left' };
 /** Tells the shell how many are yours, whenever that changes. */
 export function useCount(n, onCount) {
     useEffect(() => onCount(n), [n, onCount]);
@@ -37,25 +40,29 @@ export function Mark({ name, logo, icon, size = 32 }) {
  */
 export function Tile({ title, detail, meta, mark, action, onOpen, }) {
     const body = (_jsxs(_Fragment, { children: [mark, _jsxs(YStack, { flex: 1, minW: 0, gap: "$1", children: [_jsx(SizableText, { size: "$3", color: "$ink", numberOfLines: 1, children: title }), detail ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 3, children: detail })) : null, meta ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, opacity: 0.8, children: meta })) : null] })] }));
-    return (_jsxs(XStack, { role: "listitem", items: "flex-start", gap: "$2", p: "$3", minW: 0, rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", hoverStyle: onOpen ? { borderColor: '$edge' } : undefined, children: [onOpen ? (_jsx(XStack, { render: "button", "aria-label": title, onPress: onOpen, flex: 1, minW: 0, gap: "$3", items: "flex-start", cursor: "pointer", style: left, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: body })) : (_jsx(XStack, { flex: 1, minW: 0, gap: "$3", items: "flex-start", children: body })), action] }));
+    return (_jsxs(XStack, { role: "listitem", items: "flex-start", gap: "$2", p: "$3", minW: 0, rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", hoverStyle: onOpen ? { borderColor: '$edge' } : undefined, children: [onOpen ? (_jsx(XStack, { render: "button", "aria-label": title, onPress: onOpen, flex: 1, minW: 0, gap: "$3", items: "flex-start", cursor: "pointer", "$platform-web": { textAlign: 'start' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: body })) : (_jsx(XStack, { flex: 1, minW: 0, gap: "$3", items: "flex-start", children: body })), action] }));
 }
 /** The one card the shelf puts first, drawn larger. */
 export function Featured({ title, detail, meta, mark, action, onOpen }) {
-    return (_jsxs(XStack, { items: "flex-start", gap: "$4", p: "$4", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", flexWrap: "wrap", rowGap: "$3", children: [_jsxs(XStack, { render: "button", "aria-label": title, onPress: onOpen, flex: 1, minW: 220, gap: "$4", items: "flex-start", cursor: "pointer", style: left, children: [mark, _jsxs(YStack, { flex: 1, minW: 0, gap: "$1.5", children: [_jsx(SizableText, { size: "$1", color: "$soft", textTransform: "uppercase", letterSpacing: 1, children: "Featured" }), _jsx(SizableText, { size: "$6", color: "$ink", numberOfLines: 1, children: title }), _jsx(SizableText, { size: "$2", color: "$soft", numberOfLines: 3, children: detail }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: meta })] })] }), action] }));
+    const { t } = useI18n();
+    return (_jsxs(XStack, { items: "flex-start", gap: "$4", p: "$4", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", flexWrap: "wrap", rowGap: "$3", children: [_jsxs(XStack, { render: "button", "aria-label": title, onPress: onOpen, flex: 1, minW: 220, gap: "$4", items: "flex-start", cursor: "pointer", "$platform-web": { textAlign: 'start' }, children: [mark, _jsxs(YStack, { flex: 1, minW: 0, gap: "$1.5", children: [_jsx(SizableText, { size: "$1", color: "$soft", textTransform: "uppercase", letterSpacing: 1, children: t('Featured') }), _jsx(SizableText, { size: "$6", color: "$ink", numberOfLines: 1, children: title }), _jsx(SizableText, { size: "$2", color: "$soft", numberOfLines: 3, children: detail }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: meta })] })] }), action] }));
 }
-/** A card's add control: Add while it is not yours, Added once it is. */
-export function Add({ name, added, busy, onPress, label = 'Add' }) {
+/** A card's add control: Add (Use, for a template one is made from) while it is not yours, Added once it is. */
+export function Add({ name, added, busy, onPress, use = false }) {
+    const { t } = useI18n();
     if (added) {
-        return (_jsxs(XStack, { "aria-label": `${name} is added`, gap: "$1", height: 32, items: "center", shrink: 0, children: [_jsx(Check, { size: 14 }), _jsx(SizableText, { size: "$1", color: "$soft", children: "Added" })] }));
+        return (_jsxs(XStack, { "aria-label": t('{name} is added', { name }), gap: "$1", height: 32, items: "center", shrink: 0, children: [_jsx(Check, { size: 14 }), _jsx(SizableText, { size: "$1", color: "$soft", children: t('Added') })] }));
     }
-    return (_jsxs(Button, { size: "sm", variant: "outline", "aria-label": `${label} ${name}`, disabled: busy, onPress: onPress, children: [_jsx(Plus, { size: 14 }), " ", label] }));
+    return (_jsxs(Button, { size: "sm", variant: "outline", "aria-label": use ? t('Use {name}', { name }) : t('Add {name}', { name }), disabled: busy, onPress: onPress, children: [_jsx(Plus, { size: 14 }), " ", use ? t('Use') : t('Add')] }));
 }
 /** A dialog with a title, a close control and a body that scrolls inside the window. */
 export function Sheet({ title, open, onOpenChange, width = 560, children }) {
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: width, showCloseButton: false, maxH: "88vh", gap: "$3", children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [_jsx(DialogTitle, { numberOfLines: 1, flex: 1, children: title }), _jsx(XStack, { render: "button", "aria-label": "Close", p: "$1", onPress: () => onOpenChange(false), children: _jsx(X, { size: 16 }) })] }), _jsx(YStack, { gap: "$3", overflow: "scroll", minH: 0, shrink: 1, children: children })] }) }));
+    const { t } = useI18n();
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: width, showCloseButton: false, maxH: "88vh", gap: "$3", children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [_jsx(DialogTitle, { numberOfLines: 1, flex: 1, children: title }), _jsx(XStack, { render: "button", "aria-label": t('Close'), p: "$1", onPress: () => onOpenChange(false), children: _jsx(X, { size: 16 }) })] }), _jsx(YStack, { gap: "$3", overflow: "scroll", minH: 0, shrink: 1, children: children })] }) }));
 }
-/** Asks before a delete; says what goes with it. */
+/** Asks before a delete; says what goes with it. `what` is the thing's name, `says` comes already said. */
 export function Confirm({ what, says, open, onOpenChange, onYes }) {
+    const { t } = useI18n();
     const [busy, setBusy] = useState(false);
     const [note, setNote] = useState('');
     const yes = async () => {
@@ -66,13 +73,13 @@ export function Confirm({ what, says, open, onOpenChange, onYes }) {
             onOpenChange(false);
         }
         catch (e) {
-            setNote(say(e));
+            setNote(say(e, t));
         }
         finally {
             setBusy(false);
         }
     };
-    return (_jsxs(Sheet, { title: `Delete ${what}?`, open: open, onOpenChange: onOpenChange, width: 420, children: [_jsx(SizableText, { size: "$2", color: "$soft", children: says }), _jsx(Line, { children: note }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => onOpenChange(false), children: "Cancel" }), _jsx(Button, { size: "sm", variant: "destructive", disabled: busy, onPress: () => void yes(), children: "Delete" })] })] }));
+    return (_jsxs(Sheet, { title: t('Delete {name}?', { name: what }), open: open, onOpenChange: onOpenChange, width: 420, children: [_jsx(SizableText, { size: "$2", color: "$soft", children: says }), _jsx(Line, { children: note }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => onOpenChange(false), children: t('Cancel') }), _jsx(Button, { size: "sm", variant: "destructive", disabled: busy, onPress: () => void yes(), children: t('Delete') })] })] }));
 }
 /** The quiet line for loading, a search that matched nothing, and signed-out. */
 export function Soft({ children, action }) {
@@ -80,7 +87,8 @@ export function Soft({ children, action }) {
 }
 /** A read that failed: what went wrong in plain words, and the one control that asks again. */
 export function Failed({ error, onRetry }) {
-    return (_jsxs(YStack, { py: "$6", items: "center", gap: "$3", role: "alert", children: [_jsx(SizableText, { size: "$2", color: "$soft", text: "center", children: say(error) }), _jsx(Button, { size: "sm", variant: "outline", onPress: onRetry, children: "Try again" })] }));
+    const { t } = useI18n();
+    return (_jsxs(YStack, { py: "$6", items: "center", gap: "$3", role: "alert", children: [_jsx(SizableText, { size: "$2", color: "$soft", text: "center", children: say(error, t) }), _jsx(Button, { size: "sm", variant: "outline", onPress: onRetry, children: t('Try again') })] }));
 }
 /** Nothing here yet: what this place holds, and the next step, as buttons. */
 export function Empty({ title, detail, children }) {
@@ -88,8 +96,9 @@ export function Empty({ title, detail, children }) {
 }
 /** What a signed-out visitor is told, with the one control that signs them in. */
 export function Visitor({ children }) {
+    const { t } = useI18n();
     const host = useHost();
-    return (_jsx(Soft, { action: _jsx(Button, { size: "sm", onPress: () => host.signIn?.(), children: "Sign in" }), children: children }));
+    return (_jsx(Soft, { action: _jsx(Button, { size: "sm", onPress: () => host.signIn?.(), children: t('Sign in') }), children: children }));
 }
 /** What the last action did, said once, where it was done. */
 export function Line({ children }) {
@@ -105,9 +114,10 @@ export function Part({ title, detail, action, children }) {
 export function Field({ label, hint, children }) {
     return (_jsxs(YStack, { gap: "$1.5", children: [_jsx(SizableText, { size: "$2", color: "$ink", children: label }), children, hint ? (_jsx(SizableText, { size: "$1", color: "$soft", children: hint })) : null] }));
 }
-/** Two or three choices side by side; the chosen one is filled. A count, when one is given, follows its label. */
+/** Two or three choices side by side; the chosen one is filled. A count, when one is given, follows its label. Labels come already said. */
 export function Choice({ value, options, onChange, label, }) {
-    return (_jsx(XStack, { role: "group", "aria-label": label, p: 2, gap: 2, rounded: "$3", borderWidth: 1, borderColor: "$borderColor", self: "flex-start", shrink: 0, children: options.map((o) => (_jsxs(XStack, { render: "button", "aria-pressed": o.id === value, "aria-label": o.count ? `${o.label}, ${o.count}` : o.label, onPress: () => onChange(o.id), items: "center", gap: "$1.5", px: "$3", py: "$1", rounded: "$2", bg: o.id === value ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, children: [_jsx(SizableText, { size: "$2", color: o.id === value ? '$ink' : '$soft', children: o.label }), o.count ? (_jsx(SizableText, { size: "$1", color: "$soft", fontVariant: ['tabular-nums'], children: o.count })) : null] }, o.id))) }));
+    const { t } = useI18n();
+    return (_jsx(XStack, { role: "group", "aria-label": label, p: 2, gap: 2, rounded: "$3", borderWidth: 1, borderColor: "$borderColor", self: "flex-start", shrink: 0, children: options.map((o) => (_jsxs(XStack, { render: "button", "aria-pressed": o.id === value, "aria-label": o.count ? t('{label}, {count}', { label: o.label, count: o.count }) : o.label, onPress: () => onChange(o.id), items: "center", gap: "$1.5", px: "$3", py: "$1", rounded: "$2", bg: o.id === value ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, children: [_jsx(SizableText, { size: "$2", color: o.id === value ? '$ink' : '$soft', children: o.label }), o.count ? (_jsx(SizableText, { size: "$1", color: "$soft", fontVariant: ['tabular-nums'], children: o.count })) : null] }, o.id))) }));
 }
 /** A date from Unix seconds, or ''. */
 export const day = (s) => (s ? new Date(s * 1000).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' }) : '');

package/lib/data.d.ts

@@ -12,7 +12,7 @@ export interface Read<T> {
 export declare function useRead<T>(load: (() => Promise<T>) | null, initial: T, key: unknown[]): Read<T>;
 /** How long a read is waited on before the screen says it is taking too long. */
 export declare const WAIT = 15000;
-/** A read that did not answer in time. */
+/** A read that did not answer in time. Its message is ours, marked, so a screen drawing it through `t` says it in the reader's language. */
 export declare class Slow extends Error {
     constructor();
 }

package/lib/data.js

@@ -6,6 +6,7 @@
  * signed in is not attempted — the platform would refuse it and the refusal
  * would read as an outage.
  */
+import { phrase } from '@hanzo/i18n';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { places } from './api/places.js';
 import { projects } from './api/projects.js';
@@ -45,10 +46,10 @@ export function useRead(load, initial, key) {
 }
 /** How long a read is waited on before the screen says it is taking too long. */
 export const WAIT = 15_000;
-/** A read that did not answer in time. */
+/** A read that did not answer in time. Its message is ours, marked, so a screen drawing it through `t` says it in the reader's language. */
 export class Slow extends Error {
     constructor() {
-        super('Hanzo is taking too long to answer.');
+        super(phrase('Hanzo is taking too long to answer.'));
         this.name = 'Slow';
     }
 }

package/lib/desk.js

@@ -8,8 +8,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * The sandbox outlives the run: kept when the run ends, parked while nobody
  * watches, retired a day after it parks. The bar under the tabs says which and
  * suspends or resumes it; a tab that needs it running resumes it (sandbox.ts).
+ *
+ * Its words are the reader's language (@hanzo/i18n `t`); a repository, branch,
+ * port, address, command and the sandbox's own error are drawn as given.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { useI18n } from '@hanzo/i18n/react';
 import { ExternalLink, Info, MoreHorizontal, RefreshCcw } from '@hanzogui/lucide-icons-2';
 import { Button, DropdownMenu } from '@hanzo/ui';
 import { PreviewFrame } from '@hanzo/ui/agents';
@@ -38,38 +42,39 @@ export const SEED = {
 const EVERY = 10_000;
 const PORTS = 5_000;
 export function Desk({ id, repo, branch, base, environment, mode, pr, title, project, sandbox, site, published, events, live, menu, refused, retry, onRetry, side, sheet, onHide, }) {
+    const { t: say } = useI18n();
     const name = repo.split('/').filter(Boolean).pop() || repo;
     const lines = shell(events);
-    const failed = failure(events);
+    const failed = failure(events, say);
     const box = useBox(sandbox);
     // Nothing is said of the sandbox until it has been read.
     const held = box.value?.state ?? '';
-    const environ = () => side.open({ kind: 'environment', title: 'Environment' });
+    const environ = () => side.open({ kind: 'environment', title: say('Environment') });
     const kinds = [
-        { id: 'preview', label: 'Preview', bleed: true, render: () => _jsx(Browser, { sandbox: sandbox, held: held, site: site, live: live }, published) },
+        { id: 'preview', label: say('Preview'), bleed: true, render: () => _jsx(Browser, { sandbox: sandbox, held: held, site: site, live: live }, published) },
         {
             id: 'artifacts',
-            label: 'Artifacts',
+            label: say('Artifacts'),
             render: () => _jsx(Artifacts, { session: id, sandbox: sandbox, repo: repo, branch: branch, mode: mode, project: project, site: site, pr: pr, onEnvironment: environ }),
         },
-        { id: 'files', label: 'Files', render: () => _jsx(Files, { session: id, repo: repo, branch: branch, sandbox: sandbox, live: held === 'running' }) },
-        { id: 'diff', label: 'Diff', render: () => _jsx(Git, { session: id, title: title, live: live }) },
+        { id: 'files', label: say('Files'), render: () => _jsx(Files, { session: id, repo: repo, branch: branch, sandbox: sandbox, live: held === 'running' }) },
+        { id: 'diff', label: say('Diff'), render: () => _jsx(Git, { session: id, title: title, live: live }) },
         {
             id: 'terminal',
-            label: 'Terminal',
+            label: say('Terminal'),
             bleed: true,
             render: () => _jsx(Terminal, { id: id, sandbox: sandbox, held: held, lines: lines, live: live, failed: failed, refused: refused, retry: retry, onRetry: onRetry }),
         },
-        { id: 'desktop', label: 'Desktop', bleed: true, render: () => _jsx(Door, { which: "screen", sandbox: sandbox, held: held, session: id }) },
+        { id: 'desktop', label: say('Desktop'), bleed: true, render: () => _jsx(Door, { which: "screen", sandbox: sandbox, held: held, session: id }) },
         {
             id: 'environment',
-            label: 'Environment',
-            render: () => (_jsxs(YStack, { gap: "$2", children: [_jsx(Environment, { repo: name, busy: live && mode === 'setup' }), _jsx(SizableText, { size: "$2", color: "$ink", pt: "$4", children: "This run" }), _jsx(Fact, { label: "Run", value: id }), _jsx(Fact, { label: "Repository", value: name || '—' }), _jsx(Fact, { label: "Branch", value: branch || '—' }), _jsx(Fact, { label: "Base", value: base || '—' }), _jsx(Fact, { label: "Runs on", value: environment || 'sandbox' }), _jsx(Fact, { label: "Sandbox", value: sandbox || '—' }), _jsx(Fact, { label: "Mode", value: mode || 'build' })] })),
+            label: say('Environment'),
+            render: () => (_jsxs(YStack, { gap: "$2", children: [_jsx(Environment, { repo: name, busy: live && mode === 'setup' }), _jsx(SizableText, { size: "$2", color: "$ink", pt: "$4", children: say('This run') }), _jsx(Fact, { label: say('Run'), value: id }), _jsx(Fact, { label: say('Repository'), value: name || '—' }), _jsx(Fact, { label: say('Branch'), value: branch || '—' }), _jsx(Fact, { label: say('Base'), value: base || '—' }), _jsx(Fact, { label: say('Runs on'), value: environment || 'sandbox' }), _jsx(Fact, { label: say('Sandbox'), value: sandbox || '—' }), _jsx(Fact, { label: say('Mode'), value: mode || 'build' })] })),
         },
     ];
-    return (_jsx(Panel, { side: side, kinds: kinds, sheet: sheet, onHide: onHide, label: "Run details", 
+    return (_jsx(Panel, { side: side, kinds: kinds, sheet: sheet, onHide: onHide, label: say('Run details'), 
         // An empty tab offers what this run made: its site and its pull request.
-        suggested: [...(site ? [{ title: name || site, url: site }] : []), ...(pr.href ? [{ title: `Pull request ${pr.label}`, url: pr.href }] : [])], bar: sandbox ? _jsx(Held, { box: box, live: live }) : null, menu: _jsx(DropdownMenu, { trigger: _jsx(XStack, { render: "button", "aria-label": "Run actions", p: "$1.5", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(MoreHorizontal, { size: 16 }) }), items: [...menu, { key: 'details', label: 'Details', icon: _jsx(Info, { size: 16 }), onSelect: environ }] }) }));
+        suggested: [...(site ? [{ title: name || site, url: site }] : []), ...(pr.href ? [{ title: say('Pull request {pr}', { pr: pr.label }), url: pr.href }] : [])], bar: sandbox ? _jsx(Held, { box: box, live: live }) : null, menu: _jsx(DropdownMenu, { trigger: _jsx(XStack, { render: "button", "aria-label": say('Run actions'), p: "$1.5", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(MoreHorizontal, { size: 16 }) }), items: [...menu, { key: 'details', label: say('Details'), icon: _jsx(Info, { size: 16 }), onSelect: environ }] }) }));
 }
 /**
  * The run's sandbox as it stands, and what moves it. It is read while the pane is
@@ -118,30 +123,33 @@ const until = (ms) => new Date(ms).toLocaleString(undefined, { weekday: 'short',
  * A sandbox a run is working in is not suspended from here.
  */
 function Held({ box, live }) {
+    const { t } = useI18n();
     const b = box.value;
     const state = b?.state ?? 'pending';
     const says = state === 'running'
-        ? 'Sandbox running'
+        ? t('Sandbox running')
         : state === 'parked'
             ? b?.ends
-                ? `Sandbox suspended · its files are kept until ${until(b.ends)}`
-                : 'Sandbox suspended · its files are kept'
+                ? t('Sandbox suspended · its files are kept until {time}', { time: until(b.ends) })
+                : t('Sandbox suspended · its files are kept')
             : state === 'pending'
-                ? 'Sandbox starting…'
+                ? t('Sandbox starting…')
                 : state === 'gone'
-                    ? 'Sandbox ended'
-                    : `Sandbox unavailable${b?.error ? ` · ${b.error}` : ''}`;
-    return (_jsxs(XStack, { px: "$3", py: "$1.5", gap: "$2", items: "center", borderBottomWidth: 1, borderColor: "$borderColor", "aria-label": "Sandbox", children: [_jsx(YStack, { width: 7, height: 7, rounded: 99, bg: state === 'running' ? '$green10' : state === 'parked' ? '$soft' : '$borderColor' }), _jsx(SizableText, { flex: 1, minW: 0, size: "$1", color: "$soft", numberOfLines: 1, children: box.note || says }), state === 'running' && !live ? (_jsx(Button, { size: "sm", variant: "ghost", disabled: box.busy, onPress: () => box.act('park'), children: "Suspend" })) : state === 'parked' ? (_jsx(Button, { size: "sm", variant: "outline", disabled: box.busy, onPress: () => box.act('wake'), children: box.busy ? 'Resuming…' : 'Resume' })) : null] }));
+                    ? t('Sandbox ended')
+                    : b?.error
+                        ? t('Sandbox unavailable · {error}', { error: b.error })
+                        : t('Sandbox unavailable');
+    return (_jsxs(XStack, { px: "$3", py: "$1.5", gap: "$2", items: "center", borderBottomWidth: 1, borderColor: "$borderColor", "aria-label": t('Sandbox'), children: [_jsx(YStack, { width: 7, height: 7, rounded: 99, bg: state === 'running' ? '$green10' : state === 'parked' ? '$soft' : '$borderColor' }), _jsx(SizableText, { flex: 1, minW: 0, size: "$1", color: "$soft", numberOfLines: 1, children: box.note || says }), state === 'running' && !live ? (_jsx(Button, { size: "sm", variant: "ghost", disabled: box.busy, onPress: () => box.act('park'), children: t('Suspend') })) : state === 'parked' ? (_jsx(Button, { size: "sm", variant: "outline", disabled: box.busy, onPress: () => box.act('wake'), children: box.busy ? t('Resuming…') : t('Resume') })) : null] }));
 }
 /** What a preview page says of itself, when it cannot serve. */
 const PREVIEW = 'hanzo-preview';
 /** How often a preview is opened again on its own before Retry is the person's to press. */
 const REMINTS = 2;
 const REMINT = 30_000;
-/** What a preview page's status means to the person looking at it, when it is not reopened. */
+/** What a preview page's status means to the person looking at it, when it is not reopened, in the language of `say`. */
 const SAYS = {
-    401: () => 'This browser keeps the preview’s cookie out of a frame. Open it in a new tab.',
-    502: (port) => `Nothing answered on port ${port}. Start the server, then Retry.`,
+    401: (_, say) => `${say('This browser keeps the preview’s cookie out of a frame.')} ${say('Open it in a new tab.')}`,
+    502: (port, say) => `${say('Nothing answered on port {port}.', { port })} ${say('Start the server, then Retry.')}`,
 };
 /**
  * The Browser tab: what the run's sandbox serves, one port at a time, framed at
@@ -151,6 +159,7 @@ const SAYS = {
  * in a while; any other status is said, and Retry is the person's.
  */
 function Browser({ sandbox, held, site, live }) {
+    const { t: say } = useI18n();
     const t = useTarget();
     const [open, setOpen] = useState([]);
     const [port, setPort] = useState(0);
@@ -211,32 +220,33 @@ function Browser({ sandbox, held, site, live }) {
                 setAttempt((a) => a + 1);
                 return;
             }
-            const say = SAYS[m.status];
-            if (say || m.status === 409)
-                setWhy(say ? say(port) : 'The sandbox stopped serving. Retry to open it again.');
+            const words = SAYS[m.status];
+            if (words || m.status === 409)
+                setWhy(words ? words(port, say) : `${say('The sandbox stopped serving.')} ${say('Retry to open it again.')}`);
         };
         window.addEventListener('message', hear);
         return () => window.removeEventListener('message', hear);
-    }, [src, port]);
+    }, [src, port, say]);
     const tab = () => away(preview(t, sandbox, port)).catch((e) => setWhy(e.message));
     if (!running)
         return _jsx(Site, { site: site, live: live, held: held });
     if (!port)
         return _jsx(Site, { site: site, live: live, held: held });
     const host = open.find((p) => p.port === port)?.host ?? '';
-    return (_jsxs(YStack, { flex: 1, minH: 0, children: [_jsxs(XStack, { px: "$2", py: "$1.5", gap: "$1.5", items: "center", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsx(XStack, { render: "button", "aria-label": "Reload the page", onPress: () => setAttempt((a) => a + 1), p: "$1.5", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(RefreshCcw, { size: 14 }) }), open.length > 1 ? (_jsx(XStack, { gap: "$1", children: open.map((p) => (_jsx(XStack, { render: "button", "aria-label": `Port ${p.port}`, onPress: () => setPort(p.port), px: "$2", py: "$1", rounded: "$2", bg: p.port === port ? '$hover' : 'transparent', children: _jsx(SizableText, { size: "$1", color: p.port === port ? '$ink' : '$soft', children: String(p.port) }) }, p.port))) })) : null, _jsx(SizableText, { flex: 1, minW: 0, size: "$1", color: "$soft", numberOfLines: 1, style: mono, children: host || `port ${port}` }), _jsx(XStack, { render: "button", "aria-label": "Open in a new tab", onPress: () => void tab(), p: "$1.5", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(ExternalLink, { size: 14 }) })] }), why ? (_jsxs(YStack, { flex: 1, items: "center", justify: "center", gap: "$2", p: "$6", children: [_jsx(SizableText, { size: "$2", color: "$soft", style: { textAlign: 'center' }, children: why }), _jsxs(XStack, { gap: "$2", children: [_jsx(Button, { size: "sm", variant: "outline", onPress: () => setAttempt((a) => a + 1), children: "Retry" }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => void tab(), children: "Open in a new tab" })] })] })) : src ? (_jsx("iframe", { ref: frame, src: src, title: `What the run serves on port ${port}`, sandbox: "allow-scripts allow-same-origin allow-forms allow-popups", style: { border: 0, width: '100%', height: '100%', display: 'block', background: '#fff' } })) : (_jsx(YStack, { flex: 1, items: "center", justify: "center", children: _jsx(SizableText, { size: "$2", color: "$soft", children: `Opening port ${port}…` }) }))] }));
+    return (_jsxs(YStack, { flex: 1, minH: 0, children: [_jsxs(XStack, { px: "$2", py: "$1.5", gap: "$1.5", items: "center", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsx(XStack, { render: "button", "aria-label": say('Reload the page'), onPress: () => setAttempt((a) => a + 1), p: "$1.5", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(RefreshCcw, { size: 14 }) }), open.length > 1 ? (_jsx(XStack, { gap: "$1", children: open.map((p) => (_jsx(XStack, { render: "button", "aria-label": say('Port {port}', { port: p.port }), onPress: () => setPort(p.port), px: "$2", py: "$1", rounded: "$2", bg: p.port === port ? '$hover' : 'transparent', children: _jsx(SizableText, { size: "$1", color: p.port === port ? '$ink' : '$soft', children: String(p.port) }) }, p.port))) })) : null, _jsx(SizableText, { flex: 1, minW: 0, size: "$1", color: "$soft", numberOfLines: 1, style: mono, children: host || say('port {port}', { port }) }), _jsx(XStack, { render: "button", "aria-label": say('Open in a new tab'), onPress: () => void tab(), p: "$1.5", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(ExternalLink, { size: 14 }) })] }), why ? (_jsxs(YStack, { flex: 1, items: "center", justify: "center", gap: "$2", p: "$6", children: [_jsx(SizableText, { size: "$2", color: "$soft", style: { textAlign: 'center' }, children: why }), _jsxs(XStack, { gap: "$2", children: [_jsx(Button, { size: "sm", variant: "outline", onPress: () => setAttempt((a) => a + 1), children: say('Retry') }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => void tab(), children: say('Open in a new tab') })] })] })) : src ? (_jsx("iframe", { ref: frame, src: src, title: say('What the run serves on port {port}', { port }), sandbox: "allow-scripts allow-same-origin allow-forms allow-popups", style: { border: 0, width: '100%', height: '100%', display: 'block', background: '#fff' } })) : (_jsx(YStack, { flex: 1, items: "center", justify: "center", children: _jsx(SizableText, { size: "$2", color: "$soft", children: say('Opening port {port}…', { port }) }) }))] }));
 }
 /**
  * Where the run published its work, framed, with its address, a reload and the
  * page in a tab of its own; or what keeps its sandbox from serving.
  */
 function Site({ site, live, held }) {
+    const { t } = useI18n();
     const frame = useRef(null);
-    return (_jsxs(YStack, { flex: 1, minH: 0, children: [_jsxs(XStack, { px: "$2", py: "$1.5", gap: "$1.5", items: "center", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsx(XStack, { render: "button", "aria-label": "Reload the page", onPress: () => frame.current?.reload(), p: "$1.5", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(RefreshCcw, { size: 14 }) }), _jsx(SizableText, { flex: 1, minW: 0, size: "$1", color: "$soft", numberOfLines: 1, style: mono, children: site || 'Nothing is serving yet' }), site ? (_jsx(Out, { href: site, label: "Open in a new tab", children: _jsx(XStack, { p: "$1.5", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(ExternalLink, { size: 14 }) }) })) : null] }), _jsx(PreviewFrame, { ref: frame, src: site, title: "Where this run is published", device: "desktop", empty: _jsxs(YStack, { items: "center", gap: "$2", p: "$6", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: "Nothing is serving yet" }), _jsx(SizableText, { size: "$2", color: "$soft", style: { textAlign: 'center' }, children: held === 'parked'
-                                ? 'The run’s sandbox is suspended. Resume it to see what it serves.'
+    return (_jsxs(YStack, { flex: 1, minH: 0, children: [_jsxs(XStack, { px: "$2", py: "$1.5", gap: "$1.5", items: "center", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsx(XStack, { render: "button", "aria-label": t('Reload the page'), onPress: () => frame.current?.reload(), p: "$1.5", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(RefreshCcw, { size: 14 }) }), _jsx(SizableText, { flex: 1, minW: 0, size: "$1", color: "$soft", numberOfLines: 1, style: mono, children: site || t('Nothing is serving yet') }), site ? (_jsx(Out, { href: site, label: t('Open in a new tab'), children: _jsx(XStack, { p: "$1.5", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(ExternalLink, { size: 14 }) }) })) : null] }), _jsx(PreviewFrame, { ref: frame, src: site, title: t('Where this run is published'), device: "desktop", empty: _jsxs(YStack, { items: "center", gap: "$2", p: "$6", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: t('Nothing is serving yet') }), _jsx(SizableText, { size: "$2", color: "$soft", style: { textAlign: 'center' }, children: held === 'parked'
+                                ? `${t('The run’s sandbox is suspended.')} ${t('Resume it to see what it serves.')}`
                                 : live
-                                    ? 'When the run starts a server in its sandbox, the page opens here.'
-                                    : 'Nothing listens in this run’s sandbox, and it published no site. Its work is on its branch.' })] }) })] }));
+                                    ? t('When the run starts a server in its sandbox, the page opens here.')
+                                    : `${t('Nothing listens in this run’s sandbox, and it published no site.')} ${t('Its work is on its branch.')}` })] }) })] }));
 }
 function Fact({ label, value }) {
     return (_jsxs(XStack, { gap: "$3", items: "baseline", children: [_jsx(SizableText, { size: "$1", color: "$soft", width: 96, children: label }), _jsx(SizableText, { flex: 1, size: "$2", color: "$ink", numberOfLines: 2, children: value })] }));
@@ -248,14 +258,16 @@ const mono = { fontFamily: 'var(--f-mono, ui-monospace, monospace)', whiteSpace:
  * shell is a tmux session named for the run, so a reopened tab reattaches to it.
  */
 function Terminal({ id, sandbox, held, lines, live, failed, refused, retry, onRetry, }) {
+    const { t } = useI18n();
     const reachable = Boolean(sandbox) && held === 'running';
     // The shell while there is one, unless the log was asked for.
     const [log, setLog] = useState(false);
     const showShell = reachable && !log;
-    return (_jsxs(YStack, { flex: 1, minH: 0, bg: "$background", children: [_jsxs(XStack, { px: "$2", py: "$1.5", gap: "$1", borderBottomWidth: 1, borderColor: "$borderColor", items: "center", children: [reachable ? (_jsx(XStack, { render: "button", "aria-label": "Shell", onPress: () => setLog(false), px: "$2", py: "$1", rounded: "$2", bg: showShell ? '$hover' : 'transparent', children: _jsx(SizableText, { size: "$1", color: showShell ? '$ink' : '$soft', children: "Shell" }) })) : null, _jsx(XStack, { render: "button", "aria-label": "Agent log", onPress: () => setLog(true), px: "$2", py: "$1", rounded: "$2", bg: showShell ? 'transparent' : '$hover', children: _jsx(SizableText, { size: "$1", color: showShell ? '$soft' : '$ink', children: "Agent log" }) })] }), showShell ? _jsx(Door, { which: "terminal", sandbox: sandbox, held: held, session: `run-${id.replace(/^sess_/, '').slice(0, 12)}` }) : _jsx(Log, { lines: lines, live: live, failed: failed, refused: refused, retry: retry, onRetry: onRetry })] }));
+    return (_jsxs(YStack, { flex: 1, minH: 0, bg: "$background", children: [_jsxs(XStack, { px: "$2", py: "$1.5", gap: "$1", borderBottomWidth: 1, borderColor: "$borderColor", items: "center", children: [reachable ? (_jsx(XStack, { render: "button", "aria-label": t('Shell'), onPress: () => setLog(false), px: "$2", py: "$1", rounded: "$2", bg: showShell ? '$hover' : 'transparent', children: _jsx(SizableText, { size: "$1", color: showShell ? '$ink' : '$soft', children: t('Shell') }) })) : null, _jsx(XStack, { render: "button", "aria-label": t('Agent log'), onPress: () => setLog(true), px: "$2", py: "$1", rounded: "$2", bg: showShell ? 'transparent' : '$hover', children: _jsx(SizableText, { size: "$1", color: showShell ? '$soft' : '$ink', children: t('Agent log') }) })] }), showShell ? _jsx(Door, { which: "terminal", sandbox: sandbox, held: held, session: `run-${id.replace(/^sess_/, '').slice(0, 12)}` }) : _jsx(Log, { lines: lines, live: live, failed: failed, refused: refused, retry: retry, onRetry: onRetry })] }));
 }
 function Log({ lines, live, failed, refused, retry, onRetry, }) {
+    const { t } = useI18n();
     const prompt = 'workspace';
     const idle = lines.length === 0 && !live;
-    return (_jsxs(YStack, { flex: 1, minH: 0, children: [_jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$3", py: "$3", gap: "$1", children: [idle ? (_jsxs(YStack, { flex: 1, items: "center", justify: "center", gap: "$3", py: "$8", children: [_jsx(SizableText, { size: "$2", color: "$soft", style: { textAlign: 'center' }, children: refused || (failed ? `This run stopped before its first command: ${failed}` : 'This run finished without writing a command.') }), refused ? (_jsx(Button, { size: "sm", variant: "outline", onPress: onRetry, children: retry })) : null] })) : (lines.map((line, i) => line.role === 'cmd' ? (_jsxs(XStack, { gap: "$2", children: [_jsx(SizableText, { size: "$1", color: "$soft", style: mono, children: `${prompt} $` }), _jsx(SizableText, { flex: 1, size: "$1", color: "$ink", style: mono, children: line.text })] }, i)) : (_jsx(SizableText, { size: "$1", color: "$ink", style: mono, children: line.text }, i)))), live ? (_jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(SizableText, { size: "$1", color: "$soft", style: mono, children: `${prompt} $` }), _jsx(YStack, { width: 7, height: 14, bg: "$ink" })] })) : null] }), _jsx(XStack, { px: "$3", py: "$2", borderTopWidth: 1, borderColor: "$borderColor", children: _jsx(SizableText, { size: "$1", color: "$soft", children: "Commands appear here as the run writes them." }) })] }));
+    return (_jsxs(YStack, { flex: 1, minH: 0, children: [_jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$3", py: "$3", gap: "$1", children: [idle ? (_jsxs(YStack, { flex: 1, items: "center", justify: "center", gap: "$3", py: "$8", children: [_jsx(SizableText, { size: "$2", color: "$soft", style: { textAlign: 'center' }, children: refused || (failed ? t('This run stopped before its first command: {reason}', { reason: failed }) : t('This run finished without writing a command.')) }), refused ? (_jsx(Button, { size: "sm", variant: "outline", onPress: onRetry, children: retry })) : null] })) : (lines.map((line, i) => line.role === 'cmd' ? (_jsxs(XStack, { gap: "$2", children: [_jsx(SizableText, { size: "$1", color: "$soft", style: mono, children: `${prompt} $` }), _jsx(SizableText, { flex: 1, size: "$1", color: "$ink", style: mono, children: line.text })] }, i)) : (_jsx(SizableText, { size: "$1", color: "$ink", style: mono, children: line.text }, i)))), live ? (_jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(SizableText, { size: "$1", color: "$soft", style: mono, children: `${prompt} $` }), _jsx(YStack, { width: 7, height: 14, bg: "$ink" })] })) : null] }), _jsx(XStack, { px: "$3", py: "$2", borderTopWidth: 1, borderColor: "$borderColor", children: _jsx(SizableText, { size: "$1", color: "$soft", children: t('Commands appear here as the run writes them.') }) })] }));
 }

package/lib/door.js

@@ -8,22 +8,47 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * past the deadline, is a failed connection, and Retry mints a new ticket: a
  * ticket is spent the moment its socket opens, so reloading the old address can
  * only fail again.
+ *
+ * What a door says is the reader's language (@hanzo/i18n `t`), one sentence
+ * per door; the page's own reason for a failed connection is drawn as given.
  */
 import { SizableText, YStack } from '@hanzo/gui';
+import { phrase } from '@hanzo/i18n';
+import { useI18n } from '@hanzo/i18n/react';
 import { Button } from '@hanzo/ui';
 import { useEffect, useRef, useState } from 'react';
 import { door } from './api/sandbox.js';
 import { useTarget } from './host.js';
 /** What each page signs its messages to the window that frames it with. */
 const SOURCE = { screen: 'hanzo-screen', terminal: 'hanzo-term' };
-const WHAT = { screen: 'desktop', terminal: 'terminal' };
 const DEADLINE = 20_000;
+/** What each door says of itself, one sentence per door, marked (`phrase`) and drawn through `t`. */
+const SAYS = {
+    screen: {
+        starting: phrase('The desktop opens once the run’s sandbox is up.'),
+        parked: phrase('This run’s sandbox is suspended with its files kept. Resume it from the bar above to open its desktop.'),
+        error: phrase('This run’s sandbox could not start, so it has no desktop.'),
+        unreachable: phrase('Unable to reach the desktop. The run may have stopped.'),
+        title: phrase('The run’s desktop'),
+        connecting: phrase('Connecting to the desktop…'),
+    },
+    terminal: {
+        starting: phrase('The terminal opens once the run’s sandbox is up.'),
+        parked: phrase('This run’s sandbox is suspended with its files kept. Resume it from the bar above to open its terminal.'),
+        error: phrase('This run’s sandbox could not start, so it has no terminal.'),
+        unreachable: phrase('Unable to reach the terminal. The run may have stopped.'),
+        title: phrase('The run’s terminal'),
+        connecting: phrase('Connecting to the terminal…'),
+    },
+};
 /**
  * `held` is where the run's sandbox is in its life, '' until it has been read. Only
  * a running sandbox has an open door.
  */
 export function Door({ which, sandbox, held, session }) {
-    const t = useTarget();
+    const target = useTarget();
+    const { t } = useI18n();
+    const says = SAYS[which];
     const frame = useRef(null);
     const [src, setSrc] = useState('');
     const [state, setState] = useState('opening');
@@ -37,7 +62,7 @@ export function Door({ which, sandbox, held, session }) {
         setSrc('');
         setState('opening');
         setWhy('');
-        door(t, sandbox, which, session).then((u) => {
+        door(target, sandbox, which, session).then((u) => {
             if (!gone)
                 setSrc(u);
         }, (e) => {
@@ -49,7 +74,7 @@ export function Door({ which, sandbox, held, session }) {
         return () => {
             gone = true;
         };
-    }, [t, sandbox, which, session, up, attempt]);
+    }, [target, sandbox, which, session, up, attempt]);
     useEffect(() => {
         if (!src)
             return;
@@ -79,21 +104,21 @@ export function Door({ which, sandbox, held, session }) {
         };
     }, [src, which]);
     if (!sandbox || held === '' || held === 'pending') {
-        return _jsx(Shut, { title: "Starting", body: `The ${WHAT[which]} opens once the run’s sandbox is up.` });
+        return _jsx(Shut, { title: t('Starting'), body: t(says.starting) });
     }
     if (held === 'parked') {
-        return _jsx(Shut, { title: "Suspended", body: `This run’s sandbox is suspended with its files kept. Resume it from the bar above to open its ${WHAT[which]}.` });
+        return _jsx(Shut, { title: t('Suspended'), body: t(says.parked) });
     }
     if (held === 'gone') {
-        return _jsx(Shut, { title: "Ended", body: "This run\u2019s sandbox has ended. Its work is on its branch and in its artifacts." });
+        return _jsx(Shut, { title: t('Ended'), body: t('This run’s sandbox has ended. Its work is on its branch and in its artifacts.') });
     }
     if (held === 'error') {
-        return _jsx(Shut, { title: "Unavailable", body: `This run’s sandbox could not start, so it has no ${WHAT[which]}.` });
+        return _jsx(Shut, { title: t('Unavailable'), body: t(says.error) });
     }
     if (state === 'failed') {
-        return (_jsx(Shut, { title: "Failed to connect", body: why || `Unable to reach the ${WHAT[which]}. The run may have stopped.`, children: _jsx(Button, { size: "sm", variant: "outline", onPress: () => setAttempt((a) => a + 1), children: "Retry" }) }));
+        return (_jsx(Shut, { title: t('Failed to connect'), body: why || t(says.unreachable), children: _jsx(Button, { size: "sm", variant: "outline", onPress: () => setAttempt((a) => a + 1), children: t('Retry') }) }));
     }
-    return (_jsxs(YStack, { flex: 1, minH: 0, position: "relative", bg: "#000", children: [src ? (_jsx("iframe", { ref: frame, src: src, title: which === 'screen' ? 'The run’s desktop' : 'The run’s terminal', allow: "clipboard-read; clipboard-write", style: { border: 0, width: '100%', height: '100%', display: 'block', background: '#000' } })) : null, state === 'opening' ? (_jsx(YStack, { position: "absolute", t: 0, l: 0, r: 0, b: 0, items: "center", justify: "center", pointerEvents: "none", children: _jsx(SizableText, { size: "$2", color: "$soft", children: `Connecting to the ${WHAT[which]}…` }) })) : null] }));
+    return (_jsxs(YStack, { flex: 1, minH: 0, position: "relative", bg: "#000", children: [src ? (_jsx("iframe", { ref: frame, src: src, title: t(says.title), allow: "clipboard-read; clipboard-write", style: { border: 0, width: '100%', height: '100%', display: 'block', background: '#000' } })) : null, state === 'opening' ? (_jsx(YStack, { position: "absolute", t: 0, l: 0, r: 0, b: 0, items: "center", justify: "center", pointerEvents: "none", children: _jsx(SizableText, { size: "$2", color: "$soft", children: t(says.connecting) }) })) : null] }));
 }
 function Shut({ title, body, children }) {
     return (_jsxs(YStack, { flex: 1, items: "center", justify: "center", gap: "$2", px: "$6", py: "$8", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: title }), _jsx(SizableText, { size: "$2", color: "$soft", style: { textAlign: 'center', maxWidth: 360 }, children: body }), children] }));