@hanzo/rooms 0.1.0

package/dist/crew.js

@@ -0,0 +1,304 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The crew, under the composer: who you can talk to, and a place to make one more.
+//
+// The first disc is an outline with a plus — the shape of a face that is not
+// drawn yet — and it opens the sheet that makes an agent: a name, what it does,
+// which mind, and a likeness you upload or describe. The rest are the org's
+// agents, the house crew first in the order the cast lists them, each drawn by
+// the one `Face` every surface draws with. The house crew is the core team
+// hanzoai/personas publishes (team.ts).
+//
+// Under a chat, pressing a face adds that character to the conversation that is
+// open, and the reply comes back in each voice in the room; pressing one again
+// lets them out. The page does not move: the organization, the thread and the
+// address stay as they are. On a page that is not a chat (`to`), pressing a
+// face opens a chat with that character there. The sidebar's roster row opens a
+// chat with one character alone.
+import { useEffect, useRef, useState } from 'react';
+import { useRooms } from './host.js';
+import { Camera, Check, Plus, Upload } from 'lucide-react';
+import { useAgents, useModels } from '@hanzo/ai/react';
+import { Box, Button, Input, Text, Textarea, View, XStack, YStack } from '@hanzo/ui';
+import { useAi } from './lib/ai.js';
+import { mark } from './lib/mark.js';
+import { reach } from './lib/reach.js';
+import { CAST, Face } from './cast.js';
+import { useOpen } from './open.js';
+import { TEAM, called } from './team.js';
+import { bare } from './lib/bare.js';
+import { BAD, mix } from './lib/mix.js';
+/** One disc's edge, and the name under it. */
+const DISC = 48;
+const FIELD = {
+    width: '100%',
+    bg: 'transparent',
+    borderWidth: 1,
+    borderColor: 'var(--border)',
+    rounded: 'var(--radius-md)',
+    px: 10,
+    py: 8,
+    outlineStyle: 'none',
+    color: 'inherit',
+    fontSize: '$2',
+};
+/** The camera's veil over a face already chosen. */
+const VEIL = mix('var(--pure-black)', 55, 'srgb');
+/** Fired on `window` when the sheet below makes an agent. */
+const MADE = 'hanzo:agent:made';
+/**
+ * The org's agents, read again whenever the sheet makes one. `useAgents` holds
+ * one list per caller, so the strip, the chat header and the sheet each hold
+ * their own; the event is how a new agent reaches every one of them.
+ */
+export function useCrew() {
+    const agents = useAgents();
+    const { reload } = agents;
+    useEffect(() => {
+        window.addEventListener(MADE, reload);
+        return () => window.removeEventListener(MADE, reload);
+    }, [reload]);
+    return agents;
+}
+/** The house crew's names, which a reply may be split by even after one has left the room. */
+export const HOUSE = TEAM.map((one) => one.name);
+/** The core team, drawn for an org that does not keep a member under its own row. */
+const DEFAULT_HOUSE_AGENTS = TEAM.map((one) => ({ id: `house-${one.id}`, name: one.name, avatar: `/agents/${one.id}.png` }));
+/** The org's agents, the cast first in its own order, then the rest as listed. */
+function ordered(agents) {
+    const list = Array.isArray(agents) ? agents : [];
+    const names = new Set(list.map((a) => a.name?.toLowerCase()));
+    const combined = [...list];
+    for (const house of DEFAULT_HOUSE_AGENTS) {
+        if (!names.has(house.name.toLowerCase())) {
+            combined.push(house);
+        }
+    }
+    const rank = new Map(Object.keys(CAST).map((name, i) => [name, i]));
+    return combined.sort((a, b) => {
+        const ra = rank.get(a.name?.toLowerCase() ?? '') ?? Infinity;
+        const rb = rank.get(b.name?.toLowerCase() ?? '') ?? Infinity;
+        return ra - rb;
+    });
+}
+/**
+ * `to` is the chat a press opens, for a strip on a page that is not one. Absent,
+ * the strip sits under a chat and a press changes who is in it.
+ */
+export function Crew({ to } = {}) {
+    const { agents } = useCrew();
+    const { agents: room, openAgent, withAgents } = useOpen();
+    const { router, route } = useRooms();
+    const here = route;
+    const [hiring, setHiring] = useState(false);
+    const talk = (name) => {
+        if (!to)
+            return openAgent(name);
+        withAgents([name]);
+        if (here !== to)
+            router.push(to);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(XStack, { items: "flex-start", flexWrap: "nowrap", overflowX: "auto", gap: "$2.5", px: "$4", py: "$3", width: "100%", maxW: 820, mx: "auto", "data-slot": "crew", ...bare, role: "group", "aria-label": "Agents", children: [_jsx(Box, { render: "button", onClick: () => setHiring(true), "aria-label": "New agent", "aria-haspopup": "dialog", shrink: 0, children: _jsxs(YStack, { items: "center", gap: "$1.5", width: 68, children: [_jsx(YStack, { width: DISC, height: DISC, rounded: DISC / 2, borderWidth: 1.5, borderStyle: "dashed", borderColor: "$soft", items: "center", justify: "center", hoverStyle: { borderColor: '$ink', bg: '$raised' }, children: _jsx(Plus, { size: 18, "aria-hidden": true }) }), _jsx(Text, { fontSize: "$1", color: "$soft", numberOfLines: 1, children: "New" })] }) }), ordered(agents).map((one) => {
+                        const name = called(one.name);
+                        const on = room.some((there) => there.toLowerCase() === one.name.toLowerCase());
+                        return (_jsx(Box, { render: "button", onClick: () => talk(name), "aria-pressed": on, "aria-label": `Chat with ${name}`, title: to ? `Chat with ${name}` : on ? `Remove ${name} from this chat` : `Add ${name} to this chat`, shrink: 0, children: _jsxs(YStack, { items: "center", gap: "$1.5", width: 68, children: [_jsxs(YStack, { position: "relative", rounded: DISC / 2 + 2, p: 2, borderWidth: 1.5, borderColor: on ? '$ink' : 'transparent', hoverStyle: { borderColor: on ? '$ink' : '$borderColor' }, children: [_jsx(Face, { src: one.avatar, emoji: one.emoji, name: one.name, size: DISC }), on ? (_jsx(YStack, { "aria-hidden": true, position: "absolute", b: -2, r: -2, width: 18, height: 18, rounded: 9, bg: "$ink", borderWidth: 2, borderColor: "$background", items: "center", justify: "center", children: _jsx(Check, { size: 10, strokeWidth: 3, color: "var(--background)" }) })) : null] }), _jsx(Text, { fontSize: "$1", color: on ? '$ink' : '$soft', numberOfLines: 1, maxW: 68, children: name })] }) }, one.id || one.name));
+                    })] }), hiring ? _jsx(Hire, { onClose: () => setHiring(false), onMade: talk }) : null] }));
+}
+/** The agents API's name rule (cloud apps/agents `nameRE`), checked before the request. */
+const NAME = /^[A-Za-z0-9][A-Za-z0-9._-]{0,63}$/;
+/** A dollar amount as the agents API counts money: whole micro-dollars. */
+const micro = (dollars) => Math.round(Number(dollars) * 1_000_000);
+/** The windows a spending limit resets on (cloud apps/agents `validPeriod`). */
+const PERIODS = [
+    ['day', 'a day'],
+    ['week', 'a week'],
+    ['month', 'a month'],
+];
+/**
+ * A refusal from POST /v1/agents, in plain words, and the field it concerns.
+ * The platform's sentence is kept where it already reads plainly; the budget's
+ * refusals name request fields (`cap_micro_usd`), so those are said in dollars.
+ */
+function refusal(e) {
+    const text = reach(e);
+    const status = e?.status;
+    if (/cap_micro_usd/.test(text))
+        return { field: 'budget', text: 'Set a spending limit above $0.' };
+    if (/max_task_micro_usd cannot exceed/.test(text))
+        return { field: 'budget', text: 'The most one task may spend cannot be more than the spending limit.' };
+    if (/max_task_micro_usd/.test(text))
+        return { field: 'budget', text: 'Set the most one task may spend, above $0.' };
+    if (/\bperiod\b/.test(text))
+        return { field: 'budget', text: 'Choose a day, a week or a month for the spending limit.' };
+    if (status === 409 || /\bname\b/i.test(text))
+        return { field: 'name', text };
+    if (/\bmodel\b/i.test(text))
+        return { field: 'model', text };
+    if (/avatar|image|emoji/i.test(text))
+        return { field: 'picture', text };
+    if (/instructions/i.test(text))
+        return { field: 'does', text: 'What it does is too long. Shorten it.' };
+    return { field: 'form', text };
+}
+/** A field's own refusal, under it, announced when it appears. */
+function Said({ id, text }) {
+    if (!text)
+        return null;
+    return (_jsx(Text, { id: id, role: "alert", fontSize: "$2", color: BAD, children: text }));
+}
+/**
+ * The sheet that makes an agent.
+ *
+ * A name, a mind and a spending limit are what the agents API requires; what it
+ * does becomes its instructions; the likeness is whichever the maker gives — a
+ * photo uploaded onto the round picture (pressed, or dropped on), or a face
+ * described and drawn by the image model. Both go through `mark`, the one crop
+ * every saved face takes, so a drawn face and an uploaded one are the same kind
+ * of picture. The row keeps at most one of a picture and an emoji, so choosing
+ * one clears the other here too.
+ *
+ * Create stays off until the required fields are filled in the API's own
+ * terms, and a refusal is said in plain words under the field it concerns.
+ *
+ * EXPORTED, because Contacts adds agents too and there is one way to make one.
+ */
+export function Hire({ onClose, onMade }) {
+    const { create } = useAgents();
+    const { models } = useModels();
+    const { client } = useAi();
+    const [name, setName] = useState('');
+    const [does, setDoes] = useState('');
+    const [model, setModel] = useState('enso');
+    const [look, setLook] = useState('');
+    const [avatar, setAvatar] = useState('');
+    const [emoji, setEmoji] = useState('');
+    const [cap, setCap] = useState('5');
+    const [task, setTask] = useState('1');
+    const [period, setPeriod] = useState('month');
+    const [busy, setBusy] = useState(null);
+    const [wrong, setWrong] = useState(null);
+    const [over, setOver] = useState(false);
+    const [lit, setLit] = useState(false);
+    const picking = useRef(null);
+    useEffect(() => {
+        const key = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        window.addEventListener('keydown', key);
+        return () => window.removeEventListener('keydown', key);
+    }, [onClose]);
+    // WHAT CREATE WAITS FOR, in the API's own terms, so a request it would refuse
+    // is never sent. Each rule names the field it belongs to.
+    const called = name.trim();
+    const nameWrong = !called ? null : NAME.test(called) ? null : 'Use letters, digits, dots, dashes or underscores, starting with a letter or digit, up to 64.';
+    const capOk = Number.isFinite(Number(cap)) && micro(cap) > 0;
+    const taskOk = Number.isFinite(Number(task)) && micro(task) > 0;
+    const budgetWrong = !capOk
+        ? 'Set a spending limit above $0.'
+        : !taskOk
+            ? 'Set the most one task may spend, above $0.'
+            : micro(task) > micro(cap)
+                ? 'The most one task may spend cannot be more than the spending limit.'
+                : null;
+    const ready = Boolean(called) && !nameWrong && !budgetWrong && Boolean(model);
+    const shown = (field) => (wrong?.field === field ? wrong.text : null);
+    const pick = async (file) => {
+        if (!file)
+            return;
+        setWrong(null);
+        try {
+            setAvatar(await mark(file));
+            setEmoji('');
+        }
+        catch (e) {
+            setWrong({ field: 'picture', text: reach(e) });
+        }
+    };
+    // The image model draws the face; `mark` makes it the same 256px square every
+    // saved picture is, so a drawn face weighs what an uploaded one weighs.
+    const draw = async () => {
+        if (!client || !look.trim())
+            return;
+        setBusy('draw');
+        setWrong(null);
+        try {
+            const out = await client.http.json({
+                method: 'POST',
+                path: '/v1/images/generations',
+                body: {
+                    prompt: `${look.trim()}, memoji style 3D emoji portrait, head and shoulders, centered, plain background`,
+                    n: 1,
+                    size: '512x512',
+                    response_format: 'b64_json',
+                },
+            });
+            const b64 = out?.data?.[0]?.b64_json;
+            if (!b64)
+                throw new Error('The image model answered with no picture.');
+            const bytes = Uint8Array.from(atob(b64), (c) => c.charCodeAt(0));
+            setAvatar(await mark(new File([bytes], 'face.png', { type: 'image/png' })));
+            setEmoji('');
+        }
+        catch (e) {
+            setWrong({ field: 'picture', text: reach(e) });
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    const make = async () => {
+        if (!ready || busy)
+            return;
+        setBusy('make');
+        setWrong(null);
+        // The budget fields are the agents API's (cloud apps/agents createAgentIn);
+        // @hanzo/ai 0.6.16's AgentCreateParams predates them.
+        const body = {
+            name: called,
+            model,
+            ...(does.trim() ? { instructions: does.trim() } : {}),
+            ...(avatar ? { avatar } : emoji.trim() ? { emoji: emoji.trim() } : {}),
+            cap_micro_usd: micro(cap),
+            max_task_micro_usd: micro(task),
+            period,
+        };
+        try {
+            await create(body);
+            window.dispatchEvent(new Event(MADE));
+            onMade(called);
+            onClose();
+        }
+        catch (e) {
+            setWrong(refusal(e));
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    const face = avatar ? (_jsx(View, { render: _jsx("img", { src: avatar, alt: "" }), width: "100%", height: "100%", objectFit: "cover" })) : emoji ? (_jsx(Text, { fontSize: 36, lineHeight: 40, children: emoji })) : null;
+    return (_jsx(Box, { position: "fixed", inset: 0, z: "var(--z-modal)", display: "flex", items: "center", justify: "center", p: "$4", bg: "$sunken", overflowY: "auto", onClick: (e) => {
+            if (e.target === e.currentTarget)
+                onClose();
+        }, children: _jsxs(YStack, { role: "dialog", "aria-modal": true, "aria-labelledby": "hire-title", width: "100%", maxW: 460, gap: "$3", p: "$5", rounded: "$6", borderWidth: 1, borderColor: "$borderColor", bg: "$background", children: [_jsx(Text, { id: "hire-title", render: "h2", fontSize: "$5", fontWeight: "600", color: "$ink", children: "New agent" }), _jsxs(XStack, { items: "center", gap: "$4", flexWrap: "wrap", children: [_jsxs(Box, { render: "button", onClick: () => picking.current?.click(), onMouseEnter: () => setLit(true), onMouseLeave: () => setLit(false), onFocus: () => setLit(true), onBlur: () => setLit(false), onDragOver: (e) => {
+                                e.preventDefault();
+                                setOver(true);
+                            }, onDragLeave: () => setOver(false), onDrop: (e) => {
+                                e.preventDefault();
+                                setOver(false);
+                                void pick(e.dataTransfer.files?.[0]);
+                            }, "aria-label": avatar ? 'Change photo' : 'Upload photo', "aria-describedby": "hire-picture-hint", position: "relative", width: 88, height: 88, rounded: 9999, overflow: "hidden", shrink: 0, items: "center", justify: "center", bg: "$raised", borderWidth: 2, borderStyle: avatar || emoji ? 'solid' : 'dashed', borderColor: over || lit ? '$ink' : '$soft', children: [face, !face || lit || over ? (_jsx(YStack, { "aria-hidden": true, position: "absolute", inset: 0, items: "center", justify: "center", gap: "$1", bg: face ? VEIL : undefined, children: _jsx(Camera, { size: 22, color: face ? 'var(--pure-white)' : 'var(--soft, var(--muted-foreground))' }) })) : null] }), _jsx("input", { ref: picking, type: "file", hidden: true, accept: "image/png,image/jpeg,image/gif,image/webp", onChange: (e) => {
+                                void pick(e.target.files?.[0]);
+                                e.target.value = '';
+                            } }), _jsxs(YStack, { flex: 1, minW: 180, gap: "$1.5", children: [_jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", children: [_jsxs(Button, { size: "sm", variant: "outline", onClick: () => picking.current?.click(), children: [_jsx(Upload, { size: 14, "aria-hidden": true }), " ", avatar ? 'Change photo' : 'Upload photo'] }), avatar ? (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => setAvatar(''), children: "Remove" })) : null] }), _jsx(Text, { id: "hire-picture-hint", fontSize: "$2", color: "$soft", children: over ? 'Drop the photo to use it.' : 'Press the circle or drop a photo on it. PNG, JPEG, GIF or WebP.' })] })] }), _jsxs(YStack, { gap: "$1.5", children: [_jsx(Text, { render: "label", htmlFor: "hire-look", fontSize: "$2", color: "var(--soft, var(--muted-foreground))", children: "Or describe a face and press Draw" }), _jsxs(XStack, { gap: "$1.5", items: "center", children: [_jsx(Box, { flex: 1, children: _jsx(Input, { id: "hire-look", value: look, onChange: (e) => setLook(e.target.value), onKeyDown: (e) => {
+                                            if (e.key === 'Enter')
+                                                void draw();
+                                        }, placeholder: "A calm engineer with round glasses" }) }), _jsx(Button, { size: "sm", variant: "outline", disabled: busy !== null || !look.trim(), onClick: () => void draw(), children: busy === 'draw' ? 'Drawing…' : 'Draw' })] }), _jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(Text, { render: "label", htmlFor: "hire-emoji", fontSize: "$2", color: "var(--soft, var(--muted-foreground))", children: "Or one emoji" }), _jsx(Box, { width: 64, children: _jsx(Input, { id: "hire-emoji", value: emoji, onChange: (e) => {
+                                            setEmoji(e.target.value);
+                                            if (e.target.value)
+                                                setAvatar('');
+                                        }, "aria-describedby": "hire-picture-wrong" }) })] }), _jsx(Said, { id: "hire-picture-wrong", text: shown('picture') })] }), _jsxs(YStack, { gap: "$1.5", children: [_jsx(Text, { render: "label", htmlFor: "hire-name", fontSize: "$2", fontWeight: "600", children: "Name" }), _jsx(Input, { id: "hire-name", value: name, onChange: (e) => setName(e.target.value), onKeyDown: (e) => {
+                                if (e.key === 'Enter')
+                                    void make();
+                            }, placeholder: "Michael", autoFocus: true, "aria-required": "true", "aria-invalid": Boolean(nameWrong || shown('name')), "aria-describedby": "hire-name-wrong" }), _jsx(Said, { id: "hire-name-wrong", text: nameWrong ?? shown('name') })] }), _jsxs(YStack, { gap: "$1.5", children: [_jsx(Text, { render: "label", htmlFor: "hire-model", fontSize: "$2", fontWeight: "600", children: "Model" }), _jsxs(Text, { render: _jsx("select", { id: "hire-model", value: model, onChange: (e) => setModel(e.target.value), "aria-describedby": "hire-model-wrong" }), ...FIELD, children: [_jsx("option", { value: "enso", children: "enso" }), models.map((one) => (_jsx("option", { value: one.id, children: one.id }, one.id)))] }), _jsx(Said, { id: "hire-model-wrong", text: shown('model') })] }), _jsxs(YStack, { gap: "$1.5", children: [_jsxs(Text, { render: "label", htmlFor: "hire-does", fontSize: "$2", fontWeight: "600", children: ["What it does", ' ', _jsx(Text, { fontWeight: "400", color: "var(--soft, var(--muted-foreground))", children: "\u2014 optional" })] }), _jsx(Textarea, { id: "hire-does", value: does, onChangeText: setDoes, placeholder: "The work it takes and the voice it answers in", rows: 3, "aria-describedby": "hire-does-wrong" }), _jsx(Said, { id: "hire-does-wrong", text: shown('does') })] }), _jsxs(View, { render: _jsx("fieldset", { "aria-describedby": "hire-budget-wrong" }), display: "block", borderWidth: 0, p: 0, m: 0, children: [_jsx(Text, { render: "legend", display: "block", fontSize: "$2", fontWeight: "600", mb: 6, children: "Spending limit" }), _jsxs(YStack, { gap: "$2", children: [_jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", children: [_jsx(Text, { fontSize: "$2", color: "$soft", children: "Up to $" }), _jsx(Box, { width: 84, children: _jsx(Input, { "aria-label": "Spending limit in dollars", inputMode: "decimal", value: cap, onChange: (e) => setCap(e.target.value), "aria-invalid": !capOk }) }), _jsx(Text, { render: _jsx("select", { "aria-label": "Spending limit period", value: period, onChange: (e) => setPeriod(e.target.value) }), ...FIELD, width: "auto", children: PERIODS.map(([value, words]) => (_jsx("option", { value: value, children: words }, value))) })] }), _jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", children: [_jsx(Text, { fontSize: "$2", color: "$soft", children: "At most $" }), _jsx(Box, { width: 84, children: _jsx(Input, { "aria-label": "Most one task may spend, in dollars", inputMode: "decimal", value: task, onChange: (e) => setTask(e.target.value), "aria-invalid": !taskOk }) }), _jsx(Text, { fontSize: "$2", color: "$soft", children: "on one task" })] })] }), _jsx(Box, { mt: "$1.5", children: _jsx(Said, { id: "hire-budget-wrong", text: budgetWrong ?? shown('budget') }) })] }), _jsx(Said, { id: "hire-form-wrong", text: shown('form') }), _jsxs(XStack, { justify: "flex-end", gap: "$2", children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: onClose, children: "Cancel" }), _jsx(Button, { size: "sm", disabled: busy !== null || !ready, onClick: () => void make(), children: busy === 'make' ? 'Creating…' : 'Create' })] })] }) }));
+}

