@hanzo/rooms 0.1.72 → 0.1.74

package/dist/Column.js

@@ -10,7 +10,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 //
 // The bell is the org's run activity (@hanzo/build `useSessions`): the runs
 // that moved last, each one press from its page, and Notifications in Settings.
-// The search opens the filter over Recents (⌘K / Ctrl+K from anywhere, `seek`).
+// The search opens the palette (Palette.tsx; ⌘K / Ctrl+K from anywhere).
 //
 // Dev's places are @hanzo/build's `nav`, the one list every rail draws, each a
 // row under a quiet group label.
@@ -19,11 +19,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // double-clicked back (@hanzo/build's `Grip`), kept per browser. Pulled in past
 // its floor it shuts (`onShut`), as the sidebar's toggle shuts it.
 import { Text, XStack, YStack } from '@hanzo/gui';
-import { Bell, Search, Settings2, SquarePen, X } from 'lucide-react';
+import { Bell, Search, Settings2, SquarePen } from 'lucide-react';
 import { DOTS, Grip, nav, NEW, path as written, useSessions } from '@hanzo/build';
 import { DropdownMenu } from '@hanzo/ui';
 import { Sidebar, SidebarIconButton, SidebarItem, StatusDot } from '@hanzo/ui/chat';
-import { useEffect, useId, useRef, useState } from 'react';
+import { useId } from 'react';
 import { Made } from './Me.js';
 import { Recents } from './Recents.js';
 import { Setup } from './Setup.js';
@@ -89,11 +89,7 @@ function Activity({ host }) {
     ];
     return (_jsx(DropdownMenu, { minWidth: 280, trigger: _jsx(XStack, { render: "button", "aria-label": "Activity", ...{ title: 'Activity' }, ...HEAD, items: "center", justify: "center", cursor: "pointer", opacity: 0.7, hoverStyle: { bg: '$hover', opacity: 1 }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: _jsx(Bell, { size: 16, "aria-hidden": true }) }), items: items }));
 }
