@hanzo/rooms 0.1.21 → 0.1.23

package/dist/Account.d.ts

@@ -1,8 +1,10 @@
 /** The block at the foot of the sidebar: press it for the menu. */
-export declare function Account({ onToggleCollapse, onProfile, onAppearance, }?: {
+export declare function Account({ onToggleCollapse, onProfile, onAppearance, onUsage, }?: {
     onToggleCollapse?: () => void;
     /** Opens the profile beside the room. Absent, the row goes to hanzo.id. */
     onProfile?: () => void;
     /** Opens the appearance settings. Absent, the row is not drawn. */
     onAppearance?: () => void;
+    /** Opens the plan's usage settings. Absent, the row is not drawn. */
+    onUsage?: () => void;
 }): import("react").JSX.Element;

package/dist/Account.js

@@ -3,13 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * WHO YOU ARE, at the foot of the sidebar: the person, and the person's menu.
  *
- * Profile, appearance, security and sign out — the account, and nothing that
+ * Profile, appearance, usage, security and sign out — the account, and nothing that
  * belongs to the workspace. Which workspace you stand in is the switcher at the
  * TOP of the sidebar, and what it may spend is its Billing, so this card shows
  * neither: a balance here read as the person's money when it is the workspace's.
  */
 import { useEffect, useRef, useState } from 'react';
-import { ChevronsUpDown, LogOut, PanelLeftClose, Palette, Shield, UserRound } from 'lucide-react';
+import { Activity, ChevronsUpDown, LogOut, PanelLeftClose, Palette, Shield, UserRound } from 'lucide-react';
 import { XStack, YStack, Text, Box } from '@hanzo/ui';
 import { sheet } from '@hanzo/ui/glass';
 import { useIam } from '@hanzo/iam/react';
@@ -22,7 +22,7 @@ function Row({ icon, onPress, children, }) {
     return (_jsx(Box, { render: "button", onClick: onPress, width: "100%", px: "$3", py: "$2", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsxs(XStack, { items: "center", gap: "$2", children: [icon, _jsx(Text, { fontSize: "$2", color: "$ink", children: children })] }) }));
 }
 /** The block at the foot of the sidebar: press it for the menu. */
-export function Account({ onToggleCollapse, onProfile, onAppearance, } = {}) {
+export function Account({ onToggleCollapse, onProfile, onAppearance, onUsage, } = {}) {
     const { user } = useIam();
     const logout = useSignOut();
     const { user: account } = useAccount();
@@ -54,5 +54,5 @@ export function Account({ onToggleCollapse, onProfile, onAppearance, } = {}) {
     // @ts-expect-error — ref is forwarded to the DOM node by the primitive.
     , { 
         // @ts-expect-error — ref is forwarded to the DOM node by the primitive.
-        ref: holder, position: "relative", borderTopWidth: 1, borderColor: "$borderColor", children: [open ? (_jsxs(YStack, { role: "menu", "aria-label": "Account", position: "absolute", b: "calc(100% + 6px)", l: "$2", r: "$2", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", ...sheet(2), py: "$2", gap: "$1", z: "var(--z-modal)", children: [_jsx(Row, { icon: _jsx(UserRound, { size: 15, "aria-hidden": true }), onPress: act(() => (onProfile ? onProfile() : window.location.assign(link(`${iam()}/account`)))), children: "Profile" }), onAppearance ? (_jsx(Row, { icon: _jsx(Palette, { size: 15, "aria-hidden": true }), onPress: act(onAppearance), children: "Appearance" })) : null, _jsx(Row, { icon: _jsx(Shield, { size: 15, "aria-hidden": true }), onPress: act(() => window.location.assign(link(`${iam()}/account/security`))), children: "Security" }), _jsx(Box, { height: 1, bg: "$borderColor", my: "$1" }), _jsx(Row, { icon: _jsx(LogOut, { size: 15, "aria-hidden": true }), onPress: act(() => void logout()), children: "Sign out" })] })) : null, _jsxs(XStack, { items: "center", width: "100%", children: [_jsx(Box, { render: "button", onClick: () => setOpen((v) => !v), "aria-expanded": open, "aria-haspopup": "menu", "aria-label": "Account", flex: 1, minW: 0, px: "$3", py: "$2", hoverStyle: { bg: '$hover' }, children: _jsxs(XStack, { items: "center", gap: "$2", minW: 0, children: [_jsx(Face, { src: face, name: called, size: 22 }), _jsxs(YStack, { flex: 1, minW: 0, items: "flex-start", children: [_jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$color", numberOfLines: 1, children: called }), email && email !== called ? (_jsx(Text, { fontSize: "$1", color: "$soft", numberOfLines: 1, children: email })) : null] }), _jsx(ChevronsUpDown, { size: 14, "aria-hidden": true })] }) }), onToggleCollapse ? (_jsx(Box, { render: "button", onClick: onToggleCollapse, "aria-label": "Collapse sidebar", p: "$2", mr: "$1.5", rounded: "$2", hoverStyle: { bg: '$hover' }, cursor: "pointer", children: _jsx(PanelLeftClose, { size: 16, "aria-hidden": true }) })) : null] })] }));
+        ref: holder, position: "relative", borderTopWidth: 1, borderColor: "$borderColor", children: [open ? (_jsxs(YStack, { role: "menu", "aria-label": "Account", position: "absolute", b: "calc(100% + 6px)", l: "$2", r: "$2", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", ...sheet(2), py: "$2", gap: "$1", z: "var(--z-modal)", children: [_jsx(Row, { icon: _jsx(UserRound, { size: 15, "aria-hidden": true }), onPress: act(() => (onProfile ? onProfile() : window.location.assign(link(`${iam()}/account`)))), children: "Profile" }), onAppearance ? (_jsx(Row, { icon: _jsx(Palette, { size: 15, "aria-hidden": true }), onPress: act(onAppearance), children: "Appearance" })) : null, onUsage ? (_jsx(Row, { icon: _jsx(Activity, { size: 15, "aria-hidden": true }), onPress: act(onUsage), children: "Usage" })) : null, _jsx(Row, { icon: _jsx(Shield, { size: 15, "aria-hidden": true }), onPress: act(() => window.location.assign(link(`${iam()}/account/security`))), children: "Security" }), _jsx(Box, { height: 1, bg: "$borderColor", my: "$1" }), _jsx(Row, { icon: _jsx(LogOut, { size: 15, "aria-hidden": true }), onPress: act(() => void logout()), children: "Sign out" })] })) : null, _jsxs(XStack, { items: "center", width: "100%", children: [_jsx(Box, { render: "button", onClick: () => setOpen((v) => !v), "aria-expanded": open, "aria-haspopup": "menu", "aria-label": "Account", flex: 1, minW: 0, px: "$3", py: "$2", hoverStyle: { bg: '$hover' }, children: _jsxs(XStack, { items: "center", gap: "$2", minW: 0, children: [_jsx(Face, { src: face, name: called, size: 22 }), _jsxs(YStack, { flex: 1, minW: 0, items: "flex-start", children: [_jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$color", numberOfLines: 1, children: called }), email && email !== called ? (_jsx(Text, { fontSize: "$1", color: "$soft", numberOfLines: 1, children: email })) : null] }), _jsx(ChevronsUpDown, { size: 14, "aria-hidden": true })] }) }), onToggleCollapse ? (_jsx(Box, { render: "button", onClick: onToggleCollapse, "aria-label": "Collapse sidebar", p: "$2", mr: "$1.5", rounded: "$2", hoverStyle: { bg: '$hover' }, cursor: "pointer", children: _jsx(PanelLeftClose, { size: 16, "aria-hidden": true }) })) : null] })] }));
 }

