@hanzo/rooms 0.1.57 → 0.1.58

package/dist/App.d.ts

@@ -1 +1,13 @@
-export declare function App(): import("react").JSX.Element;
+/**
+ * The window's bar, for a host that is a window of its own: `inset` px kept
+ * clear at its left for the window's own controls (macOS paints its traffic
+ * lights over the page there), and `drag`, the attributes the host's shell
+ * reads as the region that moves the window.
+ */
+export interface Bar {
+    inset?: number;
+    drag?: Record<string, unknown>;
+}
+export declare function App({ bar }?: {
+    bar?: Bar;
+}): import("react").JSX.Element;

package/dist/App.js

@@ -2,58 +2,74 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The web app as the whole window, in two modes: Chat, a conversation with the
 // product's AI, and Dev, @hanzo/build's `<Builder>` without a rail of its own.
-// One column serves both (Column.tsx): the wordmark and the switch, New, Dev's
-// places, the reader's Recents in both modes, and the account. The address says
-// the mode, as a path (lib/host `talk`, `app`, `place`): `/` and `/chat` are
-// Chat on a new conversation, `/chat/<id>` one of the reader's, and a path under
-// `/dev` is Dev: `/dev/run/<id>` a run, `/dev/projects/<org>/<repo>` a project.
-// Moving between the modes is a history entry (`go`), never a load, so a host
-// serves this one component for every path under each.
 //
-// Every host draws this: hanzo.ai at `/`, the desktop app as its main window.
-// The host mounts IamProvider and `<Rooms>` with its router and the path, and
-// draws this only for a signed-in reader; what a stranger sees is the host's.
+//   OUTER  the rail (Rail.tsx) and the sidebar beside it (Column.tsx), on the
+//          window's floor, with the window's bar above them where the host has
+//          no browser around it (`bar`).
+//   INNER  the content, cut as one rounded panel inset from the window's edges
+//          and from the sidebar by the gutter (`--pane-gap`): Chat's
+//          conversation with its tabs beside it (Paned), or Dev's builder.
+//
+// The rail moves between the modes; the sidebar holds the mode's name, its
+// search, New, Dev's places and the reader's Recents. The address says the
+// mode, as a path (lib/host `talk`, `app`, `place`): `/` and `/chat` are Chat on
+// a new conversation, `/chat/<id>` one of the reader's, and a path under `/dev`
+// is Dev: `/dev/run/<id>` a run, `/dev/projects/<org>/<repo>` a project. Moving
+// between the modes is a history entry (`go`), never a load, so a host serves
+// this one component for every path under each.
+//
+// Every host draws this: hanzo.ai at `/`, `/chat` and `/dev`, and the desktop
+// app as its main window. The host mounts IamProvider and `<Rooms>` with its
+// router and the path, and draws this only for a signed-in reader; what a
+// stranger sees is the host's.
+//
+// THE SIDEBAR'S TOGGLE IS AT THE WINDOW'S TOP-LEFT. In a browser tab it leads
+// the rail. A host that is a window of its own (`bar`) has no browser around
+// it, so the app draws the window's bar: the toggle, then Back and Forward
+// through the host's router, clear of the window's own controls, and the bar
+// drags the window. Shut, the sidebar leaves the rail alone at the edge; the
+// choice is kept per browser under the key the builder's rail kept it under.
+//
+// THE KEYS: ⌘K / Ctrl+K searches the sidebar (opening it first), ⌘, / Ctrl+,
+// opens Settings, and in a window ⌘[ ⌘] / Alt+← Alt+→ are Back and Forward —
+// never while the reader types.
 //
 // DEV'S PANE HAS NO COLUMN BESIDE IT. The column beside a pane is Chat's (its
-// pinned summary, `useOpen().aside`), and that choice outlives a move to Dev,
-// where nothing fills it: drawn there it was an empty pane to the right of the
-// builder. So Dev's pane is cut on its own and the summary is Chat's alone.
+// tabs, `useOpen().aside`), and that choice outlives a move to Dev, where
+// nothing fills it. So Dev's pane is cut on its own and the tabs are Chat's.
 //
 // EVERY MOVE PUTS THE DRAWER AWAY, the one to where the reader already is
-// included. Pressed on the page it names, a row moves nothing, and a drawer
-// that closed only on a new address stayed open over the page it had asked for.
+// included.
 //
 // THE PLANS' OWN ADDRESS LEAVES for the pay site in its place (dev.tsx `leave`),
 // so the builder's own plans are never drawn.
-//
-// THE WINDOW IS A FRAME (`data-slot="frame"`): the column, the pane and the
-// column beside it are three panes floating on a lit floor (ground.ts), one
-// gutter round them and between them, `--pane-gap`, each sized by the edge
-// beside it.
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Menu } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ArrowLeft, ArrowRight, Menu } from 'lucide-react';
 import { AiProvider } from '@hanzo/ai/react';
 import { Text, XStack, YStack } from '@hanzo/gui';
-import { Builder, HostProvider, route } from '@hanzo/build';
+import { Builder, HostProvider, path as written, route } from '@hanzo/build';
 import { SidebarIconButton } from '@hanzo/ui/chat';
 import { useAi } from './lib/ai.js';
 import { Chat } from './Chat.js';
 import { Column } from './Column.js';
 import { isPlans, leave, useDevHost } from './dev.js';
 import { useRooms } from './host.js';
-import { wordmark } from './ModeMark.js';
+import { useKept } from './kept.js';
+import { Mark, Rail, Toggle } from './Rail.js';
 import { empty, openThread, useOpen } from './open.js';
 import { Paned } from './Shell.js';
 import { floor, pane } from './ground.js';
+import { pick } from './lib/session.js';
 import { app, go, place, talk } from './lib/host.js';
+import { wordmark } from './where.js';
 /** `/` is Chat on a new conversation. */
 const HOME = { mode: 'chat', thread: null };
