@hanzo/build 0.2.52 → 0.2.53

package/lib/standing.js

@@ -0,0 +1,64 @@
+/**
+ * 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 { 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';
+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) {
+    const all = await Promise.allSettled([tier(t), limits(t), allowance(t), balance(t)]);
+    if (all.every((r) => r.status === 'rejected'))
+        throw all[0].reason;
+    const [billed, used, free, money] = [got(all[0]), got(all[1]), got(all[2]), got(all[3])];
+    // Billing names what was bought; the limits name the rung the gate counts. A
+    // plan either one names is the plan.
+    const slug = billed?.plan || (used && used.plan !== 'free' ? used.plan : '');
+    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: '' },
+        limits: used,
+        allowance: free,
+        balance: money,
+    };
+}
+/** The standing for `t`, read when `enabled` (a menu that is open) and again when the org changes. */
+export function useStanding(t, enabled = true) {
+    return useRead(enabled && t.token() ? () => stand(t) : null, null, [t, enabled]);
+}
+const RANK = { ok: 0, near: 1, limited: 2 };
+/**
+ * A plan's windows, shortest first: the session, the UTC day, and the month —
+ * 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()) {
+    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);
+    const out = [];
+    const add = (name, w) => {
+        if (!w)
+            return;
+        const at = when(w.resets, now);
+        out.push({ name, percent: w.percent, state: w.state, resets: at ? `Resets ${at}` : '' });
+    };
+    add('Session', l.session);
+    add('Today', l.day);
+    add('Month', month);
+    return out;
+}
+/** The share of the free allowance left in its window, 0 to 100, or null where none bounds the account. */
+export function left(a) {
+    if (!a || a.limit <= 0)
+        return null;
+    return Math.max(0, 100 - Math.round((Math.min(a.used, a.limit) / a.limit) * 100));
+}

package/lib/sync.js

@@ -11,7 +11,10 @@ import { SizableText, XStack, YStack } from '@hanzo/gui';
 import { Check, ChevronLeft, ChevronRight, Plus, X } from '@hanzogui/lucide-icons-2';
 import { Button, Input } from '@hanzo/ui';
 import { useEffect, useMemo, useState } from 'react';
-import { accounts, bring, connect, grants } from './api/github.js';
+import { here, useBack } from './back.js';
+import { Refusal } from './api/call.js';
+import { accounts, bring, grants } from './api/github.js';
+import { authorize } from './api/provider.js';
 import { readPending, writePending } from './choice.js';
 import { useRead } from './data.js';
 import { useHost, useTarget } from './host.js';
@@ -47,24 +50,35 @@ export function Sync() {
         const all = names.every((n) => picked.includes(n));
         setPicked((cur) => (all ? cur.filter((n) => !names.includes(n)) : [...new Set([...cur, ...names])]));
     };
+    // Coming back from GitHub's App install lands here, says what happened, and reads the list again.
+    useBack(t, signed, setError, list.reload);
+    /**
+     * Install the platform's GitHub App on another account — an organization admin's
+     * act — and come back to this page: the App, not a person's own sign-in, is what
+     * grants an organization's repositories.
+     */
     const addOrg = async () => {
         setError('');
+        if (!host.admin) {
+            setError('An organization admin installs the GitHub App on another account.');
+            return;
+        }
         try {
-            const url = await connect(t);
-            host.open(url);
+            host.open(await authorize(t, 'github', here()));
         }
         catch (e) {
-            setError(e.message);
+            setError(e instanceof Refusal && e.status === 403 ? 'An organization admin installs the GitHub App on another account.' : 'GitHub could not be reached to install the App. Try again.');
         }
     };
     const send = async () => {
         setBusy(true);
         setError('');
         try {
-            await bring(t, picked);
+            const queued = await bring(t, picked);
+            // Each waits under the name it takes on the forge, as the import says it, else as GitHub's listing says it will.
             const next = [
                 ...readPending(host.org).filter((p) => !picked.includes(p.fullName)),
-                ...chosen.map((r) => ({ fullName: r.fullName, name: r.name })),
+                ...chosen.map((r) => ({ fullName: r.fullName, name: queued.codebases[r.fullName.toLowerCase()] || r.codebase || r.name })),
             ];
             writePending(host.org, next);
             setSyncing(true);
@@ -102,7 +116,7 @@ export function Sync() {
             window.clearInterval(id);
         };
     }, [syncing, t, host.org, host.go, picked]);
