@hanzo/build 0.2.80 → 0.2.81

package/lib/project.js

@@ -37,8 +37,13 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  *
  * Derived from the Hanzo App v2 editor (github.com/hanzoai/build-v2), itself
  * derived from OSW Studio and DeepSite (MIT). See NOTICE.
+ *
+ * Its words are the reader's language (@hanzo/i18n `t`, the target is
+ * `target`); a project's and a run's names, branches, paths and the
+ * platform's reasons are drawn as given.
  */
 import { SizableText, useMedia, XStack, YStack } from '@hanzo/gui';
+import { useI18n } from '@hanzo/i18n/react';
 import { Clock, ExternalLink, MousePointerClick, PanelLeft, RefreshCcw, Share2, Upload, } from '@hanzogui/lucide-icons-2';
 import { Attachments, CHAT, Console, DEVICES, Feedback, FileTabs, FileTree, PageSelect, PreviewFrame, ProjectChip, VIEWS, Views, Workspace, fold, } from '@hanzo/ui/agents';
 import { Message } from '@hanzo/ui/chat';
@@ -95,25 +100,27 @@ export function slugOf(name) {
 }
 /** One run in the conversation: what was asked, and what it came to. */
 function Turn({ run, open, onOpen, project }) {
-    const t = useTarget();
+    const target = useTarget();
+    const { t } = useI18n();
     const [v, setV] = useState(null);
     const [note, setNote] = useState('');
-    return (_jsxs(YStack, { gap: "$2", children: [_jsx(Message, { role: "user", children: _jsx(SizableText, { size: "$2", color: "$ink", children: run.title || 'Untitled run' }) }), _jsx(Message, { role: "assistant", busy: LIVE.has(run.status), actions: _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Feedback, { text: run.title, verdict: v, onVerdict: (next) => {
+    return (_jsxs(YStack, { gap: "$2", children: [_jsx(Message, { role: "user", children: _jsx(SizableText, { size: "$2", color: "$ink", children: run.title || t('Untitled run') }) }), _jsx(Message, { role: "assistant", busy: LIVE.has(run.status), actions: _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Feedback, { text: run.title, verdict: v, onVerdict: (next) => {
                                 setV(next);
-                                record(t, run.id, project, next).catch((e) => {
+                                record(target, run.id, project, next).catch((e) => {
                                     setV(null);
                                     setNote(e.message);
                                 });
-                            } }), note ? (_jsx(SizableText, { size: "$1", color: "$soft", children: note })) : null, !open ? (_jsx(XStack, { render: "button", onPress: onOpen, hitSlop: 8, children: _jsx(SizableText, { size: "$1", color: "$soft", textDecorationLine: "underline", children: "Show steps" }) })) : null] }), children: _jsx(SizableText, { size: "$2", color: "$ink", children: run.status === 'done' ? 'Done.' : run.status === 'error' ? 'This run hit an error.' : run.status === 'stopped' ? 'Stopped.' : 'Working…' }) })] }));
+                            } }), note ? (_jsx(SizableText, { size: "$1", color: "$soft", children: note })) : null, !open ? (_jsx(XStack, { render: "button", onPress: onOpen, hitSlop: 8, children: _jsx(SizableText, { size: "$1", color: "$soft", textDecorationLine: "underline", children: t('Show steps') }) })) : null] }), children: _jsx(SizableText, { size: "$2", color: "$ink", children: run.status === 'done' ? t('Done.') : run.status === 'error' ? t('This run hit an error.') : run.status === 'stopped' ? t('Stopped.') : t('Working…') }) })] }));
 }
 export function Project({ at }) {
     const host = useHost();
-    const t = useTarget();
+    const target = useTarget();
+    const { t } = useI18n();
     const signed = Boolean(host.person);
-    const all = useProjects(t, signed);
+    const all = useProjects(target, signed);
     // The repository the address names, and the forge's record of it.
     const named = 'slug' in at ? null : at;
-    const forge = useRead(named && signed ? () => one(t, named.name) : null, null, [t, signed, named?.name]);
+    const forge = useRead(named && signed ? () => one(target, named.name) : null, null, [target, signed, named?.name]);
     const project = all.value.find((p) => (named ? siteOf(p, named) : 'slug' in at && p.slug === at.slug)) ?? null;
     // The site this workspace publishes to: the project's, or the repository's name as one.
     const slug = project?.slug ?? ('slug' in at ? at.slug : slugOf(named?.name ?? ''));
@@ -135,7 +142,7 @@ export function Project({ at }) {
         return () => clearInterval(every);
     }, [building, again]);
     // When the build began, and why it failed, are its latest deployment's to say.
-    const failure = useRead(building || failed ? () => deployments(t, slug) : null, [], [t, slug, building, failed, project?.updated]);
+    const failure = useRead(building || failed ? () => deployments(target, slug) : null, [], [target, slug, building, failed, project?.updated]);
     const latest = failure.value[0];
     const began = latest?.status === 'building' ? latest.created : 0;
     const ran = began ? Math.max(0, Math.floor(now / 1000) - began) : 0;
