@hanzo/rooms 0.1.24 → 0.1.26

package/dist/Chat.js

@@ -44,7 +44,8 @@ import { Anchor, Box, Button, Text, Tooltip, TooltipContent, TooltipTrigger, Vie
 import { Control } from "@hanzo/composer";
 import { useIam, useIamToken } from "@hanzo/iam/react";
 import { hasSession, org } from "./lib/session.js";
-import { chats, sku, useLimits } from "./lib/limits.js";
+import { chats, house, paidPlan, setCreditsAfterAllowance, useLimits } from "./lib/limits.js";
+import { parseModels } from "@hanzo/ui/models/catalog";
 import { LimitedBanner } from "@hanzo/ui/product/LimitedBanner";
 import { WEB } from "./lib/web.js";
 import { useHydrated } from "./lib/hydrated.js";
@@ -63,7 +64,6 @@ import { useStarred } from "./stars.js";
 import { useModel } from "./model.js";
 import { Enso, nameOf, useEffort } from "./enso.js";
 import { checkoutUrl } from './lib/pay.js';
-import { onFree } from './lib/plans.js';
 import { Upgrade, useFree } from './Upgrade.js';
 import { enter, LOGIN } from './lib/destination.js';
 import { first } from './lib/first.js';
@@ -518,32 +518,43 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
     // outputs and names no text (`chats`) is neither offered nor fallen back to.
     const { models: catalog } = useModels();
     const models = useMemo(() => catalog.filter(chats), [catalog]);
-    // HANZO MODELS ALONE are offered here, to everyone: an Enso or Zen id
-    // (`sku`). A preference kept from before for any other model is not one this
-    // room offers, so the house router is asked for instead, and `served` keeps
-    // to the house models wherever the catalog carries one. An agent's own model
-    // is sent as it is named, never swapped for another the catalog lists; the
-    // gateway says which model answered (`servedBy`).
-    const offered = useMemo(() => models.filter((m) => sku(m.id)), [models]);
-    const wanted = sku(preferred) ? preferred : ENSO;
-    const model = persona?.model || served(models, anonymous ? FREE : wanted);
+    // EVERY MODEL THE GATEWAY LISTS is offered here, through the one picker, and
+    // read from the catalog's own fields (`parseModels`): its class, its family.
+    // A premium model is picked for THIS conversation and never remembered as
+    // the default, so the next chat starts on Enso again; any other pick is the
+    // reader's default. A preference kept from before for a premium model is
+    // not a default either, so the house router is asked for instead. An agent's
+    // own model is sent as it is named; the gateway says which model answered
+    // (`servedBy`).
+    const listed = useMemo(() => parseModels(catalog), [catalog]);
+    const rowOf = (id) => listed.find((m) => m.id === id);
+    const [picked, setPicked] = useState(null);
+    const wanted = picked ?? (preferred && rowOf(preferred)?.class !== "premium" ? preferred : ENSO);
+    // A model the catalog lists is sent as picked, whatever it answers with; only
+    // a name the catalog does not list falls to one that converses (`served`).
+    const sent = anonymous ? FREE : wanted;
+    const model = persona?.model || (rowOf(sent) ? sent : served(models, sent));
     // THE PLAN'S USAGE (lib/limits.ts), kept current by every chat answer's
     // headers and read again whenever a send settles, below. The room draws no
     // bars and no near note — those live on Settings → Usage. It says something
     // only once the reader is turned away: a reply answered from a free model, or
     // a refusal.
     const { limits, notice, reload: reread } = useLimits(!anonymous, org(), (id) => nameOf(catalog, id));
-    const held = Boolean(limits?.plan);
+    const held = paidPlan(limits);
     const pause = notice && (notice.fallback || notice.refused) ? notice : null;
-    // A MODEL THE FREE PLAN DOES NOT INCLUDE IS ASKED FOR, NOT CHOSEN. On Free,
-    // picking a model the plan's row does not run (`onFree`) leaves the choice
-    // where it was and opens the upgrade, titled with the model; so does a turn
-    // the gateway refuses `plan_required`. A plan the limits name is not Free,
-    // whatever the tier says, so every Hanzo model is simply chosen on it.
-    // `isFree` still drives the free-lane notice.
+    // EVERY MODEL IS CHOSEN, never asked for: one the plan does not cover still
+    // picks, and the gateway answers it with the policy's refusal or from Enso,
+    // which the room then shows. A turn the gateway refuses `plan_required`
+    // opens the upgrade, titled with the model. `isFree` still drives the
+    // free-lane notice.
     const free = useFree(!anonymous) && !held;
     const [ask, setAsk] = useState(null);
-    const choose = (id) => (free && !onFree(id) ? setAsk({ model: nameOf(models, id) }) : setPreferred(id));
+    const choose = (id) => {
+        if (rowOf(id)?.class === "premium")
+            return setPicked(id);
+        setPicked(null);
+        setPreferred(id);
+    };
     // KEEPING THE CONVERSATION is the reader's account, not this pane's choice:
     // the store is per-org, so a signed-in reader has somewhere for it to go and
     // an anonymous one does not. `thread` names the conversation being continued
@@ -560,7 +571,7 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
         // lookups the platform's assistant uses, run inside the completion by the
         // client's fetch (lib/web.ts), so a question about the weather or the news
         // is answered from what the web says now.
-        params: { reasoning_effort: effort, ...(!anonymous && sku(model) ? { tools: WEB } : {}) },
+        params: { reasoning_effort: effort, ...(!anonymous && house(rowOf(model)?.family) ? { tools: WEB } : {}) },
         ...(open ? { thread: open } : {}),
         onError: (e) => {
             const needs = planRequired(e);
@@ -818,6 +829,37 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
         }
         void latest.current(text);
     }, []);