package/dist/dev.d.ts

@@ -0,0 +1,3 @@
+import { type Host } from '@hanzo/build';
+/** The host for a signed-in reader. */
+export declare function useDevHost(): Host;

package/dist/dev.js

@@ -0,0 +1,102 @@
+'use client';
+// The web app's host: everything @hanzo/build's `<Builder>` needs from hanzo.ai,
+// as values, so the builder imports neither IAM nor a router. hanzo.build's own
+// host (hanzoai/build `src/app/root.tsx`) is the other one, and this answers
+// each field the way that one does — who is signed in, the organizations they
+// belong to and the one they work in, the theme, where the address is, and how
+// to leave. The name drawn at the top left is Hanzo Dev: this host is the
+// dev agent. Chat, on the rooms shell, is Hanzo AI.
+//
+// THE ADDRESS IS THE QUERY. The app is `/` (app/page.tsx), and what it shows
+// rides `?at=` in the builder's own grammar (lib/host.ts `AT`), so a run, a
+// screen, a Settings section, a Customize tab, the plans and a project all
+// survive a reload, and Back steps through them. A move is a native history
+// entry, which the Next router folds into `useSearchParams`, so reading the
+// address and moving it are one query.
+import { useMemo } from 'react';
+import { useLook, useRooms } from './host.js';
+import { useIam } from '@hanzo/iam/react';
+import { useSignOut } from './lib/signout.js';
+import { administers, path, route } from '@hanzo/build';
+import { bearer, named, org, orgs, pick } from './lib/session.js';
+import { enter } from './lib/destination.js';
+import { api } from './lib/api.js';
+import { app, AT } from './lib/host.js';
+import { link } from './lib/tags.js';
+/** Where the builder links out: every one of them an address of this site. */
+const LINKS = {
+    github: app('-/sync'),
+    customize: app('-/customize'),
+    settings: app('-/settings'),
+    home: '/',
+};
+/** The person's theme, when they have chosen one the builder can name. */
+const theme = (t) => (t === 'light' || t === 'dark' || t === 'system' ? t : undefined);
+/** The app address a query value names, canonical; '' for anything that is not one. */
+const canonical = (at) => path(route(at ?? ''));
+/** The host for a signed-in reader. */
+export function useDevHost() {
+    const { user, accessToken } = useIam();
+    const logout = useSignOut();
+    const { router, search } = useRooms();
+    const here = canonical(search?.get(AT) ?? null);
+    const look = useLook();
+    // The token's claims change only when the token does: a sign-in, a refresh.
+    const memberships = useMemo(() => orgs(), [accessToken]); // eslint-disable-line react-hooks/exhaustive-deps
+    const scoped = useMemo(() => org(), [accessToken]); // eslint-disable-line react-hooks/exhaustive-deps
+    const claimed = useMemo(() => named(), [accessToken]); // eslint-disable-line react-hooks/exhaustive-deps
+    const u = user;
+    const name = u?.displayName || u?.name || claimed?.name || '';
+    const email = u?.email || claimed?.email || '';
+    const avatar = typeof u?.avatar === 'string' && u.avatar.startsWith('https://') ? u.avatar : '';
+    return useMemo(() => ({
+        name: 'Hanzo Dev',
+        api: api(),
+        token: bearer,
+        org: scoped,
+        memberships,
+        // Scope this browser to one of the token's organizations and open Dev's
+        // New in it: a run or a project read under the last one is not this one's.
+        chooseOrg: (next) => {
+            if (!orgs().includes(next))
+                return;
+            pick(next);
+            window.location.assign(app(''));
+        },
+        theme: theme(look.pref.theme),
+        chooseTheme: (t) => look.set({ theme: theme(t) }),
+        person: { name, email, avatar },
+        admin: administers(bearer(), scoped),
+        path: here,
+        go: (to, how) => {
+            const next = app(canonical(to));
+            if (`${window.location.pathname}${window.location.search}` === next)
+                return;
+            if (how?.replace)
+                window.history.replaceState(null, '', next);
+            else
+                window.history.pushState(null, '', next);
+        },
+        links: LINKS,
+        // An address of this site moves in the router; another origin is left in
+        // this tab. platform.hanzo.ai is another product, and a click that names
+        // it stays here — everything the builder had it for is in its Settings.
+        open: (href) => {
+            let url;
+            try {
+                url = new URL(href, window.location.origin);
+            }
+            catch {
+                return;
+            }
+            if (url.hostname === 'platform.hanzo.ai')
+                return;
+            if (url.origin === window.location.origin)
+                router.push(`${url.pathname}${url.search}${url.hash}`);
+            else
+                window.location.assign(link(url.href));
+        },
+        signIn: () => enter(),
+        signOut: () => void logout(),
+    }), [scoped, memberships, look.pref.theme, look.set, name, email, avatar, here, router, logout]);
+}

