@hanzo/rooms 0.1.82 → 0.1.84

package/dist/Palette.js

@@ -1,13 +1,17 @@
 '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.
+// 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.
 //
 // 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)
@@ -18,9 +22,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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 { BookOpen, Bot, Boxes, Clock, Code2, FolderGit2, Keyboard, LayoutTemplate, Library, ListTodo, LogOut, MessageCircle, Puzzle, Server, Settings, SquarePen } from 'lucide-react';
 import { useAi } from '@hanzo/ai/react';
-import { path as written } from '@hanzo/build';
+import { path as written, useSessions } from '@hanzo/build';
 import { Dialog, DialogContent, DialogTitle } from '@hanzo/ui';
 import { CommandMenu } from '@hanzo/ui/product/CommandMenu';
 import { ordered } from './agents.js';
@@ -30,7 +34,8 @@ 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';
+import { tidy } from './lib/title.js';
+import { find, findIn } from './seek.js';
 const ICON = { size: 16, 'aria-hidden': true };
 /** The app's keys, as Keyboard shortcuts lists them. */
 const KEYS = [
@@ -43,6 +48,17 @@ const KEYS = [
     { id: 'forward', label: 'Forward, in the desktop app', shortcut: ['Alt', 'ArrowRight'] },
 ];
 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 }) },
+];
 /** 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();
@@ -69,7 +85,7 @@ 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 = [], }) {
+export function Palette({ onClose, go, actions = [], mode = 'chat', host, }) {
     const [query, setQuery] = useState('');
     const [keys, setKeys] = useState(false);
     const { threads } = useThreadList();
@@ -77,6 +93,7 @@ export function Palette({ onClose, go, actions = [], }) {
     const made = useRead('/v1/projects', projects);
     const known = useRead('/v1/tool/skills?activated=true', skills);
     const signOut = useSignOut();
+    const runs = useSessions(host ?? null);
     const groups = useMemo(() => {
         const own = [
             { id: 'new-chat', label: 'New chat', icon: _jsx(SquarePen, { ...ICON }), run: () => (empty(), go(talk())) },
@@ -89,24 +106,46 @@ export function Palette({ onClose, go, actions = [], }) {
         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',
+            label: tidy(t.title),
             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 },
-        ]);
+        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,
+                { 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,
+            ]);
         return shown.map((g) => ({
             ...g,
             items: g.items.map((a) => ({
@@ -123,9 +162,9 @@ export function Palette({ onClose, go, actions = [], }) {
                 },
             })),
         }));
-    }, [query, threads, agents, made, known, actions, go, onClose, signOut]);
+    }, [query, threads, agents, made, known, actions, go, onClose, signOut, mode, runs]);
     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 })] }) }));
+    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 })] }) }));
 }

package/dist/Rail.d.ts

@@ -18,11 +18,9 @@ export declare function Toggle({ open, onPress, label }: {
     onPress: () => void;
     label?: string;
 }): import("react").JSX.Element;
-export declare function Rail({ host, mode, at, open, toggle, flat, onChat, onDev, onStudio, go, onOrg, }: {
+export declare function Rail({ host, mode, open, toggle, flat, onChat, onDev, onStudio, onOrg, }: {
     host: Host;
     mode: Place['mode'];
-    /** Dev's builder address, or null in Chat. */
-    at: string | null;
     /** The sidebar beside the rail is open. */
     open: boolean;
     /** Lead with the sidebar's toggle; absent where the host's bar holds it. */
@@ -33,8 +31,6 @@ export declare function Rail({ host, mode, at, open, toggle, flat, onChat, onDev
     onChat: () => void;
     onDev: () => void;
     onStudio: () => void;
-    /** Moves the app to an address of this page. */
-    go: (address: string) => void;
     /** Work in another organization. */
     onOrg: (org: string) => void;
 }): import("react").JSX.Element;

package/dist/Rail.js

