@hanzo/rooms 0.1.57 → 0.1.59

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

@@ -45,6 +45,7 @@ import { useMedia } from "@hanzo/gui";
 import { useIam, useIamToken } from "@hanzo/iam/react";
 import { bearer, hasSession, org } from "./lib/session.js";
 import { api } from "./lib/api.js";
+import { dev } from "./lib/host.js";
 import { chats, house, paidPlan, paused, setCreditsAfterAllowance, useLimits } from "./lib/limits.js";
 import { LimitedBanner } from "@hanzo/ui/product/LimitedBanner";
 import { WEB } from "./lib/web.js";
@@ -52,14 +53,14 @@ 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, useSites } from "./RightPane.js";
 import { Share } from "./Share.js";
-import { useThreadActions, useThreadList } from "./thread.js";
-import { artifacts, lead, nameOf, PAGE, Panel, PanelToggle, prompt, renders, Reply, Served, useDeck, useKey, useMind, usePanel, } from "@hanzo/build";
+import { ConversationMenu, ThreadMore, useThreadList } from "./thread.js";
+import { artifacts, lead, nameOf, PAGE, Panel, PanelToggle, prompt, renders, Reply, Served, useDeck, useKey, useMind, usePanel, frames, name as tabName, } from "@hanzo/build";
 import { checkoutUrl } from './lib/pay.js';
 import { Upgrade, useFree } from './Upgrade.js';
 import { enter, LOGIN } from './lib/destination.js';
@@ -238,7 +239,11 @@ export function Ask({ placeholder, idle, }) {
  * character (`Message ${persona.name}`). `label` stays "Ask anything", so the
  * accessible name does not move when the placeholder does.
  */
-const message = () => `Message ${brand()}`;
+const message = () => `Ask ${brand()}`;
+/** The line every answer is sent under, above the composer, as the reference sets it. */
+const caution = () => `${brand()} can make mistakes. Check important info.`;
+/** 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 +494,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.
@@ -506,6 +510,8 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
     const wide = useMedia().lg;
     const [panel, setPanel] = usePanel("chat", false, wide);
     const deck = useDeck(`chat:${at}`, SEED);
+    // The org's sites, which an empty tab suggests.
+    const sites = useSites();
     useKey(() => setPanel(!panel));
     // On a laptop the frame's column is the panel's; a close from the frame (its
     // edge pulled shut, the shell's own control) comes back into `panel`.
@@ -1042,8 +1048,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
@@ -1201,7 +1215,34 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
         }, onCancel: () => {
             setAsking(null);
         } }));
+    /** The tabs' browser, as this conversation offers it: the org's sites to start from, and a page asked about, captured or opened in Dev. */
+    const browsing = {
+        suggested: sites,
+        onAsk: (page) => {
+            const quote = page.selection ? `\n> ${page.selection.trim().split("\n").join("\n> ")}` : "";
+            setDraft((was) => `${was ? `${was}\n\n` : ""}About ${page.title} (${page.url}):${quote}\n`);
+        },
+        onCapture: (file) => void hold(at, [file], via),
+        onDev: (page) => {
+            const slug = new URL(page.url).hostname.match(/^([a-z0-9-]+)\.hanzo\.app$/)?.[1] ?? null;
+            window.location.assign(dev(slug));
+        },
+    };
     return (_jsxs(YStack, { flex: 1, minH: 0, width: "100%", position: "relative", "data-slot": "chat-room", 
+        // A LINK IN AN ANSWER OPENS IN A TAB beside the conversation when the tab
+        // can show it — a site or preview we host — and in a browser tab of its
+        // own otherwise, as a modified click always does.
+        onClickCapture: (press) => {
+            const e = press;
+            if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)
+                return;
+            const a = e.target?.closest?.("a[href]");
+            if (!a || !/^https?:/.test(a.href) || !frames(a.href))
+                return;
+            e.preventDefault();
+            deck.open({ kind: PAGE, title: tabName(a.href), url: a.href });
+            setPanel(true);
+        }, 
         // Entered and left once for every child crossed, so the veil follows a
         // count rather than the last event.
         onDragEnter: (e) => {
@@ -1226,7 +1267,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", ...browsing }) })) : null, !wide && panel ? _jsx(Panel, { side: deck, kinds: NONE, sheet: true, onHide: () => setPanel(false), label: "Tabs", ...browsing }) : null, isFree(model) ? (_jsxs(Text, { fontSize: "$2", color: "$soft", text: "center", maxW: MEASURE, mx: "auto", px: "$4", py: "$2", children: [freeCopy.notice, " ", _jsx(Anchor, { href: site("/legal/privacy"), children: freeCopy.noticeCta })] })) : null, _jsx(ChatSurface, { ...chat, messages: shown, send: guarded, 
                 // 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
@@ -1304,6 +1345,7 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
                     // `label` keeps the accessible name constant while it does.
                     placeholder: room.length ? `Message ${join(room)}` : placeholder,
                     label: ASK,
+                    note: caution(),
                     // In the app's frame the composer floats on the pane as a pane of its own.
                     framed,
                     // A file or an image pasted into the field is held like a picked one;

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;