@hanzo/rooms 0.1.91 → 0.1.93

package/dist/Palette.js

@@ -1,30 +1,36 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// The one search. ⌘K / Ctrl+K from anywhere and the sidebar's search open it:
-// a dialog with the field on top, listing the product's own recents while the
-// field is empty — Chat's Recent chats, Dev's Recent runs — and, for a query,
-// the product's own things first: in Chat, Chats, Projects, Agents, Skills and
-// Actions; in Dev, Runs, Dev's places (Templates, Projects, Issues, Machines,
-// Environments, Library, Scheduled tasks, Customize), Projects, Skills, Actions
-// and Chats last; each cut to its best five (seek.ts `findIn`). A row opens
-// where it lives: a chat at its address, a run or a place in Dev, a project in
-// Dev, an agent in a new chat with it, a skill in Dev's Customize, an action
-// runs. Arrows move, Enter opens, Escape closes (@hanzo/ui's CommandMenu);
-// Keyboard shortcuts lists the app's keys, and Backspace on an empty field
-// comes back.
+// The palette: ⌘K / Ctrl+K from anywhere toggles it, the sidebar's search opens
+// it. Every place in the app can be jumped to from it and every action run.
 //
-// MOUNTED ONLY WHILE OPEN, and every list is read once as it opens, then
-// searched here as the reader types: the conversations store (hanzoai/agent)
-// answers its whole list and searches nothing, titles or words, so there is no
-// read per key to wait for or to cancel. The chats are the sidebar's last read
-// (thread.tsx `useThreadList`), drawn at once and read again behind it; the
-// projects (`/v1/projects`), the active skills (`/v1/tool/skills?activated=true`)
-// and the agents (crew.tsx) arrive while the reader types, and a read the
-// palette closes on is aborted.
+// An empty field lists Recent (the reader's chats and Dev tasks, newest first,
+// each with its kind's icon), Actions, and Go to: the products, the places of
+// the app and the apps in beta the reader may open. A query searches all of it, deeper places too (Settings' sections,
+// Customize's tabs, the Library's kinds, Studio's places, Help), and the
+// reader's chats, Dev tasks, projects, agents, skills and connectors by name;
+// each group keeps its best five and the group with the best answer leads
+// (seek.ts `find`). A row opens where it lives; an action runs.
+//
+// GO TO IS DERIVED, never listed here: the places are @hanzo/build's own
+// registries (`nav` for Dev's places, `sections` for Settings, `tabs` for
+// Customize, `library` for the Library's kinds), @hanzo/studio's `nav`, and
+// help.ts's pages, lib/betas.ts's granted apps: the same lists the sidebars and
+// menus draw. A page added to
+// any of them is in the palette with nothing written here.
+//
+// MOUNTED ONLY WHILE OPEN, and every list is read once as it opens and searched
+// here as the reader types: the conversations store (hanzoai/agent) answers its
+// whole list and searches nothing, titles or words, so a title is all there is
+// to find a chat by. The chats are the sidebar's last read (thread.tsx
+// `useThreadList`), drawn at once; the projects (`/v1/projects`), the active
+// skills (`/v1/tool/skills?activated=true`), the connectors
+// (`/v1/tool/mcp/servers`) and the agents (crew.tsx) arrive while the reader
+// types, and a read the palette closes on is aborted.
 import { useEffect, useMemo, useState } from 'react';
-import { BookOpen, Bot, Boxes, Clock, Code2, FolderGit2, Keyboard, LayoutTemplate, Library, ListTodo, LogOut, MessageCircle, Puzzle, Server, Settings, SquarePen } from 'lucide-react';
+import { BookOpen, Bot, Building2, CircleHelp, Clock, Code2, FlaskConical, FolderGit2, Gift, Keyboard, LogOut, MessageCircle, MessageSquare, Plug, Settings, Sparkles, SquarePen, SquareTerminal, SunMoon, Users, WandSparkles, } from 'lucide-react';
 import { useAi } from '@hanzo/ai/react';
-import { path as written, useSessions } from '@hanzo/build';
+import { library, nav, NEW, path as written, sections, tabs, useSessions } from '@hanzo/build';
+import { nav as made } from '@hanzo/studio';
 import { Dialog, DialogContent, DialogTitle } from '@hanzo/ui';
 import { CommandMenu } from '@hanzo/ui/product/CommandMenu';
 import { ordered } from './agents.js';
@@ -33,77 +39,170 @@ import { called } from './team.js';
 import { empty, openThread, withAgents } from './open.js';
 import { useThreadList } from './thread.js';
 import { useSignOut } from './lib/signout.js';
-import { app, talk } from './lib/host.js';
+import { choose } from './lib/session.js';
+import { app, studio, talk, TERMINALS, WORKSPACE } from './lib/host.js';
+import { BETAS } from './lib/betas.js';
+import { useBetas } from './Betas.js';
 import { tidy } from './lib/title.js';
-import { find, findIn } from './seek.js';
+import { KEYS, legal, out, pages } from './help.js';
+import { site } from './where.js';
+import { find } from './seek.js';
 const ICON = { size: 16, 'aria-hidden': true };