-    return (_jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", children: [_jsxs(XStack, { px: "$6", pt: "$5", pb: "$2", gap: "$2", items: "center", children: [_jsx(XStack, { render: "button", "aria-label": "Back to projects", onPress: back, children: _jsx(SizableText, { size: "$2", color: "$soft", children: "Projects" }) }), _jsx(SizableText, { size: "$2", color: "$soft", children: "/" }), _jsx(SizableText, { size: "$2", color: "$ink", children: "Sync" })] }), _jsxs(YStack, { flex: 1, items: "center", justify: "center", px: "$6", pb: "$10", gap: "$5", children: [_jsxs(XStack, { justify: "center", gap: "$6", children: [_jsx(Step, { label: "Select repositories", done: step === 'access', current: step === 'pick' }), _jsx(Step, { label: "Repository access", done: false, current: step === 'access' })] }), _jsxs(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$5", bg: "$panel", px: "$6", py: "$6", gap: "$4", width: "100%", maxW: 460, children: [step === 'pick' && !owner ? (_jsxs(_Fragment, { children: [_jsxs(YStack, { gap: "$1", items: "center", children: [_jsx(SizableText, { size: "$5", color: "$ink", children: "Select repositories" }), _jsxs(SizableText, { size: "$2", color: "$soft", style: { textAlign: 'center' }, children: ["Choose repositories to bring into ", dest] })] }), _jsxs(Panel, { children: [_jsx(Input, { value: q, onChangeText: setQ, placeholder: "Search organizations", "aria-label": "Search organizations", disabled: !signed }), signed ? (_jsx(SizableText, { size: "$1", color: "$soft", children: `${orgs.length} ${orgs.length === 1 ? 'organization' : 'organizations'}` })) : null, list.error ? _jsx(Soft, { children: list.error.message }) : null, !signed ? (_jsx(Soft, { children: "Sign in to choose repositories the GitHub connection can read." })) : list.loading && rows.length === 0 && orgs.length === 0 ? (_jsx(Soft, { children: "Reading the connection\u2026" })) : shownOrgs.length === 0 ? (_jsx(Soft, { children: orgs.length === 0 ? 'No organizations on this connection yet.' : 'Nothing matches.' })) : (shownOrgs.map((a) => (_jsxs(XStack, { render: "button", "aria-label": a.blocked ? `${a.name} needs an organization admin` : `Open ${a.name}`, disabled: a.blocked, items: "center", gap: "$2", py: "$2", borderTopWidth: 1, borderColor: "$borderColor", onPress: () => {
+    return (_jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", children: [_jsxs(XStack, { px: "$6", pt: "$5", pb: "$2", gap: "$2", items: "center", children: [_jsx(XStack, { render: "button", "aria-label": "Back to projects", onPress: back, children: _jsx(SizableText, { size: "$2", color: "$soft", children: "Projects" }) }), _jsx(SizableText, { size: "$2", color: "$soft", children: "/" }), _jsx(SizableText, { size: "$2", color: "$ink", children: "Sync" })] }), _jsxs(YStack, { flex: 1, items: "center", justify: "center", px: "$6", pb: "$10", gap: "$5", children: [_jsxs(XStack, { justify: "center", gap: "$6", children: [_jsx(Step, { label: "Select repositories", done: step === 'access', current: step === 'pick' }), _jsx(Step, { label: "Repository access", done: false, current: step === 'access' })] }), _jsxs(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$5", bg: "$panel", px: "$6", py: "$6", gap: "$4", width: "100%", maxW: 460, children: [step === 'pick' && !owner ? (_jsxs(_Fragment, { children: [_jsxs(YStack, { gap: "$1", items: "center", children: [_jsx(SizableText, { size: "$5", color: "$ink", children: "Select repositories" }), _jsxs(SizableText, { size: "$2", color: "$soft", style: { textAlign: 'center' }, children: ["Choose repositories to bring into ", dest] })] }), _jsxs(Panel, { children: [_jsx(Input, { value: q, onChangeText: setQ, placeholder: "Search organizations", "aria-label": "Search organizations", disabled: !signed }), signed ? (_jsx(SizableText, { size: "$1", color: "$soft", children: `${orgs.length} ${orgs.length === 1 ? 'organization' : 'organizations'}` })) : null, list.error ? _jsx(Soft, { children: "The GitHub connection could not be read right now." }) : null, !signed ? (_jsx(Soft, { children: "Sign in to choose repositories the GitHub connection can read." })) : list.loading && rows.length === 0 && orgs.length === 0 ? (_jsx(Soft, { children: "Reading the connection\u2026" })) : shownOrgs.length === 0 ? (_jsx(Soft, { children: orgs.length === 0 ? 'No organizations on this connection yet.' : 'Nothing matches.' })) : (shownOrgs.map((a) => (_jsxs(XStack, { render: "button", "aria-label": a.blocked ? `${a.name} needs an organization admin` : `Open ${a.name}`, disabled: a.blocked, items: "center", gap: "$2", py: "$2", borderTopWidth: 1, borderColor: "$borderColor", onPress: () => {
                                                     setOwner(a.name);
                                                     setQ('');
                                                 }, children: [_jsx(SizableText, { flex: 1, size: "$2", color: a.blocked ? '$soft' : '$ink', numberOfLines: 1, children: a.name }), a.blocked ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "Needs organization admin" })) : (_jsx(ChevronRight, { size: 14 }))] }, a.name)))), _jsxs(XStack, { render: "button", "aria-label": "Add organization", items: "center", gap: "$2", py: "$2", onPress: () => void addOrg(), disabled: !signed, children: [_jsx(Plus, { size: 14 }), _jsx(SizableText, { size: "$2", color: "$ink", children: "Add organization" })] })] })] })) : null, step === 'pick' && owner ? (_jsxs(_Fragment, { children: [_jsxs(YStack, { gap: "$1", items: "center", children: [_jsx(SizableText, { size: "$5", color: "$ink", children: "Select repositories" }), _jsxs(SizableText, { size: "$2", color: "$soft", style: { textAlign: 'center' }, children: ["Choose repositories to bring into ", dest] })] }), _jsxs(Panel, { children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(XStack, { render: "button", "aria-label": "All organizations", onPress: () => setOwner(''), children: _jsx(ChevronLeft, { size: 16 }) }), _jsx(SizableText, { flex: 1, size: "$2", color: "$ink", numberOfLines: 1, children: owner })] }), _jsx(Input, { value: q, onChangeText: setQ, placeholder: "Search repositories", "aria-label": "Search repositories" }), _jsxs(XStack, { justify: "space-between", items: "center", children: [_jsxs(SizableText, { size: "$1", color: "$soft", children: [ofOwner.length, " ", ofOwner.length === 1 ? 'repository' : 'repositories'] }), _jsx(XStack, { render: "button", "aria-label": "Select all", onPress: selectShown, disabled: shownRepos.length === 0, children: _jsx(SizableText, { size: "$1", color: "$ink", children: "Select all" }) })] }), shownRepos.length === 0 ? (_jsx(Soft, { children: "Nothing matches." })) : (shownRepos.map((r) => (_jsx(RepoRow, { repo: r, on: picked.includes(r.fullName), onPress: () => toggle(r.fullName) }, r.fullName)))), _jsxs(XStack, { render: "button", "aria-label": "Grant more repositories", items: "center", gap: "$2", py: "$2", onPress: () => void addOrg(), children: [_jsx(Plus, { size: 14 }), _jsx(SizableText, { size: "$2", color: "$ink", children: "Add repositories" })] })] })] })) : null, step === 'access' ? (_jsxs(_Fragment, { children: [_jsxs(YStack, { gap: "$1", items: "center", children: [_jsx(SizableText, { size: "$5", color: "$ink", children: "Repository access" }), _jsx(SizableText, { size: "$2", color: "$soft", style: { textAlign: 'center' }, children: "Review who can read these repositories" })] }), _jsxs(XStack, { gap: "$2", items: "center", children: [_jsxs(XStack, { flex: 1, items: "center", gap: "$2", px: "$3", py: "$2", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(XStack, { render: "button", "aria-label": "Clear the selection", onPress: () => { setPicked([]); setStep('pick'); }, children: _jsx(X, { size: 12 }) }), _jsx(SizableText, { flex: 1, size: "$2", color: "$ink", numberOfLines: 1, children: more ? `${lead}, +${more} more` : lead })] }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => setStep('pick'), children: "Edit" })] }), _jsxs(XStack, { justify: "space-between", gap: "$4", children: [_jsxs(YStack, { gap: "$1", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "Who gets access" }), _jsxs(SizableText, { size: "$2", color: "$ink", children: [host.person?.name || host.person?.email || 'You', " \u00B7 You"] })] }), _jsxs(YStack, { gap: "$1", items: "flex-end", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "Role" }), _jsx(SizableText, { size: "$2", color: "$ink", children: host.admin ? 'Repository admin' : 'Member' })] })] }), _jsxs(SizableText, { size: "$2", color: "$soft", style: { textAlign: 'center' }, children: ["Anyone with access to ", dest] })] })) : null, error ? _jsx(Soft, { children: error }) : null, step === 'pick' ? (_jsx(Button, { width: "100%", disabled: !owner || picked.length === 0, onPress: () => setStep('access'), children: "Continue" })) : (_jsxs(YStack, { gap: "$3", items: "center", width: "100%", children: [_jsx(Button, { width: "100%", disabled: busy || syncing || picked.length === 0, onPress: () => void send(), children: syncing || busy ? 'Syncing…' : `Sync ${picked.length} ${picked.length === 1 ? 'repository' : 'repositories'} to ${dest}` }), syncing ? null : (_jsx(XStack, { render: "button", "aria-label": "Sync later", onPress: back, children: _jsx(SizableText, { size: "$2", color: "$soft", children: "Sync later" }) }))] })), !signed ? (_jsx(Button, { width: "100%", onPress: () => host.signIn?.(), children: "Sign in" })) : null] })] })] }));
