@hanzo/rooms 0.1.84 → 0.1.85

package/dist/App.js

@@ -69,7 +69,7 @@ import { isPlans, leave, useDevHost } from './dev.js';
 import { Orgs } from './Orgs.js';
 import { useRooms } from './host.js';
 import { useKept } from './kept.js';
-import { Mark, Rail, Toggle } from './Rail.js';
+import { Mark, Rail, spot, Toggle } from './Rail.js';
 import { empty, openThread, useOpen } from './open.js';
 import { Paned } from './Shell.js';
 import { Palette } from './Palette.js';
@@ -191,6 +191,14 @@ function Window({ bar }) {
         last[mode] = `${window.location.pathname}${window.location.search}`;
         setDrawer(false);
     }, [mode, here]);
+    // Where the reader was before a place that takes the sidebar (Library, Scheduled
+    // tasks, Customize, Settings): its Back returns there, Chat or Dev alike.
+    const away = useRef('');
+    const inPlace = mode === 'dev' && spot(where) !== null;
+    useEffect(() => {
+        if (!inPlace)
+            away.current = `${window.location.pathname}${window.location.search}`;
+    }, [inPlace, here]);
     /** A move of the app's own: the drawer away, then the address. */
     const move = useCallback((address) => {
         shut();
@@ -227,6 +235,7 @@ function Window({ bar }) {
         window.addEventListener('keydown', key);
         return () => window.removeEventListener('keydown', key);
     }, [bar, router, move]);
+    const back = () => move(away.current || app(''));
     const toChat = () => move(last.chat || talk());
     const toDev = () => move(last.dev || app(''));
     const toStudio = () => move(last.studio || studio(''));
@@ -241,5 +250,5 @@ function Window({ bar }) {
         shut();
         setFinding(true);
     };
-    return (_jsx(AiProvider, { client: client ?? undefined, children: _jsx(HostProvider, { host: host, children: _jsx(PrefsProvider, { children: _jsxs(YStack, { ref: view, "data-slot": "window", ...(bar ? floor : null), flex: 1, minW: 0, height: "100dvh", overflow: "hidden", "$max-md": { position: 'fixed', t: TOP, l: 0, r: 0, height: HEIGHT }, 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, open: !closed, toggle: bar ? undefined : flip, onChat: toChat, onDev: toDev, onStudio: toStudio, onOrg: org }) }), closed ? null : (_jsx(YStack, { "$max-md": { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: () => setClosed(true), onSeek: seek, places: sidebar }) })), _jsxs(YStack, { "data-slot": "stage", flex: 1, minW: 0, minH: 0, ml: "var(--pane-gap)", "$max-md": { ml: 0, pb: FOOT }, children: [bar ? null : _jsx(Top, { host: host, mode: mode, places: sidebar, go: move, onMenu: () => setDrawer(true), onChat: toChat, onDev: toDev }), _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, onSeek: seek, drawer: true, places: sidebar, foot: _jsx(Rail, { host: host, mode: mode, open: true, flat: true, onChat: toChat, onDev: toDev, onStudio: toStudio, onOrg: org }) }) })] })) : null, finding ? _jsx(Palette, { go: move, onClose: found, mode: mode, host: host }) : null] }) }) }) }));
+    return (_jsx(AiProvider, { client: client ?? undefined, children: _jsx(HostProvider, { host: host, children: _jsx(PrefsProvider, { children: _jsxs(YStack, { ref: view, "data-slot": "window", ...(bar ? floor : null), flex: 1, minW: 0, height: "100dvh", overflow: "hidden", "$max-md": { position: 'fixed', t: TOP, l: 0, r: 0, height: HEIGHT }, 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), onSeek: seek, onBack: back, places: sidebar }) })), _jsxs(YStack, { "data-slot": "stage", flex: 1, minW: 0, minH: 0, ml: "var(--pane-gap)", "$max-md": { ml: 0, pb: FOOT }, children: [bar ? null : _jsx(Top, { host: host, mode: mode, places: sidebar, go: move, onMenu: () => setDrawer(true), onChat: toChat, onDev: toDev }), _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, onSeek: seek, onBack: back, 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, finding ? _jsx(Palette, { go: move, onClose: found, mode: mode, host: host }) : null] }) }) }) }));
 }

package/dist/Chat.js

@@ -44,7 +44,7 @@ import { Anchor, Box, Button, Text, View, XStack, YStack } from "@hanzo/ui";
 import { useMedia } from "@hanzo/gui";
 import { tidy } from "./lib/title.js";
 import { useIam, useIamToken } from "@hanzo/iam/react";
-import { bearer, hasSession, org } from "./lib/session.js";
+import { bearer, hasSession, named, org } from "./lib/session.js";
 import { api } from "./lib/api.js";
 import { app, dev, go } from "./lib/host.js";
 import { useRooms } from "./host.js";
@@ -64,7 +64,7 @@ import { Share } from "./Share.js";
 import { ConversationMenu, ThreadMore, useThreadList } from "./thread.js";
 import { Schedule } from "./Schedule.js";
 import { keepFile, useAttach, useKeep } from "./keep.js";
-import { artifacts, lead, nameOf, PAGE, Panel, PanelToggle, prompt, renders, Reply, Served, Summary, useDeck, useKey, Suggestions, useCarry, useLanguage, useMention, useMind, useSuggestions, usePanel, frames, name as tabName, } from "@hanzo/build";
+import { artifacts, lead, nameOf, PAGE, Panel, PanelToggle, prompt, renders, Reply, Served, Summary, useDeck, useKey, Suggestions, useCarry, useLanguage, useMention, useMind, useSuggestions, CHAT_MODES, usePanel, frames, name as tabName, } from "@hanzo/build";
 import { checkoutUrl } from './lib/pay.js';
 import { Upgrade, useFree } from './Upgrade.js';
 import { enter, LOGIN } from './lib/destination.js';
@@ -224,8 +224,6 @@ export function Ask({ placeholder, idle, }) {
  * accessible name does not move when the placeholder does.
  */
 const message = () => `Ask ${brand()}`;
-/** The line every answer is sent under, above the composer, as the reference sets it. */
-const caution = () => `${brand()} can make mistakes. Check important info.`;
 /** The panel offers no kinds of its own in Chat: its tabs are pages. */
 const NONE = [];
 /** The id the room's system turn is held under in the thread. */
@@ -527,8 +525,10 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
         setDraft: (x) => lent.current.setDraft(x),
         attach: (f) => lent.current.attach(f),
         go: (href) => (/^https?:/.test(href) ? void window.open(href, "_blank", "noopener,noreferrer") : go(href)),
-    });
+    }, CHAT_MODES);
     const agentShelf = useAgentShelf();
+    // The opening greets the person by their first name, as their account spells it.
+    const firstName = useMemo(() => (anonymous ? "" : ((named()?.name ?? "").trim().split(/\s+/)[0] ?? "")), [anonymous]);
     // Up to three things worth doing next, from the person's own activity (@hanzo/build).
     const hints = useSuggestions(target);
     // THE HEADER'S ⋯ IS THE ROW'S MENU (thread.tsx): rename, pin, share, its