@@ -1,17 +1,19 @@
 'use client';
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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, 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; a phone, which has no rail, switches Chat and Dev in
-// its bar (Top.tsx).
+// order — Chat, Dev, Studio — then More, a menu of the products on hosts of
+// their own, and the account at the foot. It is how the app moves between its
+// products; a phone, which has no rail, switches Chat and Dev in its bar
+// (Top.tsx).
 //
 // Studio is the app's third mode (@hanzo/studio at /studio), each of the three
 // opened where the reader left it.
 //
-// Library, Scheduled tasks and Customize are Dev's own places (@hanzo/build's
-// Artifacts, Automations and Customize), raised to the rail; each is lit while
-// the reader stands on it, and Dev is lit for the rest of Dev.
+// A mark is a product, and a product owns the sidebar beside the rail: Chat its
+// conversations, Dev its places (@hanzo/build's New, Projects, Issues, Library,
+// Templates, Scheduled tasks, Machines, Environments, Customize, Docs) and its
+// runs, Studio its own. Nothing of Dev's is raised to the rail, and nothing of
+// the rail's is listed inside Dev: one level of the app a place.
 //
 // It stands on the frame's floor, never cut as a pane (ground.ts): the rail and
 // the sidebar beside it are the window, and the content is the panel inset in
@@ -20,35 +22,17 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // The sidebar's toggle leads it (`toggle`) where the host has no bar of its own:
 // a browser tab. A host that is a window draws the toggle in its bar beside Back
 // and Forward (App.tsx `bar`), and its rail starts with Chat. On a phone the
-// rail lies along the foot of the drawer (`flat`), the account at its end; the
-// drawer is too narrow for every mark, so Library, Scheduled tasks and
-// Customize lead More there.
-import { Boxes, Clock, Code2, Ellipsis, FolderGit2, LayoutTemplate, Library, ListTodo, MessageSquare, PanelLeft, Puzzle, Server, SquareTerminal, Users, WandSparkles } from 'lucide-react';
+// rail lies along the foot of the drawer (`flat`), the account at its end.
+import { Code2, Ellipsis, MessageSquare, PanelLeft, SquareTerminal, Users, WandSparkles } from 'lucide-react';
 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';
+import { TABS, WORKSPACE } from './lib/host.js';
 /** The rail's width, px. */
 export const RAIL = 48;
 /** A mark, px: a 36px square on a 44px pitch. */
 const MARK = 36;
