@hanzo/rooms 0.1.67 → 0.1.69

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/App.js

@@ -1,7 +1,9 @@
 'use client';
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// The web app as the whole window, in two modes: Chat, a conversation with the
-// product's AI, and Dev, @hanzo/build's `<Builder>` without a rail of its own.
+// The web app as the whole window, in three modes: Chat, a conversation with
+// the product's AI; Dev, @hanzo/build's `<Builder>` without a rail of its own;
+// and Studio, @hanzo/studio's `<Studio>` the same way, its places (`nav`) in the
+// sidebar where Dev's stand for Dev.
 //
 //   OUTER  the rail (Rail.tsx) and the sidebar beside it (Column.tsx), on the
 //          window's floor, with the window's bar above them where the host has
@@ -14,11 +16,12 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // search, New, Dev's places and the reader's Recents. The address says the
 // mode, as a path (lib/host `talk`, `app`, `place`): `/` and `/chat` are Chat on
 // a new conversation, `/chat/<id>` one of the reader's, and a path under `/dev`
-// is Dev: `/dev/run/<id>` a run, `/dev/projects/<org>/<repo>` a project. Moving
+// is Dev: `/dev/run/<id>` a run, `/dev/projects/<org>/<repo>` a project; a path
+// under `/studio` is Studio, its own address after it (`c/<id>`, `library`). Moving
 // between the modes is a history entry (`go`), never a load, so a host serves
 // this one component for every path under each.
 //
-// Every host draws this: hanzo.ai at `/`, `/chat` and `/dev`, and the desktop
+// Every host draws this: hanzo.ai at `/`, `/chat`, `/dev` and `/studio`, and the desktop
 // app as its main window. The host mounts IamProvider and `<Rooms>` with its
 // router and the path, and draws this only for a signed-in reader; what a
 // stranger sees is the host's.
@@ -46,13 +49,19 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // EVERY MOVE PUTS THE DRAWER AWAY, the one to where the reader already is
 // included.
 //
+// STUDIO LOADS WITH ITS MODE. Its module (and three.js behind a 3D tab) is
+// fetched the first time the reader stands in Studio; its places are a few
+// lines and come with the app. Another organization opens it at its New, so
+// nothing it read under the last one stays.
+//
 // THE PLANS' OWN ADDRESS LEAVES for the pay site in its place (dev.tsx `leave`),
 // so the builder's own plans are never drawn.
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ArrowLeft, ArrowRight, Menu } from 'lucide-react';
 import { AiProvider } from '@hanzo/ai/react';
 import { Text, XStack, YStack } from '@hanzo/gui';
 import { Builder, HostProvider, path as written, route } from '@hanzo/build';
+import { nav as places } from '@hanzo/studio';
 import { SidebarIconButton } from '@hanzo/ui/chat';
 import { useAi } from './lib/ai.js';
 import { Chat } from './Chat.js';
@@ -66,8 +75,10 @@ import { empty, openThread, useOpen } from './open.js';
 import { Paned } from './Shell.js';
 import { floor, pane } from './ground.js';
 import { pick } from './lib/session.js';
-import { app, go, place, talk } from './lib/host.js';
+import { app, go, place, studio, talk } from './lib/host.js';
 import { wordmark } from './where.js';
+/** Studio, fetched the first time the reader stands in it. */
+const Studio = lazy(() => import('@hanzo/studio').then((m) => ({ default: m.Studio })));
 /** `/` is Chat on a new conversation. */
 const HOME = { mode: 'chat', thread: null };
 /** The bar's height, px: the reference window's title bar. */
@@ -85,7 +96,7 @@ const INSET = {
     left: 'max(var(--pane-gap), var(--safe-left))',
 };
 /** Where each mode was last, so the rail goes back to it. */
