@hanzo/rooms 0.1.34 → 0.1.36

package/README.md

@@ -11,13 +11,13 @@ import { CalScheduler } from '@hanzo/rooms/CalScheduler'
 
 configure({ site: '', home: '/home', signUp: '/signup' })
 
-<Rooms router={router} search={search} route={route} Link={Link}>
+<Rooms router={router} search={search} path={pathname} route={route} Link={Link}>
   <Room mode="cal"><CalScheduler /></Room>
 </Rooms>
 ```
 
 `configure()` names the host's addresses (where its own pages live, the
 gateway and IAM, the plan catalogue to paint first). `<Rooms>` carries what
-moves: the router, the query, the route and the link component. The rooms
+moves: the router, the query, the path, the route and the link component. The rooms
 import nothing from a host, and their look comes from `@hanzo/appearance` and
 `@hanzo/design` through `@hanzo/ui`.

package/dist/Chat.js

@@ -52,7 +52,7 @@ import { useHydrated } from "./lib/hydrated.js";
 import { base, served } from "./lib/ai.js";
 import { onServed } from "./lib/served.js";
 import { refused as worded, speech, useDictation, useTalk, useVoice, Voice } from "@hanzo/voice";
-import { ArrowUp, AudioLines, FileText, Image as ImageMark, Mic, Paperclip, Square, Star, PanelRight, X } from "lucide-react";
+import { ArrowUp, AudioLines, FileText, Image as ImageMark, Mic, Paperclip, Pin, Square, PanelRight, X } from "lucide-react";
 import { ENSO, FREE } from "./lib/ai.js";
 import { openThread, useOpen } from "./open.js";
 import { Beside, Framed } from "./Shell.js";
@@ -61,7 +61,7 @@ import { RightPane, addressOf, look, usePinned } from "./RightPane.js";
 import { useMedia } from "@hanzo/gui";
 import { Take } from "./copy.js";
 import { Share } from "./Share.js";
-import { useStarred } from "./stars.js";
+import { useThreadActions, useThreadList } from "./thread.js";
 import { useModel } from "./model.js";
 import { Enso, nameOf, useEffort } from "./enso.js";
 import { checkoutUrl } from './lib/pay.js';
@@ -486,10 +486,6 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
      * that settles after mount. Picking from the menu still wins, permanently.
      */
     const [asking, setAsking] = useState(null);
-    // STARRED HERE, READ IN THE COLUMN — the shape a room and a project already
-    // have. hanzo.chat called it a bookmark; the word this site uses is starred,
-    // and one word for one act is what keeps the three lists reading alike.
-    const [starred, star] = useStarred("threads");
     // The setter is taken now, not just the value: the override moved from
     // Settings into the composer's own panel, so this is where it is written.
     const [preferred, setPreferred] = useModel();
@@ -499,6 +495,13 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
     const framed = useContext(Framed);
     const opened = useOpen();
     const { thread: open, open: reopen, agents: room, openAgent, seat, emptied, aside, showAside, showSettings } = opened;
+    // PINNED HERE, READ IN THE COLUMN, and kept by the server (thread.tsx): the
+    // pin this header sets is the one the row's menu sets, on every device the
+    // reader signs in on. A conversation not in the list yet (just begun, or
+    // archived) reads unpinned.
+    const listing = useThreadList(false, open);
+    const acts = useThreadActions();
+    const mine = open ? listing.threads.find((t) => t.id === open) : undefined;
     // The conversation's key in `pane.ts`, the one the column beside it reads.
     const at = channel(opened);
     // The first of them: what a surface that addresses one person reads.
@@ -1200,7 +1203,7 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
             e.preventDefault();
             // A dropped folder arrives as entries; each file under it goes up with its path.
             void dropped(e.dataTransfer).then((list) => hold(at, list, via));
-        }, children: [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, { height: 48, items: "center", justify: "space-between", px: "$3", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsxs(XStack, { items: "center", gap: "$2", minW: 0, children: [_jsx(Box, { render: "button", onClick: () => open && star(open), "aria-label": open && starred.has(open) ? "Unstar this conversation" : "Star this conversation", "aria-pressed": !!open && starred.has(open), p: "$1.5", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(Star, { size: 15, "aria-hidden": true, color: open && starred.has(open) ? "var(--foreground)" : "var(--muted-foreground)", fill: open && starred.has(open) ? "currentColor" : "none" }) }), 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, { items: "center", gap: "$1", children: [_jsx(Box, { render: "button", onClick: () => {
+        }, children: [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, { height: 48, items: "center", justify: "space-between", px: "$3", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsxs(XStack, { items: "center", gap: "$2", minW: 0, children: [_jsx(Box, { render: "button", onClick: () => mine && void acts.pin(mine), "aria-disabled": !mine, "aria-label": mine?.pinned ? "Unpin this conversation" : "Pin this conversation", "aria-pressed": !!mine?.pinned, p: "$1.5", rounded: "$2", opacity: mine ? 1 : 0.5, hoverStyle: { bg: '$hover' }, children: _jsx(Pin, { size: 15, "aria-hidden": true, color: mine?.pinned ? "var(--foreground)" : "var(--muted-foreground)", fill: mine?.pinned ? "currentColor" : "none" }) }), 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, { items: "center", gap: "$1", children: [_jsx(Box, { render: "button", onClick: () => {
                                     if (aside === null) {
                                         showAside("tasks");
                                         if (!pinned)

package/dist/Column.js

@@ -82,7 +82,7 @@ export function Column({ host, mode, thread, onChat, onDev, go, drawer = false,
                                             setWords('');
                                     }, placeholder: "Filter", "aria-label": "Filter recents" }), flex: 1, minW: 0, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit", fontSize: "$2" })] }), _jsxs(YStack, { role: "list", mt: "$2.5", gap: 2, shrink: 0, children: [_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { "data-slot": "app-new", ...ROW, active: fresh, icon: _jsx(Plus, { size: 16, "aria-hidden": true }), onPress: create, ...keys(create), children: mode === 'chat' ? 'New chat' : 'New run' }) }), mode === 'dev'
                                 ? links.map((link) => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, active: link.active, icon: link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: link.label }) }, link.id)))
-                                : null, mode === 'dev' ? (_jsxs(YStack, { role: "listitem", children: [_jsx(SidebarItem, { ...ROW, "aria-expanded": unfolded, icon: unfolded ? _jsx(ChevronUp, { size: 16, "aria-hidden": true }) : _jsx(ChevronDown, { size: 16, "aria-hidden": true }), onPress: () => setUnfolded((v) => !v), ...keys(() => setUnfolded((v) => !v)), children: "More" }), unfolded ? (_jsx(YStack, { role: "list", gap: 2, children: more.map((link) => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, active: link.active, icon: link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: link.label }) }, link.id))) })) : null] })) : null] }), _jsx(XStack, { height: 1, bg: "$borderColor", mx: "$1.5", mt: "$3", shrink: 0 }), _jsx(Recents, { host: host, mode: mode, thread: thread, words: words, onOpen: open }), _jsxs(YStack, { gap: "$2", pt: "$2", shrink: 0, children: [_jsx(Made, {}), _jsx(Setup, {})] }), _jsxs(XStack, { "data-slot": "app-foot", items: "center", gap: "$1", pt: "$2", shrink: 0, children: [_jsx(YStack, { flex: 1, minW: 0, children: _jsx(Me, { host: host, onOrg: org }) }), drawer ? null : (_jsx(SidebarIconButton, { label: "Collapse sidebar", onPress: () => setCollapsed(true), width: 32, height: 32, rounded: 999, children: _jsx(PanelLeft, { size: 16 }) }))] })] }), drawer ? null : (_jsx(Grip, { side: "left", span: span.span, floor: FLOOR, ceil: CEIL, reset: WIDTH, onSpan: span.move, onKeep: span.keep, onShut: () => setCollapsed(true), label: "Resize sidebar", 
+                                : null, mode === 'dev' ? (_jsxs(YStack, { role: "listitem", children: [_jsx(SidebarItem, { ...ROW, "aria-expanded": unfolded, icon: unfolded ? _jsx(ChevronUp, { size: 16, "aria-hidden": true }) : _jsx(ChevronDown, { size: 16, "aria-hidden": true }), onPress: () => setUnfolded((v) => !v), ...keys(() => setUnfolded((v) => !v)), children: "More" }), unfolded ? (_jsx(YStack, { role: "list", gap: 2, children: more.map((link) => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, active: link.active, icon: link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: link.label }) }, link.id))) })) : null] })) : null] }), _jsx(XStack, { height: 1, bg: "$borderColor", mx: "$1.5", mt: "$3", shrink: 0 }), _jsx(Recents, { host: host, mode: mode, thread: thread, words: words, onOpen: open, onNew: create }), _jsxs(YStack, { gap: "$2", pt: "$2", shrink: 0, children: [_jsx(Made, {}), _jsx(Setup, {})] }), _jsxs(XStack, { "data-slot": "app-foot", items: "center", gap: "$1", pt: "$2", shrink: 0, children: [_jsx(YStack, { flex: 1, minW: 0, children: _jsx(Me, { host: host, onOrg: org }) }), drawer ? null : (_jsx(SidebarIconButton, { label: "Collapse sidebar", onPress: () => setCollapsed(true), width: 32, height: 32, rounded: 999, children: _jsx(PanelLeft, { size: 16 }) }))] })] }), drawer ? null : (_jsx(Grip, { side: "left", span: span.span, floor: FLOOR, ceil: CEIL, reset: WIDTH, onSpan: span.move, onKeep: span.keep, onShut: () => setCollapsed(true), label: "Resize sidebar", 
                 // In the gutter between the column and the pane, not over the column's own rows.
                 r: GUTTER_END, width: "var(--pane-gap)" }))] }));
 }

package/dist/Recents.d.ts

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

package/dist/Recents.js

@@ -1,20 +1,21 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The reader's Recents in the column's mode, and only that mode's: Chat lists its
-// conversations (`/v1/agents/chat/conversations`, @hanzo/ai `useThreads`), Dev its
+// conversations (`/v1/agents/chat/conversations`, `useThreadList`), Dev its
 // coding runs (`/v1/agent/sessions?kind=coding`, @hanzo/build `useSessions`). Each
 // mode reads its own store. The menu beside the heading narrows, groups and sorts
-// the list; the choice is kept per mode in this browser.
+// the list; the choice is kept per mode in this browser. A conversation's row
+// carries its own menu (thread.tsx): pinned ones list first, under Pinned, and
+// Chat's Status shows the archived ones apart.
 import { useEffect, useId, useMemo, useRef } from 'react';
 import { ScrollView, SizableText, XStack, YStack } from '@hanzo/gui';
 import { ListFilter, MessageSquare } from 'lucide-react';
-import { useThreads } from '@hanzo/ai/react';
 import { DOTS, route, useSessions } from '@hanzo/build';
 import { DropdownMenu } from '@hanzo/ui';
 import { SidebarItem, StatusDot } from '@hanzo/ui/chat';
 import { useKept } from './kept.js';
 import { ago, arrange, chats, MENUS, PLAIN, runs, SINCE, viewOf } from './recent.js';
-import { useStarred } from './stars.js';
+import { ThreadRow, useThreadList } from './thread.js';
 /** The menu's items: each section a heading and its options, the one in force checked. */
 function items(mode, view, set) {
     const m = MENUS[mode];
@@ -34,26 +35,20 @@ function items(mode, view, set) {
     return parts.flatMap((p, i) => (i ? [{ type: 'separator', key: `sep-${i}` }, ...p] : p));
 }
 const Note = ({ children }) => (_jsx(SizableText, { size: "$1", color: "$soft", px: "$2", py: "$1.5", children: children }));
-export function Recents({ host, mode, thread, words, onOpen, }) {
-    return mode === 'chat' ? _jsx(Chats, { thread: thread, words: words, onOpen: onOpen }) : _jsx(Runs, { host: host, words: words, onOpen: onOpen });
+export function Recents({ host, mode, thread, words, onOpen, onNew, }) {
+    const [kept, keep] = useKept(`hanzo.recents.${mode}`, PLAIN);
+    const view = viewOf(mode, kept);
+    return mode === 'chat' ? (_jsx(Chats, { thread: thread, words: words, view: view, keep: keep, onOpen: onOpen, onNew: onNew })) : (_jsx(Runs, { host: host, words: words, view: view, keep: keep, onOpen: onOpen }));
 }
-/** Chat's Recents: the conversation store alone. */
-function Chats({ thread, words, onOpen }) {
-    const store = useThreads();
-    // A conversation this list has not seen is one just begun: read the store again, once for it.
-    const asked = useRef(new Set());
-    const reload = store.reload;
-    useEffect(() => {
-        if (!thread || store.loading || asked.current.has(thread) || store.threads.some((t) => t.id === thread))
-            return;
-        asked.current.add(thread);
-        reload();
-    }, [thread, store.loading, store.threads, reload]);
+/** Chat's Recents: the conversation store alone, the archived ones when the view asks for them. */
+function Chats({ thread, words, view, keep, onOpen, onNew, }) {
+    const store = useThreadList(view.status === 'archived', thread);
     const rows = useMemo(() => chats(store.threads), [store.threads]);
-    return (_jsx(List, { mode: "chat", rows: rows, words: words, open: (r) => r.id === thread, reading: store.loading && !store.threads.length, error: store.error, onOpen: onOpen }));
+    const byId = useMemo(() => new Map(store.threads.map((t) => [t.id, t])), [store.threads]);
+    return (_jsx(List, { mode: "chat", rows: rows, words: words, view: view, keep: keep, open: (r) => r.id === thread, reading: store.loading && !store.threads.length, error: store.error, onOpen: onOpen, threads: byId, onNew: onNew }));
 }
 /** Dev's Recents: the org's coding runs alone. */
-function Runs({ host, words, onOpen }) {
+function Runs({ host, words, view, keep, onOpen }) {
     const store = useSessions(host);
     const r = route(host.path);
     const run = r.kind === 'run' ? r.id : null;
@@ -67,25 +62,28 @@ function Runs({ host, words, onOpen }) {
         reload();
     }, [run, store.loading, store.value, reload]);
     const rows = useMemo(() => runs(store.value), [store.value]);
-    return (_jsx(List, { mode: "dev", rows: rows, words: words, open: (row) => row.id === run, reading: store.loading && !store.value.length, error: store.error, onOpen: onOpen }));
+    return (_jsx(List, { mode: "dev", rows: rows, words: words, view: view, keep: keep, open: (row) => row.id === run, reading: store.loading && !store.value.length, error: store.error, onOpen: onOpen }));
 }
-function List({ mode, rows, words, open, reading, error, onOpen, }) {
-    const [kept, keep] = useKept(`hanzo.recents.${mode}`, PLAIN);
-    const view = viewOf(mode, kept);
-    const [starred] = useStarred('threads');
+function List({ mode, rows, words, view, keep, open, reading, error, onOpen, threads, onNew, }) {
     const label = useId();
-    const groups = arrange(rows, view, words, starred);
+    const groups = arrange(rows, view, words);
     const narrowed = view.status !== PLAIN.status || view.since !== PLAIN.since;
     const now = new Date();
     const running = mode === 'dev' ? rows.filter((r) => r.status === 'running').length : 0;
     const row = (r) => {
         const when = ago(r.at, now);
-        return (_jsxs(YStack, { role: "listitem", position: "relative", children: [_jsx(SidebarItem, { "data-kind": r.kind, active: open(r), rounded: "$4", minH: 32, pr: when ? '$8' : '$2', onKeyDown: (e) => {
-                        if (e.key !== 'Enter' && e.key !== ' ')
-                            return;
-                        e.preventDefault?.();
-                        onOpen(r);
-                    }, icon: r.kind === 'chat' ? (_jsx(MessageSquare, { size: 14, "aria-hidden": true })) : (_jsx(XStack, { width: 14, justify: "center", children: _jsx(StatusDot, { status: DOTS[r.status] ?? 'idle' }) })), onPress: () => onOpen(r), children: r.title }), when ? (_jsx(SizableText, { position: "absolute", r: "$2", t: 0, b: 0, size: "$1", color: "$soft", pointerEvents: "none", display: "flex", items: "center", fontVariant: ['tabular-nums'], children: _jsx("time", { dateTime: r.at, title: new Date(r.at).toLocaleString(), children: when }) })) : null] }, r.id));
+        const item = (_jsx(SidebarItem, { "data-kind": r.kind, active: open(r), rounded: "$4", minH: 32, pr: when ? '$8' : '$2', onKeyDown: (e) => {
+                if (e.key !== 'Enter' && e.key !== ' ')
+                    return;
+                e.preventDefault?.();
+                onOpen(r);
+            }, icon: r.kind === 'chat' ? (_jsx(MessageSquare, { size: 14, "aria-hidden": true })) : (_jsx(XStack, { width: 14, justify: "center", children: _jsx(StatusDot, { status: DOTS[r.status] ?? 'idle' }) })), onPress: () => onOpen(r), children: r.title }));
+        // How long ago, at the row's end; the full time is its title.
+        const age = when ? (_jsx(SizableText, { size: "$1", color: "$soft", pointerEvents: "none", display: "flex", items: "center", fontVariant: ['tabular-nums'], children: _jsx("time", { dateTime: r.at, title: new Date(r.at).toLocaleString(), children: when }) })) : null;
+        const t = threads?.get(r.id);
+        if (t)
+            return (_jsx(ThreadRow, { t: t, active: open(r), aside: age, onGone: onNew, children: item }, r.id));
+        return (_jsxs(YStack, { role: "listitem", position: "relative", children: [item, age ? (_jsx(XStack, { position: "absolute", r: "$2", t: 0, b: 0, items: "center", pointerEvents: "none", children: age })) : null] }, r.id));
     };
-    return (_jsxs(YStack, { "data-slot": "recents", flex: 1, minH: 0, mt: "$2", children: [_jsxs(XStack, { items: "center", justify: "space-between", height: 30, pl: "$2", pr: "$1", shrink: 0, children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { id: label, size: "$1", color: "$soft", fontWeight: "600", textTransform: "uppercase", letterSpacing: 0.6, children: "Recents" }), running ? (_jsx(XStack, { "aria-label": `${running} running`, minW: 18, height: 18, px: "$1.5", rounded: 999, items: "center", justify: "center", bg: "$edge", borderWidth: 1, borderColor: "$borderColor", children: _jsx(SizableText, { size: "$1", fontWeight: "600", color: "$ink", "aria-hidden": true, children: String(running) }) })) : null] }), _jsx(DropdownMenu, { minWidth: 200, trigger: _jsx(XStack, { render: "button", "aria-label": "Recents view", width: 26, height: 26, rounded: "$2", items: "center", justify: "center", cursor: "pointer", hoverStyle: { bg: '$hover' }, bg: narrowed ? '$hover' : 'transparent', children: _jsx(ListFilter, { size: 14, "aria-hidden": true }) }), items: items(mode, view, keep) })] }), _jsxs(ScrollView, { flex: 1, showsVerticalScrollIndicator: false, children: [error ? _jsx(Note, { children: error.message }) : null, groups.length ? (_jsx(YStack, { role: "list", "aria-labelledby": label, gap: 1, children: groups.map((g) => g.title ? (_jsxs(YStack, { role: "listitem", gap: 1, pt: "$2", children: [_jsx(SizableText, { size: "$1", color: "$soft", px: "$2", pb: "$1", children: g.title }), _jsx(YStack, { role: "list", "aria-label": g.title, gap: 1, children: g.rows.map(row) })] }, g.title)) : (g.rows.map(row))) })) : reading ? (_jsx(Note, { children: mode === 'chat' ? 'Reading your chats…' : 'Reading your runs…' })) : error ? null : words.trim() ? (_jsx(Note, { children: `Nothing matches “${words.trim()}”.` })) : narrowed ? (_jsx(Note, { children: "Nothing in this view." })) : (_jsx(Note, { children: mode === 'chat' ? 'No chats yet. Say something and it lands here.' : 'No runs yet.' }))] })] }));
+    return (_jsxs(YStack, { "data-slot": "recents", flex: 1, minH: 0, mt: "$2", children: [_jsxs(XStack, { items: "center", justify: "space-between", height: 30, pl: "$2", pr: "$1", shrink: 0, children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { id: label, size: "$1", color: "$soft", fontWeight: "600", textTransform: "uppercase", letterSpacing: 0.6, children: "Recents" }), running ? (_jsx(XStack, { "aria-label": `${running} running`, minW: 18, height: 18, px: "$1.5", rounded: 999, items: "center", justify: "center", bg: "$edge", borderWidth: 1, borderColor: "$borderColor", children: _jsx(SizableText, { size: "$1", fontWeight: "600", color: "$ink", "aria-hidden": true, children: String(running) }) })) : null] }), _jsx(DropdownMenu, { minWidth: 200, trigger: _jsx(XStack, { render: "button", "aria-label": "Recents view", width: 26, height: 26, rounded: "$2", items: "center", justify: "center", cursor: "pointer", hoverStyle: { bg: '$hover' }, bg: narrowed ? '$hover' : 'transparent', children: _jsx(ListFilter, { size: 14, "aria-hidden": true }) }), items: items(mode, view, keep) })] }), _jsxs(ScrollView, { flex: 1, showsVerticalScrollIndicator: false, children: [error ? _jsx(Note, { children: error.message }) : null, groups.length ? (_jsx(YStack, { role: "list", "aria-labelledby": label, gap: 1, children: groups.map((g) => g.title ? (_jsxs(YStack, { role: "listitem", gap: 1, pt: "$2", children: [_jsx(SizableText, { size: "$1", color: "$soft", px: "$2", pb: "$1", children: g.title }), _jsx(YStack, { role: "list", "aria-label": g.title, gap: 1, children: g.rows.map(row) })] }, g.title)) : (g.rows.map(row))) })) : reading ? (_jsx(Note, { children: mode === 'chat' ? 'Reading your chats…' : 'Reading your runs…' })) : error ? null : words.trim() ? (_jsx(Note, { children: `Nothing matches “${words.trim()}”.` })) : view.status === 'archived' ? (_jsx(Note, { children: "No archived chats." })) : narrowed ? (_jsx(Note, { children: "Nothing in this view." })) : (_jsx(Note, { children: mode === 'chat' ? 'No chats yet. Say something and it lands here.' : 'No runs yet.' }))] })] }));
 }

package/dist/Shell.js

@@ -16,7 +16,9 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { createContext, useContext, useEffect, useMemo, useRef, useState, } from "react";
 import { createPortal } from "react-dom";
 import { MessageSquare, Code2, Inbox, Bot, ListChecks, HardDrive, Settings2, UserPlus, Building2, Search, Hash, AtSign, Lock, Workflow, Plus, ArrowLeft, ArrowRight, Send, Minus, Blocks, Star, FolderOpen, Activity, BookOpen, SquareTerminal, Share2, Sparkles, PanelLeft, PanelRight, Users, Globe, Cpu, Boxes, Wallet, Video, Calendar, LayoutGrid, ArrowUpLeft, } from "lucide-react";
-import { AiProvider, useAgents, useInbox, useModels, usePeople, useThreads, } from "@hanzo/ai/react";
+import { AiProvider, useAgents, useInbox, useModels, usePeople, } from "@hanzo/ai/react";
+import { PINNED } from "./recent.js";
+import { ThreadRow, useThreadList } from "./thread.js";
 import { Box, XStack, YStack, Text } from "@hanzo/ui";
 // THE PAPER LADDER. `sheet(n)` is a fill AND the light on it, published as a
 // pair by @hanzo/design, so a surface asks for a HEIGHT instead of composing a
@@ -373,7 +375,7 @@ function Chats({ filter = "", onPick, }) {
     // lease-agreement file search" — banded under Today and Yesterday like a
     // history somebody had. A visitor's first sight of the app was ten chats they
     // had never had, and every one of them opened nothing.
-    const { threads, loading, error: wrong } = useThreads();
+    const { threads, loading, error: wrong } = useThreadList(false, thread);
     const [customThreads, setCustomThreads] = useState([]);
     useEffect(() => {
         setCustomThreads(getCustomThreads());
@@ -384,12 +386,12 @@ function Chats({ filter = "", onPick, }) {
     const { isAuthenticated, user } = useIam();
     const { user: account } = useAccount();
     const signedIn = isAuthenticated || Boolean(user) || Boolean(account) || hasSession();
-    const [starred] = useStarred("threads");
     const mergedThreads = useMemo(() => {
         const list = threads.map((t) => ({
             id: t.id,
             title: t.title || "Untitled",
             updatedAt: t.updatedAt,
+            thread: t,
         }));
         for (const ct of customThreads) {
             if (!list.some((t) => t.id === ct.id)) {
@@ -404,16 +406,17 @@ function Chats({ filter = "", onPick, }) {
         return list;
     }, [threads, customThreads]);
     const found = mergedThreads.filter((t) => matches(t.title || "Untitled", filter));
-    const shown = found.filter((t) => !starred.has(t.id));
-    const kept = found.filter((t) => starred.has(t.id));
+    // PINNED FIRST, by the server's pin (thread.tsx), then the days.
+    const shown = found.filter((t) => !t.thread?.pinned);
+    const kept = found.filter((t) => t.thread?.pinned);
     const bands = [];
     if (kept.length)
-        bands.push({ label: "Starred", rows: kept });
+        bands.push({ label: PINNED, rows: kept });
     const now = new Date();
     for (const t of shown) {
         const label = when(t.updatedAt, now);
         const last = bands[bands.length - 1];
-        if (last && last.label === label && last.label !== "Starred")
+        if (last && last.label === label && last.label !== PINNED)
             last.rows.push(t);
         else
             bands.push({ label, rows: [t] });
@@ -421,10 +424,14 @@ function Chats({ filter = "", onPick, }) {
     if (!signedIn)
         return _jsx(Note, { children: "Sign in to see your recent chats." });
     const mine = wrong ? (_jsx(Note, { children: say(wrong, "your chats") })) : loading && threads.length === 0 ? (_jsx(Note, { children: "Reading your chats." })) : found.length === 0 && filter ? (_jsxs(Note, { children: ["No chat matches \u201C", filter, "\u201D."] })) : threads.length === 0 ? (_jsx(Note, { children: "No chats yet. Say something and it lands here." })) : null;
-    return (_jsxs(_Fragment, { children: [mine, mine ? null : bands.map((band) => (_jsx(SidebarSection, { label: band.label, children: band.rows.map((t) => (_jsx(SidebarItem, { active: t.id === thread, 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))) }, band.label))), _jsx(SharedWithYou, { filter: filter, onPick: onPick })] }));
+    return (_jsxs(_Fragment, { children: [mine, mine ? null : bands.map((band) => (_jsx(SidebarSection, { label: band.label, children: band.rows.map((t) => {
+                    const item = (_jsx(SidebarItem, { active: t.id === thread, 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));
+                    // 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 })] }));
 }
 /**
  * The chats other people shared with this reader, and who shared each: every

package/dist/dev.js

@@ -7,12 +7,12 @@
 // to leave. The name drawn at the top left is Hanzo Dev: this host is the
 // dev agent. Chat, on the rooms shell, is Hanzo AI.
 //
-// THE ADDRESS IS THE QUERY. The app is `/` (app/page.tsx), and what it shows
-// rides `?at=` in the builder's own grammar (lib/host.ts `AT`), so a run, a
+// THE ADDRESS IS THE PATH. Dev is `/dev`, and what it shows is the path under
+// it in the builder's own grammar (lib/host.ts `app`, `under`), so a run, a
 // screen, a Settings section, a Customize tab, the plans and a project all
 // survive a reload, and Back steps through them. A move is a native history
-// entry, which the Next router folds into `useSearchParams`, so reading the
-// address and moving it are one query.
+// entry, which the Next router folds into `usePathname`, so reading the address
+// and moving it are one path.
 import { useMemo } from 'react';
 import { useLook, useRooms } from './host.js';
 import { useIam } from '@hanzo/iam/react';
@@ -21,7 +21,7 @@ import { administers, path, route } from '@hanzo/build';
 import { bearer, named, org, orgs, pick } from './lib/session.js';
 import { enter } from './lib/destination.js';
 import { api } from './lib/api.js';
-import { app, AT } from './lib/host.js';
+import { app, under } from './lib/host.js';
 import { link } from './lib/tags.js';
 /** Where the builder links out: every one of them an address of this site. */
 const LINKS = {
@@ -32,14 +32,14 @@ const LINKS = {
 };
 /** The person's theme, when they have chosen one the builder can name. */
 const theme = (t) => (t === 'light' || t === 'dark' || t === 'system' ? t : undefined);
-/** The app address a query value names, canonical; '' for anything that is not one. */
+/** The app address a builder path names, canonical; '' for anything that is not one. */
 const canonical = (at) => path(route(at ?? ''));
 /** The host for a signed-in reader. */
 export function useDevHost() {
     const { user, accessToken } = useIam();
     const logout = useSignOut();
-    const { router, search } = useRooms();
-    const here = canonical(search?.get(AT) ?? null);
+    const { router, path: pathname } = useRooms();
+    const here = canonical(under(pathname));
     const look = useLook();
     // The token's claims change only when the token does: a sign-in, a refresh.
     const memberships = useMemo(() => orgs(), [accessToken]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -70,7 +70,7 @@ export function useDevHost() {
         path: here,
         go: (to, how) => {
             const next = app(canonical(to));
-            if (`${window.location.pathname}${window.location.search}` === next)
+            if (window.location.pathname === next && !window.location.search)
                 return;
             if (how?.replace)
                 window.history.replaceState(null, '', next);

package/dist/host.d.ts

@@ -7,7 +7,7 @@
  *
  *   configure({ site: 'https://hanzo.ai', home: '/', signUp: '/start' })
  *
- *   <Rooms router={useRouter()} search={useSearchParams()} route={route} Link={Link}>
+ *   <Rooms router={useRouter()} search={useSearchParams()} path={usePathname()} route={route} Link={Link}>
  *     <Room mode="cal" />
  *   </Rooms>
  *
@@ -17,7 +17,7 @@
  * any component and on pages the rooms never draw. So the host states them once
  * with `configure()`, in a module its root imports, before anything renders.
  *
- * The ROUTER, the query and the route change as the page moves, so they ride
+ * The ROUTER, the query, the path and the route change as the page moves, so they ride
  * React context, and a room reads them with `useRooms()`.
  */
 import { type AnchorHTMLAttributes, type ComponentType, type ReactNode } from 'react';
@@ -34,14 +34,18 @@ export interface Router {
 }
 interface Moving {
     router: Router;
-    /** The address's query, for the rooms that read one (Dev's `?at=`). */
+    /** The address's query, for the rooms that read one (Chat's `?chat=`). */
     search: URLSearchParams | null;
+    /** The address's path, for the rooms that read one (Dev's, under `/dev`). */
+    path: string | null;
     route: string;
     Link: Link;
 }
-export interface RoomsProps extends Omit<Moving, 'search'> {
+export interface RoomsProps extends Omit<Moving, 'search' | 'path'> {
     /** Absent where no mounted room reads the query, so a static export needs no Suspense for it. */
     search?: URLSearchParams | null;
+    /** Absent where no mounted room reads the path. */
+    path?: string | null;
     children?: ReactNode;
 }
 /** The router, the query, the route and the link the host mounted the rooms with. */
@@ -72,5 +76,5 @@ export declare function useLook(): {
  * keeps their choice in step with IAM.
  */
 export declare function Look(): any;
-export declare function Rooms({ router, search, route, Link, children }: RoomsProps): import("react").JSX.Element;
+export declare function Rooms({ router, search, path, route, Link, children }: RoomsProps): import("react").JSX.Element;
 export {};

package/dist/host.js

@@ -9,7 +9,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  *   configure({ site: 'https://hanzo.ai', home: '/', signUp: '/start' })
  *
- *   <Rooms router={useRouter()} search={useSearchParams()} route={route} Link={Link}>
+ *   <Rooms router={useRouter()} search={useSearchParams()} path={usePathname()} route={route} Link={Link}>
  *     <Room mode="cal" />
  *   </Rooms>
  *
@@ -19,7 +19,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * any component and on pages the rooms never draw. So the host states them once
  * with `configure()`, in a module its root imports, before anything renders.
  *
- * The ROUTER, the query and the route change as the page moves, so they ride
+ * The ROUTER, the query, the path and the route change as the page moves, so they ride
  * React context, and a room reads them with `useRooms()`.
  */
 import { createContext, useContext } from 'react';
@@ -35,6 +35,7 @@ const Context = createContext({
         forward: () => window.history.forward(),
     },
     search: null,
+    path: null,
     route: '/',
     Link: Plain,
 });
@@ -71,6 +72,6 @@ export function Look() {
     useLook();
     return null;
 }
-export function Rooms({ router, search = null, route, Link, children }) {
-    return _jsx(Context.Provider, { value: { router, search, route, Link }, children: children });
+export function Rooms({ router, search = null, path = null, route, Link, children }) {
+    return _jsx(Context.Provider, { value: { router, search, path, route, Link }, children: children });
 }

package/dist/lib/host.d.ts

@@ -30,30 +30,35 @@ export declare const ENTRY = "https://hanzo.team/?signin";
  */
 export declare const START = "https://hanzo.team/start";
 /**
- * The web app, at `/` for a signed-in reader, in two modes. Chat is the default.
- * Dev is @hanzo/build's `<Builder>`, and what it shows rides ONE query, `?at=`,
- * in the builder's own grammar (`route` in @hanzo/build): '' New, `sess_<id>` a
- * run, `-/<screen>`, `-/settings[/<section>]`, `-/customize[/<tab>]`,
- * `-/plans`, `<slug>` a project. A query and not a path, because a static
- * export has no server to answer a path under `/`.
+ * The web app, for a signed-in reader, in two modes. Chat is the default, at
+ * `/`. Dev is @hanzo/build's `<Builder>` at `/dev`, and what it shows is the
+ * PATH under it, in the builder's own grammar (`route` in @hanzo/build): `/dev`
+ * New, `/dev/sess_<id>` a run, `/dev/<org>/<repo>` a project,
+ * `/dev/-/<screen>`, `/dev/-/settings[/<section>]`, `/dev/-/customize[/<tab>]`,
+ * `/dev/<slug>` a deployed site. The export holds one page for all of them,
+ * `/dev`, and the edge serves it for every path under it (hanzo.ai's
+ * lib/edge.ts `APP`).
  */
-export declare const AT = "at";
-/** `/` in Dev at an app address; '' is Dev's New, `/?at=`. The key is the mode. */
+export declare const DEV = "/dev";
+/** Dev at an app address; '' is Dev's New, `/dev` itself. */
 export declare const app: (path: string) => string;
+/** The app address a pathname names under `/dev`, or null for a pathname that is not Dev's. */
+export declare const under: (pathname: string | null | undefined) => string | null;
 /**
  * Chat, the app's default mode: `/` is a new conversation and `?chat=<id>` one
- * of the reader's. So the address says which mode the app is in — `at` for Dev,
- * anything else Chat — and a reload keeps it.
+ * of the reader's. So the address says which mode the app is in — a path under
+ * `/dev` for Dev, anything else Chat — and a reload keeps it.
  */
 export declare const TALK = "chat";
 /** `/` in Chat, on a conversation, or `/` itself for a new one. */
 export declare const talk: (id?: string | null) => string;
 /**
- * The door opened on one run or project: `?run=` or `?project=`, the query the
- * door turns into `?at=` — and the one the console and shared links already
- * carry. Only a value that is exactly a session id or a project slug is
- * carried; anything else opens /dev itself, so no caller can make this name
- * another address.
+ * Dev opened on one run, project or site, from anywhere: every "Try Hanzo Dev"
+ * link, a room's Dev, the console's "open in the builder". It signs a stranger
+ * in on the way (app/(app)/dev/_door.tsx), and is reached through `site()`:
+ * here on hanzo.ai, across to hanzo.ai from hanzo.team. Only a value that is
+ * exactly a session id, a repository or a site's slug is carried; anything else
+ * opens /dev itself, so no caller can make this name another address.
  */
 export declare const dev: (ref?: string | null) => string;
 /**

package/dist/lib/host.js

@@ -32,44 +32,59 @@ export const ENTRY = `${WORKSPACE}/?signin`;
  */
 export const START = `${WORKSPACE}/start`;
 /**
- * The web app, at `/` for a signed-in reader, in two modes. Chat is the default.
- * Dev is @hanzo/build's `<Builder>`, and what it shows rides ONE query, `?at=`,
- * in the builder's own grammar (`route` in @hanzo/build): '' New, `sess_<id>` a
- * run, `-/<screen>`, `-/settings[/<section>]`, `-/customize[/<tab>]`,
- * `-/plans`, `<slug>` a project. A query and not a path, because a static
- * export has no server to answer a path under `/`.
+ * The web app, for a signed-in reader, in two modes. Chat is the default, at
+ * `/`. Dev is @hanzo/build's `<Builder>` at `/dev`, and what it shows is the
+ * PATH under it, in the builder's own grammar (`route` in @hanzo/build): `/dev`
+ * New, `/dev/sess_<id>` a run, `/dev/<org>/<repo>` a project,
+ * `/dev/-/<screen>`, `/dev/-/settings[/<section>]`, `/dev/-/customize[/<tab>]`,
+ * `/dev/<slug>` a deployed site. The export holds one page for all of them,
+ * `/dev`, and the edge serves it for every path under it (hanzo.ai's
+ * lib/edge.ts `APP`).
  */
-export const AT = 'at';
-/** `/` in Dev at an app address; '' is Dev's New, `/?at=`. The key is the mode. */
-export const app = (path) => `/?${AT}=${path}`;
+export const DEV = '/dev';
+/** Dev at an app address; '' is Dev's New, `/dev` itself. */
+export const app = (path) => {
+    const p = path.replace(/^\/+|\/+$/g, '');
+    return p ? `${DEV}/${p}` : DEV;
+};
+/** The app address a pathname names under `/dev`, or null for a pathname that is not Dev's. */
+export const under = (pathname) => {
+    if (!pathname)
+        return null;
+    if (pathname === DEV || pathname === `${DEV}/`)
+        return '';
+    if (!pathname.startsWith(`${DEV}/`))
+        return null;
+    try {
+        return decodeURIComponent(pathname.slice(DEV.length + 1));
+    }
+    catch {
+        return '';
+    }
+};
 /**
  * Chat, the app's default mode: `/` is a new conversation and `?chat=<id>` one
- * of the reader's. So the address says which mode the app is in — `at` for Dev,
- * anything else Chat — and a reload keeps it.
+ * of the reader's. So the address says which mode the app is in — a path under
+ * `/dev` for Dev, anything else Chat — and a reload keeps it.
  */
 export const TALK = 'chat';
 /** `/` in Chat, on a conversation, or `/` itself for a new one. */
 export const talk = (id) => (id ? `/?${TALK}=${encodeURIComponent(id)}` : '/');
-/**
- * The door into the app: every "Try Hanzo Dev" link, the rail's Dev, the
- * console's "open in the builder", dev.hanzo.ai. It signs a stranger in and
- * forwards a member to Dev in the app, `/?at=` (app/(app)/dev/_door.tsx). It is
- * the app's page, so it is reached through `site()`: here on hanzo.ai, across
- * to hanzo.ai from hanzo.team.
- */
-const DEV = '/dev';
 /** A run, as the platform mints its id. */
 const SESSION = /^sess_[0-9a-f]{32}$/;
-/** A project, as the Sites plane slugs it. */
+/** A deployed site, as the Sites plane slugs it. */
 const SLUG = /^[a-z0-9](?:[a-z0-9-]{0,38}[a-z0-9])?$/;
+/** A repository on the forge, `<org>/<name>`. */
+const REPO = /^[A-Za-z0-9][A-Za-z0-9._-]{0,63}\/[A-Za-z0-9][A-Za-z0-9._-]{0,63}$/;
 /**
- * The door opened on one run or project: `?run=` or `?project=`, the query the
- * door turns into `?at=` — and the one the console and shared links already
- * carry. Only a value that is exactly a session id or a project slug is
- * carried; anything else opens /dev itself, so no caller can make this name
- * another address.
+ * Dev opened on one run, project or site, from anywhere: every "Try Hanzo Dev"
+ * link, a room's Dev, the console's "open in the builder". It signs a stranger
+ * in on the way (app/(app)/dev/_door.tsx), and is reached through `site()`:
+ * here on hanzo.ai, across to hanzo.ai from hanzo.team. Only a value that is
+ * exactly a session id, a repository or a site's slug is carried; anything else
+ * opens /dev itself, so no caller can make this name another address.
  */
-export const dev = (ref) => site(!ref ? DEV : SESSION.test(ref) ? `${DEV}?run=${ref}` : SLUG.test(ref) ? `${DEV}?project=${ref}` : DEV);
+export const dev = (ref) => site(ref && (SESSION.test(ref) || REPO.test(ref) || SLUG.test(ref)) ? app(ref) : DEV);
 /** The routes under app/(app) the apex keeps: the app — /chat, a chat shared by link, and /dev. */
 const KEPT = new Set(['/chat', '/chat/shared', '/dev']);
 /** Settings, and every page under it: the person's and the organization's, served wherever the app is. */

package/dist/lib/session.js

@@ -14,7 +14,7 @@
  * who was signed in, which reads as a permissions problem rather than a typo.
  * Two derivations of one name never agree; this is the one derivation.
  */
-import { AT, TALK } from './host.js';
+import { TALK } from './host.js';
 import { api } from './api.js';
 /** The SDK's own keys, `hanzo_iam_`-prefixed. The far side of a boundary. */
 const PREFIX = 'hanzo_iam_';
@@ -59,12 +59,13 @@ export function live() {
 /** The attribute on `<html>` that says `/` is showing the app, not the landing. */
 export const APP = 'data-app';
 /**
- * An address on `/` that names a place in the app — `?at=` in Dev, `?chat` in
- * Chat (lib/host.ts `AT`, `TALK`). The app is signed-in only, so a reader
- * nobody has signed in is sent to hanzo.id with it rather than shown the
- * landing, and it comes back with them.
+ * An address on `/` that names a place in the app — `?chat` in Chat
+ * (lib/host.ts `TALK`; Dev's places are paths under `/dev`, whose own page
+ * signs a stranger in). The app is signed-in only, so a reader nobody has
+ * signed in is sent to hanzo.id with it rather than shown the landing, and it
+ * comes back with them.
  */
-const PLACE = new RegExp(`[?&](?:${AT}|${TALK})(?:[=&]|$)`);
+const PLACE = new RegExp(`[?&]${TALK}(?:[=&]|$)`);
 /** Whether `search` names a place in the app. */
 export const place = (search) => PLACE.test(search);
 /**

package/dist/recent.d.ts

@@ -9,10 +9,12 @@ export interface Recent {
     began: string;
     status?: string;
     project?: string;
+    /** A conversation its person pinned: listed first, under Pinned. */
+    pinned?: boolean;
 }
-export type Status = 'all' | 'running' | 'paused' | 'done' | 'error' | 'stopped';
+export type Status = 'all' | 'running' | 'paused' | 'done' | 'error' | 'stopped' | 'archived';
 export type Since = 'any' | 'day' | 'week' | 'month';
-export type Group = 'date' | 'state' | 'project' | 'starred' | 'none';
+export type Group = 'date' | 'state' | 'project' | 'none';
 export type Sort = 'activity' | 'created' | 'title';
 /** How the list is narrowed, grouped and sorted. */
 export interface View {
@@ -35,11 +37,13 @@ export declare const MENUS: Record<Mode, {
 }>;
 /** A kept view as this mode may hold it: anything a menu does not offer reads as the plain view's. */
 export declare function viewOf(mode: Mode, kept: unknown): View;
-/** Chat's conversations as rows. */
+/** Chat's conversations as rows: an archived one's status says so. */
 export declare function chats(threads: {
     id: string;
     title?: string;
     updatedAt?: string;
+    pinned?: boolean;
+    archived?: boolean;
 }[]): Recent[];
 /** Dev's runs as rows. */
 export declare function runs(sessions: {
@@ -53,13 +57,16 @@ export declare function runs(sessions: {
 }[]): Recent[];
 /**
  * The list as drawn: the rows the view and the words admit, sorted, and cut into
- * headed groups in the order they read. A view grouped by None is one group with
+ * headed groups in the order they read. Pinned rows come first, under Pinned,
+ * whatever the grouping; a view grouped by None holds the rest in one group with
  * no heading.
  */
-export declare function arrange(rows: Recent[], view: View, words: string, starred: Set<string>, now?: Date): {
+export declare function arrange(rows: Recent[], view: View, words: string, now?: Date): {
     title: string;
     rows: Recent[];
 }[];
+/** The heading pinned rows read under, first in every view. */
+export declare const PINNED = "Pinned";
 /**
  * How long ago a row was last active, as a list reads it at a glance: `now`,
  * `12m`, `3h`, `2d`, `5w`, `4mo`, `2y`. '' for an instant that is not one.

package/dist/recent.js

@@ -17,11 +17,14 @@ export const SINCE = [
 ];
 /** What each mode's menu offers, section by section, as Claude's Recents menu does. */
 export const MENUS = {
+    // A chat's status is whether it is archived: the store lists the two apart.
     chat: {
-        status: [],
+        status: [
+            { id: 'all', label: 'Active' },
+            { id: 'archived', label: 'Archived' },
+        ],
         group: [
             { id: 'date', label: 'Date' },
-            { id: 'starred', label: 'Starred' },
             { id: 'none', label: 'None' },
         ],
         sort: [
@@ -56,9 +59,17 @@ export function viewOf(mode, kept) {
         sort: pick(k.sort, m.sort, PLAIN.sort),
     };
 }
-/** Chat's conversations as rows. */
+/** Chat's conversations as rows: an archived one's status says so. */
 export function chats(threads) {
-    return threads.map((t) => ({ kind: 'chat', id: t.id, title: t.title || 'Untitled', at: t.updatedAt ?? '', began: t.updatedAt ?? '' }));
+    return threads.map((t) => ({
+        kind: 'chat',
+        id: t.id,
+        title: t.title || 'Untitled',
+        at: t.updatedAt ?? '',
+        began: t.updatedAt ?? '',
+        ...(t.archived ? { status: 'archived' } : {}),
+        ...(t.pinned ? { pinned: true } : {}),
+    }));
 }
 /** Dev's runs as rows. */
 export function runs(sessions) {
@@ -96,10 +107,11 @@ function day(at, now) {
 const newest = (a, b) => (a < b ? 1 : a > b ? -1 : 0);
 /**
  * The list as drawn: the rows the view and the words admit, sorted, and cut into
- * headed groups in the order they read. A view grouped by None is one group with
+ * headed groups in the order they read. Pinned rows come first, under Pinned,
+ * whatever the grouping; a view grouped by None holds the rest in one group with
  * no heading.
  */
-export function arrange(rows, view, words, starred, now = new Date()) {
+export function arrange(rows, view, words, now = new Date()) {
     const w = words.trim().toLowerCase();
     const kept = rows.filter((r) => (!w || r.title.toLowerCase().includes(w)) &&
         (view.status === 'all' || r.status === view.status) &&
@@ -113,14 +125,14 @@ export function arrange(rows, view, words, starred, now = new Date()) {
                 return STATE[r.status ?? ''] ?? 'Other';
             case 'project':
                 return r.project || 'No project';
-            case 'starred':
-                return starred.has(r.id) ? 'Starred' : 'Others';
             default:
                 return '';
         }
     };
     const groups = [];
     for (const r of kept) {
+        if (r.pinned)
+            continue;
         const title = headOf(r);
         const g = groups.find((one) => one.title === title);
         if (g)
@@ -128,12 +140,13 @@ export function arrange(rows, view, words, starred, now = new Date()) {
         else
             groups.push({ title, rows: [r] });
     }
-    if (view.group === 'starred')
-        groups.sort((a, b) => (a.title === 'Starred' ? -1 : b.title === 'Starred' ? 1 : 0));
     if (view.group === 'date')
         groups.sort((a, b) => DAYS.indexOf(a.title) - DAYS.indexOf(b.title));
-    return groups;
+    const pinned = kept.filter((r) => r.pinned);
+    return pinned.length ? [{ title: PINNED, rows: pinned }, ...groups] : groups;
 }
+/** The heading pinned rows read under, first in every view. */
+export const PINNED = 'Pinned';
 /**
  * How long ago a row was last active, as a list reads it at a glance: `now`,
  * `12m`, `3h`, `2d`, `5w`, `4mo`, `2y`. '' for an instant that is not one.

package/dist/thread.d.ts

@@ -0,0 +1,35 @@
+import { type ReactElement, type ReactNode } from 'react';
+import type { Thread } from '@hanzo/ai';
+import { useThreads } from '@hanzo/ai/react';
+/**
+ * The member's conversations: pinned first, then most recently spoken in, the
+ * archived ones left out — or, with `archived`, those alone. It reads again
+ * whenever a conversation changes here, and once for `seek` when it does not
+ * hold it: a conversation it has not seen is one just begun.
+ */
+export declare function useThreadList(archived?: boolean, seek?: string | null): ReturnType<typeof useThreads>;
+/** What a conversation can be asked to do. Each reports a failure in a toast, in its own words. */
+export declare function useThreadActions(): {
+    pin: (t: Thread) => Promise<boolean>;
+    archive: (t: Thread) => Promise<boolean>;
+    rename: (t: Thread, title: string) => Promise<boolean>;
+    remove: (t: Thread) => Promise<boolean>;
+};
+/**
+ * One conversation's row with its menu: a right-click anywhere on it, or its ⋯.
+ *
+ * The ⋯ stands where `aside` (the row's age) stands, and takes its place while
+ * the row is hovered, focused, open in the pane or has its menu open; the rest
+ * of the time the age reads there. `onGone` runs after the conversation the
+ * pane holds is deleted — the column moves to a new chat — and defaults to
+ * emptying the room.
+ */
+export declare function ThreadRow({ t, active, aside, onGone, listed, children, }: {
+    t: Thread;
+    active?: boolean;
+    aside?: ReactNode;
+    onGone?: () => void;
+    /** A row of a list (`role="listitem"`); false where it stands among other rows. */
+    listed?: boolean;
+    children: ReactElement;
+}): import("react").JSX.Element;

package/dist/thread.js

@@ -0,0 +1,147 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A conversation's own actions — pin, rename, archive, delete — kept where the
+// conversation is: PATCH and DELETE /v1/agent/chat/conversations/{id}
+// (hanzoai/agent v1.0.12), the member's own only. One menu, two ways in: a
+// right-click on the row opens it at the cursor (gui's ContextMenu), and the
+// row's ⋯ hangs it from itself (gui's DropdownMenu), which a keyboard reaches.
+// One list of items feeds both. Not @hanzo/ui/product/menu's ContextMenu: it
+// portals its panel under gui's `pointer-events: none` host, so it drew and took
+// no click (measured: every ancestor of its panel reads `none`).
+//
+// EVERY LIST ON THE PAGE READS AGAIN WHEN ONE CONVERSATION CHANGES, so the
+// column's Recents, the rooms' shell and the conversation's own header agree
+// without a second copy of anyone's pins. A pin is the server's, never this
+// browser's: it follows the person to every device they sign in on.
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useAi, useThreads } from '@hanzo/ai/react';
+import { Archive, ArchiveRestore, MoreHorizontal, Pencil, Pin, PinOff, Trash2 } from 'lucide-react';
+import { Button, ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, Dialog, DialogContent, DialogTitle, DropdownMenu, Input, SizableText, XStack, YStack, toast, } from '@hanzo/ui';
+import { empty, useOpen } from './open.js';
+import { say } from './lib/org.js';
+const lists = new Set();
+/** Every list of conversations on the page reads again. */
+const changed = () => lists.forEach((reload) => reload());
+/**
+ * The member's conversations: pinned first, then most recently spoken in, the
+ * archived ones left out — or, with `archived`, those alone. It reads again
+ * whenever a conversation changes here, and once for `seek` when it does not
+ * hold it: a conversation it has not seen is one just begun.
+ */
+export function useThreadList(archived = false, seek = null) {
+    const store = useThreads({ archived });
+    const { reload, loading, threads } = store;
+    useEffect(() => {
+        lists.add(reload);
+        return () => {
+            lists.delete(reload);
+        };
+    }, [reload]);
+    const asked = useRef(new Set());
+    useEffect(() => {
+        if (archived || !seek || loading || asked.current.has(seek) || threads.some((t) => t.id === seek))
+            return;
+        asked.current.add(seek);
+        reload();
+    }, [archived, seek, loading, threads, reload]);
+    return store;
+}
+/** What a conversation can be asked to do. Each reports a failure in a toast, in its own words. */
+export function useThreadActions() {
+    const ai = useAi();
+    const run = useCallback(async (work) => {
+        try {
+            await work();
+            changed();
+            return true;
+        }
+        catch (e) {
+            toast.error(say(e));
+            return false;
+        }
+    }, []);
+    return {
+        pin: (t) => run(() => ai.threads.update(t.id, { pinned: !t.pinned })),
+        archive: (t) => run(() => ai.threads.update(t.id, { archived: !t.archived })),
+        rename: (t, title) => run(() => ai.threads.update(t.id, { title })),
+        remove: (t) => run(() => ai.threads.remove(t.id)),
+    };
+}
+const titleOf = (t) => t.title || 'Untitled';
+/**
+ * One conversation's row with its menu: a right-click anywhere on it, or its ⋯.
+ *
+ * The ⋯ stands where `aside` (the row's age) stands, and takes its place while
+ * the row is hovered, focused, open in the pane or has its menu open; the rest
+ * of the time the age reads there. `onGone` runs after the conversation the
+ * pane holds is deleted — the column moves to a new chat — and defaults to
+ * emptying the room.
+ */
+export function ThreadRow({ t, active = false, aside, onGone = empty, listed = true, children, }) {
+    const act = useThreadActions();
+    const { thread } = useOpen();
+    const [menu, setMenu] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const [renaming, setRenaming] = useState(false);
+    const [deleting, setDeleting] = useState(false);
+    const items = [
+        {
+            key: 'pin',
+            label: t.pinned ? 'Unpin' : 'Pin',
+            icon: t.pinned ? _jsx(PinOff, { size: 16, "aria-hidden": true }) : _jsx(Pin, { size: 16, "aria-hidden": true }),
+            onSelect: () => void act.pin(t),
+        },
+        { key: 'rename', label: 'Rename', icon: _jsx(Pencil, { size: 16, "aria-hidden": true }), onSelect: () => setRenaming(true) },
+        {
+            key: 'archive',
+            label: t.archived ? 'Unarchive' : 'Archive',
+            icon: t.archived ? _jsx(ArchiveRestore, { size: 16, "aria-hidden": true }) : _jsx(Archive, { size: 16, "aria-hidden": true }),
+            onSelect: () => void act.archive(t),
+        },
+        { type: 'separator', key: 'gone' },
+        { key: 'delete', label: 'Delete', icon: _jsx(Trash2, { size: 16, "aria-hidden": true }), destructive: true, onSelect: () => setDeleting(true) },
+    ];
+    // The ⋯ and the age share one place: whichever shows, the other gives way.
+    const shown = active || menu || focused;
+    return (_jsxs(_Fragment, { children: [_jsxs(ContextMenu, { children: [_jsx(ContextMenuTrigger, { asChild: true, children: _jsxs(YStack, { ...(listed ? { role: 'listitem' } : null), position: "relative", group: true, "data-thread": t.id, "data-pinned": t.pinned ? '' : undefined, children: [children, aside ? (_jsx(XStack, { position: "absolute", r: "$2", t: 0, b: 0, items: "center", pointerEvents: "none", opacity: shown ? 0 : 1, "$group-hover": { opacity: 0 }, children: aside })) : null, _jsx(XStack, { position: "absolute", r: "$1", t: 0, b: 0, items: "center", children: _jsx(DropdownMenu, { open: menu, onOpenChange: setMenu, minWidth: 180, items: items, trigger: _jsx(XStack, { render: "button", "aria-label": "Chat options", "aria-haspopup": "menu", "data-slot": "thread-options", width: 26, height: 26, rounded: "$2", items: "center", justify: "center", cursor: "pointer", bg: "transparent", opacity: shown ? 1 : 0, "$group-hover": { opacity: 1 }, hoverStyle: { bg: '$hover' }, onFocus: () => setFocused(true), onBlur: () => setFocused(false), children: _jsx(MoreHorizontal, { size: 15, "aria-hidden": true }) }) }) })] }) }), _jsx(ContextMenuContent, { children: items.map((one, i) => one.type === 'separator' ? (_jsx(ContextMenuSeparator, {}, one.key ?? i)) : one.type === 'label' ? null : (_jsxs(ContextMenuItem, { variant: one.destructive ? 'destructive' : 'default', onSelect: one.onSelect, children: [one.icon, one.label] }, one.key))) })] }), _jsx(Rename, { t: t, open: renaming, onOpenChange: setRenaming, save: (words) => act.rename(t, words) }), _jsx(Delete, { t: t, open: deleting, onOpenChange: setDeleting, remove: async () => {
+                    const ok = await act.remove(t);
+                    if (ok && thread === t.id)
+                        onGone();
+                    return ok;
+                } })] }));
+}
+/** A conversation's title, written again: one line, never empty. */
+function Rename({ t, open, onOpenChange, save, }) {
+    const [words, setWords] = useState(titleOf(t));
+    const [busy, setBusy] = useState(false);
+    useEffect(() => {
+        if (open)
+            setWords(titleOf(t));
+    }, [open, t]);
+    const submit = async () => {
+        const title = words.trim();
+        if (!title || busy)
+            return;
+        setBusy(true);
+        if (await save(title))
+            onOpenChange(false);
+        setBusy(false);
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 440, rounded: "$6", gap: "$3", children: [_jsx(DialogTitle, { children: "Rename chat" }), _jsx(Input, { autoFocus: true, value: words, onChangeText: setWords, "aria-label": "Chat title", maxLength: 80, onKeyDown: (e) => {
+                        if (e.key === 'Enter')
+                            void submit();
+                    } }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "outline", rounded: 999, onPress: () => onOpenChange(false), children: "Cancel" }), _jsx(Button, { size: "sm", rounded: 999, disabled: busy || !words.trim(), onPress: () => void submit(), children: busy ? 'Saving…' : 'Save' })] })] }) }));
+}
+/** Deleting asks first, and says what goes with it: every turn, and every link it was shared by. */
+function Delete({ t, open, onOpenChange, remove, }) {
+    const [busy, setBusy] = useState(false);
+    const submit = async () => {
+        if (busy)
+            return;
+        setBusy(true);
+        if (await remove())
+            onOpenChange(false);
+        setBusy(false);
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 440, rounded: "$6", gap: "$3", children: [_jsx(DialogTitle, { children: "Delete chat?" }), _jsx(SizableText, { size: "$2", color: "$soft", children: `“${titleOf(t)}” is deleted for good, with every link it was shared by. To keep it out of the list instead, archive it.` }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "outline", rounded: 999, onPress: () => onOpenChange(false), children: "Cancel" }), _jsx(Button, { size: "sm", variant: "destructive", rounded: 999, disabled: busy, onPress: () => void submit(), children: busy ? 'Deleting…' : 'Delete' })] })] }) }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/rooms",
-  "version": "0.1.34",
+  "version": "0.1.36",
   "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",
@@ -47,7 +47,7 @@
     "simple-icons": "16.30.0"
   },
   "peerDependencies": {
-    "@hanzo/ai": ">=0.6.20",
+    "@hanzo/ai": ">=0.6.23",
     "@hanzo/appearance": ">=0.2.6",
     "@hanzo/build": ">=0.2.34",
     "@hanzo/composer": ">=0.2.0",
@@ -65,7 +65,7 @@
     "react-dom": ">=19.2.8"
   },
   "devDependencies": {
-    "@hanzo/ai": "0.6.20",
+    "@hanzo/ai": "0.6.23",
     "@hanzo/appearance": "0.2.8",
     "@hanzo/build": "0.2.34",
     "@hanzo/composer": "0.2.0",