@hanzo/rooms 0.1.82 → 0.1.84

package/dist/App.js

@@ -241,5 +241,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, 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, 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, at: where, open: true, flat: true, onChat: toChat, onDev: toDev, onStudio: toStudio, go: move, onOrg: org }) }) })] })) : null, finding ? _jsx(Palette, { go: move, onClose: found }) : 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, 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] }) }) }) }));
 }

package/dist/Chat.js

@@ -42,6 +42,7 @@ import { AgentMaker, HOUSE, useAgentShelf, useCrew } from "./crew.js";
 import { called } from "./team.js";
 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 { api } from "./lib/api.js";
@@ -540,12 +541,13 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
     const at = channel(opened);
     // The first of them: what a surface that addresses one person reads.
     const withWhom = room[0] ?? null;
-    // THE SIDE PANEL (@hanzo/build `Panel`), the one Dev's runs open too: open or
-    // shut as Chat was left on a laptop, a sheet asked for on a phone, its tabs
-    // kept per conversation. The header's Panel button and ⌘. move it.
+    // THE SIDE PANEL (@hanzo/build `Panel`), the one Dev's runs open too: shut
+    // until the reader opens it or a preview lands (`see`, a link that frames),
+    // kept per conversation with its tabs, so a chat opens as it was left and
+    // never as the last chat was. The header's Panel button and ⌘. move it.
     const media = useMedia();
     const wide = media.lg;
-    const [panel, setPanel] = usePanel("chat", false, wide);
+    const [panel, setPanel] = usePanel(`chat:${at}`, false, wide);
     const deck = useDeck(`chat:${at}`, SEED);
     // The org's sites, which an empty tab suggests.
     const sites = useSites();