-const last = { chat: '', dev: '' };
+const last = { chat: '', dev: '', studio: '' };
 /** Whether a key press is the reader typing, where the app's keys are the field's. */
 const typing = (e) => {
     const el = e.target;
@@ -119,6 +130,22 @@ function Window({ bar }) {
     const at = place(here) ?? HOME;
     const mode = at.mode;
     const where = at.mode === 'dev' ? at.at : null;
+    // Studio's host: Dev's, at Studio's address, its moves under /studio, and
+    // another organization opening Studio's New in it.
+    const made = at.mode === 'studio' ? at.at : '';
+    const maker = useMemo(() => ({
+        ...host,
+        name: 'Hanzo Studio',
+        path: made,
+        go: (to, how) => {
+            shut();
+            go(studio(to), how?.replace);
+        },
+        chooseOrg: (next) => {
+            pick(next);
+            window.location.assign(studio(''));
+        },
+    }), [host, made, shut]);
     // A run floats two panes of its own, so the pane it stands in is not cut.
     const run = where !== null && route(where).kind === 'run';
     const asked = at.mode === 'chat' ? at.thread : null;
@@ -202,11 +229,13 @@ function Window({ bar }) {
     }, [bar, router, move]);
     const toChat = () => move(last.chat || talk());
     const toDev = () => move(last.dev || app(''));
+    const toStudio = () => move(last.studio || studio(''));
     // Another organization: picked, and the app opened in it at the mode's New.
     const org = (o) => {
         pick(o);
-        window.location.assign(mode === 'dev' ? app('') : talk());
+        window.location.assign(mode === 'dev' ? app('') : mode === 'studio' ? studio('') : talk());
     };
+    const sidebar = mode === 'studio' ? places(maker, (p) => maker.go(p)) : undefined;
     const flip = () => setClosed(!closed);
-    return (_jsx(AiProvider, { client: client ?? undefined, children: _jsx(HostProvider, { host: host, children: _jsxs(YStack, { "data-slot": "window", ...(bar ? floor : null), flex: 1, minW: 0, height: "100dvh", overflow: "hidden", children: [bar ? (_jsxs(XStack, { "data-slot": "title-bar", height: BAR, shrink: 0, items: "center", gap: 2, pl: (bar.inset ?? 0) + 6, pr: "$2", ...bar.drag, children: [_jsx(XStack, { "$max-md": { display: 'none' }, children: _jsx(Toggle, { open: !closed, onPress: flip }) }), _jsx(XStack, { $md: { display: 'none' }, children: _jsx(Toggle, { open: drawer, onPress: () => setDrawer(true), label: "Open sidebar" }) }), _jsx(Mark, { label: "Back", "data-slot": "back", onPress: () => router.back(), children: _jsx(ArrowLeft, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Forward", "data-slot": "forward", onPress: () => router.forward(), children: _jsx(ArrowRight, { size: 18, "aria-hidden": true }) }), _jsx(XStack, { flex: 1, self: "stretch", ...bar.drag })] })) : null, _jsxs(XStack, { "data-room": "", "data-app": mode, "data-slot": "frame", ...(bar ? null : floor), flex: 1, minW: 0, minH: 0, pr: "var(--pane-gap)", pb: "var(--pane-gap)", pt: bar ? 0 : 'var(--pane-gap)', "$max-md": { p: 0 }, children: [_jsx(YStack, { height: "100%", "$max-md": { display: 'none' }, children: _jsx(Rail, { host: host, mode: mode, at: where, open: !closed, toggle: bar ? undefined : flip, onChat: toChat, onDev: toDev, go: move, onOrg: org }) }), closed ? null : (_jsx(YStack, { "$max-md": { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: () => setClosed(true), seek: seek }) })), _jsxs(YStack, { "data-slot": "stage", flex: 1, minW: 0, minH: 0, ml: "var(--pane-gap)", "$max-md": { ml: 0 }, children: [bar ? null : (_jsxs(XStack, { "data-slot": "app-bar", height: 44, px: "$1", gap: "$1", items: "center", shrink: 0, $md: { display: 'none' }, children: [_jsx(SidebarIconButton, { label: "Open sidebar", onPress: () => setDrawer(true), width: 44, height: 44, rounded: 999, children: _jsx(Menu, { size: 18 }) }), _jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", numberOfLines: 1, children: wordmark(mode) })] })), _jsx(XStack, { "data-slot": "panes", flex: 1, minW: 0, minH: 0, children: mode === 'chat' ? (_jsx(Paned, { framed: true, children: _jsx(Chat, {}) })) : (_jsx(YStack, { render: "main", "data-slot": "pane", ...(run ? null : { ...pane(), overflow: 'hidden' }), flex: 1, minW: 0, minH: 0, children: plans ? null : _jsx(Builder, { host: host, rail: false }) })) })] })] }), drawer ? (_jsxs(_Fragment, { children: [_jsx(YStack, { render: "button", "aria-label": "Close sidebar", onPress: () => setDrawer(false), bg: DIM, position: "absolute", t: 0, r: 0, b: 0, l: 0, z: "var(--z-overlay)", $md: { display: 'none' } }), _jsx(YStack, { "data-slot": "drawer", position: "absolute", t: INSET.top, b: INSET.bottom, l: INSET.left, width: "min(320px, calc(100% - 2 * var(--pane-gap) - 48px))", z: "var(--z-modal)", $md: { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: shut, seek: seek, drawer: true, foot: _jsx(Rail, { host: host, mode: mode, at: where, open: true, flat: true, onChat: toChat, onDev: toDev, go: move, onOrg: org }) }) })] })) : null] }) }) }));
+    return (_jsx(AiProvider, { client: client ?? undefined, children: _jsx(HostProvider, { host: host, children: _jsxs(YStack, { "data-slot": "window", ...(bar ? floor : null), flex: 1, minW: 0, height: "100dvh", overflow: "hidden", children: [bar ? (_jsxs(XStack, { "data-slot": "title-bar", height: BAR, shrink: 0, items: "center", gap: 2, pl: (bar.inset ?? 0) + 6, pr: "$2", ...bar.drag, children: [_jsx(XStack, { "$max-md": { display: 'none' }, children: _jsx(Toggle, { open: !closed, onPress: flip }) }), _jsx(XStack, { $md: { display: 'none' }, children: _jsx(Toggle, { open: drawer, onPress: () => setDrawer(true), label: "Open sidebar" }) }), _jsx(Mark, { label: "Back", "data-slot": "back", onPress: () => router.back(), children: _jsx(ArrowLeft, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Forward", "data-slot": "forward", onPress: () => router.forward(), children: _jsx(ArrowRight, { size: 18, "aria-hidden": true }) }), _jsx(XStack, { flex: 1, self: "stretch", ...bar.drag })] })) : null, _jsxs(XStack, { "data-room": "", "data-app": mode, "data-slot": "frame", ...(bar ? null : floor), flex: 1, minW: 0, minH: 0, pr: "var(--pane-gap)", pb: "var(--pane-gap)", pt: bar ? 0 : 'var(--pane-gap)', "$max-md": { p: 0 }, children: [_jsx(YStack, { height: "100%", "$max-md": { display: 'none' }, children: _jsx(Rail, { host: host, mode: mode, at: where, open: !closed, toggle: bar ? undefined : flip, onChat: toChat, onDev: toDev, onStudio: toStudio, go: move, onOrg: org }) }), closed ? null : (_jsx(YStack, { "$max-md": { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: () => setClosed(true), seek: seek, places: sidebar }) })), _jsxs(YStack, { "data-slot": "stage", flex: 1, minW: 0, minH: 0, ml: "var(--pane-gap)", "$max-md": { ml: 0 }, children: [bar ? null : (_jsxs(XStack, { "data-slot": "app-bar", height: 44, px: "$1", gap: "$1", items: "center", shrink: 0, $md: { display: 'none' }, children: [_jsx(SidebarIconButton, { label: "Open sidebar", onPress: () => setDrawer(true), width: 44, height: 44, rounded: 999, children: _jsx(Menu, { size: 18 }) }), _jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", numberOfLines: 1, children: wordmark(mode) })] })), _jsx(XStack, { "data-slot": "panes", flex: 1, minW: 0, minH: 0, children: mode === 'chat' ? (_jsx(Paned, { framed: true, children: _jsx(Chat, {}) })) : mode === 'studio' ? (_jsx(YStack, { render: "main", "data-slot": "pane", ...pane(), overflow: "hidden", flex: 1, minW: 0, minH: 0, children: _jsx(YStack, { flex: 1, minH: 0, height: "100%", children: _jsx(Suspense, { fallback: null, children: _jsx(Studio, { host: maker, rail: false }) }) }) })) : (_jsx(YStack, { render: "main", "data-slot": "pane", ...(run ? null : { ...pane(), overflow: 'hidden' }), flex: 1, minW: 0, minH: 0, children: plans ? null : _jsx(Builder, { host: host, rail: false }) })) })] })] }), drawer ? (_jsxs(_Fragment, { children: [_jsx(YStack, { render: "button", "aria-label": "Close sidebar", onPress: () => setDrawer(false), bg: DIM, position: "absolute", t: 0, r: 0, b: 0, l: 0, z: "var(--z-overlay)", $md: { display: 'none' } }), _jsx(YStack, { "data-slot": "drawer", position: "absolute", t: INSET.top, b: INSET.bottom, l: INSET.left, width: "min(320px, calc(100% - 2 * var(--pane-gap) - 48px))", z: "var(--z-modal)", $md: { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: shut, seek: seek, drawer: true, places: sidebar, foot: _jsx(Rail, { host: host, mode: mode, at: where, open: true, flat: true, onChat: toChat, onDev: toDev, onStudio: toStudio, go: move, onOrg: org }) }) })] })) : null] }) }) }));
 }

