@columenlabs/lumen-ui 0.1.212 → 0.1.214

package/dist/assistant/chat-image.d.ts

@@ -0,0 +1,4 @@
+export declare function ChatImage({ src, alt }: {
+    src: string;
+    alt: string;
+}): import("react").JSX.Element;

package/dist/assistant/chat-image.js

@@ -0,0 +1,47 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ChatImage: an image in a chat message. A thumbnail until clicked; then it opens full width in place,
+// where the wheel or a pinch zooms at the pointer, a drag or two fingers pan and a double-click
+// toggles fit and 2× (react-zoom-pan-pinch). Its toolbar zooms, resets, opens the image in a 90%
+// lightbox with the same controls (the kit's Dialog: Esc, × or a click outside closes it) and
+// shrinks it back to the thumbnail.
+import { Maximize2Icon, Minimize2Icon, RotateCcwIcon, XIcon, ZoomInIcon, ZoomOutIcon, } from 'lucide-react';
+import { useState } from 'react';
+import { TransformComponent, TransformWrapper, useControls, useTransformEffect, } from 'react-zoom-pan-pinch';
+import { IconButton } from '../icon-button.js';
+import { cn } from '../lib/utils.js';
+import { Dialog, DialogClose, DialogContent, DialogTitle } from '../ui/dialog.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip.js';
+const MAX_SCALE = 8;
+/** The zoom buttons and the scale between them; `children` are the buttons after a divider. */
+function ZoomBar({ children }) {
+    const { zoomIn, zoomOut, resetTransform } = useControls();
+    const [scale, setScale] = useState(1);
+    useTransformEffect(({ state }) => setScale(state.scale));
+    return (_jsxs("div", { className: "absolute top-2 right-2 z-10 flex items-center gap-0.5 rounded-lg border bg-popover/90 p-0.5 text-popover-foreground shadow-sm backdrop-blur-sm", "data-slot": "image-zoom-bar", children: [_jsx(IconButton, { icon: ZoomOutIcon, label: "Zoom out", disabled: scale <= 1.001, onClick: () => zoomOut() }), _jsxs("span", { className: "num min-w-10 text-center text-muted-foreground text-xs", "aria-live": "polite", children: [Math.round(scale * 100), "%"] }), _jsx(IconButton, { icon: ZoomInIcon, label: "Zoom in", disabled: scale >= MAX_SCALE - 0.001, onClick: () => zoomIn() }), _jsx(IconButton, { icon: RotateCcwIcon, label: "Reset zoom", onClick: () => resetTransform() }), _jsx("span", { className: "mx-0.5 h-4 w-px bg-border", "aria-hidden": true }), children] }));
+}
+/** The image at fit (scale 1), with zoom and pan; the wrapper takes the box its parent gives it. */
+function Zoomable({ src, alt, children, }) {
+    return (_jsxs(TransformWrapper, { minScale: 1, maxScale: MAX_SCALE, centerZoomedOut: true, wheel: { step: 0.004 }, doubleClick: { mode: 'toggle', step: 1 }, children: [_jsx(ZoomBar, { children: children }), _jsx(TransformComponent, { wrapperClass: "!size-full cursor-grab active:cursor-grabbing", contentClass: "!size-full", children: _jsx("img", { src: src, alt: alt, draggable: false, className: "size-full object-contain" }) })] }));
+}
+export function ChatImage({ src, alt }) {
+    const [open, setOpen] = useState(false);
+    const [full, setFull] = useState(false);
+    const [ratio, setRatio] = useState(null);
+    if (!open) {
+        return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": "View larger", onClick: () => setOpen(true), className: "group/thumb relative cursor-zoom-in overflow-hidden rounded-md border outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx("img", { src: src, alt: alt, className: "max-h-32 max-w-40 object-cover", onLoad: (e) => {
+                                    const { naturalWidth: w, naturalHeight: h } = e.currentTarget;
+                                    if (w && h)
+                                        setRatio(w / h);
+                                } }), _jsx("span", { className: "absolute top-1 right-1 flex size-6 items-center justify-center rounded-md bg-background/80 opacity-0 transition-opacity group-hover/thumb:opacity-100 group-focus-visible/thumb:opacity-100", children: _jsx(Maximize2Icon, { className: "size-3.5", "aria-hidden": true }) })] }) }), _jsx(TooltipContent, { children: "View larger" })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "relative w-full overflow-hidden rounded-md border bg-background", style: { aspectRatio: ratio ?? 4 / 3, maxHeight: '60vh' }, "data-slot": "chat-image", children: _jsxs(Zoomable, { src: src, alt: alt, children: [_jsx(IconButton, { icon: Maximize2Icon, label: "Full screen", onClick: () => setFull(true) }), _jsx(IconButton, { icon: Minimize2Icon, label: "Shrink", onClick: () => {
+                                setOpen(false);
+                                setFull(false);
+                            } })] }) }), _jsx(Dialog, { open: full, onOpenChange: setFull, children: _jsxs(DialogContent, { showCloseButton: false, "aria-describedby": undefined, 
+                    // Focus the box, not its first button: a focused button shows its tooltip, which would take
+                    // the first Esc.
+                    onOpenAutoFocus: (e) => {
+                        e.preventDefault();
+                        e.currentTarget.focus();
+                    }, className: cn('h-[90vh] w-[90vw] max-w-none overflow-hidden p-0 sm:max-w-none', 'max-md:h-full max-md:w-full'), children: [_jsx(DialogTitle, { className: "sr-only", children: alt }), _jsx("div", { className: "relative size-full", children: _jsx(Zoomable, { src: src, alt: alt, children: _jsx(DialogClose, { asChild: true, children: _jsx(IconButton, { icon: XIcon, label: "Close" }) }) }) })] }) })] }));
+}

