@hanzo/rooms 0.1.20 → 0.1.22

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/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 = '';

package/dist/lib/tier.js

@@ -26,7 +26,11 @@ import { api } from './api.js';
 import { bearer, org, orgs, scope } from './session.js';
 import { list } from './list.js';
 import { money } from './pay.js';
-import { date } from './limits.js';
+/** A period's end as a sentence states it — "Oct 30, 2026" — or '' for none. Periods end on UTC days. */
+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' });
+}
 /** An error that names the status, for `say()` to turn into a sentence. */
 const refusal = (status, message) => Object.assign(new Error(message), { status });
 /** GETs `path` as whoever holds the bearer, in this browser's organization. */

package/dist/lib/web.d.ts

@@ -26,7 +26,8 @@
  *
  * Bounded: at most ROUNDS rounds of lookups the model asks for, CALLS lookups in
  * a round, and every lookup on its own clock. The request after the last round
- * offers no tools, so the turn ends in words.
+ * offers no tools, so the turn ends in words; a reply of no words is asked for
+ * once more.
  *
  * A page is read only when the conversation or one of this turn's searches
  * named it. Page text is written by strangers and can tell a model to fetch an

package/dist/lib/web.js

@@ -26,7 +26,8 @@
  *
  * Bounded: at most ROUNDS rounds of lookups the model asks for, CALLS lookups in
  * a round, and every lookup on its own clock. The request after the last round
- * offers no tools, so the turn ends in words.
+ * offers no tools, so the turn ends in words; a reply of no words is asked for
+ * once more.
  *
  * A page is read only when the conversation or one of this turn's searches
  * named it. Page text is written by strangers and can tell a model to fetch an
@@ -200,6 +201,8 @@ function rule(now) {
 }
 /** What the model is told when its rounds are spent. */
 const SPENT = 'You have used every web lookup this turn allows. Answer the person now, in words, from what you have found, citing each fact inline as a Markdown link [page title](url) to the page it came from.';
+/** What a model that answered with nothing is told, once. */
+const SILENT = 'Your last reply was empty. Answer the person now, in words, from what the lookups found, citing each fact inline as a Markdown link [page title](url).';
 /** A search that could not run, said so the model says it plainly. */
 const unavailable = (why) => `Live web search is unavailable right now (${why instanceof Error ? why.message : String(why)}). ` +
     'Tell the person in one plain sentence that you could not search the web just now, then answer from what you know and say it may be out of date.';
