@hanzo/build 0.2.51 → 0.2.53

package/lib/mind.js

@@ -0,0 +1,187 @@
+/**
+ * Which model answers, and how hard it thinks: one store for Chat and Dev, and
+ * the catalog both offer. The chip that changes it is `Tune` (prompt.tsx).
+ *
+ *   GET /v1/models   the catalog, read once per platform and shared
+ *   hanzo.mind       the person's choice, in this browser: {model, effort}
+ *
+ * Effort is on the chip and the model is one press in. Enso routes every ask —
+ * a message in Chat, a step in Dev — so naming a model is an override, and the
+ * panel says so before it offers one. A premium model is picked for the screen
+ * it was picked on (`usePick`) and never kept, so the next conversation or run
+ * opens on what was kept, Enso until something else is.
+ *
+ * The efforts are the set both planes take: `reasoning_effort` on a completion
+ * and `effort` on a coding run (apps/coding `efforts`). A model the catalog
+ * lists as not reasoning offers none; Enso and a model the catalog does not
+ * describe offer all three.
+ */
+import { modelName, 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';
+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' },
+];
+export const FIRST = { model: ENSO, effort: 'medium' };
+const KEY = 'hanzo.mind';
+const CHANGE = 'hanzo:mind';
+const effortOf = (v) => (EFFORTS.some((e) => e.id === v) ? v : FIRST.effort);
+/** The store, or null where the browser gives none (a server render, blocked site data). */
+function store() {
+    try {
+        return typeof window === 'undefined' ? null : window.localStorage;
+    }
+    catch {
+        return null;
+    }
+}
+let raw;
+let held = FIRST;
+/** A choice the browser would not store, held for the page. */
+let memo = null;
+/** The kept choice, Enso and Medium where nothing is kept. Stable while the stored text is. */
+export function kept() {
+    if (memo)
+        return memo;
+    let now = null;
+    try {
+        now = store()?.getItem(KEY) ?? null;
+    }
+    catch {
+        now = null;
+    }
+    if (now === raw)
+        return held;
+    raw = now;
+    try {
+        const v = JSON.parse(now ?? 'null');
+        held = { model: typeof v?.model === 'string' && v.model.trim() ? v.model : FIRST.model, effort: effortOf(v?.effort) };
+    }
+    catch {
+        held = FIRST;
+    }
+    return held;
+}
+/** Keep a change, in this browser, for every surface that reads it. */
+export function keep(patch) {
+    const next = { ...kept(), ...patch };
+    try {
+        store()?.setItem(KEY, JSON.stringify(next));
+        memo = null;
+    }
+    catch {
+        // A browser that refuses storage keeps the choice for this page.
+        memo = next;
+    }
+    if (typeof window !== 'undefined')
+        window.dispatchEvent(new Event(CHANGE));
+}
+function subscribe(change) {
+    window.addEventListener(CHANGE, change);
+    window.addEventListener('storage', change);
+    return () => {
+        window.removeEventListener(CHANGE, change);
+        window.removeEventListener('storage', change);
+    };
+}
+/** The kept choice and the way to change it. The server and the first render read the default. */
+export function useChoice() {
+    return [useSyncExternalStore(subscribe, kept, () => FIRST), keep];
+}
+/** Whether `model` takes an effort: the router and an undescribed model do, a listed one only if it reasons. */
+export function reasons(model, catalog) {
+    if (model === ENSO)
+        return true;
+    const row = catalog.find((m) => m.id === model);
+    return !row || row.supports_reasoning === true;
+}
+/** A model's name as the catalog spells it; Enso for the router. */
+export function nameOf(model, catalog) {
+    if (model === ENSO)
+        return 'Enso';
+    const row = catalog.find((m) => m.id === model);
+    return modelName(row ?? { id: model });
+}
+// The catalog, once per platform for the page: Chat and Dev read the same list.
+const catalogs = new Map();
+const settled = new Map();
+/** Where this browser keeps the last list it read. */
+const LAST = 'hanzo.build.models';
+/** The router alone: what a chooser offers before any list was ever read, so it reads "Enso" and not an id. */
+const ROUTER = parseModels([{ id: ENSO, name: 'Enso', family: 'enso', class: 'ours' }]);
+/** The last list this browser read, or none. */
+function last() {
+    try {
+        return parseModels(JSON.parse(store()?.getItem(LAST) ?? 'null'));
+    }
+    catch {
+        return [];
+    }
+}
+/** Which catalog a target reads: the platform, and whether anyone is signed in. */
+const shelf = (t) => `${t.api}|${t.token() ? 'in' : 'out'}`;
+/** `GET /v1/models` for a target, asked once and shared; a refusal is not kept, so the next ask goes again. */
+export function catalog(t) {
+    const at = shelf(t);
+    let ask = catalogs.get(at);
+    if (!ask) {
+        ask = read(t).then((models) => {
+            settled.set(at, models);
+            try {
+                if (models.length)
+                    store()?.setItem(LAST, JSON.stringify(models));
+            }
+            catch {
+                // The next page reads the list again.
+            }
+            return models;
+        });
+        catalogs.set(at, ask);
+        ask.catch(() => catalogs.delete(at));
+    }
+    return ask;
+}
+/**
+ * The platform's catalog, as a hook: what was read already is there on the
+ * first render. The gateway answers 429 once the org's quota is spent, and a
+ * list that vanishes then leaves nothing to choose from, so a failed read shows
+ * the last list this browser kept, with a note; with none kept, Enso alone, and
+ * the reason in the chooser — never the platform's own words.
+ */
+export function useCatalog(t) {
+    const at = shelf(t);
+    const [state, setState] = useState(() => settled.has(at) ? { at, models: settled.get(at), error: null } : null);
+    useEffect(() => {
+        let live = true;
+        catalog(t).then((models) => live && setState({ at, models, error: null }), (e) => live && setState({ at, models: [], error: e }));
+        return () => {
+            live = false;
+        };
+        // The target is read through `at`: the origin and whether anyone is signed in.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [at]);
+    const now = state?.at === at ? state : settled.has(at) ? { at, models: settled.get(at), error: null } : null;
+    if (!now?.error)
+        return { models: now?.models ?? [], list: now?.models ?? [], loading: !now, error: null, note: '' };
+    const kept = last();
+    if (kept.length)
+        return { models: kept, list: kept, loading: false, error: null, note: 'The model list could not be refreshed; these are the models as last read.' };
+    const spent = now.error instanceof Refusal && now.error.status === 429;
+    return {
+        models: ROUTER,
+        list: [],
+        loading: false,
+        error: spent ? 'The model list is resting: this organization’s quota is spent.' : 'The model list could not be read right now.',
+        note: '',
+    };
+}
+export function useMind(t) {
+    const [choice, change] = useChoice();
+    const { models, list, loading, error, note } = useCatalog(t);
+    const [model, pick] = usePick(choice.model, (id) => change({ model: id }), list);
+    return { model, effort: choice.effort, models, loading, error, note, pick, pace: (effort) => change({ effort }) };
+}

package/lib/nav.d.ts

@@ -0,0 +1,11 @@
+import type { RailLink } from '@hanzo/ui/chat';
+import type { Host } from './host.tsx';
+/** A run of places under one quiet label. */
+export interface Group {
+    id: 'work' | 'make' | 'run' | 'setup';
+    label: string;
+    links: RailLink[];
+}
+/** 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[];

package/lib/nav.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The builder's places, once, for every rail that lists them: the builder's own
+ * rail (builder.tsx), `DevSection` (section.tsx) and a host's column (the Hanzo
+ * app's, @hanzo/rooms Column). Each place is a first-class row — nothing hides
+ * behind a disclosure — grouped in the order a first-time customer asks:
+ * what do I do, what did it make, where does it run, how do I set it up.
+ *
+ * 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.
+ */
+import { Blocks, BookOpen, CircleDot, Container, Cpu, FolderGit2, LayoutTemplate, SlidersHorizontal, SquarePen, Workflow } from '@hanzogui/lucide-icons-2';
+import { pinBoard } from './choice.js';
+import { DOCS } from './foot.js';
+import { path, route } from './route.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) {
+    const r = route(host.path);
+    const screen = r.kind === 'screen' ? r.screen : '';
+    const section = r.kind === 'settings' ? r.section : '';
+    const to = (p) => () => go(p);
+    return [
+        {
+            id: 'work',
+            label: 'Work',
+            links: [
+                { id: NEW, label: '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',
+                    icon: _jsx(FolderGit2, { size: 16 }),
+                    onPress: to(path({ kind: 'screen', screen: 'projects' })),
+                    active: screen === 'projects' || screen === 'sync' || r.kind === 'repo',
+                },
+                {
+                    id: 'issues',
+                    label: 'Issues',
+                    icon: _jsx(CircleDot, { size: 16 }),
+                    onPress: () => {
+                        pinBoard(host.org, '');
+                        go(path({ kind: 'screen', screen: 'issues' }));
+                    },
+                    active: screen === 'issues',
+                },
+            ],
+        },
+        {
+            id: 'make',
+            label: 'Make',
+            links: [
+                { id: 'artifacts', label: 'Artifacts', icon: _jsx(Blocks, { size: 16 }), onPress: to(path({ kind: 'screen', screen: 'artifacts' })), active: screen === 'artifacts' },
+                { id: 'templates', label: 'Templates', icon: _jsx(LayoutTemplate, { size: 16 }), onPress: to(path({ kind: 'screen', screen: 'templates' })), active: screen === 'templates' },
+                { id: 'automations', label: 'Automations', icon: _jsx(Workflow, { size: 16 }), onPress: to(path({ kind: 'screen', screen: 'automations' })), active: screen === 'automations' || r.kind === 'automation' },
+            ],
+        },
+        {
+            id: 'run',
+            label: '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: 'setup',
+            label: 'Setup',
+            links: [
+                { id: 'customize', label: 'Customize', icon: _jsx(SlidersHorizontal, { size: 16 }), onPress: to(path({ kind: 'customize', tab: 'skills' })), active: r.kind === 'customize' || screen === 'mcp' },
+                { id: 'docs', label: 'Docs', icon: _jsx(BookOpen, { size: 16 }), onPress: () => window.open(DOCS, '_blank', 'noopener,noreferrer') },
+            ],
+        },
+    ];
+}

package/lib/panel.d.ts

@@ -0,0 +1,45 @@
+import { type ReactNode } from 'react';
+import { type Deck, type Tab } from './tabs.ts';
+/** A kind of tab the surface offers. */
+export interface Kind {
+    id: string;
+    label: string;
+    render: () => ReactNode;
+    /** Drawn edge to edge, scrolling itself: a terminal, a frame. */
+    bleed?: boolean;
+}
+/**
+ * The header's Panel button: a word beside the mark while the panel is shut on
+ * a laptop, because a glyph alone was a control nobody found; the mark alone
+ * below `lg`, where the header has no room for the word, and while it is open,
+ * when the panel and its own close are in view (below `lg` it steps aside).
+ */
+export declare function PanelToggle({ open, onToggle }: {
+    open: boolean;
+    onToggle: () => void;
+}): import("react").JSX.Element;
+/**
+ * A page tab: an address with its bar, or bytes rendered as their type.
+ *
+ * Two sandboxes. Bytes and an object URL take THIS page's origin, so a script
+ * an answer wrote runs without `allow-same-origin`, never with our storage. A
+ * remote page takes its own origin, and withholding same-origin breaks it.
+ */
+export declare function Page({ tab, onGo }: {
+    tab: Tab;
+    onGo: (url: string) => void;
+}): import("react").JSX.Element;
+export interface PanelProps {
+    side: Deck;
+    kinds: readonly Kind[];
+    onHide: () => void;
+    /** A sheet over the page (a phone) rather than the host's column. */
+    sheet?: boolean;
+    /** Under the tabs, over every tab: a line about what they all read (Dev's sandbox). */
+    bar?: ReactNode;
+    /** At the strip's end, before hide: the surface's own menu. */
+    menu?: ReactNode;
+    label?: string;
+}
+/** The panel: the strip, and the chosen tab. */
+export declare function Panel({ side, kinds, onHide, sheet, bar, menu, label }: PanelProps): import("react").JSX.Element;

package/lib/panel.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The side panel, once, for Chat and Dev: tabs over what a conversation or a
+ * run made, read and served (tabs.ts), opened and shut in one press — the
+ * header's Panel button (`PanelToggle`), or ⌘. / Ctrl+. (`useKey`).
+ *
+ * The column the panel stands in is the host's: its width and edge. On a phone
+ * the panel is a sheet over the page instead (`sheet`).
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { ExternalLink, PanelRight, PanelRightClose, Plus, RotateCw, X } from '@hanzogui/lucide-icons-2';
+import { DropdownMenu } from '@hanzo/ui';
+import { useEffect, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { address, PAGE } from './tabs.js';
+/** The shortcut, as this platform writes it. */
+const KEY = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent) ? '⌘.' : 'Ctrl+.';
+/**
+ * The header's Panel button: a word beside the mark while the panel is shut on
+ * a laptop, because a glyph alone was a control nobody found; the mark alone
+ * below `lg`, where the header has no room for the word, and while it is open,
+ * when the panel and its own close are in view (below `lg` it steps aside).
+ */
+export function PanelToggle({ open, onToggle }) {
+    return (_jsxs(XStack, { render: "button", role: "button", "data-slot": "side-toggle", "aria-label": open ? 'Close the side panel' : 'Open the side panel', "aria-pressed": open, "aria-keyshortcuts": "Meta+Period Control+Period", ...{ title: `${open ? 'Close' : 'Open'} the side panel (${KEY})` }, onPress: onToggle, items: "center", gap: "$1.5", px: "$2", $lg: { px: open ? '$2' : '$2.5' }, "$max-lg": open ? { display: 'none' } : undefined, height: 30, rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: open ? '$hover' : 'transparent', cursor: "pointer", shrink: 0, hoverStyle: { bg: '$hover' }, children: [open ? _jsx(PanelRightClose, { size: 14 }) : _jsx(PanelRight, { size: 14 }), open ? null : (_jsx(SizableText, { size: "$2", color: "$ink", "$max-lg": { display: 'none' }, children: "Panel" }))] }));
+}
+const suffix = (s) => {
+    const dot = s.lastIndexOf('.');
+    return dot > 0 ? s.slice(dot + 1).toLowerCase() : '';
+};
+const PICTURES = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'avif', 'svg'];
+const FRAMED = ['html', 'htm', 'txt', 'md', 'json', 'csv', 'pdf', 'css', 'js', 'ts'];
+/**
+ * A page tab: an address with its bar, or bytes rendered as their type.
+ *
+ * Two sandboxes. Bytes and an object URL take THIS page's origin, so a script
+ * an answer wrote runs without `allow-same-origin`, never with our storage. A
+ * remote page takes its own origin, and withholding same-origin breaks it.
+ */
+export function Page({ tab, onGo }) {
+    const own = tab.body !== undefined;
+    const src = useMemo(() => (own ? URL.createObjectURL(new Blob([tab.body], { type: tab.type || 'text/plain' })) : (tab.url ?? '')), [own, tab.body, tab.type, tab.url]);
+    useEffect(() => () => (own ? URL.revokeObjectURL(src) : undefined), [own, src]);
+    const [round, again] = useState(0);
+    const [typed, setTyped] = useState(tab.url ?? '');
+    const local = own || src.startsWith('blob:');
+    const type = tab.type ?? '';
+    const ext = suffix(tab.title);
+    const picture = type.startsWith('image/') || PICTURES.includes(ext);
+    const shows = !local || own || !type || type.startsWith('text/') || type === 'application/pdf' || type === 'application/json' || FRAMED.includes(ext);
+    return (_jsxs(YStack, { flex: 1, minH: 0, "data-slot": "side-page", children: [_jsxs(XStack, { px: "$2", py: "$1.5", gap: "$1.5", items: "center", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsx(XStack, { render: "button", role: "button", "aria-label": "Reload this tab", onPress: () => again((n) => n + 1), p: "$1.5", rounded: "$2", cursor: "pointer", hoverStyle: { bg: '$hover' }, children: _jsx(RotateCw, { size: 14 }) }), local ? (_jsx(SizableText, { flex: 1, minW: 0, size: "$1", color: "$soft", numberOfLines: 1, children: tab.title })) : (_jsx(XStack, { flex: 1, minW: 0, items: "center", px: "$2", height: 28, rounded: "$2", borderWidth: 1, borderColor: "$borderColor", bg: "$raised", children: _jsx("input", { defaultValue: tab.url ?? '', placeholder: "Type an address", "aria-label": "Address", spellCheck: false, autoFocus: !tab.url, onChange: (e) => setTyped(e.target.value), onKeyDown: (e) => {
+                                if (e.key === 'Enter' && address(typed))
+                                    onGo(address(typed));
+                            }, style: { width: '100%', border: 0, outline: 'none', background: 'transparent', color: 'var(--foreground)', font: 'inherit', fontSize: 13 } }, tab.id) })), src ? (_jsx(XStack, { render: "button", role: "button", "aria-label": "Open this tab in a new window", onPress: () => window.open(src, '_blank', 'noopener,noreferrer'), p: "$1.5", rounded: "$2", cursor: "pointer", hoverStyle: { bg: '$hover' }, children: _jsx(ExternalLink, { size: 14 }) })) : null] }), !src ? (_jsx(YStack, { flex: 1, items: "center", justify: "center", p: "$5", children: _jsx(SizableText, { size: "$2", color: "$soft", children: "Type an address to open a page here." }) })) : picture && !own ? (_jsx(YStack, { flex: 1, minH: 0, items: "center", justify: "center", p: "$3", overflowY: "auto", overflowX: "hidden", children: _jsx("img", { src: src, alt: tab.title, style: { maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' } }, round) })) : shows ? (_jsx("iframe", { src: src, title: tab.title, sandbox: local ? 'allow-scripts allow-popups allow-forms' : 'allow-same-origin allow-scripts allow-popups allow-forms', style: { border: 0, width: '100%', height: '100%', display: 'block', background: 'var(--background)' } }, round)) : (_jsxs(YStack, { flex: 1, items: "center", justify: "center", p: "$5", gap: "$2", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: `${(ext || type || 'This').toUpperCase()} previews aren’t supported yet.` }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Open it in a new window to view it." })] }))] }));
+}
+const DRAG = 'text/x-hanzo-tab';
+/** One tab in the strip: what you press, and its cross. */
+function Leaf({ tab, on, side, index, label }) {
+    return (_jsxs(XStack, { "data-slot": "side-tab", "data-tab": tab.id, items: "center", gap: "$0.5", pl: "$2.5", pr: "$1", height: 30, maxW: 160, shrink: 0, rounded: "$3", bg: on ? '$edge' : 'transparent', hoverStyle: { bg: on ? '$edge' : '$hover' }, ...{
+            draggable: true,
+            onDragStart: (e) => {
+                e.dataTransfer.setData(DRAG, tab.id);
+                e.dataTransfer.effectAllowed = 'move';
+            },
+            onDragOver: (e) => {
+                if (Array.from(e.dataTransfer.types).includes(DRAG))
+                    e.preventDefault();
+            },
+            onDrop: (e) => {
+                const id = e.dataTransfer.getData(DRAG);
+                if (!id || id === tab.id)
+                    return;
+                e.preventDefault();
+                side.move(id, index);
+            },
+        }, children: [_jsx(XStack, { render: "button", role: "tab", id: `side-tab-${tab.id}`, "aria-selected": on, "aria-controls": "side-body", tabIndex: on ? 0 : -1, onPress: () => side.pick(tab.id), onKeyDown: (e) => {
+                    const step = e.key === 'ArrowRight' ? 1 : e.key === 'ArrowLeft' ? -1 : 0;
+                    if (step && e.shiftKey && (e.metaKey || e.ctrlKey)) {
+                        e.preventDefault?.();
+                        side.move(tab.id, index + step);
+                        return;
+                    }
+                    if (step) {
+                        e.preventDefault?.();
+                        const next = side.tabs[(index + step + side.tabs.length) % side.tabs.length];
+                        if (!next)
+                            return;
+                        side.pick(next.id);
+                        queueMicrotask(() => document.getElementById(`side-tab-${next.id}`)?.focus());
+                        return;
+                    }
+                    if (e.key === 'Delete' || e.key === 'Backspace') {
+                        e.preventDefault?.();
+                        side.shut(tab.id);
+                    }
+                }, flex: 1, minW: 0, cursor: "pointer", children: _jsx(SizableText, { size: "$2", color: on ? '$ink' : '$soft', numberOfLines: 1, children: label }) }), _jsx(XStack, { render: "button", role: "button", "aria-label": `Close ${label}`, tabIndex: -1, onPress: () => side.shut(tab.id), p: "$1", rounded: "$2", cursor: "pointer", opacity: on ? 0.8 : 0.45, hoverStyle: { bg: '$hover', opacity: 1 }, children: _jsx(X, { size: 12 }) })] }));
+}
+/** The panel: the strip, and the chosen tab. */
+export function Panel({ side, kinds, onHide, sheet = false, bar, menu, label = 'Side panel' }) {
+    const tab = side.tabs.find((t) => t.id === side.at) ?? null;
+    const kind = tab && tab.kind !== PAGE ? kinds.find((k) => k.id === tab.kind) : undefined;
+    const bleed = !tab || tab.kind === PAGE || Boolean(kind?.bleed);
+    const closed = kinds.filter((k) => !side.tabs.some((t) => t.kind === k.id));
+    const title = (t) => (t.kind === PAGE ? t.title || 'New page' : (kinds.find((k) => k.id === t.kind)?.label ?? t.title));
+    const body = (_jsxs(YStack, { role: "complementary", "aria-label": label, "data-slot": "side", flex: 1, minW: 0, minH: 0, overflow: "hidden", style: { borderRadius: 'inherit' }, children: [_jsxs(XStack, { px: "$2", py: "$1.5", gap: "$1", items: "center", borderBottomWidth: 1, borderColor: "$borderColor", shrink: 0, children: [_jsx(XStack, { role: "tablist", "aria-label": "Tabs", flex: 1, minW: 0, gap: "$1", items: "center", overflowX: "auto", overflowY: "hidden", "$platform-web": { scrollbarWidth: 'none' }, children: side.tabs.map((t, i) => (_jsx(Leaf, { tab: t, on: t.id === side.at, side: side, index: i, label: title(t) }, t.id))) }), _jsx(DropdownMenu, { trigger: _jsx(XStack, { render: "button", role: "button", "aria-label": "Open a tab", p: "$1.5", rounded: "$2", cursor: "pointer", hoverStyle: { bg: '$hover' }, children: _jsx(Plus, { size: 16 }) }), items: [
+                            ...closed.map((k) => ({ key: k.id, label: k.label, onSelect: () => side.open({ kind: k.id, title: k.label }) })),
+                            { key: PAGE, label: 'Page', description: 'An address, framed here', onSelect: () => side.open({ kind: PAGE, title: 'New page', url: '' }) },
+                        ] }), menu, _jsx(XStack, { render: "button", role: "button", "aria-label": "Close the side panel", onPress: onHide, p: "$1.5", rounded: "$2", cursor: "pointer", hoverStyle: { bg: '$hover' }, children: _jsx(PanelRightClose, { size: 16 }) })] }), bar, _jsx(YStack, { id: "side-body", role: "tabpanel", "aria-labelledby": tab ? `side-tab-${tab.id}` : undefined, 
+                // What a tab lays over itself (a door's "Connecting…") stays inside it, under the strip.
+                position: "relative", flex: 1, minH: 0, overflowY: bleed ? 'hidden' : 'auto', overflowX: "hidden", px: bleed ? 0 : '$3', py: bleed ? 0 : '$3', children: !tab ? (_jsxs(YStack, { flex: 1, items: "center", justify: "center", gap: "$2", p: "$5", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: "Nothing open here." }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Press + to open a tab." })] })) : tab.kind === PAGE ? (_jsx(Page, { tab: tab, onGo: (url) => side.go(tab.id, url) }, tab.id)) : kind ? (kind.render()) : (_jsx(SizableText, { size: "$2", color: "$soft", children: "This tab is not offered here." })) })] }));
+    if (!sheet || typeof document === 'undefined')
+        return body;
+    // A phone: a sheet from the foot of the window over a dim, the same panel in it.
+    return createPortal(_jsxs(YStack, { "data-slot": "side-sheet", position: "fixed", t: 0, r: 0, b: 0, l: 0, z: 60, children: [_jsx(YStack, { render: "button", "aria-label": "Close the side panel", onPress: onHide, position: "absolute", t: 0, r: 0, l: 0, height: "12dvh", bg: "var(--surface-scrim)" }), _jsx(YStack, { position: "absolute", l: 0, r: 0, b: 0, height: "88dvh", bg: "$background", borderTopWidth: 1, borderColor: "$borderColor", style: { borderTopLeftRadius: 16, borderTopRightRadius: 16 }, overflow: "hidden", children: body })] }), document.body);
+}

package/lib/pick.d.ts

@@ -1,2 +1,10 @@
 import { type Model } from './api/models.ts';
+/**
+ * What a run starts on with nothing picked on this screen: Enso when Enso is
+ * kept — the router serves every ask whether or not a catalog lists it — else
+ * the kept model while the catalog still offers it (or has not answered yet),
+ * else the catalog's own default for a conversation, else Enso. Never '' — an
+ * empty chooser reads "Choose a model" and the run would name nothing on purpose.
+ */
+export declare function standing(kept: string, catalog: readonly Model[]): string;
 export declare function usePick(kept: string, keep: (id: string) => void, catalog: readonly Model[]): readonly [string, (id: string) => void];

package/lib/pick.js

@@ -7,7 +7,24 @@
  * before this rule) is not a default either, so Enso stands in for it.
  */
 import { useState } from 'react';
+import { defaultModel } from '@hanzo/ui/models/catalog';
 import { ENSO } from './api/models.js';
+/**
+ * What a run starts on with nothing picked on this screen: Enso when Enso is
+ * kept — the router serves every ask whether or not a catalog lists it — else
+ * the kept model while the catalog still offers it (or has not answered yet),
+ * else the catalog's own default for a conversation, else Enso. Never '' — an
+ * empty chooser reads "Choose a model" and the run would name nothing on purpose.
+ */
+export function standing(kept, catalog) {
+    if (kept === ENSO)
+        return ENSO;
+    const premium = catalog.find((m) => m.id === kept)?.class === 'premium';
+    const offered = catalog.length === 0 || catalog.some((m) => m.id === kept);
+    if (kept && !premium && offered)
+        return kept;
+    return defaultModel(catalog, 'chat') || ENSO;
+}
 export function usePick(kept, keep, catalog) {
     const [once, setOnce] = useState(null);
     const premium = (id) => catalog.find((m) => m.id === id)?.class === 'premium';
@@ -17,5 +34,5 @@ export function usePick(kept, keep, catalog) {
         setOnce(null);
         keep(id);
     };
-    return [once ?? (premium(kept) ? ENSO : kept), pick];
+    return [once ?? standing(kept, catalog), pick];
 }

package/lib/plan.d.ts

@@ -0,0 +1,78 @@
+/**
+ * A plan as a person reads it, and how much of it is used.
+ *
+ * NAMED BY FAMILY. A slug is the catalog's rung (`max-20x`); a person reads the
+ * family — Free, Go, Pro, Max, Team, Agency, Enterprise — with the rung inside
+ * it as a small tag (`20x`). A slug outside the families reads as words
+ * (`growth-plus` is Growth Plus); one that is an id is never printed, and reads
+ * as the tier it is served under.
+ *
+ * MEASURED IN SHARES. `GET /v1/ai/limits` (cloud apps/ai/limits_ops.go) answers
+ * every window as a percent used, its state and when it starts over — the
+ * session, the UTC day, and each class's billing period — never an amount.
+ *
+ * THREE KINDS OF ACCOUNT, three meters: on a PLAN its windows are the meter, on
+ * FREE the free allowance left today is, and with CREDITS and no plan (pay as
+ * you go) the balance is. A plan's meter never shows money.
+ */
+export interface Label {
+    /** The family: `Max`. */
+    name: string;
+    /** The rung inside it, drawn small beside the name: `20x`; '' for none. */
+    tag: string;
+}
+/**
+ * A plan as a person reads it, from the slug billing serves (`max-20x`) and the
+ * tier class beside it (`pro`). Null where neither names a plan: no slug and a
+ * free or trial tier, which is no plan at all.
+ */
+export declare function label(slug?: string | null, tier?: string | null): Label | null;
+/** A label as a sentence says it: `Max 20x`. */
+export declare const said: (l: Label | null) => string;
+export type State = 'ok' | 'near' | 'limited';
+/** One window, as a share used. */
+export interface Share {
+    /** Used, 0 to 100. */
+    percent: number;
+    state: State;
+    /** When it starts over, RFC 3339; '' for a session not running, which starts with the next request. */
+    resets: string;
+}
+/**
+ * One window off the wire, or null for a window that bounds nothing. The
+ * server states a window's state only when the plan sets it a limit
+ * (limits_ops.go `window`), so a window with no state is unbounded and not drawn.
+ */
+export declare function share(v: unknown): Share | null;
+/** Which meter an account reads. */
+export type Kind = 'plan' | 'free' | 'credits';
+/**
+ * The meter for a plan slug (billing's or the limits', `free` or '' for none),
+ * the prepaid balance in cents (null where it could not be read) and the tier
+ * class billing serves the account under: a paid plan's windows — a rung, or a
+ * paid class with no rung (a plan recorded outside checkout, a partner org) —
+ * and with no plan, the balance where there is money in it, else the free
+ * allowance.
+ */
+export declare function kind(plan: string | null | undefined, balance: number | null, tier?: string | null): Kind;
+/**
+ * When something starts over, as a sentence says it: a time for within a day
+ * (`5:00 PM`), else a date (`Nov 1`), periods ending on UTC days. '' for none.
+ */
+export declare function when(iso: string, now?: number): string;
+/**
+ * What a reader whose plan's included usage is used is told: the plan, which
+ * models, and when they come back — `Your Max 20x plan’s included premium model
+ * usage is used until 5:00 PM.`
+ */
+export declare function spent(l: Label | null, classes: readonly string[], resets: string, now?: number): string;
+/**
+ * The ways past a spent allowance, in this order and two at most: keep going
+ * on credits — or, with none the server would let pay, add some — then the
+ * upgrade; and a switch to another model where the server offers one. Taken
+ * from what the server sent, so nothing is offered that it would refuse.
+ */
+export declare function ways<A extends {
+    kind: string;
+    label: string;
+}>(actions: readonly A[]): A[];