@hanzo/build 0.2.80 → 0.2.82

package/lib/merge.d.ts

@@ -42,7 +42,7 @@ export interface Project {
     synced: string;
     /** Its link's state: `synced`, `conflict`, `pending`, `paused`, `linked` when its forge copy could not be read; '' with no link. */
     status: string;
-    /** The org's project (GET /v1/projects) that builds from it, by slug, or ''. */
+    /** The org's project (GET /v1/project) that builds from it, by slug, or ''. */
     slug: string;
     /** The name GitHub's listing says it takes on the forge once brought there, or ''. */
     codebase: string;
@@ -124,7 +124,7 @@ export interface Linked {
     status: string;
     branch: string;
 }
-/** One of the org's projects (GET /v1/projects) that builds from a repository. */
+/** One of the org's projects (GET /v1/project) that builds from a repository. */
 export interface Site {
     slug: string;
     /** Its clone address. */

package/lib/meter.d.ts

@@ -7,7 +7,7 @@ export declare const INK: {
     readonly near: '$yellow10';
     readonly limited: '$red10';
 };
-/** A plan's name with its rung beside it, small: `Max` `20x`. */
+/** A plan's name with its rung beside it, small: `Max` `20x`. A family's name is a name; Free and the like are words. */
 export declare function Title({ label, size }: {
     label: Label;
     size?: '$3' | '$5' | '$6';

package/lib/meter.js

@@ -13,14 +13,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * balance, because that balance is what it spends.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { phrase } from '@hanzo/i18n';
+import { useI18n } from '@hanzo/i18n/react';
 import { money } from './api/billing.js';
 import { left, rows } from './standing.js';
 import { when } from './plan.js';
 /** The ink a share is said in: quiet until it is close, and the one red when it is used. */
 export const INK = { ok: '$soft', near: '$yellow10', limited: '$red10' };
-/** A plan's name with its rung beside it, small: `Max` `20x`. */
+/** A window's name, in English; drawn through `t`. */
+const WINDOW = { Session: phrase('Session'), Today: phrase('Today'), Month: phrase('Month') };
+/** A plan's name with its rung beside it, small: `Max` `20x`. A family's name is a name; Free and the like are words. */
 export function Title({ label, size = '$3' }) {
-    return (_jsxs(XStack, { items: "baseline", gap: "$1.5", minW: 0, "data-slot": "plan-name", children: [_jsx(SizableText, { size: size, color: "$ink", style: { fontWeight: 600 }, numberOfLines: 1, children: label.name }), label.tag ? (_jsx(SizableText, { size: "$1", color: "$soft", px: "$1.5", rounded: "$2", borderWidth: 1, borderColor: "$borderColor", "data-slot": "plan-tag", children: label.tag })) : null] }));
+    const { t } = useI18n();
+    return (_jsxs(XStack, { items: "baseline", gap: "$1.5", minW: 0, "data-slot": "plan-name", children: [_jsx(SizableText, { size: size, color: "$ink", style: { fontWeight: 600 }, numberOfLines: 1, children: t(label.name) }), label.tag ? (_jsx(SizableText, { size: "$1", color: "$soft", px: "$1.5", rounded: "$2", borderWidth: 1, borderColor: "$borderColor", "data-slot": "plan-tag", children: t(label.tag) })) : null] }));
 }
 /** A quiet text button. */
 function Act({ label, onPress }) {
@@ -28,10 +33,13 @@ function Act({ label, onPress }) {
 }
 /** The standing, drawn: what `Meter` shows once it has read. */
 export function Reading({ s, onPlans, onBilling, now }) {
-    const windows = s.kind === 'plan' ? rows(s.limits, now) : [];
+    const { t } = useI18n();
+    const windows = s.kind === 'plan' ? rows(s.limits, now, t) : [];
     const share = s.kind === 'free' ? left(s.allowance) : null;
     const resets = s.allowance ? when(s.allowance.resets, now) : '';
-    return (_jsxs(YStack, { px: "$2", py: "$1.5", gap: "$1", "data-slot": "meter", "data-kind": s.kind, children: [_jsxs(XStack, { items: "center", gap: "$2", minW: 0, children: [_jsx(XStack, { flex: 1, minW: 0, children: s.label ? _jsx(Title, { label: s.label }) : null }), s.kind === 'free' ? _jsx(Act, { label: "Upgrade", onPress: onPlans }) : s.kind === 'credits' ? _jsx(Act, { label: "Add funds", onPress: onBilling }) : null] }), windows.map((w) => (_jsxs(XStack, { items: "baseline", gap: "$2", "data-slot": "meter-window", "data-state": w.state, children: [_jsx(SizableText, { size: "$1", color: "$soft", width: 56, shrink: 0, children: w.name }), _jsxs(SizableText, { size: "$1", color: INK[w.state], style: { fontVariantNumeric: 'tabular-nums' }, shrink: 0, children: [w.percent, "%"] }), _jsx(SizableText, { size: "$1", color: "$soft", flex: 1, minW: 0, numberOfLines: 1, text: "right", children: w.resets })] }, w.name))), s.kind === 'free' && share !== null ? (_jsx(SizableText, { size: "$1", color: share === 0 ? '$red10' : '$soft', "data-slot": "meter-free", children: `${share}% of today’s free usage left${resets ? ` · Resets ${resets}` : ''}` })) : null, s.kind === 'credits' && s.balance !== null ? (_jsx(SizableText, { size: "$1", color: "$soft", "data-slot": "meter-balance", children: `${money(s.balance)} in credits` })) : null] }));
+    return (_jsxs(YStack, { px: "$2", py: "$1.5", gap: "$1", "data-slot": "meter", "data-kind": s.kind, children: [_jsxs(XStack, { items: "center", gap: "$2", minW: 0, children: [_jsx(XStack, { flex: 1, minW: 0, children: s.label ? _jsx(Title, { label: s.label }) : null }), s.kind === 'free' ? _jsx(Act, { label: t('Upgrade'), onPress: onPlans }) : s.kind === 'credits' ? _jsx(Act, { label: t('Add funds'), onPress: onBilling }) : null] }), windows.map((w) => (_jsxs(XStack, { items: "baseline", gap: "$2", "data-slot": "meter-window", "data-state": w.state, children: [_jsx(SizableText, { size: "$1", color: "$soft", width: 56, shrink: 0, children: t(WINDOW[w.name]) }), _jsxs(SizableText, { size: "$1", color: INK[w.state], style: { fontVariantNumeric: 'tabular-nums' }, shrink: 0, children: [w.percent, "%"] }), _jsx(SizableText, { size: "$1", color: "$soft", flex: 1, minW: 0, numberOfLines: 1, text: "right", children: w.resets })] }, w.name))), s.kind === 'free' && share !== null ? (_jsx(SizableText, { size: "$1", color: share === 0 ? '$red10' : '$soft', "data-slot": "meter-free", children: resets
+                    ? `${t('{n}% of today’s free usage left', { n: share })} · ${t('Resets {time}', { time: resets })}`
+                    : t('{n}% of today’s free usage left', { n: share }) })) : null, s.kind === 'credits' && s.balance !== null ? (_jsx(SizableText, { size: "$1", color: "$soft", "data-slot": "meter-balance", children: t('{amount} in credits', { amount: money(s.balance) }) })) : null] }));
 }
 /**
  * The block an account menu leads with: `read` is `useStanding`, asked while
@@ -39,7 +47,8 @@ export function Reading({ s, onPlans, onBilling, now }) {
  * live on; the host says where each is.
  */
 export function Meter({ read, onPlans, onBilling }) {
+    const { t } = useI18n();
     if (read.value)
         return _jsx(Reading, { s: read.value, onPlans: onPlans, onBilling: onBilling });
-    return (_jsx(SizableText, { size: "$1", color: "$soft", px: "$2", py: "$1.5", "data-slot": "meter", children: read.error ? 'Your plan could not be read.' : 'Reading your plan…' }));
+    return (_jsx(SizableText, { size: "$1", color: "$soft", px: "$2", py: "$1.5", "data-slot": "meter", children: read.error ? t('Your plan could not be read.') : t('Reading your plan…') }));
 }

package/lib/mic.js

@@ -9,10 +9,14 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * every capture opens it; unchosen, the system's own input. The meter listens
  * only while the menu is open, and only where the person has already let the
  * page use a microphone: opening a menu never asks for permission.
+ *
+ * Its words are the reader's language (@hanzo/i18n `t`); a microphone's name
+ * is the device's and a language's is its own, drawn as given.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
 import { Check, ChevronDown, Mic as MicIcon } from '@hanzogui/lucide-icons-2';
 import { Control } from '@hanzo/composer';
+import { useI18n } from '@hanzo/i18n/react';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from '@hanzo/ui';
 import { choose, Voice } from '@hanzo/voice';
 import { useEffect, useRef, useState } from 'react';
@@ -69,6 +73,8 @@ function useInputs(open) {
 }
 /** The chosen microphone's level while the menu is open, drawn without re-rendering. */
 function Meter({ device, on }) {
+    // The level grows from the line's start: the right edge in a right-to-left language.
+    const { dir } = useI18n();
     const bar = useRef(null);
     useEffect(() => {
         if (!on)
@@ -108,11 +114,12 @@ function Meter({ device, on }) {
         };
     }, [device, on]);
     return (_jsxs(XStack, { items: "center", gap: 10, px: 8, py: 8, "data-slot": "mic-meter", "aria-hidden": true, children: [_jsx(MicIcon, { size: 14, color: "$hint" }), _jsx(YStack, { flex: 1, height: 4, rounded: 2, bg: "$hover", overflow: "hidden", children: _jsx(YStack, { ref: bar, height: 4, width: "100%", bg: "$ink", 
-                    // inline-style: the level is written per frame onto the node; a style prop would mint a class per value.
-                    style: { transform: 'scaleX(0)', transformOrigin: 'left' } }) })] }));
+                    // Empty at rest; the level is written per frame onto the node's transform, so no class is minted per value.
+                    scaleX: 0, transformOrigin: dir === 'rtl' ? 'right' : 'left' }) })] }));
 }
 /** The mic and its chevron, one control on the composer's row. */
 export function Dictation({ voice, disabled = false, narrow = false, language = null, onLanguage }) {
+    const { t } = useI18n();
     const [open, setOpen] = useState(false);
     // The Language list, drawn only while open (see plus.tsx).
     const [lang, setLang] = useState(false);
@@ -122,11 +129,11 @@ export function Dictation({ voice, disabled = false, narrow = false, language =
     // The chevron is drawn while the mic is reached for (pointer, keyboard, menu open); at rest the row is the mic alone.
     const [near, setNear] = useState(false);
     const shown = open || near;
-    return (_jsxs(XStack, { "data-slot": "dictation", items: "center", rounded: 8, borderWidth: 1, borderColor: open ? '$borderColor' : 'transparent', hoverStyle: { borderColor: '$borderColor' }, shrink: 0, onPointerEnter: () => setNear(true), onPointerLeave: () => setNear(false), onFocus: () => setNear(true), onBlur: () => setNear(false), children: [_jsx(Control, { asChild: true, size: narrow ? 44 : 30, ...PLAIN, children: _jsx(Voice, { voice: voice, disabled: disabled, says: { idle: 'Dictate', listening: 'Dictating — click to stop' }, children: (state) => _jsx(MicIcon, { size: 16, color: "var(--foreground)", fill: state === 'idle' ? 'none' : 'var(--foreground)' }) }) }), _jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, disabled: disabled, children: _jsx(XStack, { render: "button", "aria-label": "Dictation settings", "data-slot": "dictation-menu", width: 16, height: 30, items: "center", justify: "center", rounded: 6, cursor: "pointer", bg: open ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, ...(narrow ? { width: 44, height: 44 } : null), children: _jsx(ChevronDown, { size: 14, color: "$soft", opacity: shown || narrow ? 1 : 0 }) }) }), _jsxs(DropdownMenuContent, { align: "end", minW: 200, "data-slot": "dictation-panel", children: [_jsx(Meter, { device: device, on: open && allowed }), inputs.length === 0 ? (_jsx(DropdownMenuLabel, { children: _jsx(SizableText, { fontSize: 14, color: "$hint", children: "No devices found" }) })) : (inputs.map((d, i) => {
+    return (_jsxs(XStack, { "data-slot": "dictation", items: "center", rounded: 8, borderWidth: 1, borderColor: open ? '$borderColor' : 'transparent', hoverStyle: { borderColor: '$borderColor' }, shrink: 0, onPointerEnter: () => setNear(true), onPointerLeave: () => setNear(false), onFocus: () => setNear(true), onBlur: () => setNear(false), children: [_jsx(Control, { asChild: true, size: narrow ? 44 : 30, ...PLAIN, children: _jsx(Voice, { voice: voice, disabled: disabled, says: { idle: t('Dictate'), listening: t('Dictating — click to stop') }, children: (state) => _jsx(MicIcon, { size: 16, color: "var(--foreground)", fill: state === 'idle' ? 'none' : 'var(--foreground)' }) }) }), _jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, disabled: disabled, children: _jsx(XStack, { render: "button", "aria-label": t('Dictation settings'), "data-slot": "dictation-menu", width: 16, height: 30, items: "center", justify: "center", rounded: 6, cursor: "pointer", bg: open ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, ...(narrow ? { width: 44, height: 44 } : null), children: _jsx(ChevronDown, { size: 14, color: "$soft", opacity: shown || narrow ? 1 : 0 }) }) }), _jsxs(DropdownMenuContent, { align: "end", minW: 200, "data-slot": "dictation-panel", children: [_jsx(Meter, { device: device, on: open && allowed }), inputs.length === 0 ? (_jsx(DropdownMenuLabel, { children: _jsx(SizableText, { fontSize: 14, color: "$hint", children: t('No devices found') }) })) : (inputs.map((d, i) => {
                                 const on = device ? d.deviceId === device : d.groupId === using;
                                 return (_jsx(DropdownMenuItem, { preventCloseOnSelect: true, onSelect: () => {
                                         setDevice(d.deviceId);
                                         keep(d.deviceId);
-                                    }, children: _jsxs(XStack, { flex: 1, items: "center", gap: 8, children: [_jsx(SizableText, { fontSize: 14, color: "$ink", numberOfLines: 1, flex: 1, children: d.label || `Microphone ${i + 1}` }), on ? _jsx(Check, { size: 14, color: "var(--primary)", "aria-hidden": true }) : null] }) }, d.deviceId || i));
-                            })), onLanguage ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: _jsx(SizableText, { fontSize: 13, color: "$hint", children: "Dictation settings" }) }), _jsxs(DropdownMenuSub, { open: lang, onOpenChange: setLang, children: [_jsx(DropdownMenuSubTrigger, { "data-slot": "dictation-language", onPress: () => setLang(true), children: _jsxs(XStack, { flex: 1, items: "center", gap: 8, children: [_jsx(SizableText, { fontSize: 14, color: "$ink", flex: 1, children: "Language" }), _jsx(SizableText, { fontSize: 14, color: "$hint", children: spoken?.label ?? 'Auto' })] }) }), lang ? (_jsx(DropdownMenuSubContent, { minW: 160, pointerEvents: "auto", children: [{ id: '', label: 'Auto' }, ...LANGUAGES].map((l) => (_jsx(DropdownMenuItem, { onSelect: () => onLanguage(l.id || null), children: _jsxs(XStack, { flex: 1, items: "center", gap: 8, children: [_jsx(SizableText, { fontSize: 14, color: "$ink", flex: 1, children: l.label }), (language ?? '') === l.id ? _jsx(Check, { size: 14, color: "var(--primary)", "aria-hidden": true }) : null] }) }, l.id || 'auto'))) })) : null] })] })) : null] })] })] }));
+                                    }, children: _jsxs(XStack, { flex: 1, items: "center", gap: 8, children: [_jsx(SizableText, { fontSize: 14, color: "$ink", numberOfLines: 1, flex: 1, children: d.label || t('Microphone {n}', { n: i + 1 }) }), on ? _jsx(Check, { size: 14, color: "var(--primary)", "aria-hidden": true }) : null] }) }, d.deviceId || i));
+                            })), onLanguage ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: _jsx(SizableText, { fontSize: 13, color: "$hint", children: t('Dictation settings') }) }), _jsxs(DropdownMenuSub, { open: lang, onOpenChange: setLang, children: [_jsx(DropdownMenuSubTrigger, { "data-slot": "dictation-language", onPress: () => setLang(true), children: _jsxs(XStack, { flex: 1, items: "center", gap: 8, children: [_jsx(SizableText, { fontSize: 14, color: "$ink", flex: 1, children: t('Language') }), _jsx(SizableText, { fontSize: 14, color: "$hint", children: spoken?.label ?? t('Auto') })] }) }), lang ? (_jsx(DropdownMenuSubContent, { minW: 160, pointerEvents: "auto", children: [{ id: '', label: t('Auto') }, ...LANGUAGES].map((l) => (_jsx(DropdownMenuItem, { onSelect: () => onLanguage(l.id || null), children: _jsxs(XStack, { flex: 1, items: "center", gap: 8, children: [_jsx(SizableText, { fontSize: 14, color: "$ink", flex: 1, children: l.label }), (language ?? '') === l.id ? _jsx(Check, { size: 14, color: "var(--primary)", "aria-hidden": true }) : null] }) }, l.id || 'auto'))) })) : null] })] })) : null] })] })] }));
 }