package/dist/enso.d.ts

@@ -0,0 +1,70 @@
+/**
+ * How hard to think — and, one press inside, what thinks.
+ *
+ * EFFORT IS ON THE BAR AND THE MODEL IS NOT. That is the product's position
+ * rather than a layout preference: Enso routes the ask, so naming a model is an
+ * override and belongs inside this panel, not on the row where it asked every
+ * reader to hold an opinion about a catalogue before they could type a
+ * sentence.
+ *
+ * Effort earns the bar because it belongs to the ASK. The same person wants a
+ * fast answer to one question and a careful one to the next; the model they
+ * want rarely changes between two messages, which is what makes it a
+ * preference and this a control.
+ *
+ * `reasoning_effort` is an OpenAI-compatible completion parameter and rides
+ * `useChat`'s `params`, so on /chat it reaches the API. A surface that cannot
+ * carry it passes no `onEffort` and the chip names the router instead — the
+ * coding plane takes a `model` and has no effort field, and a control that
+ * reaches nothing is worse than one that is absent.
+ */
+export declare const EFFORTS: readonly [{
+    readonly id: 'minimal';
+    readonly label: 'Instant';
+    readonly note: 'Answer now, no deliberation';
+}, {
+    readonly id: 'low';
+    readonly label: 'Low';
+    readonly note: 'A quick pass';
+}, {
+    readonly id: 'medium';
+    readonly label: 'Medium';
+    readonly note: 'Thinks before it writes';
+}, {
+    readonly id: 'high';
+    readonly label: 'High';
+    readonly note: 'Slow and careful, for hard problems';
+}];
+export type EffortId = (typeof EFFORTS)[number]['id'];
+/**
+ * The effort preference, shared by every surface that sends a completion.
+ *
+ * Same shape as `useModel` — one storage key, one change event, read on mount
+ * rather than in the initialiser so the server and the first client render
+ * agree and hydration does not warn.
+ */
+export declare function useEffort(): readonly [EffortId, (next: EffortId) => void];
+/** The name a served model goes by: its row's label, its name, or its id made readable. */
+export declare function nameOf(models: {
+    id: string;
+}[], id: string): string;
+export interface EnsoProps {
+    /** Current effort. Omit `onEffort` where the surface cannot send one. */
+    effort?: EffortId;
+    onEffort?: (next: EffortId) => void;
+    /** The override. `models` empty hides it rather than offering an empty menu. */
+    model?: string;
+    onModel?: (id: string) => void;
+    models?: {
+        id: string;
+    }[];
+    disabled?: boolean;
+}
+/**
+ * The chip that sits beside send, and the panel it opens.
+ *
+ * The chip names what answers the next message: Enso while Enso routes it
+ * (`ENSO`, or `FREE` on the free route), and the model itself once one is
+ * picked. Beside the name it states the effort where the surface sends one.
+ */
+export declare function Enso({ effort, onEffort, model, onModel, models, disabled }: EnsoProps): import("react").JSX.Element;

