@hanzo/rooms 0.1.25 → 0.1.27

package/dist/Chat.js

@@ -44,7 +44,7 @@ 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, house, 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";
@@ -540,7 +540,7 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
     // 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;
     // 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,
@@ -829,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
@@ -1208,7 +1239,7 @@ 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}`

package/dist/Settings.js

@@ -35,11 +35,11 @@ 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 { 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';
@@ -238,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

@@ -761,7 +761,7 @@ function Bots({ show, owner, filter = "", onPick, navigate, }) {
     return (_jsxs(YStack, { children: [_jsxs(XStack, { items: "center", gap: "$1.5", px: "$3", py: "$1", rounded: "$2", hoverStyle: { bg: "$hover" }, children: [_jsx(Box, { render: "button", onClick: () => navigate?.(show === "agents" ? "/bots" : "/contacts"), flex: 1, minW: 0, children: _jsxs(XStack, { items: "center", gap: "$1.5", children: [_jsx(Text, { fontSize: "$2", color: "$quiet", numberOfLines: 1, children: show === "agents" ? "Agents" : "People" }), folk.length + shown.length > 0 ? (_jsx(Text, { fontSize: "$1", color: "$soft", children: folk.length + shown.length })) : null] }) }), _jsx(Box, { render: "button", onClick: (e) => {
                             e.stopPropagation();
                             setSortMode((m) => (m === "alpha" ? "recent" : "alpha"));
-                        }, title: sortMode === "alpha" ? "Sorting A-Z (Click for Recent)" : "Sorting Recent (Click for A-Z)", px: "$1.5", py: "$0.5", rounded: "$1", bg: "$raised", hoverStyle: { opacity: 0.8 }, children: _jsx(Text, { fontSize: 10, fontWeight: "600", color: "$soft", children: sortMode === "alpha" ? "A-Z" : "Recent" }) }), show === "agents" ? (_jsx(Box, { render: "button", onClick: () => {
+                        }, title: sortMode === "alpha" ? "Sorting A-Z (Click for Recent)" : "Sorting Recent (Click for A-Z)", px: "$1.5", py: "$0.5", rounded: "$1", bg: "$raised", hoverStyle: { opacity: 0.8 }, display: "flex", items: "center", justify: "center", $touchable: { minH: 40, minW: 40 }, children: _jsx(Text, { fontSize: 12, fontWeight: "600", color: "$soft", children: sortMode === "alpha" ? "A-Z" : "Recent" }) }), show === "agents" ? (_jsx(Box, { render: "button", onClick: () => {
                             if (busy)
                                 return;
                             setOpen(true);
@@ -940,8 +940,8 @@ function Rail({ mode, places, team, open, navigate, onSettings, onMore, }) {
                     overflow: "hidden",
                 }, children: [places.map((place, i) => {
                         const here = place.id === mode;
-                        return (_jsxs(Box, { render: "button", onClick: () => navigate?.(place.route), "aria-label": place.label, "aria-current": here ? "page" : undefined, title: place.title, display: "flex", "$max-md": { display: i < 4 ? "flex" : "none", width: "auto", minW: 0 }, flexDirection: "column", width: 56, minH: 44, py: "$1", rounded: "$2", items: "center", justify: "center", gap: 2, bg: here ? "$edge" : undefined, hoverStyle: { bg: here ? "$edge" : "$hover" }, children: [_jsx(place.icon, { size: 18, "aria-hidden": true }), _jsx(Text, { fontSize: 10, lineHeight: 12, color: here ? "$ink" : "$quiet", numberOfLines: 1, children: place.label })] }, place.id));
-                    }), team ? (_jsx(XStack, { "$max-md": { display: places.length < 4 ? "flex" : "none", width: "auto", minW: 0 }, children: _jsx(Text, { render: _jsx("a", { href: team, "aria-label": "Workspace", title: "Hanzo Team" }), display: "flex", width: 56, color: "inherit", children: _jsxs(Box, { display: "flex", flex: 1, flexDirection: "column", minH: 44, py: "$1", rounded: "$2", items: "center", justify: "center", gap: 2, hoverStyle: { bg: "$hover" }, children: [_jsx(LayoutGrid, { size: 18, "aria-hidden": true }), _jsx(Text, { fontSize: 10, lineHeight: 12, color: "$quiet", numberOfLines: 1, children: "Workspace" })] }) }) })) : null, _jsxs(Box, { "data-slot": "more", render: "button", onClick: onMore, "aria-label": "More places", title: "More", display: "none", "$max-md": { display: "flex", width: "auto", minW: 0 }, flexDirection: "column", width: 56, minH: 44, py: "$1", rounded: "$2", items: "center", justify: "center", gap: 2, hoverStyle: { bg: "$hover" }, children: [_jsx(Search, { size: 18, "aria-hidden": true }), _jsx(Text, { fontSize: 10, lineHeight: 12, color: "$quiet", children: "More" })] })] }), _jsx(YStack, { items: "center", pb: "$2", children: _jsxs(Box, { render: "button", onClick: onSettings, "aria-label": "Settings", title: "Settings", display: "flex", flexDirection: "column", width: 56, minH: 44, py: "$1", rounded: "$2", items: "center", justify: "center", gap: 2, hoverStyle: { bg: "$hover" }, children: [_jsx(Settings2, { size: 18, "aria-hidden": true }), _jsx(Text, { fontSize: 10, lineHeight: 12, color: "$quiet", children: "Settings" })] }) })] }));
+                        return (_jsxs(Box, { render: "button", onClick: () => navigate?.(place.route), "aria-label": place.label, "aria-current": here ? "page" : undefined, title: place.title, display: "flex", "$max-md": { display: i < 4 ? "flex" : "none", width: "auto", minW: 0 }, flexDirection: "column", width: 56, minH: 44, py: "$1", rounded: "$2", items: "center", justify: "center", gap: 2, bg: here ? "$edge" : undefined, hoverStyle: { bg: here ? "$edge" : "$hover" }, children: [_jsx(place.icon, { size: 18, "aria-hidden": true }), _jsx(Text, { fontSize: 12, lineHeight: 14, color: here ? "$ink" : "$quiet", numberOfLines: 1, children: place.label })] }, place.id));
+                    }), team ? (_jsx(XStack, { "$max-md": { display: places.length < 4 ? "flex" : "none", width: "auto", minW: 0 }, children: _jsx(Text, { render: _jsx("a", { href: team, "aria-label": "Workspace", title: "Hanzo Team" }), display: "flex", width: 56, color: "inherit", children: _jsxs(Box, { display: "flex", flex: 1, flexDirection: "column", minH: 44, py: "$1", rounded: "$2", items: "center", justify: "center", gap: 2, hoverStyle: { bg: "$hover" }, children: [_jsx(LayoutGrid, { size: 18, "aria-hidden": true }), _jsx(Text, { fontSize: 12, lineHeight: 14, color: "$quiet", numberOfLines: 1, children: "Workspace" })] }) }) })) : null, _jsxs(Box, { "data-slot": "more", render: "button", onClick: onMore, "aria-label": "More places", title: "More", display: "none", "$max-md": { display: "flex", width: "auto", minW: 0 }, flexDirection: "column", width: 56, minH: 44, py: "$1", rounded: "$2", items: "center", justify: "center", gap: 2, hoverStyle: { bg: "$hover" }, children: [_jsx(Search, { size: 18, "aria-hidden": true }), _jsx(Text, { fontSize: 12, lineHeight: 14, color: "$quiet", children: "More" })] })] }), _jsx(YStack, { items: "center", pb: "$2", children: _jsxs(Box, { render: "button", onClick: onSettings, "aria-label": "Settings", title: "Settings", display: "flex", flexDirection: "column", width: 56, minH: 44, py: "$1", rounded: "$2", items: "center", justify: "center", gap: 2, hoverStyle: { bg: "$hover" }, children: [_jsx(Settings2, { size: 18, "aria-hidden": true }), _jsx(Text, { fontSize: 12, lineHeight: 14, color: "$quiet", children: "Settings" })] }) })] }));
 }
 /**
  * Chat's column: start a chat, the projects, then every conversation. The app
@@ -1210,7 +1210,7 @@ function Frame({ mode, children, navigate, back, forward, }) {
                                     return;
                                 e.preventDefault();
                                 navigate("/");
-                            }, "aria-label": `${brand()} home`, title: "Home" }), "data-slot": "home", display: "flex", items: "center", justify: "center", width: 28, height: 28, color: "inherit", children: _jsx(HanzoMark, { size: 18 }) }), settled && isAuthenticated ? (_jsx(XStack, { shrink: 1, minW: 0, children: _jsx(OrgProjectSwitcher, { ...orgState, alwaysShow: true }) })) : null] }), _jsxs(YStack, { "data-slot": "places-list", px: "$2", pb: "$2", "$max-md": { display: "none" }, children: [places.filter((place) => matches(place.label, filter)).map((place) => (_jsx(SidebarItem, { icon: _jsx(place.icon, { size: 16, "aria-hidden": true }), active: place.id === mode, onPress: () => {
+                            }, "aria-label": `${brand()} home`, title: "Home" }), "data-slot": "home", display: "flex", items: "center", justify: "center", width: 28, height: 28, $touchable: { width: 40, height: 40 }, color: "inherit", children: _jsx(HanzoMark, { size: 18 }) }), settled && isAuthenticated ? (_jsx(XStack, { shrink: 1, minW: 0, children: _jsx(OrgProjectSwitcher, { ...orgState, alwaysShow: true }) })) : null] }), _jsxs(YStack, { "data-slot": "places-list", px: "$2", pb: "$2", "$max-md": { display: "none" }, children: [places.filter((place) => matches(place.label, filter)).map((place) => (_jsx(SidebarItem, { icon: _jsx(place.icon, { size: 16, "aria-hidden": true }), active: place.id === mode, onPress: () => {
                             navigate?.(place.route);
                             onPick?.();
                         }, children: place.label }, place.id))), matches("Settings", filter) ? (_jsx(SidebarItem, { icon: _jsx(Settings2, { size: 16, "aria-hidden": true }), onPress: () => showSettings(FIRST), children: "Settings" })) : null] }), _jsx(XStack, { px: "$3", pb: "$2", children: _jsxs(XStack, { flex: 1, height: 30, items: "center", gap: "$2", px: "$2", rounded: "$2", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(Search, { size: 13, "aria-hidden": true }), _jsx(Text, { render: _jsx("input", { value: filter, onChange: (e) => setFilter(e.target.value), onKeyDown: (e) => {

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,9 +24,10 @@ 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;
+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;
 /**

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,9 +43,10 @@ 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;
+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';
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/rooms",
-  "version": "0.1.25",
+  "version": "0.1.27",
   "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",