package/dist/assistant/lumen-assistant.d.ts

@@ -16,6 +16,17 @@ export interface LumenAssistantProps {
     onSettings?: () => void;
     /** Days chats are kept, for the Chats menu's line. */
     keepDays?: number;
+    /**
+     * Chats belong to a place in the app (a workspace, a project): the Chats menu lists the
+     * `current` one's chats (rows whose `scope` matches) and a switch named `label` shows them all,
+     * each with its place's `name`. The switch is kept on this device. A row with no `scope` shows
+     * only with the switch on.
+     */
+    chatScope?: {
+        current: string;
+        label: string;
+        name?: (scope: string) => string | undefined;
+    };
     /** Closes the panel (its ✕). */
     onClose?: () => void;
     /** An outside chat state (the dock shares one between the button and the panel). */
@@ -25,7 +36,7 @@ export interface LumenAssistantProps {
      * kit's: /compact, /clear, /model and /escalate.
      */
     commands?: AssistantCommand[];
-    /** What `#` lists everywhere; a page adds its own with `useAssistantSource`. */
+    /** What `@` lists everywhere; a page adds its own with `useAssistantSource`. */
     sources?: readonly AssistantSource[];
     /**
      * Images can go with a message: pasted (Cmd+V / Ctrl+V) or dropped on the box, shown as chips
@@ -47,10 +58,10 @@ export interface AssistantCommand {
     run: (args: string) => string | undefined | Promise<string | undefined>;
 }
 /** The assistant's chat: header, messages and composer. */
-export declare function LumenAssistant({ client, context, onSettings, keepDays, onClose, chat: outside, commands, sources, images, }: LumenAssistantProps): import("react").JSX.Element;
+export declare function LumenAssistant({ client, context, onSettings, keepDays, chatScope, onClose, chat: outside, commands, sources, images, }: LumenAssistantProps): import("react").JSX.Element;
 /** An allowance in its unit: `$4.20`, or `350 credits`. */
 export declare const allowanceAmount: (u: AllowanceUnit, n: number) => string;
-/** What the composer sends with the text: the tier picked with `@` and the things pointed at with `#`. */
+/** What the composer sends with the text: the tier picked with `#` and the things pointed at with `@`. */
 export interface ComposerExtra {
     tier?: string;
     refs?: AssistantRefNote[];
@@ -58,26 +69,26 @@ export interface ComposerExtra {
 }
 /**
  * The message box: Enter sends, Shift+Enter breaks a line; Stop while an answer runs. Three
- * triggers list what can follow them as it is typed: `/` at the start a command, `@` a tier for
- * this message, `#` a thing to point at (the `sources`); a picked tier or thing shows as a chip.
+ * triggers list what can follow them as it is typed: `/` at the start a command, `@` a thing to
+ * point at (the `sources`), `#` a tier for this message; a picked tier or thing shows as a chip.
  */
 export declare function LumenComposer({ name, busy, queued, disabled, commands, tiers, sources, page, images: canAttach, onSend, onStop, }: {
     name: string;
     /** Images can be pasted or dropped on the box (`LumenAssistant` `images`). */
     images?: boolean;
-    /** The page's name for `#` This page; the document's title by default. */
+    /** The page's name for `@` This page; the document's title by default. */
     page?: string;
     busy: boolean;
     queued: string | null;
     disabled?: boolean;
     commands?: AssistantCommand[];
-    /** What `@` lists. */
+    /** What `#` lists. */
     tiers?: {
         id: string;
         label: string;
         model_label?: string;
     }[];
-    /** What `#` lists, a group each. */
+    /** What `@` lists, a group each. */
     sources?: readonly AssistantSource[];
     onSend: (text: string, extra: ComposerExtra) => void;
     onStop: () => void;

package/dist/assistant/lumen-assistant.js

@@ -26,6 +26,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover.js';
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '../ui/sheet.js';
 import { Spinner } from '../ui/spinner.js';
 import { Textarea } from '../ui/textarea.js';
+import { ChatImage } from './chat-image.js';
 import { chatMarkdown, chatTurns, copyMarkdown, turnMarkdown } from './copy.js';
 import { composeAssistant, selectionRef, useComposeRequest, usePageSelection, useShownAssistantSources, } from './sources.js';
 import { UsageHistoryView, tokens, usd } from './usage-history.js';
@@ -48,11 +49,12 @@ export function useAssistantStatus(client) {
 export { usd };
 const seconds = (ms) => (ms < 1000 ? `${ms} ms` : `${(ms / 1000).toFixed(1)} s`);
 /** The assistant's chat: header, messages and composer. */
-export function LumenAssistant({ client, context, onSettings, keepDays = 30, onClose, chat: outside, commands = [], sources = [], images = false, }) {
+export function LumenAssistant({ client, context, onSettings, keepDays = 30, chatScope, onClose, chat: outside, commands = [], sources = [], images = false, }) {
     const own = useAssistantChat(client);
     const chat = outside ?? own;
     const qc = useQueryClient();
     const status = useAssistantStatus(client);
+    const [allScopes, setAllScopes] = useAllScopes(client.key);
     const chats = useQuery({
         queryKey: ['lumen-assistant', client.key, 'chats'],
         queryFn: () => client.chats(),
@@ -181,11 +183,14 @@ export function LumenAssistant({ client, context, onSettings, keepDays = 30, onC
             allCommands.push(c);
     const shown = useShownAssistantSources();
     const allSources = [...shown, ...sources.filter((x) => !shown.some((y) => y.id === x.id))];
-    return (_jsxs("div", { "data-assistant": "", className: "flex h-full min-h-0 flex-col", children: [_jsxs("div", { className: "flex h-12 shrink-0 items-center gap-1 border-b px-3", children: [_jsx(SparklesIcon, { className: "size-4 text-edge" }), _jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: chat.title || s?.name || 'Assistant' }), s && s.tiers.length > 1 && (_jsx(LumenSelector, { trigger: "chip", size: "sm", label: "Tier", value: s.tier, options: s.tiers.map((t) => ({ value: t.id, label: t.label, detail: t.model_label })), onChange: (t) => void setTier(t) })), _jsx(LumenAssistantChats, { chats: chats.data?.map((c) => ({
+    return (_jsxs("div", { "data-assistant": "", className: "flex h-full min-h-0 flex-col", children: [_jsxs("div", { className: "flex h-12 shrink-0 items-center gap-1 border-b px-3", children: [_jsx(SparklesIcon, { className: "size-4 text-edge" }), _jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: chat.title || s?.name || 'Assistant' }), s && s.tiers.length > 1 && (_jsx(LumenSelector, { trigger: "chip", size: "sm", label: "Tier", value: s.tier, options: s.tiers.map((t) => ({ value: t.id, label: t.label, detail: t.model_label })), onChange: (t) => void setTier(t) })), _jsx(LumenAssistantChats, { chats: chats.data
+                            ?.filter((c) => !chatScope || allScopes || c.scope === chatScope.current)
+                            .map((c) => ({
                             id: c.id,
                             title: c.title,
                             updated_at: new Date(c.at).toISOString(),
-                        })) ?? (chats.isFetched ? [] : null), value: chat.chatId ?? undefined, note: `Chats are kept ${keepDays} days after their last message.`, onRefresh: () => void chats.refetch(), onOpen: (c) => void chat.open(c.id) }), _jsx(IconButton, { icon: CopyIcon, label: "Copy chat", disabled: !chat.items.length, onClick: () => copyMarkdown(chatMarkdown(chat.title, chat.items, name), 'Chat') }), _jsx(IconButton, { icon: PlusIcon, label: "New chat", disabled: !chat.items.length, onClick: chat.reset }), onClose && (_jsx(IconButton, { icon: XIcon, label: `Close ${s?.name ?? 'assistant'}`, onClick: onClose }))] }), _jsx(AssistantName.Provider, { value: name, children: _jsx(Screen.Provider, { value: controls, children: _jsx(Messages, { chat: chat, status: s, onSettings: onSettings }) }) }), _jsx(LumenComposer, { name: s?.name ?? 'the assistant', busy: chat.busy, queued: chat.queued, disabled: !s || !!s.wait, commands: allCommands, tiers: tiers, sources: allSources, page: context?.label, images: images, onSend: (text, more) => chat.send(text, { ...extra(), ...more }), onStop: chat.stop }), _jsx(UsageLine, { usage: chat.usage, client: client, spent: s?.spend.usd })] }));
+                            ...(chatScope && allScopes && c.scope ? { where: chatScope.name?.(c.scope) } : {}),
+                        })) ?? (chats.isFetched ? [] : null), value: chat.chatId ?? undefined, toggle: chatScope && { label: chatScope.label, on: allScopes, onChange: setAllScopes }, note: `Chats are kept ${keepDays} days after their last message.`, onRefresh: () => void chats.refetch(), onOpen: (c) => void chat.open(c.id) }), _jsx(IconButton, { icon: CopyIcon, label: "Copy chat", disabled: !chat.items.length, onClick: () => copyMarkdown(chatMarkdown(chat.title, chat.items, name), 'Chat') }), _jsx(IconButton, { icon: PlusIcon, label: "New chat", disabled: !chat.items.length, onClick: chat.reset }), onClose && (_jsx(IconButton, { icon: XIcon, label: `Close ${s?.name ?? 'assistant'}`, onClick: onClose }))] }), _jsx(AssistantName.Provider, { value: name, children: _jsx(Screen.Provider, { value: controls, children: _jsx(Messages, { chat: chat, status: s, onSettings: onSettings }) }) }), _jsx(LumenComposer, { name: s?.name ?? 'the assistant', busy: chat.busy, queued: chat.queued, disabled: !s || !!s.wait, commands: allCommands, tiers: tiers, sources: allSources, page: context?.label, images: images, onSend: (text, more) => chat.send(text, { ...extra(), ...more }), onStop: chat.stop }), _jsx(UsageLine, { usage: chat.usage, client: client, spent: s?.spend.usd })] }));
 }
 function Messages({ chat, status, onSettings, }) {
     const end = useRef(null);
@@ -228,7 +233,7 @@ function allowanceWait(a) {
 }
 /** The assistant's name, for a copied turn's headings. */
 const AssistantName = createContext('Assistant');
-/** A tier's name for a message's `@` chip. */
+/** A tier's name for a message's `#` chip. */
 const TierNames = createContext((id) => id);
 /** Takes back a change made at once (Undo on its line). */
 const UndoWrite = createContext(null);
@@ -259,7 +264,7 @@ function Item({ item, onSettle, busy, }) {
     const tierName = useContext(TierNames);
     switch (item.kind) {
         case 'user':
-            return (_jsxs("div", { className: "ml-8 self-end rounded-lg bg-muted px-3 py-2 text-sm whitespace-pre-wrap", children: [(item.tier || item.refs?.length) && (_jsxs("span", { className: "mb-1 flex flex-wrap gap-1", children: [item.tier && _jsx(ComposerChip, { sign: "@", label: tierName(item.tier) }), item.refs?.map((r, i) => (_jsx(ComposerChip, { sign: "#", label: r.label }, `${r.kind}:${r.label}:${i}`)))] })), item.images?.length ? (_jsx("span", { className: "mb-1 flex flex-wrap gap-1.5", children: item.images.map((src, i) => (_jsx("img", { src: src, alt: `Pasted ${i + 1}`, className: "max-h-32 max-w-40 rounded-md border object-cover" }, `${i}:${src.length}`))) })) : null, item.text, item.context && (_jsxs("span", { className: "mt-1 block text-muted-foreground text-xs", children: ["on ", item.context] }))] }));
+            return (_jsxs("div", { className: "ml-8 self-end rounded-lg bg-muted px-3 py-2 text-sm whitespace-pre-wrap has-[[data-slot=chat-image]]:ml-0 has-[[data-slot=chat-image]]:w-full", children: [(item.tier || item.refs?.length) && (_jsxs("span", { className: "mb-1 flex flex-wrap gap-1", children: [item.tier && _jsx(ComposerChip, { sign: TIER, label: tierName(item.tier) }), item.refs?.map((r, i) => (_jsx(ComposerChip, { sign: POINT, label: r.label }, `${r.kind}:${r.label}:${i}`)))] })), item.images?.length ? (_jsx("span", { className: "mb-1 flex flex-wrap gap-1.5", children: item.images.map((src, i) => (_jsx(ChatImage, { src: src, alt: `Pasted ${i + 1}` }, `${i}:${src.length}`))) })) : null, item.text, item.context && (_jsxs("span", { className: "mt-1 block text-muted-foreground text-xs", children: ["on ", item.context] }))] }));
         case 'text':
             return (_jsxs("div", { className: "prose-sm text-sm leading-relaxed [&_code]:font-code [&_code]:text-xs [&_li]:ml-4 [&_ol]:list-decimal [&_p]:my-1.5 [&_ul]:list-disc", children: [_jsx(ChatMarkdown, { children: item.text }), item.live && (_jsx("span", { className: "ml-0.5 inline-block h-3.5 w-1.5 animate-pulse bg-foreground/60 align-middle" }))] }));
         case 'step':
@@ -422,7 +427,10 @@ const WHY = {
 function HandOff({ item, onSettle, busy, }) {
     return (_jsxs("section", { className: "flex flex-col gap-2 border-l-2 border-primary/40 pl-3", children: [_jsxs("p", { className: "flex items-center gap-1.5 text-xs", children: [_jsx(CornerDownRightIcon, { className: "size-3.5 text-muted-foreground" }), _jsx("span", { className: "font-medium", children: item.label }), _jsxs("span", { className: "text-muted-foreground", children: ["\u00B7 ", WHY[item.why]] }), item.usage && (_jsx("span", { className: "ml-auto text-muted-foreground tabular-nums", children: usd(item.usage.usd) }))] }), _jsx("p", { className: "text-muted-foreground text-xs", children: item.task }), _jsx(Items, { items: item.items, onSettle: onSettle, busy: busy })] }));
 }
-/** A chip over the message box: a tier picked with `@` or a thing pointed at with `#`. */
+/** The composer's triggers: `@` points at a thing (the `sources`), `#` picks the tier for one message. */
+const POINT = '@';
+const TIER = '#';
+/** A chip over the message box: a tier picked with `#` or a thing pointed at with `@`. */
 function ComposerChip({ sign, label, onRemove, }) {
     return (_jsxs("span", { className: "inline-flex max-w-full items-center gap-1 rounded-md border bg-background px-1.5 py-0.5 text-xs", children: [_jsx("span", { className: "text-muted-foreground", children: sign }), _jsx("span", { className: "truncate", children: label }), onRemove && (_jsx("button", { type: "button", "aria-label": `Remove ${label}`, className: "text-muted-foreground hover:text-foreground", onClick: onRemove, children: _jsx(XIcon, { className: "size-3" }) }))] }));
 }
@@ -459,8 +467,8 @@ async function readImage(file) {
 const imageUrl = (i) => `data:${i.media_type};base64,${i.data}`;
 /**
  * The message box: Enter sends, Shift+Enter breaks a line; Stop while an answer runs. Three
- * triggers list what can follow them as it is typed: `/` at the start a command, `@` a tier for
- * this message, `#` a thing to point at (the `sources`); a picked tier or thing shows as a chip.
+ * triggers list what can follow them as it is typed: `/` at the start a command, `@` a thing to
+ * point at (the `sources`), `#` a tier for this message; a picked tier or thing shows as a chip.
  */
 export function LumenComposer({ name, busy, queued, disabled, commands = [], tiers = [], sources = [], page, images: canAttach = false, onSend, onStop, }) {
     const [text, setText] = useState('');
@@ -491,13 +499,13 @@ export function LumenComposer({ name, busy, queued, disabled, commands = [], tie
     }, [request]);
     const m = /^\/(\S*)(?:\s(.*))?$/s.exec(text);
     const cmd = m && m[2] !== undefined ? commands.find((c) => c.name === m[1]) : undefined;
-    // `@` or `#` as the word the caret is in: `pick #sto|` lists the sources' items matching "sto".
+    // `@` or `#` as the word the caret is in: `pick @sto|` lists the sources' items matching "sto".
     const word = /(^|\s)([@#])([^\s@#]*)$/.exec(text.slice(0, caret));
     const trigger = word ? word[2] : null;
     const asked = word?.[3] ?? '';
     const open = closed !== `${text}|${caret}`;
     const slash = m && commands.length ? (m[2] === undefined ? 'command' : cmd?.options ? 'arg' : null) : null;
-    const at = trigger === '@' && tiers.length > 1 ? '@' : trigger === '#' ? '#' : null;
+    const at = trigger === TIER && tiers.length > 1 ? 'tier' : trigger === POINT ? 'point' : null;
     const picking = open ? (slash ?? at) : null;
     const extra = () => ({
         ...(tier ? { tier } : {}),
@@ -585,12 +593,12 @@ export function LumenComposer({ name, busy, queued, disabled, commands = [], tie
             box.current?.setSelectionRange(start, start);
         });
     };
-    // Each `#` row makes its chip when picked, so what it carries (a card's words) is read then.
+    // Each `@` row makes its chip when picked, so what it carries (a card's words) is read then.
     const sourceItems = new Map();
     const picked = selection ? selectionRef(selection) : null;
     const added = (r) => refs.some((x) => sameRef(x, r)) ? { disabled: 'Added' } : {};
     const onPage = [];
-    if (picking === '#') {
+    if (picking === 'point') {
         const pageRef = () => ({
             kind: 'page',
             label: page || document.title || 'This page',
@@ -649,7 +657,7 @@ export function LumenComposer({ name, busy, queued, disabled, commands = [], tie
     }
     if (picked)
         sourceItems.set('selection', () => picked);
-    const sourceOptions = picking === '#'
+    const sourceOptions = picking === 'point'
         ? [
             ...(picked
                 ? [
@@ -698,20 +706,20 @@ export function LumenComposer({ name, busy, queued, disabled, commands = [], tie
         requestAnimationFrame(() => box.current?.focus());
     };
     const tierLabel = tiers.find((t) => t.id === tier)?.label;
-    const hints = [commands.length && '/', tiers.length > 1 && '@', '#'].filter(Boolean);
+    const hints = [commands.length && '/', POINT, tiers.length > 1 && TIER].filter(Boolean);
     return (_jsxs("div", { className: "shrink-0 border-t p-3", children: [queued && (_jsxs("p", { className: "mb-2 truncate text-muted-foreground text-xs", children: ["Queued: ", _jsx("span", { className: "text-foreground", children: queued })] })), picking === 'command' && (_jsx(LumenSelectorList, { handle: list, label: "Commands", className: "mb-2", fuzzy: true, query: m?.[1] ?? '', options: commands.map((c) => ({
                     value: c.name,
                     label: `/${c.name}`,
                     ...(c.args ? { detail: c.args } : {}),
                     description: c.about,
-                })), empty: "No command matches", onPick: pickCommand, onClose: () => setClosed(`${text}|${caret}`) })), picking === 'arg' && cmd?.options && (_jsx(LumenSelectorList, { handle: list, label: `/${cmd.name}`, className: "mb-2", fuzzy: true, query: m?.[2] ?? '', options: cmd.options(), onPick: (o) => void run(cmd, o.value), onClose: () => setClosed(`${text}|${caret}`) })), picking === '@' && (_jsx(LumenSelectorList, { handle: list, label: "Answer this message on", className: "mb-2", fuzzy: true, query: asked, options: tiers.map((t) => ({
+                })), empty: "No command matches", onPick: pickCommand, onClose: () => setClosed(`${text}|${caret}`) })), picking === 'arg' && cmd?.options && (_jsx(LumenSelectorList, { handle: list, label: `/${cmd.name}`, className: "mb-2", fuzzy: true, query: m?.[2] ?? '', options: cmd.options(), onPick: (o) => void run(cmd, o.value), onClose: () => setClosed(`${text}|${caret}`) })), picking === 'tier' && (_jsx(LumenSelectorList, { handle: list, label: "Answer this message on", className: "mb-2", fuzzy: true, query: asked, options: tiers.map((t) => ({
                     value: t.id,
                     label: t.label,
                     ...(t.model_label ? { detail: t.model_label } : {}),
                 })), empty: "No tier matches", onPick: (o) => {
                     setTier(o.value);
                     dropWord();
-                }, onClose: () => setClosed(`${text}|${caret}`) })), picking === '#' && (_jsx(LumenSelectorList, { handle: list, label: "Point at", className: "mb-2", query: asked, options: sourceOptions, empty: "Nothing matches", onPick: (o) => {
+                }, onClose: () => setClosed(`${text}|${caret}`) })), picking === 'point' && (_jsx(LumenSelectorList, { handle: list, label: "Point at", className: "mb-2", query: asked, options: sourceOptions, empty: "Nothing matches", onPick: (o) => {
                     dropWord();
                     if (o.value === 'point') {
                         void point();
@@ -720,7 +728,7 @@ export function LumenComposer({ name, busy, queued, disabled, commands = [], tie
                     const r = sourceItems.get(o.value)?.();
                     if (r)
                         setRefs((p) => [...p, r]);
-                }, onClose: () => setClosed(`${text}|${caret}`) })), images.length > 0 && (_jsx("div", { className: "mb-2 flex flex-wrap gap-1.5", "aria-label": "Images going with your message", children: images.map((img, i) => (_jsxs("span", { className: "relative", children: [_jsx("img", { src: imageUrl(img), alt: `Pasted ${i + 1}`, className: "size-12 rounded-md border object-cover" }), _jsx("button", { type: "button", "aria-label": `Remove image ${i + 1}`, className: "absolute -top-1.5 -right-1.5 grid size-4 place-items-center rounded-full border bg-background text-muted-foreground hover:text-foreground", onClick: () => setImages((p) => p.filter((_, j) => j !== i)), children: _jsx(XIcon, { className: "size-3" }) })] }, `${i}:${img.data.length}`))) })), (tierLabel || refs.length > 0) && (_jsxs("div", { className: "mb-2 flex flex-wrap gap-1", children: [tierLabel && _jsx(ComposerChip, { sign: "@", label: tierLabel, onRemove: () => setTier(null) }), refs.map((r, i) => (_jsx(ComposerChip, { sign: "#", label: r.label, onRemove: () => setRefs((p) => p.filter((_, j) => j !== i)) }, `${r.kind}:${r.label}:${i}`)))] })), _jsxs("div", { className: "relative", children: [_jsx(Textarea, { ref: box, "aria-label": `Message ${name}`, placeholder: `Ask ${name}…${hints.length ? ` (${hints.join(' ')})` : ''}`, className: "max-h-48 min-h-11 resize-none pr-11", value: text, disabled: disabled, onChange: (e) => {
+                }, onClose: () => setClosed(`${text}|${caret}`) })), images.length > 0 && (_jsx("div", { className: "mb-2 flex flex-wrap gap-1.5", "aria-label": "Images going with your message", children: images.map((img, i) => (_jsxs("span", { className: "relative", children: [_jsx("img", { src: imageUrl(img), alt: `Pasted ${i + 1}`, className: "size-12 rounded-md border object-cover" }), _jsx("button", { type: "button", "aria-label": `Remove image ${i + 1}`, className: "absolute -top-1.5 -right-1.5 grid size-4 place-items-center rounded-full border bg-background text-muted-foreground hover:text-foreground", onClick: () => setImages((p) => p.filter((_, j) => j !== i)), children: _jsx(XIcon, { className: "size-3" }) })] }, `${i}:${img.data.length}`))) })), (tierLabel || refs.length > 0) && (_jsxs("div", { className: "mb-2 flex flex-wrap gap-1", children: [tierLabel && (_jsx(ComposerChip, { sign: TIER, label: tierLabel, onRemove: () => setTier(null) })), refs.map((r, i) => (_jsx(ComposerChip, { sign: POINT, label: r.label, onRemove: () => setRefs((p) => p.filter((_, j) => j !== i)) }, `${r.kind}:${r.label}:${i}`)))] })), _jsxs("div", { className: "relative", children: [_jsx(Textarea, { ref: box, "aria-label": `Message ${name}`, placeholder: `Ask ${name}…${hints.length ? ` (${hints.join(' ')})` : ''}`, className: "max-h-48 min-h-11 resize-none pr-11", value: text, disabled: disabled, onChange: (e) => {
                             setText(e.target.value);
                             setCaret(e.target.selectionStart);
                         }, onSelect: (e) => setCaret(e.currentTarget.selectionStart), onPaste: (e) => {
@@ -843,3 +851,26 @@ export function useLumenAssistantDock(client, o = {
         panel: (_jsx(LumenAssistantPanel, { name: name, open: open, onOpenChange: setOpen, children: () => (_jsx(LumenAssistant, { client: client, chat: chat, onClose: () => setOpen(false), ...props })) })),
     };
 }
+/** The Chats menu's All switch (`chatScope`), kept on this device per assistant. */
+function useAllScopes(key) {
+    const name = `lumen-assistant:${key}:all-scopes`;
+    const [on, setOn] = useState(() => {
+        try {
+            return localStorage.getItem(name) === '1';
+        }
+        catch {
+            return false;
+        }
+    });
+    const set = (v) => {
+        setOn(v);
+        try {
+            if (v)
+                localStorage.setItem(name, '1');
+            else
+                localStorage.removeItem(name);
+        }
+        catch { }
+    };
+    return [on, set];
+}

package/dist/assistant/sources.d.ts

@@ -1,6 +1,6 @@
 import type { AssistantRefNote } from '@columenlabs/lumen-ui-types/assistant';
 import { type ComponentType } from 'react';
-/** One thing a source holds: a row in the `#` list, sent with the message as `ref`. */
+/** One thing a source holds: a row in the `@` list, sent with the message as `ref`. */
 export interface AssistantSourceItem {
     /** Unique within its source. */
     id: string;
@@ -14,7 +14,7 @@ export interface AssistantSourceItem {
     /** What goes to the model: its kind, its label and whatever finds it (an id, a path). */
     ref: AssistantRefNote;
 }
-/** A group of things in the `#` list. */
+/** A group of things in the `@` list. */
 export interface AssistantSource {
     /** Unique: a page's source replaces an app source of the same id. */
     id: string;
@@ -23,10 +23,10 @@ export interface AssistantSource {
     icon?: ComponentType<{
         className?: string;
     }>;
-    /** What it holds now; `query` is what follows the `#`, for a source that searches. */
+    /** What it holds now; `query` is what follows the `@`, for a source that searches. */
     items: (query: string) => readonly AssistantSourceItem[];
 }
-/** Adds a source to the `#` list while the calling page is shown. */
+/** Adds a source to the `@` list while the calling page is shown. */
 export declare function useAssistantSource(source: AssistantSource | null | undefined): void;
 /** The sources pages have added, newest page last. */
 export declare function useShownAssistantSources(): readonly AssistantSource[];
@@ -50,5 +50,5 @@ export interface PageSelection {
 }
 /** What the person last highlighted on the page outside the assistant, or null. */
 export declare function usePageSelection(): PageSelection | null;
-/** A highlight as a `#` chip: its first words, the whole text and where it sits go to the model. */
+/** A highlight as an `@` chip: its first words, the whole text and where it sits go to the model. */
 export declare const selectionRef: (s: PageSelection) => AssistantRefNote;

package/dist/assistant/sources.js

@@ -11,7 +11,7 @@ const subscribe = (l) => {
     listeners.add(l);
     return () => listeners.delete(l);
 };
-/** Adds a source to the `#` list while the calling page is shown. */
+/** Adds a source to the `@` list while the calling page is shown. */
 export function useAssistantSource(source) {
     const latest = useRef(source);
     latest.current = source;
@@ -105,7 +105,7 @@ export function usePageSelection() {
         };
     }, () => selected, () => null);
 }
-/** A highlight as a `#` chip: its first words, the whole text and where it sits go to the model. */
+/** A highlight as an `@` chip: its first words, the whole text and where it sits go to the model. */
 export const selectionRef = (s) => ({
     kind: 'selection',
     label: `“${s.text.length > 40 ? `${s.text.slice(0, 40)}…` : s.text}”`,

package/dist/assistant-panel.d.ts

@@ -35,17 +35,25 @@ export interface AssistantChat {
     title: string;
     /** ISO time of its last message. */
     updated_at: string;
+    /** Where it was started, shown before its time (`LumenAssistant` `chatScope`, its switch on). */
+    where?: string;
 }
 /**
  * Chats, a dropdown from the panel header: chats grouped by when they were
  * last used, searched by title. A row is read ahead when highlighted, so picking it opens at once.
  */
-export declare function LumenAssistantChats<C extends AssistantChat>({ chats, value, note, disabled, onOpen, onRefresh, onHighlight, }: {
+export declare function LumenAssistantChats<C extends AssistantChat>({ chats, value, note, toggle, disabled, onOpen, onRefresh, onHighlight, }: {
     /** null while loading. */
     chats: C[] | null;
     value?: string;
     /** A line above the list: how long chats are kept. */
     note?: ReactNode;
+    /** A switch at the top of the menu, such as All workspaces (`LumenAssistant` `chatScope`). */
+    toggle?: {
+        label: string;
+        on: boolean;
+        onChange: (on: boolean) => void;
+    };
     disabled?: boolean;
     onOpen: (chat: C) => void;
     /** The menu opened: read the list again. */

package/dist/assistant-panel.js

@@ -6,7 +6,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // Open or closed and the width are each browser tab's own (sessionStorage). The
 // product fills the body (the product's assistant: its chat, composer, cards and spend).
 import { HistoryIcon, SparklesIcon } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useId, useRef, useState } from 'react';
 import { useIsMobile } from './hooks/use-mobile.js';
 import { cn } from './lib/utils.js';
 import { LumenBoundary } from './lumen-boundary.js';
@@ -15,7 +15,9 @@ import { ASSISTANT_WIDTH, usePrefs } from './prefs.js';
 import { ResizeEdge, tabState } from './side-dock.js';
 import { Button } from './ui/button.js';
 import { Kbd } from './ui/kbd.js';
+import { Label } from './ui/label.js';
 import { Sheet, SheetContent, SheetDescription, SheetTitle } from './ui/sheet.js';
+import { Switch } from './ui/switch.js';
 import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
 export { tabState };
 /** Whether the assistant is open in this tab. */
@@ -138,8 +140,9 @@ function whenOf(at, now, group, timeZone) {
  * Chats, a dropdown from the panel header: chats grouped by when they were
  * last used, searched by title. A row is read ahead when highlighted, so picking it opens at once.
  */
-export function LumenAssistantChats({ chats, value, note, disabled, onOpen, onRefresh, onHighlight, }) {
+export function LumenAssistantChats({ chats, value, note, toggle, disabled, onOpen, onRefresh, onHighlight, }) {
     const { timeZone } = usePrefs();
+    const toggleId = useId();
     const now = new Date();
     const byId = new Map((chats ?? []).map((c) => [c.id, c]));
     const groups = GROUPS.map((group) => ({
@@ -148,11 +151,17 @@ export function LumenAssistantChats({ chats, value, note, disabled, onOpen, onRe
             const at = new Date(c.updated_at);
             const g = groupOf(at, now, timeZone);
             return g === group
-                ? [{ value: c.id, label: c.title, detail: whenOf(at, now, g, timeZone) }]
+                ? [
+                    {
+                        value: c.id,
+                        label: c.title,
+                        detail: [c.where, whenOf(at, now, g, timeZone)].filter(Boolean).join(' · '),
+                    },
+                ]
                 : [];
         }),
     })).filter((g) => g.options.length > 0);
-    return (_jsx(LumenSelector, { trigger: "icon", icon: HistoryIcon, label: "Chats", search: true, align: "end", groups: groups, empty: chats === null ? 'Loading…' : 'No chats yet', header: note && _jsx("p", { className: "px-2 pt-1 text-xs text-muted-foreground", children: note }), value: value, disabled: disabled, onOpenChange: (o) => o && onRefresh?.(), onHighlight: (id) => {
+    return (_jsx(LumenSelector, { trigger: "icon", icon: HistoryIcon, label: "Chats", search: true, align: "end", groups: groups, empty: chats === null ? 'Loading…' : 'No chats yet', header: (toggle || note) && (_jsxs(_Fragment, { children: [toggle && (_jsxs("div", { className: "flex items-center gap-2 px-2 pt-1.5", children: [_jsx(Label, { htmlFor: toggleId, className: "min-w-0 flex-1 truncate text-xs font-normal", children: toggle.label }), _jsx(Switch, { id: toggleId, checked: toggle.on, onCheckedChange: toggle.onChange, "aria-label": toggle.label })] })), note && _jsx("p", { className: "px-2 pt-1 text-xs text-muted-foreground", children: note })] })), value: value, disabled: disabled, onOpenChange: (o) => o && onRefresh?.(), onHighlight: (id) => {
             const c = byId.get(id);
             if (c)
                 onHighlight?.(c);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.212",
+  "version": "0.1.214",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -49,7 +49,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.1.212",
+    "@columenlabs/lumen-ui-types": "0.1.214",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
@@ -75,6 +75,7 @@
     "react-intersection-observer": "9.16.0",
     "react-markdown": "10.1.0",
     "react-resizable-panels": "^4.14.3",
+    "react-zoom-pan-pinch": "4.2.0",
     "recharts": "^3.10.1",
     "remark-gfm": "4.0.1",
     "shiki": "4.5.0",