@@ -117,5 +131,5 @@ function Soft({ children }) {
     return (_jsx(SizableText, { size: "$2", color: "$soft", children: children }));
 }
 function RepoRow({ repo, on, onPress }) {
-    return (_jsxs(XStack, { render: "button", "aria-label": on ? `Selected ${repo.name}` : `Select ${repo.name}`, "aria-pressed": on, items: "center", gap: "$2", py: "$2", borderTopWidth: 1, borderColor: "$borderColor", onPress: onPress, children: [_jsx(YStack, { width: 14, height: 14, rounded: "$1", borderWidth: 1, borderColor: on ? '$ink' : '$borderColor', bg: on ? '$ink' : 'transparent' }), _jsx(SizableText, { flex: 1, size: "$2", color: "$ink", numberOfLines: 1, children: repo.name }), repo.imported ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "On Forge" })) : null] }));
+    return (_jsxs(XStack, { render: "button", "aria-label": on ? `Selected ${repo.name}` : `Select ${repo.name}`, "aria-pressed": on, items: "center", gap: "$2", py: "$2", borderTopWidth: 1, borderColor: "$borderColor", onPress: onPress, children: [_jsx(YStack, { width: 14, height: 14, rounded: "$1", borderWidth: 1, borderColor: on ? '$ink' : '$borderColor', bg: on ? '$ink' : 'transparent' }), _jsx(SizableText, { flex: 1, size: "$2", color: "$ink", numberOfLines: 1, children: repo.name }), repo.imported || repo.status === 'pending' ? (_jsx(SizableText, { size: "$1", color: "$soft", children: repo.imported ? (repo.status === 'conflict' ? 'On Forge · diverged' : 'On Forge') : 'Syncing…' })) : null] }));
 }

