@hanzo/build 0.2.79 → 0.2.81

package/lib/customize/skills.js

@@ -7,8 +7,12 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * all adding is: the platform keeps no copy. Yours is the org's own skills —
  * written here, each with its switch — and the catalogue's skills it has added.
  * A skill written here is switched on when it is saved.
+ *
+ * Its words are the reader's language (@hanzo/i18n `t`); a skill's name,
+ * description and SKILL.md are the platform's or the org's, drawn as given.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { useI18n } from '@hanzo/i18n/react';
 import { BookOpen } from '@hanzogui/lucide-icons-2';
 import { Button, Input, Switch, Textarea } from '@hanzo/ui';
 import { Code } from '@hanzo/ui/chat';
@@ -21,14 +25,15 @@ import { say } from './say.js';
 import { Add, Confirm, day, Empty, Failed, Field, Grid, Line, Mark, matches, mono, Part, Sheet, Soft, Tile, useCount, Visitor } from './ui.js';
 const PAGE = 60;
 export function Skills({ view, q, adding, onAdding, onView, onCount }) {
+    const { t } = useI18n();
     const host = useHost();
-    const t = useTarget();
+    const target = useTarget();
     const signed = Boolean(host.person);
     // What every run in the org loads is an org admin's to change; a member reads it.
     const may = signed && host.admin;
-    const own = useLoad(signed ? () => authored(t) : null, [], [t, signed]);
-    const on = useLoad(signed ? () => active(t) : null, [], [t, signed]);
-    const shelf = useLoad(view === 'discover' ? () => brand(t) : null, null, [t.api, view]);
+    const own = useLoad(signed ? () => authored(target) : null, [], [target, signed]);
+    const on = useLoad(signed ? () => active(target) : null, [], [target, signed]);
+    const shelf = useLoad(view === 'discover' ? () => brand(target) : null, null, [target.api, view]);
     const [editing, setEditing] = useState(null);
     const [reading, setReading] = useState(null);
     const [busy, setBusy] = useState('');
@@ -43,12 +48,12 @@ export function Skills({ view, q, adding, onAdding, onView, onCount }) {
         setBusy(name);
         setNote('');
         try {
-            await toggle(t, next ? [tool(name)] : [], next ? [] : [tool(name)]);
+            await toggle(target, next ? [tool(name)] : [], next ? [] : [tool(name)]);
             on.reload();
-            setNote(next ? `${name} is on` : `${name} is off`);
+            setNote(next ? t('{name} is on', { name }) : t('{name} is off', { name }));
         }
         catch (e) {
-            setNote(say(e));
+            setNote(say(e, t));
         }
         finally {
             setBusy('');
@@ -64,20 +69,20 @@ export function Skills({ view, q, adding, onAdding, onView, onCount }) {
             own.reload();
             on.reload();
             onView('yours');
-            setNote(fresh ? `${s.name} is saved and on` : `${s.name} is saved`);
+            setNote(fresh ? t('{name} is saved and on', { name: s.name }) : t('{name} is saved', { name: s.name }));
         }, onDeleted: (name) => {
             setEditing(null);
             own.reload();
             on.reload();
-            setNote(`${name} is deleted`);
+            setNote(t('{name} is deleted', { name }));
         } })) : null;
     if (view === 'discover') {
         const all = shelf.value?.skills ?? [];
         const found = all.filter((e) => matches(q, e.name, e.description, e.product));
-        return (_jsxs(YStack, { gap: "$3", children: [_jsx(Line, { children: note }), _jsx(Part, { title: "From Hanzo", detail: "Add one and every run in your organization can use it.", children: shelf.error && !shelf.value ? (_jsx(Failed, { error: shelf.error, onRetry: shelf.reload })) : !shelf.value ? (_jsx(Soft, { children: "Loading skills\u2026" })) : !found.length ? (_jsx(Soft, { children: all.length ? `No skill matches “${q.trim()}”.` : 'There are no skills to add yet.' })) : (_jsxs(_Fragment, { children: [_jsx(SizableText, { size: "$1", color: "$soft", children: found.length === all.length ? `${all.length} skills` : `${found.length} of ${all.length} skills` }), _jsx(Grid, { label: "Skills to add", children: found.slice(0, shown).map((e) => (_jsx(Tile, { title: e.name, detail: e.description, meta: e.product, mark: _jsx(Mark, { name: e.name, icon: _jsx(BookOpen, { size: 15 }) }), onOpen: () => setReading(e), action: may ? _jsx(Add, { name: e.name, added: lit.has(tool(e.name)), busy: busy === e.name, onPress: () => void flip(e.name, true) }) : undefined }, e.name))) }), found.length > shown ? (_jsx(XStack, { justify: "center", children: _jsx(Button, { size: "sm", variant: "outline", onPress: () => setShown(shown + PAGE), children: "Show more" }) })) : null] })) }), reader, editor] }));
+        return (_jsxs(YStack, { gap: "$3", children: [_jsx(Line, { children: note }), _jsx(Part, { title: t('From Hanzo'), detail: t('Add one and every run in your organization can use it.'), children: shelf.error && !shelf.value ? (_jsx(Failed, { error: shelf.error, onRetry: shelf.reload })) : !shelf.value ? (_jsx(Soft, { children: t('Loading skills…') })) : !found.length ? (_jsx(Soft, { children: all.length ? t('No skill matches “{q}”.', { q: q.trim() }) : t('There are no skills to add yet.') })) : (_jsxs(_Fragment, { children: [_jsx(SizableText, { size: "$1", color: "$soft", children: found.length === all.length ? t('{n} skills', { n: all.length }) : t('{found} of {n} skills', { found: found.length, n: all.length }) }), _jsx(Grid, { label: t('Skills to add'), children: found.slice(0, shown).map((e) => (_jsx(Tile, { title: e.name, detail: e.description, meta: e.product, mark: _jsx(Mark, { name: e.name, icon: _jsx(BookOpen, { size: 15 }) }), onOpen: () => setReading(e), action: may ? _jsx(Add, { name: e.name, added: lit.has(tool(e.name)), busy: busy === e.name, onPress: () => void flip(e.name, true) }) : undefined }, e.name))) }), found.length > shown ? (_jsx(XStack, { justify: "center", children: _jsx(Button, { size: "sm", variant: "outline", onPress: () => setShown(shown + PAGE), children: t('Show more') }) })) : null] })) }), reader, editor] }));
     }
     if (!signed) {
-        return _jsx(Visitor, { children: "Sign in to see your skills." });
+        return _jsx(Visitor, { children: t('Sign in to see your skills.') });
     }
     const ownShown = own.value.filter((s) => matches(q, s.name, s.description));
     const addedShown = added.filter((x) => matches(q, nameOf(x.name), x.description));