+    // THE WAYS PAST A PAUSE, as the server sends them. A page opens; Continue
+    // with credits turns the org's choice on and asks the last question again on
+    // the model the reader picked; a switch moves the picker. A refusal of the
+    // write (only an org admin may make it) is said under the banner.
+    const [actWrong, setActWrong] = useState("");
+    const act = useCallback((a) => {
+        setActWrong("");
+        if (a.kind === "switch") {
+            if (a.model)
+                choose(a.model);
+            return;
+        }
+        if (a.kind !== "credits") {
+            if (a.url)
+                window.location.assign(a.url);
+            return;
+        }
+        setCreditsAfterAllowance(true)
+            .then(() => {
+            reread();
+            // A refused question is asked again in its place; one a free model
+            // answered is asked once more after that answer.
+            const q = [...turns.current].reverse().find((m) => m.role === "user");
+            if (q)
+                speak(words(q.content), failures[q.id] ? q.id : undefined);
+        })
+            .catch((e) => setActWrong(e instanceof Error ? e.message : "Credits could not be turned on."));
+    }, 
+    // `choose` is rebuilt each render; the handler follows it.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [reread, speak, failures, picked, preferred, listed]);
     // A TURN THAT NEVER SPEAKS IS STOPPED. A stream that stays open with nothing
     // in it would leave a Stop button and no answer for as long as the upstream
     // holds the connection; after `STALL` it is ended and its question is said to
@@ -1197,14 +1239,14 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
                     },
                     // WHAT GOES WITH THE MESSAGE, above the frame: one chip a file, each
                     // with its own remove, and the reason any file was refused.