@@ -418,10 +421,22 @@ export function researched(base, clock = () => new Date()) {
             async start(out) {
                 try {
                     let res = first;
+                    let nudged = false;
                     for (let round = 0;; round++) {
                         const hop = await relay(res, out);
-                        if (!hop.calls.length)
-                            break;
+                        if (!hop.calls.length) {
+                            // AN ANSWER OF NO WORDS after a reasoning model has read a page of
+                            // results: asked once more, without tools, it answers.
+                            if (hop.content.trim() || nudged)
+                                break;
+                            nudged = true;
+                            res = await ask([...messages, { role: 'system', content: SILENT }], true);
+                            if (!streams(res)) {
+                                out.enqueue(event({ error: { message: await refusal(res) } }));
+                                break;
+                            }
+                            continue;
+                        }
                         const results = await Promise.all(hop.calls.map((tc, i) => i < CALLS ? run(call, tc, words, now, seen) : Promise.resolve(`skipped: at most ${CALLS} lookups run in one step.`)));
                         messages = [
                             ...messages,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/rooms",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "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,8 +56,8 @@
     "@hanzo/iam": ">=0.21.28",
     "@hanzo/logo": ">=1.0.26",
     "@hanzo/plans": ">=1.8.9",
-    "@hanzo/ui": ">=8.27.51",
-    "@hanzo/usage": ">=0.1.17",
+    "@hanzo/ui": ">=8.27.57",
+    "@hanzo/usage": ">=0.1.18",
     "@hanzo/voice": ">=0.1.12",
     "@hanzogui/shell": "^8.3.20",
     "lucide-react": ">=1.42.0",
@@ -75,8 +75,8 @@
     "@hanzo/iam": "0.21.28",
     "@hanzo/logo": "1.0.26",
     "@hanzo/plans": "1.8.9",
-    "@hanzo/ui": "8.27.51",
-    "@hanzo/usage": "0.1.17",
+    "@hanzo/ui": "8.27.57",
+    "@hanzo/usage": "0.1.18",
     "@hanzo/voice": "0.1.12",
     "@hanzogui/config": "8.3.5",
     "@hanzogui/core": "8.3.5",

package/dist/Usage.d.ts

@@ -1 +0,0 @@
-export declare function Usage(): import("react").JSX.Element;

package/dist/Usage.js

@@ -1,21 +0,0 @@
-'use client';
-import { jsxs as _jsxs } from "react/jsx-runtime";
-// Free's usage, said where it is spent. Free is limited, and what it spends
-// comes from one pool every free user shares, so the line says both, and what
-// is left of today's when billing states a day window for the plan (the tier's
-// `windows`, lib/hanzo/tier.ts). It renders nothing for any other plan, or
-// while the plan is unread.
-import { useIam } from '@hanzo/iam/react';
-import { Text } from '@hanzo/ui';
-import { org } from './lib/session.js';
-import { useTier } from './lib/tier.js';
-/** The free rung's name in the billing catalog. */
-const FREE = 'free';
-export function Usage() {
-    const { isAuthenticated } = useIam();
-    const { tier } = useTier(isAuthenticated, org());
-    if (tier?.tier?.name !== FREE)
-        return null;
-    const today = tier.windows?.find((w) => /day/i.test(w.span));
-    return (_jsxs(Text, { role: "status", fontSize: "$1", color: "$soft", text: "center", children: ["Free \u00B7 limited, shared pool", today ? ` · ${today.remaining} of ${today.limit} left today` : ''] }));
-}

package/dist/meters.d.ts

@@ -1,8 +0,0 @@
-import { type Limits } from './lib/limits.js';
-/** What a spent month says. */
-export declare const SPENT = "Monthly included usage is used; Enso and Zen keep answering.";
-/** The plan holder's windows, or nothing where the limits name none. */
-export declare function Meters({ limits, large }: {
-    limits: Limits;
-    large?: boolean;
-}): import("react").JSX.Element;

package/dist/meters.js

@@ -1,31 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// A plan's windows as bars of what is LEFT: the five-hour session, the day and
-// the billing month, each with when it starts over. Shares only — a plan is a
-// subscription with limits, never a balance, so no count and no amount is
-// drawn. The month spent refuses nothing (Enso and Zen keep answering), which
-// is why it is a quiet line under the bars rather than a warning.
-//
-// One component for the composer's foot and for the usage page: `large` is the
-// page's size. Each bar is drawn above its words so the three bars stay on one
-// line however the words under them wrap on a phone.
-import { Progress, Text, XStack, YStack } from '@hanzo/ui';
-import { clock, day, left } from './lib/limits.js';
-/** What a spent month says. */
-export const SPENT = 'Monthly included usage is used; Enso and Zen keep answering.';
-const WINDOWS = [
-    ['session', 'Session', (s) => (s.resets_at ? `resets ${clock(s.resets_at)}` : '')],
-    ['day', 'Today', (s) => (s.resets_at ? `resets ${clock(s.resets_at)}` : '')],
-    ['month', 'This month', (s) => (s.resets_at ? `renews ${day(s.resets_at)}` : '')],
-];
-/** The plan holder's windows, or nothing where the limits name none. */
-export function Meters({ limits, large = false }) {
-    const shown = WINDOWS.flatMap(([key, name, when]) => {
-        const span = limits[key];
-        return span ? [{ name, span, when: when(span) }] : [];
-    });
-    if (!shown.length)
-        return null;
-    const size = large ? '$3' : '$1';
-    return (_jsxs(YStack, { gap: large ? '$4' : '$1.5', width: "100%", minW: 0, children: [_jsx(XStack, { gap: large ? '$6' : '$3', rowGap: "$4", width: "100%", flexWrap: large ? 'wrap' : 'nowrap', children: shown.map(({ name, span, when }) => (_jsxs(YStack, { flex: 1, minW: large ? 200 : 0, gap: large ? '$2' : '$1', children: [_jsx(Progress, { value: left(span), height: large ? 8 : 4, minW: 0, "aria-label": name }), _jsxs(XStack, { flexWrap: "wrap", columnGap: "$1.5", items: "baseline", minW: 0, children: [_jsx(Text, { fontSize: size, color: large ? '$ink' : '$soft', numberOfLines: 1, children: name }), _jsxs(XStack, { children: [_jsxs(Text, { fontSize: size, color: "$ink", fontWeight: "500", fontVariant: ['tabular-nums'], children: [left(span), "%"] }), _jsx(Text, { fontSize: size, color: "$ink", display: large ? 'flex' : 'none', $sm: { display: 'flex' }, children: "\u00A0left" })] }), when ? (_jsx(Text, { fontSize: large ? '$2' : '$1', color: "$soft", numberOfLines: 1, children: when })) : null] })] }, name))) }), limits.month && limits.month.percent >= 100 ? (_jsx(Text, { fontSize: large ? '$2' : '$1', color: "$soft", children: SPENT })) : null] }));
-}