-/** The places the rail 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. */
-function raised(at) {
-    if (at === null)
-        return null;
-    const r = route(at);
-    if (r.kind === 'screen' && r.screen === 'artifacts')
-        return 'library';
-    if ((r.kind === 'screen' && r.screen === 'automations') || r.kind === 'automation')
-        return 'scheduled';
-    if (r.kind === 'customize')
-        return 'customize';
-    return null;
-}
 /** One mark: an icon button named for where it goes, its name its tooltip, lit where the reader is. */
 export function Mark({ label, on = false, onPress, children, ...rest }) {
     return (_jsx(XStack, { render: "button", "aria-label": label, ...{ title: label }, "aria-current": on ? 'page' : undefined, onPress: onPress, width: MARK, height: MARK, rounded: "$4", items: "center", justify: "center", shrink: 0, cursor: "pointer", opacity: on ? 1 : 0.62, bg: on ? '$edge' : 'transparent', hoverStyle: { bg: on ? '$edge' : '$hover', opacity: 1 }, pressStyle: { bg: '$raised' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, 
@@ -59,28 +43,12 @@ export function Mark({ label, on = false, onPress, children, ...rest }) {
 export function Toggle({ open, onPress, label }) {
     return (_jsx(Mark, { label: label ?? (open ? 'Close sidebar' : 'Open sidebar'), "data-slot": "sidebar-toggle", "aria-expanded": open, onPress: onPress, children: _jsx(PanelLeft, { size: 18, "aria-hidden": true }) }));
 }
-export function Rail({ host, mode, at, open, toggle, flat = false, onChat, onDev, onStudio, go, onOrg, }) {
-    const here = mode === 'dev' ? raised(at) : null;
-    const to = (p) => () => go(app(p));
-    // Everything else the app reaches, behind More: on a phone the raised places first, then Dev's other places, then the products on hosts of their own.
+export function Rail({ host, mode, open, toggle, flat = false, onChat, onDev, onStudio, onOrg, }) {
+    // The products on hosts of their own, behind More.
     const rest = [
-        ...(flat
-            ? [
-                { key: 'library', label: 'Library', icon: _jsx(Library, { size: 16, "aria-hidden": true }), onSelect: to(RAISED.library) },
-                { key: 'scheduled', label: 'Scheduled tasks', icon: _jsx(Clock, { size: 16, "aria-hidden": true }), onSelect: to(RAISED.scheduled) },
-                { key: 'customize', label: 'Customize', icon: _jsx(Puzzle, { size: 16, "aria-hidden": true }), onSelect: to(RAISED.customize) },
-                { type: 'separator', key: 'raised' },
-            ]
-            : []),
-        { key: 'projects', label: 'Projects', icon: _jsx(FolderGit2, { size: 16, "aria-hidden": true }), onSelect: to('-/projects') },
-        { key: 'templates', label: 'Templates', icon: _jsx(LayoutTemplate, { size: 16, "aria-hidden": true }), onSelect: to('-/templates') },
-        { key: 'issues', label: 'Issues', icon: _jsx(ListTodo, { size: 16, "aria-hidden": true }), onSelect: to('-/issues') },
-        { key: 'machines', label: 'Machines', icon: _jsx(Server, { size: 16, "aria-hidden": true }), onSelect: to('-/settings/machines') },
-        { key: 'environments', label: 'Environments', icon: _jsx(Boxes, { size: 16, "aria-hidden": true }), onSelect: to('-/settings/environments') },
-        { type: 'separator', key: 'away' },
         { key: 'tabs', label: 'Tabs', icon: _jsx(SquareTerminal, { size: 16, "aria-hidden": true }), onSelect: () => out(TABS) },
         { key: 'team', label: 'Team', icon: _jsx(Users, { size: 16, "aria-hidden": true }), onSelect: () => out(WORKSPACE) },
     ];
     const Stack = flat ? XStack : YStack;
-    return (_jsxs(Stack, { "data-slot": "rail", render: "nav", "aria-label": "Products", ...(flat ? { pt: '$2', mt: '$2', borderTopWidth: 1, borderColor: '$borderColor', gap: '$1' } : { width: RAIL, flex: 1, pt: '$2', pb: '$2', gap: 8 }), shrink: 0, items: "center", children: [toggle ? (_jsx(YStack, { pb: 8, children: _jsx(Toggle, { open: open, onPress: toggle }) })) : null, _jsx(Mark, { label: "Chat", on: mode === 'chat', onPress: onChat, "data-slot": "rail-chat", children: _jsx(MessageSquare, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Dev", on: mode === 'dev' && !here, onPress: onDev, "data-slot": "rail-dev", children: _jsx(Code2, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Studio", on: mode === 'studio', onPress: onStudio, "data-slot": "rail-studio", children: _jsx(WandSparkles, { size: 18, "aria-hidden": true }) }), flat ? null : (_jsxs(_Fragment, { children: [_jsx(Mark, { label: "Library", on: here === 'library', onPress: to(RAISED.library), "data-slot": "rail-library", children: _jsx(Library, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Scheduled tasks", on: here === 'scheduled', onPress: to(RAISED.scheduled), "data-slot": "rail-scheduled", children: _jsx(Clock, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Customize", on: here === 'customize', onPress: to(RAISED.customize), "data-slot": "rail-customize", children: _jsx(Puzzle, { size: 18, "aria-hidden": true }) })] })), _jsx(DropdownMenu, { placement: flat ? 'top-start' : 'right-start', minWidth: 220, trigger: _jsx(XStack, { render: "button", "aria-label": "More", ...{ title: 'More' }, "data-slot": "rail-more", width: MARK, height: MARK, rounded: "$4", items: "center", justify: "center", cursor: "pointer", opacity: 0.62, hoverStyle: { bg: '$hover', opacity: 1 }, pressStyle: { bg: '$raised' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, $touchable: { width: 44, height: 44 }, children: _jsx(Ellipsis, { size: 18, "aria-hidden": true }) }), items: rest }), _jsx(YStack, { flex: 1 }), _jsx(Me, { host: host, narrow: true, above: flat, onOrg: onOrg })] }));
+    return (_jsxs(Stack, { "data-slot": "rail", render: "nav", "aria-label": "Products", ...(flat ? { pt: '$2', mt: '$2', borderTopWidth: 1, borderColor: '$borderColor', gap: '$1' } : { width: RAIL, flex: 1, pt: '$2', pb: '$2', gap: 8 }), shrink: 0, items: "center", children: [toggle ? (_jsx(YStack, { pb: 8, children: _jsx(Toggle, { open: open, onPress: toggle }) })) : null, _jsx(Mark, { label: "Chat", on: mode === 'chat', onPress: onChat, "data-slot": "rail-chat", children: _jsx(MessageSquare, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Dev", on: mode === 'dev', onPress: onDev, "data-slot": "rail-dev", children: _jsx(Code2, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Studio", on: mode === 'studio', onPress: onStudio, "data-slot": "rail-studio", children: _jsx(WandSparkles, { size: 18, "aria-hidden": true }) }), _jsx(DropdownMenu, { placement: flat ? 'top-start' : 'right-start', minWidth: 220, trigger: _jsx(XStack, { render: "button", "aria-label": "More", ...{ title: 'More' }, "data-slot": "rail-more", width: MARK, height: MARK, rounded: "$4", items: "center", justify: "center", cursor: "pointer", opacity: 0.62, hoverStyle: { bg: '$hover', opacity: 1 }, pressStyle: { bg: '$raised' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, $touchable: { width: 44, height: 44 }, children: _jsx(Ellipsis, { size: 18, "aria-hidden": true }) }), items: rest }), _jsx(YStack, { flex: 1 }), _jsx(Me, { host: host, narrow: true, above: flat, onOrg: onOrg })] }));
 }

package/dist/Shell.js

@@ -77,6 +77,7 @@ import { netKey } from "./conversations.js";
 import { FIRST, SettingsList, } from "./Settings.js";
 import { Me } from "./Me.js";
 import { Palette } from "./Palette.js";
+import { tidy } from "./lib/title.js";
 import { summons } from "./seek.js";
 import { called } from "./team.js";
 import { checkoutUrl } from './lib/pay.js';
@@ -393,7 +394,7 @@ function Chats({ filter = "", onPick, }) {
     const mergedThreads = useMemo(() => {
         const list = threads.map((t) => ({
             id: t.id,
-            title: t.title || "Untitled",
+            title: tidy(t.title),
             updatedAt: t.updatedAt,
             thread: t,
         }));
@@ -409,7 +410,7 @@ function Chats({ filter = "", onPick, }) {
         }
         return list;
     }, [threads, customThreads]);
-    const found = mergedThreads.filter((t) => matches(t.title || "Untitled", filter));
+    const found = mergedThreads.filter((t) => matches(tidy(t.title), filter));
     const byId = useMemo(() => new Map(threads.map((t) => [t.id, t])), [threads]);
     // PINNED FIRST, by the server's pin (thread.tsx), then the days.
     const shown = found.filter((t) => !t.thread?.pinned);
@@ -433,7 +434,7 @@ function Chats({ filter = "", onPick, }) {
                                 const item = (_jsx(SidebarItem, { active: t.id === thread, ...(t.thread ? { pr: "$8", $touchable: { pr: 52 } } : null), onPress: () => {
                                         open(t.id);
                                         onPick?.();
-                                    }, children: _jsxs(YStack, { minW: 0, children: [_jsxs(XStack, { items: "center", gap: "$1.5", minW: 0, children: [t.kind === "call" ? _jsx(Video, { size: 13, color: "var(--muted-foreground)", "aria-label": "Call" }) : null, t.kind === "group" ? _jsx(Users, { size: 13, color: "var(--muted-foreground)", "aria-label": "Group" }) : null, _jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: t.title || "Untitled" })] }), _jsx(Span, { id: t.id, updatedAt: t.updatedAt })] }) }, t.id));
+                                    }, children: _jsxs(YStack, { minW: 0, children: [_jsxs(XStack, { items: "center", gap: "$1.5", minW: 0, children: [t.kind === "call" ? _jsx(Video, { size: 13, color: "var(--muted-foreground)", "aria-label": "Call" }) : null, t.kind === "group" ? _jsx(Users, { size: 13, color: "var(--muted-foreground)", "aria-label": "Group" }) : null, _jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: tidy(t.title) })] }), _jsx(Span, { id: t.id, updatedAt: t.updatedAt })] }) }, t.id));
                                 // A stored conversation carries its menu; a call or a group is no conversation of the store's.
                                 return t.thread ? (_jsx(ThreadRow, { t: t.thread, active: t.id === thread, listed: false, children: item }, t.id)) : (item);
                             }) }, band.label)))] }) }), _jsx(SharedWithYou, { filter: filter, onPick: onPick })] }));