package/dist/Chat.js

@@ -28,7 +28,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // belongs in the thread where the reader can see it, not in a caption that
 // pre-emptively refuses on the gateway's behalf.
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { capped, detail, familyOf, planRequired, plainly, refused } from "./failure.js";
+import { billed, detail, familyOf, planRequired, plainly, refused } from "./failure.js";
 import { Prose } from "./Prose.js";
 import { useAgent, useAi, useChat, useModels, } from "@hanzo/ai/react";
 import { freeCopy, grantConsent, hasConsent, isFree, } from "@hanzo/ai";
@@ -44,9 +44,9 @@ 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, clock, sku, useLimits } from "./lib/limits.js";
+import { chats, sku, useLimits } from "./lib/limits.js";
+import { LimitedBanner } from "@hanzo/ui/product/LimitedBanner";
 import { WEB } from "./lib/web.js";
-import { Meters } from "./meters.js";
 import { useHydrated } from "./lib/hydrated.js";
 import { base, served } from "./lib/ai.js";
 import { onServed } from "./lib/served.js";
@@ -63,7 +63,7 @@ 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, planName } from './lib/plans.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';
@@ -527,10 +527,14 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
     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);
-    // WHAT THE PLAN HAS LEFT, as shares of the session, the day and the month
-    // (lib/hanzo/limits.ts). Read again whenever a send settles, below.
-    const { limits, reload: reread } = useLimits(!anonymous, org());
+    // 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 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
@@ -971,12 +975,11 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
         const whom = addressed(text, room);
         const wrong = failed?.error ?? null;
         const how = wrong ? refusalOf(wrong) : null;
-        // A SPENT WINDOW is the plan holder's own limit, said with its reset and,
-        // below the top plan, the next plan's checkout. Asking again before the
-        // reset meets the same answer, so it offers no Try again.
-        const cap = wrong ? capped(wrong) : null;
-        const next = cap?.href ? planName(limits?.upgrade) : null;
-        const resign = !cap && !!wrong && (refused(wrong) || /audience not allowed|invalid access token/i.test(wrong.message));
+        // A BILLING REFUSAL is said in the gateway's words; its way past —
+        // Upgrade, Add prepaid credit — is the banner over the composer. The free
+        // plan's cap answers the same until it resets, so it offers no Try again.
+        const bill = wrong ? billed(wrong) : null;
+        const resign = !bill && !!wrong && (refused(wrong) || /audience not allowed|invalid access token/i.test(wrong.message));
         const lift = free ? planRequired(wrong) : null;
         const said = !failed
             ? "No answer came back for this question."