package/lib/mind.d.ts

@@ -1,6 +1,7 @@
 import { type Target } from './api/call.ts';
 import { type Model } from './api/models.ts';
 export type Effort = 'low' | 'medium' | 'high';
+/** The efforts, in English and marked (`phrase`): the composer draws each word through `t`. */
 export declare const EFFORTS: readonly {
     id: Effort;
     label: string;

package/lib/mind.js

@@ -16,15 +16,17 @@
  * lists as not reasoning offers none; Enso and a model the catalog does not
  * describe offer all three.
  */
+import { phrase } from '@hanzo/i18n';
 import { parseModels } from '@hanzo/ui/models/catalog';
 import { useEffect, useState, useSyncExternalStore } from 'react';
 import { Refusal } from './api/call.js';
 import { ENSO, models as read } from './api/models.js';
 import { usePick } from './pick.js';
+/** The efforts, in English and marked (`phrase`): the composer draws each word through `t`. */
 export const EFFORTS = [
-    { id: 'low', label: 'Low', note: 'A quick pass' },
-    { id: 'medium', label: 'Medium', note: 'Thinks before it answers' },
-    { id: 'high', label: 'High', note: 'Slow and careful, for hard problems' },
+    { id: 'low', label: phrase('Low'), note: phrase('A quick pass') },
+    { id: 'medium', label: phrase('Medium'), note: phrase('Thinks before it answers') },
+    { id: 'high', label: phrase('High'), note: phrase('Slow and careful, for hard problems') },
 ];
 export const FIRST = { model: ENSO, effort: 'medium' };
 /** What Free answers on: the catalog's free lane, Enso's first. `free` is an alias of it. */

package/lib/nav.d.ts

@@ -1,3 +1,4 @@
+import { type Say } from '@hanzo/i18n/react';
 import type { RailLink } from '@hanzo/ui/chat';
 import type { Host } from './host.tsx';
 /** A run of places under one quiet label; '' draws none. */
@@ -8,20 +9,20 @@ export interface Group {
 }
 /** The id of the row that starts a new run: a rail with a New control of its own draws that instead. */
 export declare const NEW = "new";
-export declare function nav(host: Host, go: (path: string) => void): Group[];
+export declare function nav(host: Host, go: (path: string) => void, t?: Say): Group[];
 /** Dev's own places: what a host whose rail holds the rest (Library, Scheduled tasks, Customize) lists in Dev's sidebar. */
-export declare const own: (host: Host, go: (path: string) => void) => Group[];
+export declare const own: (host: Host, go: (path: string) => void, t?: Say) => Group[];
 /**
  * Settings' sections as a host's sidebar lists them: one group per part, a
  * part's label drawn only where it is not its first row's name (Code leads
  * Code's part, so the part is not labelled twice).
  */
-export declare function sections(host: Host, go: (path: string) => void): Group[];
+export declare function sections(host: Host, go: (path: string) => void, t?: Say): Group[];
 /** Customize's tabs as a host's sidebar lists them, Agents first; an agent's profile lights Agents. */
-export declare function tabs(host: Host, go: (path: string) => void): Group[];
+export declare function tabs(host: Host, go: (path: string) => void, t?: Say): Group[];
 /** Fired on `window` once the sidebar's Upload has kept its files, for the Library to read again. */
 export declare const KEPT = "hanzo:library:kept";
 /** The Library's sidebar: Upload, then every kind it narrows to, the one in the address lit. */
-export declare function library(host: Host, go: (path: string) => void): Group[];
+export declare function library(host: Host, go: (path: string) => void, t?: Say): Group[];
 /** Scheduled tasks' sidebar: New task, then each of the person's tasks, the one open lit. Read only while `on`. */
 export declare function useScheduled(host: Host, go: (path: string) => void, on: boolean): Group[];

package/lib/nav.js

@@ -8,8 +8,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * Every row moves the builder through `go` with the address `path` writes, so
  * where a place lives is said here and in route.ts and nowhere else.
+ *
+ * The rows' words are the reader's language when the caller hands in its
+ * @hanzo/i18n `t` (English without one); a task's name is the person's own.
  */
 import { AudioLines, Bell, BookOpen, Bot, Box, Brain, CircleDot, Clock, Code, Container, Cpu, CreditCard, File, FileText, FolderGit2, Gauge, Image, Key, LayoutTemplate, Library, Plug, Plus, Presentation, Puzzle, Settings, Shield, SlidersHorizontal, Sparkles, SquarePen, Upload, User, Users, Video } from '@hanzogui/lucide-icons-2';
+import { phrase } from '@hanzo/i18n';
+import { useI18n } from '@hanzo/i18n/react';
 import { useMemo } from 'react';
 import { automations } from './api/auto.js';
 import { KINDS, upload } from './api/library.js';
@@ -17,10 +22,11 @@ import { pinBoard } from './choice.js';
 import { useRead } from './data.js';
 import { DOCS } from './foot.js';
 import { path, route, TABS } from './route.js';
+import { english } from './say.js';
 import { GROUPS, heading, LIST } from './settings/list.js';
 /** The id of the row that starts a new run: a rail with a New control of its own draws that instead. */
 export const NEW = 'new';
-export function nav(host, go) {
+export function nav(host, go, t = english) {
     const r = route(host.path);
     const screen = r.kind === 'screen' ? r.screen : '';
     const section = r.kind === 'settings' ? r.section : '';
@@ -28,20 +34,20 @@ export function nav(host, go) {
     return [
         {
             id: 'work',
-            label: 'Work',
+            label: t('Work'),
             links: [
-                { id: NEW, label: 'New run', icon: _jsx(SquarePen, { size: 16 }), onPress: to(''), active: r.kind === 'new' },
+                { id: NEW, label: t('New run'), icon: _jsx(SquarePen, { size: 16 }), onPress: to(''), active: r.kind === 'new' },
                 // A project is a repository: its list, linking one from GitHub, and one's workspace.
                 {
                     id: 'projects',
-                    label: 'Projects',
+                    label: t('Projects'),
                     icon: _jsx(FolderGit2, { size: 16 }),
                     onPress: to(path({ kind: 'screen', screen: 'projects' })),
                     active: screen === 'projects' || screen === 'sync' || r.kind === 'repo',
                 },
                 {
                     id: 'issues',
-                    label: 'Issues',
+                    label: t('Issues'),
                     icon: _jsx(CircleDot, { size: 16 }),
                     onPress: () => {
                         pinBoard(host.org, '');
@@ -49,61 +55,61 @@ export function nav(host, go) {
                     },
                     active: screen === 'issues',
                 },
-                { id: 'templates', label: 'Templates', icon: _jsx(LayoutTemplate, { size: 16 }), onPress: to(path({ kind: 'screen', screen: 'templates' })), active: screen === 'templates' },
+                { id: 'templates', label: t('Templates'), icon: _jsx(LayoutTemplate, { size: 16 }), onPress: to(path({ kind: 'screen', screen: 'templates' })), active: screen === 'templates' },
             ],
         },
         {
             id: 'make',
-            label: 'Make',
+            label: t('Make'),
             links: [
-                { id: 'artifacts', label: 'Library', icon: _jsx(Library, { size: 16 }), onPress: to(path({ kind: 'screen', screen: 'artifacts' })), active: screen === 'artifacts' },
-                { id: 'automations', label: 'Scheduled tasks', icon: _jsx(Clock, { size: 16 }), onPress: to(path({ kind: 'screen', screen: 'automations' })), active: screen === 'automations' || r.kind === 'automation' },
+                { id: 'artifacts', label: t('Library'), icon: _jsx(Library, { size: 16 }), onPress: to(path({ kind: 'screen', screen: 'artifacts' })), active: screen === 'artifacts' },
+                { id: 'automations', label: t('Scheduled tasks'), icon: _jsx(Clock, { size: 16 }), onPress: to(path({ kind: 'screen', screen: 'automations' })), active: screen === 'automations' || r.kind === 'automation' },
             ],
         },
         {
             id: 'run',
-            label: 'Run',
+            label: t('Run'),
             links: [
-                { id: 'machines', label: 'Machines', icon: _jsx(Cpu, { size: 16 }), onPress: to(path({ kind: 'settings', section: 'machines' })), active: section === 'machines' },
-                { id: 'environments', label: 'Environments', icon: _jsx(Container, { size: 16 }), onPress: to(path({ kind: 'settings', section: 'environments' })), active: section === 'environments' },
+                { id: 'machines', label: t('Machines'), icon: _jsx(Cpu, { size: 16 }), onPress: to(path({ kind: 'settings', section: 'machines' })), active: section === 'machines' },
+                { id: 'environments', label: t('Environments'), icon: _jsx(Container, { size: 16 }), onPress: to(path({ kind: 'settings', section: 'environments' })), active: section === 'environments' },
             ],
         },
         {
             id: 'setup',
-            label: 'Setup',
+            label: t('Setup'),
             links: [
-                { id: 'customize', label: 'Customize', icon: _jsx(SlidersHorizontal, { size: 16 }), onPress: to(path({ kind: 'customize', tab: 'agents' })), active: r.kind === 'customize' || r.kind === 'agent' || screen === 'mcp' },
-                { id: 'docs', label: 'Docs', icon: _jsx(BookOpen, { size: 16 }), onPress: () => window.open(DOCS, '_blank', 'noopener,noreferrer') },
+                { id: 'customize', label: t('Customize'), icon: _jsx(SlidersHorizontal, { size: 16 }), onPress: to(path({ kind: 'customize', tab: 'agents' })), active: r.kind === 'customize' || r.kind === 'agent' || screen === 'mcp' },
+                { id: 'docs', label: t('Docs'), icon: _jsx(BookOpen, { size: 16 }), onPress: () => window.open(DOCS, '_blank', 'noopener,noreferrer') },
             ],
         },
     ];
 }
 /** Dev's own places: what a host whose rail holds the rest (Library, Scheduled tasks, Customize) lists in Dev's sidebar. */
-export const own = (host, go) => nav(host, go).filter((g) => g.id === 'work');
+export const own = (host, go, t = english) => nav(host, go, t).filter((g) => g.id === 'work');
 /**
  * Settings' sections as a host's sidebar lists them: one group per part, a
  * part's label drawn only where it is not its first row's name (Code leads
  * Code's part, so the part is not labelled twice).
  */
-export function sections(host, go) {
+export function sections(host, go, t = english) {
     const r = route(host.path);
     const at = r.kind === 'settings' ? r.section : '';
     return GROUPS.map((g) => {
         const rows = LIST.filter((e) => e.group === g);
         return {
             id: g,
-            label: heading(g),
-            links: rows.map((e) => ({ id: e.id, label: e.label, icon: SECTION_ICON[e.id], onPress: () => go(path({ kind: 'settings', section: e.id })), active: e.id === at })),
+            label: t(heading(g)),
+            links: rows.map((e) => ({ id: e.id, label: t(e.label), icon: SECTION_ICON[e.id], onPress: () => go(path({ kind: 'settings', section: e.id })), active: e.id === at })),
         };
     });
 }
 /** Customize's tabs as a host's sidebar lists them, Agents first; an agent's profile lights Agents. */
-export function tabs(host, go) {
+export function tabs(host, go, t = english) {
     const r = route(host.path);
     const at = r.kind === 'customize' ? r.tab : r.kind === 'agent' ? 'agents' : '';
-    return [{ id: 'customize', label: '', links: TABS.map((t) => ({ id: t, label: TAB_LABEL[t], icon: TAB_ICON[t], onPress: () => go(path({ kind: 'customize', tab: t })), active: t === at })) }];
+    return [{ id: 'customize', label: '', links: TABS.map((tab) => ({ id: tab, label: t(TAB_LABEL[tab]), icon: TAB_ICON[tab], onPress: () => go(path({ kind: 'customize', tab })), active: tab === at })) }];
 }
-const TAB_LABEL = { agents: 'Agents', skills: 'Skills', connectors: 'Connectors', plugins: 'Plugins' };
+const TAB_LABEL = { agents: phrase('Agents'), skills: phrase('Skills'), connectors: phrase('Connectors'), plugins: phrase('Plugins') };
 const TAB_ICON = { agents: _jsx(Bot, { size: 16 }), skills: _jsx(BookOpen, { size: 16 }), connectors: _jsx(Plug, { size: 16 }), plugins: _jsx(Puzzle, { size: 16 }) };
 const SECTION_ICON = {
     general: _jsx(Settings, { size: 16 }),
@@ -135,7 +141,7 @@ const KIND_ICON = {
 /** Fired on `window` once the sidebar's Upload has kept its files, for the Library to read again. */
 export const KEPT = 'hanzo:library:kept';
 /** Asks for files and keeps each in the Library; a refusal is said in the page's own words. */
-function keep(host) {
+function keep(host, say) {
     const input = document.createElement('input');
     input.type = 'file';
     input.multiple = true;
@@ -146,7 +152,7 @@ function keep(host) {
                 await upload(t, { name: f.name, type: f.type, bytes: new Uint8Array(await f.arrayBuffer()) }, { source: 'chat' });
             }
             catch (e) {
-                window.alert(e instanceof Error ? e.message : `${f.name} was not kept`);
+                window.alert(e instanceof Error ? e.message : say('{file} was not kept', { file: f.name }));
             }
         }
         window.dispatchEvent(new Event(KEPT));
@@ -154,17 +160,17 @@ function keep(host) {
     input.click();
 }
 /** The Library's sidebar: Upload, then every kind it narrows to, the one in the address lit. */
-export function library(host, go) {
+export function library(host, go, t = english) {
     const r = route(host.path);
     const at = r.kind === 'screen' && r.screen === 'artifacts' ? (r.of ?? '') : null;
     return [
-        { id: 'library-do', label: '', links: [{ id: 'upload', label: 'Upload', icon: _jsx(Upload, { size: 16 }), onPress: () => keep(host) }] },
+        { id: 'library-do', label: '', links: [{ id: 'upload', label: t('Upload'), icon: _jsx(Upload, { size: 16 }), onPress: () => keep(host, t) }] },
         {
             id: 'library-kinds',
             label: '',
             links: KINDS.map((k) => ({
                 id: `kind-${k.id || 'all'}`,
-                label: k.label,
+                label: t(k.label),
                 icon: KIND_ICON[k.id],
                 onPress: () => go(path({ kind: 'screen', screen: 'artifacts', ...(k.id ? { of: k.id } : {}) })),
                 active: at === k.id,
@@ -174,6 +180,7 @@ export function library(host, go) {
 }
 /** Scheduled tasks' sidebar: New task, then each of the person's tasks, the one open lit. Read only while `on`. */
 export function useScheduled(host, go, on) {
+    const { t: say } = useI18n();
     const t = useMemo(() => ({ api: host.api, token: host.token, org: host.org }), [host.api, host.token, host.org]);
     const list = useRead(on && host.person ? () => automations(t) : null, [], [t, on, host.path]);
     const r = route(host.path);
@@ -182,12 +189,12 @@ export function useScheduled(host, go, on) {
         {
             id: 'scheduled-do',
             label: '',
-            links: [{ id: 'new-task', label: 'New task', icon: _jsx(Plus, { size: 16 }), onPress: () => go(path({ kind: 'automation', id: 'new' })), active: at === 'new' }],
+            links: [{ id: 'new-task', label: say('New task'), icon: _jsx(Plus, { size: 16 }), onPress: () => go(path({ kind: 'automation', id: 'new' })), active: at === 'new' }],
         },
         {
             id: 'scheduled-tasks',
-            label: list.value.length ? 'Tasks' : '',
-            links: list.value.map((a) => ({ id: a.id, label: a.name || 'Untitled task', icon: _jsx(Clock, { size: 16 }), onPress: () => go(path({ kind: 'automation', id: a.id })), active: at === a.id })),
+            label: list.value.length ? say('Tasks') : '',
+            links: list.value.map((a) => ({ id: a.id, label: a.name || say('Untitled task'), icon: _jsx(Clock, { size: 16 }), onPress: () => go(path({ kind: 'automation', id: a.id })), active: at === a.id })),
         },
     ];
 }

package/lib/panel.d.ts

@@ -20,7 +20,8 @@ export interface Suggestion {
 /**
  * The header's control for the tabs, while they are hidden: an icon among the
  * header's icons. Open, the strip's own toggle stands at the panel's end and
- * this one is not drawn, so the page carries one toggle at a time.
+ * this one is not drawn, so the page carries one toggle at a time. Its words
+ * are the reader's language; the key chord is an argument, as this platform writes it.
  */
 export declare function PanelToggle({ open, onToggle }: {
     open: boolean;