@@ -455,13 +456,13 @@ function SharedWithYou({ filter, onPick }) {
             on = false;
         };
     }, []);
-    const shown = (items ?? []).filter((one) => matches(one.title || "Untitled", filter));
+    const shown = (items ?? []).filter((one) => matches(tidy(one.title), filter));
     if (shown.length === 0)
         return null;
     return (_jsx(SidebarSection, { label: "Shared with you", children: shown.map((one) => (_jsx(SidebarItem, { onPress: () => {
                 onPick?.();
                 window.location.assign(address(one.share));
-            }, children: _jsxs(YStack, { minW: 0, children: [_jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: one.title || "Untitled" }), one.by ? (_jsxs(Text, { fontSize: "$1", color: "$soft", numberOfLines: 1, children: ["From ", one.by] })) : null] }) }, one.share))) }));
+            }, children: _jsxs(YStack, { minW: 0, children: [_jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: tidy(one.title) }), one.by ? (_jsxs(Text, { fontSize: "$1", color: "$soft", numberOfLines: 1, children: ["From ", one.by] })) : null] }) }, one.share))) }));
 }
 /**
  * The projects. A run is something that happened, a project is the thing it

package/dist/Support.d.ts

@@ -5,10 +5,3 @@
  * token is.
  */
 export declare function SupportBanner(): import("react").JSX.Element;