@@ -984,8 +987,8 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
                 ? `${nameOf(models, model)} sent nothing for ${STALL / 60_000} minutes, so the turn was stopped.`
                 : failed.empty
                     ? `${nameOf(models, model)} answered with nothing.`
-                    : cap
-                        ? `You've used ${cap.limit === "session" ? "this session's" : "today's"} limit.${cap.resets ? ` Resets at ${clock(cap.resets)}.` : ""}`
+                    : bill
+                        ? notice?.message ?? (bill.message || plainly(wrong, "this conversation"))
                         : resign
                             ? anonymous
                                 ? "Sign in to ask this."
@@ -993,7 +996,7 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
                             : how?.provider
                                 ? `${familyOf(model) || nameOf(models, model)} is unavailable right now.`
                                 : plainly(wrong, "this conversation");
-        return (_jsx(Failure, { onRetry: resign || cap ? undefined : () => speak(text, question.id), children: _jsxs(YStack, { gap: "$2", children: [_jsxs(Text, { fontSize: "$3", color: "$ink", children: [whom.length ? `No answer from ${join(whom)}. ` : "", said] }), how?.provider && wrong ? _jsx(Why, { text: detail(wrong) }) : null, cap?.href || resign || lift || how?.wallet || how?.visitor ? (_jsx(XStack, { gap: "$2", flexWrap: "wrap", children: cap?.href ? (_jsx(Anchor, { href: cap.href, children: _jsx(Button, { size: "sm", variant: "outline", children: next ? `Upgrade to ${next}` : "Upgrade" }) })) : resign ? (_jsx(Button, { size: "sm", onClick: () => {
+        return (_jsx(Failure, { onRetry: resign || bill?.code === "free_plan_cap" ? undefined : () => speak(text, question.id), children: _jsxs(YStack, { gap: "$2", children: [_jsxs(Text, { fontSize: "$3", color: "$ink", children: [whom.length ? `No answer from ${join(whom)}. ` : "", said] }), how?.provider && wrong ? _jsx(Why, { text: detail(wrong) }) : null, !bill && (resign || lift || how?.wallet || how?.visitor) ? (_jsx(XStack, { gap: "$2", flexWrap: "wrap", children: resign ? (_jsx(Button, { size: "sm", onClick: () => {
                                 if (typeof window !== "undefined") {
                                     localStorage.removeItem("hanzo_iam_access_token");
                                     localStorage.removeItem("hanzo_iam_refresh_token");
@@ -1194,7 +1197,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 ? (_jsxs(YStack, { width: "calc(100% - 32px)", maxW: `calc(${MEASURE} - 3rem)`, mx: "auto", gap: "$1.5", children: [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, 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
                                     ? REFUSED.lost
                                     : talk.reply
                                         ? `Hanzo: ${talk.reply}`
@@ -1206,9 +1209,6 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
                                         listening: "In conversation — click to hang up",
                                         speaking: "Hanzo is speaking — talk to interrupt",
                                     }, children: () => _jsx(AudioLines, { size: 15 }) }) }), _jsx(Control, { type: "button", size: ROUND, fill: true, "data-slot": "composer-send", "aria-label": chat.streaming ? "Stop" : "Send", opacity: chat.streaming || draft.trim() || files.length ? 1 : 0.4, onClick: () => (chat.streaming ? chat.stop() : submit()), children: chat.streaming ? (_jsx(Square, { size: 13, fill: "currentColor" })) : (_jsx(ArrowUp, { size: 15, strokeWidth: 2.5 })) })] })),
-                    // WHAT THE PLAN HAS LEFT, under the frame and at its measure, for a
-                    // plan holder only: Free keeps the free lane's own notice.
-                    foot: held && limits && (limits.session || limits.day || limits.month) ? (_jsx(YStack, { width: "calc(100% - 32px)", maxW: `calc(${MEASURE} - 3rem)`, mx: "auto", children: _jsx(Meters, { limits: limits }) })) : undefined,
                 } }), _jsx(Crew, {}), isFree(model) ? (_jsx(XStack, { items: "center", justify: "center", py: "$1", px: "$3", borderTopWidth: 1, borderColor: "$borderColor", bg: "$background", children: _jsxs(Text, { fontSize: "$1", color: "$soft", children: ["Free chat is data-shared to train models. ", _jsx(Anchor, { href: site("/privacy"), fontSize: "$1", color: "$ink", children: "Privacy" })] }) })) : null, consent, _jsx(Upgrade, { ask: ask, onClose: () => setAsk(null) })] }));
 }
 /** The agreement free asks for, in @hanzo/ai's words so every surface says one thing. */

package/dist/Column.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The app's one column, the same in both modes: the Chat / Dev switch, a filter,
 // New, Dev's places, the Recents of the mode it is in, and at the foot the
-// Slack card and the account (components/workspace/Me.tsx).
+// account (components/workspace/Me.tsx).
 //
 // It is a pane on the frame's ground (app/_web.tsx), sized by the edge in the
 // gutter to its right: dragged, keyed or double-clicked back (@hanzo/build's
@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // choice outlives the move.
 import { Text, XStack, YStack } from '@hanzo/gui';
 import { ChevronDown, ChevronUp, PanelLeft, Plus, Search } from 'lucide-react';
-import { Grip, nav, path, route, Slack } from '@hanzo/build';
+import { Grip, nav, route } from '@hanzo/build';
 import { Sidebar, SidebarIconButton, SidebarItem } from '@hanzo/ui/chat';
 import { HanzoMark } from '@hanzogui/shell';
 import { useState } from 'react';
@@ -54,7 +54,6 @@ const ROW = { rounded: '$4', minH: 34 };
 export function Column({ host, mode, thread, onChat, onDev, go, drawer = false, }) {
     const [kept, setCollapsed] = useKept('hanzo.build.rail', false);
     const collapsed = kept && !drawer;
-    const [slack, setSlack] = useKept('hanzo.build.slack', false);
     const [unfolded, setUnfolded] = useState(false);
     const [words, setWords] = useState('');
     const span = useSpan(SPAN, WIDTH, FLOOR, CEIL);
@@ -83,7 +82,7 @@ export function Column({ host, mode, thread, onChat, onDev, go, drawer = false,
                                             setWords('');
                                     }, placeholder: "Filter", "aria-label": "Filter recents" }), flex: 1, minW: 0, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit", fontSize: "$2" })] }), _jsxs(YStack, { role: "list", mt: "$2.5", gap: 2, shrink: 0, children: [_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { "data-slot": "app-new", ...ROW, active: fresh, icon: _jsx(Plus, { size: 16, "aria-hidden": true }), onPress: create, ...keys(create), children: mode === 'chat' ? 'New chat' : 'New run' }) }), mode === 'dev'
                                 ? links.map((link) => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, active: link.active, icon: link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: link.label }) }, link.id)))
-                                : null, mode === 'dev' ? (_jsxs(YStack, { role: "listitem", children: [_jsx(SidebarItem, { ...ROW, "aria-expanded": unfolded, icon: unfolded ? _jsx(ChevronUp, { size: 16, "aria-hidden": true }) : _jsx(ChevronDown, { size: 16, "aria-hidden": true }), onPress: () => setUnfolded((v) => !v), ...keys(() => setUnfolded((v) => !v)), children: "More" }), unfolded ? (_jsx(YStack, { role: "list", gap: 2, children: more.map((link) => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, active: link.active, icon: link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: link.label }) }, link.id))) })) : null] })) : null] }), _jsx(XStack, { height: 1, bg: "$borderColor", mx: "$1.5", mt: "$3", shrink: 0 }), _jsx(Recents, { host: host, mode: mode, thread: thread, words: words, onOpen: open }), _jsxs(YStack, { gap: "$2", pt: "$2", shrink: 0, children: [_jsx(Made, {}), _jsx(Setup, {}), host.person && !slack ? (_jsx(YStack, { "data-slot": "app-slack", children: _jsx(Slack, { onOpen: () => dev(path({ kind: 'settings', section: 'integrations' })), onDismiss: () => setSlack(true) }) })) : null] }), _jsxs(XStack, { "data-slot": "app-foot", items: "center", gap: "$1", pt: "$2", shrink: 0, children: [_jsx(YStack, { flex: 1, minW: 0, children: _jsx(Me, { host: host, onOrg: org }) }), drawer ? null : (_jsx(SidebarIconButton, { label: "Collapse sidebar", onPress: () => setCollapsed(true), width: 32, height: 32, rounded: 999, children: _jsx(PanelLeft, { size: 16 }) }))] })] }), drawer ? null : (_jsx(Grip, { side: "left", span: span.span, floor: FLOOR, ceil: CEIL, reset: WIDTH, onSpan: span.move, onKeep: span.keep, onShut: () => setCollapsed(true), label: "Resize sidebar", 
+                                : null, mode === 'dev' ? (_jsxs(YStack, { role: "listitem", children: [_jsx(SidebarItem, { ...ROW, "aria-expanded": unfolded, icon: unfolded ? _jsx(ChevronUp, { size: 16, "aria-hidden": true }) : _jsx(ChevronDown, { size: 16, "aria-hidden": true }), onPress: () => setUnfolded((v) => !v), ...keys(() => setUnfolded((v) => !v)), children: "More" }), unfolded ? (_jsx(YStack, { role: "list", gap: 2, children: more.map((link) => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, active: link.active, icon: link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: link.label }) }, link.id))) })) : null] })) : null] }), _jsx(XStack, { height: 1, bg: "$borderColor", mx: "$1.5", mt: "$3", shrink: 0 }), _jsx(Recents, { host: host, mode: mode, thread: thread, words: words, onOpen: open }), _jsxs(YStack, { gap: "$2", pt: "$2", shrink: 0, children: [_jsx(Made, {}), _jsx(Setup, {})] }), _jsxs(XStack, { "data-slot": "app-foot", items: "center", gap: "$1", pt: "$2", shrink: 0, children: [_jsx(YStack, { flex: 1, minW: 0, children: _jsx(Me, { host: host, onOrg: org }) }), drawer ? null : (_jsx(SidebarIconButton, { label: "Collapse sidebar", onPress: () => setCollapsed(true), width: 32, height: 32, rounded: 999, children: _jsx(PanelLeft, { size: 16 }) }))] })] }), drawer ? null : (_jsx(Grip, { side: "left", span: span.span, floor: FLOOR, ceil: CEIL, reset: WIDTH, onSpan: span.move, onKeep: span.keep, onShut: () => setCollapsed(true), label: "Resize sidebar", 
                 // In the gutter between the column and the pane, not over the column's own rows.
                 r: GUTTER_END, width: "var(--pane-gap)" }))] }));
 }

