@hanzo/build 0.2.80 → 0.2.82

package/lib/shelf.js

@@ -3,12 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Two shelves: the sites this org has deployed (Sites, drawn at the foot of the
  * Library — library.tsx), and the public starters (Templates).
  *
- * A project is a real row — `/v1/projects`, the same one a deployed site is
+ * A project is a real row — `/v1/project`, the same one a deployed site is
  * served from — so opening one opens its workspace at its own address. A
- * starter is taken as a COPY of its own repository (`POST /v1/projects/fork`),
+ * starter is taken as a COPY of its own repository (`POST /v1/project/fork`),
  * so what opens is that template, not a model's imitation of it.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { useI18n } from '@hanzo/i18n/react';
 import { Boxes, ExternalLink, Globe, Lock, MoreHorizontal } from '@hanzogui/lucide-icons-2';
 import { Button, DropdownMenu } from '@hanzo/ui';
 import { useState } from 'react';
@@ -53,21 +54,21 @@ function useFork() {
 /** When a project was last edited, or made if it never was; Unix seconds. */
 const when = (p) => p.updated || p.created;
 /** The org's projects under the month each was last edited, newest first. */
-function months(list) {
+function months(list, say) {
     const out = new Map();
     for (const p of [...list].sort((a, b) => when(b) - when(a))) {
         const s = when(p);
-        const label = s ? new Date(s * 1000).toLocaleDateString(undefined, { month: 'long', year: 'numeric' }) : 'Earlier';
+        const label = s ? new Date(s * 1000).toLocaleDateString(undefined, { month: 'long', year: 'numeric' }) : say('Earlier');
         out.set(label, [...(out.get(label) ?? []), p]);
     }
     return [...out].map(([label, rows]) => ({ label, rows }));
 }
-function edited(s) {
+function edited(s, say) {
     if (!s)
         return '';
     const d = new Date(s * 1000);
     const year = d.getFullYear() === new Date().getFullYear() ? undefined : 'numeric';
-    return `Edited ${d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year })}`;
+    return say('Edited {date}', { date: d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year }) });
 }
 /**
  * What this org has deployed: a few starters to make something new from, then
@@ -77,6 +78,7 @@ function edited(s) {
  * is why it is a section of its own under the Library's items, which are yours.
  */
 export function Sites() {
+    const { t: say } = useI18n();
     const t = useTarget();
     const host = useHost();
     const list = useProjects(t, Boolean(host.person));
@@ -90,7 +92,7 @@ export function Sites() {
         setNote('');
         try {
             await change(t, p.slug, { visibility });
-            setNote(`${p.name} is ${visibility} now`);
+            setNote(visibility === 'public' ? say('{name} is public now', { name: p.name }) : say('{name} is private now', { name: p.name }));
             list.reload();
         }
         catch (e) {
@@ -98,20 +100,20 @@ export function Sites() {
         }
     };
     const said = failed || note;
-    return (_jsxs(YStack, { width: "100%", role: "region", "aria-label": "Sites", children: [_jsxs(YStack, { width: "100%", children: [_jsxs(YStack, { gap: "$1", pb: "$4", children: [_jsx(SizableText, { render: "h2", size: "$5", color: "$ink", children: "Sites" }), _jsx(SizableText, { size: "$2", color: "$soft", children: "What this organization has built. Open one to keep building it." })] }), said ? (_jsx(SizableText, { size: "$2", color: "$soft", role: "status", pb: "$3", children: said })) : null, starters.value.length ? (_jsxs(YStack, { gap: "$3", pb: "$6", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: "Make something new" }), _jsx(XStack, { flexWrap: "wrap", gap: "$3", children: starters.value.slice(0, 4).map((x) => (_jsxs(Card, { small: true, label: `Start from ${x.title}`, onPress: () => void take(x.slug), children: [_jsx(Shot, { slug: x.slug }), _jsx(YStack, { px: "$3", py: "$2.5", children: _jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: busy === x.slug ? 'Copying…' : x.title }) })] }, x.slug))) })] })) : null, list.error ? (_jsx(SizableText, { size: "$2", color: "$soft", children: list.error.message })) : !host.person ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "Sign in to see what your organization has built." })) : list.loading && list.value.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "Reading your projects\u2026" })) : list.value.length === 0 ? (_jsxs(YStack, { gap: "$3", items: "flex-start", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: "Nothing built yet. Describe something on the New page and it lands here." }), _jsx(Button, { size: "sm", onPress: () => host.go(''), children: "New run" })] })) : (_jsx(YStack, { gap: "$5", children: months(list.value).map((g) => (_jsxs(YStack, { gap: "$2", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: g.label }), _jsx(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: g.rows.map((p, i) => (_jsxs(XStack, { items: "center", pr: "$2", borderTopWidth: i ? 1 : 0, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: [_jsxs(XStack, { flex: 1, minW: 0, render: "button", "aria-label": `Open ${p.name}`, onPress: () => host.go(p.slug), items: "center", gap: "$3", px: "$3", py: "$2.5", cursor: "pointer", style: { textAlign: 'left' }, children: [p.visibility === 'private' ? _jsx(Lock, { size: 16, opacity: 0.7 }) : _jsx(Globe, { size: 16, opacity: 0.7 }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { size: "$3", color: "$ink", numberOfLines: 1, children: p.name }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: [p.visibility === 'private' ? 'Private' : 'Public', edited(when(p)), p.live ? new URL(p.live).host : 'Not deployed yet']
+    return (_jsxs(YStack, { width: "100%", role: "region", "aria-label": say('Sites'), children: [_jsxs(YStack, { width: "100%", children: [_jsxs(YStack, { gap: "$1", pb: "$4", children: [_jsx(SizableText, { render: "h2", size: "$5", color: "$ink", children: say('Sites') }), _jsx(SizableText, { size: "$2", color: "$soft", children: `${say('What this organization has built.')} ${say('Open one to keep building it.')}` })] }), said ? (_jsx(SizableText, { size: "$2", color: "$soft", role: "status", pb: "$3", children: said })) : null, starters.value.length ? (_jsxs(YStack, { gap: "$3", pb: "$6", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: say('Make something new') }), _jsx(XStack, { flexWrap: "wrap", gap: "$3", children: starters.value.slice(0, 4).map((x) => (_jsxs(Card, { small: true, label: say('Start from {template}', { template: x.title }), onPress: () => void take(x.slug), children: [_jsx(Shot, { slug: x.slug }), _jsx(YStack, { px: "$3", py: "$2.5", children: _jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: busy === x.slug ? say('Copying…') : x.title }) })] }, x.slug))) })] })) : null, list.error ? (_jsx(SizableText, { size: "$2", color: "$soft", children: say(list.error.message) })) : !host.person ? (_jsx(SizableText, { size: "$2", color: "$soft", children: say('Sign in to see what your organization has built.') })) : list.loading && list.value.length === 0 ? (_jsx(SizableText, { size: "$2", color: "$soft", children: say('Reading your projects…') })) : list.value.length === 0 ? (_jsxs(YStack, { gap: "$3", items: "flex-start", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: `${say('Nothing built yet.')} ${say('Describe something on the New page and it lands here.')}` }), _jsx(Button, { size: "sm", onPress: () => host.go(''), children: say('New run') })] })) : (_jsx(YStack, { gap: "$5", children: months(list.value, say).map((g) => (_jsxs(YStack, { gap: "$2", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: g.label }), _jsx(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: g.rows.map((p, i) => (_jsxs(XStack, { items: "center", pr: "$2", borderTopWidth: i ? 1 : 0, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: [_jsxs(XStack, { flex: 1, minW: 0, render: "button", "aria-label": say('Open {name}', { name: p.name }), onPress: () => host.go(p.slug), items: "center", gap: "$3", px: "$3", py: "$2.5", cursor: "pointer", style: { textAlign: 'left' }, children: [p.visibility === 'private' ? _jsx(Lock, { size: 16, opacity: 0.7 }) : _jsx(Globe, { size: 16, opacity: 0.7 }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { size: "$3", color: "$ink", numberOfLines: 1, children: p.name }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: [p.visibility === 'private' ? say('Private') : say('Public'), edited(when(p), say), p.live ? new URL(p.live).host : say('Not deployed yet')]
                                                                     .filter(Boolean)
-                                                                    .join(' · ') })] })] }), _jsx(DropdownMenu, { trigger: _jsx(XStack, { render: "button", "aria-label": `Actions for ${p.name}`, px: "$1.5", py: "$1", rounded: "$2", hoverStyle: { bg: '$raised' }, children: _jsx(MoreHorizontal, { size: 16 }) }), items: [
-                                                    { key: 'rename', label: 'Rename', onSelect: () => setRenaming(p) },
-                                                    { key: 'visibility', label: p.visibility === 'private' ? 'Make public' : 'Make private', onSelect: () => void flip(p) },
+                                                                    .join(' · ') })] })] }), _jsx(DropdownMenu, { trigger: _jsx(XStack, { render: "button", "aria-label": say('Actions for {name}', { name: p.name }), px: "$1.5", py: "$1", rounded: "$2", hoverStyle: { bg: '$raised' }, children: _jsx(MoreHorizontal, { size: 16 }) }), items: [
+                                                    { key: 'rename', label: say('Rename'), onSelect: () => setRenaming(p) },
+                                                    { key: 'visibility', label: p.visibility === 'private' ? say('Make public') : say('Make private'), onSelect: () => void flip(p) },
                                                     { type: 'separator' },
-                                                    { key: 'delete', label: 'Delete', destructive: true, onSelect: () => setDeleting(p) },
-                                                ] })] }, p.slug))) })] }, g.label))) }))] }), renaming ? (_jsx(Rename, { open: true, onOpenChange: (o) => !o && setRenaming(null), title: "Rename", name: renaming.name, run: async (name) => {
+                                                    { key: 'delete', label: say('Delete'), destructive: true, onSelect: () => setDeleting(p) },
+                                                ] })] }, p.slug))) })] }, g.label))) }))] }), renaming ? (_jsx(Rename, { open: true, onOpenChange: (o) => !o && setRenaming(null), title: say('Rename'), name: renaming.name, run: async (name) => {
                     await change(t, renaming.slug, { name });
-                    setNote(`Renamed to ${name}`);
+                    setNote(say('Renamed to {name}', { name }));
                     list.reload();
-                } })) : null, deleting ? (_jsx(Confirm, { open: true, onOpenChange: (o) => !o && setDeleting(null), title: `Delete ${deleting.name}?`, says: "Its site stops answering, its releases are dropped, and its address is released. This cannot be undone.", act: "Delete", run: async () => {
+                } })) : null, deleting ? (_jsx(Confirm, { open: true, onOpenChange: (o) => !o && setDeleting(null), title: say('Delete {name}?', { name: deleting.name }), says: `${say('Its site stops answering, its releases are dropped, and its address is released.')} ${say('This cannot be undone.')}`, act: say('Delete'), run: async () => {
                     await remove(t, deleting.slug);
-                    setNote(`${deleting.name} is deleted`);
+                    setNote(say('{name} is deleted', { name: deleting.name }));
                     list.reload();
                 } })) : null] }));
 }