-export function Column({ host, mode, thread, go, onShut, seek = 0, drawer = false, foot, places, }) {
-    const [words, setWords] = useState('');
-    // The search field shows once asked for, and while it holds words.
-    const [seeking, setSeeking] = useState(false);
-    const field = useRef(null);
+export function Column({ host, mode, thread, go, onShut, onSeek, drawer = false, foot, places, }) {
     // The desktop sidebar and a phone's drawer can both be in the page: each names its own group labels.
     const uid = useId();
     const span = useSpan(SPAN, WIDTH, FLOOR, CEIL);
@@ -105,27 +101,9 @@ export function Column({ host, mode, thread, go, onShut, seek = 0, drawer = fals
         empty();
         go(talk());
     };
-    const ask = () => {
-        setSeeking(true);
-        requestAnimationFrame(() => field.current?.focus());
-    };
-    const done = () => {
-        setWords('');
-        setSeeking(false);
-    };
-    useEffect(() => {
-        if (seek)
-            ask();
-    }, [seek]);
     return (_jsxs(YStack, { "data-slot": "app-column", ref: drawer ? undefined : span.ref, 
         // inline-style: `--span`, the width a drag rewrites on the element itself (span.ts); no prop sets a variable.
-        style: drawer ? undefined : span.style, position: "relative", flex: drawer ? 1 : undefined, shrink: drawer ? 1 : 0, minW: 0, height: "100%", width: drawer ? undefined : 'var(--span)', children: [_jsxs(Sidebar, { "data-slot": "app-rail", role: "navigation", "aria-label": brand(), ...(drawer ? { ...pane(), ...FLOAT } : { bg: 'transparent', borderWidth: 0 }), ...FILL, px: "$2", pt: drawer ? '$2' : 0, pb: "$2", gap: "$0", children: [_jsxs(XStack, { "data-slot": "app-head", items: "center", gap: "$1", pl: "$2", pr: 2, height: 52, shrink: 0, minW: 0, children: [_jsx(Text, { flex: 1, minW: 0, fontSize: 18, lineHeight: 24, fontWeight: "600", color: "$ink", numberOfLines: 1, children: wordmark(mode) }), _jsx(Activity, { host: host }), mode === 'studio' ? null : (_jsx(SidebarIconButton, { label: mode === 'chat' ? 'Search chats' : 'Search runs', onPress: seeking ? done : ask, "aria-expanded": seeking || !!words, ...HEAD, children: _jsx(Search, { size: 16, "aria-hidden": true }) }))] }), seeking || words ? (_jsxs(XStack, { "data-slot": "app-filter", items: "center", gap: "$2", pl: "$3", pr: "$1", height: 36, rounded: 999, borderWidth: 1, borderColor: "$borderColor", bg: "$edge", shrink: 0, mb: "$1.5", children: [_jsx(Search, { size: 15, "aria-hidden": true, color: "var(--soft, var(--muted-foreground))" }), _jsx(Text, { render: _jsx("input", { ref: field, value: words, onChange: (e) => setWords(e.target.value), onKeyDown: (e) => {
-                                        if (e.key === 'Escape')
-                                            done();
-                                    }, onBlur: () => {
-                                        if (!words)
-                                            setSeeking(false);
-                                    }, placeholder: mode === 'chat' ? 'Search chats' : 'Search runs', "aria-label": "Filter recents" }), flex: 1, minW: 0, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit", fontSize: "$3" }), words ? (_jsx(SidebarIconButton, { label: "Clear search", onPress: done, width: 28, height: 28, rounded: 999, children: _jsx(X, { size: 14, "aria-hidden": true }) })) : null] })) : null, mode === 'chat' ? (_jsx(YStack, { role: "list", gap: 2, shrink: 0, children: _jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { "data-slot": "app-new", ...ROW, active: !thread, bg: "transparent", hoverStyle: { bg: '$hover' }, icon: _jsx(SquarePen, { size: 16, "aria-hidden": true }), onPress: create, ...keys(create), children: _jsx(Text, { fontSize: "$3", color: "$ink", children: "New chat" }) }) }) })) : (_jsx(YStack, { "data-slot": "app-places", shrink: 0, children: groups.map((g, i) => (_jsxs(YStack, { pt: i ? '$2' : 0, children: [i ? (_jsx(Text, { id: `${uid}-${g.id}`, pl: "$2", pb: 2, fontSize: "$3", color: "$soft", children: g.label })) : null, _jsx(YStack, { role: "list", "aria-labelledby": i ? `${uid}-${g.id}` : undefined, "aria-label": i ? undefined : g.label, gap: 1, children: g.links.map((link) => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, ...(link.id === NEW ? { 'data-slot': 'app-new' } : {}), active: link.active, icon: link.id === NEW ? _jsx(SquarePen, { size: 16, "aria-hidden": true }) : link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: _jsx(Text, { fontSize: "$3", color: link.active ? '$ink' : '$quiet', children: link.label }) }) }, link.id))) })] }, g.id))) })), mode === 'studio' ? null : _jsx(Recents, { host: host, mode: mode, thread: thread, words: words, onOpen: open, onNew: create }), _jsxs(YStack, { gap: "$2", pt: "$2", shrink: 0, children: [_jsx(Made, {}), _jsx(Setup, {})] }), foot] }), drawer ? null : (_jsx(Grip, { side: "left", span: span.span, floor: FLOOR, ceil: CEIL, reset: WIDTH, onSpan: span.move, onKeep: span.keep, onShut: onShut, label: "Resize sidebar", 
+        style: drawer ? undefined : span.style, position: "relative", flex: drawer ? 1 : undefined, shrink: drawer ? 1 : 0, minW: 0, height: "100%", width: drawer ? undefined : 'var(--span)', children: [_jsxs(Sidebar, { "data-slot": "app-rail", role: "navigation", "aria-label": brand(), ...(drawer ? { ...pane(), ...FLOAT } : { bg: 'transparent', borderWidth: 0 }), ...FILL, px: "$2", pt: drawer ? '$2' : 0, pb: "$2", gap: "$0", children: [_jsxs(XStack, { "data-slot": "app-head", items: "center", gap: "$1", pl: "$2", pr: 2, height: 52, shrink: 0, minW: 0, children: [_jsx(Text, { flex: 1, minW: 0, fontSize: 18, lineHeight: 24, fontWeight: "600", color: "$ink", numberOfLines: 1, children: wordmark(mode) }), _jsx(Activity, { host: host }), _jsx(SidebarIconButton, { label: "Search", onPress: onSeek, "aria-haspopup": "dialog", ...HEAD, children: _jsx(Search, { size: 16, "aria-hidden": true }) })] }), mode === 'chat' ? (_jsx(YStack, { role: "list", gap: 2, shrink: 0, children: _jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { "data-slot": "app-new", ...ROW, active: !thread, bg: "transparent", hoverStyle: { bg: '$hover' }, icon: _jsx(SquarePen, { size: 16, "aria-hidden": true }), onPress: create, ...keys(create), children: _jsx(Text, { fontSize: "$3", color: "$ink", children: "New chat" }) }) }) })) : (_jsx(YStack, { "data-slot": "app-places", shrink: 0, children: groups.map((g, i) => (_jsxs(YStack, { pt: i ? '$2' : 0, children: [i ? (_jsx(Text, { id: `${uid}-${g.id}`, pl: "$2", pb: 2, fontSize: "$3", color: "$soft", children: g.label })) : null, _jsx(YStack, { role: "list", "aria-labelledby": i ? `${uid}-${g.id}` : undefined, "aria-label": i ? undefined : g.label, gap: 1, children: g.links.map((link) => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, ...(link.id === NEW ? { 'data-slot': 'app-new' } : {}), active: link.active, icon: link.id === NEW ? _jsx(SquarePen, { size: 16, "aria-hidden": true }) : link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: _jsx(Text, { fontSize: "$3", color: link.active ? '$ink' : '$quiet', children: link.label }) }) }, link.id))) })] }, g.id))) })), mode === 'studio' ? null : _jsx(Recents, { host: host, mode: mode, thread: thread, onOpen: open, onNew: create }), _jsxs(YStack, { gap: "$2", pt: "$2", shrink: 0, children: [_jsx(Made, {}), _jsx(Setup, {})] }), foot] }), drawer ? null : (_jsx(Grip, { side: "left", span: span.span, floor: FLOOR, ceil: CEIL, reset: WIDTH, onSpan: span.move, onKeep: span.keep, onShut: onShut, label: "Resize sidebar", 
                 // In the gutter between the sidebar and the panel, not over the sidebar's own rows.
                 r: GUTTER_END, width: "var(--pane-gap)" }))] }));
 }

package/dist/Me.d.ts

@@ -1,4 +1,6 @@
 import { type Host } from '@hanzo/build';
+/** What the menu reads of its host: who is signed in, in which organization, and how they leave. */
+export type Who = Pick<Host, 'api' | 'token' | 'org' | 'person' | 'signOut'>;
 /** One organization as the menu draws it. */
 export interface Org {
     name: string;
@@ -10,7 +12,7 @@ export interface Org {
 export declare const initials: (name: string) => string;
 /** The person's picture, or their initials. */
 export declare function Face({ host, size }: {
-    host: Host;
+    host: Who;
     size?: number;
 }): import("react").JSX.Element;
 /**
@@ -20,10 +22,13 @@ export declare function Face({ host, size }: {
  */
 export declare const upgrade: (family: string | null | undefined) => string;
 export declare function Me({ host, narrow, above, onOrg, }: {
-    host: Host;
+    host: Who;
     /** The rail's: the face alone, the menu opening beside it. */
     narrow?: boolean;
-    /** The menu opens above the face, not beside it: the rail laid along a phone drawer's foot. */
+    /**
+     * The menu opens above the face, not beside it: the rail laid along a phone
+     * drawer's foot. That copy leaves ⌘/ to the rail's own, so one press opens one dialog.
+     */
     above?: boolean;
     /** Work in another organization: picked, then the app opened in it. */
     onOrg: (org: string) => void;

package/dist/Me.js

@@ -1,51 +1,62 @@
 'use client';
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// The account row at the foot of the app's column, and the menu it opens.
+// The account row and the menu it opens: the one account menu. The app's rail
+// draws it for Chat, Dev and Studio (Rail.tsx) and the shell's sidebar for every
+// other app (Shell.tsx).
 //
-// The row says who is signed in and where: the person's face or initials, their
-// name, and their role in the organization they work in. The menu lists every
-// organization the token names — the personal one first, with its plan — and
-// switches with `pick()` (lib/auth/session.ts), the one switch the app has.
+// Top to bottom: who, with their plan, a row whose › opens the account itself;
+// then Upgrade plan, Personalization, Profile and Settings (⌘, / Ctrl+,); then
+// Help ›, the site's own pages and the keyboard shortcuts (⌘/ / Ctrl+/ from
+// anywhere); and Log out. Every row opens a real destination: Settings'
+// sections through `showSettings` (open.ts), which the app answers with the
+// builder's Settings (dev.tsx) and the shell with its own pane; the plans on the
+// pay site (`leave`); the site's pages through `site()`, so hanzo.team names
+// hanzo.ai (help.ts).
 //
-// THE PLAN LEADS: @hanzo/build's `Meter`, the block every account menu opens
-// with — the plan by its family (`Max` with `20x` beside it) and, on a plan, its
-// windows as shares; the free allowance left today on Free; the balance only
-// for an account with no plan, whose meter it is. Credits are Billing's, so a
-// plan never sits beside a balance here.
-//
-// Under the list: Create organization, Organization settings, and Hanzo Team —
-// opened in the same organization for a team, offered as "Create a team" for a
-// personal one. Then Settings, Usage, Billing, API keys, the plans, help and Log
-// out. A SuperAdmin also gets All organizations (support mode).
+// THE ACCOUNT'S › LEADS WITH THE PLAN: @hanzo/build's `Meter`, the plan by its
+// family (`Max` with `20x` beside it) and, on a plan, its windows as shares; the
+// free allowance left today on Free; the balance only for an account with no
+// plan, whose meter it is. Then every organization the token names — the
+// 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).
 //
 // 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`,
 // the plan from billing and the limits. An organization is created by the same
-// `POST /v1/account/orgs` the no-organization gate uses (components/workspace/
-// Orgs.tsx); the next load mints a token that carries it.
+// `POST /v1/account/orgs` the no-organization gate uses (Orgs.tsx); the next load
+// mints a token that carries it.
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Popover, SizableText, usePopperContextSlow, View, XStack, YStack } from '@hanzo/gui';
-import { Building2, ChevronLeft, ChevronRight, ChevronsUpDown, CreditCard, ExternalLink, Gauge, KeyRound, LifeBuoy, LogOut, Mail, Plus, Settings, Sparkles, Users, X } from 'lucide-react';
-import { label, Meter, path, said as spoken, useStanding, useWho } from '@hanzo/build';
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { ArrowUpRight, Building2, Check, ChevronsUpDown, CircleHelp, CircleUserRound, Download, FileText, Info, Keyboard, LifeBuoy, LogOut, Palette, Plus, ScrollText, Settings, ShieldCheck, Sparkles, Users, X, } from 'lucide-react';
+import { label, Meter, said as spoken, useStanding } from '@hanzo/build';
 import { useOrganizations } from '@hanzo/iam/react';
-import { Button, Dialog, DialogContent, DialogTitle, Input } from '@hanzo/ui';
-import { glass } from '@hanzo/ui/glass';
+import { Button, Dialog, DialogContent, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Input, Kbd, } from '@hanzo/ui';
 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 { 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';
-/** The documentation Get help opens. */
-const DOCS = 'https://docs.hanzo.ai/docs/dev';
 /** Where an organization's own settings live: a page of the site (`site()`), not of the app. */
 const ORG_SETTINGS = '/settings/organization';
-/** The organization's API keys: one home, the platform's keys page, never a second copy in an app. */
-const KEYS = 'https://platform.hanzo.ai/api-keys';
 /** An organization this tab created, until the token carries it. */
 const MADE = 'hanzo:org:made';
+/** Each Help page's icon, by its key in help.ts. */
+const ICONS = {
+    help: _jsx(CircleHelp, { size: 16, "aria-hidden": true }),
+    center: _jsx(ShieldCheck, { size: 16, "aria-hidden": true }),
+    releases: _jsx(ScrollText, { size: 16, "aria-hidden": true }),
+    download: _jsx(Download, { size: 16, "aria-hidden": true }),
+    terms: _jsx(FileText, { size: 16, "aria-hidden": true }),
+    privacy: _jsx(Info, { size: 16, "aria-hidden": true }),
+};
 /** A role as a person reads it: `owner` → Owner. */
 const said = (role) => (role ? role.charAt(0).toUpperCase() + role.slice(1) : '');
 /** The first letters of a name, at most two: Antje Worring → AW. */
@@ -108,48 +119,12 @@ export function Face({ host, size = 28 }) {
     const p = host.person;
     return (_jsx(XStack, { width: size, height: size, rounded: 9999, items: "center", justify: "center", bg: "$raised", overflow: "hidden", shrink: 0, borderWidth: 1, borderColor: "$borderColor", children: p?.avatar ? (_jsx("img", { src: p.avatar, alt: "", width: size, height: size })) : (_jsx(SizableText, { size: "$1", fontWeight: "600", color: "$ink", children: initials(p?.name || p?.email || '') })) }));
 }
-/** One row of the menu: a real button, so Enter, Space and focus are the browser's. */
-function Item({ icon, label, sub, checked, onPress, trail, }) {
-    const radio = checked !== undefined;
-    return (_jsxs(XStack, { render: "button", ...{ role: radio ? 'menuitemradio' : 'menuitem' }, "aria-checked": radio ? checked : undefined, "data-item": "", onPress: onPress, items: "center", gap: "$2.5", px: "$2", minH: 30, py: 4, rounded: "$3", bg: checked ? '$edge' : 'transparent', hoverStyle: { bg: '$hover' }, focusVisibleStyle: { bg: '$hover', outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, cursor: "pointer", width: "100%", children: [icon ? (_jsx(XStack, { width: 20, justify: "center", shrink: 0, opacity: 0.8, children: icon })) : null, _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, text: "left", children: label }), sub ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, text: "left", children: sub })) : null] }), trail] }));
+/** A row's face: its icon in a 16px well, its words, and what trails them. */
+function Line({ icon, children, sub, trail }) {
+    return (_jsxs(_Fragment, { children: [_jsx(XStack, { width: 16, height: 16, items: "center", justify: "center", shrink: 0, children: icon }), _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: children }), sub ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: sub })) : null] }), trail] }));
 }