@@ -1362,7 +1362,6 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
         ready: Boolean(draft.trim() || files.length),
         // `label` keeps the accessible name constant; the placeholder is the composer's own.
         label: ASK,
-        note: caution(),
         // A phone's pill is the tall one: the field across the top, the controls under it.
         narrow: !media.sm,
         // In the app's frame the composer floats on the pane as a pane of its own.
@@ -1411,7 +1410,7 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
         ],
         slash: anonymous ? undefined : carry.skills,
         at: anonymous ? undefined : carry.plugins,
-        mode: anonymous ? null : { value: carry.gear.gear.mode, set: (m) => carry.gear.set({ mode: m }) },
+        mode: anonymous ? null : carry.mode,
         // The model, the effort and the mode under the frame (@hanzo/build).
         mind,
         limits,
@@ -1530,10 +1529,10 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
                 // with it when it did. `Ask` passes its own, because the page embedding
                 // it already has an `<h1>` and a second is the defect that took the
                 // landings off /chat and /dev.
-                empty: heading === null ? undefined : (_jsxs(YStack, { "data-slot": "opening", items: "center", width: "100%", py: "$6", ...(media.sm ? null : { flex: 1, justify: "center" }), children: [room.length > 1 ? (_jsx(XStack, { items: "center", justify: "center", mb: "$4", children: room.map((name, i) => (_jsx(Box, { ml: i ? -16 : 0, rounded: 40, borderWidth: 2, borderColor: "$background", z: room.length - i, children: _jsx(Face, { src: faces[name]?.avatar, emoji: faces[name]?.emoji, name: name, size: 72 }) }, name))) })) : portrait ? (_jsx(Box, { width: 160, height: 160, rounded: 24, overflow: "hidden", borderWidth: 2, borderColor: "var(--white-15)", boxShadow: "0 10px 24px color-mix(in srgb, var(--pure-black) 70%, transparent)", mb: "$4", bg: "var(--neutral-900)", children: _jsx(View, { render: _jsx("img", { src: portrait, alt: withWhom }), width: "100%", height: "100%", objectFit: "cover" }) })) : null, room.length === 1 && !portrait ? (_jsx(Box, { mb: "$3", children: _jsx(Face, { emoji: mate?.emoji ?? persona?.emoji, name: withWhom, size: 72 }) })) : null, _jsx(Text, { render: "h1", fontSize: "$7", lineHeight: "$7", fontWeight: "700", color: "$ink", text: "center", mb: "$1", children: join(room) || heading || "What can I help with?" }), room.length === 1 && (mate?.description ?? persona?.description) ? (_jsx(Text, { fontSize: "$3", color: "$soft", text: "center", maxW: 500, mb: "$4", lineHeight: "$4", children: mate?.description ?? persona?.description })) : null] })), 
+                empty: heading === null ? undefined : (_jsxs(YStack, { "data-slot": "opening", items: "center", width: "100%", pt: "$6", pb: "$2", ...(media.sm ? null : { flex: 1, justify: "center" }), children: [room.length > 1 ? (_jsx(XStack, { items: "center", justify: "center", mb: "$4", children: room.map((name, i) => (_jsx(Box, { ml: i ? -16 : 0, rounded: 40, borderWidth: 2, borderColor: "$background", z: room.length - i, children: _jsx(Face, { src: faces[name]?.avatar, emoji: faces[name]?.emoji, name: name, size: 72 }) }, name))) })) : portrait ? (_jsx(Box, { width: 160, height: 160, rounded: 24, overflow: "hidden", borderWidth: 2, borderColor: "var(--white-15)", boxShadow: "0 10px 24px color-mix(in srgb, var(--pure-black) 70%, transparent)", mb: "$4", bg: "var(--neutral-900)", children: _jsx(View, { render: _jsx("img", { src: portrait, alt: withWhom }), width: "100%", height: "100%", objectFit: "cover" }) })) : null, room.length === 1 && !portrait ? (_jsx(Box, { mb: "$3", children: _jsx(Face, { emoji: mate?.emoji ?? persona?.emoji, name: withWhom, size: 72 }) })) : null, _jsx(Text, { render: "h1", fontSize: "$7", lineHeight: "$7", fontWeight: "700", color: "$ink", text: "center", mb: "$1", children: join(room) || heading || (firstName ? `What’s up, ${firstName}?` : "What’s up?") }), room.length === 1 && (mate?.description ?? persona?.description) ? (_jsx(Text, { fontSize: "$3", color: "$soft", text: "center", maxW: 500, mb: "$4", lineHeight: "$4", children: mate?.description ?? persona?.description })) : null] })), 
                 // The transcript reads at the same measure. `Thread` defaults to 768
                 // itself; handing it the column here is what lets Width reach it.