@@ -125,8 +127,9 @@ function Shot({ slug }) {
     return (_jsxs(YStack, { width: "100%", aspectRatio: 16 / 10, bg: "$hover", items: "center", justify: "center", position: "relative", overflow: "hidden", children: [_jsxs(YStack, { items: "center", gap: "$2", opacity: 0.6, children: [_jsx(Boxes, { size: 24 }), _jsx(SizableText, { size: "$1", color: "$soft", textTransform: "uppercase", letterSpacing: 1, children: slug })] }), gone ? null : (_jsx("img", { src: `${SHOTS}/${encodeURIComponent(slug)}.webp`, alt: "", loading: "lazy", onError: () => setGone(true), style: { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top' } }))] }));
 }
 export function Templates() {
+    const { t: say } = useI18n();
     const t = useTarget();
     const list = useRead(() => templates(t), [], [t.api]);
     const { busy, failed, take } = useFork();
-    return (_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", items: "center", children: _jsxs(YStack, { width: "100%", maxW: 1080, children: [_jsx(Head, { title: "Templates", says: "Start from a working app. Picking one copies its repository into a project of yours." }), failed ? (_jsx(SizableText, { size: "$2", color: "$soft", role: "status", pb: "$3", children: failed })) : null, list.error ? (_jsx(SizableText, { size: "$2", color: "$soft", children: list.error.message })) : list.loading && !list.value.length ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "Reading templates\u2026" })) : !list.value.length ? (_jsx(SizableText, { size: "$2", color: "$soft", children: "No templates here right now. The whole catalog has more." })) : (_jsx(XStack, { flexWrap: "wrap", gap: "$3", children: list.value.map((x) => (_jsxs(Card, { label: `Start from ${x.title}`, onPress: () => void take(x.slug), children: [_jsx(Shot, { slug: x.slug }), _jsxs(YStack, { p: "$3", gap: "$1", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { size: "$3", color: "$ink", numberOfLines: 1, flex: 1, children: busy === x.slug ? 'Copying…' : x.title }), x.framework ? (_jsx(SizableText, { size: "$1", color: "$soft", children: x.framework })) : null] }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 2, children: x.description })] })] }, x.slug))) })), _jsx(YStack, { pt: "$5", children: _jsxs(Out, { href: "https://gallery.hanzo.ai", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: "The whole catalog" }), _jsx(ExternalLink, { size: 12, opacity: 0.6 })] }) })] }) }));
+    return (_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", items: "center", children: _jsxs(YStack, { width: "100%", maxW: 1080, children: [_jsx(Head, { title: say('Templates'), says: `${say('Start from a working app.')} ${say('Picking one copies its repository into a project of yours.')}` }), failed ? (_jsx(SizableText, { size: "$2", color: "$soft", role: "status", pb: "$3", children: failed })) : null, list.error ? (_jsx(SizableText, { size: "$2", color: "$soft", children: say(list.error.message) })) : list.loading && !list.value.length ? (_jsx(SizableText, { size: "$2", color: "$soft", children: say('Reading templates…') })) : !list.value.length ? (_jsx(SizableText, { size: "$2", color: "$soft", children: `${say('No templates here right now.')} ${say('The whole catalog has more.')}` })) : (_jsx(XStack, { flexWrap: "wrap", gap: "$3", children: list.value.map((x) => (_jsxs(Card, { label: say('Start from {template}', { template: x.title }), onPress: () => void take(x.slug), children: [_jsx(Shot, { slug: x.slug }), _jsxs(YStack, { p: "$3", gap: "$1", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { size: "$3", color: "$ink", numberOfLines: 1, flex: 1, children: busy === x.slug ? say('Copying…') : x.title }), x.framework ? (_jsx(SizableText, { size: "$1", color: "$soft", children: x.framework })) : null] }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 2, children: x.description })] })] }, x.slug))) })), _jsx(YStack, { pt: "$5", children: _jsxs(Out, { href: "https://gallery.hanzo.ai", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: say('The whole catalog') }), _jsx(ExternalLink, { size: 12, opacity: 0.6 })] }) })] }) }));
 }

package/lib/side.d.ts

@@ -1,28 +1,3 @@
-/**
- * The side panel's column beside a conversation or a run, once for Chat and
- * Dev: how wide it is, the middle column it can take the room from, and full
- * screen. The host draws the two columns and spreads what `useSplit` hands it
- * on them and on the kit's `Grip`; the `Panel` inside reads `useSide` for its
- * full-screen button and its way back to the middle column.
- *
- *   width   the person's, kept in their preferences (`side.width`, /v1/pref),
- *           so it follows them to every device and to both modes. Where no
- *           PrefsProvider holds them (hanzo.team's rooms) it lasts the page.
- *           Saved once a drag lets go, after a burst of keys has stopped.
- *   main    the middle column keeps MAIN px. Pulled under half of that it is
- *           hidden, never unmounted, so the transcript and the composer keep
- *           their state, and the panel takes the room. Pulled back out, or the
- *           strip's Show button, brings it back at the width kept.
- *   full    the panel over the whole window. Escape or the button returns.
- *
- * A DRAG NEVER DRAWS REACT. Each frame writes the panel's width and the middle
- * column's display on the two elements (`paint`), the same properties React
- * writes from the settled state (`look`), so the two never disagree; React
- * learns the width once, when the drag lets go. The room the two share is
- * measured by a ResizeObserver, after layout, so a frame never reads layout
- * it has just dirtied. A window narrowed under the panel is painted the same
- * way: the panel gives way, and the person's width comes back with the room.
- */
 import { type CSSProperties } from 'react';
 /** What the panel's strip reads of the column it stands in. */
 export interface Side {
@@ -50,7 +25,7 @@ export interface Split {
     asideStyle: CSSProperties;
     /** The kit `Grip`'s props, but its label and its place; none while the panel is full screen. */
     grip: {
-        side: 'right';
+        side: 'left' | 'right';
         span: number;
         floor: number;
         ceil: number;

package/lib/side.js

@@ -22,7 +22,12 @@
  * measured by a ResizeObserver, after layout, so a frame never reads layout
  * it has just dirtied. A window narrowed under the panel is painted the same
  * way: the panel gives way, and the person's width comes back with the room.
+ *
+ * The panel stands at the line's end and the gutter is its inline-start margin,
+ * so a right-to-left page puts it on the left and its edge on its right
+ * (@hanzo/i18n `dir`), and the grip grows it rightwards.
  */
+import { useI18n } from '@hanzo/i18n/react';
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { usePrefs } from './prefs.js';
 /** The panel's least width, px, and the width it opens at before the person has chosen one. */
@@ -40,8 +45,8 @@ export const useSide = () => useContext(Context);
 /** The panel's own properties, at a width or with the room. Every key every time, so React and a drag write one set. */
 function look(width, hidden) {
     return hidden
-        ? { width: 'auto', flexGrow: '1', flexShrink: '1', minWidth: '0px', maxWidth: 'none', marginLeft: '0px', gridColumnStart: 'pane' }
-        : { width: `${width}px`, flexGrow: '', flexShrink: '0', minWidth: `${FLOOR}px`, maxWidth: `calc(100vw - ${MAIN}px)`, marginLeft: '', gridColumnStart: '' };
+        ? { width: 'auto', flexGrow: '1', flexShrink: '1', minWidth: '0px', maxWidth: 'none', marginInlineStart: '0px', gridColumnStart: 'pane' }
+        : { width: `${width}px`, flexGrow: '', flexShrink: '0', minWidth: `${FLOOR}px`, maxWidth: `calc(100vw - ${MAIN}px)`, marginInlineStart: '', gridColumnStart: '' };
 }
 /** Over the whole window, opaque, above the frame and under the kit's menus. */
 const FULL = {
@@ -51,7 +56,7 @@ const FULL = {
     width: 'auto',
     maxWidth: 'none',
     minWidth: '0px',
-    marginLeft: '0px',
+    marginInlineStart: '0px',
     borderRadius: '0px',
     backgroundColor: 'var(--background)',
     backdropFilter: 'none',
@@ -66,6 +71,7 @@ const write = (el, style) => {
  * the panel away (its edge pulled past its floor).
  */
 export function useSplit(open, main, onShut) {
+    const { dir } = useI18n();
     const prefs = usePrefs(false);
     const kept = prefs?.prefs.side?.width;
     const [width, setWidth] = useState(() => Math.max(FLOOR, kept ?? WIDTH));
@@ -107,7 +113,7 @@ export function useSplit(open, main, onShut) {
                 return;
             const shown = main.style.display !== 'none';
             if (shown)
-                now.current.gap = parseFloat(getComputedStyle(aside).marginLeft) || 0;
+                now.current.gap = parseFloat(getComputedStyle(aside).marginInlineStart) || 0;
             const total = Math.round((shown ? main.getBoundingClientRect().width + now.current.gap : 0) + aside.getBoundingClientRect().width);
             // A drag moves width between the two and leaves their sum; only a new window is news.
             if (Math.abs(total - now.current.room) < 2)
@@ -190,6 +196,6 @@ export function useSplit(open, main, onShut) {
         asideStyle: (side.full ? { ...look(across, side.hidden), ...FULL } : look(across, side.hidden)),
         grip: side.full
             ? null
-            : { side: 'right', span: side.hidden ? room : across, floor: FLOOR, ceil: Math.max(FLOOR, room), reset: WIDTH, onSpan: (n) => void paint(n), onKeep: keep, onShut },
+            : { side: dir === 'rtl' ? 'left' : 'right', span: side.hidden ? room : across, floor: FLOOR, ceil: Math.max(FLOOR, room), reset: WIDTH, onSpan: (n) => void paint(n), onKeep: keep, onShut },
     };
 }

package/lib/standing.d.ts

@@ -1,12 +1,4 @@
-/**
- * Where an account stands: which plan it is on, which meter it reads, and the
- * reads behind it — the tier for the plan's name, the limits for its windows,
- * the free allowance, and the prepaid balance. One read for every surface that
- * shows a plan (the account menus, Usage, Billing), so they cannot disagree.
- *
- * Each read stands alone: one that fails leaves its part empty and the rest
- * drawn. Only when none answers is the whole read an error.
- */
+import type { Say } from '@hanzo/i18n/react';
 import { type Allowance } from './api/billing.ts';
 import type { Target } from './api/call.ts';
 import { type Limits } from './api/limits.ts';
@@ -39,6 +31,6 @@ export interface Row {
  * the billing period of whichever class of model has used the most of it,
  * because that is the one that stops a request first.
  */
-export declare function rows(l: Limits | null, now?: number): Row[];
+export declare function rows(l: Limits | null, now?: number, t?: Say): Row[];
 /** The share of the free allowance left in its window, 0 to 100, or null where none bounds the account. */
 export declare function left(a: Allowance | null): number | null;

package/lib/standing.js

@@ -7,10 +7,12 @@
  * Each read stands alone: one that fails leaves its part empty and the rest
  * drawn. Only when none answers is the whole read an error.
  */
+import { phrase } from '@hanzo/i18n';
 import { allowance, balance, tier } from './api/billing.js';
 import { limits } from './api/limits.js';
 import { useRead } from './data.js';
 import { kind, label, when } from './plan.js';
+import { english } from './say.js';
 const got = (r) => (r.status === 'fulfilled' ? r.value : null);
 /** Every read at once. Rejects only when all of them were refused, with the first refusal. */
 export async function stand(t) {
@@ -24,7 +26,7 @@ export async function stand(t) {
     const k = kind(slug, money, billed?.tier);
     return {
         kind: k,
-        label: k === 'plan' ? label(slug, billed?.tier) : k === 'free' ? { name: 'Free', tag: '' } : { name: 'Pay as you go', tag: '' },
+        label: k === 'plan' ? label(slug, billed?.tier) : k === 'free' ? { name: phrase('Free'), tag: '' } : { name: phrase('Pay as you go'), tag: '' },
         limits: used,
         allowance: free,
         balance: money,
@@ -40,7 +42,7 @@ const RANK = { ok: 0, near: 1, limited: 2 };
  * the billing period of whichever class of model has used the most of it,
  * because that is the one that stops a request first.
  */
-export function rows(l, now = Date.now()) {
+export function rows(l, now = Date.now(), t = english) {
     if (!l)
         return [];
     const month = Object.values(l.classes).reduce((a, c) => (!c ? a : !a || c.percent > a.percent || (c.percent === a.percent && RANK[c.state] > RANK[a.state]) ? c : a), null);
@@ -49,7 +51,7 @@ export function rows(l, now = Date.now()) {
         if (!w)
             return;
         const at = when(w.resets, now);
-        out.push({ name, percent: w.percent, state: w.state, resets: at ? `Resets ${at}` : '' });
+        out.push({ name, percent: w.percent, state: w.state, resets: at ? t('Resets {time}', { time: at }) : '' });
     };
     add('Session', l.session);
     add('Today', l.day);

package/lib/suggest.d.ts

@@ -1,30 +1,3 @@
-/**
- * Three suggestions under the composer, each one person's own and each a thing
- * done at once when pressed (`Act`): open what it names (a conversation, a run,
- * a Studio creation, an item, an issue), send a new chat, start a Dev run, or
- * schedule a task. None only fills the composer.
- *
- * Nothing here is written by hand. The rows are generated by Hanzo's own model
- * (`MODEL`, POST /v1/chat/completions with the person's bearer, so the call is
- * theirs like any other) from that person's activity alone: their recent
- * conversations, their Dev runs, the org's issues and pull requests, their
- * automations and their files. An account with no activity yet is given rows
- * from what signup learned (its role, its use, what it said about its work),
- * until there is activity to read. No input and no answer is no row: the model
- * may answer none, and nothing pads it.
- *
- * Kept in the account (`suggest` in /v1/pref), so the rows follow the person:
- *
- *   {at, sig, rows, dismissed}   when they were made, the fingerprint of what
- *                                they were made from, the rows, and the rows
- *                                the person dismissed (by id)
- *
- * They are made again a day later, or once the activity's fingerprint has moved
- * and the rows are at least `QUIET` old, so a busy hour asks the model once.
- *
- * This file is the pure half: inputs to a request, an answer to validated rows,
- * the fingerprint and the policy. suggestions.tsx reads the sources and draws them.
- */
 import type { Automation, Schedule } from './api/auto.ts';
 import type { Conversation } from './api/conversations.ts';
 import type { Item } from './api/library.ts';
@@ -231,8 +204,15 @@ export declare function answer(raw: unknown, inputs: Input[]): Suggestion[];
 export declare function kept(raw: unknown): Kept | undefined;
 /** The rows to draw: those not dismissed. */
 export declare const shown: (k: Kept | null | undefined) => Suggestion[];
-/** What Hanzo does, three ways in, each done at once: what fills the rows a person's activity and signup do not. */
+/**
+ * What Hanzo does, three ways in, each done at once: what fills the rows a
+ * person's activity and signup do not. The one copy here that is authored, so
+ * its words are marked (`phrase`) and drawn in the reader's language, the
+ * prompt too: it is sent as their message and shown as theirs.
+ */
 export declare const STARTERS: readonly Suggestion[];
+/** Whether a row is a starter: authored, so drawn through `t`; every other row is the person's own words. */
+export declare const starter: (r: Suggestion) => boolean;
 /** The kept rows, filled to `MOST` with the starters not dismissed: never one lonely row. */
 export declare const fill: (k: Kept | null | undefined) => Suggestion[];
 /** `k` with `id` dismissed: remembered first, the oldest forgotten past `REMEMBER`. */

package/lib/suggest.js

@@ -1,3 +1,31 @@
+/**
+ * Three suggestions under the composer, each one person's own and each a thing
+ * done at once when pressed (`Act`): open what it names (a conversation, a run,
+ * a Studio creation, an item, an issue), send a new chat, start a Dev run, or
+ * schedule a task. None only fills the composer.
+ *
+ * Nothing here is written by hand. The rows are generated by Hanzo's own model
+ * (`MODEL`, POST /v1/chat/completions with the person's bearer, so the call is
+ * theirs like any other) from that person's activity alone: their recent
+ * conversations, their Dev runs, the org's issues and pull requests, their
+ * automations and their files. An account with no activity yet is given rows
+ * from what signup learned (its role, its use, what it said about its work),
+ * until there is activity to read. No input and no answer is no row: the model
+ * may answer none, and nothing pads it.
+ *
+ * Kept in the account (`suggest` in /v1/pref), so the rows follow the person:
+ *
+ *   {at, sig, rows, dismissed}   when they were made, the fingerprint of what
+ *                                they were made from, the rows, and the rows
+ *                                the person dismissed (by id)
+ *
+ * They are made again a day later, or once the activity's fingerprint has moved
+ * and the rows are at least `QUIET` old, so a busy hour asks the model once.
+ *
+ * This file is the pure half: inputs to a request, an answer to validated rows,
+ * the fingerprint and the policy. suggestions.tsx reads the sources and draws them.
+ */
+import { phrase } from '@hanzo/i18n';
 export const ICONS = ['github', 'agent', 'chat', 'file', 'task'];
 /** Hanzo's model the rows are asked of: it decodes under a strict JSON schema at api.hanzo.ai. */
 export const MODEL = 'zen5-flash';
@@ -363,12 +391,19 @@ export function kept(raw) {
 }
 /** The rows to draw: those not dismissed. */
 export const shown = (k) => (k ? k.rows.filter((r) => !k.dismissed.includes(r.id)).slice(0, MOST) : []);
-/** What Hanzo does, three ways in, each done at once: what fills the rows a person's activity and signup do not. */
+/**
+ * What Hanzo does, three ways in, each done at once: what fills the rows a
+ * person's activity and signup do not. The one copy here that is authored, so
+ * its words are marked (`phrase`) and drawn in the reader's language, the
+ * prompt too: it is sent as their message and shown as theirs.
+ */
 export const STARTERS = [
-    { id: 'start:chat', icon: 'chat', title: 'Ask what Hanzo can do for you', summary: '', act: { kind: 'send', prompt: 'What can you do for me? Give me three concrete things to try today.' } },
-    { id: 'start:dev', icon: 'agent', title: 'Build a landing page with Dev', summary: '', act: { kind: 'task', prompt: 'Build a one-page landing site for my project and give me the preview link.' } },
-    { id: 'start:research', icon: 'file', title: 'Get a cited brief on AI agents', summary: '', act: { kind: 'send', prompt: 'Research the state of AI coding agents this month and give me a short brief with sources.' } },
+    { id: 'start:chat', icon: 'chat', title: phrase('Ask what Hanzo can do for you'), summary: '', act: { kind: 'send', prompt: phrase('What can you do for me? Give me three concrete things to try today.') } },
+    { id: 'start:dev', icon: 'agent', title: phrase('Build a landing page with Dev'), summary: '', act: { kind: 'task', prompt: phrase('Build a one-page landing site for my project and give me the preview link.') } },
+    { id: 'start:research', icon: 'file', title: phrase('Get a cited brief on AI agents'), summary: '', act: { kind: 'send', prompt: phrase('Research the state of AI coding agents this month and give me a short brief with sources.') } },
 ];
+/** Whether a row is a starter: authored, so drawn through `t`; every other row is the person's own words. */
+export const starter = (r) => STARTERS.some((s) => s.id === r.id);
 /** The kept rows, filled to `MOST` with the starters not dismissed: never one lonely row. */
 export const fill = (k) => {
     if (!k)

package/lib/suggestions.js

@@ -6,6 +6,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * a new chat, starts its run, or makes its scheduled task. Nothing only fills
  * the composer. Its × dismisses it, and the account remembers.
  *
+ * A row's words are the person's own, made from their activity, and drawn as
+ * given; a starter's are authored (suggest.ts `STARTERS`), so drawn and sent in
+ * the reader's language (@hanzo/i18n `t`).
+ *
  * `useSuggestions` reads the kept rows from the account (`suggest` in /v1/pref)
  * and, when they are due (suggest.ts `due`), reads the person's activity and
  * asks Hanzo's model for new ones. One document per page, read once per person
@@ -24,6 +28,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { SizableText, useMedia, XStack, YStack } from '@hanzo/gui';
 import { Bot, CalendarClock, FileText, Github, MessageSquare, X } from '@hanzogui/lucide-icons-2';
+import { useI18n } from '@hanzo/i18n/react';
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '@hanzo/ui';
 import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from 'react';
 import { automations, create } from './api/auto.js';
@@ -34,7 +39,7 @@ import { read, save } from './api/pref.js';
 import { list } from './api/sessions.js';
 import { everything } from './api/work.js';
 import { claims } from './claims.js';
-import { answer, dismissed, due, fill, inputs, request, seed, sig, skip, stale, TAKE } from './suggest.js';
+import { answer, dismissed, due, fill, inputs, request, seed, sig, skip, stale, starter, TAKE } from './suggest.js';
 /** A source that refuses this person (a 4xx other than an expired sign-in or a rate) has nothing for them; any other failure leaves it unknown. */
 function soft(p, none) {
     return p.catch((e) => {
@@ -187,16 +192,20 @@ const MARKS = {
 const PITCH = 44;
 /** The rows, or nothing when there are none. */
 export function Suggestions({ rows, onAct, onDismiss }) {
+    const { t } = useI18n();
     // A phone has no hover: its × stays in sight.
     const touch = !useMedia().sm;
     if (!rows.length)
         return null;
-    return (_jsx(YStack, { role: "list", "aria-label": "Suggestions", "data-slot": "suggestions", children: rows.map((r) => (_jsx(Row, { row: r, touch: touch, onAct: onAct, onDismiss: onDismiss }, r.id))) }));
+    return (_jsx(YStack, { role: "list", "aria-label": t('Suggestions'), "data-slot": "suggestions", children: rows.map((r) => (_jsx(Row, { row: r, touch: touch, onAct: onAct, onDismiss: onDismiss }, r.id))) }));
 }
 /** One row: the whole of it one button that does the act, and its × beside it. Two stops for the keyboard, neither inside the other. */
-function Row({ row, touch, onAct, onDismiss }) {
+function Row({ row: kept, touch, onAct, onDismiss }) {
+    const { t } = useI18n();
     const [near, setNear] = useState(false);
+    // A starter in the reader's words, its prompt too: what is sent is what they pressed.
+    const row = starter(kept) ? { ...kept, title: t(kept.title), act: 'prompt' in kept.act ? { ...kept.act, prompt: t(kept.act.prompt) } : kept.act } : kept;
     const Mark = MARKS[row.icon];
-    const button = (_jsxs(XStack, { render: "button", "data-act": row.act.kind, "aria-label": row.title, onPress: () => onAct(row.act, row), flex: 1, minW: 0, self: "stretch", items: "center", gap: "$3", pl: "$3", rounded: "$4", cursor: "pointer", focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: [_jsx(Mark, { size: 18, color: "$soft" }), _jsx(SizableText, { fontSize: 15, color: "$soft", numberOfLines: 1, shrink: 1, minW: 0, children: row.title })] }));
-    return (_jsxs(XStack, { role: "listitem", "data-slot": "suggestion", items: "center", gap: "$1", minH: PITCH, pr: "$2", rounded: "$4", hoverStyle: { bg: '$hover' }, onPointerEnter: () => setNear(true), onPointerLeave: () => setNear(false), children: [row.summary ? (_jsxs(HoverCard, { openDelay: 300, closeDelay: 150, children: [_jsx(HoverCardTrigger, { flex: 1, minW: 0, self: "stretch", flexDirection: "row", children: button }), _jsx(HoverCardContent, { side: "top", align: "start", sideOffset: 8, width: 470, maxW: "calc(100vw - 32px)", rounded: "$6", p: "$4", children: _jsx(SizableText, { fontSize: 16, lineHeight: 26, color: "$ink", children: row.summary }) })] })) : (button), _jsx(XStack, { render: "button", "aria-label": `Dismiss ${row.title}`, onPress: () => onDismiss(row.id), p: "$1.5", rounded: "$2", cursor: "pointer", opacity: touch || near ? 1 : 0, hoverStyle: { bg: '$hover' }, focusVisibleStyle: { opacity: 1, outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: _jsx(X, { size: 16, color: "$soft" }) })] }));
+    const button = (_jsxs(XStack, { render: "button", "data-act": row.act.kind, "aria-label": row.title, onPress: () => onAct(row.act, row), flex: 1, minW: 0, self: "stretch", items: "center", gap: "$3", paddingInlineStart: "$3", rounded: "$4", cursor: "pointer", focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: [_jsx(Mark, { size: 18, color: "$soft" }), _jsx(SizableText, { fontSize: 15, color: "$soft", numberOfLines: 1, shrink: 1, minW: 0, children: row.title })] }));
+    return (_jsxs(XStack, { role: "listitem", "data-slot": "suggestion", items: "center", gap: "$1", minH: PITCH, paddingInlineEnd: "$2", rounded: "$4", hoverStyle: { bg: '$hover' }, onPointerEnter: () => setNear(true), onPointerLeave: () => setNear(false), children: [row.summary ? (_jsxs(HoverCard, { openDelay: 300, closeDelay: 150, children: [_jsx(HoverCardTrigger, { flex: 1, minW: 0, self: "stretch", flexDirection: "row", children: button }), _jsx(HoverCardContent, { side: "top", align: "start", sideOffset: 8, width: 470, maxW: "calc(100vw - 32px)", rounded: "$6", p: "$4", children: _jsx(SizableText, { fontSize: 16, lineHeight: 26, color: "$ink", children: row.summary }) })] })) : (button), _jsx(XStack, { render: "button", "aria-label": t('Dismiss {suggestion}', { suggestion: row.title }), onPress: () => onDismiss(row.id), p: "$1.5", rounded: "$2", cursor: "pointer", opacity: touch || near ? 1 : 0, hoverStyle: { bg: '$hover' }, focusVisibleStyle: { opacity: 1, outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: _jsx(X, { size: 16, color: "$soft" }) })] }));
 }

package/lib/summary.d.ts

@@ -39,7 +39,7 @@ export interface Section {
  * The summary, from the outline mark in a header. `onOpen` runs after a row is
  * pressed, for the host to show the panel the row opened a tab in.
  */
-export declare function Summary({ sections, onOpen, label }: {
+export declare function Summary({ sections, onOpen, label: named }: {
     sections: readonly Section[];
     onOpen?: () => void;
     label?: string;

package/lib/summary.js

@@ -12,6 +12,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  */
 import { useMemo, useState } from 'react';
 import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { useI18n } from '@hanzo/i18n/react';
 import { FilePlus2, ListTodo } from '@hanzogui/lucide-icons-2';
 import { Popover, PopoverContent, PopoverTrigger } from '@hanzo/ui';
 /** A row's pitch and inset, px: the kit menu's, so this panel reads as every other one. */
@@ -40,7 +41,9 @@ function Rows({ section, done, details = false }) {
  * The summary, from the outline mark in a header. `onOpen` runs after a row is
  * pressed, for the host to show the panel the row opened a tab in.
  */
-export function Summary({ sections, onOpen, label = 'Summary' }) {
+export function Summary({ sections, onOpen, label: named }) {
+    const { t } = useI18n();
+    const label = named ?? t('Summary');
     const [open, setOpen] = useState(false);
     const done = () => {
         setOpen(false);