@hanzo/rooms 0.1.81 → 0.1.83

package/dist/App.js

@@ -241,5 +241,5 @@ function Window({ bar }) {
         shut();
         setFinding(true);
     };
-    return (_jsx(AiProvider, { client: client ?? undefined, children: _jsx(HostProvider, { host: host, children: _jsx(PrefsProvider, { children: _jsxs(YStack, { ref: view, "data-slot": "window", ...(bar ? floor : null), flex: 1, minW: 0, height: "100dvh", overflow: "hidden", "$max-md": { position: 'fixed', t: TOP, l: 0, r: 0, height: HEIGHT }, children: [bar ? (_jsxs(XStack, { "data-slot": "title-bar", height: BAR, shrink: 0, items: "center", gap: 2, pl: (bar.inset ?? 0) + 6, pr: "$2", ...bar.drag, children: [_jsx(XStack, { "$max-md": { display: 'none' }, children: _jsx(Toggle, { open: !closed, onPress: flip }) }), _jsx(XStack, { $md: { display: 'none' }, children: _jsx(Toggle, { open: drawer, onPress: () => setDrawer(true), label: "Open sidebar" }) }), _jsx(Mark, { label: "Back", "data-slot": "back", onPress: () => router.back(), children: _jsx(ArrowLeft, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Forward", "data-slot": "forward", onPress: () => router.forward(), children: _jsx(ArrowRight, { size: 18, "aria-hidden": true }) }), _jsx(XStack, { flex: 1, self: "stretch", ...bar.drag })] })) : null, _jsxs(XStack, { "data-room": "", "data-app": mode, "data-slot": "frame", ...(bar ? null : floor), flex: 1, minW: 0, minH: 0, pr: "var(--pane-gap)", pb: "var(--pane-gap)", pt: bar ? 0 : 'var(--pane-gap)', "$max-md": { p: 0 }, children: [_jsx(YStack, { height: "100%", "$max-md": { display: 'none' }, children: _jsx(Rail, { host: host, mode: mode, at: where, open: !closed, toggle: bar ? undefined : flip, onChat: toChat, onDev: toDev, onStudio: toStudio, go: move, onOrg: org }) }), closed ? null : (_jsx(YStack, { "$max-md": { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: () => setClosed(true), onSeek: seek, places: sidebar }) })), _jsxs(YStack, { "data-slot": "stage", flex: 1, minW: 0, minH: 0, ml: "var(--pane-gap)", "$max-md": { ml: 0, pb: FOOT }, children: [bar ? null : _jsx(Top, { host: host, mode: mode, places: sidebar, go: move, onMenu: () => setDrawer(true), onChat: toChat, onDev: toDev }), _jsx(XStack, { "data-slot": "panes", flex: 1, minW: 0, minH: 0, children: mode === 'chat' ? (_jsx(Paned, { framed: true, children: _jsx(Chat, {}) })) : mode === 'studio' ? (_jsx(YStack, { render: "main", "data-slot": "pane", ...pane(), overflow: "hidden", flex: 1, minW: 0, minH: 0, children: _jsx(YStack, { flex: 1, minH: 0, height: "100%", children: _jsx(Suspense, { fallback: null, children: _jsx(Studio, { host: maker, rail: false }) }) }) })) : (_jsx(YStack, { render: "main", "data-slot": "pane", ...(run ? null : { ...pane(), overflow: 'hidden' }), flex: 1, minW: 0, minH: 0, children: plans ? null : _jsx(Builder, { host: host, rail: false }) })) })] })] }), drawer ? (_jsxs(_Fragment, { children: [_jsx(YStack, { render: "button", "aria-label": "Close sidebar", onPress: () => setDrawer(false), bg: DIM, position: "absolute", t: 0, r: 0, b: 0, l: 0, z: "var(--z-overlay)", $md: { display: 'none' } }), _jsx(YStack, { "data-slot": "drawer", position: "absolute", t: INSET.top, b: INSET.bottom, l: INSET.left, width: "min(320px, calc(100% - 2 * var(--pane-gap) - 48px))", z: "var(--z-modal)", $md: { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: shut, onSeek: seek, drawer: true, places: sidebar, foot: _jsx(Rail, { host: host, mode: mode, at: where, open: true, flat: true, onChat: toChat, onDev: toDev, onStudio: toStudio, go: move, onOrg: org }) }) })] })) : null, finding ? _jsx(Palette, { go: move, onClose: found }) : null] }) }) }) }));
+    return (_jsx(AiProvider, { client: client ?? undefined, children: _jsx(HostProvider, { host: host, children: _jsx(PrefsProvider, { children: _jsxs(YStack, { ref: view, "data-slot": "window", ...(bar ? floor : null), flex: 1, minW: 0, height: "100dvh", overflow: "hidden", "$max-md": { position: 'fixed', t: TOP, l: 0, r: 0, height: HEIGHT }, children: [bar ? (_jsxs(XStack, { "data-slot": "title-bar", height: BAR, shrink: 0, items: "center", gap: 2, pl: (bar.inset ?? 0) + 6, pr: "$2", ...bar.drag, children: [_jsx(XStack, { "$max-md": { display: 'none' }, children: _jsx(Toggle, { open: !closed, onPress: flip }) }), _jsx(XStack, { $md: { display: 'none' }, children: _jsx(Toggle, { open: drawer, onPress: () => setDrawer(true), label: "Open sidebar" }) }), _jsx(Mark, { label: "Back", "data-slot": "back", onPress: () => router.back(), children: _jsx(ArrowLeft, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Forward", "data-slot": "forward", onPress: () => router.forward(), children: _jsx(ArrowRight, { size: 18, "aria-hidden": true }) }), _jsx(XStack, { flex: 1, self: "stretch", ...bar.drag })] })) : null, _jsxs(XStack, { "data-room": "", "data-app": mode, "data-slot": "frame", ...(bar ? null : floor), flex: 1, minW: 0, minH: 0, pr: "var(--pane-gap)", pb: "var(--pane-gap)", pt: bar ? 0 : 'var(--pane-gap)', "$max-md": { p: 0 }, children: [_jsx(YStack, { height: "100%", "$max-md": { display: 'none' }, children: _jsx(Rail, { host: host, mode: mode, open: !closed, toggle: bar ? undefined : flip, onChat: toChat, onDev: toDev, onStudio: toStudio, onOrg: org }) }), closed ? null : (_jsx(YStack, { "$max-md": { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: () => setClosed(true), onSeek: seek, places: sidebar }) })), _jsxs(YStack, { "data-slot": "stage", flex: 1, minW: 0, minH: 0, ml: "var(--pane-gap)", "$max-md": { ml: 0, pb: FOOT }, children: [bar ? null : _jsx(Top, { host: host, mode: mode, places: sidebar, go: move, onMenu: () => setDrawer(true), onChat: toChat, onDev: toDev }), _jsx(XStack, { "data-slot": "panes", flex: 1, minW: 0, minH: 0, children: mode === 'chat' ? (_jsx(Paned, { framed: true, children: _jsx(Chat, {}) })) : mode === 'studio' ? (_jsx(YStack, { render: "main", "data-slot": "pane", ...pane(), overflow: "hidden", flex: 1, minW: 0, minH: 0, children: _jsx(YStack, { flex: 1, minH: 0, height: "100%", children: _jsx(Suspense, { fallback: null, children: _jsx(Studio, { host: maker, rail: false }) }) }) })) : (_jsx(YStack, { render: "main", "data-slot": "pane", ...(run ? null : { ...pane(), overflow: 'hidden' }), flex: 1, minW: 0, minH: 0, children: plans ? null : _jsx(Builder, { host: host, rail: false }) })) })] })] }), drawer ? (_jsxs(_Fragment, { children: [_jsx(YStack, { render: "button", "aria-label": "Close sidebar", onPress: () => setDrawer(false), bg: DIM, position: "absolute", t: 0, r: 0, b: 0, l: 0, z: "var(--z-overlay)", $md: { display: 'none' } }), _jsx(YStack, { "data-slot": "drawer", position: "absolute", t: INSET.top, b: INSET.bottom, l: INSET.left, width: "min(320px, calc(100% - 2 * var(--pane-gap) - 48px))", z: "var(--z-modal)", $md: { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: shut, onSeek: seek, drawer: true, places: sidebar, foot: _jsx(Rail, { host: host, mode: mode, open: true, flat: true, onChat: toChat, onDev: toDev, onStudio: toStudio, onOrg: org }) }) })] })) : null, finding ? _jsx(Palette, { go: move, onClose: found, mode: mode, host: host }) : null] }) }) }) }));
 }

package/dist/Chat.js

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

package/dist/Column.js

@@ -21,6 +21,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text, XStack, YStack } from '@hanzo/gui';
 import { Bell, Search, Settings2, SquarePen } from 'lucide-react';
 import { DOTS, Grip, nav, NEW, path as written, useSessions } from '@hanzo/build';
+import { tidy } from './lib/title.js';
 import { DropdownMenu } from '@hanzo/ui';
 import { Sidebar, SidebarIconButton, SidebarItem, StatusDot } from '@hanzo/ui/chat';
 import { useId } from 'react';
@@ -78,7 +79,7 @@ function Activity({ host }) {
         ...(latest.length
             ? latest.map((s) => ({
                 key: s.id,
-                label: s.title || 'Untitled run',
+                label: tidy(s.title, 56, 'Untitled run'),
                 description: [s.status, ago(s.updatedAt || s.createdAt)].filter(Boolean).join(' · '),
                 icon: _jsx(StatusDot, { status: DOTS[s.status] ?? 'idle' }),
                 onSelect: () => host.go(s.id),

package/dist/Palette.d.ts

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

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/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;

package/dist/lib/title.js

@@ -0,0 +1,36 @@
+/**
+ * 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 function tidy(title, max = 80, fallback = 'Untitled') {
+    let t = (title ?? '').replace(/<([a-z][\w-]*)[^>]*>[\s\S]*?<\/\1>/gi, ' ').replace(/<\/?[a-z][\w-]*[^>]*>/gi, ' ');
+    // A JSON object the message opened with, balanced, goes whole.
+    const m = t.match(/^\s*\{/);
+    if (m) {
+        let depth = 0;
+        let quoted = false;
+        for (let i = m[0].length - 1; i < t.length; i++) {
+            const c = t[i];
+            if (quoted) {
+                if (c === '\\')
+                    i++;
+                else if (c === '"')
+                    quoted = false;
+            }
+            else if (c === '"')
+                quoted = true;
+            else if (c === '{')
+                depth++;
+            else if (c === '}' && --depth === 0) {
+                t = t.slice(i + 1);
+                break;
+            }
+        }
+    }
+    t = t.replace(/\s+/g, ' ').trim();
+    if (!t)
+        return fallback;
+    return t.length > max ? `${t.slice(0, max - 1).trimEnd()}…` : t;
+}

package/dist/seek.d.ts

@@ -33,5 +33,14 @@ export declare function rank<T extends Hit>(rows: T[], query: string, cap?: numb
  * `CAP`, a group with nothing left out.
  */
 export declare function find<T extends Hit>(query: string, chats: T[], groups: Group<T>[]): Group<T>[];
+/**
+ * The same search for any product: an empty field lists the newest `RECENT` of
+ * `recent` under its label (a product's own recents: Chat's conversations, Dev's
+ * runs), and a query ranks every group in the order given.
+ */
+export declare function findIn<T extends Hit>(query: string, recent: {
+    label: string;
+    items: T[];
+}, groups: Group<T>[]): Group<T>[];
 /** Whether a key press opens the palette: ⌘K or Ctrl+K, once a press, from anywhere, a field included. */
 export declare const summons: (e: Press) => boolean;

package/dist/seek.js

@@ -43,13 +43,19 @@ export function rank(rows, query, cap = CAP) {
  * `CAP`, a group with nothing left out.
  */
 export function find(query, chats, groups) {
+    return findIn(query, { label: 'Recent chats', items: chats }, [{ id: 'chats', label: 'Chats', items: chats }, ...groups]);
+}
+/**
+ * The same search for any product: an empty field lists the newest `RECENT` of
+ * `recent` under its label (a product's own recents: Chat's conversations, Dev's
+ * runs), and a query ranks every group in the order given.
+ */
+export function findIn(query, recent, groups) {
     if (!query.trim()) {
-        const newest = [...chats].sort((a, b) => (b.at ?? '').localeCompare(a.at ?? '')).slice(0, RECENT);
-        return newest.length ? [{ id: 'recent', label: 'Recent chats', items: newest }] : [];
+        const newest = [...recent.items].sort((a, b) => (b.at ?? '').localeCompare(a.at ?? '')).slice(0, RECENT);
+        return newest.length ? [{ id: 'recent', label: recent.label, items: newest }] : [];
     }
-    return [{ id: 'chats', label: 'Chats', items: chats }, ...groups]
-        .map((g) => ({ ...g, items: rank(g.items, query) }))
-        .filter((g) => g.items.length);
+    return groups.map((g) => ({ ...g, items: rank(g.items, query) })).filter((g) => g.items.length);
 }
 /** Whether a key press opens the palette: ⌘K or Ctrl+K, once a press, from anywhere, a field included. */
 export const summons = (e) => (e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey && !e.repeat && !e.isComposing && (e.key ?? '').toLowerCase() === 'k';

package/dist/thread.js

@@ -20,6 +20,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // flight over what it last read, and reads the store again once it answers.
 // A pin is the server's, never this browser's: it follows the person to every
 // device they sign in on.
+import { tidy } from './lib/title.js';
 import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore, } from 'react';
 import { useAi } from '@hanzo/ai/react';
 import { Archive, ArchiveRestore, Clock, ExternalLink, Link2, MoreHorizontal, Pencil, Pin, PinOff, Share2, Trash2 } from 'lucide-react';
@@ -128,7 +129,7 @@ export function useThreadActions() {
         };
     }, [ai]);
 }
-const titleOf = (t) => t.title || 'Untitled';
+const titleOf = (t) => tidy(t.title);
 /** A conversation's own address, whole: the app at `/?chat=<id>` (lib/host `talk`), wherever the rooms are drawn. */
 export const href = (id) => new URL(site(talk(id)), window.location.href).href;
 /** Opens a conversation in a tab of its own. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/rooms",
-  "version": "0.1.81",
+  "version": "0.1.83",
   "description": "The workspace rooms — Home, Chat, Inbox, Contacts, Meet, Cal, Drive, Board, Work, Bots — and the frame that holds them, once, for every Hanzo surface.",
   "type": "module",
   "main": "./dist/index.js",
@@ -49,7 +49,7 @@
   "peerDependencies": {
     "@hanzo/ai": ">=0.6.23",
     "@hanzo/appearance": ">=0.2.6",
-    "@hanzo/build": ">=0.2.68",
+    "@hanzo/build": ">=0.2.69",
     "@hanzo/composer": ">=0.2.0",
     "@hanzo/event": ">=0.3.56",
     "@hanzo/gui": "^8.3.5",
@@ -67,7 +67,7 @@
   "devDependencies": {
     "@hanzo/ai": "0.6.23",
     "@hanzo/appearance": "0.2.8",
-    "@hanzo/build": "0.2.68",
+    "@hanzo/build": "0.2.69",
     "@hanzo/composer": "0.2.0",
     "@hanzo/design": "0.5.34",
     "@hanzo/event": "0.3.56",