@@ -1464,7 +1466,7 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
         }, children: [_jsx(Schedule, { open: plan !== null, onOpenChange: (open) => {
                     if (!open)
                         setPlan(null);
-                }, prompt: plan ?? "", model: model, models: models.map((m) => ({ id: m.id, name: nameOf(m.id, listed) })) }), dragging ? (_jsx(YStack, { "aria-hidden": true, position: "absolute", t: 0, r: 0, b: 0, l: 0, z: 10, items: "center", justify: "center", bg: "var(--surface-scrim)", borderWidth: 2, borderStyle: "dashed", borderColor: "$borderColor", rounded: "var(--pane-round)", pointerEvents: "none", children: _jsxs(XStack, { items: "center", gap: "$2", px: "$4", py: "$2.5", rounded: "$10", bg: "$background", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(Paperclip, { size: 15, "aria-hidden": true }), _jsx(Text, { fontSize: "$4", color: "$ink", children: "Drop files to attach" })] }) })) : null, _jsxs(XStack, { "data-slot": "conversation-head", height: 52, items: "center", justify: "space-between", gap: "$3", pl: "$4", pr: "$2", shrink: 0, children: [_jsxs(XStack, { items: "center", gap: "$2", minW: 0, flex: 1, children: [mine ? (_jsx(Text, { fontSize: 15, lineHeight: 20, color: "$ink", numberOfLines: 1, shrink: 1, minW: 0, children: mine.title || "Untitled" })) : null, room.length ? (_jsx(XStack, { role: "list", "aria-label": "Agents in this chat", items: "center", gap: "$1.5", minW: 0, overflowX: "auto", "$platform-web": { scrollbarWidth: "none" }, children: room.map((name) => (_jsxs(XStack, { role: "listitem", items: "center", gap: "$1.5", pl: "$1", pr: "$0.5", py: "$0.5", rounded: 999, borderWidth: 1, borderColor: "$borderColor", shrink: 0, children: [_jsx(Face, { src: faces[name]?.avatar ?? (name === withWhom ? portrait : undefined), emoji: faces[name]?.emoji ?? (name === withWhom ? persona?.emoji : undefined), name: name, size: 22 }), _jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$color", numberOfLines: 1, display: "none", $sm: { display: "flex" }, children: name }), _jsx(Box, { render: "button", onClick: () => openAgent(name), "aria-label": `Remove ${name} from this chat`, title: `Remove ${name}`, width: 24, height: 24, rounded: 999, items: "center", justify: "center", hoverStyle: { bg: "$hover" }, children: _jsx(X, { size: 13, "aria-hidden": true, color: "var(--soft, var(--muted-foreground))" }) })] }, name))) })) : null] }), _jsxs(XStack, { "data-slot": "conversation-controls", items: "center", gap: 2, shrink: 0, children: [open ? _jsx(Share, { thread: open }) : null, mine ? (_jsx(ConversationMenu, { threads: alone, active: open, onSchedule: anonymous ? undefined : () => setPlan(lastAsked()), children: _jsx(XStack, { children: _jsx(ThreadMore, { t: mine }) }) })) : null, _jsx(Summary, { sections: sections, onOpen: () => setPanel(true) }), _jsx(PanelToggle, { open: panel, onToggle: () => setPanel(!panel) })] })] }), wide && aside !== null ? (_jsx(Beside, { children: _jsx(Panel, { side: deck, kinds: NONE, onHide: () => setPanel(false), label: "Tabs", ...browsing }) })) : null, !wide && panel ? _jsx(Panel, { side: deck, kinds: NONE, sheet: true, onHide: () => setPanel(false), label: "Tabs", ...browsing }) : null, isFree(model) ? (_jsxs(Text, { fontSize: "$2", color: "$soft", text: "center", maxW: MEASURE, mx: "auto", px: "$4", py: "$2", children: [freeCopy.notice, " ", _jsx(Anchor, { href: site("/legal/privacy"), children: freeCopy.noticeCta })] })) : null, _jsx(ChatSurface, { ...chat, messages: shown, send: guarded, 
+                }, prompt: plan ?? "", model: model, models: models.map((m) => ({ id: m.id, name: nameOf(m.id, listed) })) }), dragging ? (_jsx(YStack, { "aria-hidden": true, position: "absolute", t: 0, r: 0, b: 0, l: 0, z: 10, items: "center", justify: "center", bg: "var(--surface-scrim)", borderWidth: 2, borderStyle: "dashed", borderColor: "$borderColor", rounded: "var(--pane-round)", pointerEvents: "none", children: _jsxs(XStack, { items: "center", gap: "$2", px: "$4", py: "$2.5", rounded: "$10", bg: "$background", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(Paperclip, { size: 15, "aria-hidden": true }), _jsx(Text, { fontSize: "$4", color: "$ink", children: "Drop files to attach" })] }) })) : null, _jsxs(XStack, { "data-slot": "conversation-head", height: 52, items: "center", justify: "space-between", gap: "$3", pl: "$4", pr: "$2", shrink: 0, children: [_jsxs(XStack, { items: "center", gap: "$2", minW: 0, flex: 1, children: [mine ? (_jsx(Text, { fontSize: 15, lineHeight: 20, color: "$ink", numberOfLines: 1, shrink: 1, minW: 0, children: tidy(mine.title) })) : null, room.length ? (_jsx(XStack, { role: "list", "aria-label": "Agents in this chat", items: "center", gap: "$1.5", minW: 0, overflowX: "auto", "$platform-web": { scrollbarWidth: "none" }, children: room.map((name) => (_jsxs(XStack, { role: "listitem", items: "center", gap: "$1.5", pl: "$1", pr: "$0.5", py: "$0.5", rounded: 999, borderWidth: 1, borderColor: "$borderColor", shrink: 0, children: [_jsx(Face, { src: faces[name]?.avatar ?? (name === withWhom ? portrait : undefined), emoji: faces[name]?.emoji ?? (name === withWhom ? persona?.emoji : undefined), name: name, size: 22 }), _jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$color", numberOfLines: 1, display: "none", $sm: { display: "flex" }, children: name }), _jsx(Box, { render: "button", onClick: () => openAgent(name), "aria-label": `Remove ${name} from this chat`, title: `Remove ${name}`, width: 24, height: 24, rounded: 999, items: "center", justify: "center", hoverStyle: { bg: "$hover" }, children: _jsx(X, { size: 13, "aria-hidden": true, color: "var(--soft, var(--muted-foreground))" }) })] }, name))) })) : null] }), _jsxs(XStack, { "data-slot": "conversation-controls", items: "center", gap: 2, shrink: 0, children: [open ? _jsx(Share, { thread: open }) : null, mine ? (_jsx(ConversationMenu, { threads: alone, active: open, onSchedule: anonymous ? undefined : () => setPlan(lastAsked()), children: _jsx(XStack, { children: _jsx(ThreadMore, { t: mine }) }) })) : null, _jsx(Summary, { sections: sections, onOpen: () => setPanel(true) }), _jsx(PanelToggle, { open: panel, onToggle: () => setPanel(!panel) })] })] }), wide && aside !== null ? (_jsx(Beside, { children: _jsx(Panel, { side: deck, kinds: NONE, onHide: () => setPanel(false), label: "Tabs", ...browsing }) })) : null, !wide && panel ? _jsx(Panel, { side: deck, kinds: NONE, sheet: true, onHide: () => setPanel(false), label: "Tabs", ...browsing }) : null, _jsx(ChatSurface, { ...chat, messages: shown, send: guarded, 
                 // AN EMPTY ROOM CENTRES ITS COMPOSER on a laptop. While nothing has been
                 // said the opening (the heading) and the composer sit as one group in the
                 // middle of the height; the moment a turn exists the transcript takes the
@@ -1531,7 +1533,7 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
                 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] })), 
                 // 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, isFree(model) ? (_jsx(XStack, { items: "center", justify: "center", py: "$1", px: "$3", borderTopWidth: 1, borderColor: "$borderColor", bg: "$background", children: _jsxs(Text, { fontSize: "$1", color: "$soft", children: ["Free chat is data-shared to train models. ", _jsx(Anchor, { href: site("/privacy"), fontSize: "$1", color: "$ink", children: "Privacy" })] }) })) : null, consent, _jsx(Upgrade, { ask: ask, onClose: () => setAsk(null) })] }));
+                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) })] }));
 }
 /** The agreement free asks for, in @hanzo/ai's words so every surface says one thing. */
 function Consent({ question, onAgree, onCancel, }) {

package/dist/Column.js

@@ -21,6 +21,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 { tidy } from './lib/title.js';
 import { DropdownMenu } from '@hanzo/ui';
 import { Sidebar, SidebarIconButton, SidebarItem, StatusDot } from '@hanzo/ui/chat';
 import { useId } from 'react';
@@ -78,7 +79,7 @@ function Activity({ host }) {
         ...(latest.length
             ? latest.map((s) => ({
                 key: s.id,
-                label: s.title || 'Untitled run',
+                label: tidy(s.title, 56, 'Untitled run'),
                 description: [s.status, ago(s.updatedAt || s.createdAt)].filter(Boolean).join(' · '),
                 icon: _jsx(StatusDot, { status: DOTS[s.status] ?? 'idle' }),
                 onSelect: () => host.go(s.id),

package/dist/Me.js

@@ -20,7 +20,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // personal one first, with its plan — switched with `onOrg`; Create
 // organization, Organization settings, and Hanzo Team (opened in the same
 // organization for a team, offered as "Create a team" for a personal one); and
-// All organizations for a SuperAdmin (support mode).
+// All organizations for a SuperAdmin, which opens the chooser (Orgs.tsx).
 //
 // IAM is the source of every fact here: names and roles from the token's `orgs`
 // claim, display names and which org is personal from `GET /v1/iam/organizations`,
@@ -36,13 +36,12 @@ import { Button, Dialog, DialogContent, DialogTitle, DropdownMenu, DropdownMenuC
 import { api } from './lib/api.js';
 import { createOrg, say } from './lib/org.js';
 import { list } from './lib/list.js';
-import { org as current, orgs, pick, renew, scope, superAdmin } from './lib/session.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 { asked, KEYS, legal, out, pages } from './help.js';
 import { showSettings } from './open.js';
 import { site, where } from './where.js';
-import { SupportPicker } from './Support.js';
 import { BAD } from './lib/mix.js';
 /** Where an organization's own settings live: a page of the site (`site()`), not of the app. */
 const ORG_SETTINGS = '/settings/organization';
@@ -138,7 +137,6 @@ export function Me({ host, narrow = false, above = false, onOrg, }) {
     const [account, setAccount] = useState(false);
     const [help, setHelp] = useState(false);
     const [creating, setCreating] = useState(false);
-    const [supporting, setSupporting] = useState(false);
     const [keys, setKeys] = useState(false);
     const row = useRef(null);
     const current = host.org;
@@ -184,7 +182,7 @@ export function Me({ host, narrow = false, above = false, onOrg, }) {
                     setHelp(false);
                 }, placement: narrow && !above ? 'right-end' : above ? 'top-end' : 'top-start', 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: () => setSupporting(true), 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 }), supporting ? _jsx(SupportPicker, { onClose: () => setSupporting(false) }) : 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 })] }));
 }
 /** The app's keys (help.ts `KEYS`), one row each, spelled for this platform. */
 function Shortcuts({ open, onOpenChange, apple }) {

package/dist/Orgs.js

@@ -28,11 +28,13 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // Free is offered a team, and an open one is sent on (`forward`). Behind the
 // door, and only there, nothing opens without a live plan.
 import { dev } from './lib/host.js';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useIam } from '@hanzo/iam/react';
 import { Text, View, XStack, YStack } from '@hanzo/gui';
-import { Button } from '@hanzo/ui';
-import { Minus, Plus, X } from 'lucide-react';
+import { Avatar, Button, Tag } from '@hanzo/ui';
+import { SearchInput } from '@hanzo/ui/product/Filters';
+import { label, said as spoken } from '@hanzo/build/plan';
+import { Check, Minus, Plus, X } from 'lucide-react';
 import { Waiting } from './waiting.js';
 import { LOGIN, enter } from './lib/destination.js';
 import { useAi } from './lib/ai.js';
@@ -40,7 +42,8 @@ import { useHost } from './lib/hostname.js';
 import { useHydrated } from './lib/hydrated.js';
 import { api } from './lib/api.js';
 import { usePersonal, useTier } from './lib/tier.js';
-import { ORG, PICKED, assumed, hasSession, org, orgs as claimed, pick, renew, scope } from './lib/session.js';
+import { CHOOSE, ORG, PICKED, assumed, bearer, hasSession, org, orgs as claimed, pick, renew, role, scope, superAdmin, support } from './lib/session.js';
+import { matches, refusal, slugify } from './lib/orgname.js';
 import { team as workspace } from './lib/host.js';
 import { checkoutUrl, money } from './lib/pay.js';
 import { cartUrl, charge, priced, usePlan, usePlans } from './lib/plans.js';
@@ -119,9 +122,17 @@ export function Orgs({ children, front = false, forward, signup = false, }) {
             window.removeEventListener('focus', back);
         };
     }, [reload]);
+    // The chooser over the room, asked for from the account menu (session.ts `choose`).
+    const [choosing, setChoosing] = useState(false);
+    useEffect(() => {
+        const ask = () => setChoosing(true);
+        window.addEventListener(CHOOSE, ask);
+        return () => window.removeEventListener(CHOOSE, ask);
+    }, []);
     const choose = useCallback((o) => {
         pick(o);
         setPicked(true);
+        setChoosing(false);
     }, []);
     // The organization a link arrives for. hanzo.ai opens the workspace at
     // `?signin&org=<the org it is working in>` (Me.tsx); once signed in, an org
@@ -198,7 +209,10 @@ export function Orgs({ children, front = false, forward, signup = false, }) {
         return door ? _jsx(Start, { onFounded: setFounding, first: true }) : _jsx(Create, {});
     }
     if (!current || (members.length > 1 && !picked))
-        return _jsx(Pick, { members: members, onPick: choose });
+        return _jsx(Pick, { members: members, current: current, onPick: choose });
+    // Asked for over an open room, the room keeps its place under the chooser and closing it goes back.
+    if (choosing)
+        return _jsxs(_Fragment, { children: [_jsx(Held, { veiled: true, children: children }), _jsx(Pick, { members: members, current: current, onPick: choose, onClose: () => setChoosing(false) })] });
     if (open)
         return forward ? _jsx(Forward, { to: forward }) : _jsx(_Fragment, { children: _jsx(Held, { veiled: false, children: children }) });
     // IN THE WORKSPACE NOTHING OPENS WITHOUT A LIVE PLAN. Every branch here
@@ -458,9 +472,253 @@ function CreateDialog({ onClose }) {
                             ? `A team organization runs on ${plan.name} at ${price} per seat a month, at least ${Number(plan.limits?.minSeats ?? 1)} seats.`
                             : `A personal organization runs on ${plan.name} at ${price} a month.`, ' ', "Nothing in it works until that plan is live, so creating one takes you straight to checkout, where you choose the seats and the term.", ' ', "Each plan includes session and daily usage limits; usage never draws your credit balance.", ' ', "Payment is on the provider's hosted page."] })) : null, refused ? (_jsx(Text, { render: "p", role: "alert", mt: 14, fontSize: "$3", color: "var(--foreground)", children: refused })) : null, _jsxs(XStack, { justify: "flex-end", gap: 10, mt: 24, flexWrap: "wrap", children: [_jsx(Button, { type: "button", size: "lg", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", variant: "primary", size: "lg", shrink: 1, py: "$2", disabled: !plan || busy, children: _jsx(Text, { fontFamily: "$body", fontSize: "$3", color: "inherit", text: "center", children: busy ? 'Creating…' : paid ? `Create and subscribe — ${price}${seat} / month` : 'Create' }) })] }), _jsx(Rule, { mt: 18, mb: 8 }), _jsx(Text, { render: "p", text: "right", fontSize: "$2", color: muted, fontFamily: "$mono", children: "Esc to close" })] }) }));
 }
-/** Several organizations: which one, this time. */
-function Pick({ members, onPick }) {
-    return (_jsx(Page, { label: "Choose an organization", children: _jsxs(Column, { children: [_jsx(Brand, {}), _jsx(Heading, { title: "Choose an organization", lede: _jsx(_Fragment, { children: "Everything you open \u2014 chats, agents, credit \u2014 is this one's." }) }), _jsx(Rule, {}), _jsx(View, { display: "grid", gap: 10, children: members.map((o) => (_jsx(View, { render: "button", onClick: () => onPick(o), items: "flex-start", px: 16, py: 14, rounded: 12, borderWidth: 1, borderColor: "var(--border)", bg: "transparent", cursor: "pointer", children: _jsx(Text, { fontSize: "$4", color: "var(--foreground)", text: "left", children: o }) }, o))) })] }) }));
+/**
+ * A page of IAM's organization list (`GET /v1/iam/organizations`): the reader's
+ * own organizations whole on the first page, then, for a SuperAdmin only, every
+ * other one, newest first. `q` narrows it by name or display name on the server;
+ * `cursor` continues it. IAM decides the scope from the bearer, so this asks the
+ * same thing for everyone.
+ */
+async function listing(q, cursor, limit, signal) {
+    const query = new URLSearchParams({ limit: String(limit) });
+    if (q.trim())
+        query.set('q', q.trim());
+    if (cursor)
+        query.set('cursor', cursor);
+    const res = await fetch(`${api()}/v1/iam/organizations?${query}`, {
+        headers: { Authorization: `Bearer ${bearer() ?? ''}` },
+        signal,
+    });
+    if (!res.ok)
+        throw new Error(`IAM answered ${res.status}.`);
+    return (await res.json());
+}
+/** How each of the reader's organizations appears, by name, from IAM's rows: the first page carries all of them. */
+function useMarks(members) {
+    const [rows, setRows] = useState({});
+    const key = members.join(',');
+    useEffect(() => {
+        if (!key)
+            return;
+        const stop = new AbortController();
+        listing('', '', 1, stop.signal)
+            .then((page) => {
+            if (!stop.signal.aborted)
+                setRows(Object.fromEntries((page.organizations ?? []).map((o) => [o.name, o])));
+        })
+            .catch(() => { });
+        return () => stop.abort();
+    }, [key]);
+    return rows;
+}
+/** Each organization's plan by its family (`Max 20x`), billing asked in its name; absent where it names none. */
+function useBilled(members) {
+    const [plans, setPlans] = useState({});
+    const key = members.join(',');
+    useEffect(() => {
+        const stop = new AbortController();
+        for (const o of key.split(',').filter(Boolean)) {
+            fetch(`${api()}/v1/billing/tier`, { headers: { ...scope(), 'X-Org-Id': o }, signal: stop.signal })
+                .then((r) => (r.ok ? r.json() : null))
+                .then((t) => {
+                const plan = t ? spoken(label(t.plan, t.tier?.name)) : '';
+                if (plan && !stop.signal.aborted)
+                    setPlans((had) => ({ ...had, [o]: plan }));
+            })
+                .catch(() => { });
+        }
+        return () => stop.abort();
+    }, [key]);
+    return plans;
+}
+/** A role as a person reads it: `owner` → Owner. */
+const said = (role) => (role ? role.charAt(0).toUpperCase() + role.slice(1) : '');
+/** An organization's mark: its image, else its emoji, else its initial in its own hue (keyed on the slug, so a rename keeps it). */
+function Mark({ org }) {
+    const emoji = org.mark?.avatar ? '' : org.mark?.emoji;
+    return (_jsx(Avatar, { size: "xl", shape: "rounded", src: org.mark?.avatar || (emoji ? null : org.mark?.logo) || null, name: org.display, colorSeed: org.name, icon: emoji ? _jsx(Text, { fontSize: "$7", children: emoji }) : undefined, alt: "" }));
+}
+/** One organization: its mark, its name and slug, the reader's role and its plan; the current one checked. */
+function Choice({ org, current = false, note, disabled, onPress }) {
+    return (_jsx(View, { render: "li", display: "block", children: _jsxs(XStack, { render: "button", onClick: onPress, disabled: disabled, "aria-current": current || undefined, width: "100%", items: "center", gap: 12, px: 12, py: 10, rounded: 12, borderWidth: 1, borderColor: current ? '$ink' : '$edge', bg: "transparent", cursor: "pointer", hoverStyle: { bg: '$hover' }, children: [_jsx(Mark, { org: org }), _jsxs(YStack, { flex: 1, minW: 0, gap: 4, children: [_jsx(Text, { fontSize: "$4", fontWeight: "500", color: "$ink", numberOfLines: 1, text: "left", children: org.display }), _jsxs(XStack, { items: "center", gap: 6, flexWrap: "wrap", children: [_jsx(Text, { fontSize: "$2", fontFamily: "$mono", color: "$soft", numberOfLines: 1, children: org.name }), org.role ? _jsx(Tag, { variant: "outline", children: said(org.role) }) : null, org.plan ? _jsx(Tag, { children: org.plan }) : null, note ? (_jsx(Text, { fontSize: "$2", color: "$soft", children: note })) : null] })] }), current ? _jsx(Check, { size: 16, "aria-label": "Current" }) : null] }) }));
+}
+/**
+ * WHICH ORGANIZATION, THIS TIME — and, for a SuperAdmin, any organization.
+ *
+ * The reader's organizations are the token's `orgs` (no other list is theirs),
+ * drawn with IAM's rows beside them: the mark, the display name, the role the
+ * token signs and the plan billing reads in each one's name. The search filters
+ * them as it is typed, by slug or display name. A person founds another here
+ * (`Found`); a SuperAdmin, whom IAM never lets own a customer organization, is
+ * shown every organization instead (`Everyone`), stepped into through IAM.
+ */
+function Pick({ members, current, onPick, onClose, }) {
+    // IAM's verdict as it signed it into the token (authz `Claims.Sudo`). It only
+    // decides what is drawn: IAM answers anyone else's list with their own
+    // organizations and refuses them the step in.
+    const sudo = superAdmin();
+    const [q, setQ] = useState('');
+    const [founding, setFounding] = useState(false);
+    const marks = useMarks(members);
+    const plans = useBilled(members);
+    const mine = members.map((name) => ({
+        name,
+        display: marks[name]?.displayName || name,
+        mark: marks[name],
+        role: role(name) ?? '',
+        plan: plans[name],
+    }));
+    const shown = mine.filter((o) => matches(o, q));
+    useEffect(() => {
+        if (!onClose || founding)
+            return;
+        const key = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        document.addEventListener('keydown', key);
+        return () => document.removeEventListener('keydown', key);
+    }, [onClose, founding]);
+    return (_jsxs(Page, { label: "Choose an organization", children: [_jsxs(Column, { children: [_jsxs(XStack, { items: "flex-start", justify: "space-between", gap: 12, children: [_jsx(Brand, {}), onClose ? (_jsx(Button, { variant: "ghost", size: "icon-sm", mt: -6, mr: -8, onClick: onClose, "aria-label": "Close", children: _jsx(X, { size: 16, "aria-hidden": true }) })) : null] }), _jsx(Heading, { title: "Choose an organization", lede: _jsx(_Fragment, { children: "Everything you open \u2014 chats, agents, credit \u2014 is this one's." }) }), _jsx(Rule, {}), _jsx(XStack, { render: "form", onSubmit: (e) => {
+                            e.preventDefault();
+                            if (shown[0])
+                                onPick(shown[0].name);
+                        }, children: _jsx(SearchInput, { name: "organizations", value: q, onChange: setQ, placeholder: sudo ? 'Search every organization' : 'Find an organization', actions: sudo ? null : (_jsxs(Button, { type: "button", onClick: () => setFounding(true), children: [_jsx(Plus, { size: 16, "aria-hidden": true }), "New organization"] })) }) }), _jsx(YStack, { render: "ul", "aria-label": "Your organizations", m: 0, p: 0, mt: 14, gap: 8, children: shown.map((o) => (_jsx(Choice, { org: o, current: o.name === current, onPress: () => onPick(o.name) }, o.name))) }), shown.length === 0 ? (_jsxs(Text, { render: "p", mt: 14, fontSize: "$3", color: "$soft", children: ["None of yours matches \u201C", q.trim(), "\u201D."] })) : null, sudo ? _jsx(Everyone, { q: q, skip: members }) : null] }), founding ? _jsx(Found, { onClose: () => setFounding(false), onMade: onPick }) : null] }));
+}
+/**
+ * EVERY ORGANIZATION, for a SuperAdmin to step into.
+ *
+ * The list and the search are IAM's, a page at a time, and IAM records each new
+ * search under the operator's name. Opening one is IAM's `assume` (session.ts
+ * `support`): the operator's own token re-scoped to it and the step recorded in
+ * that organization's audit log. Nobody is made a member of anything.
+ */
+function Everyone({ q, skip }) {
+    const [rows, setRows] = useState([]);
+    const [cursor, setCursor] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [refused, setRefused] = useState(null);
+    const [stepping, setStepping] = useState(null);
+    // Only the newest read lands: a search typed while a page is in flight
+    // supersedes it, so a slow answer to an old query never overwrites the new one.
+    const asked = useRef(0);
+    const load = useCallback(async (query, from) => {
+        const mine = ++asked.current;
+        setLoading(true);
+        setRefused(null);
+        try {
+            const next = await listing(query, from, 20);
+            if (mine !== asked.current)
+                return;
+            setRows((had) => {
+                // IAM's cursor is a position, so an org created mid-walk can shift a row
+                // across a page edge; each org is kept once.
+                const all = from ? [...had, ...(next.organizations ?? [])] : next.organizations ?? [];
+                return all.filter((o, i) => all.findIndex((x) => x.name === o.name) === i);
+            });
+            setCursor(next.cursor ?? '');
+        }
+        catch (e) {
+            if (mine === asked.current)
+                setRefused(e instanceof Error ? e.message : 'The list did not load.');
+        }
+        finally {
+            if (mine === asked.current)
+                setLoading(false);
+        }
+    }, []);
+    useEffect(() => {
+        const id = setTimeout(() => void load(q, ''), 250);
+        return () => clearTimeout(id);
+    }, [q, load]);
+    const enter = (org) => {
+        setStepping(org);
+        setRefused(null);
+        support(org).catch((e) => {
+            setRefused(e instanceof Error ? e.message : 'IAM did not step in.');
+            setStepping(null);
+        });
+    };
+    const others = rows.filter((o) => !skip.includes(o.name));
+    return (_jsxs(YStack, { render: "section", "aria-label": "All organizations", mt: 36, children: [_jsx(Text, { render: "h2", fontSize: "$6", fontWeight: "500", color: "$ink", children: "All organizations" }), _jsx(Text, { render: "p", mt: 4, fontSize: "$3", color: "$soft", lineHeight: 21, children: "Support mode. Step into any organization to see it as it does; IAM records every step under your name." }), _jsx(YStack, { render: "ul", "aria-label": "Every organization", m: 0, p: 0, mt: 14, gap: 8, children: others.map((o) => (_jsx(Choice, { org: { name: o.name, display: o.displayName || o.name, mark: o }, note: stepping === o.name ? 'Stepping in…' : undefined, disabled: stepping !== null, onPress: () => enter(o.name) }, o.name))) }), !loading && others.length === 0 && !refused ? (_jsx(Text, { render: "p", mt: 8, fontSize: "$3", color: "$soft", children: "No organization matches." })) : null, refused ? (_jsx(Text, { render: "p", role: "alert", mt: 8, fontSize: "$3", color: BAD, children: refused })) : null, cursor ? (_jsx(Button, { self: "flex-start", mt: 10, onClick: () => void load(q, cursor), disabled: loading, children: loading ? 'Loading…' : 'More' })) : null] }));
+}
+/**
+ * FOUND AN ORGANIZATION: its name, then the slug IAM keys it by.
+ *
+ * The slug follows the name the way IAM's onboarding makes it, until it is typed
+ * over; a slug typed is IAM's to take as it is, so one IAM would not keep is
+ * refused here with the rule, never rewritten. IAM's own onboarding makes it
+ * (`POST /v1/iam/onboard`): the organization, the reader as its owner and its
+ * first API key, the founder's account untouched. It is sent the name when the
+ * name makes the slug, and the slug when the slug was typed, the display name
+ * then written on the row (`/v1/iam/organizations/profile`). The token in hand
+ * predates it, so it is refreshed before the organization opens.
+ */
+function Found({ onClose, onMade }) {
+    const { sdk } = useIam();
+    const [name, setName] = useState('');
+    const [typed, setTyped] = useState(null);
+    const slug = typed ?? slugify(name);
+    const wrong = slug ? refusal(slug) : null;
+    const [busy, setBusy] = useState(false);
+    const [refused, setRefused] = useState(null);
+    useEffect(() => {
+        const key = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        document.addEventListener('keydown', key);
+        return () => document.removeEventListener('keydown', key);
+    }, [onClose]);
+    const submit = async (e) => {
+        e.preventDefault();
+        const display = name.trim();
+        if (busy)
+            return;
+        if (!display)
+            return setRefused('Give it a name.');
+        if (wrong)
+            return setRefused(wrong);
+        setBusy(true);
+        setRefused(null);
+        const headers = { Authorization: `Bearer ${bearer() ?? ''}`, 'Content-Type': 'application/json' };
+        const why = async (r) => {
+            const body = (await r.json().catch(() => null));
+            return body?.error || body?.detail || body?.msg || body?.message || `IAM answered ${r.status}.`;
+        };
+        try {
+            const named = slugify(display) === slug;
+            const r = await fetch(`${api()}/v1/iam/onboard`, { method: 'POST', headers, body: JSON.stringify({ name: named ? display : slug }) });
+            if (!r.ok)
+                throw new Error(await why(r));
+            const made = (await r.json().catch(() => null))?.org;
+            if (!made)
+                throw new Error('IAM made no organization. Try again.');
+            renew();
+            await sdk.refreshAccessToken().catch(() => null);
+            if (!named) {
+                const p = await fetch(`${api()}/v1/iam/organizations/profile`, {
+                    method: 'POST',
+                    headers: { ...headers, Authorization: `Bearer ${bearer() ?? ''}` },
+                    body: JSON.stringify({ owner: 'admin', name: made, displayName: display }),
+                });
+                if (!p.ok)
+                    throw new Error(`${made} is made, and it is still called ${made}: ${await why(p)}`);
+            }
+            // A token that does not carry it yet is minted on the next load, which opens it.
+            if (!claimed().includes(made)) {
+                pick(made);
+                window.location.reload();
+                return;
+            }
+            onMade(made);
+        }
+        catch (err) {
+            setRefused(err instanceof Error ? err.message : 'Could not create it.');
+            setBusy(false);
+        }
+    };
+    return (_jsx(YStack, { role: "dialog", "aria-modal": true, "aria-label": "New organization", position: "fixed", inset: 0, z: DIALOG, bg: shade(28), overflowY: "auto", py: "6vh", px: 16, onClick: onClose, children: _jsxs(YStack, { render: "form", onSubmit: submit, onClick: (e) => e.stopPropagation(), width: "100%", maxW: 480, mx: "auto", bg: "var(--background)", rounded: 16, borderWidth: 1, borderColor: "$edge", boxShadow: `0 24px 64px ${shade(28)}`, pt: 24, px: 24, pb: 20, children: [_jsxs(XStack, { items: "flex-start", justify: "space-between", gap: 12, children: [_jsxs(YStack, { shrink: 1, minW: "auto", children: [_jsx(Text, { render: "h2", fontSize: "$8", fontWeight: "500", color: "$ink", children: "New organization" }), _jsx(Text, { render: "p", mt: 6, fontSize: "$3", color: "$soft", lineHeight: 21, children: "You own it. Its agents, credit and members are its own." })] }), _jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", mr: -8, onClick: onClose, "aria-label": "Close", children: _jsx(X, { size: 16, "aria-hidden": true }) })] }), _jsxs(View, { render: "label", display: "block", mt: 20, children: [_jsx(Text, { display: "block", fontSize: "$4", fontWeight: "500", mb: 8, color: "$ink", children: "Name" }), _jsx(Text, { render: _jsx("input", { value: name, onChange: (e) => setName(e.target.value), placeholder: "Acme", maxLength: 100, autoFocus: true }), ...FIELD })] }), _jsxs(View, { render: "label", display: "block", mt: 16, children: [_jsx(Text, { display: "block", fontSize: "$4", fontWeight: "500", mb: 8, color: "$ink", children: "Slug" }), _jsx(Text, { render: _jsx("input", { value: slug, onChange: (e) => setTyped(e.target.value), placeholder: "acme", spellCheck: false, autoCapitalize: "off", autoCorrect: "off", "aria-invalid": Boolean(slug && wrong) || undefined }), ...FIELD, fontFamily: "$mono" }), _jsx(Text, { display: "block", fontSize: "$3", color: slug && wrong ? BAD : '$soft', mt: 8, children: slug && wrong ? wrong : 'How every request names it: lowercase letters, digits and hyphens. It does not change.' })] }), refused ? (_jsx(Text, { render: "p", role: "alert", mt: 14, fontSize: "$3", color: BAD, children: refused })) : null, _jsxs(XStack, { justify: "flex-end", gap: 10, mt: 22, flexWrap: "wrap", children: [_jsx(Button, { type: "button", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", variant: "primary", disabled: busy || !name.trim() || Boolean(wrong), children: busy ? 'Creating…' : 'Create and open' })] })] }) }));
 }
 /** On the workspace's host, an organization whose plan is not live: it is offered the per-seat Team plan. */
 function Subscribe({ org, members, onSwitch, }) {

package/dist/Palette.d.ts

@@ -1,5 +1,7 @@
 import { type ReactNode } from 'react';
+import { type Host } from '@hanzo/build';
 import { type ShortcutKeys } from '@hanzo/ui';
+import { type Place } from './lib/host.js';
 import { type Hit } from './seek.js';
 /** A row: what it is called, its glyph, and what pressing it does. */
 export interface Action extends Hit {
@@ -9,10 +11,14 @@ export interface Action extends Hit {
     /** Pressing it keeps the palette open. */
     stay?: boolean;
 }
-export declare function Palette({ onClose, go, actions, }: {
+export declare function Palette({ onClose, go, actions, mode, host, }: {
     onClose: () => void;
     /** Moves the app to one of its addresses (lib/host `talk`, `app`). */
     go: (address: string) => void;
     /** The frame's own actions, after the palette's; one with a palette action's id stands in for it. */
     actions?: Action[];
+    /** The product the reader is in: what the empty field lists and what a query ranks first. */
+    mode?: Place['mode'];
+    /** Dev's host, whose runs the palette lists in Dev. */
+    host?: Host;
 }): import("react").JSX.Element;