@@ -150,7 +157,7 @@ export function Project({ at }) {
             return;
         setRedo({ busy: true, error: '' });
         try {
-            await declare(t, { repo: clone, ref: home, name: slug, project: slug, mode: 'branch' });
+            await declare(target, { repo: clone, ref: home, name: slug, project: slug, mode: 'branch' });
             setNow(Date.now());
             again();
             setRedo({ busy: false, error: '' });
@@ -161,7 +168,7 @@ export function Project({ at }) {
     };
     // The site's runs, or the org's when the repository has no site yet.
     const sited = !named || Boolean(project);
-    const listed = useRead(signed ? () => list(t, sited ? { kind: 'coding', project: slug, limit: 50 } : { kind: 'coding', limit: 50 }) : null, [], [t, signed, slug, sited]);
+    const listed = useRead(signed ? () => list(target, sited ? { kind: 'coding', project: slug, limit: 50 } : { kind: 'coding', limit: 50 }) : null, [], [target, signed, slug, sited]);
     // Only the runs on this project's own repository: a record can be moved into
     // any project, and a run's branch is what Files, Code and Publish read.
     const mine = (r) => (named ? ours(r.repo, `${named.org}/${named.name}`) && Boolean(r.repo) : ours(r.repo, project?.repo ?? ''));
@@ -169,7 +176,7 @@ export function Project({ at }) {
     const ordered = useMemo(() => [...runs.value].reverse(), [listed.value, project?.repo, named?.org, named?.name]);
     const [chosen, setChosen] = useState(null);
     const current = chosen ?? runs.value[0]?.id ?? null;
-    const run = useRun(t, current);
+    const run = useRun(target, current);
     const end = outcome(run.events);
     const pr = pull(run.record?.pr ?? '', run.record?.repo ?? '');
     const running = LIVE.has(run.status || end.status);
@@ -199,15 +206,15 @@ export function Project({ at }) {
     const [picked, setPicked] = useState([]);
     const [attached, setAttached] = useState([]);
     // The model and effort Chat and New share, and dictation into the ask.
-    const mind = useMind(t);
-    const voice = useVoice({ speech: useEar(t), language: useSpoken(), ...useDictation(draft, setDraft) });
+    const mind = useMind(target);
+    const voice = useVoice({ speech: useEar(target), language: useSpoken(), ...useDictation(draft, setDraft) });
     const [bridge, setBridge] = useState(false);
     const [editing, setEditing] = useState(false);
     const [pageLines, setPageLines] = useState([]);
     const [history, setHistory] = useState(false);
     const [publish, setPublish] = useState(null);
     const [switcher, setSwitcher] = useState(false);
-    const repos = useRead(switcher && signed ? () => codebases(t) : null, [], [t, switcher, signed]);
+    const repos = useRead(switcher && signed ? () => codebases(target) : null, [], [target, switcher, signed]);
     const frame = useRef(null);
     // What was published may be new files at the same address: the project is read
     // for its address, and the frame loads again.
@@ -235,7 +242,7 @@ export function Project({ at }) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [current, run.record, end.published]);
     // Where the open run's pull request stands on the forge: Merge is offered while it is open.
-    const proposal = useRead(signed && current && pr.href ? () => pushed(t, current).then((c) => ({ run: current, pull: c.pull })) : null, null, [t, signed, current, pr.href]);
+    const proposal = useRead(signed && current && pr.href ? () => pushed(target, current).then((c) => ({ run: current, pull: c.pull })) : null, null, [target, signed, current, pr.href]);
     const proposing = proposal.value?.run === current && proposal.value.pull?.state === 'open';
     // Files is drawn again after a merge, from what the forge holds now.
     const [round, setRound] = useState(0);
@@ -255,9 +262,9 @@ export function Project({ at }) {
             return;
         setFiles((was) => [...was, { path, readOnly: true }]);
         try {
-            const b = await blob(t, repo, ref, path);
+            const b = await blob(target, repo, ref, path);
             const content = b.binary ? '' : b.truncated ? '' : b.text;
-            const error = b.binary ? 'A binary file — nothing to show as text.' : b.truncated ? 'Past the 1 MiB view cap — clone the repository to read it.' : undefined;
+            const error = b.binary ? t('A binary file — nothing to show as text.') : b.truncated ? t('Past the 1 MiB view cap — clone the repository to read it.') : undefined;
             setFiles((was) => was.map((f) => (f.path === path ? { ...f, content, error } : f)));
         }
         catch (e) {
@@ -265,21 +272,21 @@ export function Project({ at }) {
         }
     };
     // Pages: the HTML files at the repository's root, as the page picker's list.
-    const root = useRead(repo ? () => tree(t, repo, ref, '') : null, [], [t, repo, ref]);
+    const root = useRead(repo ? () => tree(target, repo, ref, '') : null, [], [target, repo, ref]);
     const pages = useMemo(() => [
-        { id: '/', label: 'Homepage' },
+        { id: '/', label: t('Homepage') },
         ...root.value
             .filter((e) => !e.dir && /\.html?$/i.test(e.name) && !/^index\.html?$/i.test(e.name))
             .map((e) => ({ id: `/${e.path}`, label: e.name.replace(/\.html?$/i, '') })),
-    ], [root.value]);
+    ], [root.value, t]);
     // A project taken from a starter, not published and not being, shows the
     // starter's own live page, which is what the copy is until its first publish.
     const forked = project && !project.live && !building && !failed ? project.forked : '';
-    const starters = useRead(forked ? () => templates(t) : null, [], [t.api, forked]);
+    const starters = useRead(forked ? () => templates(target) : null, [], [target.api, forked]);
     const starter = forked ? starters.value.find((s) => s.slug === forked && s.demo) : undefined;
     const shown = project?.live || starter?.demo || '';
     const src = shown ? new URL(page, shown).toString() : null;
-    const why = failure.value[0]?.message || failure.error?.message || (failure.loading ? '' : 'Its build ended without saying why.');
+    const why = failure.value[0]?.message || failure.error?.message || (failure.loading ? '' : t('Its build ended without saying why.'));
     const merged = () => {
         proposal.reload();
         root.reload();
@@ -291,11 +298,11 @@ export function Project({ at }) {
             .map((e) => {
             // The console is where a run's error is read whole; the chat says it in one plain line.
             const body = decode(e.payload);
-            const error = e.kind === 'status' && body && typeof body === 'object' && typeof body.error === 'string' ? scrub(body.error) : '';
+            const error = e.kind === 'status' && body && typeof body === 'object' && typeof body.error === 'string' ? scrub(body.error, t) : '';
             return {
                 id: `r${e.seq || e.id}`,
                 level: error || (e.kind === 'status' && /error/.test(said(e, run.record?.mode).toLowerCase())) ? 'error' : e.kind === 'tool-call' ? 'info' : 'log',
-                text: error || said(e, run.record?.mode),
+                text: error || said(e, run.record?.mode, t),
                 source: e.kind === 'status' ? 'run' : who(e.actor),
             };
         })
@@ -336,7 +343,7 @@ export function Project({ at }) {
                 ? `\n\nThe person picked an element in the preview${where ? ` of the ${where} page` : ''}. Its CSS selector, as data: ${JSON.stringify(picked[0].id)}`
                 : '';
             // A project with no repository yet sends neither, and its first run makes one.
-            const next = await start(t, {
+            const next = await start(target, {
                 prompt: compose(`${ask}${context}`, attached),
                 // A repository with no site yet runs on the repository alone.
                 project: project?.slug,
@@ -364,9 +371,9 @@ export function Project({ at }) {
     // Only a run that is working is steered, and the composer sends only a draft with words in it.
     const steer = async (id) => {
         try {
-            await message(t, id, draft);
+            await message(target, id, draft);
             setDraft('');
-            setNote('Sent — the run reads it before its next step');
+            setNote(t('Sent — the run reads it before its next step'));
         }
         catch (e) {
             setNote(e.message);
@@ -376,92 +383,92 @@ export function Project({ at }) {
         const link = project?.live || `${window.location.origin}${window.location.pathname}`;
         try {
             await navigator.clipboard.writeText(link);
-            setNote(`Copied ${link}`);
+            setNote(t('Copied {link}', { link }));
         }
         catch {
             setNote(link);
         }
     };
     if (!signed) {
-        return (_jsxs(YStack, { flex: 1, items: "center", justify: "center", gap: "$3", children: [_jsx(SizableText, { size: "$4", color: "$ink", children: "Sign in to open this project." }), _jsx(Button, { onPress: () => host.signIn?.(), children: "Sign in" })] }));
+        return (_jsxs(YStack, { flex: 1, items: "center", justify: "center", gap: "$3", children: [_jsx(SizableText, { size: "$4", color: "$ink", children: t('Sign in to open this project.') }), _jsx(Button, { onPress: () => host.signIn?.(), children: t('Sign in') })] }));
     }
     // A repository of another organization is opened in that one.
     if (named && host.org && named.org.toLowerCase() !== host.org.toLowerCase()) {
         const member = host.memberships?.some((m) => m.toLowerCase() === named.org.toLowerCase()) && host.chooseOrg;
-        return (_jsxs(YStack, { flex: 1, items: "center", justify: "center", gap: "$3", px: "$4", children: [_jsx(SizableText, { size: "$4", color: "$ink", text: "center", children: `${named.org}/${named.name} is in ${named.org}, and you are working in ${host.org}.` }), member ? (_jsx(Button, { variant: "outline", onPress: () => host.chooseOrg?.(named.org), children: `Switch to ${named.org}` })) : (_jsx(Button, { variant: "outline", onPress: () => host.go(path({ kind: 'screen', screen: 'projects' })), children: "See this organization\u2019s projects" }))] }));
+        return (_jsxs(YStack, { flex: 1, items: "center", justify: "center", gap: "$3", px: "$4", children: [_jsx(SizableText, { size: "$4", color: "$ink", text: "center", children: t('{repo} is in {org}, and you are working in {current}.', { repo: `${named.org}/${named.name}`, org: named.org, current: host.org }) }), member ? (_jsx(Button, { variant: "outline", onPress: () => host.chooseOrg?.(named.org), children: t('Switch to {org}', { org: named.org }) })) : (_jsx(Button, { variant: "outline", onPress: () => host.go(path({ kind: 'screen', screen: 'projects' })), children: t('See this organization’s projects') }))] }));
     }
     if (named ? !forge.loading && !forge.value : !all.loading && !project && !all.error) {
         return (_jsxs(YStack, { flex: 1, items: "center", justify: "center", gap: "$3", px: "$4", children: [_jsx(SizableText, { size: "$4", color: "$ink", text: "center", children: named
                         ? forge.error && !/not found|404/i.test(forge.error.message)
                             ? forge.error.message
-                            : `${named.org} has no repository named ${named.name}.`
+                            : t('{org} has no repository named {name}.', { org: named.org, name: named.name })
                         : host.org
-                            ? `${host.org} has no project named ${slug}.`
-                            : `There is no project named ${slug}.` }), _jsx(Button, { variant: "outline", onPress: () => host.go(path({ kind: 'screen', screen: named ? 'projects' : 'artifacts' })), children: named ? 'See this organization’s projects' : 'See what this organization has built' })] }));
+                            ? t('{org} has no project named {name}.', { org: host.org, name: slug })
+                            : t('There is no project named {name}.', { name: slug }) }), _jsx(Button, { variant: "outline", onPress: () => host.go(path({ kind: 'screen', screen: named ? 'projects' : 'artifacts' })), children: named ? t('See this organization’s projects') : t('See what this organization has built') })] }));
     }
     const chat = (_jsxs(YStack, { "data-slot": "project-chat", flex: 1, minH: 0, position: "relative", children: [_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$3", pt: "$2", pb: "$4", gap: "$4", $md: { pr: 0 }, children: ordered.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$ink", children: runs.loading
-                        ? 'Reading this project’s runs…'
+                        ? t('Reading this project’s runs…')
                         : project?.live
-                            ? `${project.name} is loaded — it is in the preview, and every run on it is under the clock above. Say what to change and it gets built.`
+                            ? t('{name} is loaded — it is in the preview, and every run on it is under the clock above. Say what to change and it gets built.', { name: project.name })
                             : stalled
-                                ? `${project?.name} has been publishing for ${Math.floor(ran / 60)} minutes without finishing. Publish it again from the preview, or say what to change and it gets built.`
+                                ? t('{name} has been publishing for {minutes} minutes without finishing. Publish it again from the preview, or say what to change and it gets built.', { name: project?.name ?? '', minutes: Math.floor(ran / 60) })
                                 : failed
-                                    ? `${project?.name} could not be published. Publish it again from the preview, or say what to change and it gets built.`
+                                    ? t('{name} could not be published. Publish it again from the preview, or say what to change and it gets built.', { name: project?.name ?? '' })
                                     : building
-                                        ? `${project?.name} is being published — it appears in the preview when its build finishes. Say what to change and it gets built.`
+                                        ? t('{name} is being published — it appears in the preview when its build finishes. Say what to change and it gets built.', { name: project?.name ?? '' })
                                         : starter
-                                            ? `${project?.name} is loaded — the preview shows the ${starter.title} starter until your copy is published. Say what to change and it gets built.`
+                                            ? t('{name} is loaded — the preview shows the {starter} starter until your copy is published. Say what to change and it gets built.', { name: project?.name ?? '', starter: starter.title })
                                             : project
-                                                ? `${project.name} is loaded and nothing is published yet. Say what to change and it gets built.`
+                                                ? t('{name} is loaded and nothing is published yet. Say what to change and it gets built.', { name: project.name })
                                                 : named
-                                                    ? `${named.org}/${named.name} is open on ${home}. Say what to change and it gets built there.`
-                                                    : `${slug} is loaded. Say what to change and it gets built.` })) : (ordered.map((r) => (_jsxs(YStack, { gap: "$2", children: [_jsx(Turn, { run: r, open: r.id === current, onOpen: () => setChosen(r.id), project: slug }), r.id === current ? (_jsxs(YStack, { gap: "$1", pl: "$2", borderLeftWidth: 1, borderColor: "$borderColor", children: [fold(run.events.map((e) => ({ kind: e.kind, actor: who(e.actor), seq: e.seq, id: e.id, text: said(e, run.record?.mode) })).filter((b) => b.text)).map((b) => (_jsx(SizableText, { size: "$1", color: "$soft", children: b.text }, b.key))), pr.href ? (_jsxs(XStack, { items: "center", gap: "$2", flexWrap: "wrap", children: [_jsxs(Out, { href: pr.href, label: `Open pull request ${pr.label}`, children: [_jsxs(SizableText, { size: "$1", color: "$ink", textDecorationLine: "underline", children: ["Pull request ", pr.label] }), _jsx(ExternalLink, { size: 11 })] }), _jsx(Merge, { session: r.id, open: proposing, onMerged: merged })] })) : null] })) : null] }, r.id)))) }), _jsxs(YStack, { "data-slot": "project-ask", px: "$3", pb: "$3", gap: "$2", minW: 0, $md: { pr: 0 }, children: [note ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note })) : null, picked.length ? _jsx(Attachments, { items: picked, onRemove: () => setPicked([]) }) : null, attached.length ? (_jsx(XStack, { gap: 6, flexWrap: "wrap", children: _jsx(Files, { files: attached, onFiles: setAttached }) })) : null, _jsx(Prompt, { framed: true, value: draft, onChange: setDraft, onSend: () => void (current && running ? steer(current) : send()), onStop: current
-                            ? () => void stop(t, current).then(() => setNote('Stop requested — the run keeps its work on its branch'), (e) => setNote(e.message))
-                            : undefined, busy: busy || (running && !draft.trim()), placeholder: running ? 'Steer this run' : 'Ask Hanzo for edits', label: "Ask Hanzo for edits", plus: { upload: () => pick(attached, setAttached, setNote) }, mode: running ? null : { value: mode === 'plan' ? 'plan' : 'auto', set: (m) => setMode(m === 'plan' ? 'plan' : 'build'), items: ['auto', 'plan'] }, mind: running ? null : mind, voice: voice })] }), wide && !shut ? (_jsx(Gutter, { side: "left", span: across, floor: CHAT_FLOOR, ceil: most, reset: CHAT_WIDTH, onSpan: setSplit, label: "Resize the chat", gap: GUTTER })) : null] }));
+                                                    ? t('{repo} is open on {branch}. Say what to change and it gets built there.', { repo: `${named.org}/${named.name}`, branch: home })
+                                                    : t('{name} is loaded. Say what to change and it gets built.', { name: slug }) })) : (ordered.map((r) => (_jsxs(YStack, { gap: "$2", children: [_jsx(Turn, { run: r, open: r.id === current, onOpen: () => setChosen(r.id), project: slug }), r.id === current ? (_jsxs(YStack, { gap: "$1", paddingInlineStart: "$2", borderInlineStartWidth: 1, borderColor: "$borderColor", children: [fold(run.events.map((e) => ({ kind: e.kind, actor: who(e.actor), seq: e.seq, id: e.id, text: said(e, run.record?.mode, t) })).filter((b) => b.text)).map((b) => (_jsx(SizableText, { size: "$1", color: "$soft", children: b.text }, b.key))), pr.href ? (_jsxs(XStack, { items: "center", gap: "$2", flexWrap: "wrap", children: [_jsxs(Out, { href: pr.href, label: t('Open pull request {pr}', { pr: pr.label }), children: [_jsx(SizableText, { size: "$1", color: "$ink", textDecorationLine: "underline", children: t('Pull request {pr}', { pr: pr.label }) }), _jsx(ExternalLink, { size: 11 })] }), _jsx(Merge, { session: r.id, open: proposing, onMerged: merged })] })) : null] })) : null] }, r.id)))) }), _jsxs(YStack, { "data-slot": "project-ask", px: "$3", pb: "$3", gap: "$2", minW: 0, $md: { pr: 0 }, children: [note ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note })) : null, picked.length ? _jsx(Attachments, { items: picked, onRemove: () => setPicked([]) }) : null, attached.length ? (_jsx(XStack, { gap: 6, flexWrap: "wrap", children: _jsx(Files, { files: attached, onFiles: setAttached }) })) : null, _jsx(Prompt, { framed: true, value: draft, onChange: setDraft, onSend: () => void (current && running ? steer(current) : send()), onStop: current
+                            ? () => void stop(target, current).then(() => setNote(t('Stop requested — the run keeps its work on its branch')), (e) => setNote(e.message))
+                            : undefined, busy: busy || (running && !draft.trim()), placeholder: running ? t('Steer this run') : t('Ask Hanzo for edits'), label: t('Ask Hanzo for edits'), plus: { upload: () => pick(attached, setAttached, setNote, t) }, mode: running ? null : { value: mode === 'plan' ? 'plan' : 'auto', set: (m) => setMode(m === 'plan' ? 'plan' : 'build'), items: ['auto', 'plan'] }, mind: running ? null : mind, voice: voice })] }), wide && !shut ? (_jsx(Gutter, { side: "left", span: across, floor: CHAT_FLOOR, ceil: most, reset: CHAT_WIDTH, onSpan: setSplit, label: t('Resize the chat'), gap: GUTTER })) : null] }));
     // The preview stays loaded while another view is open, so coming back to it
     // is the page as it was left.
