@hanzo/rooms 0.1.35 → 0.1.37

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. Chat's rows share one
+// menu (thread.tsx `ConversationMenu`): 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 { ConversationMenu, 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, held: thread, 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,29 @@ 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, held = null, 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 t = threads?.get(r.id);
+        const item = (_jsx(SidebarItem, { "data-kind": r.kind, active: open(r), rounded: "$4", minH: 32, pr: when || t ? '$8' : '$2', ...(t ? { $touchable: { pr: 52 } } : null), 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;
+        if (t)
+            return (_jsx(ThreadRow, { t: t, active: open(r), aside: age, 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.' }))] })] }));
+    const body = 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.' }));
+    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, threads ? (_jsx(ConversationMenu, { threads: threads, active: held, onGone: onNew, children: _jsx(YStack, { children: body }) })) : (body)] })] }));
 }

package/dist/Share.d.ts

@@ -1,3 +1,13 @@
 export declare function Share({ thread }: {
     thread: string;
 }): import("react").JSX.Element;
+/**
+ * The same panel as a dialog, for a conversation the pane need not hold: a row
+ * menu's Share…. `onCloseAutoFocus` says where focus goes when it shuts.
+ */
+export declare function ShareDialog({ thread, open, onOpenChange, onCloseAutoFocus, }: {
+    thread: string | null;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onCloseAutoFocus?: (e: Event) => void;
+}): import("react").JSX.Element;

package/dist/Share.js

@@ -1,6 +1,8 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// The conversation header's Share control and the panel it opens.
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The conversation header's Share control and the panel it opens, and the same
+// panel as a dialog for a conversation's row menu (thread.tsx): one `Sharing`,
+// placed two ways.
 //
 // A link opens this ONE conversation, read only, as it stands when the link is
 // made (lib/share.ts), to the people who open it signed in. The panel copies
@@ -9,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // do not reply: a conversation belongs to the member who started it.
 import { useCallback, useEffect, useId, useRef, useState } from 'react';
 import { Check, Link2, Share2 } from 'lucide-react';
-import { Box, Button, Text, XStack, YStack } from '@hanzo/ui';
+import { Box, Button, Dialog, DialogContent, DialogTitle, Text, XStack, YStack } from '@hanzo/ui';
 import { hold, heldToken, link, Refused, shares } from './lib/share.js';
 import { BAD } from './lib/mix.js';
 /** How long "Link copied" stays. The same 1400 ms `Take` confirms for. */
@@ -29,9 +31,40 @@ export function Share({ thread }) {
     }, []);
     return (_jsxs(Box, { position: "relative", children: [_jsx(Box, { ref: button, render: "button", onClick: () => setOpen((o) => !o), "aria-haspopup": "dialog", "aria-expanded": open, "aria-label": "Share this conversation", borderWidth: 0, bg: "transparent", p: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsxs(XStack, { items: "center", gap: "$1", children: [_jsx(Share2, { size: 13, "aria-hidden": true }), _jsx(Text, { fontSize: "$2", color: "$ink", children: "Share" })] }) }), open ? _jsx(Panel, { thread: thread, onClose: close }) : null] }));
 }
+/** The header's panel: hung under its button, shut by Escape or a press outside, focus starting inside. */
 function Panel({ thread, onClose }) {
     const heading = useId();
     const box = useRef(null);
+    // Escape closes; a press outside closes; focus starts inside.
+    useEffect(() => {
+        box.current?.querySelector('button')?.focus();
+        const key = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        const press = (e) => {
+            if (box.current && !box.current.contains(e.target) && !e.target?.closest?.('[aria-haspopup="dialog"]'))
+                onClose();
+        };
+        document.addEventListener('keydown', key);
+        document.addEventListener('mousedown', press);
+        return () => {
+            document.removeEventListener('keydown', key);
+            document.removeEventListener('mousedown', press);
+        };
+    }, [onClose]);
+    return (_jsx(YStack, { ref: box, role: "dialog", "aria-labelledby": heading, position: "absolute", r: 0, t: "100%", mt: "$2", z: "var(--z-dropdown)", width: 360, maxW: "calc(100vw - 32px)", p: "$4", gap: "$3", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$background", boxShadow: "0 16px 36px color-mix(in srgb, var(--pure-black) 30%, transparent)", children: _jsx(Sharing, { thread: thread, note: `${heading}-said`, title: _jsx(Text, { id: heading, render: "h2", fontSize: "$4", fontWeight: "600", color: "$ink", children: "Share this chat" }) }) }));
+}
+/**
+ * The same panel as a dialog, for a conversation the pane need not hold: a row
+ * menu's Share…. `onCloseAutoFocus` says where focus goes when it shuts.
+ */
+export function ShareDialog({ thread, open, onOpenChange, onCloseAutoFocus, }) {
+    const note = useId();
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsx(DialogContent, { maxW: 400, rounded: "$6", gap: "$3", onCloseAutoFocus: onCloseAutoFocus, children: thread ? _jsx(Sharing, { thread: thread, note: note, title: _jsx(DialogTitle, { children: "Share this chat" }) }) : null }) }));
+}
+/** What a link to one conversation is, who opened each, and the controls over them. */
+function Sharing({ thread, title, note }) {
     const [live, setLive] = useState(null);
     const [busy, setBusy] = useState(null);
     const [wrong, setWrong] = useState(null);
@@ -51,24 +84,6 @@ function Panel({ thread, onClose }) {
             on = false;
         };
     }, [thread]);