-/**
- * Every organization, for a SuperAdmin to step into. The list and the search are
- * IAM's, a page at a time; picking one asks IAM to step in.
- */
-export declare function SupportPicker({ onClose }: {
-    onClose: () => void;
-}): import("react").JSX.Element;

package/dist/Support.js

@@ -2,40 +2,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Support mode: a SuperAdmin steps into any organization to see what it sees.
 //
-// Everything here is IAM's. The list is IAM's organization list, which answers a
-// SuperAdmin every organization and anyone else only their own; the step in and
-// the step out are IAM's `assume` and `release`, which answer the operator's own
-// token re-scoped and record each step in the organization's audit log
-// (lib/auth/session.ts `support`). This file only draws them, and only for the
-// person IAM signs as a SuperAdmin (`superAdmin`); nothing here decides who may.
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { Text, View, XStack, YStack } from '@hanzo/gui';
+// Everything here is IAM's. The list of every organization is the chooser's
+// (Orgs.tsx `Everyone`), IAM's organization list, which answers a SuperAdmin
+// every organization and anyone else only their own; the step in and the step
+// out are IAM's `assume` and `release`, which answer the operator's own token
+// re-scoped and record each step in the organization's audit log
+// (lib/session.ts `support`). This file draws the strip that says so while it
+// lasts; nothing here decides who may.
+import { useEffect, useState } from 'react';
+import { Text, XStack } from '@hanzo/gui';
 import { Button } from '@hanzo/ui';
-import { X } from 'lucide-react';
 import { useHydrated } from './lib/hydrated.js';
-import { api } from './lib/api.js';
-import { abandon, assumed, bearer, named, support } from './lib/session.js';
-import { BAD, mix } from './lib/mix.js';
-/** The banner rides above the room's sheets, the picker between them. gui carries a `calc()` to the page unchanged;
- *  its types only name custom properties. */
+import { abandon, assumed, named, support } from './lib/session.js';
+/** The banner rides above the room's sheets. gui carries a `calc()` to the page unchanged; its types only name custom properties. */
 const BANNER = 'calc(var(--z-modal) + 30)';