-    const preview = (_jsxs(YStack, { "data-slot": "preview", flex: 1, minH: 0, minW: 0, gap: "$2", display: view === 'preview' ? 'flex' : 'none', children: [_jsxs(XStack, { "data-slot": "preview-bar", items: "center", gap: "$1.5", minW: 0, shrink: 0, "$max-md": { px: '$2' }, children: [_jsx(XStack, { render: "button", "aria-label": "Reload the preview", onPress: () => frame.current?.reload(), p: "$1.5", rounded: "$3", hoverStyle: { bg: '$hover' }, children: _jsx(RefreshCcw, { size: 16 }) }), _jsx(PageSelect, { pages: pages, value: page, onChange: setPage, shrink: 1 }), _jsx(XStack, { flex: 1 }), _jsx(Views, { views: DEVICES, value: device, onChange: (d) => setDevice(d), label: "Device", labels: "none" }), src ? (_jsx(Out, { href: src, label: "Open in a new tab", children: _jsx(XStack, { p: "$1.5", rounded: "$3", hoverStyle: { bg: '$hover' }, children: _jsx(ExternalLink, { size: 16 }) }) })) : null] }), _jsx(PreviewFrame, { ref: frame, src: src, title: `${title} preview`, device: device, onBridge: onBridge, empty: _jsxs(YStack, { items: "center", gap: "$2", p: "$6", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: stalled
-                                ? 'Publishing is taking too long'
+    const preview = (_jsxs(YStack, { "data-slot": "preview", flex: 1, minH: 0, minW: 0, gap: "$2", display: view === 'preview' ? 'flex' : 'none', children: [_jsxs(XStack, { "data-slot": "preview-bar", items: "center", gap: "$1.5", minW: 0, shrink: 0, "$max-md": { px: '$2' }, children: [_jsx(XStack, { render: "button", "aria-label": t('Reload the preview'), onPress: () => frame.current?.reload(), p: "$1.5", rounded: "$3", hoverStyle: { bg: '$hover' }, children: _jsx(RefreshCcw, { size: 16 }) }), _jsx(PageSelect, { pages: pages, value: page, onChange: setPage, shrink: 1 }), _jsx(XStack, { flex: 1 }), _jsx(Views, { views: DEVICES, value: device, onChange: (d) => setDevice(d), label: t('Device'), labels: "none" }), src ? (_jsx(Out, { href: src, label: t('Open in a new tab'), children: _jsx(XStack, { p: "$1.5", rounded: "$3", hoverStyle: { bg: '$hover' }, children: _jsx(ExternalLink, { size: 16 }) }) })) : null] }), _jsx(PreviewFrame, { ref: frame, src: src, title: t('{title} preview', { title }), device: device, onBridge: onBridge, empty: _jsxs(YStack, { items: "center", gap: "$2", p: "$6", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: stalled
+                                ? t('Publishing is taking too long')
                                 : building
                                     ? project?.forked
-                                        ? 'Publishing your copy…'
-                                        : 'Publishing…'
+                                        ? t('Publishing your copy…')
+                                        : t('Publishing…')
                                     : failed
-                                        ? 'Publishing failed'
-                                        : 'Nothing deployed yet' }), _jsx(SizableText, { size: "$2", color: "$soft", text: "center", children: stalled
-                                ? `Its build started ${Math.floor(ran / 60)} minutes ago and has not finished.`
+                                        ? t('Publishing failed')
+                                        : t('Nothing deployed yet') }), _jsx(SizableText, { size: "$2", color: "$soft", text: "center", children: stalled
+                                ? t('Its build started {minutes} minutes ago and has not finished.', { minutes: Math.floor(ran / 60) })
                                 : building
-                                    ? 'Its page appears here when the build finishes.'
+                                    ? t('Its page appears here when the build finishes.')
                                     : failed
                                         ? why
-                                        : 'Publish this project and its page appears here.' }), (stalled || failed) && clone ? (_jsx(Button, { variant: "outline", disabled: redo.busy, onPress: () => void retry(), children: "Publish again" })) : null, redo.error ? (_jsx(SizableText, { size: "$2", color: "$soft", text: "center", role: "alert", children: redo.error })) : null] }), toolbar: bridge ? (_jsx(XStack, { render: "button", "aria-pressed": editing, "aria-label": editing ? 'Stop picking elements' : 'Pick an element to edit', onPress: () => {
+                                        : t('Publish this project and its page appears here.') }), (stalled || failed) && clone ? (_jsx(Button, { variant: "outline", disabled: redo.busy, onPress: () => void retry(), children: t('Publish again') })) : null, redo.error ? (_jsx(SizableText, { size: "$2", color: "$soft", text: "center", role: "alert", children: redo.error })) : null] }), toolbar: bridge ? (_jsx(XStack, { render: "button", "aria-pressed": editing, "aria-label": editing ? t('Stop picking elements') : t('Pick an element to edit'), onPress: () => {
                         const next = !editing;
                         setEditing(next);
                         frame.current?.post({ type: 'preview:editable', active: next });
                     }, p: "$2", rounded: "$10", children: _jsx(MousePointerClick, { size: 16 }) })) : undefined })] }));
-    const body = view === 'preview' ? null : view === 'files' ? (repo && root.error ? (_jsx(SizableText, { size: "$2", color: "$soft", p: "$4", role: "status", children: `Nothing to show for ${repo} at ${ref}: the forge answered “${root.error.message}”.` })) : repo ? (_jsx(FileTree, { load: async (dir) => (await tree(t, repo, ref, dir)).map((e) => ({ path: e.path, kind: e.dir ? 'dir' : 'file' })), value: file, onSelect: (p) => void openFile(p), label: `${repo} at ${ref}` }, round)) : (_jsx(SizableText, { size: "$2", color: "$soft", p: "$4", children: "This project has no repository yet. Its first run creates one." }))) : view === 'code' ? (_jsx(FileTabs, { files: files, value: file, onSelect: setFile, onClose: (p) => {
+    const body = view === 'preview' ? null : view === 'files' ? (repo && root.error ? (_jsx(SizableText, { size: "$2", color: "$soft", p: "$4", role: "status", children: t('Nothing to show for {repo} at {ref}: the forge answered “{reason}”.', { repo, ref, reason: root.error.message }) })) : repo ? (_jsx(FileTree, { load: async (dir) => (await tree(target, repo, ref, dir)).map((e) => ({ path: e.path, kind: e.dir ? 'dir' : 'file' })), value: file, onSelect: (p) => void openFile(p), label: t('{repo} at {ref}', { repo, ref }) }, round)) : (_jsx(SizableText, { size: "$2", color: "$soft", p: "$4", children: t('This project has no repository yet. Its first run creates one.') }))) : view === 'code' ? (_jsx(FileTabs, { files: files, value: file, onSelect: setFile, onClose: (p) => {
             setFiles((was) => was.filter((f) => f.path !== p));
             if (file === p)
                 setFile(null);
-        }, empty: _jsxs(SizableText, { size: "$2", color: "$soft", p: "$4", children: ["Open a file from Files. Code here is read at ", ref, "; ask in the chat to change it."] }) })) : (_jsx(YStack, { p: "$4", gap: "$2", children: picked.length ? (picked.map((p) => (_jsxs(SizableText, { size: "$2", color: "$ink", children: [p.label, " \u2014 ", p.id] }, p.id)))) : (_jsx(SizableText, { size: "$2", color: "$soft", children: bridge
-                ? 'Pick an element in the preview to see it here and attach it to your next ask.'
-                : 'Layers are read through the preview bridge, and this page does not run it. Its elements cannot be listed from here.' })) }));
-    return (_jsxs(_Fragment, { children: [_jsxs(Workspace, { start: _jsxs(XStack, { items: "center", gap: "$2", minW: 0, shrink: 1, children: [_jsx(XStack, { render: "button", "aria-label": "All runs", onPress: () => host.go(''), p: "$1", shrink: 0, children: _jsx(HanzoMark, { size: 20 }) }), _jsx(ProjectChip, { name: title, onPress: () => setSwitcher(true) }), _jsx(XStack, { render: "button", "aria-label": "History", onPress: () => setHistory(true), p: "$1.5", rounded: "$3", shrink: 0, hoverStyle: { bg: '$hover' }, children: _jsx(Clock, { size: 16 }) }), _jsx(XStack, { render: "button", "aria-label": shut ? 'Show the chat' : 'Hide the chat', "aria-pressed": !shut, onPress: () => (cramped ? setAsked(!asked) : setCollapsed(!collapsed)), p: "$1.5", rounded: "$3", shrink: 0, hoverStyle: { bg: '$hover' }, "$max-md": { display: 'none' }, children: _jsx(PanelLeft, { size: 16 }) })] }), middle: _jsx(Views, { views: [CHAT, ...VIEWS], value: pane === 'chat' && !wide ? 'chat' : view, onChange: (v) => {
+        }, empty: _jsx(SizableText, { size: "$2", color: "$soft", p: "$4", children: t('Open a file from Files. Code here is read at {ref}; ask in the chat to change it.', { ref }) }) })) : (_jsx(YStack, { p: "$4", gap: "$2", children: picked.length ? (picked.map((p) => (_jsxs(SizableText, { size: "$2", color: "$ink", children: [p.label, " \u2014 ", p.id] }, p.id)))) : (_jsx(SizableText, { size: "$2", color: "$soft", children: bridge
+                ? t('Pick an element in the preview to see it here and attach it to your next ask.')
+                : t('Layers are read through the preview bridge, and this page does not run it. Its elements cannot be listed from here.') })) }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Workspace, { start: _jsxs(XStack, { items: "center", gap: "$2", minW: 0, shrink: 1, children: [_jsx(XStack, { render: "button", "aria-label": t('All runs'), onPress: () => host.go(''), p: "$1", shrink: 0, children: _jsx(HanzoMark, { size: 20 }) }), _jsx(ProjectChip, { name: title, onPress: () => setSwitcher(true) }), _jsx(XStack, { render: "button", "aria-label": t('History'), onPress: () => setHistory(true), p: "$1.5", rounded: "$3", shrink: 0, hoverStyle: { bg: '$hover' }, children: _jsx(Clock, { size: 16 }) }), _jsx(XStack, { render: "button", "aria-label": shut ? t('Show the chat') : t('Hide the chat'), "aria-pressed": !shut, onPress: () => (cramped ? setAsked(!asked) : setCollapsed(!collapsed)), p: "$1.5", rounded: "$3", shrink: 0, hoverStyle: { bg: '$hover' }, "$max-md": { display: 'none' }, children: _jsx(PanelLeft, { size: 16 }) })] }), middle: _jsx(Views, { views: [CHAT, ...VIEWS], value: pane === 'chat' && !wide ? 'chat' : view, onChange: (v) => {
                         if (v === 'chat')
                             return setPane('chat');
                         setView(v);
                         setPane('view');
-                    }, label: "View" }), end: _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(XStack, { display: "none", $md: { display: 'flex' }, children: _jsxs(Button, { variant: "outline", size: "sm", onPress: () => void share(), children: [_jsx(Share2, { size: 14 }), " Share"] }) }), _jsxs(Button, { size: "sm", "aria-label": "Publish", disabled: !clone || !slug, onPress: () => setPublish({ repo: clone, title, ref, name: slug, project: slug }), children: [_jsx(Upload, { size: 14 }), _jsx(SizableText, { size: "$2", color: "inherit", "$max-md": { display: 'none' }, children: "Publish" })] })] }), chat: chat, dock: _jsx(Console, { lines: lines, height: dock, onHeight: setDock, onClear: () => setPageLines([]), status: run.status || end.status || undefined, label: "Console" }), collapsed: shut, pane: pane, width: across, onLayout: (e) => setRoom(e.nativeEvent.layout.width), children: [preview, body] }), _jsx(Dialog, { open: history, onOpenChange: setHistory, children: _jsxs(DialogContent, { maxW: 480, children: [_jsxs(DialogTitle, { children: ["Runs on ", title] }), _jsx(YStack, { gap: "$1", children: runs.value.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "No runs yet." })) : (runs.value.map((r) => (_jsxs(XStack, { render: "button", onPress: () => {
+                    }, label: t('View') }), end: _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(XStack, { display: "none", $md: { display: 'flex' }, children: _jsxs(Button, { variant: "outline", size: "sm", onPress: () => void share(), children: [_jsx(Share2, { size: 14 }), " ", t('Share')] }) }), _jsxs(Button, { size: "sm", "aria-label": t('Publish'), disabled: !clone || !slug, onPress: () => setPublish({ repo: clone, title, ref, name: slug, project: slug }), children: [_jsx(Upload, { size: 14 }), _jsx(SizableText, { size: "$2", color: "inherit", "$max-md": { display: 'none' }, children: t('Publish') })] })] }), chat: chat, dock: _jsx(Console, { lines: lines, height: dock, onHeight: setDock, onClear: () => setPageLines([]), status: run.status || end.status || undefined, label: t('Console') }), collapsed: shut, pane: pane, width: across, onLayout: (e) => setRoom(e.nativeEvent.layout.width), children: [preview, body] }), _jsx(Dialog, { open: history, onOpenChange: setHistory, children: _jsxs(DialogContent, { maxW: 480, children: [_jsx(DialogTitle, { children: t('Runs on {title}', { title }) }), _jsx(YStack, { gap: "$1", children: runs.value.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", children: t('No runs yet.') })) : (runs.value.map((r) => (_jsxs(XStack, { render: "button", onPress: () => {
                                     setChosen(r.id);
                                     setHistory(false);
-                                }, justify: "space-between", px: "$2", py: "$1.5", rounded: "$3", hoverStyle: { bg: '$hover' }, children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, flex: 1, children: r.title || 'Untitled run' }), _jsx(SizableText, { size: "$1", color: "$soft", children: r.status })] }, r.id)))) })] }) }), _jsx(Dialog, { open: switcher, onOpenChange: setSwitcher, children: _jsxs(DialogContent, { maxW: 420, children: [_jsx(DialogTitle, { children: "Projects" }), _jsx(YStack, { gap: "$1", maxH: 420, overflow: "scroll", children: repos.error ? (_jsx(SizableText, { size: "$2", color: "$soft", children: repos.error.message })) : repos.loading && repos.value.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "Reading the forge\u2026" })) : (repos.value.map((c) => {
+                                }, justify: "space-between", px: "$2", py: "$1.5", rounded: "$3", hoverStyle: { bg: '$hover' }, children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, flex: 1, children: r.title || t('Untitled run') }), _jsx(SizableText, { size: "$1", color: "$soft", children: r.status })] }, r.id)))) })] }) }), _jsx(Dialog, { open: switcher, onOpenChange: setSwitcher, children: _jsxs(DialogContent, { maxW: 420, children: [_jsx(DialogTitle, { children: t('Projects') }), _jsx(YStack, { gap: "$1", maxH: 420, overflow: "scroll", children: repos.error ? (_jsx(SizableText, { size: "$2", color: "$soft", children: repos.error.message })) : repos.loading && repos.value.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", children: t('Reading the forge…') })) : (repos.value.map((c) => {
                                 const here = Boolean(named) && c.name === named?.name;
-                                return (_jsx(XStack, { render: "button", "aria-label": `Open ${c.org}/${c.name}`, "aria-current": here ? 'page' : undefined, onPress: () => {
+                                return (_jsx(XStack, { render: "button", "aria-label": t('Open {repo}', { repo: `${c.org}/${c.name}` }), "aria-current": here ? 'page' : undefined, onPress: () => {
                                         setSwitcher(false);
                                         host.go(path({ kind: 'repo', org: c.org || host.org || '', name: c.name }));
                                     }, px: "$2", py: "$1.5", rounded: "$3", bg: here ? '$hover' : undefined, hoverStyle: { bg: '$hover' }, children: _jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: c.name }) }, `${c.org}/${c.name}`));
                             })) }), _jsx(Button, { variant: "outline", size: "sm", onPress: () => {
                                 setSwitcher(false);
                                 host.go(path({ kind: 'screen', screen: 'projects' }));
-                            }, children: "All projects" })] }) }), _jsx(Publish, { source: publish, onClose: () => setPublish(null), onLive: fresh })] }));
+                            }, children: t('All projects') })] }) }), _jsx(Publish, { source: publish, onClose: () => setPublish(null), onLive: fresh })] }));
 }