-                column: { maxW: MEASURE }, composer: prompt({ ...composing, field: mention.field }, mention.state) }), _jsx(AgentMaker, {}), carry.dialog, _jsxs(XStack, { items: "center", justify: "center", py: "$1", px: "$3", gap: "$2", children: [_jsx(Anchor, { href: site("/legal/terms"), fontSize: "$1", color: "$soft", children: "Terms" }), _jsx(Text, { fontSize: "$1", color: "$soft", children: "\u00B7" }), _jsx(Anchor, { href: site("/legal/privacy"), fontSize: "$1", color: "$soft", children: "Privacy" })] }), consent, _jsx(Upgrade, { ask: ask, onClose: () => setAsk(null) })] }));
+                column: { maxW: MEASURE }, composer: prompt({ ...composing, field: mention.field }, mention.state) }), _jsx(AgentMaker, {}), carry.dialog, _jsx(XStack, { items: "center", justify: "center", py: "$1", px: "$3", gap: "$2", children: isFree(model) ? (_jsxs(Text, { fontSize: "$1", color: "$soft", children: ["Free chat is data-shared to train models.", " ", _jsx(Anchor, { href: site("/legal/privacy"), fontSize: "$1", color: "$ink", children: "Privacy" })] })) : (_jsxs(_Fragment, { children: [_jsx(Anchor, { href: site("/legal/terms"), fontSize: "$1", color: "$soft", children: "Terms" }), _jsx(Text, { fontSize: "$1", color: "$soft", children: "\u00B7" }), _jsx(Anchor, { href: site("/legal/privacy"), fontSize: "$1", color: "$soft", children: "Privacy" })] })) }), consent, _jsx(Upgrade, { ask: ask, onClose: () => setAsk(null) })] }));
 }
 /** The agreement free asks for, in @hanzo/ai's words so every surface says one thing. */
 function Consent({ question, onAgree, onCancel, }) {

package/dist/Column.d.ts

@@ -2,7 +2,7 @@ import { type Host } from '@hanzo/build';
 import { type RailLink } from '@hanzo/ui/chat';
 import { type ReactNode } from 'react';
 import { type Place } from './lib/host.js';
-export declare function Column({ host, mode, thread, go, onShut, onSeek, drawer, foot, places, }: {
+export declare function Column({ host, mode, thread, go, onShut, onSeek, onBack, drawer, foot, places, }: {
     host: Host;
     mode: Place['mode'];
     /** The Chat conversation the pane holds, or null. */
@@ -13,6 +13,8 @@ export declare function Column({ host, mode, thread, go, onShut, onSeek, drawer,
     onShut: () => void;
     /** Opens the palette. */
     onSeek?: () => void;
+    /** Leaves a place that took the sidebar, for where the reader was before it. */
+    onBack: () => void;
     /** Drawn in the phone's drawer: no edge, cut as a floating pane. */
     drawer?: boolean;
     /** What stands at its foot: the drawer's rail, laid flat. */

package/dist/Column.js

@@ -12,21 +12,24 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // that moved last, each one press from its page, and Notifications in Settings.
 // The search opens the palette (Palette.tsx; ⌘K / Ctrl+K from anywhere).
 //
-// Dev's places are @hanzo/build's `nav`, the one list every rail draws, each a
-// row under a quiet group label.
+// Dev's places are @hanzo/build's `own`: New run, Projects, Issues, Templates.
+// A place the rail holds (Library, Scheduled tasks, Customize) and Settings
+// each take the sidebar instead (Rail.tsx `spot`): Back, the place's name, and
+// its own rows (Settings' sections, Customize's tabs), never Dev's beside them.
 //
 // Its width is the edge's in the gutter to its right: dragged, keyed or
 // double-clicked back (@hanzo/build's `Grip`), kept per browser. Pulled in past
 // its floor it shuts (`onShut`), as the sidebar's toggle shuts it.
 import { Text, XStack, YStack } from '@hanzo/gui';
-import { Bell, Search, Settings2, SquarePen } from 'lucide-react';
-import { DOTS, Grip, nav, NEW, path as written, useSessions } from '@hanzo/build';
+import { ArrowLeft, Bell, Search, Settings2, SquarePen } from 'lucide-react';
+import { DOTS, Gutter, NEW, own, path as written, sections, tabs, useSessions } from '@hanzo/build';
 import { tidy } from './lib/title.js';
 import { DropdownMenu } from '@hanzo/ui';
 import { Sidebar, SidebarIconButton, SidebarItem, StatusDot } from '@hanzo/ui/chat';
 import { useId } from 'react';
 import { Made } from './Me.js';
 import { Recents } from './Recents.js';
+import { spot } from './Rail.js';
 import { Setup } from './Setup.js';
 import { ago } from './recent.js';
 import { empty } from './open.js';
@@ -34,9 +37,6 @@ import { useSpan } from './span.js';
 import { pane } from './ground.js';
 import { talk } from './lib/host.js';
 import { brand, wordmark } from './where.js';
-/** The grip stands in the gutter between the sidebar and the panel. gui carries a `calc()` to the page unchanged; its
- *  types only name custom properties. */
-const GUTTER_END = 'calc(-1 * var(--pane-gap))';
 /** The sidebar fills the column. Its `width` is typed in px alone, though its frame takes any gui size — the type is
  *  @hanzo/ui's to widen. */
 const FILL = { width: '100%' };
@@ -69,6 +69,8 @@ const keys = (press) => ({
 const ROW = { rounded: '$4', minH: 31, py: 0, px: '$2' };
 /** The run activity behind the bell: the runs that moved last, newest first. */
 const RECENT = 6;
+/** What a place that takes the sidebar is called at its head. */
+const TITLE = { library: 'Library', scheduled: 'Scheduled tasks', customize: 'Customize', settings: 'Settings' };
 /** A header mark: a 16px glyph in a 32px target. */
 const HEAD = { width: 32, height: 32, rounded: '$3' };
 function Activity({ host }) {
@@ -90,12 +92,13 @@ 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, onSeek, drawer = false, foot, places, }) {
+export function Column({ host, mode, thread, go, onShut, onSeek, onBack, drawer = false, foot, places, }) {
     // The desktop sidebar and a phone's drawer can both be in the page: each names its own group labels.
     const uid = useId();
     const span = useSpan(SPAN, WIDTH, FLOOR, CEIL);
     const dev = (p) => host.go(p);
-    const groups = places ?? nav(host, dev);
+    const at = mode === 'dev' ? spot(host.path) : null;
+    const groups = places ?? (at === 'settings' ? sections(host, dev) : at === 'customize' ? tabs(host, dev) : at ? [] : own(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 = () => {
@@ -104,7 +107,5 @@ export function Column({ host, mode, thread, go, onShut, onSeek, drawer = false,
     };
     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: "Search", onPress: onSeek, "aria-haspopup": "dialog", ...HEAD, children: _jsx(Search, { size: 16, "aria-hidden": true }) })] }), 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, 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)" }))] }));
+        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: [at ? (_jsxs(XStack, { "data-slot": "app-head", items: "center", gap: "$1", pl: 2, pr: 2, height: 52, shrink: 0, minW: 0, children: [_jsx(SidebarIconButton, { label: "Back", "data-slot": "place-back", onPress: onBack, ...HEAD, children: _jsx(ArrowLeft, { size: 16, "aria-hidden": true }) }), _jsx(Text, { flex: 1, minW: 0, fontSize: 18, lineHeight: 24, fontWeight: "600", color: "$ink", numberOfLines: 1, "data-slot": "place-name", children: TITLE[at] })] })) : (_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: "Search", onPress: onSeek, "aria-haspopup": "dialog", ...HEAD, children: _jsx(Search, { size: 16, "aria-hidden": true }) })] })), 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 && g.label ? (_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 && g.label ? `${uid}-${g.id}` : undefined, "aria-label": i && g.label ? undefined : g.label || (at ? TITLE[at] : g.id), 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' || at ? null : _jsx(Recents, { host: host, mode: mode, thread: thread, onOpen: open, onNew: create }), at ? null : (_jsxs(YStack, { gap: "$2", pt: "$2", shrink: 0, children: [_jsx(Made, {}), _jsx(Setup, {})] })), foot] }), drawer ? null : (_jsx(Gutter, { side: "left", span: span.span, floor: FLOOR, ceil: CEIL, reset: WIDTH, onSpan: span.move, onKeep: span.keep, onShut: onShut, label: "Resize sidebar" }))] }));
 }

package/dist/Me.js

@@ -39,6 +39,7 @@ import { list } from './lib/list.js';
 import { choose, org as current, orgs, pick, renew, scope, superAdmin } from './lib/session.js';
 import { ENTRY } from './lib/host.js';
 import { leave } from './dev.js';
+import { payUrl } from './lib/pay.js';
 import { asked, KEYS, legal, out, pages } from './help.js';
 import { showSettings } from './open.js';
 import { site, where } from './where.js';
@@ -146,9 +147,20 @@ export function Me({ host, narrow = false, above = false, onOrg, }) {
     const target = useMemo(() => ({ api: host.api, token: host.token, org: host.org }), [host.api, host.token, host.org]);
     const read = useStanding(target, open);
     const other = usePlan(personal && personal.name !== current ? personal.name : null, open);
+    // THE TWO ACCOUNTS, apart: the organization's plan (hanzo · Enterprise) and the
+    // person's own (Personal · Pro, or none and the way to one). A business plan is
+    // the organization's; a personal plan is held beside it, never instead of it.
+    const team = here && !here.personal ? here : (all.find((o) => !o.personal) ?? null);
+    const teamOther = usePlan(team && team.name !== current ? team.name : null, open);
     const planFor = (o) => (o.name === current ? spoken(read.value?.label ?? null) : o.personal ? other : '');
     const who = host.person?.name || host.person?.email || '';
     const plan = spoken(read.value?.label ?? null);
+    const teamPlan = team ? (team.name === current ? plan : teamOther) : '';
+    const ownPlan = personal ? (personal.name === current ? plan : other) : '';
+    // Where the reader works, and on what: "hanzo · Enterprise", "Personal · Pro".
+    const working = [here ? (here.personal ? 'Personal' : here.display) : current, plan].filter(Boolean).join(' · ');
+    // A personal plan is bought for the personal organization, beside any business one.
+    const getPro = () => personal && window.location.assign(payUrl('/cart', { plan: 'pro', org: personal.name, returnUrl: window.location.href }));
     const apple = mac();
     useEffect(() => {
         if (above)
@@ -180,9 +192,11 @@ export function Me({ host, narrow = false, above = false, onOrg, }) {
                         return;
                     setAccount(false);
                     setHelp(false);
-                }, placement: narrow && !above ? 'right-end' : above ? 'top-end' : 'top-start', children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(XStack, { ref: (el) => {
+                }, placement: narrow && !above ? 'right-end' : above ? 'top-end' : 'top-start', 
+                // Clear of the rail's mark (or the row) it opens from, and flush with its foot.
+                offset: 8, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(XStack, { ref: (el) => {
                                 row.current = el instanceof HTMLElement ? el : null;
-                            }, render: "button", "data-slot": "me", "aria-label": `Account: ${[who, current].filter(Boolean).join(' · ')}`, ...{ title: who }, width: narrow ? 36 : '100%', minH: narrow ? 36 : 48, px: narrow ? 0 : '$2', gap: "$2.5", rounded: narrow ? 999 : '$5', items: "center", justify: narrow ? 'center' : 'flex-start', hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, cursor: "pointer", children: [_jsx(Face, { host: host, size: narrow ? 26 : 32 }), narrow ? null : (_jsxs(_Fragment, { children: [_jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$3", fontWeight: "600", color: "$ink", numberOfLines: 1, text: "left", children: who }), plan ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, text: "left", children: plan })) : null] }), _jsx(ChevronsUpDown, { size: 14, "aria-hidden": true, opacity: 0.6 })] }))] }) }), _jsxs(DropdownMenuContent, { minW: 260, maxW: "calc(100vw - 16px)", "aria-labelledby": undefined, "aria-label": "Account", onCloseAutoFocus: back, children: [_jsxs(DropdownMenuSub, { open: account, onOpenChange: setAccount, children: [_jsxs(DropdownMenuSubTrigger, { minH: 48, gap: "$2.5", children: [_jsx(Face, { host: host, size: 28 }), _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$2", fontWeight: "600", color: "$ink", numberOfLines: 1, children: who }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: plan || host.person.email || '' })] })] }), account ? (_jsxs(DropdownMenuSubContent, { minW: 260, maxW: "calc(100vw - 16px)", pointerEvents: "auto", children: [_jsx(Meter, { read: read, onPlans: () => leave('here'), onBilling: () => (setOpen(false), showSettings('billing')) }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: "Organizations" }), all.map((o) => (_jsx(DropdownMenuItem, { onSelect: () => o.name !== current && onOrg(o.name), children: _jsx(Line, { icon: _jsx(Mark, { org: o }), sub: [o.personal ? 'Personal' : said(o.role), planFor(o)].filter(Boolean).join(' · '), trail: o.name === current ? _jsx(Check, { size: 16, "aria-label": "Current" }) : null, children: o.display }) }, o.name))), _jsx(DropdownMenuItem, { onSelect: () => setCreating(true), children: _jsx(Line, { icon: _jsx(Plus, { size: 16, "aria-hidden": true }), children: "Create organization" }) }), _jsx(DropdownMenuItem, { onSelect: () => window.location.assign(site(ORG_SETTINGS)), children: _jsx(Line, { icon: _jsx(Settings, { size: 16, "aria-hidden": true }), children: "Organization settings" }) }), where().team ? null : here && !here.personal ? (_jsx(DropdownMenuItem, { onSelect: () => out(`${ENTRY}&org=${encodeURIComponent(here.name)}`), children: _jsx(Line, { icon: _jsx(Users, { size: 16, "aria-hidden": true }), trail: _jsx(ArrowUpRight, { size: 14, "aria-hidden": true, opacity: 0.6 }), children: "Open in Hanzo Team" }) })) : (_jsx(DropdownMenuItem, { onSelect: () => setCreating(true), children: _jsx(Line, { icon: _jsx(Users, { size: 16, "aria-hidden": true }), children: "Create a team" }) })), superAdmin() ? (_jsx(DropdownMenuItem, { onSelect: choose, children: _jsx(Line, { icon: _jsx(Building2, { size: 16, "aria-hidden": true }), children: "All organizations" }) })) : null] })) : null] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { onSelect: () => leave('here'), children: _jsx(Line, { icon: _jsx(Sparkles, { size: 16, "aria-hidden": true }), children: upgrade(read.value?.label?.name) }) }), _jsx(DropdownMenuItem, { onSelect: () => showSettings('general'), children: _jsx(Line, { icon: _jsx(Palette, { size: 16, "aria-hidden": true }), children: "Personalization" }) }), _jsx(DropdownMenuItem, { onSelect: () => showSettings('account'), children: _jsx(Line, { icon: _jsx(CircleUserRound, { size: 16, "aria-hidden": true }), children: "Profile" }) }), _jsx(DropdownMenuItem, { "aria-keyshortcuts": "Control+, Meta+,", onSelect: () => showSettings('general'), children: _jsx(Line, { icon: _jsx(Settings, { size: 16, "aria-hidden": true }), trail: _jsx(DropdownMenuShortcut, { "aria-hidden": true, children: apple ? '⌘,' : 'Ctrl+,' }), children: "Settings" }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuSub, { open: help, onOpenChange: setHelp, children: [_jsx(DropdownMenuSubTrigger, { children: _jsx(Line, { icon: _jsx(LifeBuoy, { size: 16, "aria-hidden": true }), children: "Help" }) }), help ? (_jsxs(DropdownMenuSubContent, { minW: 240, maxW: "calc(100vw - 16px)", pointerEvents: "auto", children: [pages().map((p) => (_jsx(DropdownMenuItem, { onSelect: () => out(p.href), children: _jsx(Line, { icon: ICONS[p.key], trail: p.key === 'help' ? _jsx(ArrowUpRight, { size: 14, "aria-hidden": true, opacity: 0.6 }) : null, children: p.label }) }, p.key))), _jsx(DropdownMenuItem, { "aria-keyshortcuts": "Control+/ Meta+/", onSelect: () => setKeys(true), children: _jsx(Line, { icon: _jsx(Keyboard, { size: 16, "aria-hidden": true }), trail: _jsx(DropdownMenuShortcut, { "aria-hidden": true, children: apple ? '⌘/' : 'Ctrl+/' }), children: "Keyboard shortcuts" }) }), _jsx(DropdownMenuSeparator, {}), legal().map((p) => (_jsx(DropdownMenuItem, { onSelect: () => out(p.href), children: _jsx(Line, { icon: ICONS[p.key], children: p.label }) }, p.key)))] })) : null] }), host.signOut ? (_jsx(DropdownMenuItem, { onSelect: () => host.signOut?.(), children: _jsx(Line, { icon: _jsx(LogOut, { size: 16, "aria-hidden": true }), children: "Log out" }) })) : null] })] }), _jsx(Create, { open: creating, onOpenChange: setCreating }), _jsx(Shortcuts, { open: keys, onOpenChange: setKeys, apple: apple })] }));
+                            }, render: "button", "data-slot": "me", "aria-label": `Account: ${[who, current].filter(Boolean).join(' · ')}`, ...{ title: who }, width: narrow ? 36 : '100%', minH: narrow ? 36 : 48, px: narrow ? 0 : '$2', gap: "$2.5", rounded: narrow ? 999 : '$5', items: "center", justify: narrow ? 'center' : 'flex-start', hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, cursor: "pointer", children: [_jsx(Face, { host: host, size: narrow ? 26 : 32 }), narrow ? null : (_jsxs(_Fragment, { children: [_jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$3", fontWeight: "600", color: "$ink", numberOfLines: 1, text: "left", children: who }), working ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, text: "left", children: working })) : null] }), _jsx(ChevronsUpDown, { size: 14, "aria-hidden": true, opacity: 0.6 })] }))] }) }), _jsxs(DropdownMenuContent, { minW: 260, maxW: "calc(100vw - 16px)", "aria-labelledby": undefined, "aria-label": "Account", onCloseAutoFocus: back, children: [_jsxs(DropdownMenuSub, { open: account, onOpenChange: setAccount, children: [_jsxs(DropdownMenuSubTrigger, { minH: 48, gap: "$2.5", children: [_jsx(Face, { host: host, size: 28 }), _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$2", fontWeight: "600", color: "$ink", numberOfLines: 1, children: who }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: host.person.email || working })] })] }), account ? (_jsxs(DropdownMenuSubContent, { minW: 260, maxW: "calc(100vw - 16px)", pointerEvents: "auto", children: [_jsx(Meter, { read: read, onPlans: () => leave('here'), onBilling: () => (setOpen(false), showSettings('billing')) }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: "Organizations" }), all.map((o) => (_jsx(DropdownMenuItem, { onSelect: () => o.name !== current && onOrg(o.name), children: _jsx(Line, { icon: _jsx(Mark, { org: o }), sub: [o.personal ? 'Personal' : said(o.role), planFor(o)].filter(Boolean).join(' · '), trail: o.name === current ? _jsx(Check, { size: 16, "aria-label": "Current" }) : null, children: o.display }) }, o.name))), _jsx(DropdownMenuItem, { onSelect: () => setCreating(true), children: _jsx(Line, { icon: _jsx(Plus, { size: 16, "aria-hidden": true }), children: "Create organization" }) }), _jsx(DropdownMenuItem, { onSelect: () => window.location.assign(site(ORG_SETTINGS)), children: _jsx(Line, { icon: _jsx(Settings, { size: 16, "aria-hidden": true }), children: "Organization settings" }) }), where().team ? null : here && !here.personal ? (_jsx(DropdownMenuItem, { onSelect: () => out(`${ENTRY}&org=${encodeURIComponent(here.name)}`), children: _jsx(Line, { icon: _jsx(Users, { size: 16, "aria-hidden": true }), trail: _jsx(ArrowUpRight, { size: 14, "aria-hidden": true, opacity: 0.6 }), children: "Open in Hanzo Team" }) })) : (_jsx(DropdownMenuItem, { onSelect: () => setCreating(true), children: _jsx(Line, { icon: _jsx(Users, { size: 16, "aria-hidden": true }), children: "Create a team" }) })), superAdmin() ? (_jsx(DropdownMenuItem, { onSelect: choose, children: _jsx(Line, { icon: _jsx(Building2, { size: 16, "aria-hidden": true }), children: "All organizations" }) })) : null] })) : null] }), team ? (_jsx(DropdownMenuItem, { "data-slot": "me-team", onSelect: () => team.name !== current && onOrg(team.name), children: _jsx(Line, { icon: _jsx(Mark, { org: team }), trail: team.name === current ? _jsx(Check, { size: 16, "aria-label": "Current" }) : null, children: `${team.display} · ${teamPlan || 'No plan'}` }) })) : null, personal ? (_jsx(DropdownMenuItem, { "data-slot": "me-personal", onSelect: () => personal.name !== current && onOrg(personal.name), actionsVisibility: "always", actions: ownPlan ? undefined : (_jsx(Button, { size: "xs", variant: "outline", onPress: getPro, children: "Get Pro" })), children: _jsx(Line, { icon: _jsx(CircleUserRound, { size: 16, "aria-hidden": true }), trail: personal.name === current ? _jsx(Check, { size: 16, "aria-label": "Current" }) : null, children: `Personal · ${ownPlan || 'No plan'}` }) })) : null, _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { onSelect: () => leave('here'), children: _jsx(Line, { icon: _jsx(Sparkles, { size: 16, "aria-hidden": true }), children: upgrade(read.value?.label?.name) }) }), _jsx(DropdownMenuItem, { onSelect: () => showSettings('general'), children: _jsx(Line, { icon: _jsx(Palette, { size: 16, "aria-hidden": true }), children: "Personalization" }) }), _jsx(DropdownMenuItem, { onSelect: () => showSettings('account'), children: _jsx(Line, { icon: _jsx(CircleUserRound, { size: 16, "aria-hidden": true }), children: "Profile" }) }), _jsx(DropdownMenuItem, { "aria-keyshortcuts": "Control+, Meta+,", onSelect: () => showSettings('general'), children: _jsx(Line, { icon: _jsx(Settings, { size: 16, "aria-hidden": true }), trail: _jsx(DropdownMenuShortcut, { "aria-hidden": true, children: apple ? '⌘,' : 'Ctrl+,' }), children: "Settings" }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuSub, { open: help, onOpenChange: setHelp, children: [_jsx(DropdownMenuSubTrigger, { children: _jsx(Line, { icon: _jsx(LifeBuoy, { size: 16, "aria-hidden": true }), children: "Help" }) }), help ? (_jsxs(DropdownMenuSubContent, { minW: 240, maxW: "calc(100vw - 16px)", pointerEvents: "auto", children: [pages().map((p) => (_jsx(DropdownMenuItem, { onSelect: () => out(p.href), children: _jsx(Line, { icon: ICONS[p.key], trail: p.key === 'help' ? _jsx(ArrowUpRight, { size: 14, "aria-hidden": true, opacity: 0.6 }) : null, children: p.label }) }, p.key))), _jsx(DropdownMenuItem, { "aria-keyshortcuts": "Control+/ Meta+/", onSelect: () => setKeys(true), children: _jsx(Line, { icon: _jsx(Keyboard, { size: 16, "aria-hidden": true }), trail: _jsx(DropdownMenuShortcut, { "aria-hidden": true, children: apple ? '⌘/' : 'Ctrl+/' }), children: "Keyboard shortcuts" }) }), _jsx(DropdownMenuSeparator, {}), legal().map((p) => (_jsx(DropdownMenuItem, { onSelect: () => out(p.href), children: _jsx(Line, { icon: ICONS[p.key], children: p.label }) }, p.key)))] })) : null] }), host.signOut ? (_jsx(DropdownMenuItem, { onSelect: () => host.signOut?.(), children: _jsx(Line, { icon: _jsx(LogOut, { size: 16, "aria-hidden": true }), children: "Log out" }) })) : null] })] }), _jsx(Create, { open: creating, onOpenChange: setCreating }), _jsx(Shortcuts, { open: keys, onOpenChange: setKeys, apple: apple })] }));
 }
 /** The app's keys (help.ts `KEYS`), one row each, spelled for this platform. */
 function Shortcuts({ open, onOpenChange, apple }) {

package/dist/Rail.d.ts

@@ -3,6 +3,19 @@ import { type Host } from '@hanzo/build';
 import { type Place } from './lib/host.js';
 /** The rail's width, px. */
 export declare const RAIL = 48;
+/** The places the rail holds beside the products, by the builder address each opens. */
+export declare const RAISED: {
+    readonly library: '-/artifacts';
+    readonly scheduled: '-/automations';
+    readonly customize: '-/customize';
+};
+export type Raised = keyof typeof RAISED;
+/** A place that takes the sidebar: one of the rail's, or Settings (the account menu's). */
+export type Spot = Raised | 'settings';
+/** The place a builder address stands on, if it is one that takes the sidebar. */
+export declare const spot: (at: string | null) => Spot | null;
+/** Which of them a builder address stands on, if any: an agent's page is Customize's, an automation Scheduled tasks'. */
+export declare function raised(at: string | null): Raised | null;
 /** One mark: an icon button named for where it goes, its name its tooltip, lit where the reader is. */
 export declare function Mark({ label, on, onPress, children, ...rest }: {
     label: string;
@@ -18,9 +31,11 @@ export declare function Toggle({ open, onPress, label }: {
     onPress: () => void;
     label?: string;
 }): import("react").JSX.Element;
-export declare function Rail({ host, mode, open, toggle, flat, onChat, onDev, onStudio, onOrg, }: {
+export declare function Rail({ host, mode, at, open, toggle, flat, onChat, onDev, onStudio, go, onOrg, }: {
     host: Host;
     mode: Place['mode'];
+    /** Dev's builder address, or null outside Dev. */
+    at: string | null;
     /** The sidebar beside the rail is open. */
     open: boolean;
     /** Lead with the sidebar's toggle; absent where the host's bar holds it. */
@@ -31,6 +46,8 @@ export declare function Rail({ host, mode, open, toggle, flat, onChat, onDev, on
     onChat: () => void;
     onDev: () => void;
     onStudio: () => void;
+    /** Moves the app to an address of this page. */
+    go: (address: string) => void;
     /** Work in another organization. */
     onOrg: (org: string) => void;
 }): import("react").JSX.Element;

package/dist/Rail.js

@@ -1,19 +1,20 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The app's rail: its products as marks down the window's left edge, in one
-// order — Chat, Dev, Studio — then More, a menu of the products on hosts of
-// their own, and the account at the foot. It is how the app moves between its
-// products; a phone, which has no rail, switches Chat and Dev in its bar
-// (Top.tsx).
+// order — Chat, Dev, Studio, Library, Scheduled tasks, Customize — then More, a
+// menu of the products on hosts of their own, and the account at the foot. It
+// is how the app moves between its products; a phone, which has no rail,
+// switches Chat and Dev in its bar (Top.tsx).
 //
 // Studio is the app's third mode (@hanzo/studio at /studio), each of the three
 // opened where the reader left it.
 //
-// A mark is a product, and a product owns the sidebar beside the rail: Chat its
-// conversations, Dev its places (@hanzo/build's New, Projects, Issues, Library,
-// Templates, Scheduled tasks, Machines, Environments, Customize, Docs) and its
-// runs, Studio its own. Nothing of Dev's is raised to the rail, and nothing of
-// the rail's is listed inside Dev: one level of the app a place.
+// A mark is a place, and a place owns the sidebar beside the rail: Chat its
+// conversations, Dev its own places (@hanzo/build `own`: New run, Projects,
+// Issues, Templates) and its runs, Studio its own; Library, Scheduled tasks and
+// Customize (@hanzo/build's Artifacts, Automations and Customize) each their
+// own, and Settings its sections (Column.tsx). Nothing on the rail is listed
+// inside Dev: one level of the app a place, each lit while the reader is on it.
 //
 // It stands on the frame's floor, never cut as a pane (ground.ts): the rail and
 // the sidebar beside it are the window, and the content is the panel inset in
@@ -22,17 +23,37 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The sidebar's toggle leads it (`toggle`) where the host has no bar of its own:
 // a browser tab. A host that is a window draws the toggle in its bar beside Back
 // and Forward (App.tsx `bar`), and its rail starts with Chat. On a phone the
-// rail lies along the foot of the drawer (`flat`), the account at its end.
-import { Code2, Ellipsis, MessageSquare, PanelLeft, SquareTerminal, Users, WandSparkles } from 'lucide-react';
+// rail lies along the foot of the drawer (`flat`), the account at its end; the
+// drawer is too narrow for every mark, so Library, Scheduled tasks and
+// Customize lead More there.
+import { Clock, Code2, Ellipsis, Library, MessageSquare, PanelLeft, Puzzle, SquareTerminal, Users, WandSparkles } from 'lucide-react';
 import { XStack, YStack } from '@hanzo/gui';
+import { route } from '@hanzo/build';
 import { DropdownMenu } from '@hanzo/ui';
 import { out } from './help.js';
 import { Me } from './Me.js';
-import { TABS, WORKSPACE } from './lib/host.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. */
 const MARK = 36;
+/** The places the rail holds beside the products, by the builder address each opens. */
+export const RAISED = { library: '-/artifacts', scheduled: '-/automations', customize: '-/customize' };
+/** The place a builder address stands on, if it is one that takes the sidebar. */
+export const spot = (at) => (at !== null && route(at).kind === 'settings' ? 'settings' : raised(at));
+/** Which of them a builder address stands on, if any: an agent's page is Customize's, an automation Scheduled tasks'. */
+export function raised(at) {
+    if (at === null)
+        return null;
+    const r = route(at);
+    if (r.kind === 'screen' && r.screen === 'artifacts')
+        return 'library';
+    if ((r.kind === 'screen' && r.screen === 'automations') || r.kind === 'automation')
+        return 'scheduled';
+    if (r.kind === 'customize' || r.kind === 'agent' || (r.kind === 'screen' && r.screen === 'mcp'))
+        return 'customize';
+    return null;
+}
 /** One mark: an icon button named for where it goes, its name its tooltip, lit where the reader is. */
 export function Mark({ label, on = false, onPress, children, ...rest }) {
     return (_jsx(XStack, { render: "button", "aria-label": label, ...{ title: label }, "aria-current": on ? 'page' : undefined, onPress: onPress, width: MARK, height: MARK, rounded: "$4", items: "center", justify: "center", shrink: 0, cursor: "pointer", opacity: on ? 1 : 0.62, bg: on ? '$edge' : 'transparent', hoverStyle: { bg: on ? '$edge' : '$hover', opacity: 1 }, pressStyle: { bg: '$raised' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, 
@@ -43,12 +64,22 @@ 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, open, toggle, flat = false, onChat, onDev, onStudio, onOrg, }) {
-    // The products on hosts of their own, behind More.
+export function Rail({ host, mode, at, open, toggle, flat = false, onChat, onDev, onStudio, go, onOrg, }) {
+    const here = mode === 'dev' ? spot(at) : null;
+    const to = (p) => () => go(app(p));
+    // The products on hosts of their own, behind More; on a phone the raised places lead it.
     const rest = [
+        ...(flat
+            ? [
+                { key: 'library', label: 'Library', icon: _jsx(Library, { size: 16, "aria-hidden": true }), onSelect: to(RAISED.library) },
+                { key: 'scheduled', label: 'Scheduled tasks', icon: _jsx(Clock, { size: 16, "aria-hidden": true }), onSelect: to(RAISED.scheduled) },
+                { key: 'customize', label: 'Customize', icon: _jsx(Puzzle, { size: 16, "aria-hidden": true }), onSelect: to(RAISED.customize) },
+                { type: 'separator', key: 'raised' },
+            ]
+            : []),
         { key: 'tabs', label: 'Tabs', icon: _jsx(SquareTerminal, { size: 16, "aria-hidden": true }), onSelect: () => out(TABS) },
         { 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', 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 }) }), _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/Shell.js

@@ -27,8 +27,7 @@ import { Box, Shortcut, XStack, YStack, Text } from "@hanzo/ui";
 import { scrim, sheet } from "@hanzo/ui/glass";
 import { Sidebar, SidebarIconButton, SidebarNewChat, SidebarScroll, SidebarSection, SidebarItem, SidebarFolder, } from "@hanzo/ui/chat";
 import { OrgProjectSwitcher, useIam, useOrganizations, } from "@hanzo/iam/react";
-import { SideProvider, useSplit } from "@hanzo/build";
-import { Grip } from "@hanzo/ui";
+import { Gutter, SideProvider, useSplit } from "@hanzo/build";
 import { HanzoMark, } from "@hanzogui/shell";
 import { useHydrated } from "./lib/hydrated.js";
 import { useHost } from "./lib/hostname.js";
@@ -58,12 +57,8 @@ const FIELD = {
     color: "inherit",
     fontSize: "$2",
 };
-/** The side column's grip stands in the gutter the frame leaves, or 8px where there is none; the rail clears the
- *  home indicator on a phone. gui carries a `calc()`, `max()` or `env()` to the page unchanged; its types only name
+/** The rail clears the home indicator on a phone. gui carries an `env()` to the page unchanged; its types only name
  *  custom properties. */
-const GUTTER_START = "calc(-1 * var(--pane-gap, 0px))";
-const GUTTER = "max(8px, var(--pane-gap, 8px))";
-const TOUCH_START = "calc(-22px - var(--pane-gap, 0px) / 2)";
 const HOME_INDICATOR = "env(safe-area-inset-bottom)";
 import { invite } from "./lib/home.js";
 import { reach } from "./lib/reach.js";
@@ -910,13 +905,7 @@ export function Paned({ children, swap, framed = false, bare = false, }) {
                 // In the frame the gutter stands between the pane and this column.
                 ml: framed ? "var(--pane-gap)" : undefined, ref: split.aside, 
                 // inline-style: the width a drag rewrites on the element itself, and full screen (useSplit).
-                style: split.asideStyle, position: "relative", shrink: 0, minH: 0, display: "none", $lg: { display: "flex" }, children: [split.grip ? (_jsx(Grip, { ...split.grip, label: "Resize side panel", bar: "inline", 
-                        // The handle halfway down the edge, where a hand looks for it.
-                        justify: "center", 
-                        // In the gutter the frame leaves between the panes; a room has none.
-                        l: GUTTER_START, width: GUTTER, 
-                        // A finger's band, centred on the gutter.
-                        $touchable: { l: TOUCH_START, width: 44 } })) : null, _jsx(YStack, { flex: 1, minH: 0, overflowY: "auto", overflowX: "hidden", rounded: "var(--pane-round)", ref: (el) => setSlot(el instanceof HTMLElement ? el : null) })] })) : null] }));
+                style: split.asideStyle, position: "relative", shrink: 0, minH: 0, display: "none", $lg: { display: "flex" }, children: [split.grip ? (_jsx(Gutter, { ...split.grip, label: "Resize side panel", inset: 1 })) : null, _jsx(YStack, { flex: 1, minH: 0, overflowY: "auto", overflowX: "hidden", rounded: "var(--pane-round)", ref: (el) => setSlot(el instanceof HTMLElement ? el : null) })] })) : null] }));
 }
 /**
  * THE RAIL: where you can go, as marks with their names under them. It is the
@@ -1229,7 +1218,7 @@ function Frame({ mode, children, navigate, back, forward, }) {
     const list = (_jsxs(Sidebar, { ref: side.ref, 
         // A phone's sheet is never wider than 280, whatever the laptop kept.
         // inline-style: `--span`, the width a drag rewrites on the element itself (span.ts); no prop sets a variable.
-        style: side.style, $md: { width: "var(--span)" }, "$max-md": { width: "100%", maxW: 280 }, ...sheet(0), borderRightWidth: 1, borderColor: "var(--edge, var(--white-06))", position: "relative", children: [_jsx(Grip, { side: "left", span: side.span, floor: FLOOR, ceil: CEIL, reset: SIDEBAR_WIDTH, onSpan: side.move, onKeep: side.keep, onShut: () => setAsked(false), label: "Resize sidebar" }), _jsx(XStack, { "data-slot": "mode-name", items: "center", px: "$2", pt: "$2", minW: 0, children: _jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", numberOfLines: 1, children: wordmark(mode === "dev" ? "dev" : "chat") }) }), _jsxs(XStack, { "data-slot": "workspace-switcher", items: "center", gap: "$2", px: "$2", pt: "$1", pb: "$1", minW: 0, children: [_jsx(Text, { render: _jsx("a", { href: "/", onClick: (e) => {
+        style: side.style, $md: { width: "var(--span)" }, "$max-md": { width: "100%", maxW: 280 }, ...sheet(0), borderRightWidth: 1, borderColor: "var(--edge, var(--white-06))", position: "relative", children: [_jsx(Gutter, { side: "left", span: side.span, floor: FLOOR, ceil: CEIL, reset: SIDEBAR_WIDTH, onSpan: side.move, onKeep: side.keep, onShut: () => setAsked(false), label: "Resize sidebar" }), _jsx(XStack, { "data-slot": "mode-name", items: "center", px: "$2", pt: "$2", minW: 0, children: _jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", numberOfLines: 1, children: wordmark(mode === "dev" ? "dev" : "chat") }) }), _jsxs(XStack, { "data-slot": "workspace-switcher", items: "center", gap: "$2", px: "$2", pt: "$1", pb: "$1", minW: 0, children: [_jsx(Text, { render: _jsx("a", { href: "/", onClick: (e) => {
                                 if (!navigate || e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0)
                                     return;
                                 e.preventDefault();

package/dist/agents.d.ts

@@ -1,3 +1,4 @@
+import type { Host } from '@hanzo/build';
 export type { Link, Shelf, ShelfRow as Row } from '@hanzo/build';
 /**
  * The model that draws an agent's face: Hanzo's own image SKU (hanzo-inc/zen
@@ -7,22 +8,20 @@ export type { Link, Shelf, ShelfRow as Row } from '@hanzo/build';
 export declare const PAINTER = "zen-image";
 /** The words every drawn face is asked for after its description. */
 export declare const MEMOJI = "memoji style 3D emoji portrait, head and shoulders, centered, plain background";