-const DIALOG = 'calc(var(--z-modal) + 20)';
-const SCRIM = mix('var(--pure-black)', 28, 'srgb');
-const muted = 'var(--muted-foreground)';
-/** A page of IAM's organization list: `q` narrows it, `cursor` continues it. */
-async function page(q, cursor) {
-    const query = new URLSearchParams({ limit: '20' });
-    if (q.trim())
-        query.set('q', q.trim());
-    if (cursor)
-        query.set('cursor', cursor);
-    const res = await fetch(`${api()}/v1/iam/organizations?${query}`, {
-        headers: { Authorization: `Bearer ${bearer() ?? ''}` },
-    });
-    if (!res.ok)
-        throw new Error(`IAM answered ${res.status}.`);
-    return (await res.json());
-}
 /**
  * The strip across the top of every page while a SuperAdmin is inside an
  * organization that is not theirs: which one, as whom, and the way out. It reads
@@ -63,60 +43,3 @@ export function SupportBanner() {
     };
     return (_jsxs(XStack, { role: "status", "aria-label": "Support mode", position: "fixed", t: 52, l: "50%", x: "-50%", maxW: "calc(100vw - 32px)", z: BANNER, items: "center", justify: "center", gap: 12, flexWrap: "wrap", pt: 6, pr: 8, pb: 6, pl: 16, rounded: 999, bg: "var(--foreground)", children: [_jsxs(Text, { fontSize: "$2", color: "var(--background)", children: ["Support mode: you are in ", _jsx("strong", { children: org }), who ? ` as ${who}` : '', ". IAM records it under your name."] }), _jsx(Button, { size: "sm", onClick: leave, disabled: busy, children: busy ? 'Leaving' : 'Leave' })] }));
 }
-/**
- * Every organization, for a SuperAdmin to step into. The list and the search are
- * IAM's, a page at a time; picking one asks IAM to step in.
- */
-export function SupportPicker({ onClose }) {
-    const [q, setQ] = useState('');
-    const [rows, setRows] = useState([]);
-    const [cursor, setCursor] = useState('');
-    const [loading, setLoading] = useState(false);
-    const [refused, setRefused] = useState(null);
-    const [stepping, setStepping] = useState(null);
-    // Only the newest read lands: a search typed while a page is in flight
-    // supersedes it, so a slow answer to an old query never overwrites the new one.
-    const asked = useRef(0);
-    const load = useCallback(async (query, from) => {
-        const mine = ++asked.current;
-        setLoading(true);
-        setRefused(null);
-        try {
-            const next = await page(query, from);
-            if (mine !== asked.current)
-                return;
-            setRows((had) => {
-                // IAM's cursor is a position, so an org created mid-walk can shift a row
-                // across a page edge; each org is kept once.
-                const all = from ? [...had, ...(next.organizations ?? [])] : next.organizations ?? [];
-                return all.filter((o, i) => all.findIndex((x) => x.name === o.name) === i);
-            });
-            setCursor(next.cursor ?? '');
-        }
-        catch (e) {
-            if (mine === asked.current)
-                setRefused(e instanceof Error ? e.message : 'The list did not load.');
-        }
-        finally {
-            if (mine === asked.current)
-                setLoading(false);
-        }
-    }, []);
-    useEffect(() => {
-        const id = setTimeout(() => void load(q, ''), 250);
-        return () => clearTimeout(id);
-    }, [q, load]);
-    const enter = (org) => {
-        setStepping(org);
-        setRefused(null);
-        support(org).catch((e) => {
-            setRefused(e instanceof Error ? e.message : 'IAM did not step in.');
-            setStepping(null);
-        });
-    };
-    return (_jsx(YStack, { role: "dialog", "aria-modal": true, "aria-label": "All organizations", onKeyDown: (e) => {
-            // gui types the native event; on the web it is the DOM's, which carries the key.
-            if ('key' in e && e.key === 'Escape')
-                onClose();
-        }, position: "fixed", inset: 0, z: DIALOG, bg: SCRIM, overflowY: "auto", py: "6vh", px: 16, onClick: onClose, children: _jsxs(YStack, { onClick: (e) => e.stopPropagation(), width: "100%", maxW: 560, mx: "auto", bg: "var(--background)", rounded: 16, pt: 24, px: 24, pb: 16, children: [_jsxs(XStack, { items: "flex-start", justify: "space-between", gap: 12, children: [_jsxs(YStack, { shrink: 1, minW: "auto", children: [_jsx(Text, { render: "h2", fontSize: "$7", fontWeight: "500", color: "var(--text-primary)", children: "All organizations" }), _jsx(Text, { render: "p", mt: 6, fontSize: "$3", color: muted, lineHeight: 21, children: "Support mode. Step into any organization to see its chats, agents and billing as it does. IAM records every step under your name." })] }), _jsx(Button, { variant: "ghost", size: "icon-sm", mr: -8, onClick: onClose, "aria-label": "Close", children: _jsx(X, { size: 16, "aria-hidden": true }) })] }), _jsx(Text, { render: _jsx("input", { value: q, onChange: (e) => setQ(e.target.value), placeholder: "Find an organization", "aria-label": "Find an organization", autoFocus: true }), width: "100%", mt: 16, fontSize: "$3", px: 12, py: 10, rounded: 10, borderWidth: 1, borderColor: "var(--border)", bg: "var(--background)", color: "var(--foreground)" }), _jsxs(View, { role: "list", "aria-label": "Organizations", mt: 10, display: "grid", gap: 2, children: [rows.map((o) => (_jsxs(XStack, { render: "button", role: "listitem", onClick: () => enter(o.name), disabled: stepping !== null, items: "baseline", justify: "space-between", gap: 12, width: "100%", px: 12, py: 10, rounded: 10, borderWidth: 0, bg: "transparent", cursor: "pointer", children: [_jsx(Text, { fontSize: "$3", fontWeight: "500", color: "var(--foreground)", text: "left", children: o.displayName || o.name }), _jsx(Text, { fontSize: "$2", color: muted, text: "left", children: stepping === o.name ? 'Stepping in' : o.name })] }, o.name))), !loading && rows.length === 0 && !refused ? (_jsx(Text, { render: "p", mx: 12, my: 8, fontSize: "$3", color: muted, children: "No organization matches." })) : null] }), refused ? (_jsx(Text, { render: "p", mx: 12, my: 8, fontSize: "$3", color: BAD, children: refused })) : null, cursor ? (_jsx(Button, { self: "flex-start", mt: 8, onClick: () => void load(q, cursor), disabled: loading, children: loading ? 'Loading' : 'More' })) : null] }) }));
-}

