@hanzo/rooms 0.1.67 → 0.1.68

package/dist/Account.js

@@ -3,28 +3,28 @@ 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.
  *
- * The plan leads it — @hanzo/build's `Meter`, the block every account menu opens
- * with: the plan by its family and its windows as shares, the free allowance on
- * Free, the balance only with no plan. Then profile, appearance, usage, billing,
+ * The plan leads it — @hanzo/build's `Meter` (Standing.tsx, loaded with the
+ * menu), the block every account menu opens with: the plan by its family and its
+ * windows as shares, the free allowance on Free, the balance only with no plan. Then profile, appearance, usage, billing,
  * API keys, 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: a plan never sits beside a
  * balance here.
  */
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { lazy, Suspense, useEffect, useRef, useState } from 'react';
 import { Activity, ChevronsUpDown, CreditCard, KeyRound, LogOut, PanelLeftClose, Palette, Shield, UserRound } from 'lucide-react';
-import { Meter, useStanding } from '@hanzo/build';
 import { XStack, YStack, Text, Box } from '@hanzo/ui';
 import { sheet } from '@hanzo/ui/glass';
 import { useIam } from '@hanzo/iam/react';
 import { useSignOut } from './lib/signout.js';
 import { useAccount } from './lib/account.js';
 import { Face } from './cast.js';
-import { api, iam } from './lib/api.js';
-import { bearer, org } from './lib/session.js';
+import { iam } from './lib/api.js';
 import { link } from './lib/tags.js';
 import { showSettings } from './open.js';
 import { site } from './where.js';
+/** The plan at the menu's head, loaded with the menu. */
+const Standing = lazy(() => import('./Standing.js').then((m) => ({ default: m.Standing })));
 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 })] }) }));
 }