-const Rule = () => _jsx(XStack, { height: 1, bg: "$borderColor", my: "$1", mx: "$1" });
-const Label = ({ children }) => (_jsx(SizableText, { size: "$1", color: "$soft", px: "$2", pt: "$1.5", pb: "$1", children: children }));
 /** An organization's mark in the list: its initials on a rounded square. */
-const Mark = ({ org }) => (_jsx(XStack, { width: 20, height: 20, rounded: "$2", items: "center", justify: "center", bg: "$raised", shrink: 0, children: org.personal ? (_jsx(SizableText, { size: "$1", fontWeight: "600", color: "$ink", children: initials(org.display) })) : (_jsx(Building2, { size: 12, "aria-hidden": true })) }));
-/** Arrows, Home and End move between the menu's rows; Escape closes it. */
-function rove(e, close) {
-    const rows = [...e.currentTarget.querySelectorAll('[data-item]')];
-    const at = rows.indexOf(document.activeElement);
-    const to = e.key === 'ArrowDown' ? (at + 1) % rows.length : e.key === 'ArrowUp' ? (at - 1 + rows.length) % rows.length : e.key === 'Home' ? 0 : e.key === 'End' ? rows.length - 1 : -2;
-    if (e.key === 'Escape') {
-        e.preventDefault();
-        close();
-        return;
-    }
-    if (to === -2 || !rows.length)
-        return;
-    e.preventDefault();
-    rows[to]?.focus();
-}
-/**
- * The menu grows once the plan is read (`Meter`), after it was placed, and the
- * popover follows its anchor, not its own size. So it is placed again whenever
- * its content changes size, and never hangs over the row it opens from.
- */
-function Refit({ children }) {
-    const { update } = usePopperContextSlow();
-    const box = useRef(null);
-    useEffect(() => {
-        const node = box.current;
-        if (!node || typeof ResizeObserver === 'undefined')
-            return;
-        const watch = new ResizeObserver(() => update());
-        watch.observe(node);
-        return () => watch.disconnect();
-    }, [update]);
-    return (_jsx(View, { render: _jsx("div", { ref: box }), self: "stretch", minW: 0, children: children }));
-}
+const Mark = ({ org }) => (_jsx(XStack, { width: 16, height: 16, rounded: "$2", items: "center", justify: "center", bg: "$raised", shrink: 0, children: org.personal ? (_jsx(SizableText, { size: "$1", fontWeight: "600", color: "$ink", children: initials(org.display).charAt(0) })) : (_jsx(Building2, { size: 12, "aria-hidden": true })) }));
 /**
  * The plans row, named by the plan the organization is on: Enterprise and
  * Agency are plans a person stays on, so the row names theirs; every other
@@ -158,66 +133,62 @@ function Refit({ children }) {
 export const upgrade = (family) => family === 'Enterprise' ? 'Enterprise plan' : family === 'Agency' ? 'Agency plan' : 'Upgrade plan';
 /** The keys a row prints, in this platform's spelling. */
 const mac = () => typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