package/dist/Profile.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The reader's own profile, in the column beside the room.
 //
 // A WORKSPACE OPENS A PROFILE IN A PANEL, not a page. The page exists — it is
-// /account, and it is where the whole record is edited — but reaching it from a
+// Settings (/settings), where the whole record is edited — but reaching it from a
 // conversation costs the conversation: the room, the sidebar and the rail all
 // go, and coming back is a navigation rather than a close. Slack, Teams and
 // every app shaped like them put this in the right column for that reason, and
@@ -26,7 +26,7 @@ import { mark } from './lib/mark.js';
 import { BAD } from './lib/mix.js';
 /** Slack's is 380 and the thread panel that shares this slot is the same. */
 const WIDTH = 380;
-const ACCOUNT = '/account';
+const ACCOUNT = '/settings';
 export function Profile({ open, onClose }) {
     const { Link } = useRooms();
     const { user, updateUserProfile } = useAccount();

package/dist/Settings.js

@@ -39,7 +39,7 @@ 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 { Meters } from './meters.js';
+import { PlanUsage } from '@hanzo/ui/product/PlanUsage';
 import { Look } from './look.js';
 import { ProviderMark } from './ProviderMark.js';
 import { org, pick } from './lib/session.js';
@@ -232,7 +232,8 @@ function Billing() {
 /**
  * The one usage panel every Hanzo product renders, reading as this account — for a
  * reader with no plan. A plan holder's usage is the plan's shares (`meters` draws
- * them where usage is the subject), never money (spendShown).
+ * them, with the plan's terms and its actions, where usage is the subject), never
+ * money (spendShown).
  */
 function Usage({ sections, title, meters = false }) {
     const { accessToken, isAuthenticated } = useIam();
@@ -240,15 +241,15 @@ function Usage({ sections, title, meters = false }) {
     if (!isAuthenticated || !accessToken) {
         return _jsx(Text, { fontSize: "$3", color: "$soft", children: "Sign in to see your usage." });
     }
-    if (read.limits?.plan)
-        return meters ? _jsx(Meters, { limits: read.limits, large: true }) : null;
-    if (!spendShown(read))
-        return null;
+    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))
+        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
     // the gateway does not admit dies in preflight — which drew this panel as an
     // account that had spent nothing.
-    return _jsx(UsagePanel, { baseUrl: api(), token: accessToken, sections: sections, title: title, upgrade: payPage() });
+    const spend = _jsx(UsagePanel, { baseUrl: api(), token: accessToken, sections: sections, title: title, upgrade: payPage() });
+    return plan ? (_jsxs(YStack, { gap: "$6", children: [plan, spend] })) : (spend);
 }
 /** Keys are minted and revoked through the console, which holds the one issuer. */
 function Keys() {

package/dist/Shell.js

@@ -1221,7 +1221,7 @@ function Frame({ mode, children, navigate, back, forward, }) {
                                 placeholder: "Filter", "aria-label": "Filter sidebar" }), flex: 1, minW: 0, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit", fontSize: "$2" })] }) }), settingsPane ? (_jsx(SidebarScroll, { children: _jsx(SettingsList, { active: settingsPane, filter: filter, onPick: pick, onBack: () => showSettings(null) }) })) : (_jsx(_Fragment, { children: _jsx(SidebarScroll, { children: _jsxs(_Fragment, { children: [settled ? (_jsx(Index, { mode: mode, owner: owner, filter: filter, onPick: onPick, navigate: navigate })) : null, products.length ? (_jsx(SidebarFolder, { name: "Cloud & Platform", open: filter ? true : undefined, children: products.map((prod) => (_jsx(SidebarItem, { icon: _jsx(prod.icon, { size: 13, "aria-hidden": true }), onPress: () => window.open(prod.href, "_blank", "noopener"), children: prod.label }, prod.id))) })) : null, more.length ? (_jsx(SidebarFolder, { name: "More", open: filter ? true : undefined, children: more.map((tool) => (_jsx(SidebarItem, { icon: _jsx(tool.icon, { size: 13, "aria-hidden": true }), onPress: tool.go, children: tool.label }, tool.id))) })) : null] }) }) })), settled && onApex ? _jsx(Leave, { href: signedIn ? ENTRY : WORKSPACE, children: "Workspace" }) : null, settled ? (signedIn ? (_jsxs(_Fragment, { children: [superAdmin() ? (_jsx(SidebarItem, { icon: _jsx(Building2, { size: 15, "aria-hidden": true }), onPress: () => setSupporting(true), children: "All organizations" })) : null, _jsx(SidebarItem, { icon: _jsx(UserPlus, { size: 15, "aria-hidden": true }), onPress: () => window.open(invite(), "_blank", "noopener"), children: "Invite Teammates" }), _jsx(SidebarItem, { icon: _jsx(Share2, { size: 15, "aria-hidden": true }), onPress: () => {
                             navigate?.(site("/referral"));
                             dismiss();
-                        }, children: "Share Hanzo" }), _jsx(SidebarItem, { icon: _jsx(Sparkles, { size: 15, "aria-hidden": true }), onPress: () => window.open(BILLING, "_blank", "noopener"), children: "Upgrade" }), _jsx(Account, { onToggleCollapse: toggle, onProfile: () => setProfiling(true), onAppearance: () => showSettings("general") })] })) : null) : null] }));
+                        }, children: "Share Hanzo" }), _jsx(SidebarItem, { icon: _jsx(Sparkles, { size: 15, "aria-hidden": true }), onPress: () => window.open(BILLING, "_blank", "noopener"), children: "Upgrade" }), _jsx(Account, { onToggleCollapse: toggle, onProfile: () => setProfiling(true), onAppearance: () => showSettings("general"), onUsage: () => showSettings("usage") })] })) : null) : null] }));
     return (_jsxs(YStack, { "data-slot": "workspace", "data-hydrated": settled ? "true" : undefined, "data-sidebar": asked ? "open" : "shut", display: "grid", gridTemplateColumns: `${asked ? 0 : 64}px auto minmax(0, 1fr) auto`, gridTemplateRows: "44px minmax(0, 1fr)", gridTemplateAreas: '"rail bar bar bar" "rail list pane side"', "$max-md": {
             gridTemplateColumns: "minmax(0, 1fr)",
             gridTemplateRows: `44px minmax(0, 1fr) ${TABS_HEIGHT}`,

package/dist/failure.d.ts

@@ -1,3 +1,4 @@
+import { type Refusal } from '@hanzo/ui/product/limits';
 /** Whether the store answered and the answer was no — exported so a surface can
  *  offer the way past a refusal rather than only describing it. */
 export declare const refused: (error: unknown) => boolean;
@@ -33,24 +34,12 @@ export declare function plainly(error: unknown, subject: string): string;
 export declare function planRequired(error: unknown): {
     href?: string;
 } | null;
-/** A plan holder's spent window. */
-export interface Cap {
-    limit: 'session' | 'day';
-    /** When it opens again, RFC 3339. */
-    resets: string | null;
-    /** The next plan's checkout, on hanzo.ai only. Absent at the top plan. */
-    href?: string;
-}
 /**
- * Whether a refusal is a plan's usage limit, and which window.
- *
- * A paid plan is a subscription with limits: a spent session or day comes back
- * 429 `usage_cap_exceeded` naming the window, its reset and, below the top
- * plan, an `upgrade_url`. The month refuses nothing — Enso and Zen keep
- * answering — so no other window is a cap. The code decides, never the
- * sentence, and the address is kept by the rule `planRequired` keeps.
+ * A billing refusal in the gateway's envelope — the plan's included usage
+ * spent, a paid plan required, the free plan's cap, or no balance — or null for
+ * any other failure. The code decides, never the sentence.
  */
-export declare function capped(error: unknown): Cap | null;
+export declare function billed(error: unknown): Refusal | null;
 /** The family a model id belongs to, as a reader knows it, or '' for one outside them. */
 export declare const familyOf: (id: string) => string;
 /** What the server said about a failure, for the detail folded under the plain line. */

package/dist/failure.js

@@ -9,6 +9,7 @@
 //
 // ONE FUNCTION, because every room owes the same three answers and three copies
 // would drift into three vocabularies for one event.
+import { refusalOf } from '@hanzo/ui/product/limits';
 import { told } from './lib/reach.js';
 /**
  * THE STATUS, WHERE THE FAILURE CARRIES ONE.
@@ -109,21 +110,15 @@ export function planRequired(error) {
     return { href: ours(said?.upgrade_url) };
 }
 /**
- * Whether a refusal is a plan's usage limit, and which window.
- *
- * A paid plan is a subscription with limits: a spent session or day comes back
- * 429 `usage_cap_exceeded` naming the window, its reset and, below the top
- * plan, an `upgrade_url`. The month refuses nothing — Enso and Zen keep
- * answering — so no other window is a cap. The code decides, never the
- * sentence, and the address is kept by the rule `planRequired` keeps.
+ * A billing refusal in the gateway's envelope — the plan's included usage
+ * spent, a paid plan required, the free plan's cap, or no balance — or null for
+ * any other failure. The code decides, never the sentence.
  */
-export function capped(error) {
-    const said = error?.body?.error;
-    if (said?.code !== 'usage_cap_exceeded' || status(error) !== 429)
-        return null;
-    if (said.limit !== 'session' && said.limit !== 'day')
+export function billed(error) {
+    const code = status(error);
+    if (code !== 402 && code !== 429)
         return null;
-    return { limit: said.limit, resets: typeof said.resets_at === 'string' ? said.resets_at : null, href: ours(said.upgrade_url) };
+    return refusalOf(error?.body, code);
 }
 function ours(href) {
     if (typeof href !== 'string')

package/dist/lib/limits.d.ts

@@ -1,50 +1,25 @@
-/** One window: the percent of it used, and when it starts over. */
-export interface Span {
-    /** Used, 0–100. */
-    percent: number;
-    /** RFC 3339, or null when no window is running — a session starts at the next request. */
-    resets_at: string | null;
-}
-export interface Limits {
-    /** The plan slug ("max-20x"), or "" for a caller with no plan. */
-    plan: string;
-    period_start?: string;
-    period_end?: string;
-    session?: Span;
-    day?: Span;
-    month?: Span;
-    /** The next plan's slug, "" at the top of the ladder. */
-    upgrade?: string;
-}
 /**
- * The answer, checked field by field: it is a network response. A body without
- * a string `plan` is not an answer at all; a window without a numeric percent
- * is left out rather than drawn as full or empty.
+ * The plan's usage, as @hanzo/ui holds it: `GET /v1/ai/limits` read as whoever
+ * holds the bearer in this browser's organization, kept current by every AI
+ * call `observed` (lib/served.ts) hands to `observe`. Shares only.
+ *
+ * Same base URL and headers as every billing read (lib/hanzo/tier.ts): the
+ * bearer is the subject and `X-Org-Id` the organization this browser works in.
  */
-export declare function limitsOf(body: unknown): Limits | null;
+import { type UseLimits } from '@hanzo/ui/product/useLimits';
 /** Reads the limits as whoever holds the bearer, in this browser's organization. */
-export declare function readLimits(signal?: AbortSignal): Promise<Limits>;
+export declare function readLimits(signal: AbortSignal): Promise<unknown>;
 /**
- * The limits, held, and the way to read them again. `limits` is `null` until
- * answered, and after a refusal: a reader whose limits are unknown is drawn no
- * bars. `answered` says the first read has come back either way, so a surface
- * that shows something only to a reader with no plan waits for it.
+ * 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,
+ * and still hears a refusal from a served call.
  */
-export declare function useLimits(enabled?: boolean, org?: string | null): {
-    limits: Limits | null;
-    answered: boolean;
-    reload: () => void;
-};
+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.
  */
-export declare const spendShown: ({ limits, answered }: {
-    limits: Limits | null;
-    answered: boolean;
-}) => boolean;
-/** What is left of a window, 0–100: the bar goes down as it is used. */
-export declare const left: (s: Span) => number;
+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;
 /**
@@ -56,9 +31,3 @@ export declare const chats: (model: {
     id: string;
     outputs?: unknown;
 }) => boolean;
-/** A reset as a clock reads it in this browser — "17:00" — or '' for none. */
-export declare function clock(iso: string | null | undefined): string;
-/** A period's end as a sentence states it — "Oct 30, 2026" — or '' for none. Periods end on UTC days. */
-export declare function date(iso: string | null | undefined): string;
-/** A period's end without its year — "Oct 30" — for the month bar. */
-export declare function day(iso: string | null | undefined): string;

package/dist/lib/limits.js

@@ -1,105 +1,33 @@
 'use client';
 /**
- * WHAT A PLAN HOLDER HAS LEFT, AS A SHARE.
- *
- * A paid plan is a subscription with usage limits, never a debit from a
- * balance. `GET /v1/ai/limits` answers the acting org's plan and three
- * windows — the five-hour session, the day, and the billing month — each as
- * the percent USED with the moment it resets, and the next plan up. Shares
- * only: nothing here is a count of requests or an amount of money.
- *
- * The month is the plan's included usage for the period. Spending it refuses
- * nothing — Enso and Zen keep answering from free models — so it is a line
- * under the bars, never a refusal. The session and the day refuse when spent.
- *
- * `plan` "" is a caller with no plan (Free), and then nothing else is sent:
- * that reader keeps the Free display. A read that fails is `null`, which is not
- * knowing, and nothing is drawn from it.
+ * The plan's usage, as @hanzo/ui holds it: `GET /v1/ai/limits` read as whoever
+ * holds the bearer in this browser's organization, kept current by every AI
+ * call `observed` (lib/served.ts) hands to `observe`. Shares only.
  *
  * Same base URL and headers as every billing read (lib/hanzo/tier.ts): the
  * bearer is the subject and `X-Org-Id` the organization this browser works in.
  */
-import { useCallback, useEffect, useState } from 'react';
+import { useLimits as useHeld } from '@hanzo/ui/product/useLimits';
 import { api } from './api.js';
 import { scope } from './session.js';
-const text = (v) => (typeof v === 'string' ? v : null);
-function span(v) {
-    const o = v;
-    const p = o?.percent;
-    if (typeof p !== 'number' || !Number.isFinite(p))
-        return undefined;
-    return { percent: Math.min(100, Math.max(0, Math.round(p))), resets_at: text(o?.resets_at) };
-}
-/**
- * The answer, checked field by field: it is a network response. A body without
- * a string `plan` is not an answer at all; a window without a numeric percent
- * is left out rather than drawn as full or empty.
- */
-export function limitsOf(body) {
-    const o = body;
-    const plan = text(o?.plan);
-    if (plan === null)
-        return null;
-    if (plan === '')
-        return { plan };
-    return {
-        plan,
-        period_start: text(o?.period_start) ?? undefined,
-        period_end: text(o?.period_end) ?? undefined,
-        session: span(o?.session),
-        day: span(o?.day),
-        month: span(o?.month),
-        upgrade: text(o?.upgrade) ?? '',
-    };
-}
 /** Reads the limits as whoever holds the bearer, in this browser's organization. */
 export async function readLimits(signal) {
     const res = await fetch(`${api()}/v1/ai/limits`, { headers: scope(), signal });
     if (!res.ok)
         throw Object.assign(new Error(`Limits answered ${res.status}`), { status: res.status });
-    const got = limitsOf(await res.json());
-    if (!got)
-        throw Object.assign(new Error('Limits answered without a plan'), { status: 502 });
-    return got;
+    return res.json();
 }
 /**
- * The limits, held, and the way to read them again. `limits` is `null` until
- * answered, and after a refusal: a reader whose limits are unknown is drawn no
- * bars. `answered` says the first read has come back either way, so a surface
- * that shows something only to a reader with no plan waits for it.
+ * 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,
+ * and still hears a refusal from a served call.
  */
-export function useLimits(enabled = true, org = null) {
-    const [limits, setLimits] = useState(null);
-    const [answered, setAnswered] = useState(false);
-    const [nonce, setNonce] = useState(0);
-    useEffect(() => {
-        if (!enabled)
-            return;
-        const stop = new AbortController();
-        readLimits(stop.signal)
-            .then((got) => {
-            if (!stop.signal.aborted)
-                setLimits(got);
-        })
-            .catch(() => {
-            if (!stop.signal.aborted)
-                setLimits(null);
-        })
-            .finally(() => {
-            if (!stop.signal.aborted)
-                setAnswered(true);
-        });
-        return () => stop.abort();
-    }, [enabled, nonce, org]);
-    return { limits, answered, reload: useCallback(() => setNonce((n) => n + 1), []) };
-}
+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.
  */
 export const spendShown = ({ limits, answered }) => answered && !limits?.plan;
-/** What is left of a window, 0–100: the bar goes down as it is used. */
-export const left = (s) => 100 - s.percent;
 /** 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);
 /**
@@ -108,18 +36,3 @@ export const sku = (id) => /^(hanzo\/)?(enso|zen)/i.test(id);
  * Zen ids the catalog lists, and neither answers a question.
  */
 export const chats = (model) => !Array.isArray(model.outputs) || model.outputs.includes('text');
-/** A reset as a clock reads it in this browser — "17:00" — or '' for none. */
-export function clock(iso) {
-    const t = iso ? Date.parse(iso) : NaN;
-    return Number.isNaN(t) ? '' : new Date(t).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hourCycle: 'h23' });
-}
-/** A period's end as a sentence states it — "Oct 30, 2026" — or '' for none. Periods end on UTC days. */
-export function date(iso) {
-    const t = iso ? Date.parse(iso) : NaN;
-    return Number.isNaN(t) ? '' : new Date(t).toLocaleDateString('en-US', { timeZone: 'UTC', year: 'numeric', month: 'short', day: 'numeric' });
-}
-/** A period's end without its year — "Oct 30" — for the month bar. */
-export function day(iso) {
-    const t = iso ? Date.parse(iso) : NaN;
-    return Number.isNaN(t) ? '' : new Date(t).toLocaleDateString('en-US', { timeZone: 'UTC', month: 'short', day: 'numeric' });
-}

package/dist/lib/served.d.ts

@@ -7,7 +7,8 @@
  * neither, so the site's client is built on `observed(fetch)`, which reads
  * them off each completion as it passes and tells the listeners — the header
  * when the gateway exposes it, else the first frame that names a model. Every
- * byte is passed through untouched.
+ * byte is passed through untouched. Each chat answer's usage headers, and a
+ * billing refusal's envelope, go to @hanzo/ui's `observe`.
  */
 /** A completion's asked and answering models. */
 export interface Served {

package/dist/lib/served.js

@@ -7,8 +7,10 @@
  * neither, so the site's client is built on `observed(fetch)`, which reads
  * them off each completion as it passes and tells the listeners — the header
  * when the gateway exposes it, else the first frame that names a model. Every
- * byte is passed through untouched.
+ * byte is passed through untouched. Each chat answer's usage headers, and a
+ * billing refusal's envelope, go to @hanzo/ui's `observe`.
  */
+import { observe } from '@hanzo/ui/product/useLimits';
 const listeners = new Set();
 /** Hears every served completion from now on; answers the unsubscribe. */
 export function onServed(listener) {
@@ -23,11 +25,17 @@ const tell = (heard) => {
 };
 /** The completion route, whatever host the client was built for. */
 const COMPLETION = /\/v1\/chat\/completions(?:[?#]|$)/;
+/** Every chat route whose answer carries the plan's usage headers or a billing refusal. */
+const CHAT = /\/v1\/chat\/(?:completions|public)(?:[?#]|$)/;
 /** A fetch that tells `onServed` listeners which model answered each completion. */
 export function observed(base) {
     return async (input, init) => {
         const res = await base(input, init);
         const url = typeof input === 'string' ? input : input instanceof URL ? input.href : input.url;
+        // The plan's usage rides every chat answer and every refusal: the limits
+        // hear both before anything else reads the body.
+        if (CHAT.test(url))
+            observe(res);
         if (!COMPLETION.test(url) || !res.ok)
             return res;
         let asked = '';