package/lib/tabs.d.ts

@@ -0,0 +1,53 @@
+/** One tab. A kind's id is the kind; a page's is minted. */
+export interface Tab {
+    id: string;
+    kind: string;
+    title: string;
+    /** A page's address. */
+    url?: string;
+    /** A page's own bytes, rendered as `type`. */
+    body?: string;
+    type?: string;
+}
+/** The tabs in a scope, in order, and the chosen one. */
+export interface Tabs {
+    tabs: Tab[];
+    at: string | null;
+}
+export declare const PAGE = "page";
+/** A scope as kept, or null when nothing is: the surface's seed stands in. A bad entry is dropped. */
+export declare function read(scope: string): Tabs | null;
+/** A tab opened: a kind already open is chosen, a page already open on the same thing is chosen. */
+export declare function opened(was: Tabs, tab: Omit<Tab, 'id'> & {
+    id?: string;
+}): Tabs;
+/** A tab shut: the one to its right is chosen, else the one to its left, as a browser does. */
+export declare function shut(was: Tabs, id: string): Tabs;
+/** A tab moved to `to`, the others closing up around it. */
+export declare function moved(was: Tabs, id: string, to: number): Tabs;
+export interface Deck extends Tabs {
+    open: (tab: Omit<Tab, 'id'> & {
+        id?: string;
+    }) => void;
+    pick: (id: string) => void;
+    shut: (id: string) => void;
+    move: (id: string, to: number) => void;
+    /** Point a page somewhere else. */
+    go: (id: string, url: string) => void;
+}
+/** A scope's tabs: as kept, else `seed`, and every change kept. */
+export declare function useDeck(scope: string, seed: Tabs): Deck;
+/** Whether the panel is open in `mode`, kept; `first` before anyone has said. */
+export declare function useShown(mode: string, first: boolean): readonly [boolean, (open: boolean) => void];
+/**
+ * Whether the panel is open: kept per mode where it is a column (`wide`), and
+ * for this page only where it is a sheet over everything — a phone opens on
+ * the conversation, never on a sheet it did not ask for.
+ */
+export declare function usePanel(mode: string, first: boolean, wide: boolean): readonly [boolean, (open: boolean) => void];
+/** ⌘. on a Mac, Ctrl+. elsewhere: the panel, from anywhere on the page. */
+export declare function useKey(toggle: () => void): void;
+/** The host and path of an address: as much as a title can honestly be. */
+export declare function name(url: string): string;
+/** An address as typed, made one that opens: https for a host, http for this machine. */
+export declare function address(typed: string): string;

package/lib/tabs.js