package/dist/lib/orgname.d.ts

@@ -0,0 +1,29 @@
+/**
+ * An organization's name as IAM keys it, said once for the chooser.
+ *
+ * IAM refuses a name that is not already canonical rather than rewriting it
+ * (hanzoai/iam pkg/schema/orgname.go `OrgName`: lowercasing "Admin" would make
+ * it the reserved org), so a slug typed here is checked and refused, never
+ * folded. What IS folded is a display name into the slug it suggests, the way
+ * IAM's own onboarding does it (internal/oidc/onboard.go `slugifyOrg`), so the
+ * slug shown is the slug IAM makes of the same name.
+ */
+/** The longest organization name IAM takes. */
+export declare const LONGEST = 55;
+/**
+ * The slug IAM's onboarding makes of a name: lowercase ASCII letters and digits,
+ * every other run one hyphen, none at either end, at most `LONGEST` long.
+ */
+export declare function slugify(name: string): string;
+/**
+ * Why IAM would not take `slug` as an organization's name, or null when it
+ * would. A name onboarding keeps exactly as typed: IAM's shape with single inner
+ * hyphens, since onboarding folds a double one. The names IAM holds for the
+ * platform are IAM's to refuse, in its own words.
+ */
+export declare function refusal(slug: string): string | null;
+/** Whether an organization answers what was typed: its name or its display name, in any case (IAM's `matches`). */
+export declare function matches(o: {
+    name: string;
+    display: string;
+}, typed: string): boolean;