+/** The bar's height, px: the reference window's title bar. */
+const BAR = 40;
 /**
  * The dim under the phone's drawer: design's scrim at two fifths, so the page
- * still reads through the drawer's glass the way it reads through the browser's
- * own bar, rather than a black wall the glass has nothing to show of. gui
- * carries a `color-mix()` to the page unchanged; its types only name custom
- * properties.
+ * still reads through the drawer's glass. gui carries a `color-mix()` to the
+ * page unchanged; its types only name custom properties.
  */
 const DIM = 'color-mix(in srgb, var(--surface-scrim) 40%, transparent)';
 /** The phone's drawer stands the gutter off each edge, or the device's inset where that is wider. */
@@ -62,11 +78,22 @@ const INSET = {
     bottom: 'max(var(--pane-gap), var(--safe-bottom))',
     left: 'max(var(--pane-gap), var(--safe-left))',
 };
-/** Where each mode was last, so the switch goes back to it. */
+/** Where each mode was last, so the rail goes back to it. */
 const last = { chat: '', dev: '' };
-export function App() {
+/** Whether a key press is the reader typing, where the app's keys are the field's. */
+const typing = (e) => {
+    const el = e.target;
+    return !!el && (el.isContentEditable || el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.tagName === 'SELECT');
+};
+/** The builder's Settings, general section. */
+const SETTINGS = written({ kind: 'settings', section: 'general' });
+export function App({ bar } = {}) {
     const [drawer, setDrawer] = useState(false);
     const shut = useCallback(() => setDrawer(false), []);
+    // The sidebar shut, kept per browser under the key the builder's rail kept it under.
+    const [closed, setClosed] = useKept('hanzo.build.rail', false);
+    // Each ⌘K: the sidebar's search, asked for again.
+    const [seek, setSeek] = useState(0);
     const dev = useDevHost();
     // The builder's moves put the drawer away first.
     const host = useMemo(() => ({
@@ -77,19 +104,22 @@ export function App() {
         },
     }), [dev, shut]);
     const { client } = useAi();
-    const here = useRooms().path ?? '/';
+    const { router, path } = useRooms();
+    const here = path ?? '/';
     const at = place(here) ?? HOME;
     const mode = at.mode;
+    const where = at.mode === 'dev' ? at.at : null;
     // A run floats two panes of its own, so the pane it stands in is not cut.
-    const run = at.mode === 'dev' && route(at.at).kind === 'run';
+    const run = where !== null && route(where).kind === 'run';
     const asked = at.mode === 'chat' ? at.thread : null;
     const { thread } = useOpen();
-    const plans = at.mode === 'dev' && isPlans(at.at);
+    const plans = where !== null && isPlans(where);
     useEffect(() => {
         if (plans)
             leave('app');
     }, [plans]);
-    // An address names Chat's conversation, and one just begun writes its id back.
+    // An address names Chat's conversation, a conversation just begun writes its
+    // id back, and one emptied (New chat, wherever it was pressed) leaves for /chat.
     useEffect(() => {
         if (mode !== 'chat')
             return;
@@ -100,9 +130,18 @@ export function App() {
         // The address decides; the selection follows it.
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [mode, asked]);
+    // The conversation the pane held before this render: an emptied one is the
+    // address's own conversation let go of, never a first render before it opens.
+    const held = useRef(null);
     useEffect(() => {
-        if (mode === 'chat' && thread && thread !== asked)
+        const was = held.current;
+        held.current = thread;
+        if (mode !== 'chat')
+            return;
+        if (thread && thread !== asked)
             go(talk(thread), true);
+        else if (!thread && was && asked === was)
+            go(talk());
         // The selection writes the address only when it moves.
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [mode, thread]);
@@ -115,7 +154,49 @@ export function App() {
         shut();
         go(address);
     }, [shut]);
+    // The app's keys.
+    useEffect(() => {
+        const key = (e) => {
+            const mod = e.metaKey || e.ctrlKey;
+            if (mod && !e.shiftKey && !e.altKey && e.key.toLowerCase() === 'k') {
+                e.preventDefault();
+                setClosed(false);
+                if (window.matchMedia('(max-width: 767.98px)').matches)
+                    setDrawer(true);
+                setSeek((n) => n + 1);
+                return;
+            }
+            if (typing(e))
+                return;
+            if (mod && !e.shiftKey && !e.altKey && e.key === ',') {
+                e.preventDefault();
+                move(app(SETTINGS));
+                return;
+            }
+            if (!bar)
+                return;
+            const back = (e.metaKey && e.key === '[') || (e.altKey && e.key === 'ArrowLeft');
+            const forth = (e.metaKey && e.key === ']') || (e.altKey && e.key === 'ArrowRight');
+            if ((!back && !forth) || e.ctrlKey || e.shiftKey)
+                return;
+            e.preventDefault();
+            if (back)
+                router.back();
+            else
+                router.forward();
+        };
+        window.addEventListener('keydown', key);
+        return () => window.removeEventListener('keydown', key);
+        // setClosed is the kept setter of this render; the keys read it fresh each time.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [bar, router, move]);
     const toChat = () => move(last.chat || talk());
     const toDev = () => move(last.dev || app(''));
-    return (_jsx(AiProvider, { client: client ?? undefined, children: _jsx(HostProvider, { host: host, children: _jsxs(XStack, { "data-room": "", "data-app": mode, "data-slot": "frame", ...floor, flex: 1, minW: 0, p: "var(--pane-gap)", gap: "var(--pane-gap)", height: "100dvh", overflow: "hidden", "$max-md": { p: 0, gap: 0 }, children: [_jsx(Column, { host: host, mode: mode, thread: thread, onChat: toChat, onDev: toDev, go: move }), _jsxs(YStack, { "data-slot": "stage", flex: 1, minW: 0, minH: 0, gap: "var(--pane-gap)", "$max-md": { gap: 0 }, children: [_jsxs(XStack, { "data-slot": "app-bar", height: 44, px: "$1", gap: "$1", items: "center", shrink: 0, $md: { display: 'none' }, children: [_jsx(SidebarIconButton, { label: "Open sidebar", onPress: () => setDrawer(true), width: 44, height: 44, rounded: 999, children: _jsx(Menu, { size: 18 }) }), _jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", numberOfLines: 1, children: wordmark(mode) })] }), _jsx(XStack, { "data-slot": "panes", flex: 1, minW: 0, minH: 0, children: mode === 'chat' ? (_jsx(Paned, { framed: true, children: _jsx(Chat, {}) })) : (_jsx(YStack, { render: "main", "data-slot": "pane", ...(run ? null : { ...pane(), overflow: 'hidden' }), flex: 1, minW: 0, minH: 0, children: plans ? null : _jsx(Builder, { host: host, rail: false }) })) })] }), drawer ? (_jsxs(_Fragment, { children: [_jsx(YStack, { render: "button", "aria-label": "Close sidebar", onPress: () => setDrawer(false), bg: DIM, position: "absolute", t: 0, r: 0, b: 0, l: 0, z: "var(--z-overlay)", $md: { display: 'none' } }), _jsx(YStack, { "data-slot": "drawer", position: "absolute", t: INSET.top, b: INSET.bottom, l: INSET.left, width: "min(320px, calc(100% - 2 * var(--pane-gap) - 48px))", z: "var(--z-modal)", $md: { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, onChat: toChat, onDev: toDev, go: move, drawer: true }) })] })) : null] }) }) }));
+    // Another organization: picked, and the app opened in it at the mode's New.
+    const org = (o) => {
+        pick(o);
+        window.location.assign(mode === 'dev' ? app('') : talk());
+    };
+    const flip = () => setClosed(!closed);
+    return (_jsx(AiProvider, { client: client ?? undefined, children: _jsx(HostProvider, { host: host, children: _jsxs(YStack, { "data-slot": "window", ...(bar ? floor : null), flex: 1, minW: 0, height: "100dvh", overflow: "hidden", children: [bar ? (_jsxs(XStack, { "data-slot": "title-bar", height: BAR, shrink: 0, items: "center", gap: 2, pl: (bar.inset ?? 0) + 6, pr: "$2", ...bar.drag, children: [_jsx(XStack, { "$max-md": { display: 'none' }, children: _jsx(Toggle, { open: !closed, onPress: flip }) }), _jsx(XStack, { $md: { display: 'none' }, children: _jsx(Toggle, { open: drawer, onPress: () => setDrawer(true), label: "Open sidebar" }) }), _jsx(Mark, { label: "Back", "data-slot": "back", onPress: () => router.back(), children: _jsx(ArrowLeft, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Forward", "data-slot": "forward", onPress: () => router.forward(), children: _jsx(ArrowRight, { size: 18, "aria-hidden": true }) }), _jsx(XStack, { flex: 1, self: "stretch", ...bar.drag })] })) : null, _jsxs(XStack, { "data-room": "", "data-app": mode, "data-slot": "frame", ...(bar ? null : floor), flex: 1, minW: 0, minH: 0, pr: "var(--pane-gap)", pb: "var(--pane-gap)", pt: bar ? 0 : 'var(--pane-gap)', "$max-md": { p: 0 }, children: [_jsx(YStack, { height: "100%", "$max-md": { display: 'none' }, children: _jsx(Rail, { host: host, mode: mode, at: where, open: !closed, toggle: bar ? undefined : flip, onChat: toChat, onDev: toDev, go: move, onOrg: org }) }), closed ? null : (_jsx(YStack, { "$max-md": { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: () => setClosed(true), seek: seek }) })), _jsxs(YStack, { "data-slot": "stage", flex: 1, minW: 0, minH: 0, ml: "var(--pane-gap)", "$max-md": { ml: 0 }, children: [bar ? null : (_jsxs(XStack, { "data-slot": "app-bar", height: 44, px: "$1", gap: "$1", items: "center", shrink: 0, $md: { display: 'none' }, children: [_jsx(SidebarIconButton, { label: "Open sidebar", onPress: () => setDrawer(true), width: 44, height: 44, rounded: 999, children: _jsx(Menu, { size: 18 }) }), _jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", numberOfLines: 1, children: wordmark(mode) })] })), _jsx(XStack, { "data-slot": "panes", flex: 1, minW: 0, minH: 0, children: mode === 'chat' ? (_jsx(Paned, { framed: true, children: _jsx(Chat, {}) })) : (_jsx(YStack, { render: "main", "data-slot": "pane", ...(run ? null : { ...pane(), overflow: 'hidden' }), flex: 1, minW: 0, minH: 0, children: plans ? null : _jsx(Builder, { host: host, rail: false }) })) })] })] }), drawer ? (_jsxs(_Fragment, { children: [_jsx(YStack, { render: "button", "aria-label": "Close sidebar", onPress: () => setDrawer(false), bg: DIM, position: "absolute", t: 0, r: 0, b: 0, l: 0, z: "var(--z-overlay)", $md: { display: 'none' } }), _jsx(YStack, { "data-slot": "drawer", position: "absolute", t: INSET.top, b: INSET.bottom, l: INSET.left, width: "min(320px, calc(100% - 2 * var(--pane-gap) - 48px))", z: "var(--z-modal)", $md: { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: shut, seek: seek, drawer: true, foot: _jsx(Rail, { host: host, mode: mode, at: where, open: true, flat: true, onChat: toChat, onDev: toDev, go: move, onOrg: org }) }) })] })) : null] }) }) }));
 }

package/dist/Chat.js

@@ -52,13 +52,13 @@ 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 } from "@hanzo/voice";
-import { FileText, Image as ImageMark, Paperclip, Pin, X } from "lucide-react";
+import { FileText, Image as ImageMark, Paperclip, X } from "lucide-react";
 import { FREE } from "./lib/ai.js";
 import { openThread, useOpen } from "./open.js";
 import { Beside, Framed } from "./Shell.js";
-import { SEED, look, useKinds } from "./RightPane.js";
+import { SEED, Summary, look } from "./RightPane.js";
 import { Share } from "./Share.js";
-import { useThreadActions, useThreadList } from "./thread.js";
+import { ConversationMenu, ThreadMore, useThreadList } from "./thread.js";
 import { artifacts, lead, nameOf, PAGE, Panel, PanelToggle, prompt, renders, Reply, Served, useDeck, useKey, useMind, usePanel, } from "@hanzo/build";
 import { checkoutUrl } from './lib/pay.js';
 import { Upgrade, useFree } from './Upgrade.js';
@@ -239,6 +239,8 @@ export function Ask({ placeholder, idle, }) {
  * accessible name does not move when the placeholder does.
  */
 const message = () => `Message ${brand()}`;
+/** The panel offers no kinds of its own in Chat: its tabs are pages. */
+const NONE = [];
 /** The id the room's system turn is held under in the thread. */
 const ROOM = "room";
 /** The models that route a turn rather than name the one that answers it. */
@@ -489,13 +491,12 @@ 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.
+    // THE HEADER'S ⋯ IS THE ROW'S MENU (thread.tsx): rename, pin, share, its
+    // link, a new tab, archive and delete, kept by the server. A conversation not
+    // in the list yet (just begun, or archived) has no menu until it is.
     const listing = useThreadList(false, open);
-    const acts = useThreadActions();
     const mine = open ? listing.threads.find((t) => t.id === open) : undefined;
+    const alone = useMemo(() => new Map(mine ? [[mine.id, mine]] : []), [mine]);
     // 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.
@@ -1042,8 +1043,16 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
     // record's own picture. Its own answer comes first, which is the order
     // `Face` already states for every other surface.
     const portrait = mate?.avatar ?? persona?.avatar ?? roleOf(withWhom)?.portrait;
-    // Chat's kinds of tab in the side panel: Artifacts and Sources, read from the turns.
-    const kinds = useKinds({ at, said, held: files, deck });
+    // THE PANEL IS TABS OF PAGES, a browser beside the conversation; what the
+    // conversation produced and took in is its Summary (RightPane.tsx), each row
+    // opening here. A deck kept from when Artifacts and Sources were tabs lets them go.
+    useEffect(() => {
+        for (const t of deck.tabs)
+            if (t.kind !== PAGE)
+                deck.shut(t.id);
+        // A sweep of what was kept, once the deck is read.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [at]);
     /** Whether the field has focus, so the FRAME can wear the ring the field is
      *  no longer allowed to draw. `:focus-within` would say this in CSS; the
      *  stylesheet that would hold it cannot reach past gui's own rule, so the
@@ -1226,7 +1235,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: () => 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: "$2", children: [open ? _jsx(Share, { thread: open }) : null, _jsx(PanelToggle, { open: panel, onToggle: () => setPanel(!panel) })] })] }), wide && aside !== null ? (_jsx(Beside, { children: _jsx(Panel, { side: deck, kinds: kinds, onHide: () => setPanel(false), label: "Conversation details" }) })) : null, !wide && panel ? _jsx(Panel, { side: deck, kinds: kinds, sheet: true, onHide: () => setPanel(false), label: "Conversation details" }) : null, isFree(model) ? (_jsxs(Text, { fontSize: "$2", color: "$soft", text: "center", maxW: MEASURE, mx: "auto", px: "$4", py: "$2", children: [freeCopy.notice, " ", _jsx(Anchor, { href: site("/legal/privacy"), children: freeCopy.noticeCta })] })) : null, _jsx(ChatSurface, { ...chat, messages: shown, send: guarded, 
+        }, 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, { "data-slot": "conversation-head", height: 52, items: "center", justify: "space-between", gap: "$3", pl: "$4", pr: "$2", shrink: 0, children: [_jsxs(XStack, { items: "center", gap: "$2", minW: 0, flex: 1, children: [mine ? (_jsx(Text, { fontSize: 15, lineHeight: 20, color: "$ink", numberOfLines: 1, shrink: 1, minW: 0, children: mine.title || "Untitled" })) : null, room.length ? (_jsx(XStack, { role: "list", "aria-label": "Agents in this chat", items: "center", gap: "$1.5", minW: 0, overflowX: "auto", "$platform-web": { scrollbarWidth: "none" }, children: room.map((name) => (_jsxs(XStack, { role: "listitem", items: "center", gap: "$1.5", pl: "$1", pr: "$0.5", py: "$0.5", rounded: 999, borderWidth: 1, borderColor: "$borderColor", shrink: 0, children: [_jsx(Face, { src: faces[name]?.avatar ?? (name === withWhom ? portrait : undefined), emoji: faces[name]?.emoji ?? (name === withWhom ? persona?.emoji : undefined), name: name, size: 22 }), _jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$color", numberOfLines: 1, display: "none", $sm: { display: "flex" }, children: name }), _jsx(Box, { render: "button", onClick: () => openAgent(name), "aria-label": `Remove ${name} from this chat`, title: `Remove ${name}`, width: 24, height: 24, rounded: 999, items: "center", justify: "center", hoverStyle: { bg: "$hover" }, children: _jsx(X, { size: 13, "aria-hidden": true, color: "var(--soft, var(--muted-foreground))" }) })] }, name))) })) : null] }), _jsxs(XStack, { "data-slot": "conversation-controls", items: "center", gap: 2, shrink: 0, children: [open ? _jsx(Share, { thread: open }) : null, mine ? (_jsx(ConversationMenu, { threads: alone, active: open, children: _jsx(XStack, { children: _jsx(ThreadMore, { t: mine }) }) })) : null, _jsx(Summary, { at: at, said: said, held: files, deck: deck, onOpen: () => setPanel(true), onCreate: () => window.location.assign(site("/dev")) }), _jsx(PanelToggle, { open: panel, onToggle: () => setPanel(!panel) })] })] }), wide && aside !== null ? (_jsx(Beside, { children: _jsx(Panel, { side: deck, kinds: NONE, onHide: () => setPanel(false), label: "Tabs" }) })) : null, !wide && panel ? _jsx(Panel, { side: deck, kinds: NONE, sheet: true, onHide: () => setPanel(false), label: "Tabs" }) : null, isFree(model) ? (_jsxs(Text, { fontSize: "$2", color: "$soft", text: "center", maxW: MEASURE, mx: "auto", px: "$4", py: "$2", children: [freeCopy.notice, " ", _jsx(Anchor, { href: site("/legal/privacy"), children: freeCopy.noticeCta })] })) : null, _jsx(ChatSurface, { ...chat, messages: shown, send: guarded, 
                 // AN EMPTY ROOM CENTRES ITS COMPOSER. While nothing has been said the
                 // opening (the heading and the starters) and the composer sit as one
                 // group in the middle of the height, with or without the plan bars in

package/dist/Column.d.ts

@@ -1,15 +1,19 @@
 import { type Host } from '@hanzo/build';
-import type { Mode } from './recent.js';
-export declare function Column({ host, mode, thread, onChat, onDev, go, drawer, }: {
+import { type ReactNode } from 'react';
+import { type Mode } from './recent.js';
+export declare function Column({ host, mode, thread, go, onShut, seek, drawer, foot, }: {
     host: Host;
     mode: Mode;
     /** The Chat conversation the pane holds, or null. */
     thread: string | null;
-    /** The switch: to Chat and to Dev, each where the reader left it. */
-    onChat: () => void;
-    onDev: () => void;
     /** Moves the app to an address of this page. */
     go: (address: string) => void;
-    /** Drawn in the phone's drawer: no collapse, no edge, always open. */
+    /** Shut the sidebar: its edge pulled in past the floor. */
+    onShut: () => void;
+    /** Each new value asks for the search, focused (⌘K). */
+    seek?: number;
+    /** Drawn in the phone's drawer: no edge, cut as a floating pane. */
     drawer?: boolean;
+    /** What stands at its foot: the drawer's rail, laid flat. */
+    foot?: ReactNode;
 }): import("react").JSX.Element;

package/dist/Column.js

@@ -1,38 +1,39 @@
 'use client';
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// The app's one column, the same in both modes: the Chat / Dev switch, a filter,
-// New, Dev's places, the Recents of the mode it is in, and at the foot the
-// account (components/workspace/Me.tsx).
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The app's sidebar, beside the rail on the window's floor (App.tsx): the
+// mode's name with the bell and the search at its right, New, Dev's places in
+// Dev, the reader's Recents (Pinned first), and the first-run cards. Which
+// product it lists is the rail's to say; the account is at the rail's foot.
 //
-// Dev's places are @hanzo/build's `nav`, the one list every rail draws, each a
-// row of its own under a quiet group label: nothing waits behind a More.
+// It is the window, not a panel: no fill, no edge, the floor's own ground. The
+// content beside it is the panel, inset by the gutter.
+//
+// The bell is the org's run activity (@hanzo/build `useSessions`): the runs
+// that moved last, each one press from its page, and Notifications in Settings.
+// The search opens the filter over Recents (⌘K / Ctrl+K from anywhere, `seek`).
 //
-// Tabs sits under New in both modes. Hanzo Tabs lives at tabs.hanzo.ai, so the
-// row is a link there, in a tab of its own.
+// Dev's places are @hanzo/build's `nav`, the one list every rail draws, each a
+// row under a quiet group label.
 //
-// It is a pane on the frame's ground (app/_web.tsx), sized by the edge in the
-// gutter to its right: dragged, keyed or double-clicked back (@hanzo/build's
-// `Grip`), kept per browser. Pulled in past its floor it collapses to a rail of
-// marks, kept under the key the builder's rail kept it under, so a reader's
-// choice outlives the move.
+// Its width is the edge's in the gutter to its right: dragged, keyed or
+// double-clicked back (@hanzo/build's `Grip`), kept per browser. Pulled in past
+// its floor it shuts (`onShut`), as the sidebar's toggle shuts it.
 import { Text, XStack, YStack } from '@hanzo/gui';
-import { PanelLeft, Plus, Search, SquareTerminal } from 'lucide-react';
-import { Grip, nav, NEW } from '@hanzo/build';
-import { Sidebar, SidebarIconButton, SidebarItem } from '@hanzo/ui/chat';
-import { HanzoMark } from '@hanzogui/shell';
-import { Fragment, useId, useState } from 'react';
-import { ModeMark } from './ModeMark.js';
-import { useKept } from './kept.js';
-import { Made, Me } from './Me.js';
+import { Bell, Search, Settings2, SquarePen, X } from 'lucide-react';
+import { DOTS, Grip, nav, NEW, path as written, useSessions } from '@hanzo/build';
+import { DropdownMenu } from '@hanzo/ui';
+import { Sidebar, SidebarIconButton, SidebarItem, StatusDot } from '@hanzo/ui/chat';
+import { useEffect, useId, useRef, useState } from 'react';
+import { Made } from './Me.js';
 import { Recents } from './Recents.js';
 import { Setup } from './Setup.js';
+import { ago } from './recent.js';
 import { empty } from './open.js';
 import { useSpan } from './span.js';
 import { pane } from './ground.js';
-import { pick } from './lib/session.js';
-import { app, TABS, talk } from './lib/host.js';
-import { brand } from './where.js';
-/** The grip stands in the gutter between the column and the pane. gui carries a `calc()` to the page unchanged; its
+import { talk } from './lib/host.js';
+import { brand, wordmark } from './where.js';
+/** The grip stands in the gutter between the sidebar and the panel. gui carries a `calc()` to the page unchanged; its
  *  types only name custom properties. */
 const GUTTER_END = 'calc(-1 * var(--pane-gap))';
 /** The sidebar fills the column. Its `width` is typed in px alone, though its frame takes any gui size — the type is
@@ -48,12 +49,10 @@ const FLOAT = {
     borderColor: 'var(--border-strong)',
     boxShadow: 'var(--edge-highlight), var(--shadow-floating)',
 };
-/** The column's width, px: its default, and the two a drag holds it between. */
-const WIDTH = 272;
-const FLOOR = 220;
+/** The sidebar's width, px: its default, and the two a drag holds it between. */
+const WIDTH = 240;
+const FLOOR = 200;
 const CEIL = 420;
-/** The collapsed rail's width, px. */
-const RAIL = 60;
 /** Per reader, per browser. */
 const SPAN = 'hanzo.app.column';
 /** Enter and Space press a row the way a click does. */
@@ -65,19 +64,37 @@ const keys = (press) => ({
         press();
     },
 });
-/** A row of the column: a pill, lit where the reader is. Compact, so every place fits a laptop's height with Recents under them. */
-const ROW = { rounded: '$4', minH: 30, py: 0 };
-/** Tabs, a row drawn as a link out: another origin, its own tab, no handle back to this page. */
-const OUT = { 'data-slot': 'app-tabs', role: 'link', render: _jsx("a", { href: TABS, target: "_blank", rel: "noopener noreferrer" }) };
-/** Tabs in the rail, as its mark. */
-const Mark = () => (_jsx(SidebarIconButton, { label: "Tabs", width: 36, height: 32, rounded: 999, ...OUT, children: _jsx(SquareTerminal, { size: 16 }) }));
-/** Tabs in the column, as a row. */
-const Row = () => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, icon: _jsx(SquareTerminal, { size: 16, "aria-hidden": true }), ...OUT, children: "Tabs" }) }));
-export function Column({ host, mode, thread, onChat, onDev, go, drawer = false, }) {
-    const [kept, setCollapsed] = useKept('hanzo.build.rail', false);
-    const collapsed = kept && !drawer;
+/** A row of the sidebar: a pill on a 31px pitch, lit where the reader is. */
+const ROW = { rounded: '$4', minH: 31, py: 0, px: '$2' };
+/** The run activity behind the bell: the runs that moved last, newest first. */
+const RECENT = 6;
+/** A header mark: a 16px glyph in a 32px target. */
+const HEAD = { width: 32, height: 32, rounded: '$3' };
+function Activity({ host }) {
+    const store = useSessions(host);
+    const latest = [...store.value].sort((a, b) => (a.updatedAt < b.updatedAt ? 1 : -1)).slice(0, RECENT);
+    const items = [
+        { type: 'label', key: 'head', label: 'Activity' },
+        ...(latest.length
+            ? latest.map((s) => ({
+                key: s.id,
+                label: s.title || 'Untitled run',
+                description: [s.status, ago(s.updatedAt || s.createdAt)].filter(Boolean).join(' · '),
+                icon: _jsx(StatusDot, { status: DOTS[s.status] ?? 'idle' }),
+                onSelect: () => host.go(s.id),
+            }))
+            : [{ key: 'none', label: 'Nothing new', disabled: true, onSelect: () => { } }]),
+        { type: 'separator', key: 'line' },
+        { key: 'settings', label: 'Notification settings', icon: _jsx(Settings2, { size: 16, "aria-hidden": true }), onSelect: () => host.go(written({ kind: 'settings', section: 'notifications' })) },
+    ];
+    return (_jsx(DropdownMenu, { minWidth: 280, trigger: _jsx(XStack, { render: "button", "aria-label": "Activity", ...{ title: 'Activity' }, ...HEAD, items: "center", justify: "center", cursor: "pointer", opacity: 0.7, hoverStyle: { bg: '$hover', opacity: 1 }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: _jsx(Bell, { size: 16, "aria-hidden": true }) }), items: items }));
+}
+export function Column({ host, mode, thread, go, onShut, seek = 0, drawer = false, foot, }) {
     const [words, setWords] = useState('');
-    // The desktop column and a phone's drawer can both be in the page: each names its own group labels.
+    // The search field shows once asked for, and while it holds words.
+    const [seeking, setSeeking] = useState(false);
+    const field = useRef(null);
+    // The desktop sidebar and a phone's drawer can both be in the page: each names its own group labels.
     const uid = useId();
     const span = useSpan(SPAN, WIDTH, FLOOR, CEIL);
     const dev = (p) => host.go(p);
@@ -88,21 +105,27 @@ export function Column({ host, mode, thread, onChat, onDev, go, drawer = false,
         empty();
         go(talk());
     };
-    // Another organization: picked, and the app opened in it at the mode's New.
-    const org = (o) => {
-        pick(o);
-        window.location.assign(mode === 'dev' ? app('') : talk());
+    const ask = () => {
+        setSeeking(true);
+        requestAnimationFrame(() => field.current?.focus());
+    };
+    const done = () => {
+        setWords('');
+        setSeeking(false);
     };
-    if (collapsed)
-        return (_jsx(YStack, { "data-slot": "app-column", "data-collapsed": "", position: "relative", shrink: 0, width: RAIL, "$max-md": { display: 'none' }, children: _jsxs(Sidebar, { "data-slot": "app-rail", "data-collapsed": "true", role: "navigation", "aria-label": brand(), ...pane(), ...FILL, px: "$1.5", py: "$2.5", gap: "$1.5", items: "center", children: [_jsx(SidebarIconButton, { label: "Expand sidebar", onPress: () => setCollapsed(false), width: 36, height: 36, rounded: 999, children: _jsx(PanelLeft, { size: 16 }) }), _jsx(ModeMark, { mode: mode, onChat: onChat, onDev: onDev, stacked: true }), mode === 'chat' ? (_jsxs(_Fragment, { children: [_jsx(SidebarIconButton, { label: "New chat", onPress: create, width: 36, height: 36, rounded: 999, children: _jsx(Plus, { size: 16 }) }), _jsx(Mark, {})] })) : (
-                    // Every place, as its mark: collapsed is narrower, never shorter of a destination.
-                    groups.map((g) => (_jsx(YStack, { role: "group", "aria-label": g.label, items: "center", gap: 2, pt: "$1", children: g.links.map((link) => (_jsxs(Fragment, { children: [_jsx(SidebarIconButton, { label: link.label, onPress: () => link.onPress?.(), width: 36, height: 32, rounded: 999, "aria-current": link.active ? 'page' : undefined, children: link.icon }), link.id === NEW ? _jsx(Mark, {}) : null] }, link.id))) }, g.id)))), _jsx(YStack, { flex: 1 }), _jsx(Me, { host: host, narrow: true, onOrg: org })] }) }));
+    useEffect(() => {
+        if (seek)
+            ask();
+    }, [seek]);
     return (_jsxs(YStack, { "data-slot": "app-column", ref: drawer ? undefined : span.ref, 
         // inline-style: `--span`, the width a drag rewrites on the element itself (span.ts); no prop sets a variable.
-        style: drawer ? undefined : span.style, position: "relative", shrink: 0, height: "100%", width: drawer ? '100%' : 'var(--span)', ...(drawer ? {} : { '$max-md': { display: 'none' } }), children: [_jsxs(Sidebar, { "data-slot": "app-rail", "data-collapsed": "false", role: "navigation", "aria-label": brand(), ...pane(), ...(drawer ? FLOAT : null), ...FILL, px: "$2.5", pt: "$3", pb: "$2", gap: "$0", children: [_jsxs(XStack, { "data-slot": "mode-switch", items: "center", gap: "$2", px: "$1.5", pb: "$3", minW: 0, children: [_jsx(HanzoMark, { size: 18 }), _jsx(ModeMark, { mode: mode, onChat: onChat, onDev: onDev })] }), _jsxs(XStack, { "data-slot": "app-filter", items: "center", gap: "$2", px: "$3", height: 36, rounded: 999, borderWidth: 1, borderColor: "$borderColor", bg: "$edge", shrink: 0, children: [_jsx(Search, { size: 15, "aria-hidden": true, color: "var(--soft, var(--muted-foreground))" }), _jsx(Text, { render: _jsx("input", { value: words, onChange: (e) => setWords(e.target.value), onKeyDown: (e) => {
+        style: drawer ? undefined : span.style, position: "relative", flex: drawer ? 1 : undefined, shrink: drawer ? 1 : 0, minW: 0, height: "100%", width: drawer ? undefined : 'var(--span)', children: [_jsxs(Sidebar, { "data-slot": "app-rail", role: "navigation", "aria-label": brand(), ...(drawer ? { ...pane(), ...FLOAT } : { bg: 'transparent', borderWidth: 0 }), ...FILL, px: "$2", pt: drawer ? '$2' : 0, pb: "$2", gap: "$0", children: [_jsxs(XStack, { "data-slot": "app-head", items: "center", gap: "$1", pl: "$2", pr: 2, height: 52, shrink: 0, minW: 0, children: [_jsx(Text, { flex: 1, minW: 0, fontSize: 18, lineHeight: 24, fontWeight: "600", color: "$ink", numberOfLines: 1, children: wordmark(mode) }), _jsx(Activity, { host: host }), _jsx(SidebarIconButton, { label: mode === 'chat' ? 'Search chats' : 'Search runs', onPress: seeking ? done : ask, "aria-expanded": seeking || !!words, ...HEAD, children: _jsx(Search, { size: 16, "aria-hidden": true }) })] }), seeking || words ? (_jsxs(XStack, { "data-slot": "app-filter", items: "center", gap: "$2", pl: "$3", pr: "$1", height: 36, rounded: 999, borderWidth: 1, borderColor: "$borderColor", bg: "$edge", shrink: 0, mb: "$1.5", children: [_jsx(Search, { size: 15, "aria-hidden": true, color: "var(--soft, var(--muted-foreground))" }), _jsx(Text, { render: _jsx("input", { ref: field, value: words, onChange: (e) => setWords(e.target.value), onKeyDown: (e) => {
                                         if (e.key === 'Escape')
-                                            setWords('');
-                                    }, placeholder: mode === 'chat' ? 'Filter chats' : 'Filter runs', "aria-label": "Filter recents" }), flex: 1, minW: 0, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit", fontSize: "$2" })] }), mode === 'chat' ? (_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: !thread, icon: _jsx(Plus, { size: 16, "aria-hidden": true }), onPress: create, ...keys(create), children: "New chat" }) }), _jsx(Row, {})] })) : (_jsx(YStack, { "data-slot": "app-places", mt: "$1.5", shrink: 0, children: groups.map((g) => (_jsxs(YStack, { pt: "$1.5", children: [_jsx(Text, { id: `${uid}-${g.id}`, pl: "$2", pb: 2, fontSize: "$1", color: "$soft", fontWeight: "600", textTransform: "uppercase", letterSpacing: 0.6, children: g.label }), _jsx(YStack, { role: "list", "aria-labelledby": `${uid}-${g.id}`, gap: 1, children: g.links.map((link) => (_jsxs(Fragment, { children: [_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, ...(link.id === NEW ? { 'data-slot': 'app-new' } : {}), active: link.active, icon: link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: link.label }) }), link.id === NEW ? _jsx(Row, {}) : null] }, link.id))) })] }, g.id))) })), _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.
+                                            done();
+                                    }, onBlur: () => {
+                                        if (!words)
+                                            setSeeking(false);
+                                    }, placeholder: mode === 'chat' ? 'Search chats' : 'Search runs', "aria-label": "Filter recents" }), flex: 1, minW: 0, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit", fontSize: "$3" }), words ? (_jsx(SidebarIconButton, { label: "Clear search", onPress: done, width: 28, height: 28, rounded: 999, children: _jsx(X, { size: 14, "aria-hidden": true }) })) : null] })) : null, mode === 'chat' ? (_jsx(YStack, { role: "list", gap: 2, shrink: 0, children: _jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { "data-slot": "app-new", ...ROW, active: !thread, bg: "transparent", hoverStyle: { bg: '$hover' }, icon: _jsx(SquarePen, { size: 16, "aria-hidden": true }), onPress: create, ...keys(create), children: _jsx(Text, { fontSize: "$3", color: "$ink", children: "New chat" }) }) }) })) : (_jsx(YStack, { "data-slot": "app-places", shrink: 0, children: groups.map((g, i) => (_jsxs(YStack, { pt: i ? '$2' : 0, children: [i ? (_jsx(Text, { id: `${uid}-${g.id}`, pl: "$2", pb: 2, fontSize: "$3", color: "$soft", children: g.label })) : null, _jsx(YStack, { role: "list", "aria-labelledby": i ? `${uid}-${g.id}` : undefined, "aria-label": i ? undefined : g.label, gap: 1, children: g.links.map((link) => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, ...(link.id === NEW ? { 'data-slot': 'app-new' } : {}), active: link.active, icon: link.id === NEW ? _jsx(SquarePen, { size: 16, "aria-hidden": true }) : link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: _jsx(Text, { fontSize: "$3", color: link.active ? '$ink' : '$quiet', children: link.label }) }) }, link.id))) })] }, g.id))) })), _jsx(Recents, { host: host, mode: mode, thread: thread, words: words, onOpen: open, onNew: create }), _jsxs(YStack, { gap: "$2", pt: "$2", shrink: 0, children: [_jsx(Made, {}), _jsx(Setup, {})] }), foot] }), drawer ? null : (_jsx(Grip, { side: "left", span: span.span, floor: FLOOR, ceil: CEIL, reset: WIDTH, onSpan: span.move, onKeep: span.keep, onShut: onShut, label: "Resize sidebar", 
+                // In the gutter between the sidebar and the panel, not over the sidebar's own rows.
                 r: GUTTER_END, width: "var(--pane-gap)" }))] }));
 }

package/dist/Home.js

@@ -110,12 +110,12 @@ function Open({ at, rooms, back, }) {
         return _jsx(Talk, { room: found }, teamKey(found));
     const reading = isLoading || (isAuthenticated && rooms.rooms === null && !rooms.wrong);
     const line = reading
-        ? 'Reading the room.'
+        ? 'Reading the channel.'
         : !isAuthenticated
-            ? 'Sign in to read this room.'
+            ? 'Sign in to read this channel.'
             : rooms.wrong
-                ? say(rooms.wrong, 'this room')
-                : 'That room is not here.';
+                ? say(rooms.wrong, 'this channel')
+                : 'That channel is not here.';
     return (_jsxs(YStack, { flex: 1, items: "center", justify: "center", p: "$6", gap: "$3", children: [_jsx(Text, { fontSize: "$3", color: SOFT, children: line }), reading ? null : (_jsx(Box, { render: "button", onClick: back, ...tap, children: _jsx(Text, { fontSize: "$2", fontWeight: "500", color: INK, children: "Back to home" }) }))] }));
 }
 /* ─────────────────────────────────────────────────────────────────────────────
@@ -151,18 +151,18 @@ function Rooms({ rooms, wrong, open }) {
             openRoom(teamKey(made));
         }
         catch (e) {
-            setRefused(plainly(e, 'this room'));
+            setRefused(plainly(e, 'this channel'));
         }
         finally {
             setOpening(false);
         }
     };
-    return (_jsxs(Card, { kind: "rooms", icon: _jsx(Hash, { size: 14, "aria-hidden": true }), title: "Rooms", children: [rooms === null ? (_jsx(Waiting, { wrong: wrong, subject: "your rooms" })) : rooms.length === 0 ? (_jsx(Quiet, { children: "No rooms yet. Open one and the conversation has somewhere to live." })) : (_jsx(YStack, { gap: "$1", children: rooms.slice(0, 6).map((one) => (_jsx(Row, { icon: one.direct ? _jsx(AtSign, { size: 12, "aria-hidden": true }) : _jsx(Hash, { size: 12, "aria-hidden": true }), onPress: () => openRoom(teamKey(one)), children: one.name || 'Direct message' }, teamKey(one)))) })), !me ? null : naming ? (_jsxs(YStack, { gap: "$1", children: [_jsxs(XStack, { gap: "$1", items: "center", children: [_jsx(Text, { render: _jsx("input", { value: name, onChange: (e) => setName(e.target.value), onKeyDown: (e) => {
+    return (_jsxs(Card, { kind: "rooms", icon: _jsx(Hash, { size: 14, "aria-hidden": true }), title: "Channels", children: [rooms === null ? (_jsx(Waiting, { wrong: wrong, subject: "your channels" })) : rooms.length === 0 ? (_jsx(Quiet, { children: "No channels yet." })) : (_jsx(YStack, { gap: "$1", children: rooms.slice(0, 6).map((one) => (_jsx(Row, { icon: one.direct ? _jsx(AtSign, { size: 12, "aria-hidden": true }) : _jsx(Hash, { size: 12, "aria-hidden": true }), onPress: () => openRoom(teamKey(one)), children: one.name || 'Direct message' }, teamKey(one)))) })), !me ? null : naming ? (_jsxs(YStack, { gap: "$1", children: [_jsxs(XStack, { gap: "$1", items: "center", children: [_jsx(Text, { render: _jsx("input", { value: name, onChange: (e) => setName(e.target.value), onKeyDown: (e) => {
                                         if (e.key === 'Enter')
                                             void make();
                                         if (e.key === 'Escape')
                                             setNaming(false);
-                                    }, placeholder: "Name", "aria-label": "Room name", autoFocus: true }), flex: 1, minW: 0, bg: "transparent", borderWidth: 1, borderColor: "var(--border)", rounded: 6, px: 8, py: 6, color: "inherit", fontSize: "$2" }), _jsx(Box, { render: "button", onClick: () => void make(), "aria-disabled": opening, opacity: opening ? 0.5 : 1, px: "$2", py: "$1.5", rounded: "$2", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: _jsx(Text, { fontSize: "$2", fontWeight: "500", color: INK, children: "Open it" }) })] }), refused ? (_jsx(Text, { fontSize: "$2", color: BAD, children: refused })) : null] })) : (_jsx(Row, { icon: _jsx(Plus, { size: 12, "aria-hidden": true }), onPress: () => setNaming(true), children: "New room" }))] }));
+                                    }, placeholder: "Name", "aria-label": "Channel name", autoFocus: true }), flex: 1, minW: 0, bg: "transparent", borderWidth: 1, borderColor: "var(--border)", rounded: 6, px: 8, py: 6, color: "inherit", fontSize: "$2" }), _jsx(Box, { render: "button", onClick: () => void make(), "aria-disabled": opening, opacity: opening ? 0.5 : 1, px: "$2", py: "$1.5", rounded: "$2", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: _jsx(Text, { fontSize: "$2", fontWeight: "500", color: INK, children: "Open it" }) })] }), refused ? (_jsx(Text, { fontSize: "$2", color: BAD, children: refused })) : null] })) : (_jsx(Row, { icon: _jsx(Plus, { size: 12, "aria-hidden": true }), onPress: () => setNaming(true), children: "New room" }))] }));
 }
 /**
  * A read the SDK has no hook for.