@@ -0,0 +1,197 @@
+/**
+ * The side panel's tabs, once, for Chat and Dev: what is open, in what order,
+ * which one is chosen, and whether the panel is open at all — kept as it was
+ * left. The panel that draws them is `Panel` (panel.tsx).
+ *
+ *   hanzo.side.<mode>     whether the panel is open in Chat or in Dev
+ *   hanzo.side.<scope>    its tabs, their order, and the chosen one
+ *
+ * A tab is a KIND the surface offers (Artifacts, Preview, Files, Diff,
+ * Terminal, Sources, …), one of each, or a PAGE: an address, or the bytes of
+ * something an answer wrote, rendered. `+` opens a kind that is not open or a
+ * new page; a tab is dragged to reorder (Ctrl/⌘+Shift+←/→ from the keyboard)
+ * and shut with its cross (Delete). A page's own bytes are kept with it, so an
+ * artifact's tab survives a reload; an object URL does not and is not kept.
+ *
+ */
+import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
+export const PAGE = 'page';
+/** Bytes kept with a page tab, at most: a page an answer wrote, not a dump. */
+const KEEP = 200_000;
+const where = (scope) => `hanzo.side.${scope}`;
+function store() {
+    try {
+        return typeof window === 'undefined' ? null : window.localStorage;
+    }
+    catch {
+        return null;
+    }
+}
+// The scopes this document has read, so a switch back costs no parse.
+const live = new Map();
+const listeners = new Set();
+const announce = () => {
+    for (const l of listeners)
+        l();
+};
+const subscribe = (l) => {
+    listeners.add(l);
+    return () => {
+        listeners.delete(l);
+    };
+};
+const isTab = (t) => !!t && typeof t.id === 'string' && typeof t.kind === 'string' && typeof t.title === 'string';
+/** A scope as kept, or null when nothing is: the surface's seed stands in. A bad entry is dropped. */
+export function read(scope) {
+    if (live.has(scope))
+        return live.get(scope);
+    let held = null;
+    try {
+        const raw = store()?.getItem(where(scope));
+        if (raw) {
+            const v = JSON.parse(raw);
+            // An object URL dies with the document that minted it: a page holding only one is not kept.
+            const tabs = (Array.isArray(v.tabs) ? v.tabs.filter(isTab) : []).filter((t) => t.kind !== PAGE || t.body !== undefined || !t.url?.startsWith('blob:'));
+            held = { tabs, at: tabs.some((t) => t.id === v.at) ? v.at : (tabs[0]?.id ?? null) };
+        }
+    }
+    catch {
+        held = null;
+    }
+    live.set(scope, held);
+    return held;
+}
+function write(scope, next) {
+    live.set(scope, next);
+    try {
+        const kept = { ...next, tabs: next.tabs.map((t) => (t.body !== undefined && t.body.length > KEEP ? { ...t, body: undefined } : t)) };
+        store()?.setItem(where(scope), JSON.stringify(kept));
+    }
+    catch {
+        // A browser that refuses storage keeps the tabs for this page.
+    }
+    announce();
+}
+let minted = 0;
+const mint = () => `p${Date.now().toString(36)}${(minted++).toString(36)}`;
+/** A tab opened: a kind already open is chosen, a page already open on the same thing is chosen. */
+export function opened(was, tab) {
+    const same = was.tabs.find((t) => tab.kind === PAGE ? t.kind === PAGE && ((tab.url && t.url === tab.url) || (tab.body !== undefined && t.body === tab.body && t.title === tab.title)) : t.kind === tab.kind);
+    if (same)
+        return { ...was, at: same.id };
+    const id = tab.id ?? (tab.kind === PAGE ? mint() : tab.kind);
+    return { tabs: [...was.tabs, { ...tab, id }], at: id };
+}
+/** A tab shut: the one to its right is chosen, else the one to its left, as a browser does. */
+export function shut(was, id) {
+    const gone = was.tabs.findIndex((t) => t.id === id);
+    if (gone < 0)
+        return was;
+    const tabs = was.tabs.filter((t) => t.id !== id);
+    if (was.at !== id)
+        return { ...was, tabs };
+    return { tabs, at: (tabs[gone] ?? tabs[gone - 1])?.id ?? null };
+}
+/** A tab moved to `to`, the others closing up around it. */
+export function moved(was, id, to) {
+    const from = was.tabs.findIndex((t) => t.id === id);
+    if (from < 0)
+        return was;
+    const tabs = was.tabs.slice();
+    const [tab] = tabs.splice(from, 1);
+    tabs.splice(Math.max(0, Math.min(tabs.length, to)), 0, tab);
+    return { ...was, tabs };
+}
+/** A scope's tabs: as kept, else `seed`, and every change kept. */
+export function useDeck(scope, seed) {
+    const kept = useSyncExternalStore(subscribe, () => read(scope), () => null);
+    const now = kept ?? seed;
+    const change = (f) => write(scope, f(read(scope) ?? seed));
+    return {
+        ...now,
+        open: (tab) => change((was) => opened(was, tab)),
+        pick: (id) => change((was) => ({ ...was, at: id })),
+        shut: (id) => change((was) => shut(was, id)),
+        move: (id, to) => change((was) => moved(was, id, to)),
+        go: (id, url) => change((was) => ({ ...was, tabs: was.tabs.map((t) => (t.id === id ? { ...t, url, title: name(url) } : t)) })),
+    };
+}
+const shownKey = (mode) => where(`${mode}.open`);
+const shownLive = new Map();
+function shownOf(mode, first) {
+    if (shownLive.has(mode))
+        return shownLive.get(mode);
+    let v = first;
+    try {
+        const raw = store()?.getItem(shownKey(mode));
+        if (raw === '1' || raw === '0')
+            v = raw === '1';
+    }
+    catch {
+        v = first;
+    }
+    shownLive.set(mode, v);
+    return v;
+}
+/** Whether the panel is open in `mode`, kept; `first` before anyone has said. */
+export function useShown(mode, first) {
+    const open = useSyncExternalStore(subscribe, () => shownOf(mode, first), () => first);
+    const set = (next) => {
+        shownLive.set(mode, next);
+        try {
+            store()?.setItem(shownKey(mode), next ? '1' : '0');
+        }
+        catch {
+            // Kept for this page.
+        }
+        announce();
+    };
+    return [open, set];
+}
+/**
+ * Whether the panel is open: kept per mode where it is a column (`wide`), and
+ * for this page only where it is a sheet over everything — a phone opens on
+ * the conversation, never on a sheet it did not ask for.
+ */
+export function usePanel(mode, first, wide) {
+    const [kept, keep] = useShown(mode, first);
+    const [sheet, setSheet] = useState(false);
+    return wide ? [kept, keep] : [sheet, setSheet];
+}
+/** ⌘. on a Mac, Ctrl+. elsewhere: the panel, from anywhere on the page. */
+export function useKey(toggle) {
+    const now = useRef(toggle);
+    now.current = toggle;
+    useEffect(() => {
+        const press = (e) => {
+            if ((e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey && e.key === '.') {
+                e.preventDefault();
+                now.current();
+            }
+        };
+        window.addEventListener('keydown', press);
+        return () => window.removeEventListener('keydown', press);
+    }, []);
+}
+/** The host and path of an address: as much as a title can honestly be. */
+export function name(url) {
+    try {
+        const u = new URL(url);
+        return u.host + (u.pathname === '/' ? '' : u.pathname);
+    }
+    catch {
+        return url;
+    }
+}
+/** An address as typed, made one that opens: https for a host, http for this machine. */
+export function address(typed) {
+    const t = typed.trim();
+    if (!t)
+        return '';
+    // This machine first: `localhost:3000` reads as a scheme to the rule below.
+    if (/^(localhost|127\.0\.0\.1|\[::1\])(:|\/|$)/i.test(t))
+        return `http://${t}`;
+    if (/^[a-z][a-z0-9+.-]*:(?!\d)/i.test(t))
+        return t;
+    return `https://${t}`;
+}

package/lib/tools.d.ts

@@ -9,17 +9,10 @@ export declare function read(have: Attached[], list: FileList): Promise<{
     files: Attached[];
     note: string;
 }>;
-export declare function Attach({ files, onFiles, onNote }: {
-    files: Attached[];
-    onFiles: (f: Attached[]) => void;
-    onNote: (n: string) => void;
-}): import("react").JSX.Element;
+/** Ask the browser for files and read them in, within the caps; the picker is minted per press. */
+export declare function pick(have: Attached[], onFiles: (f: Attached[]) => void, onNote: (n: string) => void): void;
 /** The attached files as small removable marks. */
 export declare function Files({ files, onFiles }: {
     files: Attached[];
     onFiles: (f: Attached[]) => void;
 }): import("react").JSX.Element;
-export declare function Dictate({ onText, onNote }: {
-    onText: (text: string) => void;
-    onNote: (note: string) => void;
-}): import("react").JSX.Element;

package/lib/tools.js

@@ -1,16 +1,12 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * The composer's quiet controls, once, for every composer the builder draws:
- * attach files (which ride the prompt as text — nothing is uploaded anywhere
- * else) and dictate (recorded here, transcribed by the platform).
+ * Files with an ask, for every composer the builder draws: they ride the
+ * prompt as text — nothing is uploaded anywhere else. The paperclip is the
+ * composer's (prompt.tsx); this reads what it picks and draws the chips.
  */
 import { SizableText, XStack } from '@hanzo/gui';
-import { ChevronDown, Mic, MicOff, Paperclip, Plus, X } from '@hanzogui/lucide-icons-2';
+import { Paperclip, X } from '@hanzogui/lucide-icons-2';
 import { ComposerTool } from '@hanzo/ui/chat';
-import { ChipSelect } from '@hanzo/ui/product';
-import { useRef } from 'react';
-import { useTarget } from './host.js';
-import { useDictation } from './voice.js';
 const EACH = 100_000;
 const ALL = 200_000;
 /** The ask with its attachments appended as fenced text. */
@@ -39,25 +35,24 @@ export async function read(have, list) {
     }
     return { files, note };
 }