-/** The app's keys, as Keyboard shortcuts lists them. */
-const KEYS = [
-    { id: 'search', label: 'Search', shortcut: ['Mod', 'K'] },
-    { id: 'settings', label: 'Settings', shortcut: ['Mod', ','] },
-    { id: 'panel', label: 'Side panel', shortcut: ['Mod', '.'] },
-    { id: 'rename', label: 'Rename chat', shortcut: ['Ctrl', 'Alt', 'R'] },
-    { id: 'pin', label: 'Pin or unpin chat', shortcut: ['Ctrl', 'Alt', 'P'] },
-    { id: 'back', label: 'Back, in the desktop app', shortcut: ['Alt', 'ArrowLeft'] },
-    { id: 'forward', label: 'Forward, in the desktop app', shortcut: ['Alt', 'ArrowRight'] },
-];
+/** The builder's Settings, its first section. */
+const SETTINGS = written({ kind: 'settings', section: 'general' });
 const SKILLS = written({ kind: 'customize', tab: 'skills' });
-/** Dev's places, as its sidebar lists them, by the builder address each opens. */
-const PLACES = [
-    { id: 'templates', label: 'Templates', at: '-/templates', icon: _jsx(LayoutTemplate, { ...ICON }) },
-    { id: 'projects', label: 'Projects', at: '-/projects', icon: _jsx(FolderGit2, { ...ICON }) },
-    { id: 'issues', label: 'Issues', at: '-/issues', icon: _jsx(ListTodo, { ...ICON }) },
-    { id: 'machines', label: 'Machines', at: '-/settings/machines', icon: _jsx(Server, { ...ICON }) },
-    { id: 'environments', label: 'Environments', at: '-/settings/environments', icon: _jsx(Boxes, { ...ICON }) },
-    { id: 'library', label: 'Library', at: '-/artifacts', icon: _jsx(Library, { ...ICON }) },
-    { id: 'scheduled', label: 'Scheduled tasks', at: '-/automations', icon: _jsx(Clock, { ...ICON }) },
-    { id: 'customize', label: 'Customize', at: '-/customize', icon: _jsx(Puzzle, { ...ICON }) },
-];
+const CONNECTORS = written({ kind: 'customize', tab: 'connectors' });
+/** The words a Settings section is also asked for by: the account menu's names for two of them, and the obvious ones. */
+const ALSO = {
+    general: ['personalization', 'appearance', 'theme'],
+    account: ['profile'],
+    privacy: ['security'],
+    billing: ['plans', 'subscription'],
+    members: ['organization', 'team'],
+};
+/** A registry's groups as rows, each named for where it lives. */
+const rows = (groups, where, prefix) => groups
+    .flatMap((g) => g.links)
+    .map((l) => ({ id: `${prefix}-${l.id}`, label: l.label, icon: l.icon, where, keywords: [where, ...(ALSO[l.id] ?? [])].filter(Boolean), run: () => l.onPress?.() }));
+/**
+ * Every place the reader can be taken: `top` is what an empty field lists, the
+ * products and the places of the app; `deep` is what only a query reaches.
+ * Without a host (hanzo.team's frame) the builder's registries are not there,
+ * and the products and the site's pages are.
+ */
+export function places(host, go) {
+    const builder = (p) => go(app(p));
+    const top = [
+        { id: 'chat', label: 'Chat', icon: _jsx(MessageSquare, { ...ICON }), run: () => go(talk()) },
+        { id: 'dev', label: 'Dev', icon: _jsx(Code2, { ...ICON }), run: () => go(app('')) },
+        { id: 'studio', label: 'Studio', icon: _jsx(WandSparkles, { ...ICON }), run: () => go(studio('')) },
+        { id: 'tabs', label: 'Tabs', icon: _jsx(SquareTerminal, { ...ICON }), run: () => go(TERMINALS) },
+        ...(host ? [{ id: 'team', label: 'Team', icon: _jsx(Users, { ...ICON }), keywords: ['workspace'], run: () => out(WORKSPACE) }] : []),
+        ...(host ? rows(nav(host, builder).map((g) => ({ links: g.links.filter((l) => l.id !== NEW) })), '', 'dev') : []),
+        { id: 'settings', label: 'Settings', icon: _jsx(Settings, { ...ICON }), shortcut: ['Mod', ','], run: () => go(app(SETTINGS)) },
+        // The site's own pages, outside the app: the browser loads them.
+        { id: 'referral', label: 'Referral', icon: _jsx(Gift, { ...ICON }), keywords: ['invite', 'share'], run: () => window.location.assign(site('/referral')) },
+        { id: 'beta', label: 'Beta status', icon: _jsx(FlaskConical, { ...ICON }), keywords: ['waitlist'], run: () => window.location.assign(site('/beta/status')) },
+        ...pages()
+            .filter((p) => p.key === 'help')
+            .map((p) => ({ id: `help-${p.key}`, label: p.label, icon: _jsx(CircleHelp, { ...ICON }), keywords: ['support', 'docs'], run: () => out(p.href) })),
+    ];
+    const deep = [
+        ...(host
+            ? [
+                ...rows(sections(host, builder), 'Settings', 'settings'),
+                ...rows(tabs(host, builder), 'Customize', 'customize'),
+                ...rows(library(host, builder).slice(1), 'Library', 'library'),
+                ...rows(made(host, (p) => go(studio(p))), 'Studio', 'studio').filter((a) => a.id !== `studio-${NEW}`),
+            ]
+            : []),
+        ...[...pages(), ...legal()]
+            .filter((p) => p.key !== 'help')
+            .map((p) => ({ id: `help-${p.key}`, label: p.label, where: 'Help', keywords: ['Help'], run: () => out(p.href) })),
+    ];
+    // A place two registries hold (Machines is Dev's and a Settings section) is listed once, as Dev's.
+    return { top, deep: deep.filter((a) => !top.some((t) => t.id === a.id.replace(/^settings-/, 'dev-'))) };
+}
+/** The composer's model menu, opened as a press would: a page without a composer opens New chat's. */
+function tune(go) {
+    const open = () => {
+        const chip = document.querySelector('[data-slot="mind"][aria-haspopup="menu"]');
+        chip?.focus();
+        chip?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+        return !!chip;
+    };
+    let tries = 0;
+    const wait = () => {
+        if (!open() && ++tries < 120)
+            requestAnimationFrame(wait);
+    };
+    // After the palette has closed and handed focus back, so the menu keeps it.
+    setTimeout(() => {
+        if (!open()) {
+            go(talk());
+            requestAnimationFrame(wait);
+        }
+    }, 0);
+}
+/** The palette's actions; a host that cannot do one (no theme to change, no org to pick) is not offered it. */
+export function actions(host, go, signOut, keys) {
+    const upload = host ? library(host, (p) => go(app(p)))[0]?.links.find((l) => l.id === 'upload') : undefined;
+    const list = [
+        { id: 'new-chat', label: 'New chat', icon: _jsx(SquarePen, { ...ICON }), run: () => (empty(), go(talk())) },
+        { id: 'new-task', label: 'New Dev task', icon: _jsx(Code2, { ...ICON }), keywords: ['run'], run: () => go(app('')) },
+        { id: 'new-creation', label: 'New Studio creation', icon: _jsx(WandSparkles, { ...ICON }), keywords: ['image', 'video'], run: () => go(studio('')) },
+        { id: 'new-scheduled', label: 'New scheduled task', icon: _jsx(Clock, { ...ICON }), keywords: ['automation'], run: () => go(app(written({ kind: 'automation', id: 'new' }))) },
+        !!upload && { id: 'upload', label: 'Upload', icon: upload.icon, keywords: ['file', 'library'], run: () => upload.onPress?.() },
+        { id: 'model', label: 'Switch model', icon: _jsx(Sparkles, { ...ICON }), keywords: ['model'], run: () => tune(go) },
+        !!host?.chooseTheme && {
+            id: 'theme',
+            label: 'Toggle theme',
+            icon: _jsx(SunMoon, { ...ICON }),
+            keywords: ['dark', 'light', 'appearance'],
+            run: () => host.chooseTheme?.(document.documentElement.classList.contains('dark') ? 'light' : 'dark'),
+        },
+        !!host && { id: 'org', label: 'Switch organization', icon: _jsx(Building2, { ...ICON }), keywords: ['org', 'team', 'workspace'], run: choose },
+        { id: 'keys', label: 'Keyboard shortcuts', icon: _jsx(Keyboard, { ...ICON }), stay: true, run: keys },
+        { id: 'logout', label: 'Log out', icon: _jsx(LogOut, { ...ICON }), keywords: ['sign out'], run: signOut },
+    ];
+    return list.filter((a) => !!a);
+}
 /** A list read once as the palette opens; a refusal leaves it empty and the rest still answer. */
 function useRead(path, shape) {
     const ai = useAi();
-    const [rows, setRows] = useState([]);
+    const [found, setFound] = useState([]);
     useEffect(() => {
         const stop = new AbortController();
-        ai.http.json({ path, signal: stop.signal }).then((body) => setRows(shape(body)), () => { });
+        ai.http.json({ path, signal: stop.signal }).then((body) => setFound(shape(body)), () => { });
         return () => stop.abort();
         // `shape` is a module constant at each call.
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [ai, path]);
-    return rows;
+    return found;
 }
 const obj = (v) => (v && typeof v === 'object' ? v : {});
 const str = (v) => (typeof v === 'string' ? v : '');
-const rows = (v) => (Array.isArray(v) ? v : []);
+const list = (v) => (Array.isArray(v) ? v : []);
 /** `/v1/projects`: a project by its slug, found by its name, slug and repository. */
-const projects = (body) => (Array.isArray(body) ? body : rows(obj(body).data))
+const projects = (body) => (Array.isArray(body) ? body : list(obj(body).data))
     .map(obj)
     .filter((p) => str(p.slug))
     .map((p) => ({ id: str(p.slug), label: str(p.name) || str(p.slug), keywords: [str(p.slug), str(obj(p.repo).url)] }));
 /** `/v1/tool/skills?activated=true`: a skill by its name, its tool's less `skill_`. */
-const skills = (body) => rows(obj(body).tools)
+const skills = (body) => list(obj(body).tools)
     .map(obj)
     .filter((t) => str(t.name))
     .map((t) => ({ id: str(t.name), label: str(t.name).replace(/^skill_/, ''), keywords: [str(t.description)] }));
-export function Palette({ onClose, go, actions = [], mode = 'chat', host, }) {
+/** `/v1/tool/mcp/servers`: a connector by its name. */
+const connectors = (body) => list(obj(body).servers)
+    .map(obj)
+    .filter((s) => str(s.id))
+    .map((s) => ({ id: str(s.id), label: str(s.name) || str(s.id), keywords: [str(s.url)] }));
+export function Palette({ onClose, go, actions: frame = [], mode = 'chat', host, }) {
     const [query, setQuery] = useState('');
     const [keys, setKeys] = useState(false);
     const { threads } = useThreadList();
     const { agents } = useCrew();
-    const made = useRead('/v1/projects', projects);
+    const repos = useRead('/v1/projects', projects);
     const known = useRead('/v1/tool/skills?activated=true', skills);
+    const plugged = useRead('/v1/tool/mcp/servers', connectors);
     const signOut = useSignOut();
     const runs = useSessions(host ?? null);
+    const { open: opened } = useBetas();
     const groups = useMemo(() => {
-        const own = [
-            { id: 'new-chat', label: 'New chat', icon: _jsx(SquarePen, { ...ICON }), run: () => (empty(), go(talk())) },
-            { id: 'new-task', label: 'New Dev task', icon: _jsx(Code2, { ...ICON }), run: () => go(app('')) },
-            { id: 'settings', label: 'Settings', icon: _jsx(Settings, { ...ICON }), shortcut: ['Mod', ','], run: () => go(app(written({ kind: 'settings', section: 'general' }))) },
-            { id: 'customize', label: 'Customize', icon: _jsx(Puzzle, { ...ICON }), run: () => go(app(SKILLS)) },
-            { id: 'keys', label: 'Keyboard shortcuts', icon: _jsx(Keyboard, { ...ICON }), stay: true, run: () => (setQuery(''), setKeys(true)) },
-            { id: 'logout', label: 'Log out', icon: _jsx(LogOut, { ...ICON }), run: () => void signOut() },
-        ];
-        const doing = [...own.map((a) => actions.find((b) => b.id === a.id) ?? a), ...actions.filter((b) => !own.some((a) => a.id === b.id))];
+        const { top, deep } = places(host, go);
+        const swap = (a) => frame.find((b) => b.id === a.id) ?? a;
+        // The apps in beta this reader may open, each where it lives (the rail's More).
+        const granted = BETAS.filter((b) => b.href && opened(b.id)).map((b) => ({
+            id: `beta-${b.id}`,
+            label: b.name,
+            icon: _jsx(Sparkles, { ...ICON }),
+            where: 'Beta',
+            keywords: ['beta', b.line],
+            run: () => out(b.href),
+        }));
+        const here = [...top.map(swap), ...frame.filter((b) => !top.some((a) => a.id === b.id)), ...granted];
+        const doing = actions(host, go, () => void signOut(), () => (setQuery(''), setKeys(true)));
         const chats = threads.map((t) => ({
             id: `chat-${t.id}`,
             label: tidy(t.title),
@@ -111,47 +210,49 @@ export function Palette({ onClose, go, actions = [], mode = 'chat', host, }) {
             icon: _jsx(MessageCircle, { ...ICON }),
             run: () => (openThread(t.id), go(talk(t.id))),
         }));
-        const projectRows = { id: 'projects', label: 'Projects', items: made.map((p) => ({ ...p, id: `project-${p.id}`, icon: _jsx(FolderGit2, { ...ICON }), run: () => go(app(p.id)) })) };
-        const skillRows = { id: 'skills', label: 'Skills', items: known.map((s) => ({ ...s, id: `skill-${s.id}`, icon: _jsx(BookOpen, { ...ICON }), run: () => go(app(SKILLS)) })) };
-        const actionRows = { id: 'actions', label: 'Actions', items: doing };
-        const shown = mode === 'dev'
-            ? findIn(query, {
-                label: 'Recent runs',
-                items: [...(runs?.value ?? [])].map((s) => ({
-                    id: `run-${s.id}`,
-                    label: tidy(s.title, 80, 'Untitled run'),
-                    at: s.updatedAt || s.createdAt,
-                    keywords: [s.status ?? ''],
-                    icon: _jsx(Code2, { ...ICON }),
-                    run: () => go(app(s.id)),
-                })),
-            }, [
-                { id: 'runs', label: 'Runs', items: [...(runs?.value ?? [])].map((s) => ({ id: `run-${s.id}`, label: tidy(s.title, 80, 'Untitled run'), at: s.updatedAt || s.createdAt, keywords: [s.status ?? ''], icon: _jsx(Code2, { ...ICON }), run: () => go(app(s.id)) })) },
-                { id: 'places', label: 'Dev', items: PLACES.map((p) => ({ id: `place-${p.id}`, label: p.label, icon: p.icon, run: () => go(app(p.at)) })) },
-                projectRows,
-                skillRows,
-                actionRows,
+        const tasks = (runs?.value ?? []).map((s) => ({
+            id: `run-${s.id}`,
+            label: tidy(s.title, 80, 'Untitled run'),
+            at: s.updatedAt || s.createdAt,
+            keywords: [s.status ?? ''],
+            icon: _jsx(Code2, { ...ICON }),
+            run: () => go(app(s.id)),
+        }));
+        const mine = mode === 'dev'
+            ? [
+                { id: 'runs', label: 'Dev tasks', items: tasks },
                 { id: 'chats', label: 'Chats', items: chats },
-            ])
-            : find(query, chats, [
-                projectRows,
-                {
-                    id: 'agents',
-                    label: 'Agents',
-                    items: ordered(agents).map((one) => {
-                        const name = called(one.name);
-                        return { id: `agent-${one.id || one.name}`, label: name, icon: _jsx(Bot, { ...ICON }), run: () => (withAgents([name]), go(talk())) };
-                    }),
-                },
-                skillRows,
-                actionRows,
-            ]);
+            ]
+            : [
+                { id: 'chats', label: 'Chats', items: chats },
+                { id: 'runs', label: 'Dev tasks', items: tasks },
+            ];
+        const shown = find(query, [...chats, ...tasks], [
+            { id: 'actions', label: 'Actions', items: doing },
+            { id: 'go', label: 'Go to', items: here },
+        ], [
+            { id: 'go', label: 'Go to', items: [...here, ...deep] },
+            { id: 'actions', label: 'Actions', items: doing },
+            ...mine,
+            { id: 'projects', label: 'Projects', items: repos.map((p) => ({ ...p, id: `project-${p.id}`, icon: _jsx(FolderGit2, { ...ICON }), run: () => go(app(p.id)) })) },
+            {
+                id: 'agents',
+                label: 'Agents',
+                items: ordered(agents).map((one) => {
+                    const name = called(one.name);
+                    return { id: `agent-${one.id || one.name}`, label: name, icon: _jsx(Bot, { ...ICON }), run: () => (withAgents([name]), go(talk())) };
+                }),
+            },
+            { id: 'skills', label: 'Skills', items: known.map((s) => ({ ...s, id: `skill-${s.id}`, icon: _jsx(BookOpen, { ...ICON }), run: () => go(app(SKILLS)) })) },
+            { id: 'connectors', label: 'Connectors', items: plugged.map((c) => ({ ...c, id: `connector-${c.id}`, icon: _jsx(Plug, { ...ICON }), run: () => go(app(CONNECTORS)) })) },
+        ]);
         return shown.map((g) => ({
             ...g,
             items: g.items.map((a) => ({
                 id: a.id,
                 label: a.label,
                 icon: a.icon,
+                contextual: a.where || undefined,
                 shortcut: a.shortcut,
                 // The palette ranked these against the query; the menu's own filter passes what it kept.
                 keywords: [query],
@@ -162,9 +263,12 @@ export function Palette({ onClose, go, actions = [], mode = 'chat', host, }) {
                 },
             })),
         }));
-    }, [query, threads, agents, made, known, actions, go, onClose, signOut, mode, runs]);
+    }, [query, threads, agents, repos, known, plugged, frame, go, onClose, signOut, mode, runs, host, opened]);
+    const apple = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.userAgent);
     const listed = keys
-        ? [{ id: 'keys', label: 'Keyboard shortcuts', items: KEYS.map((k) => ({ ...k, id: `key-${k.id}`, onSelect: () => setKeys(false) })) }]
+        ? [{ id: 'keys', label: 'Keyboard shortcuts', items: KEYS.map((k) => ({ id: `key-${k.does}`, label: k.does, contextual: apple ? k.mac : k.pc, onSelect: () => setKeys(false) })) }]
         : groups;
-    return (_jsx(Dialog, { open: true, onOpenChange: (open) => (open ? null : onClose()), children: _jsxs(DialogContent, { "data-slot": "palette", p: 0, gap: 0, width: "100%", maxW: 680, height: "min(520px, calc(100dvh - 32px))", rounded: "$6", overflow: "hidden", "$max-md": { width: '100vw', maxW: '100vw', height: '100dvh', rounded: 0, borderWidth: 0 }, children: [_jsx(DialogTitle, { position: "absolute", width: 1, height: 1, overflow: "hidden", opacity: 0, children: "Search" }), _jsx(CommandMenu, { groups: listed, query: query, onQueryChange: setQuery, placeholder: "Search\u2026", label: "Search", empty: keys ? 'No such key.' : query.trim() ? `Nothing matches “${query.trim()}”.` : mode === 'dev' ? 'No runs yet.' : 'No chats yet.', onBack: keys ? () => setKeys(false) : undefined, onClose: onClose })] }) }));
+    return (_jsx(Dialog, { open: true, onOpenChange: (open) => (open ? null : onClose()), children: _jsxs(DialogContent, { "data-slot": "palette", showCloseButton: false, p: 0, gap: 0, width: "100%", maxW: 640, 
+            // As tall as its rows, under a fixed top, so typing never moves the field.
+            maxH: "min(520px, 76dvh)", mt: "12dvh", mb: "auto", rounded: "$6", overflow: "hidden", "$max-md": { width: '100vw', maxW: '100vw', height: '100dvh', maxH: '100dvh', mt: 0, mb: 0, rounded: 0, borderWidth: 0 }, children: [_jsx(DialogTitle, { position: "absolute", width: 1, height: 1, overflow: "hidden", opacity: 0, children: "Search" }), _jsx(CommandMenu, { groups: listed, query: query, onQueryChange: setQuery, placeholder: "Search or jump to\u2026", label: "Search", empty: keys ? 'No such key.' : `Nothing matches “${query.trim()}”.`, onBack: keys ? () => setKeys(false) : undefined, onClose: onClose })] }) }));
 }