-    // Escape closes; a press outside closes; focus starts inside.
-    useEffect(() => {
-        box.current?.querySelector('button')?.focus();
-        const key = (e) => {
-            if (e.key === 'Escape')
-                onClose();
-        };
-        const press = (e) => {
-            if (box.current && !box.current.contains(e.target) && !e.target?.closest?.('[aria-haspopup="dialog"]'))
-                onClose();
-        };
-        document.addEventListener('keydown', key);
-        document.addEventListener('mousedown', press);
-        return () => {
-            document.removeEventListener('keydown', key);
-            document.removeEventListener('mousedown', press);
-        };
-    }, [onClose]);
     useEffect(() => {
         if (!copied)
             return;
@@ -126,5 +141,5 @@ function Panel({ thread, onClose }) {
             setBusy(null);
         }
     };
-    return (_jsxs(YStack, { ref: box, role: "dialog", "aria-labelledby": heading, position: "absolute", r: 0, t: "100%", mt: "$2", z: "var(--z-dropdown)", width: 360, maxW: "calc(100vw - 32px)", p: "$4", gap: "$3", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$background", boxShadow: "0 16px 36px color-mix(in srgb, var(--pure-black) 30%, transparent)", children: [_jsx(Text, { id: heading, render: "h2", fontSize: "$4", fontWeight: "600", color: "$ink", children: "Share this chat" }), _jsx(Text, { fontSize: "$2", color: "$soft", lineHeight: "$3", children: "People who open the link signed in can read this chat as it is now, and you see who they are below. They cannot reply, and messages you send later are not shared." }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Button, { size: "sm", onClick: () => void copy(), disabled: busy !== null || live === null, "aria-describedby": `${heading}-said`, children: _jsxs(XStack, { items: "center", gap: "$1.5", children: [copied ? _jsx(Check, { size: 14, "aria-hidden": true }) : _jsx(Link2, { size: 14, "aria-hidden": true }), _jsx(Text, { fontSize: "$2", color: "inherit", children: copied ? 'Link copied' : busy === 'copy' ? 'Making a link…' : 'Copy link' })] }) }), _jsx(Text, { fontSize: "$1", color: "$soft", children: "Read only" })] }), _jsx(Text, { id: `${heading}-said`, "aria-live": "polite", fontSize: "$1", color: "$soft", minH: 16, children: copied ? 'The link is on your clipboard.' : '' }), _jsxs(YStack, { gap: "$2", children: [_jsx(Text, { fontSize: "$1", color: "$soft", textTransform: "uppercase", children: "Who has access" }), _jsxs(XStack, { items: "center", justify: "space-between", children: [_jsx(Text, { fontSize: "$2", color: "$ink", children: "You" }), _jsx(Text, { fontSize: "$1", color: "$soft", children: "Owner" })] }), live === null ? (_jsx(Text, { fontSize: "$2", color: "$soft", children: "Reading links." })) : live.length === 0 ? (_jsx(Text, { fontSize: "$2", color: "$soft", children: "No links yet. Copy link makes one." })) : (_jsx(YStack, { render: "ul", gap: "$2", m: 0, p: 0, "aria-label": "Live links", children: live.map((row) => (_jsxs(YStack, { render: "li", gap: "$1.5", children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [_jsxs(YStack, { minW: 0, children: [_jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: "Link" }), _jsxs(Text, { fontSize: "$1", color: "$soft", children: ["Read only", day(row.createdAt) ? ` · made ${day(row.createdAt)}` : ''] })] }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => void revoke(row.id), disabled: busy !== null, "aria-label": `Revoke the link made ${day(row.createdAt) || 'earlier'}`, children: busy === row.id ? 'Revoking…' : 'Revoke' })] }), (row.viewers ?? []).length === 0 ? (_jsx(Text, { fontSize: "$1", color: "$soft", pl: "$3", children: "Nobody has opened it yet." })) : (_jsx(YStack, { render: "ul", gap: "$1", m: 0, pl: "$3", "aria-label": "Opened by", children: row.viewers.map((v) => (_jsxs(XStack, { render: "li", items: "center", justify: "space-between", gap: "$2", children: [_jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: v.name || 'Someone signed in' }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => void unview(row, v), disabled: busy !== null, "aria-label": `Remove ${v.name || 'this reader'}`, children: busy === v.id ? 'Removing…' : 'Remove' })] }, v.id))) }))] }, row.id))) }))] }), wrong ? (_jsx(Text, { role: "alert", fontSize: "$2", color: BAD, children: wrong })) : null] }));
+    return (_jsxs(_Fragment, { children: [title, _jsx(Text, { fontSize: "$2", color: "$soft", lineHeight: "$3", children: "People who open the link signed in can read this chat as it is now, and you see who they are below. They cannot reply, and messages you send later are not shared." }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Button, { size: "sm", onClick: () => void copy(), disabled: busy !== null || live === null, "aria-describedby": note, children: _jsxs(XStack, { items: "center", gap: "$1.5", children: [copied ? _jsx(Check, { size: 14, "aria-hidden": true }) : _jsx(Link2, { size: 14, "aria-hidden": true }), _jsx(Text, { fontSize: "$2", color: "inherit", children: copied ? 'Link copied' : busy === 'copy' ? 'Making a link…' : 'Copy link' })] }) }), _jsx(Text, { fontSize: "$1", color: "$soft", children: "Read only" })] }), _jsx(Text, { id: note, "aria-live": "polite", fontSize: "$1", color: "$soft", minH: 16, children: copied ? 'The link is on your clipboard.' : '' }), _jsxs(YStack, { gap: "$2", children: [_jsx(Text, { fontSize: "$1", color: "$soft", textTransform: "uppercase", children: "Who has access" }), _jsxs(XStack, { items: "center", justify: "space-between", children: [_jsx(Text, { fontSize: "$2", color: "$ink", children: "You" }), _jsx(Text, { fontSize: "$1", color: "$soft", children: "Owner" })] }), live === null ? (_jsx(Text, { fontSize: "$2", color: "$soft", children: "Reading links." })) : live.length === 0 ? (_jsx(Text, { fontSize: "$2", color: "$soft", children: "No links yet. Copy link makes one." })) : (_jsx(YStack, { render: "ul", gap: "$2", m: 0, p: 0, "aria-label": "Live links", children: live.map((row) => (_jsxs(YStack, { render: "li", gap: "$1.5", children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [_jsxs(YStack, { minW: 0, children: [_jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: "Link" }), _jsxs(Text, { fontSize: "$1", color: "$soft", children: ["Read only", day(row.createdAt) ? ` · made ${day(row.createdAt)}` : ''] })] }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => void revoke(row.id), disabled: busy !== null, "aria-label": `Revoke the link made ${day(row.createdAt) || 'earlier'}`, children: busy === row.id ? 'Revoking…' : 'Revoke' })] }), (row.viewers ?? []).length === 0 ? (_jsx(Text, { fontSize: "$1", color: "$soft", pl: "$3", children: "Nobody has opened it yet." })) : (_jsx(YStack, { render: "ul", gap: "$1", m: 0, pl: "$3", "aria-label": "Opened by", children: row.viewers.map((v) => (_jsxs(XStack, { render: "li", items: "center", justify: "space-between", gap: "$2", children: [_jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: v.name || 'Someone signed in' }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => void unview(row, v), disabled: busy !== null, "aria-label": `Remove ${v.name || 'this reader'}`, children: busy === v.id ? 'Removing…' : 'Remove' })] }, v.id))) }))] }, row.id))) }))] }), wrong ? (_jsx(Text, { role: "alert", fontSize: "$2", color: BAD, children: wrong })) : null] }));
 }

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 { ConversationMenu, 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,18 @@ 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));
+    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);
+    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 +425,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: [_jsx(ConversationMenu, { threads: byId, active: thread, children: _jsxs(YStack, { 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, ...(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));
+                                // 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/chord.d.ts

@@ -0,0 +1,21 @@
+export type Act = 'rename' | 'pin';
+/** The part of a keydown this reads. */
+export interface Press {
+    key?: string;
+    code?: string;
+    ctrlKey: boolean;
+    altKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+    repeat?: boolean;
+    isComposing?: boolean;
+    target: EventTarget | null;
+}
+/** Whether a key pressed on `target` is typing: a field, a picker, or text that edits itself. */
+export declare function typing(target: EventTarget | null): boolean;
+/** What a keydown asks of a conversation, or null when it asks nothing of one. */
+export declare function chord(e: Press): Act | null;
+/** A chord as a menu prints it: ⌃⌥R on a Mac, Ctrl+Alt+R elsewhere. */
+export declare function said(act: Act, mac: boolean): string;
+/** A chord as `aria-keyshortcuts` says it, the same on every platform. */
+export declare const named: (act: Act) => string;

package/dist/chord.js

@@ -0,0 +1,51 @@
+// The keys that act on a conversation: Ctrl+Alt+R renames it, Ctrl+Alt+P pins
+// or unpins it — the one whose menu is open, or else the one the pane holds.
+// Never while the reader is typing or a dialog holds the keys, and once a press:
+// a held key repeats, and a held Ctrl+Alt+P would toggle the pin thirty times a
+// second. No React, so a spec reads it as it is.
+const LETTERS = { r: 'rename', p: 'pin' };
+/** Whether `target` sits inside something matching `selector`. */
+const within = (target, selector) => {
+    const el = target;
+    return Boolean(el && typeof el === 'object' && typeof el.closest === 'function' && el.closest(selector) !== null);
+};
+/** Whether a key pressed on `target` is typing: a field, a picker, or text that edits itself. */
+export function typing(target) {
+    const el = target;
+    if (!el || typeof el !== 'object')
+        return false;
+    if (el.isContentEditable)
+        return true;
+    const tag = (el.tagName ?? '').toUpperCase();
+    if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT')
+        return true;
+    return within(target, '[contenteditable=""],[contenteditable="true"],[role="textbox"]');
+}
+/**
+ * The letter a key press names: the one on the key, whatever the layout (the
+ * labelled P is where QWERTY's R is on Dvorak), or — where Option or AltGr made
+ * it another character, ⌥R being "®" on a Mac — the key's place.
+ */
+function letter(e) {
+    if (e.key && /^[a-z]$/i.test(e.key))
+        return e.key.toLowerCase();
+    const place = /^Key([A-Z])$/.exec(e.code ?? '');
+    return place ? place[1].toLowerCase() : null;
+}
+/** What a keydown asks of a conversation, or null when it asks nothing of one. */
+export function chord(e) {
+    if (!e.ctrlKey || !e.altKey || e.metaKey || e.shiftKey || e.repeat || e.isComposing)
+        return null;
+    const l = letter(e);
+    const act = l ? LETTERS[l] : undefined;
+    if (!act || typing(e.target) || within(e.target, '[role="dialog"],[role="alertdialog"]'))
+        return null;
+    return act;
+}
+/** A chord as a menu prints it: ⌃⌥R on a Mac, Ctrl+Alt+R elsewhere. */
+export function said(act, mac) {
+    const key = act === 'rename' ? 'R' : 'P';
+    return mac ? `⌃⌥${key}` : `Ctrl+Alt+${key}`;
+}
+/** A chord as `aria-keyshortcuts` says it, the same on every platform. */
+export const named = (act) => `Control+Alt+${act === 'rename' ? 'R' : 'P'}`;

package/dist/pending.d.ts

@@ -0,0 +1,41 @@
+import type { Thread } from '@hanzo/ai';
+/** What a change sets: the fields it names. */
+export type Patch = Partial<Pick<Thread, 'title' | 'pinned' | 'archived'>>;
+/** A list of conversations on the page: the moment its rows were asked for, and how to ask again. */
+export interface Reader {
+    at: number;
+    reload: () => void;
+}
+/** The next moment. A read takes one as it is asked for, an answer as it lands. */
+export declare const tick: () => number;
+/** For `useSyncExternalStore`: told whenever a change is made, settled, taken back or dropped. */
+export declare function subscribe(listener: () => void): () => void;
+/** For `useSyncExternalStore`: a number that moves whenever the changes do. */
+export declare const snapshot: () => number;
+/**
+ * Whose conversations these are: the client the lists read through. Another
+ * client is another reader or organization, and nothing asked under the last
+ * one is drawn over its rows.
+ */
+export declare function bind(next: unknown): void;
+/** A list joins the page; the returned function is its leaving. */
+export declare function enlist(reader: Reader): () => void;
+/** Every list on the page reads the store again. */
+export declare function reread(): void;
+/** Folds each settled change every list on the page has read after into the thread it was laid over. */
+export declare function sweep(): void;
+/**
+ * A list as it reads with every change it has not read yet: `threads` read at
+ * `at`, from the archived shelf or the active one. A deleted conversation
+ * leaves; one archived or brought back leaves the shelf it is no longer on and
+ * joins the other; any other change shows in place.
+ */
+export declare function view(threads: Thread[], at: number, archived: boolean): Thread[];
+/**
+ * Asks the store for one change to `t`, shown at once: `patch` the fields it
+ * sets, or null for a delete, and `send` the request, made once every earlier
+ * change to the same conversation has been answered. What the store answers
+ * for those fields is what shows. On a refusal this change alone is taken back
+ * and the refusal thrown.
+ */
+export declare function attempt(t: Thread, patch: Patch | null, send: () => Promise<Thread | void>): Promise<void>;