-export function Attach({ files, onFiles, onNote }) {
-    const picker = useRef(null);
-    return (_jsxs(_Fragment, { children: [_jsx(ComposerTool, { label: "Attach files", icon: _jsx(Plus, { size: 14 }), onPress: () => picker.current?.click() }), _jsx("input", { ref: picker, type: "file", multiple: true, hidden: true, 
-                // `hidden` alone loses to a reset that sets `display` on inputs.
-                style: { display: 'none' }, tabIndex: -1, "aria-hidden": true, onChange: (e) => {
-                    const input = e.currentTarget;
-                    // A file input always holds a list, empty or not.
-                    void read(files, input.files).then(({ files: next, note }) => {
-                        onFiles(next);
-                        onNote(note);
-                        input.value = '';
-                    });
-                } })] }));
+/** Ask the browser for files and read them in, within the caps; the picker is minted per press. */
+export function pick(have, onFiles, onNote) {
+    if (typeof document === 'undefined')
+        return;
+    const ask = document.createElement('input');
+    ask.type = 'file';
+    ask.multiple = true;
+    ask.onchange = () => {
+        if (!ask.files?.length)
+            return;
+        void read(have, ask.files).then(({ files, note }) => {
+            onFiles(files);
+            onNote(note);
+        });
+    };
+    ask.click();
 }
 /** The attached files as small removable marks. */
 export function Files({ files, onFiles }) {
     return (_jsx(_Fragment, { children: files.map((f) => (_jsxs(XStack, { items: "center", gap: "$1", px: "$2", height: 24, rounded: "$2", bg: "$raised", children: [_jsx(Paperclip, { size: 12 }), _jsx(SizableText, { size: "$1", color: "$ink", numberOfLines: 1, maxW: 140, children: f.name }), _jsx(ComposerTool, { label: `Remove ${f.name}`, icon: _jsx(X, { size: 12 }), onPress: () => onFiles(files.filter((x) => x !== f)) })] }, f.name))) }));
 }
-export function Dictate({ onText, onNote }) {
-    const voice = useDictation(useTarget(), onText, onNote);
-    return (_jsxs(XStack, { items: "center", children: [_jsx(ComposerTool, { label: !voice.able ? 'Dictation needs a microphone this page can record' : voice.on ? 'Stop and transcribe' : voice.busy ? 'Transcribing…' : 'Dictate', icon: voice.on ? _jsx(MicOff, { size: 14 }) : _jsx(Mic, { size: 14 }), onPress: () => void voice.toggle(), disabled: !voice.able || voice.busy, "aria-pressed": voice.on }), _jsx(ChipSelect, { quiet: true, name: "Dictation language", icon: _jsx(ChevronDown, { size: 12 }), label: "", chosen: voice.languages.find((l) => l.id === voice.language), items: voice.languages, onChange: (l) => voice.setLanguage(l.id), placeholder: "Search languages\u2026", disabled: !voice.able })] }));
-}

package/lib/transcript.d.ts

@@ -1,7 +1,8 @@
 import { type Verdict } from '@hanzo/ui/agents';
 import { type ReactNode } from 'react';
 import type { Card } from './api/turn.ts';
-export declare function Transcript({ cards, live, empty, header, onApprove, approving, onVerdict, }: {
+import { type Artifact, type Listen } from './reply.tsx';
+export declare function Transcript({ cards, live, empty, header, onApprove, approving, onVerdict, onOpen, onDiff, listen, end, }: {
     cards: Card[];
     /** The run is still working: a card still running shows it; otherwise it was cut off. */
     live: boolean;
@@ -12,4 +13,12 @@ export declare function Transcript({ cards, live, empty, header, onApprove, appr
     approving?: boolean;
     /** Record a verdict on what the agent said; throws when it did not land. */
     onVerdict: (v: Verdict) => Promise<void>;
+    /** Open what an answer wrote in the side panel. */
+    onOpen?: (a: Artifact) => void;
+    /** Open the run's diff in the side panel. */
+    onDiff?: () => void;
+    /** Read an answer aloud. */
+    listen?: Listen;
+    /** After the last card: how the run ended, when it ended on an error. */
+    end?: ReactNode;
 }): import("react").JSX.Element;

package/lib/transcript.js

@@ -9,26 +9,41 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * It follows the run to the bottom as it streams and stops when the reader
  * scrolls up (Thread). Everything drawn is text.
+ *
+ * It reads as Chat reads: the same measure (`MEASURE`), the same turns and
+ * prose sizes, the same row under an answer (`Reply`: copy, listen, and open
+ * what it wrote in the side panel), the same caret while an answer streams and
+ * the same `Failure` when a run stops on an error. What only a run has — its
+ * commands, edits and steps — are cards of their own between the turns.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
 import { Button } from '@hanzo/ui';
 import { Feedback } from '@hanzo/ui/agents';
 import { Code, Message, Step, Thread } from '@hanzo/ui/chat';
 import { useState } from 'react';
+import { GAP, MEASURE } from './prompt.js';
 import { Prose } from './prose.js';
+import { artifacts, lead, Reply } from './reply.js';
 /** A card's output, its tail: what a command said last is why it stopped. */
 const TAIL = 6000;
 const tail = (s) => (s.length > TAIL ? `…${s.slice(-TAIL)}` : s);
 const mono = { fontFamily: 'var(--f-mono, ui-monospace, monospace)' };
 /** What a thought is about: its first line, without the markdown that bolds it. */
 const firstLine = (text) => text.trim().split('\n')[0].replace(/[*_#`]/g, '').slice(0, 120);
-export function Transcript({ cards, live, empty, header, onApprove, approving = false, onVerdict, }) {
+export function Transcript({ cards, live, empty, header, onApprove, approving = false, onVerdict, onOpen, onDiff, listen, end, }) {
     // A card the run never finished is cut off once the run has ended, not still going.
     const state = (ran) => (ran === 'running' && !live ? 'cancelled' : ran);
-    return (_jsxs(Thread, { maxWidth: 0, gap: 14, column: { px: 0 }, "aria-label": "Transcript", children: [header, cards.length === 0 ? _jsx(YStack, { py: "$2", children: empty }) : null, cards.map((c) => {
+    // The answer still arriving: the last thing the agent said while the run works.
+    const last = live ? [...cards].reverse().find((c) => c.kind === 'said' && c.who === 'agent')?.key : undefined;
+    return (_jsxs(Thread, { gap: GAP, column: { maxW: MEASURE }, "aria-label": "Transcript", children: [header, cards.length === 0 ? _jsx(YStack, { py: "$2", children: empty }) : null, cards.map((c) => {
                 switch (c.kind) {
-                    case 'said':
-                        return c.who === 'person' ? (_jsx(Message, { role: "user", children: _jsx(SizableText, { size: "$3", color: "$ink", style: { whiteSpace: 'pre-wrap' }, children: c.text }) }, c.key)) : (_jsx(Message, { role: "assistant", actions: _jsx(Judge, { text: c.text, onVerdict: onVerdict }), children: _jsx(Prose, { text: c.text }) }, c.key));
+                    case 'said': {
+                        if (c.who === 'person')
+                            return (_jsx(Message, { role: "user", children: _jsx(Prose, { text: c.text }) }, c.key));
+                        const made = artifacts(c.text);
+                        const first = lead(made);
+                        return (_jsx(Message, { role: "assistant", busy: c.key === last, children: _jsxs(YStack, { gap: "$1", children: [_jsx(Prose, { text: c.text }), c.key === last ? null : (_jsx(Reply, { text: c.text, listen: listen, onOpen: first && onOpen ? () => onOpen(first) : undefined, children: _jsx(Judge, { onVerdict: onVerdict }) }))] }) }, c.key));
+                    }
                     case 'think':
                         return (_jsx(Step, { name: "Thought", detail: firstLine(c.text), status: "done", "aria-label": "Thought", children: _jsx(Prose, { text: c.text }) }, c.key));
                     case 'todo':
@@ -36,18 +51,18 @@ export function Transcript({ cards, live, empty, header, onApprove, approving =
                     case 'shell':
                         return (_jsx(Step, { name: "Shell", detail: c.command, status: state(c.ran), "aria-label": `Command ${c.command}`, children: _jsx(Code, { language: "shell", value: c.output ? `$ ${c.command}\n${c.output}` : `$ ${c.command}`, children: c.output ? `$ ${c.command}\n${tail(c.output)}` : `$ ${c.command}` }) }, c.key));
                     case 'edit':
-                        return (_jsx(Step, { name: c.files.length === 1 ? 'Edited' : c.files.length ? `Edited ${c.files.length} files` : 'Edited files', detail: c.files.join(', '), status: state(c.ran), "aria-label": `Edited ${c.files.join(', ') || 'files'}`, children: _jsx(SizableText, { size: "$1", color: "$soft", children: c.files.length ? `${c.files.join('\n')}\n\nThe diff is in the run’s Git tab.` : 'The agent named no files.' }) }, c.key));
+                        return (_jsx(Step, { name: c.files.length === 1 ? 'Edited' : c.files.length ? `Edited ${c.files.length} files` : 'Edited files', detail: c.files.join(', '), status: state(c.ran), "aria-label": `Edited ${c.files.join(', ') || 'files'}`, children: _jsxs(YStack, { gap: "$2", items: "flex-start", children: [_jsx(SizableText, { size: "$1", color: "$soft", style: { whiteSpace: 'pre-wrap' }, children: c.files.length ? c.files.join('\n') : 'The agent named no files.' }), onDiff ? (_jsx(Button, { size: "sm", variant: "outline", onPress: onDiff, children: "Open the diff" })) : null] }) }, c.key));
                     case 'step':
                         return (_jsx(Step, { name: c.name, detail: c.detail, status: state(c.ran), defaultOpen: c.name === 'Error', "aria-label": `${c.name} ${c.detail}`.trim(), children: c.name === 'Error' ? (_jsx(SizableText, { size: "$2", color: "$ink", style: { ...mono, whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }, children: c.output })) : c.output.trim() ? (_jsx(Code, { language: "output", value: c.output, children: tail(c.output.replace(/\n+$/, '')) })) : undefined }, c.key));
                     case 'note':
                         return (_jsx(SizableText, { size: "$1", color: "$soft", role: "note", children: c.text }, c.key));
                     case 'plan':
-                        return (_jsxs(YStack, { gap: "$3", p: "$4", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", "aria-label": "Plan", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: "Plan" }), _jsx(Prose, { text: c.text }), _jsxs(XStack, { items: "center", gap: "$2", flexWrap: "wrap", children: [onApprove ? (_jsx(Button, { size: "sm", disabled: approving, onPress: () => onApprove(c.text), children: approving ? 'Starting the build…' : 'Approve and build' })) : null, _jsx(Judge, { text: c.text, onVerdict: onVerdict })] })] }, c.key));
+                        return (_jsxs(YStack, { gap: "$3", p: "$4", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", "aria-label": "Plan", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: "Plan" }), _jsx(Prose, { text: c.text }), _jsxs(XStack, { items: "center", gap: "$2", flexWrap: "wrap", children: [_jsx(Reply, { text: c.text, listen: listen }), onApprove ? (_jsx(Button, { size: "sm", disabled: approving, onPress: () => onApprove(c.text), children: approving ? 'Starting the build…' : 'Approve and build' })) : null, _jsx(Judge, { onVerdict: onVerdict })] })] }, c.key));
                 }
-            })] }));
+            }), end] }));
 }
-/** Copy what the agent said, and say whether it was good. A verdict that did not land is taken back and says why. */
-function Judge({ text, onVerdict }) {
+/** Say whether what the agent said was good. A verdict that did not land is taken back and says why. */
+function Judge({ onVerdict }) {
     const [verdict, setVerdict] = useState(null);
     const [note, setNote] = useState('');
     const judge = (next) => {
@@ -58,5 +73,5 @@ function Judge({ text, onVerdict }) {
             setNote(e.message);
         });
     };
-    return (_jsxs(XStack, { items: "center", gap: "$2", flexWrap: "wrap", children: [_jsx(Feedback, { text: text, verdict: verdict, onVerdict: judge }), note ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note })) : null] }));
+    return (_jsxs(XStack, { items: "center", gap: "$2", flexWrap: "wrap", children: [_jsx(Feedback, { text: "", verdict: verdict, onVerdict: judge }), note ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note })) : null] }));
 }

package/lib/voice.d.ts

@@ -1,19 +1,8 @@
-import type { Target } from './api/call.ts';
 export declare const LANGUAGES: {
     id: string;
     label: string;
 }[];
 /** The language this browser is set to, when it is one dictation offers; English otherwise. */
 export declare function spoken(): string;
-export declare function useDictation(t: Target, onText: (text: string) => void, onNote: (note: string) => void): {
-    on: boolean;
-    busy: boolean;
-    able: boolean;
-    toggle: () => Promise<void>;
-    language: string;
-    setLanguage: (id: string) => Promise<void>;
-    languages: {
-        id: string;
-        label: string;
-    }[];
-};
+/** The person's saved language (Settings → General), else this browser's, else English. */
+export declare function useSpoken(): string;