@@ -85,9 +90,11 @@ export function Skills({ view, q, adding, onAdding, onView, onCount }) {
     return (_jsxs(YStack, { gap: "$5", children: [_jsx(Line, { children: note }), error && !own.value.length && !on.value.length ? (_jsx(Failed, { error: error, onRetry: () => {
                     own.reload();
                     on.reload();
-                } })) : (own.loading || on.loading) && !own.value.length && !on.value.length ? (_jsx(Soft, { children: "Loading your skills\u2026" })) : !own.value.length && !added.length ? (_jsxs(Empty, { title: "No skills yet", detail: may ? 'Add one from Hanzo, or write your own.' : 'An org admin adds skills. Browse what there is.', children: [_jsx(Button, { size: "sm", variant: "outline", onPress: () => onView('discover'), children: "Browse skills" }), may ? (_jsx(Button, { size: "sm", onPress: () => onAdding(true), children: "Write a skill" })) : null] })) : !ownShown.length && !addedShown.length ? (_jsx(Soft, { children: `No skill of yours matches “${q.trim()}”.` })) : (_jsxs(_Fragment, { children: [ownShown.length ? (_jsx(Part, { title: "Made by your team", detail: "Off keeps a skill but leaves it out of every run.", children: _jsx(Grid, { label: "Your skills", children: ownShown.map((s) => (_jsx(Tile, { title: s.name, detail: s.description || firstLine(s.content), meta: [s.source ? `From ${s.source}` : day(s.created) ? `Saved ${day(s.created)}` : '', s.admitted ? '' : 'Not in runs until an admin saves it'].filter(Boolean).join(' · ') || undefined, mark: _jsx(Mark, { name: s.name }), onOpen: () => setEditing(s), action: may ? (_jsx(Switch, { checked: lit.has(tool(s.name)), disabled: busy === s.name, onCheckedChange: (v) => void flip(s.name, v), "aria-label": `${s.name} on` })) : (_jsx(SizableText, { size: "$1", color: "$soft", children: lit.has(tool(s.name)) ? 'On' : 'Off' })) }, s.id))) }) })) : null, addedShown.length ? (_jsx(Part, { title: "Added from Hanzo", detail: "On for every run in your organization.", children: _jsx(Grid, { label: "Added skills", children: addedShown.map((x) => {
+                } })) : (own.loading || on.loading) && !own.value.length && !on.value.length ? (_jsx(Soft, { children: t('Loading your skills…') })) : !own.value.length && !added.length ? (_jsxs(Empty, { title: t('No skills yet'), detail: may ? t('Add one from Hanzo, or write your own.') : t('An org admin adds skills. Browse what there is.'), children: [_jsx(Button, { size: "sm", variant: "outline", onPress: () => onView('discover'), children: t('Browse skills') }), may ? (_jsx(Button, { size: "sm", onPress: () => onAdding(true), children: t('Write a skill') })) : null] })) : !ownShown.length && !addedShown.length ? (_jsx(Soft, { children: t('No skill of yours matches “{q}”.', { q: q.trim() }) })) : (_jsxs(_Fragment, { children: [ownShown.length ? (_jsx(Part, { title: t('Made by your team'), detail: t('Off keeps a skill but leaves it out of every run.'), children: _jsx(Grid, { label: t('Your skills'), children: ownShown.map((s) => (_jsx(Tile, { title: s.name, detail: s.description || firstLine(s.content), meta: [s.source ? t('From {source}', { source: s.source }) : day(s.created) ? t('Saved {date}', { date: day(s.created) }) : '', s.admitted ? '' : t('Not in runs until an admin saves it')]
+                                    .filter(Boolean)
+                                    .join(' · ') || undefined, mark: _jsx(Mark, { name: s.name }), onOpen: () => setEditing(s), action: may ? (_jsx(Switch, { checked: lit.has(tool(s.name)), disabled: busy === s.name, onCheckedChange: (v) => void flip(s.name, v), "aria-label": t('{name} on', { name: s.name }) })) : (_jsx(SizableText, { size: "$1", color: "$soft", children: lit.has(tool(s.name)) ? t('On') : t('Off') })) }, s.id))) }) })) : null, addedShown.length ? (_jsx(Part, { title: t('Added from Hanzo'), detail: t('On for every run in your organization.'), children: _jsx(Grid, { label: t('Added skills'), children: addedShown.map((x) => {
                                 const name = nameOf(x.name);
-                                return (_jsx(Tile, { title: name, detail: x.description, mark: _jsx(Mark, { name: name, icon: _jsx(BookOpen, { size: 15 }) }), onOpen: () => setReading({ name, description: x.description, product: '' }), action: may ? (_jsx(Button, { size: "sm", variant: "ghost", disabled: busy === name, onPress: () => void flip(name, false), "aria-label": `Remove ${name}`, children: "Remove" })) : undefined }, x.name));
+                                return (_jsx(Tile, { title: name, detail: x.description, mark: _jsx(Mark, { name: name, icon: _jsx(BookOpen, { size: 15 }) }), onOpen: () => setReading({ name, description: x.description, product: '' }), action: may ? (_jsx(Button, { size: "sm", variant: "ghost", disabled: busy === name, onPress: () => void flip(name, false), "aria-label": t('Remove {name}', { name }), children: t('Remove') })) : undefined }, x.name));
                             }) }) })) : null] })), reader, editor] }));
 }
 const firstLine = (md) => md
@@ -96,13 +103,15 @@ const firstLine = (md) => md
     .find(Boolean) ?? '';
 /** One catalogue skill: what it is, its SKILL.md, and adding or removing it. */
 function Reader({ skill, added, signed, busy, onFlip, onClose, }) {
-    const t = useTarget();
-    const doc = useLoad(() => document(t, skill.name), '', [t.api, skill.name]);
-    return (_jsxs(Sheet, { title: skill.name, open: true, onOpenChange: (o) => !o && onClose(), width: 720, children: [skill.description ? (_jsx(SizableText, { size: "$2", color: "$soft", children: skill.description })) : null, signed ? (_jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(Button, { size: "sm", variant: added ? 'outline' : 'default', disabled: busy, onPress: () => onFlip(!added), children: added ? 'Remove' : 'Add to your skills' }), _jsx(SizableText, { size: "$1", color: "$soft", flex: 1, children: added ? 'On for your organization.' : 'Every run in your organization can use it once added.' })] })) : null, doc.error ? (_jsx(Failed, { error: doc.error, onRetry: doc.reload })) : doc.loading && !doc.value ? (_jsx(Soft, { children: "Loading SKILL.md\u2026" })) : (_jsx(Code, { language: "SKILL.md", value: doc.value, children: _jsx(SizableText, { size: "$1", color: "$ink", style: { ...mono, whiteSpace: 'pre-wrap' }, children: doc.value }) }))] }));
+    const { t } = useI18n();
+    const target = useTarget();
+    const doc = useLoad(() => document(target, skill.name), '', [target.api, skill.name]);
+    return (_jsxs(Sheet, { title: skill.name, open: true, onOpenChange: (o) => !o && onClose(), width: 720, children: [skill.description ? (_jsx(SizableText, { size: "$2", color: "$soft", children: skill.description })) : null, signed ? (_jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(Button, { size: "sm", variant: added ? 'outline' : 'default', disabled: busy, onPress: () => onFlip(!added), children: added ? t('Remove') : t('Add to your skills') }), _jsx(SizableText, { size: "$1", color: "$soft", flex: 1, children: added ? t('On for your organization.') : t('Every run in your organization can use it once added.') })] })) : null, doc.error ? (_jsx(Failed, { error: doc.error, onRetry: doc.reload })) : doc.loading && !doc.value ? (_jsx(Soft, { children: t('Loading SKILL.md…') })) : (_jsx(Code, { language: "SKILL.md", value: doc.value, children: _jsx(SizableText, { size: "$1", color: "$ink", style: { ...mono, whiteSpace: 'pre-wrap' }, children: doc.value }) }))] }));
 }
 /** Write a skill, or revise one of the org's own. Its name is its id, so a saved skill keeps its name. */
 function Editor({ skill, may, onClose, onSaved, onDeleted, }) {
-    const t = useTarget();
+    const { t } = useI18n();
+    const target = useTarget();
     const [name, setName] = useState(skill?.name ?? '');
     const [description, setDescription] = useState(skill?.description ?? '');
     const [content, setContent] = useState(skill?.content ?? '');
@@ -113,21 +122,21 @@ function Editor({ skill, may, onClose, onSaved, onDeleted, }) {
         setWorking(true);
         setNote('');
         try {
-            const saved = await write(t, { name: name.trim(), description: description.trim(), content });
+            const saved = await write(target, { name: name.trim(), description: description.trim(), content });
             // A new skill is switched on as it is saved; a revised one keeps its switch.
             if (!skill)
-                await toggle(t, [tool(saved.name)]);
+                await toggle(target, [tool(saved.name)]);
             onSaved(saved, !skill);
         }
         catch (e) {
-            setNote(say(e));
+            setNote(say(e, t));
         }
         finally {
             setWorking(false);
         }
     };
-    return (_jsxs(Sheet, { title: skill ? skill.name : 'New skill', open: true, onOpenChange: (o) => !o && onClose(), width: 680, children: [skill?.source ? (_jsxs(SizableText, { size: "$2", color: "$soft", children: ["Read from ", skill.source, ". The next push of that repository replaces what is saved here."] })) : null, _jsx(Field, { label: "Name", hint: skill ? 'A skill keeps its name. Save under another name to make a new one.' : 'One lowercase word: letters, digits, _ or -.', children: _jsx(Input, { value: name, onChangeText: setName, "aria-label": "Name", disabled: Boolean(skill), autoCapitalize: "none" }) }), _jsx(Field, { label: "Description", hint: "One line. An agent reads it to decide whether it needs the skill.", children: _jsx(Input, { value: description, onChangeText: setDescription, placeholder: "How we triage an incoming issue", "aria-label": "Description" }) }), _jsx(Field, { label: "SKILL.md", hint: "Markdown: what it is for, when to use it, and the steps.", children: _jsx(Textarea, { value: content, onChangeText: setContent, placeholder: '# Triage\n\n1. Read the issue…', "aria-label": "SKILL.md", rows: 14, style: mono }) }), _jsx(Line, { children: note || (may ? '' : 'Only an org admin can write or delete skills.') }), _jsxs(XStack, { gap: "$2", items: "center", children: [skill && may ? (_jsx(Button, { size: "sm", variant: "ghost", onPress: () => setAsking(true), children: "Delete" })) : null, _jsx(XStack, { flex: 1 }), _jsx(Button, { size: "sm", variant: "ghost", onPress: onClose, children: may ? 'Cancel' : 'Close' }), may ? (_jsx(Button, { size: "sm", disabled: working, onPress: () => void save(), children: "Save" })) : null] }), skill ? (_jsx(Confirm, { what: skill.name, says: "The skill leaves your organization and every agent that names it.", open: asking, onOpenChange: setAsking, onYes: async () => {
-                    await remove(t, skill.id);
+    return (_jsxs(Sheet, { title: skill ? skill.name : t('New skill'), open: true, onOpenChange: (o) => !o && onClose(), width: 680, children: [skill?.source ? (_jsx(SizableText, { size: "$2", color: "$soft", children: t('Read from {source}. The next push of that repository replaces what is saved here.', { source: skill.source }) })) : null, _jsx(Field, { label: t('Name'), hint: skill ? t('A skill keeps its name. Save under another name to make a new one.') : t('One lowercase word: letters, digits, _ or -.'), children: _jsx(Input, { value: name, onChangeText: setName, "aria-label": t('Name'), disabled: Boolean(skill), autoCapitalize: "none" }) }), _jsx(Field, { label: t('Description'), hint: t('One line. An agent reads it to decide whether it needs the skill.'), children: _jsx(Input, { value: description, onChangeText: setDescription, placeholder: t('How we triage an incoming issue'), "aria-label": t('Description') }) }), _jsx(Field, { label: "SKILL.md", hint: t('Markdown: what it is for, when to use it, and the steps.'), children: _jsx(Textarea, { value: content, onChangeText: setContent, placeholder: t('# Triage\n\n1. Read the issue…'), "aria-label": "SKILL.md", rows: 14, fontFamily: "$mono" }) }), _jsx(Line, { children: note || (may ? '' : t('Only an org admin can write or delete skills.')) }), _jsxs(XStack, { gap: "$2", items: "center", children: [skill && may ? (_jsx(Button, { size: "sm", variant: "ghost", onPress: () => setAsking(true), children: t('Delete') })) : null, _jsx(XStack, { flex: 1 }), _jsx(Button, { size: "sm", variant: "ghost", onPress: onClose, children: may ? t('Cancel') : t('Close') }), may ? (_jsx(Button, { size: "sm", disabled: working, onPress: () => void save(), children: t('Save') })) : null] }), skill ? (_jsx(Confirm, { what: skill.name, says: t('The skill leaves your organization and every agent that names it.'), open: asking, onOpenChange: setAsking, onYes: async () => {
+                    await remove(target, skill.id);
                     onDeleted(skill.name);
                 } })) : null] }));
 }

package/lib/customize/ui.d.ts

@@ -2,10 +2,6 @@ import { type ReactNode } from 'react';
 export declare const mono: {
     fontFamily: string;
 };
-/** A button that holds a card's text reads from the left, not from the middle a button centres it in. */
-export declare const left: {
-    readonly textAlign: 'left';
-};
 /** Which half of a tab: what there is to browse and add (first), or what the org already has. */
 export type View = 'discover' | 'yours';
 /** What the shell hands a tab: which half, the search, the Add dialog's state, and where to say how many are yours. */
@@ -55,13 +51,13 @@ export declare function Featured({ title, detail, meta, mark, action, onOpen }:
     action?: ReactNode;
     onOpen: () => void;
 }): import("react").JSX.Element;
-/** A card's add control: Add while it is not yours, Added once it is. */
-export declare function Add({ name, added, busy, onPress, label }: {
+/** A card's add control: Add (Use, for a template one is made from) while it is not yours, Added once it is. */
+export declare function Add({ name, added, busy, onPress, use }: {
     name: string;
     added: boolean;
     busy?: boolean;
     onPress: () => void;
-    label?: string;
+    use?: boolean;
 }): import("react").JSX.Element;
 /** A dialog with a title, a close control and a body that scrolls inside the window. */
 export declare function Sheet({ title, open, onOpenChange, width, children }: {
@@ -71,7 +67,7 @@ export declare function Sheet({ title, open, onOpenChange, width, children }: {
     width?: number;
     children: ReactNode;
 }): import("react").JSX.Element;
-/** 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 declare function Confirm({ what, says, open, onOpenChange, onYes }: {
     what: string;
     says: string;
@@ -116,7 +112,7 @@ export declare function Field({ label, hint, children }: {
     hint?: string;
     children: ReactNode;
 }): import("react").JSX.Element;
-/** 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 declare function Choice<T extends string>({ value, options, onChange, label, }: {
     value: T;
     options: readonly {

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.') }) })] }));
 }