package/dist/Column.d.ts

@@ -1,9 +1,10 @@
 import { type Host } from '@hanzo/build';
+import { type RailLink } from '@hanzo/ui/chat';
 import { type ReactNode } from 'react';
-import { type Mode } from './recent.js';
-export declare function Column({ host, mode, thread, go, onShut, seek, drawer, foot, }: {
+import { type Place } from './lib/host.js';
+export declare function Column({ host, mode, thread, go, onShut, seek, drawer, foot, places, }: {
     host: Host;
-    mode: Mode;
+    mode: Place['mode'];
     /** The Chat conversation the pane holds, or null. */
     thread: string | null;
     /** Moves the app to an address of this page. */
@@ -16,4 +17,10 @@ export declare function Column({ host, mode, thread, go, onShut, seek, drawer, f
     drawer?: boolean;
     /** What stands at its foot: the drawer's rail, laid flat. */
     foot?: ReactNode;
+    /** The mode's places, where they are not Dev's (Studio's `nav`). */
+    places?: {
+        id: string;
+        label: string;
+        links: RailLink[];
+    }[];
 }): import("react").JSX.Element;

package/dist/Column.js

@@ -89,7 +89,7 @@ function Activity({ host }) {
     ];
     return (_jsx(DropdownMenu, { minWidth: 280, trigger: _jsx(XStack, { render: "button", "aria-label": "Activity", ...{ title: 'Activity' }, ...HEAD, items: "center", justify: "center", cursor: "pointer", opacity: 0.7, hoverStyle: { bg: '$hover', opacity: 1 }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: _jsx(Bell, { size: 16, "aria-hidden": true }) }), items: items }));
 }
-export function Column({ host, mode, thread, go, onShut, seek = 0, drawer = false, foot, }) {
+export function Column({ host, mode, thread, go, onShut, seek = 0, drawer = false, foot, places, }) {
     const [words, setWords] = useState('');
     // The search field shows once asked for, and while it holds words.
     const [seeking, setSeeking] = useState(false);
@@ -98,7 +98,7 @@ export function Column({ host, mode, thread, go, onShut, seek = 0, drawer = fals
     const uid = useId();
     const span = useSpan(SPAN, WIDTH, FLOOR, CEIL);
     const dev = (p) => host.go(p);
-    const groups = nav(host, dev);
+    const groups = places ?? nav(host, dev);
     const open = (row) => (row.kind === 'chat' ? go(talk(row.id)) : dev(row.id));
     // Chat's New; Dev's is the first of its places.
     const create = () => {
@@ -119,13 +119,13 @@ export function Column({ host, mode, thread, go, onShut, seek = 0, drawer = fals
     }, [seek]);
     return (_jsxs(YStack, { "data-slot": "app-column", ref: drawer ? undefined : span.ref, 
         // inline-style: `--span`, the width a drag rewrites on the element itself (span.ts); no prop sets a variable.
-        style: drawer ? undefined : span.style, position: "relative", flex: drawer ? 1 : undefined, shrink: drawer ? 1 : 0, minW: 0, height: "100%", width: drawer ? undefined : 'var(--span)', children: [_jsxs(Sidebar, { "data-slot": "app-rail", role: "navigation", "aria-label": brand(), ...(drawer ? { ...pane(), ...FLOAT } : { bg: 'transparent', borderWidth: 0 }), ...FILL, px: "$2", pt: drawer ? '$2' : 0, pb: "$2", gap: "$0", children: [_jsxs(XStack, { "data-slot": "app-head", items: "center", gap: "$1", pl: "$2", pr: 2, height: 52, shrink: 0, minW: 0, children: [_jsx(Text, { flex: 1, minW: 0, fontSize: 18, lineHeight: 24, fontWeight: "600", color: "$ink", numberOfLines: 1, children: wordmark(mode) }), _jsx(Activity, { host: host }), _jsx(SidebarIconButton, { label: mode === 'chat' ? 'Search chats' : 'Search runs', onPress: seeking ? done : ask, "aria-expanded": seeking || !!words, ...HEAD, children: _jsx(Search, { size: 16, "aria-hidden": true }) })] }), seeking || words ? (_jsxs(XStack, { "data-slot": "app-filter", items: "center", gap: "$2", pl: "$3", pr: "$1", height: 36, rounded: 999, borderWidth: 1, borderColor: "$borderColor", bg: "$edge", shrink: 0, mb: "$1.5", children: [_jsx(Search, { size: 15, "aria-hidden": true, color: "var(--soft, var(--muted-foreground))" }), _jsx(Text, { render: _jsx("input", { ref: field, value: words, onChange: (e) => setWords(e.target.value), onKeyDown: (e) => {
+        style: drawer ? undefined : span.style, position: "relative", flex: drawer ? 1 : undefined, shrink: drawer ? 1 : 0, minW: 0, height: "100%", width: drawer ? undefined : 'var(--span)', children: [_jsxs(Sidebar, { "data-slot": "app-rail", role: "navigation", "aria-label": brand(), ...(drawer ? { ...pane(), ...FLOAT } : { bg: 'transparent', borderWidth: 0 }), ...FILL, px: "$2", pt: drawer ? '$2' : 0, pb: "$2", gap: "$0", children: [_jsxs(XStack, { "data-slot": "app-head", items: "center", gap: "$1", pl: "$2", pr: 2, height: 52, shrink: 0, minW: 0, children: [_jsx(Text, { flex: 1, minW: 0, fontSize: 18, lineHeight: 24, fontWeight: "600", color: "$ink", numberOfLines: 1, children: wordmark(mode) }), _jsx(Activity, { host: host }), mode === 'studio' ? null : (_jsx(SidebarIconButton, { label: mode === 'chat' ? 'Search chats' : 'Search runs', onPress: seeking ? done : ask, "aria-expanded": seeking || !!words, ...HEAD, children: _jsx(Search, { size: 16, "aria-hidden": true }) }))] }), seeking || words ? (_jsxs(XStack, { "data-slot": "app-filter", items: "center", gap: "$2", pl: "$3", pr: "$1", height: 36, rounded: 999, borderWidth: 1, borderColor: "$borderColor", bg: "$edge", shrink: 0, mb: "$1.5", children: [_jsx(Search, { size: 15, "aria-hidden": true, color: "var(--soft, var(--muted-foreground))" }), _jsx(Text, { render: _jsx("input", { ref: field, value: words, onChange: (e) => setWords(e.target.value), onKeyDown: (e) => {
                                         if (e.key === 'Escape')
                                             done();
                                     }, onBlur: () => {
                                         if (!words)
                                             setSeeking(false);
-                                    }, placeholder: mode === 'chat' ? 'Search chats' : 'Search runs', "aria-label": "Filter recents" }), flex: 1, minW: 0, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit", fontSize: "$3" }), words ? (_jsx(SidebarIconButton, { label: "Clear search", onPress: done, width: 28, height: 28, rounded: 999, children: _jsx(X, { size: 14, "aria-hidden": true }) })) : null] })) : null, mode === 'chat' ? (_jsx(YStack, { role: "list", gap: 2, shrink: 0, children: _jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { "data-slot": "app-new", ...ROW, active: !thread, bg: "transparent", hoverStyle: { bg: '$hover' }, icon: _jsx(SquarePen, { size: 16, "aria-hidden": true }), onPress: create, ...keys(create), children: _jsx(Text, { fontSize: "$3", color: "$ink", children: "New chat" }) }) }) })) : (_jsx(YStack, { "data-slot": "app-places", shrink: 0, children: groups.map((g, i) => (_jsxs(YStack, { pt: i ? '$2' : 0, children: [i ? (_jsx(Text, { id: `${uid}-${g.id}`, pl: "$2", pb: 2, fontSize: "$3", color: "$soft", children: g.label })) : null, _jsx(YStack, { role: "list", "aria-labelledby": i ? `${uid}-${g.id}` : undefined, "aria-label": i ? undefined : g.label, gap: 1, children: g.links.map((link) => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, ...(link.id === NEW ? { 'data-slot': 'app-new' } : {}), active: link.active, icon: link.id === NEW ? _jsx(SquarePen, { size: 16, "aria-hidden": true }) : link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: _jsx(Text, { fontSize: "$3", color: link.active ? '$ink' : '$quiet', children: link.label }) }) }, link.id))) })] }, g.id))) })), _jsx(Recents, { host: host, mode: mode, thread: thread, words: words, onOpen: open, onNew: create }), _jsxs(YStack, { gap: "$2", pt: "$2", shrink: 0, children: [_jsx(Made, {}), _jsx(Setup, {})] }), foot] }), drawer ? null : (_jsx(Grip, { side: "left", span: span.span, floor: FLOOR, ceil: CEIL, reset: WIDTH, onSpan: span.move, onKeep: span.keep, onShut: onShut, label: "Resize sidebar", 
+                                    }, placeholder: mode === 'chat' ? 'Search chats' : 'Search runs', "aria-label": "Filter recents" }), flex: 1, minW: 0, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit", fontSize: "$3" }), words ? (_jsx(SidebarIconButton, { label: "Clear search", onPress: done, width: 28, height: 28, rounded: 999, children: _jsx(X, { size: 14, "aria-hidden": true }) })) : null] })) : null, mode === 'chat' ? (_jsx(YStack, { role: "list", gap: 2, shrink: 0, children: _jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { "data-slot": "app-new", ...ROW, active: !thread, bg: "transparent", hoverStyle: { bg: '$hover' }, icon: _jsx(SquarePen, { size: 16, "aria-hidden": true }), onPress: create, ...keys(create), children: _jsx(Text, { fontSize: "$3", color: "$ink", children: "New chat" }) }) }) })) : (_jsx(YStack, { "data-slot": "app-places", shrink: 0, children: groups.map((g, i) => (_jsxs(YStack, { pt: i ? '$2' : 0, children: [i ? (_jsx(Text, { id: `${uid}-${g.id}`, pl: "$2", pb: 2, fontSize: "$3", color: "$soft", children: g.label })) : null, _jsx(YStack, { role: "list", "aria-labelledby": i ? `${uid}-${g.id}` : undefined, "aria-label": i ? undefined : g.label, gap: 1, children: g.links.map((link) => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, ...(link.id === NEW ? { 'data-slot': 'app-new' } : {}), active: link.active, icon: link.id === NEW ? _jsx(SquarePen, { size: 16, "aria-hidden": true }) : link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: _jsx(Text, { fontSize: "$3", color: link.active ? '$ink' : '$quiet', children: link.label }) }) }, link.id))) })] }, g.id))) })), mode === 'studio' ? null : _jsx(Recents, { host: host, mode: mode, thread: thread, words: words, onOpen: open, onNew: create }), _jsxs(YStack, { gap: "$2", pt: "$2", shrink: 0, children: [_jsx(Made, {}), _jsx(Setup, {})] }), foot] }), drawer ? null : (_jsx(Grip, { side: "left", span: span.span, floor: FLOOR, ceil: CEIL, reset: WIDTH, onSpan: span.move, onKeep: span.keep, onShut: onShut, label: "Resize sidebar", 
                 // In the gutter between the sidebar and the panel, not over the sidebar's own rows.
                 r: GUTTER_END, width: "var(--pane-gap)" }))] }));
 }

package/dist/Rail.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import { type Host } from '@hanzo/build';
-import type { Mode } from './recent.js';
+import { type Place } from './lib/host.js';
 /** The rail's width, px. */
 export declare const RAIL = 48;
 /** One mark: an icon button named for where it goes, its name its tooltip, lit where the reader is. */
@@ -18,9 +18,9 @@ export declare function Toggle({ open, onPress, label }: {
     onPress: () => void;
     label?: string;
 }): import("react").JSX.Element;
-export declare function Rail({ host, mode, at, open, toggle, flat, onChat, onDev, go, onOrg, }: {
+export declare function Rail({ host, mode, at, open, toggle, flat, onChat, onDev, onStudio, go, onOrg, }: {
     host: Host;
-    mode: Mode;
+    mode: Place['mode'];
     /** Dev's builder address, or null in Chat. */
     at: string | null;
     /** The sidebar beside the rail is open. */
@@ -29,9 +29,10 @@ export declare function Rail({ host, mode, at, open, toggle, flat, onChat, onDev
     toggle?: () => void;
     /** Laid along the foot of the phone's drawer rather than down the window's edge. */
     flat?: boolean;
-    /** To Chat and to Dev, each where the reader left it. */
+    /** To Chat, Dev and Studio, each where the reader left it. */
     onChat: () => void;
     onDev: () => void;
+    onStudio: () => void;
     /** Moves the app to an address of this page. */
     go: (address: string) => void;
     /** Work in another organization. */

package/dist/Rail.js

@@ -5,8 +5,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // menu of the rest, and the account at the foot. It is how the app moves
 // between its products; there is no switch anywhere else.
 //
-// Studio is its own page, hanzo.ai/studio, opened in this tab: the app draws it
-// there for a signed-in reader.
+// Studio is the app's third mode (@hanzo/studio at /studio), each of the three
+// opened where the reader left it.
 //
 // Library, Scheduled tasks and Customize are Dev's own places (@hanzo/build's
 // Artifacts, Automations and Customize), raised to the rail; each is lit while
@@ -27,8 +27,7 @@ import { XStack, YStack } from '@hanzo/gui';
 import { route } from '@hanzo/build';
 import { DropdownMenu } from '@hanzo/ui';
 import { Me } from './Me.js';
-import { app, STUDIO, TABS, WORKSPACE } from './lib/host.js';
-import { site } from './where.js';
+import { app, TABS, WORKSPACE } from './lib/host.js';
 /** The rail's width, px. */
 export const RAIL = 48;
 /** A mark, px: a 36px square on a 44px pitch. */
@@ -72,7 +71,7 @@ export function Mark({ label, on = false, onPress, children, ...rest }) {
 export function Toggle({ open, onPress, label }) {
     return (_jsx(Mark, { label: label ?? (open ? 'Close sidebar' : 'Open sidebar'), "data-slot": "sidebar-toggle", "aria-expanded": open, onPress: onPress, children: _jsx(PanelLeft, { size: 18, "aria-hidden": true }) }));
 }
-export function Rail({ host, mode, at, open, toggle, flat = false, onChat, onDev, go, onOrg, }) {
+export function Rail({ host, mode, at, open, toggle, flat = false, onChat, onDev, onStudio, go, onOrg, }) {
     const here = mode === 'dev' ? raised(at) : null;
     const to = (p) => () => go(app(p));
     // Everything else the app reaches, behind More: on a phone the raised places first, then Dev's other places, then the products on hosts of their own.
@@ -95,5 +94,5 @@ export function Rail({ host, mode, at, open, toggle, flat = false, onChat, onDev
         { key: 'team', label: 'Team', icon: _jsx(Users, { size: 16, "aria-hidden": true }), onSelect: () => out(WORKSPACE) },
     ];
     const Stack = flat ? XStack : YStack;
-    return (_jsxs(Stack, { "data-slot": "rail", render: "nav", "aria-label": "Products", ...(flat ? { pt: '$2', mt: '$2', borderTopWidth: 1, borderColor: '$borderColor', gap: '$1' } : { width: RAIL, flex: 1, pt: '$2', pb: '$2', gap: 8 }), shrink: 0, items: "center", children: [toggle ? (_jsx(YStack, { pb: 8, children: _jsx(Toggle, { open: open, onPress: toggle }) })) : null, _jsx(Mark, { label: "Chat", on: mode === 'chat', onPress: onChat, "data-slot": "rail-chat", children: _jsx(MessageSquare, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Dev", on: mode === 'dev' && !here, onPress: onDev, "data-slot": "rail-dev", children: _jsx(Code2, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Studio", onPress: () => window.location.assign(site(STUDIO)), "data-slot": "rail-studio", children: _jsx(WandSparkles, { size: 18, "aria-hidden": true }) }), flat ? null : (_jsxs(_Fragment, { children: [_jsx(Mark, { label: "Library", on: here === 'library', onPress: to(RAISED.library), "data-slot": "rail-library", children: _jsx(Library, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Scheduled tasks", on: here === 'scheduled', onPress: to(RAISED.scheduled), "data-slot": "rail-scheduled", children: _jsx(Clock, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Customize", on: here === 'customize', onPress: to(RAISED.customize), "data-slot": "rail-customize", children: _jsx(Puzzle, { size: 18, "aria-hidden": true }) })] })), _jsx(DropdownMenu, { placement: flat ? 'top-start' : 'right-start', minWidth: 220, trigger: _jsx(XStack, { render: "button", "aria-label": "More", ...{ title: 'More' }, "data-slot": "rail-more", width: MARK, height: MARK, rounded: "$4", items: "center", justify: "center", cursor: "pointer", opacity: 0.62, hoverStyle: { bg: '$hover', opacity: 1 }, pressStyle: { bg: '$raised' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, $touchable: { width: 44, height: 44 }, children: _jsx(Ellipsis, { size: 18, "aria-hidden": true }) }), items: rest }), _jsx(YStack, { flex: 1 }), _jsx(Me, { host: host, narrow: true, above: flat, onOrg: onOrg })] }));
+    return (_jsxs(Stack, { "data-slot": "rail", render: "nav", "aria-label": "Products", ...(flat ? { pt: '$2', mt: '$2', borderTopWidth: 1, borderColor: '$borderColor', gap: '$1' } : { width: RAIL, flex: 1, pt: '$2', pb: '$2', gap: 8 }), shrink: 0, items: "center", children: [toggle ? (_jsx(YStack, { pb: 8, children: _jsx(Toggle, { open: open, onPress: toggle }) })) : null, _jsx(Mark, { label: "Chat", on: mode === 'chat', onPress: onChat, "data-slot": "rail-chat", children: _jsx(MessageSquare, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Dev", on: mode === 'dev' && !here, onPress: onDev, "data-slot": "rail-dev", children: _jsx(Code2, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Studio", on: mode === 'studio', onPress: onStudio, "data-slot": "rail-studio", children: _jsx(WandSparkles, { size: 18, "aria-hidden": true }) }), flat ? null : (_jsxs(_Fragment, { children: [_jsx(Mark, { label: "Library", on: here === 'library', onPress: to(RAISED.library), "data-slot": "rail-library", children: _jsx(Library, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Scheduled tasks", on: here === 'scheduled', onPress: to(RAISED.scheduled), "data-slot": "rail-scheduled", children: _jsx(Clock, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Customize", on: here === 'customize', onPress: to(RAISED.customize), "data-slot": "rail-customize", children: _jsx(Puzzle, { size: 18, "aria-hidden": true }) })] })), _jsx(DropdownMenu, { placement: flat ? 'top-start' : 'right-start', minWidth: 220, trigger: _jsx(XStack, { render: "button", "aria-label": "More", ...{ title: 'More' }, "data-slot": "rail-more", width: MARK, height: MARK, rounded: "$4", items: "center", justify: "center", cursor: "pointer", opacity: 0.62, hoverStyle: { bg: '$hover', opacity: 1 }, pressStyle: { bg: '$raised' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, $touchable: { width: 44, height: 44 }, children: _jsx(Ellipsis, { size: 18, "aria-hidden": true }) }), items: rest }), _jsx(YStack, { flex: 1 }), _jsx(Me, { host: host, narrow: true, above: flat, onOrg: onOrg })] }));
 }

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/dist/lib/host.d.ts

@@ -51,6 +51,8 @@ export declare const DEV = "/dev";
  * hanzo.ai/studio, whose page draws the app for a signed-in reader.
  */
 export declare const STUDIO = "/studio";
+/** Studio at an address of its own (@hanzo/studio `route`): '' is New, /studio. */
+export declare const studio: (at: string) => string;
 /** Chat on a conversation, or /chat itself for a new one. */
 export declare const talk: (id?: string | null) => string;
 /** Dev at a builder address (`route` in @hanzo/build); '' is New, /dev. What is not an address is New. */
@@ -62,6 +64,9 @@ export type Place = {
 } | {
     mode: 'dev';
     at: string;
+} | {
+    mode: 'studio';
+    at: string;
 };
 /** The place a path names, or null when it names none of the app's. */
 export declare function place(pathname: string): Place | null;

package/dist/lib/host.js

@@ -54,6 +54,8 @@ export const DEV = '/dev';
  * hanzo.ai/studio, whose page draws the app for a signed-in reader.
  */
 export const STUDIO = '/studio';
+/** Studio at an address of its own (@hanzo/studio `route`): '' is New, /studio. */
+export const studio = (at) => (at ? `${STUDIO}/${at.replace(/^\/+/, '')}` : STUDIO);
 /** Chat on a conversation, or /chat itself for a new one. */
 export const talk = (id) => (id ? `${CHAT}/${encodeURIComponent(id)}` : CHAT);
 /** Dev at a builder address (`route` in @hanzo/build); '' is New, /dev. What is not an address is New. */
@@ -67,6 +69,8 @@ export function place(pathname) {
         return { mode: 'chat', thread: null };
     if (p === DEV || p.startsWith(`${DEV}/`))
         return { mode: 'dev', at: path(parse(p.slice(DEV.length))) };
+    if (p === STUDIO || p.startsWith(`${STUDIO}/`))
+        return { mode: 'studio', at: p.slice(STUDIO.length + 1) };
     if (!p.startsWith(`${CHAT}/`))
         return null;
     const id = p.slice(CHAT.length + 1);
@@ -136,7 +140,8 @@ export function remember(mode) {
 /** Where `/` takes a member: the mode they were last in, Chat when none is kept. */
 export function resume() {
     try {
-        return window.localStorage.getItem(MODE) === 'dev' ? DEV : CHAT;
+        const kept = window.localStorage.getItem(MODE);
+        return kept === 'dev' ? DEV : kept === 'studio' ? STUDIO : CHAT;
     }
     catch {
         return CHAT;

package/dist/where.d.ts

@@ -68,6 +68,6 @@ export declare const where: () => Addresses;
 /** The product's name, as the host states it. Read at call time, like every address. */
 export declare const brand: () => string;
 /** The product's name in each mode of the app: the host's brand in Chat (Hanzo AI, Hanzo Team), Hanzo Dev in Dev. */
-export declare const wordmark: (mode: 'chat' | 'dev') => string;
+export declare const wordmark: (mode: 'chat' | 'dev' | 'studio') => string;
 /** A page of the app's own, from wherever the rooms are mounted. */
 export declare const site: (path: string) => string;

package/dist/where.js

@@ -12,6 +12,6 @@ export const where = () => addresses;
 /** The product's name, as the host states it. Read at call time, like every address. */
 export const brand = () => addresses.brand ?? 'Hanzo AI';
 /** The product's name in each mode of the app: the host's brand in Chat (Hanzo AI, Hanzo Team), Hanzo Dev in Dev. */
-export const wordmark = (mode) => (mode === 'dev' ? 'Hanzo Dev' : brand());
+export const wordmark = (mode) => (mode === 'dev' ? 'Hanzo Dev' : mode === 'studio' ? 'Hanzo Studio' : brand());
 /** A page of the app's own, from wherever the rooms are mounted. */
 export const site = (path) => `${addresses.site}${path}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/rooms",
-  "version": "0.1.67",
+  "version": "0.1.69",
   "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",
@@ -55,6 +55,7 @@
     "@hanzo/gui": "^8.3.5",
     "@hanzo/iam": ">=0.21.28",
     "@hanzo/logo": ">=1.0.26",
+    "@hanzo/studio": ">=0.1.0",
     "@hanzo/ui": ">=8.27.67",
     "@hanzo/usage": ">=0.1.18",
     "@hanzo/voice": ">=0.1.16",
@@ -73,6 +74,7 @@
     "@hanzo/gui": "8.3.5",
     "@hanzo/iam": "0.21.28",
     "@hanzo/logo": "1.0.26",
+    "@hanzo/studio": "0.1.0",
     "@hanzo/ui": "8.27.67",
     "@hanzo/usage": "0.1.18",
     "@hanzo/voice": "0.1.16",