package/dist/Rail.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { type Host } from '@hanzo/build';
 import { type Place } from './lib/host.js';
 /** The rail's width, px. */

package/dist/Rail.js

@@ -2,7 +2,9 @@
 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, Tabs, Library, Scheduled tasks, Customize — then
-// More (Team, on a host of its own, never in Studio), and the account at the foot. It
+// More (Team, on a host of its own, then the apps in beta this reader may open
+// and Betas, the list of every app in beta; none of it in Studio), 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).
 //
@@ -26,11 +28,14 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // 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 { Clock, Code2, Ellipsis, FlaskConical, Library, MessageSquare, PanelLeft, Puzzle, Sparkles, SquareTerminal, Users, WandSparkles } from 'lucide-react';
+import { useState } from 'react';
 import { XStack, YStack } from '@hanzo/gui';
 import { route } from '@hanzo/build';
 import { DropdownMenu } from '@hanzo/ui';
+import { BetasDialog, useBetas } from './Betas.js';
 import { out } from './help.js';
+import { BETAS } from './lib/betas.js';
 import { Me } from './Me.js';
 import { app, WORKSPACE } from './lib/host.js';
 /** The rail's width, px. */
@@ -70,6 +75,10 @@ export function Rail({ host, mode, at, open, toggle, flat = false, onChat, onDev
     // The products on hosts of their own, behind More; on a phone the raised places lead it.
     // Studio offers no Team, so on a laptop it draws no More.
     const team = mode !== 'studio';
+    const { open: opened } = useBetas();
+    const [betas, setBetas] = useState(false);
+    // The apps in beta this reader may open, each where it lives.
+    const granted = BETAS.filter((b) => b.href && opened(b.id));
     const rest = [
         ...(flat
             ? [
@@ -79,8 +88,15 @@ export function Rail({ host, mode, at, open, toggle, flat = false, onChat, onDev
                 ...(team ? [{ type: 'separator', key: 'raised' }] : []),
             ]
             : []),
-        ...(team ? [{ key: 'team', label: 'Team', icon: _jsx(Users, { size: 16, "aria-hidden": true }), onSelect: () => out(WORKSPACE) }] : []),
+        ...(team
+            ? [
+                { key: 'team', label: 'Team', icon: _jsx(Users, { size: 16, "aria-hidden": true }), onSelect: () => out(WORKSPACE) },
+                ...granted.map((b) => ({ key: `beta-${b.id}`, label: b.name, icon: _jsx(Sparkles, { size: 16, "aria-hidden": true }), onSelect: () => out(b.href) })),
+                { type: 'separator', key: 'betas-rule' },
+                { key: 'betas', label: 'Betas', icon: _jsx(FlaskConical, { size: 16, "aria-hidden": true }), onSelect: () => setBetas(true) },
+            ]
+            : []),
     ];
     const Stack = flat ? XStack : YStack;
-    return (_jsxs(Stack, { "data-slot": "rail", render: "nav", "aria-label": "Products", ...(flat ? { pt: '$2', mt: '$2', borderTopWidth: 1, borderColor: '$borderColor', gap: '$1' } : { width: RAIL, flex: 1, pt: '$2', pb: '$2', gap: 8 }), shrink: 0, items: "center", children: [toggle ? (_jsx(YStack, { pb: 8, children: _jsx(Toggle, { open: open, onPress: toggle }) })) : null, _jsx(Mark, { label: "Chat", on: mode === 'chat', onPress: onChat, "data-slot": "rail-chat", children: _jsx(MessageSquare, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Dev", on: mode === 'dev' && !here, onPress: onDev, "data-slot": "rail-dev", children: _jsx(Code2, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Studio", on: mode === 'studio', onPress: onStudio, "data-slot": "rail-studio", children: _jsx(WandSparkles, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Tabs", on: mode === 'tabs', onPress: onTabs, "data-slot": "rail-tabs", children: _jsx(SquareTerminal, { 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 }) })] })), rest.length ? (_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 })) : null, _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 }) }), _jsx(Mark, { label: "Tabs", on: mode === 'tabs', onPress: onTabs, "data-slot": "rail-tabs", children: _jsx(SquareTerminal, { 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(BetasDialog, { open: betas, onOpenChange: setBetas, go: out }), rest.length ? (_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 })) : null, _jsx(YStack, { flex: 1 }), _jsx(Me, { host: host, narrow: true, above: flat, onOrg: onOrg })] }));
 }

package/dist/Shell.js

@@ -1069,7 +1069,7 @@ function Frame({ mode, children, navigate, back, forward, }) {
         const shortcut = (event) => {
             if (summons(event)) {
                 event.preventDefault();
-                setFinding(true);
+                setFinding((open) => !open);
             }
         };
         window.addEventListener("keydown", shortcut);

package/dist/lib/betas.d.ts

@@ -0,0 +1,38 @@
+/**
+ * The apps in beta: every Hanzo app that exists or is announced and that the
+ * Hanzo app does not offer everyone yet, once, for every list that names them —
+ * the app's Betas list (Betas.tsx) and hanzo.ai/beta's.
+ *
+ * Each is a principal switch on the cloud, `beta.<id>` (hanzo-inc/cloud
+ * apps/flags betas.go carries the same ids), decided per caller: a SuperAdmin
+ * grants one to a person from their CRM record. `opens` is the one predicate a
+ * caller asks of that answer.
+ *
+ * `href` is where the app opens once granted: its own host, or its page in the
+ * page on the developer platform. An app with none is not built yet as an app; asking for it says you
+ * want it.
+ *
+ * Only what no one has today: nothing hanzo.ai or platform.hanzo.ai already
+ * offers every user is listed here, so no switch hides anything a person has.
+ */
+export declare const GROUPS: readonly ['Business', 'Data', 'Agents', 'Build & run', 'Security', 'Creative'];
+export type Group = (typeof GROUPS)[number];
+export interface Beta {
+    /** Stable, lowercase, one word: the switch is `beta.<id>`. */
+    id: string;
+    name: string;
+    /** What it is, in one line. */
+    line: string;
+    group: Group;
+    /** Where it opens once granted; absent while it is not built as an app. */
+    href?: string;
+}
+export declare const BETAS: readonly Beta[];
+/** The switch of one app in beta. */
+export declare const key: (id: string) => string;
+/**
+ * THE predicate: whether a reader may open the app `id`. `flags` is what
+ * GET /v1/flag/platform answered for them; `sudo` is a SuperAdmin (who sees every
+ * app) or a page served off a developer's own machine. Nothing else opens one.
+ */
+export declare const opens: (id: string, flags: Record<string, boolean>, sudo: boolean) => boolean;

package/dist/lib/betas.js

@@ -0,0 +1,66 @@
+/**
+ * The apps in beta: every Hanzo app that exists or is announced and that the
+ * Hanzo app does not offer everyone yet, once, for every list that names them —
+ * the app's Betas list (Betas.tsx) and hanzo.ai/beta's.
+ *
+ * Each is a principal switch on the cloud, `beta.<id>` (hanzo-inc/cloud
+ * apps/flags betas.go carries the same ids), decided per caller: a SuperAdmin
+ * grants one to a person from their CRM record. `opens` is the one predicate a
+ * caller asks of that answer.
+ *
+ * `href` is where the app opens once granted: its own host, or its page in the
+ * page on the developer platform. An app with none is not built yet as an app; asking for it says you
+ * want it.
+ *
+ * Only what no one has today: nothing hanzo.ai or platform.hanzo.ai already
+ * offers every user is listed here, so no switch hides anything a person has.
+ */
+export const GROUPS = ['Business', 'Data', 'Agents', 'Build & run', 'Security', 'Creative'];
+/** The developer platform, where a module in beta opens at its own address for anyone who has it. */
+const PLATFORM = 'https://platform.hanzo.ai';
+export const BETAS = [
+    { id: 'crm', name: 'CRM', line: 'Companies, contacts and deals, per org', group: 'Business', href: `${PLATFORM}/crm` },
+    { id: 'erp', name: 'ERP', line: 'Items, sales, purchasing, accounting and HR', group: 'Business', href: `${PLATFORM}/erp` },
+    { id: 'commerce', name: 'Commerce', line: 'Catalog, cart, checkout and orders', group: 'Business', href: 'https://commerce-admin.hanzo.ai/admin' },
+    { id: 'books', name: 'Books', line: 'Chart of accounts, ledger and bank reconciliation', group: 'Business' },
+    { id: 'finance', name: 'Finance', line: 'One ledger for your money operations', group: 'Business', href: 'https://finance.hanzo.ai' },
+    { id: 'treasury', name: 'Treasury & Ledger', line: 'Reserves, payouts and a double-entry journal', group: 'Business' },
+    { id: 'dataroom', name: 'Data Room', line: 'Share documents and see who opened them', group: 'Business', href: 'https://dataroom.hanzo.ai' },
+    { id: 'sign', name: 'Sign', line: 'Send a PDF, get it signed, keep the record', group: 'Business', href: 'https://esign.hanzo.ai' },
+    { id: 'company', name: 'Company', line: 'Formation, documents and filings', group: 'Business', href: `${PLATFORM}/company` },
+    { id: 'cms', name: 'CMS', line: 'Pages, posts, media and navigation', group: 'Business', href: 'https://cms.hanzo.ai/admin' },
+    { id: 'helpdesk', name: 'Help Center', line: 'Tickets, teams and SLAs', group: 'Business', href: 'https://help.hanzo.ai' },
+    { id: 'marketing', name: 'Marketing', line: 'Campaigns, audiences and email sequences', group: 'Business', href: 'https://marketing.hanzo.ai' },
+    { id: 'ads', name: 'Ads', line: 'Paid campaigns, launched and paused in one place', group: 'Business', href: 'https://ads.hanzo.ai' },
+    { id: 'social', name: 'Social', line: 'Schedule posts across your social accounts', group: 'Business', href: 'https://social.hanzo.ai' },
+    { id: 'tel', name: 'Telecom', line: 'Phone numbers, calls and messages', group: 'Business', href: `${PLATFORM}/tel` },
+    { id: 'risk', name: 'Risk', line: 'AML monitoring and fraud on one engine', group: 'Business', href: 'https://aml.hanzo.ai' },
+    { id: 'idv', name: 'Identity Verification', line: 'KYC, KYB and AML vendors behind one interface', group: 'Business' },
+    { id: 'base', name: 'Base', line: 'Data, users, files and live updates per org', group: 'Data', href: 'https://base.hanzo.ai' },
+    { id: 'analytics', name: 'Analytics', line: 'Privacy-first product analytics', group: 'Data', href: 'https://analytics.hanzo.ai' },
+    { id: 'insights', name: 'Insights', line: 'Funnels, session replay, flags and experiments', group: 'Data', href: 'https://insights.hanzo.ai' },
+    { id: 'search', name: 'Search', line: 'Keyword and meaning in one query', group: 'Data', href: `${PLATFORM}/search` },
+    { id: 'world', name: 'World', line: 'A live map of every model and AI workload', group: 'Data', href: 'https://world.hanzo.ai' },
+    { id: 'crawl', name: 'Crawl', line: 'Turn a website into clean Markdown', group: 'Data', href: `${PLATFORM}/crawl` },
+    { id: 'operative', name: 'Operative', line: 'A desktop in a container, driven by a model', group: 'Agents' },
+    { id: 'tasks', name: 'Tasks', line: 'Durable execution for long-running work', group: 'Agents', href: `${PLATFORM}/tasks` },
+    { id: 'functions', name: 'Functions', line: 'Serverless functions, no servers to run', group: 'Build & run', href: `${PLATFORM}/functions` },
+    { id: 'visor', name: 'Visor', line: 'Provision and watch VMs and bare metal', group: 'Build & run', href: 'https://visor.hanzo.ai' },
+    { id: 'edge', name: 'Edge', line: 'Compute close to your users', group: 'Build & run', href: `${PLATFORM}/edge` },
+    { id: 'registry', name: 'Registry', line: 'A container registry signed in with Hanzo', group: 'Build & run', href: `${PLATFORM}/registry` },
+    { id: 'ci', name: 'CI', line: 'From source to a signed image', group: 'Build & run', href: 'https://ci.hanzo.ai' },
+    { id: 'kms', name: 'KMS', line: 'Secrets held per org, never in code', group: 'Security', href: 'https://kms.hanzo.ai' },
+    { id: 'guard', name: 'Guard', line: 'Stops prompt injection and leaks in model calls', group: 'Security' },
+    { id: 'sentinel', name: 'Sentinel', line: 'Errors and slow requests, caught early', group: 'Security', href: 'https://sentry.hanzo.ai' },
+    { id: 'authz', name: 'Authz', line: 'Fine-grained authorization, Zanzibar style', group: 'Security', href: `${PLATFORM}/authz` },
+    { id: 'hsm', name: 'HSM', line: 'Hardware-backed keys across cloud KMSs', group: 'Security', href: `${PLATFORM}/hsm` },
+    { id: 'oto', name: 'Oto', line: 'Sound effects and Foley for film and games', group: 'Creative' },
+];
+/** The switch of one app in beta. */
+export const key = (id) => `beta.${id}`;
+/**
+ * THE predicate: whether a reader may open the app `id`. `flags` is what
+ * GET /v1/flag/platform answered for them; `sudo` is a SuperAdmin (who sees every
+ * app) or a page served off a developer's own machine. Nothing else opens one.
+ */
+export const opens = (id, flags, sudo) => sudo || flags[key(id)] === true;

package/dist/lib/session.d.ts

@@ -153,12 +153,14 @@ export declare function home(): string | null;
  */
 export declare function role(o: string | null): string | null;
 /**
- * Who the token names — its display name and email — or null. The IAM user says
+ * Who the token names — its display name (the username when it has none; `display`
+ * is the display name alone) and email — or null. The IAM user says
  * the same once userinfo answers; this is the answer before it, so a signed-in
  * reader is never drawn as a stranger while it is asked.
  */
 export declare function named(): {
     name: string;
+    display: string;
     email: string;
 } | null;
 /**

package/dist/lib/session.js

@@ -385,7 +385,8 @@ export function role(o) {
     return null;
 }
 /**
- * Who the token names — its display name and email — or null. The IAM user says
+ * Who the token names — its display name (the username when it has none; `display`
+ * is the display name alone) and email — or null. The IAM user says
  * the same once userinfo answers; this is the answer before it, so a signed-in
  * reader is never drawn as a stranger while it is asked.
  */
@@ -394,7 +395,7 @@ export function named() {
     if (!c)
         return null;
     const text = (k) => (typeof c[k] === 'string' ? c[k] : '');
-    return { name: text('displayName') || text('name'), email: text('email') };
+    return { name: text('displayName') || text('name'), display: text('displayName'), email: text('email') };
 }
 /**
  * The reader's account as IAM keys a membership: `<home org>/<username>`, or null.

package/dist/lib/title.d.ts

@@ -5,3 +5,5 @@
  * characters with an ellipsis; `fallback` when nothing readable is left.
  */
 export declare function tidy(title: string | null | undefined, max?: number, fallback?: string): string;
+/** A name's first word, its first letter capitalised ("z" → "Z", "ada lovelace" → "Ada"), or '' for none. */
+export declare function given(name: string): string;