-                    head: files.length || turnedAway || preparing || talk.open || talk.refusal || pause ? (_jsxs(YStack, { width: "calc(100% - 32px)", maxW: `calc(${MEASURE} - 3rem)`, mx: "auto", gap: "$1.5", children: [pause ? (_jsx(LimitedBanner, { message: pause.message, actions: pause.actions, onUsage: () => showSettings("usage") })) : null, files.length ? (_jsx(XStack, { gap: "$1.5", flexWrap: "wrap", role: "list", "aria-label": "Attached files", "data-slot": "composer-attached", children: files.map((one) => (_jsx(HeldChip, { one: one, onRemove: () => drop(at, one.id) }, one.id))) })) : null, preparing ? (_jsxs(Text, { role: "status", "aria-live": "polite", "data-slot": "composer-preparing", fontSize: "$2", color: "$soft", children: [preparing, "\u2026"] })) : null, turnedAway ? (_jsx(Text, { role: "alert", fontSize: "$2", color: BAD, children: turnedAway })) : null, talk.open || talk.refusal ? (_jsx(Text, { role: "status", "aria-live": "polite", "data-slot": "composer-talk-reply", fontSize: "$2", color: talk.refusal ? BAD : "$soft", children: talk.refusal
+                    head: files.length || turnedAway || preparing || talk.open || talk.refusal || pause ? (_jsxs(YStack, { width: "calc(100% - 32px)", maxW: `calc(${MEASURE} - 3rem)`, mx: "auto", gap: "$1.5", children: [pause ? (_jsx(LimitedBanner, { message: pause.message, actions: pause.actions, onAction: act, onUsage: () => showSettings("usage") })) : null, actWrong ? (_jsx(Text, { role: "alert", "data-slot": "limited-banner-wrong", fontSize: "$2", color: BAD, children: actWrong })) : null, files.length ? (_jsx(XStack, { gap: "$1.5", flexWrap: "wrap", role: "list", "aria-label": "Attached files", "data-slot": "composer-attached", children: files.map((one) => (_jsx(HeldChip, { one: one, onRemove: () => drop(at, one.id) }, one.id))) })) : null, preparing ? (_jsxs(Text, { role: "status", "aria-live": "polite", "data-slot": "composer-preparing", fontSize: "$2", color: "$soft", children: [preparing, "\u2026"] })) : null, turnedAway ? (_jsx(Text, { role: "alert", fontSize: "$2", color: BAD, children: turnedAway })) : null, talk.open || talk.refusal ? (_jsx(Text, { role: "status", "aria-live": "polite", "data-slot": "composer-talk-reply", fontSize: "$2", color: talk.refusal ? BAD : "$soft", children: talk.refusal
                                     ? worded(talk.refusal)
                                     : talk.reply
                                         ? `Hanzo: ${talk.reply}`
                                         : talk.state === "listening"
                                             ? "Listening — speak, and Hanzo answers aloud."
                                             : "Connecting…" })) : null] })) : undefined,
-                    send: (_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Enso, { effort: effort, onEffort: setEffort, model: wanted, onModel: choose, models: offered }), _jsx(Control, { asChild: true, size: ROUND, children: _jsx(Voice, { voice: voice, says: { idle: "Dictate", listening: "Dictating — click to stop" }, children: (state) => (_jsx(Mic, { size: 15, fill: state === "idle" ? "none" : "currentColor" })) }) }), _jsx(Control, { asChild: true, size: ROUND, children: _jsx(Voice, { voice: talk, "data-slot": "composer-talk", says: {
+                    send: (_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Enso, { effort: effort, onEffort: setEffort, model: wanted, onModel: choose, models: listed, limits: limits }), _jsx(Control, { asChild: true, size: ROUND, children: _jsx(Voice, { voice: voice, says: { idle: "Dictate", listening: "Dictating — click to stop" }, children: (state) => (_jsx(Mic, { size: 15, fill: state === "idle" ? "none" : "currentColor" })) }) }), _jsx(Control, { asChild: true, size: ROUND, children: _jsx(Voice, { voice: talk, "data-slot": "composer-talk", says: {
                                         idle: "Talk with Hanzo",
                                         listening: "In conversation — click to hang up",
                                         speaking: "Hanzo is speaking — talk to interrupt",

package/dist/Settings.js

@@ -30,15 +30,16 @@ import { tap } from './lib/tap.js';
 import { useIam, useIamIdentity, useOrganizations } from '@hanzo/iam/react';
 import { useSignOut } from './lib/signout.js';
 import { useModels } from '@hanzo/ai/react';
-import { ModelSelector, RESEARCH } from '@hanzo/ui/models';
+import { ModelPicker } from '@hanzo/ui/models';
+import { parseModels } from '@hanzo/ui/models/catalog';
 import { UsagePanel } from '@hanzo/usage/panel';
 import { Catalog } from './Directory.js';
 import { useModel } from './model.js';
-import { payPage } from './lib/pay.js';
+import { checkoutUrl, payPage } from './lib/pay.js';
 import { planName } from './lib/plans.js';
 import { api } from './lib/api.js';
 import { renewal, useSubscription, useTier } from './lib/tier.js';
-import { sku, spendShown, useLimits } from './lib/limits.js';
+import { paidPlan, setCreditsAfterAllowance, spendShown, useLimits } from './lib/limits.js';
 import { PlanUsage } from '@hanzo/ui/product/PlanUsage';
 import { Look } from './look.js';
 import { ProviderMark } from './ProviderMark.js';
@@ -169,20 +170,16 @@ function Pane({ id, note }) {
         return _jsx(MemorySettings, {});
     return (_jsx(Text, { fontSize: "$3", color: "$soft", children: note ?? 'Nothing to configure here yet.' }));
 }
-/** One default in one place; agents may still bring their own model. */
+/**
+ * One default in one place; agents may still bring their own model. A premium
+ * model is never a default: it is picked per conversation, in the composer, so
+ * this picker offers the rest of the catalog.
+ */
 function Model() {
     const { models: served } = useModels();
-    // Hanzo models alone, as the composer's picker offers them (`sku`).
-    const models = useMemo(() => served.filter((m) => sku(m.id)), [served]);
+    const models = useMemo(() => parseModels(served).filter((m) => m.class !== 'premium'), [served]);
     const [model, choose] = useModel();
-    return (_jsxs(YStack, { gap: "$3", maxW: 420, children: [_jsx(Text, { fontSize: "$3", color: "$soft", children: "Used for new chats. An agent with its own model keeps that choice." }), _jsx(XStack, { self: "flex-start", children: _jsx(ModelSelector, { models: [...models, ...RESEARCH], value: model, onChange: choose, size: "sm" }) }), _jsx(YStack, { gap: "$2", mt: "$2", children: models
-                    .filter((m) => !m.id.includes('openrouter'))
-                    .slice(0, 8)
-                    .map((m) => {
-                    const isSel = model === m.id;
-                    const p = m.id.startsWith('zen') ? 'zen' : 'enso';
-                    return (_jsx(Box, { render: "button", onClick: () => choose(m.id), px: "$3", py: "$2", rounded: "$2", borderWidth: 1, borderColor: isSel ? '$ink' : '$borderColor', bg: isSel ? '$raised' : 'transparent', hoverStyle: { bg: '$hover' }, cursor: "pointer", children: _jsxs(XStack, { items: "center", gap: "$2.5", children: [_jsx(ProviderMark, { provider: p, size: 16 }), _jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$ink", flex: 1, children: m.id }), isSel ? (_jsx(Text, { fontSize: "$1", color: "$soft", children: "Active" })) : null] }) }, m.id));
-                }) })] }));
+    return (_jsxs(YStack, { gap: "$3", maxW: 420, children: [_jsx(Text, { fontSize: "$3", color: "$soft", children: "Used for new chats. An agent with its own model keeps that choice. Premium models are picked per conversation in the composer." }), _jsx(XStack, { self: "flex-start", children: _jsx(ModelPicker, { models: models, scope: "chat", value: model, onChange: choose, size: "sm" }) })] }));
 }
 /**
  * WHAT THE GATEWAY SERVES, read from the same `/v1/models` the rooms read.
@@ -241,8 +238,8 @@ function Usage({ sections, title, meters = false }) {
     if (!isAuthenticated || !accessToken) {
         return _jsx(Text, { fontSize: "$3", color: "$soft", children: "Sign in to see your usage." });
     }
-    const plan = meters && read.limits ? _jsx(PlanUsage, { limits: read.limits, plan: planName(read.limits.plan) || undefined, notice: read.notice }) : null;
-    if (read.limits?.plan || !spendShown(read))
+    const plan = meters && read.limits ? (_jsx(PlanUsage, { limits: read.limits, plan: planName(read.limits.plan) || undefined, notice: read.notice, onCredits: (on) => setCreditsAfterAllowance(on).then(read.reload), creditsHref: payPage(), addCreditsHref: checkoutUrl() })) : null;
+    if (paidPlan(read.limits) || !spendShown(read))
         return plan;
     // The address is read HERE rather than at import: the panel sends the bearer
     // with every read, and a credentialed read to an absolute address from a page

package/dist/Shell.js

@@ -36,7 +36,8 @@ import { hasSession, superAdmin } from "./lib/session.js";
 import { enter, LOGIN } from "./lib/destination.js";
 import { address, sharedWithMe } from "./lib/share.js";
 import { list } from "./lib/list.js";
-import { sku } from "./lib/limits.js";
+import { ModelPicker } from "@hanzo/ui/models";
+import { parseModels } from "@hanzo/ui/models/catalog";
 import { mark } from "./lib/mark.js";
 import { useOpen } from "./open.js";
 import { useSpan } from "./span.js";
@@ -667,6 +668,7 @@ function Bots({ show, owner, filter = "", onPick, navigate, }) {
     const [wrong, setWrong] = useState(null);
     const picking = useRef(null);
     const { models } = useModels();
+    const listed = useMemo(() => parseModels(models), [models]);
     const allPeopleMap = new Map();
     for (const p of (Array.isArray(storedPeople) ? storedPeople : []))
         if (p?.id)
@@ -776,7 +778,7 @@ function Bots({ show, owner, filter = "", onPick, navigate, }) {
                                         setEmoji(e.target.value);
                                         if (e.target.value)
                                             setAvatar("");
-                                    }, placeholder: "\uD83D\uDE42", "aria-label": "Emoji" }), ...FIELD, width: 44, text: "center", px: 4 }), _jsxs(Text, { render: _jsx("select", { value: model, onChange: (e) => setModel(e.target.value), "aria-label": "Model" }), ...FIELD, outlineStyle: undefined, flex: 1, minW: 0, px: 8, children: [_jsx("option", { value: "enso", children: "enso" }), models.filter((one) => sku(one.id)).map((one) => (_jsx("option", { value: one.id, children: one.id }, one.id)))] }), _jsx(Box, { render: "button", onClick: () => {
+                                    }, placeholder: "\uD83D\uDE42", "aria-label": "Emoji" }), ...FIELD, width: 44, text: "center", px: 4 }), _jsx(YStack, { flex: 1, minW: 0, children: _jsx(ModelPicker, { models: listed, scope: "chat", value: model, onChange: setModel, size: "sm" }) }), _jsx(Box, { render: "button", onClick: () => {
                                     if (!busy)
                                         void add();
                                 }, "aria-disabled": busy || !name.trim(), opacity: busy || !name.trim() ? 0.5 : 1, px: "$2.5", py: "$1.5", rounded: "$2", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: "$raised" }, children: _jsx(Text, { fontSize: "$1", color: "$ink", children: busy ? "Adding" : "Add" }) })] }), wrong ? (_jsx(Text, { fontSize: "$1", color: BAD, numberOfLines: 2, children: wrong })) : null] })) : null, open ? (_jsxs(YStack, { pl: "$4", gap: "$0.5", children: [broke ? (_jsx(Note, { children: say(broke, "this org's roster") })) : waiting && empty ? (_jsx(Note, { children: "Reading the roster." })) : empty ? (_jsx(Note, { children: show === "agents" ? "No agents yet. Add one with +." : "No one here yet. Invite a teammate." })) : null, folk.map((person) => {

package/dist/Vibe.js

@@ -26,9 +26,10 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { useRooms } from './host.js';
 import { ArrowUp, Globe, Monitor, RefreshCw, Smartphone, Sparkles, Tablet, UserPlus, Users, } from 'lucide-react';
 import { View, XStack, YStack, Text } from '@hanzo/gui';
-import { Button, Picker } from '@hanzo/ui';
+import { Button } from '@hanzo/ui';
 import { AiProvider, useAgents, useModels, usePeople } from '@hanzo/ai/react';
-import { sku } from './lib/limits.js';
+import { ModelPicker } from '@hanzo/ui/models';
+import { parseModels } from '@hanzo/ui/models/catalog';
 import { useIam, useOrganizations } from '@hanzo/iam/react';
 import { hasSession } from './lib/session.js';
 import { useHydrated } from './lib/hydrated.js';
@@ -122,9 +123,9 @@ function VibeWorkspaceInner() {
 function Vibe() {
     const { Link } = useRooms();
     const { user } = useIam();
-    // Hanzo models alone, as every picker here offers them (`sku`).
-    const { models: listed } = useModels();
-    const models = useMemo(() => listed.filter((m) => sku(m.id)), [listed]);
+    // Every model the gateway lists, through the one picker.
+    const { models: catalog } = useModels();
+    const models = useMemo(() => parseModels(catalog), [catalog]);
     const [activeTabMobile, setActiveTabMobile] = useState('stream');
     // The frame shows what the bar says. It starts empty because a run publishes
     // no URL — the 202 names a session, not an address — so this room has nothing
@@ -136,7 +137,7 @@ function Vibe() {
     // The house name for the lane, resolved against what the gateway serves —
     // `served` falls to a model that answers rather than sending one nobody has.
     const [wanted, setWanted] = useState(user ? ENSO : FREE);
-    const model = served(models, wanted);
+    const model = models.some((m) => m.id === wanted) ? wanted : served(models, wanted);
     const [busy, setBusy] = useState(false);
     const [turns, setTurns] = useState([]);
     const bottom = useRef(null);
@@ -168,7 +169,7 @@ function Vibe() {
     };
     return (_jsxs(YStack, { "data-vibe": true, flex: 1, minH: 0, height: "100vh", width: "100%", maxW: "100%", overflowX: "auto", overflowY: "hidden", bg: "$background", pb: 56, children: [_jsxs(XStack, { height: 52, items: "center", justify: "space-between", px: "$3.5", borderBottomWidth: 1, borderColor: "$borderColor", bg: "$background", z: 30, shrink: 0, children: [_jsxs(XStack, { items: "center", gap: "$2.5", children: [_jsx(TopOrgSelector, {}), _jsxs(XStack, { display: "none", $md: { display: 'flex' }, items: "center", gap: "$2", py: 4, px: 10, rounded: 20, bg: "$panel", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(View, { width: 7, height: 7, rounded: 4, bg: busy ? 'var(--state-online)' : '$faint' }), _jsx(Text, { fontSize: 11, color: "$quiet", fontWeight: "500", children: busy ? 'Starting a run' : 'Idle' })] })] }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(XStack, { $md: { display: 'none' }, bg: "$panel", rounded: 8, p: 2, gap: 2, borderWidth: 1, borderColor: "$borderColor", children: ['stream', 'preview', 'team'].map((tab) => (_jsx(Button, { size: "sm", px: "$2", variant: activeTabMobile === tab ? 'secondary' : 'ghost', color: activeTabMobile === tab ? '$ink' : '$soft', "aria-pressed": activeTabMobile === tab, onClick: () => setActiveTabMobile(tab), children: tab === 'stream' ? 'Stream' : tab === 'preview' ? 'Preview' : 'Team' }, tab))) }), _jsx(Button, { asChild: true, variant: "primary", size: "sm", children: _jsxs(Link, { href: invite(), children: [_jsx(UserPlus, { size: 13 }), "Invite"] }) })] })] }), _jsxs(View, { flex: 1, minH: 0, width: "100%", height: "100%", overflow: "hidden", display: "grid", gridTemplateRows: "100%", gridTemplateColumns: "100%", $md: { gridTemplateColumns: 'minmax(320px, 380px) minmax(0, 1fr)' }, $lg: { gridTemplateColumns: 'minmax(340px, 400px) minmax(360px, 1fr) minmax(300px, 340px)' }, $xl: { gridTemplateColumns: 'minmax(380px, 440px) minmax(480px, 1fr) minmax(340px, 380px)' }, children: [_jsxs(YStack, { height: "100%", borderRightWidth: 1, borderColor: "$borderColor", bg: "$background", minW: 0, display: activeTabMobile === 'stream' ? 'flex' : 'none', $md: { display: 'flex' }, children: [_jsxs(XStack, { height: 42, items: "center", gap: "$2", px: "$3.5", borderBottomWidth: 1, borderColor: "$borderColor", bg: "$background", children: [_jsx(Sparkles, { size: 14, color: "var(--foreground)" }), _jsx(Text, { fontSize: 12, fontWeight: "600", color: "$ink", children: "Runs" }), turns.length > 0 && (_jsx(View, { px: 6, py: 2, rounded: 4, bg: "$hover", children: _jsx(Text, { fontSize: 10, color: "$soft", children: turns.length }) }))] }), _jsxs(YStack, { flex: 1, overflowY: "auto", overflowX: "hidden", p: "$3.5", gap: "$4", children: [turns.length === 0 ? (_jsx(Quiet, { children: "Nothing has been sent from this room yet. Describe a task below and the run it opens appears here." })) : null, turns.map((turn) => (_jsxs(YStack, { gap: "$2.5", children: [_jsxs(XStack, { gap: "$2.5", children: [_jsx(View, { width: 24, height: 24, rounded: 12, bg: "$raised", items: "center", justify: "center", shrink: 0, children: _jsx(Text, { fontSize: 10, fontWeight: "700", color: "$ink", children: turn.who.charAt(0).toUpperCase() }) }), _jsxs(YStack, { flex: 1, gap: "$1", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Text, { fontSize: 12, fontWeight: "700", color: "$ink", children: turn.who }), _jsx(Text, { fontSize: 11, color: "$soft", children: turn.time }), _jsx(View, { px: 5, py: 1, rounded: 4, bg: "$hover", children: _jsx(Text, { fontSize: 10, color: "$soft", fontFamily: "$mono", children: turn.model }) })] }), _jsx(Text, { fontSize: 12, color: "$quiet", lineHeight: 18, children: turn.prompt })] })] }), _jsx(YStack, { ml: "$4", gap: "$1.5", children: turn.refused ? (_jsx(Text, { fontSize: 11, color: "$ink", lineHeight: 16, children: turn.refused })) : !turn.run ? (_jsx(Quiet, { children: "Starting." })) : (_jsxs(YStack, { p: "$2", rounded: 8, bg: "$panel", borderWidth: 1, borderColor: "$borderColor", gap: "$1", children: [_jsx(Text, { fontSize: 11, color: "$quiet", fontFamily: "$mono", children: turn.run.sessionId }), _jsxs(Text, { fontSize: 11, color: "$soft", children: [turn.run.routed
                                                                     ? `Running on ${turn.run.targetId}`
-                                                                    : 'Running in a sandbox', turn.run.branch ? ` · ${turn.run.branch}` : ''] }), _jsx(Text, { render: _jsx(Link, { href: dev(turn.run.sessionId) }), color: "$ink", fontSize: "$1", children: "Watch it work" })] })) })] }, turn.id))), _jsx("div", { ref: bottom })] }), _jsxs(YStack, { p: "$3", borderTopWidth: 1, borderColor: "$borderColor", bg: "$background", gap: "$2", children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [_jsxs(Picker, { value: model, onChange: (e) => setWanted(e.target.value), "aria-label": "Model", maxW: 200, children: [models.length === 0 ? _jsx("option", { value: model, children: model }) : null, models.map((m) => (_jsx("option", { value: m.id, children: m.id }, m.id)))] }), _jsx(Text, { fontSize: 10, color: "$faint", children: "Press Enter to send" })] }), _jsxs(YStack, { bg: "$panel", borderWidth: 1, borderColor: "var(--border-control)", rounded: 12, overflow: "hidden", children: [_jsx(Text, { render: _jsx("textarea", { value: agentInput, onChange: (e) => setAgentInput(e.target.value), onKeyDown: (e) => {
+                                                                    : 'Running in a sandbox', turn.run.branch ? ` · ${turn.run.branch}` : ''] }), _jsx(Text, { render: _jsx(Link, { href: dev(turn.run.sessionId) }), color: "$ink", fontSize: "$1", children: "Watch it work" })] })) })] }, turn.id))), _jsx("div", { ref: bottom })] }), _jsxs(YStack, { p: "$3", borderTopWidth: 1, borderColor: "$borderColor", bg: "$background", gap: "$2", children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [_jsx(ModelPicker, { models: models, scope: "chat", value: model, onChange: setWanted, size: "sm", quiet: true }), _jsx(Text, { fontSize: 10, color: "$faint", children: "Press Enter to send" })] }), _jsxs(YStack, { bg: "$panel", borderWidth: 1, borderColor: "var(--border-control)", rounded: 12, overflow: "hidden", children: [_jsx(Text, { render: _jsx("textarea", { value: agentInput, onChange: (e) => setAgentInput(e.target.value), onKeyDown: (e) => {
                                                         if (e.key === 'Enter' && !e.shiftKey) {
                                                             e.preventDefault();
                                                             send();

package/dist/enso.d.ts

@@ -1,3 +1,4 @@
+import { type ModelCatalogEntry, type PauseSource } from '@hanzo/ui/models';
 /**
  * How hard to think — and, one press inside, what thinks.
  *
@@ -45,7 +46,7 @@ export type EffortId = (typeof EFFORTS)[number]['id'];
  */
 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: {
+export declare function nameOf(models: readonly {
     id: string;
 }[], id: string): string;
 export interface EnsoProps {
@@ -55,9 +56,10 @@ export interface EnsoProps {
     /** The override. `models` empty hides it rather than offering an empty menu. */
     model?: string;
     onModel?: (id: string) => void;
-    models?: {
-        id: string;
-    }[];
+    /** The catalog, as `parseModels` reads `GET /v1/models`: every model is offered. */
+    models?: readonly ModelCatalogEntry[];
+    /** The payer's plan usage: a paused model says so and still picks. */
+    limits?: PauseSource | null;
     disabled?: boolean;
 }
 /**
@@ -67,4 +69,4 @@ export interface EnsoProps {
  * (`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;
+export declare function Enso({ effort, onEffort, model, onModel, models, limits, disabled }: EnsoProps): import("react").JSX.Element;

package/dist/enso.js

@@ -3,7 +3,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 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 { ModelPicker } from '@hanzo/ui/models';
 import { ProviderMark } from './ProviderMark.js';
 import { ENSO, FREE } from './lib/ai.js';
 import { modelName } from './lib/models.js';
@@ -90,7 +90,7 @@ export function nameOf(models, id) {
  * (`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 }) {
+export function Enso({ effort, onEffort, model, onModel, models = [], limits, disabled }) {
     const [open, setOpen] = useState(false);
     const chosen = EFFORTS.find((e) => e.id === effort);
     const pace = onEffort && chosen ? chosen.label : null;
@@ -105,7 +105,7 @@ export function Enso({ effort, onEffort, model, onModel, models = [], disabled }
                                     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) => {
+                            : 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(ModelPicker, { models: models, limits: limits, value: model, onChange: (id) => {
                                                 onModel(id);
                                                 setOpen(false);
                                             }, size: "sm" })] })] })) : null] }) })] }));

package/dist/lib/limits.d.ts

@@ -7,8 +7,15 @@
  * bearer is the subject and `X-Org-Id` the organization this browser works in.
  */
 import { type UseLimits } from '@hanzo/ui/product/useLimits';
+import { paidPlan } from '@hanzo/ui/product/limits';
 /** Reads the limits as whoever holds the bearer, in this browser's organization. */
 export declare function readLimits(signal: AbortSignal): Promise<unknown>;
+/**
+ * The org's choice to keep paying from credits once included usage runs out —
+ * `PUT /v1/ai/limits`, org admins only. A refusal throws with the server's own
+ * words, so the reader is told why.
+ */
+export declare function setCreditsAfterAllowance(on: boolean): Promise<void>;
 /**
  * The limits for a signed-in reader, in organization `org`; `name` turns a
  * fallback model id into the name the reader knows. Signed out reads nothing,
@@ -17,11 +24,12 @@ export declare function readLimits(signal: AbortSignal): Promise<unknown>;
 export declare const useLimits: (enabled?: boolean, org?: string | null, name?: (id: string) => string) => UseLimits;
 /**
  * Whether a reader's dollar spend may be shown: their limits came back and name no
- * plan, or could not be read. A plan holder sees usage as shares, never money.
+ * paid plan, or could not be read. A plan holder sees usage as shares, never money.
  */
 export declare const spendShown: ({ limits, answered }: Pick<UseLimits, 'limits' | 'answered'>) => boolean;
-/** Whether a model is a Hanzo SKU — an Enso or Zen id — the only models a consumer surface offers. */
-export declare const sku: (id: string) => boolean;
+export { paidPlan };
+/** Whether a catalog family is one of Hanzo's chat families, Enso or Zen, whose turns carry the live web. */
+export declare const house: (family: string | undefined) => boolean;
 /**
  * Whether a model can answer a chat turn: it names no outputs, or names text
  * among them. `zen-scribe` (a transcript) and `zen-voice-mini` (audio) are

package/dist/lib/limits.js

@@ -8,6 +8,7 @@
  * bearer is the subject and `X-Org-Id` the organization this browser works in.
  */
 import { useLimits as useHeld } from '@hanzo/ui/product/useLimits';
+import { paidPlan } from '@hanzo/ui/product/limits';
 import { api } from './api.js';
 import { scope } from './session.js';
 /** Reads the limits as whoever holds the bearer, in this browser's organization. */
@@ -17,6 +18,23 @@ export async function readLimits(signal) {
         throw Object.assign(new Error(`Limits answered ${res.status}`), { status: res.status });
     return res.json();
 }
+/**
+ * The org's choice to keep paying from credits once included usage runs out —
+ * `PUT /v1/ai/limits`, org admins only. A refusal throws with the server's own
+ * words, so the reader is told why.
+ */
+export async function setCreditsAfterAllowance(on) {
+    const res = await fetch(`${api()}/v1/ai/limits`, {
+        method: 'PUT',
+        headers: { ...scope(), 'Content-Type': 'application/json' },
+        body: JSON.stringify({ creditsAfterAllowance: on }),
+    });
+    if (res.ok)
+        return;
+    const body = (await res.json().catch(() => null));
+    const said = typeof body?.error === 'string' ? body.error : typeof body?.error?.message === 'string' ? body.error.message : typeof body?.message === 'string' ? body.message : '';
+    throw Object.assign(new Error(said || (res.status === 403 ? 'Only an organization admin can turn on credits.' : `Credits answered ${res.status}`)), { status: res.status });
+}
 /**
  * The limits for a signed-in reader, in organization `org`; `name` turns a
  * fallback model id into the name the reader knows. Signed out reads nothing,
@@ -25,11 +43,12 @@ export async function readLimits(signal) {
 export const useLimits = (enabled = true, org = null, name) => useHeld(enabled ? readLimits : null, org, name);
 /**
  * Whether a reader's dollar spend may be shown: their limits came back and name no
- * plan, or could not be read. A plan holder sees usage as shares, never money.
+ * paid plan, or could not be read. A plan holder sees usage as shares, never money.
  */
-export const spendShown = ({ limits, answered }) => answered && !limits?.plan;
-/** Whether a model is a Hanzo SKU — an Enso or Zen id — the only models a consumer surface offers. */
-export const sku = (id) => /^(hanzo\/)?(enso|zen)/i.test(id);
+export const spendShown = ({ limits, answered }) => answered && !paidPlan(limits);
+export { paidPlan };
+/** Whether a catalog family is one of Hanzo's chat families, Enso or Zen, whose turns carry the live web. */
+export const house = (family) => family === 'enso' || family === 'zen';
 /**
  * Whether a model can answer a chat turn: it names no outputs, or names text
  * among them. `zen-scribe` (a transcript) and `zen-voice-mini` (audio) are

package/dist/lib/plans.d.ts

@@ -150,8 +150,6 @@ export declare function charge(plan: SubscriptionPlan, interval: Interval): numb
 export declare function quote(plan: SubscriptionPlan, interval: Interval): string | null;
 /** What a year saves against twelve months, as a whole percent: 1 − year ÷ (12 × month). Null where it saves nothing. */
 export declare function saving(plan: SubscriptionPlan): number | null;
-/** Whether the Free plan runs a model: one its row names, or any `:free` route. */
-export declare function onFree(model: string): boolean;
 /**
  * The catalog's own name for a plan slug — "max-20x" reads as "Max 20x" —
  * or null where the slug is empty or the catalog does not carry it.

package/dist/lib/plans.js

@@ -222,17 +222,6 @@ export function saving(plan) {
         return null;
     return Math.round((1 - year / (12 * month)) * 100);
 }
-/**
- * The models the Free plan runs, as @hanzo/plans states them: `ai.models` on
- * the `free` row. Read on first ask and not at import, so a page that only
- * formats money or names the pay page carries none of the catalogue.
- */
-let freeModels = null;
-/** Whether the Free plan runs a model: one its row names, or any `:free` route. */
-export function onFree(model) {
-    freeModels ??= new Set(subscriptionPlans.find((p) => p.id === "free")?.entitlements?.["ai.models"] ?? []);
-    return freeModels.has(model) || model.endsWith(":free");
-}
 /**
  * The catalog's own name for a plan slug — "max-20x" reads as "Max 20x" —
  * or null where the slug is empty or the catalog does not carry it.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/rooms",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "description": "The workspace rooms — Home, Chat, Inbox, Contacts, Meet, Cal, Drive, Board, Work, Bots — and the frame that holds them, once, for every Hanzo surface.",
   "type": "module",
   "main": "./dist/index.js",
@@ -56,7 +56,7 @@
     "@hanzo/iam": ">=0.21.28",
     "@hanzo/logo": ">=1.0.26",
     "@hanzo/plans": ">=1.8.9",
-    "@hanzo/ui": ">=8.27.57",
+    "@hanzo/ui": ">=8.27.67",
     "@hanzo/usage": ">=0.1.18",
     "@hanzo/voice": ">=0.1.16",
     "@hanzogui/shell": "^8.3.20",
@@ -66,16 +66,16 @@
   },
   "devDependencies": {
     "@hanzo/ai": "0.6.20",
-    "@hanzo/appearance": "0.2.6",
+    "@hanzo/appearance": "0.2.8",
     "@hanzo/build": "0.2.34",
     "@hanzo/composer": "0.2.0",
-    "@hanzo/design": "0.5.33",
+    "@hanzo/design": "0.5.34",
     "@hanzo/event": "0.3.56",
     "@hanzo/gui": "8.3.5",
     "@hanzo/iam": "0.21.28",
     "@hanzo/logo": "1.0.26",
     "@hanzo/plans": "1.8.9",
-    "@hanzo/ui": "8.27.57",
+    "@hanzo/ui": "8.27.67",
     "@hanzo/usage": "0.1.18",
     "@hanzo/voice": "0.1.16",
     "@hanzogui/config": "8.3.5",