package/dist/lib/orgname.js

@@ -0,0 +1,51 @@
+/**
+ * An organization's name as IAM keys it, said once for the chooser.
+ *
+ * IAM refuses a name that is not already canonical rather than rewriting it
+ * (hanzoai/iam pkg/schema/orgname.go `OrgName`: lowercasing "Admin" would make
+ * it the reserved org), so a slug typed here is checked and refused, never
+ * folded. What IS folded is a display name into the slug it suggests, the way
+ * IAM's own onboarding does it (internal/oidc/onboard.go `slugifyOrg`), so the
+ * slug shown is the slug IAM makes of the same name.
+ */
+/** The longest organization name IAM takes. */
+export const LONGEST = 55;
+/**
+ * The slug IAM's onboarding makes of a name: lowercase ASCII letters and digits,
+ * every other run one hyphen, none at either end, at most `LONGEST` long.
+ */
+export function slugify(name) {
+    let out = '';
+    let dash = false;
+    for (const ch of name.toLowerCase()) {
+        if ((ch >= 'a' && ch <= 'z') || (ch >= '0' && ch <= '9')) {
+            out += ch;
+            dash = false;
+        }
+        else if (!dash) {
+            out += '-';
+            dash = true;
+        }
+    }
+    return out.replace(/^-+|-+$/g, '').slice(0, LONGEST).replace(/-+$/, '');
+}
+/**
+ * Why IAM would not take `slug` as an organization's name, or null when it
+ * would. A name onboarding keeps exactly as typed: IAM's shape with single inner
+ * hyphens, since onboarding folds a double one. The names IAM holds for the
+ * platform are IAM's to refuse, in its own words.
+ */
+export function refusal(slug) {
+    if (slug.length < 2)
+        return 'Use at least 2 letters or numbers.';
+    if (slug.length > LONGEST)
+        return `Use at most ${LONGEST} characters.`;
+    if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(slug))
+        return 'Use lowercase letters, digits and single hyphens between them.';
+    return null;
+}
+/** Whether an organization answers what was typed: its name or its display name, in any case (IAM's `matches`). */
+export function matches(o, typed) {
+    const q = typed.trim().toLowerCase();
+    return !q || o.name.toLowerCase().includes(q) || o.display.toLowerCase().includes(q);
+}

package/dist/lib/session.d.ts

@@ -180,6 +180,10 @@ export declare const PICKED = "hanzo:org:picked";
  * app's account menu — is one the gate does not ask for again.
  */
 export declare function pick(o: string): void;
+/** Fired on `window` to open the organization chooser over the room. */
+export declare const CHOOSE = "hanzo:org:choose";
+/** Open the chooser (`Orgs`): every organization of the person's, and every one for a SuperAdmin. */
+export declare function choose(): void;
 /**
  * Whether the signed-in person is a SUPERADMIN: @hanzo/iam's `superAdmin`, which is
  * hanzoai/authz `Claims.Sudo` exactly — a person (never a program) whose own row's

package/dist/lib/session.js

@@ -437,6 +437,12 @@ export function pick(o) {
     }
     window.dispatchEvent(new Event(ORG));
 }
+/** Fired on `window` to open the organization chooser over the room. */
+export const CHOOSE = 'hanzo:org:choose';
+/** Open the chooser (`Orgs`): every organization of the person's, and every one for a SuperAdmin. */
+export function choose() {
+    window.dispatchEvent(new Event(CHOOSE));
+}
 /**
  * Whether the signed-in person is a SUPERADMIN: @hanzo/iam's `superAdmin`, which is
  * hanzoai/authz `Claims.Sudo` exactly — a person (never a program) whose own row's

package/dist/lib/title.d.ts

@@ -0,0 +1,7 @@
+/**
+ * A title fit to show: a conversation's or a run's title as the server kept it,
+ * less the markup a first message can carry (`<workspace-files>{…}</workspace-files>`,
+ * a lone tag, a leading JSON object), its whitespace one space, cut to `max`
+ * characters with an ellipsis; `fallback` when nothing readable is left.
+ */
+export declare function tidy(title: string | null | undefined, max?: number, fallback?: string): string;