@@ -35,9 +35,6 @@ export function Account({ onToggleCollapse, onProfile, onAppearance, onUsage, on
     const { user: account } = useAccount();
     const [open, setOpen] = useState(false);
     const holder = useRef(null);
-    const scoped = org();
-    const target = useMemo(() => ({ api: api(), token: bearer, org: scoped }), [scoped]);
-    const plan = useStanding(target, open);
     useEffect(() => {
         if (!open)
             return;
@@ -64,5 +61,5 @@ export function Account({ onToggleCollapse, onProfile, onAppearance, onUsage, on
     // @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(Meter, { read: plan, onPlans: act(() => window.location.assign(site('/pricing'))), onBilling: act(() => showSettings('billing')) }), _jsx(Box, { height: 1, bg: "$borderColor", my: "$1" }), _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(CreditCard, { size: 15, "aria-hidden": true }), onPress: act(() => showSettings('billing')), children: "Billing" }), onKeys ? (_jsx(Row, { icon: _jsx(KeyRound, { size: 15, "aria-hidden": true }), onPress: act(onKeys), children: "API keys" })) : 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(Suspense, { fallback: null, children: _jsx(Standing, { onPlans: act(() => window.location.assign(site('/pricing'))), onBilling: act(() => showSettings('billing')) }) }), _jsx(Box, { height: 1, bg: "$borderColor", my: "$1" }), _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(CreditCard, { size: 15, "aria-hidden": true }), onPress: act(() => showSettings('billing')), children: "Billing" }), onKeys ? (_jsx(Row, { icon: _jsx(KeyRound, { size: 15, "aria-hidden": true }), onPress: act(onKeys), children: "API keys" })) : 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/Settings.d.ts

@@ -12,6 +12,8 @@ export type Row = {
     /** One sentence, for a pane we have not built a screen for yet. */
     note?: string;
 };
+/** Every row, flat — what the pane looks a chosen id up in. */
+export declare const ROWS: Row[];
 /** The row Settings opens on when nothing has asked for another. */
 export declare const FIRST: string;
 /**
@@ -34,13 +36,3 @@ export declare function SettingsList({ active, filter, onPick, onBack, }: {
     /** Back to the rooms. */
     onBack: () => void;
 }): import("react").JSX.Element;
-/**
- * The room, while a settings row is open.
- *
- * It scrolls itself, the way the column beside a room does: `main` gives its
- * child a floor and no overflow, so a pane that did not would push the whole
- * shell down the page.
- */
-export declare function SettingsPane({ id }: {
-    id: string;
-}): import("react").JSX.Element;

package/dist/Settings.js

@@ -3,8 +3,10 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // Settings: the sidebar's second level, and the pane it opens in the room.
 //
 // TWO PARTS, ONE TAXONOMY. `SettingsList` is the rail's list — the shell swaps
-// its own rows for these and back. `SettingsPane` is what fills the room while
-// a row is chosen. Both read `GROUPS`, so the list can only offer a row the
+// its own rows for these and back. `SettingsPane` (SettingsPane.tsx) is what
+// fills the room while a row is chosen, loaded only then: it carries the plan,
+// the usage panel, the model picker and the catalog, none of which a room's
+// first screen draws. Both read `GROUPS`, so the list can only offer a row the
 // pane can draw.
 //
 // Which row is open is the shell's `showSettings` value and nothing here: a
@@ -22,31 +24,10 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // The panes that are not yet built say so in one sentence rather than pretending
 // to a screen. An honest empty pane is a smaller lie than an invented one.
 import { app, dev } from './lib/host.js';
-import { useMemo, useState } from 'react';
-import { ArrowLeft, ArrowUpRight, ExternalLink } from 'lucide-react';
-import { Box, Button, Separator, Text, XStack, YStack, } from '@hanzo/ui';
+import { ArrowLeft, ArrowUpRight } from 'lucide-react';
+import { Text } from '@hanzo/ui';
 import { SidebarItem, SidebarSection } from '@hanzo/ui/chat';
-import { tap } from './lib/tap.js';
-import { useIam, useIamIdentity, useOrganizations } from '@hanzo/iam/react';
-import { useSignOut } from './lib/signout.js';
-import { useModels } from '@hanzo/ai/react';
-import { ModelPicker } from '@hanzo/ui/models';
-import { parseModels } from '@hanzo/ui/models/catalog';
-import { UsagePanel } from '@hanzo/usage/panel';
-import { administers, Credits, label, Plan, Title, useChoice } from '@hanzo/build';
-import { Catalog } from './Directory.js';
-import { payPage } from './lib/pay.js';
-import { api } from './lib/api.js';
-import { renewal, useSubscription, useTier } from './lib/tier.js';
-import { spendShown, useLimits } from './lib/limits.js';
-import { showSettings } from './open.js';
-import { Look } from './look.js';
-import { ProviderMark } from './ProviderMark.js';
-import { bearer, org, pick } from './lib/session.js';
 import { site } from './where.js';
-/** A choice among a few: a hairline edge and a corner. The fill and the edge's
- *  ink are the call site's, because they say which one is chosen. */
-const CHOICE = { rounded: 8, borderWidth: 1, borderStyle: 'solid', cursor: 'pointer' };
 const GROUPS = [
     {
         label: 'Settings',
@@ -109,7 +90,7 @@ const GROUPS = [
     },
 ];
 /** Every row, flat — what the pane looks a chosen id up in. */
-const ROWS = GROUPS.flatMap((g) => g.rows);
+export const ROWS = GROUPS.flatMap((g) => g.rows);
 /** The row Settings opens on when nothing has asked for another. */
 export const FIRST = ROWS[0].id;
 /**
@@ -133,196 +114,3 @@ export function SettingsList({ active, filter, onPick, onBack, }) {
                     // pressed.
                     icon: r.href ? _jsx(ArrowUpRight, { size: 13, "aria-hidden": true }) : undefined, active: r.id === active, "aria-current": r.id === active ? 'true' : undefined, onPress: () => onPick(r), children: r.label }, r.id))) }, g.label)))] }));
 }
-/**
- * The room, while a settings row is open.
- *
- * It scrolls itself, the way the column beside a room does: `main` gives its
- * child a floor and no overflow, so a pane that did not would push the whole
- * shell down the page.
- */
-export function SettingsPane({ id }) {
-    const row = ROWS.find((r) => r.id === id);
-    return (_jsx(YStack, { flex: 1, minH: 0, overflowY: "auto", overflowX: "hidden", children: _jsxs(YStack, { p: "$5", gap: "$4", maxW: 860, children: [_jsx(Text, { fontSize: "$6", fontWeight: "600", color: "$ink", children: row?.label ?? 'Settings' }), _jsx(Pane, { id: id, note: row?.note })] }) }));
-}
-/** One pane. */
-function Pane({ id, note }) {
-    if (id === 'apps' || id === 'channels')
-        return _jsx(Catalog, { tab: id });
-    if (id === 'general')
-        return _jsx(Look, {});
-    if (id === 'account')
-        return _jsx(Account, {});
-    if (id === 'billing')
-        return _jsx(Billing, {});
-    if (id === 'usage')
-        return _jsx(Usage, {});
-    if (id === 'model')
-        return _jsx(Model, {});
-    if (id === 'models')
-        return _jsx(Served, {});
-    if (id === 'agent')
-        return _jsx(AgentSettings, {});
-    if (id === 'capabilities')
-        return _jsx(Capabilities, {});
-    if (id === 'memory')
-        return _jsx(MemorySettings, {});
-    return (_jsx(Text, { fontSize: "$3", color: "$soft", children: note ?? 'Nothing to configure here yet.' }));
-}
-/**
- * One default in one place; agents may still bring their own model. A premium
- * model is never a default: it is picked per conversation, in the composer, so
- * this picker offers the rest of the catalog.
- */
-function Model() {
-    const { models: served } = useModels();
-    const models = useMemo(() => parseModels(served).filter((m) => m.class !== 'premium'), [served]);
-    // The one choice Chat and Dev share (@hanzo/build): changed here, changed in both composers.
-    const [choice, choose] = useChoice();
-    return (_jsxs(YStack, { gap: "$3", maxW: 420, children: [_jsx(Text, { fontSize: "$3", color: "$soft", children: "Used for new chats and new runs. An agent with its own model keeps that choice. Premium models are picked per conversation in the composer." }), _jsx(XStack, { self: "flex-start", children: _jsx(ModelPicker, { models: models, scope: "chat", value: choice.model, onChange: (id) => choose({ model: id }), size: "sm" }) })] }));
-}
-/**
- * WHAT THE GATEWAY SERVES, read from the same `/v1/models` the rooms read.
- *
- * Counted, never typed: the catalog moves without this file, so a number written
- * here is wrong by the next deploy. An empty answer says the account reaches
- * nothing rather than drawing a zero, and the mark comes from the model's own
- * id so a family wears the logo of the lab that makes it.
- */
-function Served() {
-    const { models, loading, error } = useModels();
-    if (loading) {
-        return _jsx(Text, { fontSize: "$3", color: "$soft", children: "Reading the catalog." });
-    }
-    if (error) {
-        return _jsxs(Text, { fontSize: "$3", color: "$soft", children: ["The catalog did not answer: ", error.message] });
-    }
-    if (models.length === 0) {
-        return (_jsx(Text, { fontSize: "$3", color: "$soft", children: "No model answers on this account. Sign in to reach the ones your org opens." }));
-    }
-    return (_jsxs(YStack, { gap: "$3", children: [_jsxs(Text, { fontSize: "$3", color: "$soft", children: [models.length, " models answer at /v1/models on this account."] }), _jsx(YStack, { children: models.map((m) => (_jsxs(XStack, { items: "center", gap: "$2.5", py: "$2", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsx(ProviderMark, { model: m.id, org: m.owned_by, size: 16, ink: true }), _jsx(Text, { fontSize: "$2", color: "$ink", flex: 1, children: m.id }), m.owned_by ? _jsx(Text, { fontSize: "$1", color: "$soft", children: m.owned_by }) : null] }, m.id))) }), _jsx(XStack, { children: _jsx(Box, { render: _jsx("a", { href: site('/models') }), ...tap, children: _jsxs(XStack, { items: "center", gap: "$2", py: "$2", children: [_jsx(Text, { fontSize: "$3", color: "$ink", children: "Browse the model catalog" }), _jsx(ArrowUpRight, { size: 13, "aria-hidden": true })] }) }) })] }));
-}
-/** Who is signed in, and where they can act. */
-function Account() {
-    const identity = useIamIdentity();
-    const { isAuthenticated } = useIam();
-    const logout = useSignOut();
-    const { organizations, currentOrgId, currentRole, switchOrg } = useOrganizations();
-    if (!isAuthenticated || !identity) {
-        return _jsx(Text, { fontSize: "$3", color: "$soft", children: "Sign in to see your account." });
-    }
-    return (_jsxs(YStack, { gap: "$4", children: [_jsxs(XStack, { items: "center", gap: "$3", children: [_jsx(YStack, { width: 44, height: 44, rounded: 22, bg: "$borderColor", items: "center", justify: "center", children: _jsx(Text, { fontSize: "$3", color: "$ink", children: identity.initials }) }), _jsxs(YStack, { gap: "$1", flex: 1, minW: 0, children: [_jsx(Text, { fontSize: "$4", color: "$ink", children: identity.name }), identity.email ? _jsx(Text, { fontSize: "$2", color: "$soft", children: identity.email }) : null] })] }), _jsx(Separator, {}), _jsxs(YStack, { gap: "$2", children: [_jsx(Text, { fontSize: "$2", color: "$soft", children: "Organizations" }), organizations.length === 0 ? (_jsx(Text, { fontSize: "$3", color: "$soft", children: "You are not a member of an organization." })) : (organizations.map((o) => {
-                        const here = o.name === currentOrgId;
-                        return (_jsx(Box, { render: _jsx("button", { type: "button" }), onClick: () => { pick(o.name); switchOrg(o.name); }, ...tap, children: _jsxs(XStack, { items: "center", justify: "space-between", py: "$2", width: "100%", gap: "$2", children: [_jsx(Text, { fontSize: "$3", color: here ? '$ink' : '$soft', children: o.displayName || o.name }), here && currentRole ? _jsx(Text, { fontSize: "$2", color: "$soft", children: currentRole }) : null] }) }, o.name));
-                    }))] }), _jsx(Separator, {}), _jsx(XStack, { children: _jsx(Button, { size: "sm", onClick: () => logout(), children: "Sign out" }) })] }));
-}
-/** Where the plan's and billing's reads go: this browser's bearer, in its organization. */
-function useTarget() {
-    const scoped = org();
-    return useMemo(() => ({ api: api(), token: bearer, org: scoped }), [scoped]);
-}
-/**
- * The plan and its term, then the credits — @hanzo/build's `Credits`, the one
- * view every Billing page draws: the balance, grants, auto-reload, this month's
- * spend and its limit, said to be separate from the plan's usage. Money moves on
- * the payment host, so adding funds and a card both open it.
- */
-function Billing() {
-    const { isAuthenticated } = useIam();
-    const t = useTarget();
-    const { tier } = useTier(isAuthenticated, org());
-    const sub = useSubscription(isAuthenticated, org());
-    if (!isAuthenticated)
-        return _jsx(Text, { fontSize: "$3", color: "$soft", children: "Sign in to see billing." });
-    // WHAT THE CUSTOMER BOUGHT, by its family: `Max` with `20x` beside it.
-    const plan = tier ? label(tier.plan, tier.tier.name) ?? { name: 'Free', tag: '' } : null;
-    return (_jsxs(YStack, { gap: "$5", children: [plan ? (_jsxs(YStack, { gap: "$1", "data-slot": "billing-plan", children: [_jsx(Title, { label: plan, size: "$5" }), _jsx(Text, { fontSize: "$2", color: "$soft", children: sub ? renewal(sub) : tier?.plan ? 'Your plan.' : 'No paid plan. Usage is paid from credits.' })] })) : (_jsx(Text, { fontSize: "$3", color: "$soft", children: "Reading your plan\u2026" })), _jsx(Credits, { target: t, admin: administers(bearer(), org()), add: payPage() }), _jsx(Separator, {}), _jsxs(YStack, { gap: "$2", children: [_jsx(Text, { fontSize: "$2", color: "$soft", children: "Payment" }), _jsx(Text, { fontSize: "$3", color: "$soft", children: "A card is entered on the payment host and nowhere else, so this is the one control here that opens another surface." }), _jsx(XStack, { children: _jsx(Box, { render: _jsx("a", { href: payPage(), target: "_blank", rel: "noreferrer" }), ...tap, children: _jsxs(XStack, { items: "center", gap: "$2", py: "$2", children: [_jsx(Text, { fontSize: "$3", color: "$ink", children: "Manage plan, payment method and invoices" }), _jsx(ExternalLink, { size: 13, "aria-hidden": true })] }) }) })] })] }));
-}
-/**
- * Usage: @hanzo/build's `Plan`, the one view every Usage page draws — the plan's
- * windows and each class of model's share, as shares; the free allowance on
- * Free; the balance with no plan — and the choice of paying from credits once
- * the allowance runs out. A reader with no paid plan also sees what was spent,
- * over time (@hanzo/usage), because money is their meter.
- */
-function Usage() {
-    const { accessToken, isAuthenticated } = useIam();
-    const t = useTarget();
-    const read = useLimits(isAuthenticated, org());
-    if (!isAuthenticated || !accessToken) {
-        return _jsx(Text, { fontSize: "$3", color: "$soft", children: "Sign in to see your usage." });
-    }
-    const plan = _jsx(Plan, { target: t, onPlans: () => window.location.assign(site('/pricing')), onBilling: () => showSettings('billing') });
-    if (!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 (_jsxs(YStack, { gap: "$6", children: [plan, _jsx(UsagePanel, { baseUrl: api(), token: accessToken, upgrade: payPage(), title: "Spend" })] }));
-}
-const HISTORICAL_PERSONAS = [
-    { id: 'architect', name: 'Software Architect', role: 'Full-stack & systems design' },
-    { id: 'satoshi', name: 'Satoshi Nakamoto', role: 'Distributed cryptography & consensus' },
-    { id: 'turing', name: 'Alan Turing', role: 'Algorithmic logic & formal verification' },
-    { id: 'ada', name: 'Ada Lovelace', role: 'Computational precision & analysis' },
-    { id: 'davinci', name: 'Leonardo da Vinci', role: 'Polymathic engineering & design' },
-];
-function AgentSettings() {
-    const [instructions, setInstructions] = useState(() => {
-        if (typeof window === 'undefined')
-            return '';
-        return localStorage.getItem('hanzo.agent.instructions') || 'You are an autonomous AI software engineer at Hanzo. Think step-by-step and write robust code.';
-    });
-    const [persona, setPersona] = useState(() => {
-        if (typeof window === 'undefined')
-            return 'architect';
-        return localStorage.getItem('hanzo.agent.persona') || 'architect';
-    });
-    const [autonomy, setAutonomy] = useState(() => {
-        if (typeof window === 'undefined')
-            return 'autonomous';
-        return localStorage.getItem('hanzo.agent.autonomy') || 'autonomous';
-    });
-    const [saved, setSaved] = useState(false);
-    const save = () => {
-        localStorage.setItem('hanzo.agent.instructions', instructions);
-        localStorage.setItem('hanzo.agent.persona', persona);
-        localStorage.setItem('hanzo.agent.autonomy', autonomy);
-        setSaved(true);
-        setTimeout(() => setSaved(false), 2000);
-    };
-    return (_jsxs(YStack, { gap: "$4", maxW: 480, children: [_jsx(Text, { fontSize: "$3", color: "$soft", children: "Nothing is bound to this surface yet \u2014 when you bind a personal agent, its persona, tools and memory live here rather than in a shared team." }), _jsxs(YStack, { gap: "$1.5", children: [_jsx(Text, { fontSize: "$3", fontWeight: "600", color: "$ink", children: "Persona & Historical Character" }), _jsx(Text, { fontSize: "$2", color: "$soft", children: "Pick an intellectual archetype for agent reasoning and tone." }), _jsx(XStack, { flexWrap: "wrap", gap: "$2", pt: "$1", children: HISTORICAL_PERSONAS.map((p) => {
-                            const active = persona === p.id;
-                            return (_jsx(Box, { render: _jsx("button", { type: "button" }), ...tap, onClick: () => setPersona(p.id), ...CHOICE, bg: active ? 'var(--edge, var(--white-14))' : 'transparent', borderColor: active ? 'var(--borderColor, var(--white-22))' : 'var(--white-08)', py: 6, px: 12, children: _jsx(Text, { fontSize: "$2", fontWeight: active ? '600' : '400', color: active ? '$ink' : '$soft', children: p.name }) }, p.id));
-                        }) })] }), _jsx(Separator, {}), _jsxs(YStack, { gap: "$1.5", children: [_jsx(Text, { fontSize: "$3", fontWeight: "600", color: "$ink", children: "System Prompt Instructions" }), _jsx(Text, { fontSize: "$2", color: "$soft", children: "Custom system directions prepended to all coding and research runs." }), _jsx(Text, { render: _jsx("textarea", { value: instructions, onChange: (e) => setInstructions(e.target.value), rows: 4 }), width: "100%", bg: "var(--panel, color-mix(in srgb, var(--pure-black) 30%, transparent))", color: "inherit", borderWidth: 1, borderColor: "var(--borderColor, var(--white-15))", rounded: 8, p: 10, fontSize: "$2", fontFamily: "$mono" })] }), _jsx(Separator, {}), _jsxs(YStack, { gap: "$1.5", children: [_jsx(Text, { fontSize: "$3", fontWeight: "600", color: "$ink", children: "Autonomy & Permissions" }), _jsxs(XStack, { gap: "$2", children: [_jsxs(Box, { render: _jsx("button", { type: "button" }), ...tap, onClick: () => setAutonomy('autonomous'), ...CHOICE, flex: 1, p: 10, bg: autonomy === 'autonomous' ? 'var(--edge, var(--white-14))' : 'transparent', borderColor: autonomy === 'autonomous' ? 'var(--borderColor, var(--white-22))' : 'var(--white-08)', children: [_jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$ink", children: "Autonomous" }), _jsx(Text, { fontSize: "$1", color: "$soft", children: "Executes tools & writes code without interrupting." })] }), _jsxs(Box, { render: _jsx("button", { type: "button" }), ...tap, onClick: () => setAutonomy('supervised'), ...CHOICE, flex: 1, p: 10, bg: autonomy === 'supervised' ? 'var(--edge, var(--white-14))' : 'transparent', borderColor: autonomy === 'supervised' ? 'var(--borderColor, var(--white-22))' : 'var(--white-08)', children: [_jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$ink", children: "Supervised" }), _jsx(Text, { fontSize: "$1", color: "$soft", children: "Requests confirmation before file writes and commands." })] })] })] }), _jsx(XStack, { self: "flex-start", pt: "$2", children: _jsx(Button, { size: "sm", onClick: save, children: saved ? 'Saved' : 'Save agent preferences' }) })] }));
-}
-/**
- * WHAT A RUN MAY REACH FOR — the four capabilities, described and not measured.
- *
- * Each row used to carry a badge reading "Enabled", and the MCP row read
- * "Active (:8080/mcp)". Nothing asked. No call stands behind any of the four,
- * so the badges said "on" for a reader whose run had none of it, and the port
- * was one developer's machine printed on everybody's settings pane. A green
- * light nobody wired is worse than no light: it is read as a check that passed.
- *
- * These are facts about the PRODUCT — what a run is allowed to do — which is
- * what this pane is for. Whether a given run got them is a fact about that run,
- * and the run is where it belongs.
- */
-function Capabilities() {
-    return (_jsxs(YStack, { gap: "$3", maxW: 480, children: [_jsx(Text, { fontSize: "$3", color: "$soft", children: "What models and agent swarms are granted access to during tasks." }), _jsx(YStack, { gap: "$2", pt: "$1", children: [
-                    { title: 'Filesystem (Read / Write)', desc: 'Create, modify, and delete workspace files in the target repository.' },
-                    { title: 'Shell & Terminal Exec', desc: 'Execute build, test, and shell commands in isolated sandbox VMs.' },
-                    { title: 'Live Web & Search', desc: 'Query internet search APIs and fetch web documentation.' },
-                    { title: 'MCP Protocol Server', desc: 'Expose local and remote tools via Model Context Protocol at /mcp.' },
-                ].map((cap) => (_jsxs(YStack, { gap: "$0.5", p: "$2.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(Text, { fontSize: "$3", fontWeight: "600", color: "$ink", children: cap.title }), _jsx(Text, { fontSize: "$2", color: "$soft", children: cap.desc })] }, cap.title))) })] }));
-}
-function MemorySettings() {
-    const [cleared, setCleared] = useState(false);
-    const clearMemory = () => {
-        localStorage.removeItem('hanzo.chat.history');
-        setCleared(true);
-        setTimeout(() => setCleared(false), 2000);
-    };
-    return (_jsxs(YStack, { gap: "$3", maxW: 480, children: [_jsx(Text, { fontSize: "$3", color: "$soft", children: "Semantic memory and conversation recall across sessions." }), _jsxs(YStack, { gap: "$0.5", p: "$2.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(Text, { fontSize: "$3", fontWeight: "600", color: "$ink", children: "Semantic Vector Index" }), _jsx(Text, { fontSize: "$2", color: "$soft", children: "Automatically indexes past workspace sessions into vector memory." })] }), _jsx(XStack, { self: "flex-start", pt: "$2", children: _jsx(Button, { size: "sm", variant: "outline", onClick: clearMemory, children: cleared ? 'Memory cleared' : 'Clear local memory cache' }) })] }));
-}

package/dist/SettingsPane.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The room, while a settings row is open.
+ *
+ * It scrolls itself, the way the column beside a room does: `main` gives its
+ * child a floor and no overflow, so a pane that did not would push the whole
+ * shell down the page.
+ */
+export declare function SettingsPane({ id }: {
+    id: string;
+}): import("react").JSX.Element;

package/dist/SettingsPane.js

@@ -0,0 +1,222 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The room while a settings row is open: every section's screen (Settings.tsx
+// holds the rows). Loaded when a row is chosen, never with the room.
+import { useMemo, useState } from 'react';
+import { ArrowUpRight, ExternalLink } from 'lucide-react';
+import { Box, Button, Separator, Text, XStack, YStack, } from '@hanzo/ui';
+import { tap } from './lib/tap.js';
+import { useIam, useIamIdentity, useOrganizations } from '@hanzo/iam/react';
+import { useSignOut } from './lib/signout.js';
+import { useModels } from '@hanzo/ai/react';
+import { ModelPicker } from '@hanzo/ui/models';
+import { parseModels } from '@hanzo/ui/models/catalog';
+import { UsagePanel } from '@hanzo/usage/panel';
+import { administers, Credits, label, Plan, Title, useChoice } from '@hanzo/build';
+import { Catalog } from './Directory.js';
+import { payPage } from './lib/pay.js';
+import { api } from './lib/api.js';
+import { renewal, useSubscription, useTier } from './lib/tier.js';
+import { spendShown, useLimits } from './lib/limits.js';
+import { showSettings } from './open.js';
+import { Look } from './look.js';
+import { ProviderMark } from './ProviderMark.js';
+import { bearer, org, pick } from './lib/session.js';
+import { site } from './where.js';
+import { ROWS } from './Settings.js';
+/** A choice among a few: a hairline edge and a corner. The fill and the edge's
+ *  ink are the call site's, because they say which one is chosen. */
+const CHOICE = { rounded: 8, borderWidth: 1, borderStyle: 'solid', cursor: 'pointer' };
+/**
+ * The room, while a settings row is open.
+ *
+ * It scrolls itself, the way the column beside a room does: `main` gives its
+ * child a floor and no overflow, so a pane that did not would push the whole
+ * shell down the page.
+ */
+export function SettingsPane({ id }) {
+    const row = ROWS.find((r) => r.id === id);
+    return (_jsx(YStack, { flex: 1, minH: 0, overflowY: "auto", overflowX: "hidden", children: _jsxs(YStack, { p: "$5", gap: "$4", maxW: 860, children: [_jsx(Text, { fontSize: "$6", fontWeight: "600", color: "$ink", children: row?.label ?? 'Settings' }), _jsx(Pane, { id: id, note: row?.note })] }) }));
+}
+/** One pane. */
+function Pane({ id, note }) {
+    if (id === 'apps' || id === 'channels')
+        return _jsx(Catalog, { tab: id });
+    if (id === 'general')
+        return _jsx(Look, {});
+    if (id === 'account')
+        return _jsx(Account, {});
+    if (id === 'billing')
+        return _jsx(Billing, {});
+    if (id === 'usage')
+        return _jsx(Usage, {});
+    if (id === 'model')
+        return _jsx(Model, {});
+    if (id === 'models')
+        return _jsx(Served, {});
+    if (id === 'agent')
+        return _jsx(AgentSettings, {});
+    if (id === 'capabilities')
+        return _jsx(Capabilities, {});
+    if (id === 'memory')
+        return _jsx(MemorySettings, {});
+    return (_jsx(Text, { fontSize: "$3", color: "$soft", children: note ?? 'Nothing to configure here yet.' }));
+}
+/**
+ * One default in one place; agents may still bring their own model. A premium
+ * model is never a default: it is picked per conversation, in the composer, so
+ * this picker offers the rest of the catalog.
+ */
+function Model() {
+    const { models: served } = useModels();
+    const models = useMemo(() => parseModels(served).filter((m) => m.class !== 'premium'), [served]);
+    // The one choice Chat and Dev share (@hanzo/build): changed here, changed in both composers.
+    const [choice, choose] = useChoice();
+    return (_jsxs(YStack, { gap: "$3", maxW: 420, children: [_jsx(Text, { fontSize: "$3", color: "$soft", children: "Used for new chats and new runs. An agent with its own model keeps that choice. Premium models are picked per conversation in the composer." }), _jsx(XStack, { self: "flex-start", children: _jsx(ModelPicker, { models: models, scope: "chat", value: choice.model, onChange: (id) => choose({ model: id }), size: "sm" }) })] }));
+}
+/**
+ * WHAT THE GATEWAY SERVES, read from the same `/v1/models` the rooms read.
+ *
+ * Counted, never typed: the catalog moves without this file, so a number written
+ * here is wrong by the next deploy. An empty answer says the account reaches
+ * nothing rather than drawing a zero, and the mark comes from the model's own
+ * id so a family wears the logo of the lab that makes it.
+ */
+function Served() {
+    const { models, loading, error } = useModels();
+    if (loading) {
+        return _jsx(Text, { fontSize: "$3", color: "$soft", children: "Reading the catalog." });
+    }
+    if (error) {
+        return _jsxs(Text, { fontSize: "$3", color: "$soft", children: ["The catalog did not answer: ", error.message] });
+    }
+    if (models.length === 0) {
+        return (_jsx(Text, { fontSize: "$3", color: "$soft", children: "No model answers on this account. Sign in to reach the ones your org opens." }));
+    }
+    return (_jsxs(YStack, { gap: "$3", children: [_jsxs(Text, { fontSize: "$3", color: "$soft", children: [models.length, " models answer at /v1/models on this account."] }), _jsx(YStack, { children: models.map((m) => (_jsxs(XStack, { items: "center", gap: "$2.5", py: "$2", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsx(ProviderMark, { model: m.id, org: m.owned_by, size: 16, ink: true }), _jsx(Text, { fontSize: "$2", color: "$ink", flex: 1, children: m.id }), m.owned_by ? _jsx(Text, { fontSize: "$1", color: "$soft", children: m.owned_by }) : null] }, m.id))) }), _jsx(XStack, { children: _jsx(Box, { render: _jsx("a", { href: site('/models') }), ...tap, children: _jsxs(XStack, { items: "center", gap: "$2", py: "$2", children: [_jsx(Text, { fontSize: "$3", color: "$ink", children: "Browse the model catalog" }), _jsx(ArrowUpRight, { size: 13, "aria-hidden": true })] }) }) })] }));
+}
+/** Who is signed in, and where they can act. */
+function Account() {
+    const identity = useIamIdentity();
+    const { isAuthenticated } = useIam();
+    const logout = useSignOut();
+    const { organizations, currentOrgId, currentRole, switchOrg } = useOrganizations();
+    if (!isAuthenticated || !identity) {
+        return _jsx(Text, { fontSize: "$3", color: "$soft", children: "Sign in to see your account." });
+    }
+    return (_jsxs(YStack, { gap: "$4", children: [_jsxs(XStack, { items: "center", gap: "$3", children: [_jsx(YStack, { width: 44, height: 44, rounded: 22, bg: "$borderColor", items: "center", justify: "center", children: _jsx(Text, { fontSize: "$3", color: "$ink", children: identity.initials }) }), _jsxs(YStack, { gap: "$1", flex: 1, minW: 0, children: [_jsx(Text, { fontSize: "$4", color: "$ink", children: identity.name }), identity.email ? _jsx(Text, { fontSize: "$2", color: "$soft", children: identity.email }) : null] })] }), _jsx(Separator, {}), _jsxs(YStack, { gap: "$2", children: [_jsx(Text, { fontSize: "$2", color: "$soft", children: "Organizations" }), organizations.length === 0 ? (_jsx(Text, { fontSize: "$3", color: "$soft", children: "You are not a member of an organization." })) : (organizations.map((o) => {
+                        const here = o.name === currentOrgId;
+                        return (_jsx(Box, { render: _jsx("button", { type: "button" }), onClick: () => { pick(o.name); switchOrg(o.name); }, ...tap, children: _jsxs(XStack, { items: "center", justify: "space-between", py: "$2", width: "100%", gap: "$2", children: [_jsx(Text, { fontSize: "$3", color: here ? '$ink' : '$soft', children: o.displayName || o.name }), here && currentRole ? _jsx(Text, { fontSize: "$2", color: "$soft", children: currentRole }) : null] }) }, o.name));
+                    }))] }), _jsx(Separator, {}), _jsx(XStack, { children: _jsx(Button, { size: "sm", onClick: () => logout(), children: "Sign out" }) })] }));
+}
+/** Where the plan's and billing's reads go: this browser's bearer, in its organization. */
+function useTarget() {
+    const scoped = org();
+    return useMemo(() => ({ api: api(), token: bearer, org: scoped }), [scoped]);
+}
+/**
+ * The plan and its term, then the credits — @hanzo/build's `Credits`, the one
+ * view every Billing page draws: the balance, grants, auto-reload, this month's
+ * spend and its limit, said to be separate from the plan's usage. Money moves on
+ * the payment host, so adding funds and a card both open it.
+ */
+function Billing() {
+    const { isAuthenticated } = useIam();
+    const t = useTarget();
+    const { tier } = useTier(isAuthenticated, org());
+    const sub = useSubscription(isAuthenticated, org());
+    if (!isAuthenticated)
+        return _jsx(Text, { fontSize: "$3", color: "$soft", children: "Sign in to see billing." });
+    // WHAT THE CUSTOMER BOUGHT, by its family: `Max` with `20x` beside it.
+    const plan = tier ? label(tier.plan, tier.tier.name) ?? { name: 'Free', tag: '' } : null;
+    return (_jsxs(YStack, { gap: "$5", children: [plan ? (_jsxs(YStack, { gap: "$1", "data-slot": "billing-plan", children: [_jsx(Title, { label: plan, size: "$5" }), _jsx(Text, { fontSize: "$2", color: "$soft", children: sub ? renewal(sub) : tier?.plan ? 'Your plan.' : 'No paid plan. Usage is paid from credits.' })] })) : (_jsx(Text, { fontSize: "$3", color: "$soft", children: "Reading your plan\u2026" })), _jsx(Credits, { target: t, admin: administers(bearer(), org()), add: payPage() }), _jsx(Separator, {}), _jsxs(YStack, { gap: "$2", children: [_jsx(Text, { fontSize: "$2", color: "$soft", children: "Payment" }), _jsx(Text, { fontSize: "$3", color: "$soft", children: "A card is entered on the payment host and nowhere else, so this is the one control here that opens another surface." }), _jsx(XStack, { children: _jsx(Box, { render: _jsx("a", { href: payPage(), target: "_blank", rel: "noreferrer" }), ...tap, children: _jsxs(XStack, { items: "center", gap: "$2", py: "$2", children: [_jsx(Text, { fontSize: "$3", color: "$ink", children: "Manage plan, payment method and invoices" }), _jsx(ExternalLink, { size: 13, "aria-hidden": true })] }) }) })] })] }));
+}
+/**
+ * Usage: @hanzo/build's `Plan`, the one view every Usage page draws — the plan's
+ * windows and each class of model's share, as shares; the free allowance on
+ * Free; the balance with no plan — and the choice of paying from credits once
+ * the allowance runs out. A reader with no paid plan also sees what was spent,
+ * over time (@hanzo/usage), because money is their meter.
+ */
+function Usage() {
+    const { accessToken, isAuthenticated } = useIam();
+    const t = useTarget();
+    const read = useLimits(isAuthenticated, org());
+    if (!isAuthenticated || !accessToken) {
+        return _jsx(Text, { fontSize: "$3", color: "$soft", children: "Sign in to see your usage." });
+    }
+    const plan = _jsx(Plan, { target: t, onPlans: () => window.location.assign(site('/pricing')), onBilling: () => showSettings('billing') });
+    if (!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 (_jsxs(YStack, { gap: "$6", children: [plan, _jsx(UsagePanel, { baseUrl: api(), token: accessToken, upgrade: payPage(), title: "Spend" })] }));
+}
+const HISTORICAL_PERSONAS = [
+    { id: 'architect', name: 'Software Architect', role: 'Full-stack & systems design' },
+    { id: 'satoshi', name: 'Satoshi Nakamoto', role: 'Distributed cryptography & consensus' },
+    { id: 'turing', name: 'Alan Turing', role: 'Algorithmic logic & formal verification' },
+    { id: 'ada', name: 'Ada Lovelace', role: 'Computational precision & analysis' },
+    { id: 'davinci', name: 'Leonardo da Vinci', role: 'Polymathic engineering & design' },
+];
+function AgentSettings() {
+    const [instructions, setInstructions] = useState(() => {
+        if (typeof window === 'undefined')
+            return '';
+        return localStorage.getItem('hanzo.agent.instructions') || 'You are an autonomous AI software engineer at Hanzo. Think step-by-step and write robust code.';
+    });
+    const [persona, setPersona] = useState(() => {
+        if (typeof window === 'undefined')
+            return 'architect';
+        return localStorage.getItem('hanzo.agent.persona') || 'architect';
+    });
+    const [autonomy, setAutonomy] = useState(() => {
+        if (typeof window === 'undefined')
+            return 'autonomous';
+        return localStorage.getItem('hanzo.agent.autonomy') || 'autonomous';
+    });
+    const [saved, setSaved] = useState(false);
+    const save = () => {
+        localStorage.setItem('hanzo.agent.instructions', instructions);
+        localStorage.setItem('hanzo.agent.persona', persona);
+        localStorage.setItem('hanzo.agent.autonomy', autonomy);
+        setSaved(true);
+        setTimeout(() => setSaved(false), 2000);
+    };
+    return (_jsxs(YStack, { gap: "$4", maxW: 480, children: [_jsx(Text, { fontSize: "$3", color: "$soft", children: "Nothing is bound to this surface yet \u2014 when you bind a personal agent, its persona, tools and memory live here rather than in a shared team." }), _jsxs(YStack, { gap: "$1.5", children: [_jsx(Text, { fontSize: "$3", fontWeight: "600", color: "$ink", children: "Persona & Historical Character" }), _jsx(Text, { fontSize: "$2", color: "$soft", children: "Pick an intellectual archetype for agent reasoning and tone." }), _jsx(XStack, { flexWrap: "wrap", gap: "$2", pt: "$1", children: HISTORICAL_PERSONAS.map((p) => {
+                            const active = persona === p.id;
+                            return (_jsx(Box, { render: _jsx("button", { type: "button" }), ...tap, onClick: () => setPersona(p.id), ...CHOICE, bg: active ? 'var(--edge, var(--white-14))' : 'transparent', borderColor: active ? 'var(--borderColor, var(--white-22))' : 'var(--white-08)', py: 6, px: 12, children: _jsx(Text, { fontSize: "$2", fontWeight: active ? '600' : '400', color: active ? '$ink' : '$soft', children: p.name }) }, p.id));
+                        }) })] }), _jsx(Separator, {}), _jsxs(YStack, { gap: "$1.5", children: [_jsx(Text, { fontSize: "$3", fontWeight: "600", color: "$ink", children: "System Prompt Instructions" }), _jsx(Text, { fontSize: "$2", color: "$soft", children: "Custom system directions prepended to all coding and research runs." }), _jsx(Text, { render: _jsx("textarea", { value: instructions, onChange: (e) => setInstructions(e.target.value), rows: 4 }), width: "100%", bg: "var(--panel, color-mix(in srgb, var(--pure-black) 30%, transparent))", color: "inherit", borderWidth: 1, borderColor: "var(--borderColor, var(--white-15))", rounded: 8, p: 10, fontSize: "$2", fontFamily: "$mono" })] }), _jsx(Separator, {}), _jsxs(YStack, { gap: "$1.5", children: [_jsx(Text, { fontSize: "$3", fontWeight: "600", color: "$ink", children: "Autonomy & Permissions" }), _jsxs(XStack, { gap: "$2", children: [_jsxs(Box, { render: _jsx("button", { type: "button" }), ...tap, onClick: () => setAutonomy('autonomous'), ...CHOICE, flex: 1, p: 10, bg: autonomy === 'autonomous' ? 'var(--edge, var(--white-14))' : 'transparent', borderColor: autonomy === 'autonomous' ? 'var(--borderColor, var(--white-22))' : 'var(--white-08)', children: [_jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$ink", children: "Autonomous" }), _jsx(Text, { fontSize: "$1", color: "$soft", children: "Executes tools & writes code without interrupting." })] }), _jsxs(Box, { render: _jsx("button", { type: "button" }), ...tap, onClick: () => setAutonomy('supervised'), ...CHOICE, flex: 1, p: 10, bg: autonomy === 'supervised' ? 'var(--edge, var(--white-14))' : 'transparent', borderColor: autonomy === 'supervised' ? 'var(--borderColor, var(--white-22))' : 'var(--white-08)', children: [_jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$ink", children: "Supervised" }), _jsx(Text, { fontSize: "$1", color: "$soft", children: "Requests confirmation before file writes and commands." })] })] })] }), _jsx(XStack, { self: "flex-start", pt: "$2", children: _jsx(Button, { size: "sm", onClick: save, children: saved ? 'Saved' : 'Save agent preferences' }) })] }));
+}
+/**
+ * WHAT A RUN MAY REACH FOR — the four capabilities, described and not measured.
+ *
+ * Each row used to carry a badge reading "Enabled", and the MCP row read
+ * "Active (:8080/mcp)". Nothing asked. No call stands behind any of the four,
+ * so the badges said "on" for a reader whose run had none of it, and the port
+ * was one developer's machine printed on everybody's settings pane. A green
+ * light nobody wired is worse than no light: it is read as a check that passed.
+ *
+ * These are facts about the PRODUCT — what a run is allowed to do — which is
+ * what this pane is for. Whether a given run got them is a fact about that run,
+ * and the run is where it belongs.
+ */
+function Capabilities() {
+    return (_jsxs(YStack, { gap: "$3", maxW: 480, children: [_jsx(Text, { fontSize: "$3", color: "$soft", children: "What models and agent swarms are granted access to during tasks." }), _jsx(YStack, { gap: "$2", pt: "$1", children: [
+                    { title: 'Filesystem (Read / Write)', desc: 'Create, modify, and delete workspace files in the target repository.' },
+                    { title: 'Shell & Terminal Exec', desc: 'Execute build, test, and shell commands in isolated sandbox VMs.' },
+                    { title: 'Live Web & Search', desc: 'Query internet search APIs and fetch web documentation.' },
+                    { title: 'MCP Protocol Server', desc: 'Expose local and remote tools via Model Context Protocol at /mcp.' },
+                ].map((cap) => (_jsxs(YStack, { gap: "$0.5", p: "$2.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(Text, { fontSize: "$3", fontWeight: "600", color: "$ink", children: cap.title }), _jsx(Text, { fontSize: "$2", color: "$soft", children: cap.desc })] }, cap.title))) })] }));
+}
+function MemorySettings() {
+    const [cleared, setCleared] = useState(false);
+    const clearMemory = () => {
+        localStorage.removeItem('hanzo.chat.history');
+        setCleared(true);
+        setTimeout(() => setCleared(false), 2000);
+    };
+    return (_jsxs(YStack, { gap: "$3", maxW: 480, children: [_jsx(Text, { fontSize: "$3", color: "$soft", children: "Semantic memory and conversation recall across sessions." }), _jsxs(YStack, { gap: "$0.5", p: "$2.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(Text, { fontSize: "$3", fontWeight: "600", color: "$ink", children: "Semantic Vector Index" }), _jsx(Text, { fontSize: "$2", color: "$soft", children: "Automatically indexes past workspace sessions into vector memory." })] }), _jsx(XStack, { self: "flex-start", pt: "$2", children: _jsx(Button, { size: "sm", variant: "outline", onClick: clearMemory, children: cleared ? 'Memory cleared' : 'Clear local memory cache' }) })] }));
+}

package/dist/Shell.js

@@ -13,7 +13,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // holds arrangement and words and owns no pixels of its own. That is the whole
 // architecture: a stranger with `@hanzo/ui`, `@hanzo/ai` and `@hanzo/iam` can
 // assemble this room, because nothing in it is private to hanzo.ai.
-import { createContext, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { createContext, lazy, Suspense, useContext, useEffect, useMemo, useRef, useState, } from "react";
 import { createPortal } from "react-dom";
 import { MessageSquare, Code2, Inbox, Bot, ListChecks, HardDrive, Settings2, UserPlus, Building2, Search, Hash, AtSign, Lock, Workflow, Plus, ArrowLeft, ArrowRight, Send, Minus, Blocks, Star, FolderOpen, Activity, BookOpen, SquareTerminal, Share2, Sparkles, PanelLeft, PanelRight, Users, Globe, Cpu, Boxes, Wallet, Video, Calendar, LayoutGrid, ArrowUpLeft, } from "lucide-react";
 import { AiProvider, useAgents, useInbox, useModels, usePeople, } from "@hanzo/ai/react";
@@ -70,7 +70,7 @@ import { roomName } from "./network.js";
 import { useTeamRooms, teamKey, roomHref } from "./rooms.js";
 import { apex, app, dev, ENTRY, room as moves, WORKSPACE } from "./lib/host.js";
 import { netKey } from "./conversations.js";
-import { FIRST, SettingsList, SettingsPane, } from "./Settings.js";
+import { FIRST, SettingsList, } from "./Settings.js";
 import { Profile } from "./Profile.js";
 import { SupportPicker } from "./Support.js";
 import { Find } from "./Find.js";
@@ -116,6 +116,8 @@ import { getStoredPeople, getStoredAgents, getCustomThreads, createDirectChat, }
 import { bare } from './lib/bare.js';
 import { BAD } from './lib/mix.js';
 import { brand, site, where, wordmark } from './where.js';
+/** The room while a settings row is open, loaded when one is: none of it is a room's first screen. */
+const SettingsPane = lazy(() => import('./SettingsPane.js').then((m) => ({ default: m.SettingsPane })));
 /**
  * The destinations, in rail order.
  *
@@ -1235,5 +1237,5 @@ function Frame({ mode, children, navigate, back, forward, }) {
         }, position: "relative", width: "100%", height: "100dvh", overflow: "hidden", bg: "$background", backgroundImage: "var(--pane-ground)", children: [_jsx(Rail, { mode: mode, places: places, open: asked, team: onApex ? (signedIn ? ENTRY : WORKSPACE) : undefined, navigate: navigate, onSettings: () => showSettings(FIRST), onMore: () => setFinding(true) }), _jsxs(XStack, { render: "header", "data-slot": "bar", gridArea: "bar", ...sheet(0), height: 44, shrink: 0, items: "center", px: "$3", gap: "$3", borderBottomWidth: 1, borderColor: "var(--edge, var(--white-06))", children: [_jsxs(XStack, { items: "center", gap: "$1", shrink: 0, children: [_jsx(SidebarIconButton, { ...TAP, label: shown ? "Close sidebar" : "Open sidebar", onPress: toggle, onMouseEnter: () => setPeeking(true), children: _jsx(PanelLeft, { size: 16, "aria-hidden": true }) }), back || forward ? (_jsxs(XStack, { display: "none", $md: { display: "flex" }, items: "center", gap: "$1", shrink: 0, children: [_jsx(SidebarIconButton, { ...TAP, label: "Back", onPress: () => back?.(), children: _jsx(ArrowLeft, { size: 16, "aria-hidden": true }) }), _jsx(SidebarIconButton, { ...TAP, label: "Forward", onPress: () => forward?.(), children: _jsx(ArrowRight, { size: 16, "aria-hidden": true }) })] })) : null] }), _jsx(XStack, { flex: 1, justify: "center", children: _jsx(YStack, { width: 440, maxW: "100%", position: "relative", children: _jsxs(Box, { render: "button", onClick: () => setFinding(true), display: "flex", flexDirection: "row", "data-slot": "find", items: "center", "$max-md": { justify: "center" }, gap: "$2", width: "100%", height: CONTROL, px: "$2.5", rounded: "$2", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: [_jsx(Search, { size: 13, "aria-hidden": true, color: "var(--soft, var(--muted-foreground))" }), _jsxs(Text, { fontSize: "$1", color: "$soft", "$max-md": { display: "none" }, children: ["Search ", workspace] }), _jsx(XStack, { ml: "auto", items: "center", justify: "center", height: 18, px: "$1", rounded: "$1", bg: "$edge", "$max-md": { display: "none" }, children: _jsx(Text, { fontSize: "$1", fontWeight: "600", color: "$soft", children: "\u2318K" }) })] }) }) }), _jsxs(XStack, { shrink: 0, minW: 0, justify: "flex-end", items: "center", gap: "$2", children: [settled && !signedIn ? (_jsx(Box, { ...TAP, render: "button", onClick: () => enter(LOGIN), display: "flex", items: "center", justify: "center", cursor: "pointer", children: _jsx(XStack, { items: "center", justify: "center", height: CONTROL, px: "$2.5", rounded: "$2", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: _jsx(Text, { fontSize: "$1", fontWeight: "600", color: "$ink", children: "Sign in" }) }) })) : null, _jsxs(XStack, { display: "none", $lg: { display: "flex" }, items: "center", gap: "$1", children: [_jsx(SidebarIconButton, { ...TAP, label: aside === "roster" ? "Hide directory & roster" : "Show directory & roster", onPress: () => showAside(aside === "roster" ? null : "roster"), children: _jsx(Users, { size: 16, "aria-hidden": true }) }), _jsx(SidebarIconButton, { ...TAP, label: aside === "tasks" ? "Close side panel" : "Open side panel", onPress: () => showAside(aside === "tasks" ? null : "tasks"), children: _jsx(PanelRight, { size: 16, "aria-hidden": true }) })] })] })] }), shown ? (_jsx(Box, { render: "button", "aria-label": "Close sidebar", onClick: dismiss, ...scrim, "data-slot": "scrim", position: "absolute", t: 44, r: 0, b: TABS_HEIGHT, l: 0, z: "var(--z-scrim)", $md: { display: "none" } })) : null, shown ? (_jsx(XStack, { "data-slot": "list", gridArea: "list", position: asked ? "relative" : "absolute", ...(asked ? {} : { top: 44, bottom: 0, left: 64 }), "$max-md": { position: "fixed", t: 44, r: 0, b: TABS_HEIGHT, l: 0, width: "100%" }, z: "var(--z-drawer)", bg: "$background", onMouseEnter: () => setPeeking(true), onMouseLeave: () => {
                     if (!asked)
                         setPeeking(false);
-                }, children: list })) : null, _jsx(Paned, { swap: settingsPane ? _jsx(SettingsPane, { id: settingsPane }) : undefined, children: children }), _jsx(Profile, { open: profiling, onClose: () => setProfiling(false) }), supporting ? _jsx(SupportPicker, { onClose: () => setSupporting(false) }) : null, finding ? (_jsx(Find, { doors: doors, onClose: () => setFinding(false), navigate: navigate })) : null] }));
+                }, children: list })) : null, _jsx(Paned, { swap: settingsPane ? _jsx(Suspense, { fallback: null, children: _jsx(SettingsPane, { id: settingsPane }) }) : undefined, children: children }), _jsx(Profile, { open: profiling, onClose: () => setProfiling(false) }), supporting ? _jsx(SupportPicker, { onClose: () => setSupporting(false) }) : null, finding ? (_jsx(Find, { doors: doors, onClose: () => setFinding(false), navigate: navigate })) : null] }));
 }

package/dist/Standing.d.ts

@@ -0,0 +1,4 @@
+export declare function Standing({ onPlans, onBilling }: {
+    onPlans: () => void;
+    onBilling: () => void;
+}): import("react").JSX.Element;

package/dist/Standing.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+// The plan at the head of the account menu (Account.tsx): @hanzo/build's
+// `Meter` over the organization's standing, read when the menu opens. Its own
+// module so the menu's foot row costs a room's first screen nothing: it loads
+// with the menu.
+import { useMemo } from 'react';
+import { Meter, useStanding } from '@hanzo/build';
+import { api } from './lib/api.js';
+import { bearer, org } from './lib/session.js';
+export function Standing({ onPlans, onBilling }) {
+    const scoped = org();
+    const target = useMemo(() => ({ api: api(), token: bearer, org: scoped }), [scoped]);
+    const plan = useStanding(target, true);
+    return _jsx(Meter, { read: plan, onPlans: onPlans, onBilling: onBilling });
+}

package/package.json

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