-/** A core member, drawn for an org that keeps no row of its own for them. */
-export interface House {
-    id: string;
-    name: string;
-    avatar: string;
-}
-/** The default cast: the core team @hanzo/personas publishes, in the crew's order. */
-export declare const CORE: readonly House[];
 /**
- * The org's agents with the default cast filling in any member the org keeps no
- * row for, the cast first in its own order, then the rest as listed. With no
- * list yet (or none at all) it is the default cast.
+ * The default agents an org adds in one press (Customize › Agents, @hanzo/build
+ * `hire`): the core team, each as its persona writes it, then QA, Ops and
+ * Support. An org starts with none of them and loads none until it adds them.
+ */
+export declare const CAST: NonNullable<Host['cast']>;
+/**
+ * The org's own agents, the core team's first in the crew's order, then the
+ * rest as listed. Nothing stands in for a member the org has not added: an org
+ * with no agents has none to show.
  */
 export declare function ordered<T extends {
     name: string;
-}>(agents: readonly T[] | null | undefined): (T | House)[];
+}>(agents: readonly T[] | null | undefined): T[];
 /**
  * One figure of @hanzo/personas' roster, as assets/personas/index.json lists it
  * (scripts/team.mjs). `called`, `about` and `based` are its PERSONA.md's

package/dist/agents.js

@@ -10,20 +10,25 @@ import { TEAM } from './team.js';
 export const PAINTER = 'zen-image';
 /** The words every drawn face is asked for after its description. */
 export const MEMOJI = 'memoji style 3D emoji portrait, head and shoulders, centered, plain background';