-/** A row's keys at its end, quiet. */
-const Keys = ({ children }) => (_jsx(SizableText, { size: "$1", color: "$soft", shrink: 0, children: children }));
-/** A row that opens a page of the menu. */
-const More = () => _jsx(ChevronRight, { size: 14, "aria-hidden": true, opacity: 0.6 });
 export function Me({ host, narrow = false, above = false, onOrg, }) {
-    const menu = useWho();
-    const [page, setPage] = useState('main');
+    const [open, setOpen] = useState(false);
+    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 content = useRef(null);
     const current = host.org;
     const all = useOrgs(current);
     const here = all.find((o) => o.name === current) ?? null;
     const personal = all.find((o) => o.personal) ?? null;
     const target = useMemo(() => ({ api: host.api, token: host.token, org: host.org }), [host.api, host.token, host.org]);
-    const read = useStanding(target, menu.open);
-    const other = usePlan(personal && personal.name !== current ? personal.name : null, menu.open);
+    const read = useStanding(target, open);
+    const other = usePlan(personal && personal.name !== current ? personal.name : null, open);
     const planFor = (o) => (o.name === current ? spoken(read.value?.label ?? null) : o.personal ? other : '');
     const who = host.person?.name || host.person?.email || '';
     const plan = spoken(read.value?.label ?? null);
     const apple = mac();
-    // Each page opens on its first row, once it is drawn — after the popover has
-    // placed its own focus — so the keys reach the rows at once.
-    const land = (node) => {
-        content.current = node;
-        if (!node)
+    useEffect(() => {
+        if (above)
             return;
-        requestAnimationFrame(() => requestAnimationFrame(() => (node.querySelector('[data-item][aria-checked="true"]') ?? node.querySelector('[data-item]'))?.focus()));
-    };
-    const turn = (to) => {
-        setPage(to);
-        requestAnimationFrame(() => land(content.current));
-    };
-    const toggle = () => {
-        setPage('main');
-        menu.toggle();
-    };
-    const close = () => {
-        menu.onOpenChange(false);
-        row.current?.focus();
-    };
-    const go = (p) => {
-        menu.onOpenChange(false);
-        host.go(p);
+        const press = (e) => {
+            if (!asked(e))
+                return;
+            e.preventDefault();
+            setOpen(false);
+            setKeys(true);
+        };
+        window.addEventListener('keydown', press);
+        return () => window.removeEventListener('keydown', press);
+    }, [above]);
+    // Focus goes back to the row only when nothing the menu opened (a dialog) took it.
+    const back = (e) => {
+        e.preventDefault();
+        requestAnimationFrame(() => {
+            const now = document.activeElement;
+            if (!now || now === document.body)
+                row.current?.focus();
+        });
     };
-    const back = (title) => _jsx(Item, { icon: _jsx(ChevronLeft, { size: 15, "aria-hidden": true }), label: title, onPress: () => turn('main') });
     if (!host.person)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsxs(Popover, { open: menu.open, onOpenChange: (open) => {
-                    if (open)
-                        setPage('main');
-                    menu.onOpenChange(open);
-                }, placement: narrow && !above ? 'right-end' : above ? 'top-end' : 'top-start', allowFlip: true, stayInFrame: true, offset: 8, children: [_jsx(Popover.Anchor, { width: narrow ? undefined : '100%', children: _jsxs(XStack, { ref: (el) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(DropdownMenu, { open: open, onOpenChange: (next) => {
+                    setOpen(next);
+                    if (next)
+                        return;
+                    setAccount(false);
+                    setHelp(false);
+                }, placement: narrow && !above ? 'right-end' : above ? 'top-end' : 'top-start', children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(XStack, { ref: (el) => {
                                 row.current = el instanceof HTMLElement ? el : null;
-                            }, render: "button", "data-slot": "me", "aria-label": `Account: ${[who, current].filter(Boolean).join(' · ')}`, ...{ title: who }, "aria-haspopup": "menu", "aria-expanded": menu.open, onPress: toggle, 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 })] }))] }) }), _jsx(Popover.Content, { ...glass(2), items: "stretch", borderWidth: 1, rounded: "$5", p: "$1", width: 240, maxW: "calc(100vw - 16px)", maxH: "calc(100dvh - 32px)", overflowY: "auto", overflowX: "hidden", children: _jsx(Refit, { children: _jsx(View, { render: _jsx("div", { ref: land, role: "menu", "aria-label": "Account", onKeyDown: (e) => rove(e, close) }), self: "stretch", minW: 0, children: page === 'main' ? (_jsxs(YStack, { gap: 1, children: [_jsxs(XStack, { items: "center", gap: "$2.5", px: "$2", pt: "$1.5", pb: "$2", 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 || '' })] })] }), _jsx(Rule, {}), _jsx(Item, { icon: _jsx(Gauge, { size: 15, "aria-hidden": true }), label: "Usage remaining", trail: _jsx(More, {}), onPress: () => turn('usage') }), _jsx(Item, { icon: _jsx(Building2, { size: 15, "aria-hidden": true }), label: here?.display ?? current ?? 'Organization', sub: "Organization", trail: _jsx(More, {}), onPress: () => turn('orgs') }), _jsx(Item, { icon: _jsx(KeyRound, { size: 15, "aria-hidden": true }), label: "API keys", trail: _jsx(ExternalLink, { size: 13, "aria-hidden": true, opacity: 0.6 }), onPress: () => (menu.onOpenChange(false), window.location.assign(KEYS)) }), _jsx(Item, { icon: _jsx(Settings, { size: 15, "aria-hidden": true }), label: "Settings", trail: _jsx(Keys, { children: apple ? '⌘,' : 'Ctrl+,' }), onPress: () => go(path({ kind: 'settings', section: 'general' })) }), _jsx(Rule, {}), _jsx(Item, { icon: _jsx(LifeBuoy, { size: 15, "aria-hidden": true }), label: "Help", trail: _jsx(More, {}), onPress: () => turn('help') }), host.signOut ? _jsx(Item, { icon: _jsx(LogOut, { size: 15, "aria-hidden": true }), label: "Log out", onPress: () => (menu.onOpenChange(false), host.signOut?.()) }) : null] })) : page === 'usage' ? (_jsxs(YStack, { gap: 1, children: [back('Usage remaining'), _jsx(Rule, {}), _jsx(Meter, { read: read, onPlans: () => go(path({ kind: 'screen', screen: 'plans' })), onBilling: () => go(path({ kind: 'settings', section: 'billing' })) }), _jsx(Rule, {}), _jsx(Item, { icon: _jsx(Gauge, { size: 15, "aria-hidden": true }), label: "Usage", onPress: () => go(path({ kind: 'settings', section: 'usage' })) }), _jsx(Item, { icon: _jsx(CreditCard, { size: 15, "aria-hidden": true }), label: "Billing", onPress: () => go(path({ kind: 'settings', section: 'billing' })) }), _jsx(Item, { icon: _jsx(Sparkles, { size: 15, "aria-hidden": true }), label: upgrade(read.value?.label?.name), onPress: () => go(path({ kind: 'screen', screen: 'plans' })) })] })) : page === 'orgs' ? (_jsxs(YStack, { gap: 1, children: [back('Organization'), _jsx(Rule, {}), _jsx(Label, { children: "Organizations" }), _jsx(YStack, { role: "group", "aria-label": "Organizations", gap: 2, children: all.map((o) => (_jsx(Item, { icon: _jsx(Mark, { org: o }), label: o.display, sub: [o.personal ? 'Personal' : said(o.role), planFor(o)].filter(Boolean).join(' · '), checked: o.name === current, onPress: () => {
-                                                    menu.onOpenChange(false);
-                                                    if (o.name !== current)
-                                                        onOrg(o.name);
-                                                } }, o.name))) }), _jsx(Item, { icon: _jsx(Plus, { size: 15, "aria-hidden": true }), label: "Create organization", onPress: () => (menu.onOpenChange(false), setCreating(true)) }), _jsx(Item, { icon: _jsx(Settings, { size: 15, "aria-hidden": true }), label: "Organization settings", onPress: () => (menu.onOpenChange(false), window.location.assign(site(ORG_SETTINGS))) }), where().team ? null : here && !here.personal ? (_jsx(Item, { icon: _jsx(Users, { size: 15, "aria-hidden": true }), label: "Open in Hanzo Team", trail: _jsx(ExternalLink, { size: 13, "aria-hidden": true, opacity: 0.6 }), onPress: () => (menu.onOpenChange(false), window.location.assign(`${ENTRY}&org=${encodeURIComponent(here.name)}`)) })) : (_jsx(Item, { icon: _jsx(Users, { size: 15, "aria-hidden": true }), label: "Create a team", onPress: () => (menu.onOpenChange(false), setCreating(true)) })), superAdmin() ? (_jsx(Item, { icon: _jsx(Building2, { size: 15, "aria-hidden": true }), label: "All organizations", onPress: () => (menu.onOpenChange(false), setSupporting(true)) })) : null] })) : (_jsxs(YStack, { gap: 1, children: [back('Help'), _jsx(Rule, {}), _jsx(Item, { icon: _jsx(LifeBuoy, { size: 15, "aria-hidden": true }), label: "Get help", trail: _jsx(ExternalLink, { size: 13, "aria-hidden": true, opacity: 0.6 }), onPress: () => (menu.onOpenChange(false), window.open(DOCS, '_blank', 'noopener,noreferrer')) }), _jsx(Item, { icon: _jsx(Mail, { size: 15, "aria-hidden": true }), label: "Contact us", onPress: () => (menu.onOpenChange(false), window.location.assign(site('/contact'))) })] })) }) }) })] }), _jsx(Create, { open: creating, onOpenChange: setCreating }), 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)", 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)", 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] }));
+}
+/** The app's keys (help.ts `KEYS`), one row each, spelled for this platform. */
+function Shortcuts({ open, onOpenChange, apple }) {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 440, rounded: "$6", gap: "$3", children: [_jsx(DialogTitle, { children: "Keyboard shortcuts" }), _jsx(YStack, { gap: "$1", children: KEYS.map((k) => (_jsxs(XStack, { items: "center", justify: "space-between", gap: "$3", minH: 32, children: [_jsx(SizableText, { size: "$2", color: "$ink", children: k.does }), _jsx(Kbd, { children: apple ? k.mac : k.pc })] }, k.does))) })] }) }));
 }
 /**
  * The sheet that creates an organization: a name, then `POST /v1/account/orgs`,

package/dist/Palette.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+import { type ShortcutKeys } from '@hanzo/ui';
+import { type Hit } from './seek.js';
+/** A row: what it is called, its glyph, and what pressing it does. */
+export interface Action extends Hit {
+    icon?: ReactNode;
+    shortcut?: ShortcutKeys;
+    run: () => void;
+    /** Pressing it keeps the palette open. */
+    stay?: boolean;
+}
+export declare function Palette({ onClose, go, actions, }: {
+    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[];
+}): import("react").JSX.Element;