package/dist/enso.js

@@ -0,0 +1,112 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Check, ChevronDown } from 'lucide-react';
+import { Box, Popover, PopoverContent, PopoverTrigger, Separator, Text, XStack, YStack, } from '@hanzo/ui';
+import { ModelSelector, RESEARCH } from '@hanzo/ui/models';
+import { ProviderMark } from './ProviderMark.js';
+import { ENSO, FREE } from './lib/ai.js';
+import { modelName } from './lib/models.js';
+/**
+ * How hard to think — and, one press inside, what thinks.
+ *
+ * EFFORT IS ON THE BAR AND THE MODEL IS NOT. That is the product's position
+ * rather than a layout preference: Enso routes the ask, so naming a model is an
+ * override and belongs inside this panel, not on the row where it asked every
+ * reader to hold an opinion about a catalogue before they could type a
+ * sentence.
+ *
+ * Effort earns the bar because it belongs to the ASK. The same person wants a
+ * fast answer to one question and a careful one to the next; the model they
+ * want rarely changes between two messages, which is what makes it a
+ * preference and this a control.
+ *
+ * `reasoning_effort` is an OpenAI-compatible completion parameter and rides
+ * `useChat`'s `params`, so on /chat it reaches the API. A surface that cannot
+ * carry it passes no `onEffort` and the chip names the router instead — the
+ * coding plane takes a `model` and has no effort field, and a control that
+ * reaches nothing is worse than one that is absent.
+ */
+export const EFFORTS = [
+    { id: 'minimal', label: 'Instant', note: 'Answer now, no deliberation' },
+    { id: 'low', label: 'Low', note: 'A quick pass' },
+    { id: 'medium', label: 'Medium', note: 'Thinks before it writes' },
+    { id: 'high', label: 'High', note: 'Slow and careful, for hard problems' },
+];
+const DEFAULT = 'medium';
+const KEY = 'hanzo.chat.effort';
+const CHANGE = 'hanzo:effort';
+const read = () => {
+    if (typeof window === 'undefined')
+        return DEFAULT;
+    try {
+        const held = window.localStorage.getItem(KEY);
+        return EFFORTS.some((e) => e.id === held) ? held : DEFAULT;
+    }
+    catch {
+        return DEFAULT;
+    }
+};
+/**
+ * The effort preference, shared by every surface that sends a completion.
+ *
+ * Same shape as `useModel` — one storage key, one change event, read on mount
+ * rather than in the initialiser so the server and the first client render
+ * agree and hydration does not warn.
+ */
+export function useEffort() {
+    const [effort, setEffort] = useState(DEFAULT);
+    useEffect(() => {
+        setEffort(read());
+        const sync = () => setEffort(read());
+        window.addEventListener('storage', sync);
+        window.addEventListener(CHANGE, sync);
+        return () => {
+            window.removeEventListener('storage', sync);
+            window.removeEventListener(CHANGE, sync);
+        };
+    }, []);
+    const choose = (next) => {
+        setEffort(next);
+        try {
+            window.localStorage.setItem(KEY, next);
+        }
+        catch {
+            // A private browser may refuse persistence; this tab still keeps the choice.
+        }
+        window.dispatchEvent(new Event(CHANGE));
+    };
+    return [effort, choose];
+}
+/** The name a served model goes by: its row's label, its name, or its id made readable. */
+export function nameOf(models, id) {
+    const row = models.find((m) => m.id === id);
+    return modelName({ id, name: String(row?.label ?? row?.name ?? '') });
+}
+/**
+ * The chip that sits beside send, and the panel it opens.
+ *
+ * The chip names what answers the next message: Enso while Enso routes it
+ * (`ENSO`, or `FREE` on the free route), and the model itself once one is
+ * picked. Beside the name it states the effort where the surface sends one.
+ */
+export function Enso({ effort, onEffort, model, onModel, models = [], disabled }) {
+    const [open, setOpen] = useState(false);
+    const chosen = EFFORTS.find((e) => e.id === effort);
+    const pace = onEffort && chosen ? chosen.label : null;
+    const picked = model && model !== ENSO && model !== FREE ? model : undefined;
+    const name = picked ? nameOf(models, picked) : 'Enso';
+    // The panel opens above the chip when there is no room below it, so the model
+    // picker at its foot stays on screen on a laptop-height window. It is SOLID:
+    // it stands over a transcript that streams, which would read through glass,
+    // and the model list it opens inherits the same ground.
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, allowFlip: true, children: [_jsx(PopoverTrigger, { disabled: disabled, children: _jsxs(XStack, { "data-slot": "enso", items: "center", gap: "$1.5", px: "$2.5", height: 32, maxW: 220, rounded: "$10", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, opacity: disabled ? 0.4 : 1, "aria-label": pace ? `${name}: ${pace}` : name, children: [_jsx(ProviderMark, { provider: "enso", model: picked, size: 14 }), _jsx(Text, { fontSize: "$1", color: "$ink", fontWeight: "600", numberOfLines: 1, children: name }), pace ? (_jsx(Text, { fontSize: "$1", color: "$soft", fontWeight: "500", children: pace })) : null, _jsx(ChevronDown, { size: 12, "aria-hidden": true })] }) }), _jsx(PopoverContent, { solid: true, align: "end", p: 6, width: 268, children: _jsxs(YStack, { gap: "$1", children: [onEffort
+                            ? EFFORTS.map((e) => (_jsx(Box, { render: "button", onClick: () => {
+                                    onEffort(e.id);
+                                    setOpen(false);
+                                }, px: "$2", py: "$2", rounded: "$3", width: "100%", hoverStyle: { bg: '$hover' }, "aria-pressed": e.id === effort, children: _jsxs(XStack, { items: "center", gap: "$2", width: "100%", children: [_jsxs(YStack, { flex: 1, minW: 0, items: "flex-start", children: [_jsx(Text, { fontSize: "$2", color: "$ink", text: "left", children: e.label }), _jsx(Text, { fontSize: "$1", color: "$soft", text: "left", children: e.note })] }), e.id === effort ? _jsx(Check, { size: 14, "aria-hidden": true }) : null] }) }, e.id)))
+                            : null, onModel && models.length ? (_jsxs(_Fragment, { children: [onEffort ? _jsx(Separator, { my: "$1" }) : null, _jsxs(YStack, { px: "$2", pt: "$1", pb: "$2", gap: "$2", children: [_jsx(Text, { fontSize: "$1", color: "$soft", children: "Enso picks the model. Override it for this account:" }), _jsx(ModelSelector, { models: [...models, ...RESEARCH], value: model, onChange: (id) => {
+                                                onModel(id);
+                                                setOpen(false);
+                                            }, size: "sm" })] })] })) : null] }) })] }));
+}