package/lib/prompt.d.ts

@@ -1,3 +1,4 @@
+import { type Say } from '@hanzo/i18n/react';
 import { type ComposerProps } from '@hanzo/ui/chat';
 import { type PauseSource } from '@hanzo/ui/models';
 import { type Machine, type Speech } from '@hanzo/voice';
@@ -19,7 +20,7 @@ export declare const measure: {
 /** The round controls' box, px, and a phone's, a finger's width. */
 export declare const ROUND = 32;
 /** What every Composer placeholder says, unless a surface names who is listening. */
-export declare const ASK = "Type / for skills";
+export declare const ASK: string;
 /**
  * The frame as a pane of its own, floating on the pane it is drawn in: the
  * `--pane-*` cut on design's first paper rung.
@@ -107,23 +108,23 @@ export declare function trigger(value: string): {
     query: string;
     at: number;
 } | null;
-/** @hanzo/ui `Composer` props for the one composer. */
-export declare function prompt(o: PromptOptions, state?: {
+/** What `useMention` hands `prompt`: the lit row of a `/` or `@` list, and the reader's `t`. */
+export interface Mentioned {
     index: number;
     closed: string | null;
-}): ComposerProps;
+    t?: Say;
+}
+/** @hanzo/ui `Composer` props for the one composer. */
+export declare function prompt(o: PromptOptions, state?: Mentioned): ComposerProps;
 /** Ctrl+U (⌘U) uploads, while a composer with an upload is on the page. */
 export declare function useUpload(upload: (() => void) | undefined): void;
 /**
- * The composer's own state — which row of a `/` or `@` list is lit — and the
- * keys that move it. A surface that hands `prompt` to `Chat` calls this and
- * passes its answer through; `<Prompt>` does it for itself.
+ * The composer's own state — which row of a `/` or `@` list is lit, and the
+ * reader's `t` — and the keys that move it. A surface that hands `prompt` to
+ * `Chat` calls this and passes its answer through; `<Prompt>` does it for itself.
  */
 export declare function useMention(o: PromptOptions): {
-    state: {
-        index: number;
-        closed: string | null;
-    };
+    state: Mentioned;
     field: ComposerProps['field'];
 };
 /** The composer drawn on its own. */