-/** The default cast: the core team @hanzo/personas publishes, in the crew's order. */
-export const CORE = TEAM.map((one) => ({ id: `house-${one.id}`, name: one.name, avatar: `/agents/${one.id}.png` }));
+/**
+ * The default agents an org adds in one press (Customize › Agents, @hanzo/build
+ * `hire`): the core team, each as its persona writes it, then QA, Ops and
+ * Support. An org starts with none of them and loads none until it adds them.
+ */
+export const CAST = [
+    ...TEAM.map((one) => ({ name: one.id, description: `${one.name} — ${one.role}`, model: one.model, instructions: one.instructions, avatar: `/agents/${one.id}.png` })),
+    { name: 'qa', description: 'QA — Automated Testing & Verification', model: 'enso-auto', instructions: '' },
+    { name: 'ops', description: 'Ops — Site Reliability & Cloud Infrastructure', model: 'enso-auto', instructions: '' },
+    { name: 'support', description: 'Support — Customer Support & Triage Specialist', model: 'enso-auto', instructions: '' },
+];
 const RANK = new Map(TEAM.map((one, i) => [one.id, i]));
 /**
- * The org's agents with the default cast filling in any member the org keeps no
- * row for, the cast first in its own order, then the rest as listed. With no
- * list yet (or none at all) it is the default cast.
+ * The org's own agents, the core team's first in the crew's order, then the
+ * rest as listed. Nothing stands in for a member the org has not added: an org
+ * with no agents has none to show.
  */
 export function ordered(agents) {
     const list = Array.isArray(agents) ? [...agents] : [];
-    const names = new Set(list.map((one) => one.name?.toLowerCase()));
-    for (const one of CORE)
-        if (!names.has(one.name.toLowerCase()))
-            list.push(one);
     const rank = (one) => RANK.get(one.name?.toLowerCase() ?? '') ?? Infinity;
     return list.sort((a, b) => rank(a) - rank(b));
 }