package/dist/Palette.js

@@ -0,0 +1,131 @@
+'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 Recent chats while the field is empty
+// and, for a query, Chats, Projects, Agents, Skills and Actions, each cut to its
+// best five (seek.ts `find`). A row opens where it lives: a chat at its
+// address, 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.
+//
+// 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.
+import { useEffect, useMemo, useState } from 'react';
+import { BookOpen, Bot, Code2, FolderGit2, Keyboard, LogOut, MessageCircle, Puzzle, Settings, SquarePen } from 'lucide-react';
+import { useAi } from '@hanzo/ai/react';
+import { path as written } from '@hanzo/build';
+import { Dialog, DialogContent, DialogTitle } from '@hanzo/ui';
+import { CommandMenu } from '@hanzo/ui/product/CommandMenu';
+import { ordered } from './agents.js';
+import { useCrew } from './crew.js';
+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 { 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'] },
+];
+const SKILLS = written({ kind: 'customize', tab: 'skills' });
+/** 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([]);
+    useEffect(() => {
+        const stop = new AbortController();
+        ai.http.json({ path, signal: stop.signal }).then((body) => setRows(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;
+}
+const obj = (v) => (v && typeof v === 'object' ? v : {});
+const str = (v) => (typeof v === 'string' ? v : '');
+const rows = (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))
+    .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)
+    .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 = [], }) {
+    const [query, setQuery] = useState('');
+    const [keys, setKeys] = useState(false);
+    const { threads } = useThreadList();
+    const { agents } = useCrew();
+    const made = useRead('/v1/projects', projects);
+    const known = useRead('/v1/tool/skills?activated=true', skills);
+    const signOut = useSignOut();
+    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 chats = threads.map((t) => ({
+            id: `chat-${t.id}`,
+            label: t.title || 'Untitled',
+            at: t.updatedAt,
+            icon: _jsx(MessageCircle, { ...ICON }),
+            run: () => (openThread(t.id), go(talk(t.id))),
+        }));
+        const shown = find(query, chats, [
+            { id: 'projects', label: 'Projects', items: made.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: 'actions', label: 'Actions', items: doing },
+        ]);
+        return shown.map((g) => ({
+            ...g,
+            items: g.items.map((a) => ({
+                id: a.id,
+                label: a.label,
+                icon: a.icon,
+                shortcut: a.shortcut,
+                // The palette ranked these against the query; the menu's own filter passes what it kept.
+                keywords: [query],
+                onSelect: () => {
+                    if (!a.stay)
+                        onClose();
+                    a.run();
+                },
+            })),
+        }));
+    }, [query, threads, agents, made, known, actions, go, onClose, signOut]);
+    const listed = keys
+        ? [{ id: 'keys', label: 'Keyboard shortcuts', items: KEYS.map((k) => ({ ...k, id: `key-${k.id}`, 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()}”.` : 'No chats yet.', onBack: keys ? () => setKeys(false) : undefined, onClose: onClose })] }) }));
+}

package/dist/Rail.js

@@ -3,7 +3,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // The app's rail: its products as marks down the window's left edge, in one
 // order — Chat, Dev, Studio, Library, Scheduled tasks, Customize — then More, a
 // menu of the rest, and the account at the foot. It is how the app moves
-// between its products; there is no switch anywhere else.
+// between its products; a phone, which has no rail, switches Chat and Dev in
+// its bar (Top.tsx).
 //
 // Studio is the app's third mode (@hanzo/studio at /studio), each of the three
 // opened where the reader left it.
@@ -26,26 +27,13 @@ import { Boxes, Clock, Code2, Ellipsis, FolderGit2, LayoutTemplate, Library, Lis
 import { XStack, YStack } from '@hanzo/gui';
 import { route } from '@hanzo/build';
 import { DropdownMenu } from '@hanzo/ui';
+import { out } from './help.js';
 import { Me } from './Me.js';
 import { app, TABS, WORKSPACE } from './lib/host.js';
 /** The rail's width, px. */
 export const RAIL = 48;
 /** A mark, px: a 36px square on a 44px pitch. */
 const MARK = 36;
-/**
- * Opens an address of another product in a tab of its own, through an anchor,
- * so a host that sends links out of its window (the desktop's system browser)
- * hears it as the link it is.
- */
-function out(href) {
-    const a = document.createElement('a');
-    a.href = href;
-    a.target = '_blank';
-    a.rel = 'noopener noreferrer';
-    document.body.appendChild(a);
-    a.click();
-    a.remove();
-}
 /** The places the rail raises out of Dev, by the builder address each opens. */
 const RAISED = { library: '-/artifacts', scheduled: '-/automations', customize: '-/customize' };
 /** Which raised place a builder address stands on, if any. */

package/dist/Recents.d.ts

@@ -1,11 +1,10 @@
 import { type Host } from '@hanzo/build';
 import { type Mode, type Recent } from './recent.js';
-export declare function Recents({ host, mode, thread, words, onOpen, onNew, }: {
+export declare function Recents({ host, mode, thread, onOpen, onNew, }: {
     host: Host;
     mode: Mode;
     /** The Chat conversation the pane holds, or null. */
     thread: string | null;
-    words: string;
     onOpen: (r: Recent) => void;
     /** Moves the pane to a new conversation: where it goes when the one it holds is deleted. */
     onNew: () => void;