package/dist/crew.js

@@ -115,6 +115,7 @@ export function useAgentShelf() {
         loading,
         error: error ? reach(error) : null,
         search: 'Search agents',
+        empty: 'No agents yet. Add the default team from Manage agents.',
         create: { label: 'Create agent', onPress: () => make('new') },
         // Dev's Customize › Agents: a move inside the app where the host reads the
         // path (hanzo.ai), else Dev on hanzo.ai, as Chat's Create file or site goes.

package/dist/dev.js

@@ -35,6 +35,7 @@ import { administers, path, route } from '@hanzo/build';
 import { bearer, named, org, orgs, pick } from './lib/session.js';
 import { enter } from './lib/destination.js';
 import { api } from './lib/api.js';
+import { CAST } from './agents.js';
 import { app, go, place } from './lib/host.js';
 import { link } from './lib/tags.js';
 import { payUrl } from './lib/pay.js';
@@ -117,6 +118,9 @@ export function useDevHost() {
         path: here,
         go: (to, how) => (isPlans(to) ? leave('here') : go(app(to), how?.replace)),
         links: LINKS,
+        // The sidebar lists Settings' sections and Customize's tabs (Column.tsx), and Customize › Agents offers the cast.
+        sections: true,
+        cast: CAST,
         // An address of the app moves the app, another of this site moves in the
         // router, and another origin is left in this tab. platform.hanzo.ai is
         // another product, and a click that names it stays here — everything the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/rooms",
-  "version": "0.1.84",
+  "version": "0.1.85",
   "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",
@@ -49,7 +49,7 @@
   "peerDependencies": {
     "@hanzo/ai": ">=0.6.23",
     "@hanzo/appearance": ">=0.2.6",
-    "@hanzo/build": ">=0.2.69",
+    "@hanzo/build": ">=0.2.73",
     "@hanzo/composer": ">=0.2.0",
     "@hanzo/event": ">=0.3.56",
     "@hanzo/gui": "^8.3.5",
@@ -67,7 +67,7 @@
   "devDependencies": {
     "@hanzo/ai": "0.6.23",
     "@hanzo/appearance": "0.2.8",
-    "@hanzo/build": "0.2.69",
+    "@hanzo/build": "0.2.73",
     "@hanzo/composer": "0.2.0",
     "@hanzo/design": "0.5.34",
     "@hanzo/event": "0.3.56",