@columenlabs/lumen-ui 0.1.225 → 0.1.227

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

@@ -2,3 +2,10 @@ export declare function ChatImage({ src, alt }: {
     src: string;
     alt: string;
 }): import("react").JSX.Element;
+/** An image over 90% of the screen with zoom and pan (the kit's Dialog: Esc, × or a click outside closes it). */
+export declare function ImageLightbox({ src, alt, open, onOpenChange, }: {
+    src: string;
+    alt: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}): import("react").JSX.Element;

package/dist/assistant/chat-image.js

@@ -40,11 +40,15 @@ export function ChatImage({ src, alt }) {
     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, panAtFit: true, children: _jsx(DialogClose, { asChild: true, children: _jsx(IconButton, { icon: XIcon, label: "Close" }) }) }) })] }) })] }));
+                            } })] }) }), _jsx(ImageLightbox, { src: src, alt: alt, open: full, onOpenChange: setFull })] }));
+}
+/** An image over 90% of the screen with zoom and pan (the kit's Dialog: Esc, × or a click outside closes it). */
+export function ImageLightbox({ src, alt, open, onOpenChange, }) {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, 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, panAtFit: true, children: _jsx(DialogClose, { asChild: true, children: _jsx(IconButton, { icon: XIcon, label: "Close" }) }) }) })] }) }));
 }

package/dist/assistant/copy.js

@@ -36,7 +36,13 @@ function itemMarkdown(i, depth, name) {
             const refs = i.refs?.length
                 ? `\n\nPointing at: ${i.refs.map((r) => r.label).join(', ')}`
                 : '';
-            return `${h} You\n\n${i.text}${refs}`;
+            const quote = i.quote
+                ? `${i.quote.text
+                    .split('\n')
+                    .map((l) => `> ${l}`)
+                    .join('\n')}\n\n`
+                : '';
+            return `${h} You\n\n${quote}${i.text}${refs}`;
         }
         case 'text':
             return `${h} ${name}\n\n${i.text}`;

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

@@ -0,0 +1,11 @@
+import type { StepImage, StepItem } from '@columenlabs/lumen-ui-types/assistant';
+/** Whether a tool's name as the model called it (`group__tool`) is `tool`. */
+export declare const toolIs: (called: string, tool: string) => boolean;
+export declare function ImageCard({ step, image, mode, }: {
+    step: StepItem;
+    image: StepImage;
+    /** The composer mode Make another turns on. */
+    mode?: string;
+}): import("react").JSX.Element;
+/** The image tool's line while it runs. */
+export declare function ImagePending(): import("react").JSX.Element;

package/dist/assistant/image-card.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DownloadIcon, ImageIcon, ImagePlusIcon, Maximize2Icon, RefreshCwIcon } from 'lucide-react';
+import { useState } from 'react';
+import { IconButton } from '../icon-button.js';
+import { lumenToast } from '../lumen-toast.js';
+import { ImageLightbox } from './chat-image.js';
+import { composeAssistant } from './sources.js';
+/** Whether a tool's name as the model called it (`group__tool`) is `tool`. */
+export const toolIs = (called, tool) => called === tool || called.endsWith(`__${tool}`);
+/** The image as the composer sends it, or null when it cannot be read. */
+async function asReference(url) {
+    try {
+        const res = await fetch(url, {
+            credentials: 'same-origin',
+            signal: AbortSignal.timeout(15_000),
+        });
+        if (!res.ok)
+            return null;
+        const blob = await res.blob();
+        const data = await new Promise((ok, fail) => {
+            const f = new FileReader();
+            f.onload = () => ok(String(f.result));
+            f.onerror = () => fail(f.error);
+            f.readAsDataURL(blob);
+        });
+        const m = /^data:(image\/(?:png|jpeg|webp|gif));base64,(.*)$/.exec(data);
+        return m ? { media_type: m[1], data: m[2] } : null;
+    }
+    catch {
+        return null;
+    }
+}
+export function ImageCard({ step, image, mode, }) {
+    const [zoom, setZoom] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const alt = image.alt || step.title;
+    const withImage = async (then) => {
+        setBusy(true);
+        const img = await asReference(image.url);
+        setBusy(false);
+        if (img)
+            then(img);
+        else
+            lumenToast.error("That image couldn't be read. Try again.");
+    };
+    return (_jsxs("div", { className: "flex w-full min-w-0 flex-col gap-1.5", "data-slot": "chat-made-image", children: [_jsxs("div", { className: "relative w-full max-w-sm overflow-hidden rounded-lg border bg-muted", children: [_jsx("img", { src: image.url, alt: alt, className: "block w-full" }), _jsxs("div", { className: "absolute top-2 right-2 flex gap-1 rounded-lg border bg-popover/90 p-0.5 text-popover-foreground shadow-sm backdrop-blur-sm", children: [_jsx(IconButton, { icon: Maximize2Icon, label: "Zoom", onClick: () => setZoom(true) }), _jsx(IconButton, { icon: ImagePlusIcon, label: "Use as reference", disabled: busy, onClick: () => void withImage((img) => composeAssistant({ images: [img] })) }), _jsx(IconButton, { icon: DownloadIcon, label: "Download", onClick: () => {
+                                    const a = document.createElement('a');
+                                    a.href = image.url;
+                                    a.download = 'image.png';
+                                    a.click();
+                                } }), _jsx(IconButton, { icon: RefreshCwIcon, label: "Make another", disabled: busy, onClick: () => void withImage((img) => composeAssistant({
+                                    text: 'Make another version of this image.',
+                                    images: [img],
+                                    ...(mode ? { use: mode } : {}),
+                                    send: true,
+                                })) })] })] }), image.cost && _jsxs("span", { className: "text-muted-foreground text-xs", children: ["Image \u00B7 ", image.cost] }), _jsx(ImageLightbox, { src: image.url, alt: alt, open: zoom, onOpenChange: setZoom })] }));
+}
+/** The image tool's line while it runs. */
+export function ImagePending() {
+    return (_jsx("div", { className: "flex w-full min-w-0 flex-col gap-1.5", children: _jsxs("output", { className: "flex aspect-[400/260] w-full max-w-sm animate-pulse flex-col items-center justify-center gap-2 rounded-lg border border-dashed bg-muted/50 text-muted-foreground", children: [_jsx(ImageIcon, { className: "size-7", "aria-hidden": true }), _jsx("span", { className: "text-foreground text-sm", children: "Making the image" }), _jsx("span", { className: "text-xs", children: "Usually 10 to 20 s" })] }) }));
+}

package/dist/assistant/index.d.ts

@@ -1,5 +1,6 @@
 export { type AssistantAdapter, assistantClient } from './client.js';
-export { type AssistantCommand, type ComposerExtra, LumenAssistant, type LumenAssistantProps, LumenComposer, assistantStatusKey, useAssistantStatus, useLumenAssistantDock, } from './lumen-assistant.js';
+export { ChatImage } from './chat-image.js';
+export { type AssistantCommand, type AssistantMode, type ComposerExtra, LumenAssistant, type LumenAssistantProps, LumenComposer, assistantStatusKey, readAssistantImage, useAssistantStatus, useLumenAssistantDock, } from './lumen-assistant.js';
 export { assistantAdminSections, assistantSettingsSections } from './settings.js';
 export { UsageHistoryView, assistantUsageKey, tokens as formatTokens, usd as formatUsd, useAssistantUsage, } from './usage-history.js';
 export { type AssistantSource, type AssistantSourceItem, type ComposeRequest, type PageSelection, composeAssistant, selectionRef, useAssistantSource, usePageSelection, useShownAssistantSources, } from './sources.js';

package/dist/assistant/index.js

@@ -2,7 +2,8 @@
 // routes of `@columenlabs/lumen-ai/assistant`; the shapes both share are
 // `@columenlabs/lumen-ui-types/assistant`.
 export { assistantClient } from './client.js';
-export { LumenAssistant, LumenComposer, assistantStatusKey, useAssistantStatus, useLumenAssistantDock, } from './lumen-assistant.js';
+export { ChatImage } from './chat-image.js';
+export { LumenAssistant, LumenComposer, assistantStatusKey, readAssistantImage, useAssistantStatus, useLumenAssistantDock, } from './lumen-assistant.js';
 export { assistantAdminSections, assistantSettingsSections } from './settings.js';
 export { UsageHistoryView, assistantUsageKey, tokens as formatTokens, usd as formatUsd, useAssistantUsage, } from './usage-history.js';
 export { composeAssistant, selectionRef, useAssistantSource, usePageSelection, useShownAssistantSources, } from './sources.js';

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

@@ -1,4 +1,5 @@
-import { type AllowanceUnit, type AssistantImage, type AssistantMessage, type AssistantRefNote, type AssistantStatus } from '@columenlabs/lumen-ui-types/assistant';
+import { type AllowanceUnit, type AssistantImage, type AssistantMessage, type AssistantQuote, type AssistantRefNote, type AssistantStatus } from '@columenlabs/lumen-ui-types/assistant';
+import { type LucideIcon } from 'lucide-react';
 import { type LumenOption } from '../lumen-selector.js';
 import type { AssistantAdapter } from './client.js';
 import { type AssistantSource } from './sources.js';
@@ -43,6 +44,25 @@ export interface LumenAssistantProps {
      * until it is sent. Turn it on when the app's chat route passes `images` on to the agent.
      */
     images?: boolean;
+    /**
+     * Toggles beside the paperclip, one per mode ("Make an image"): one turned on goes with the next
+     * message as its `use`, and the app's plan reads it (call the tool that makes an image).
+     */
+    modes?: AssistantMode[];
+    /**
+     * The app's tool that makes images: while it runs its line is a "Making the image" box, and its
+     * card's Make another sends again with `mode` on.
+     */
+    imageTool?: {
+        tool: string;
+        mode?: string;
+    };
+}
+/** A composer mode: its toggle's icon and label (also its tooltip and aria-label). */
+export interface AssistantMode {
+    id: string;
+    icon: LucideIcon;
+    label: string;
 }
 /** A slash command: typing `/` in the composer lists them. */
 export interface AssistantCommand {
@@ -58,7 +78,7 @@ 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, chatScope, 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, modes, imageTool, }: 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 `@`. */
@@ -66,7 +86,14 @@ export interface ComposerExtra {
     tier?: string;
     refs?: AssistantRefNote[];
     images?: AssistantImage[];
+    quote?: AssistantQuote;
+    use?: string;
 }
+/**
+ * A pasted, dropped or picked image, ready to send: scaled to `IMAGE_EDGE` on a canvas and saved as JPEG
+ * (PNG when it has few pixels to lose), as base64. `null` when the browser cannot read it.
+ */
+export declare function readAssistantImage(file: File): Promise<AssistantImage | null>;
 /**
  * The message box: Enter sends, Shift+Enter breaks a line; Stop while an answer runs. While it
  * runs, words in the box go into it with Enter (Steer, where `canSteer`) or wait for it to end
@@ -75,7 +102,9 @@ export interface ComposerExtra {
  * 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, queue, canSteer, onSteerQueued, onUnqueue, disabled, commands, tiers, sources, page, images: canAttach, onSend, onStop, }: {
+export declare function LumenComposer({ name, busy, queued, queue, canSteer, onSteerQueued, onUnqueue, disabled, commands, tiers, sources, page, images: canAttach, modes, onSend, onStop, }: {
+    /** Toggles beside the paperclip (`LumenAssistant` `modes`). */
+    modes?: AssistantMode[];
     name: string;
     /** Images can be pasted or dropped on the box (`LumenAssistant` `images`). */
     images?: boolean;

package/dist/assistant/lumen-assistant.js

@@ -6,7 +6,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // with Stop, a queued message and the chat's cost and context under it.
 import { ASSISTANT_IMAGES_MAX, ASSISTANT_IMAGE_CHARS, } from '@columenlabs/lumen-ui-types/assistant';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { ArrowUpIcon, CheckIcon, ChevronRightIcon, CircleAlertIcon, CopyIcon, CornerDownRightIcon, CrosshairIcon, FileTextIcon, GlobeIcon, LightbulbIcon, ListPlusIcon, MonitorIcon, PencilIcon, PlusIcon, ReceiptIcon, RefreshCwIcon, SearchIcon, SparklesIcon, SquareIcon, TriangleAlertIcon, Undo2Icon, WrenchIcon, XIcon, ZapIcon, } from 'lucide-react';
+import { ArrowUpIcon, CheckIcon, ChevronRightIcon, CircleAlertIcon, CopyIcon, CornerDownRightIcon, CrosshairIcon, FileTextIcon, GlobeIcon, LightbulbIcon, ListPlusIcon, MonitorIcon, PaperclipIcon, PencilIcon, PlusIcon, ReceiptIcon, RefreshCwIcon, ReplyIcon, SearchIcon, SparklesIcon, SquareIcon, TriangleAlertIcon, Undo2Icon, WrenchIcon, XIcon, ZapIcon, } from 'lucide-react';
 import { Fragment, createContext, useContext, useEffect, useRef, useState, } from 'react';
 import { LumenAssistantButton, LumenAssistantChats, LumenAssistantPanel, assistantOpen, useAssistantHotkey, } from '../assistant-panel.js';
 import { screenMapFor, useAssistantScreen } from '../assistant-screen.js';
@@ -28,6 +28,8 @@ 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 { ImageCard, ImagePending, toolIs } from './image-card.js';
+import { ReplyToSelection } from './reply-selection.js';
 import { composeAssistant, selectionRef, useComposeRequest, usePageSelection, useShownAssistantSources, } from './sources.js';
 import { UsageHistoryView, tokens, usd } from './usage-history.js';
 import { useAssistantChat, } from './use-assistant-chat.js';
@@ -49,7 +51,7 @@ 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, chatScope, onClose, chat: outside, commands = [], sources = [], images = false, }) {
+export function LumenAssistant({ client, context, onSettings, keepDays = 30, chatScope, onClose, chat: outside, commands = [], sources = [], images = false, modes = [], imageTool, }) {
     const own = useAssistantChat(client);
     const chat = outside ?? own;
     const qc = useQueryClient();
@@ -190,10 +192,11 @@ export function LumenAssistant({ client, context, onSettings, keepDays = 30, cha
                             title: c.title,
                             updated_at: new Date(c.at).toISOString(),
                             ...(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, onRetry: (at, user) => chat.retry(at, user, extra()) }) }) }), _jsx(LumenComposer, { name: s?.name ?? 'the assistant', busy: chat.busy, queued: chat.queued, queue: chat.queue, canSteer: chat.canSteer, onSteerQueued: chat.steerQueued, onUnqueue: chat.unqueue, disabled: !s || !!s.wait, commands: allCommands, tiers: tiers, sources: allSources, page: context?.label, images: images, onSend: (text, more, how) => chat.send(text, { ...extra(), ...more }, how), onStop: chat.stop }), _jsx(UsageLine, { usage: chat.usage, client: client, spent: s?.spend.usd })] }));
+                        })) ?? (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(ImageTool.Provider, { value: imageTool ?? null, children: _jsx(Messages, { chat: chat, status: s, onSettings: onSettings, onRetry: (at, user) => chat.retry(at, user, extra()) }) }) }) }), _jsx(LumenComposer, { name: s?.name ?? 'the assistant', busy: chat.busy, queued: chat.queued, queue: chat.queue, canSteer: chat.canSteer, onSteerQueued: chat.steerQueued, onUnqueue: chat.unqueue, disabled: !s || !!s.wait, commands: allCommands, tiers: tiers, sources: allSources, page: context?.label, images: images, modes: modes, onSend: (text, more, how) => chat.send(text, { ...extra(), ...more }, how), onStop: chat.stop }), _jsx(UsageLine, { usage: chat.usage, client: client, spent: s?.spend.usd })] }));
 }
 function Messages({ chat, status, onSettings, onRetry, }) {
     const end = useRef(null);
+    const box = useRef(null);
     const count = JSON.stringify(chat.items).length;
     // biome-ignore lint/correctness/useExhaustiveDependencies: scroll to the end as the chat grows
     useEffect(() => {
@@ -202,7 +205,7 @@ function Messages({ chat, status, onSettings, onRetry, }) {
     // The app's own link to Settings, else the shell's, at the section that answers the wait.
     const shellSettings = useOpenSettings();
     const settings = onSettings ? (_section) => onSettings() : shellSettings;
-    return (_jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto px-3 py-3", children: [status?.wait && (_jsxs(Alert, { className: "mb-3", children: [_jsx(CircleAlertIcon, {}), _jsxs(AlertDescription, { className: "flex flex-col items-start gap-2", children: [status.wait === 'app_cap' && status.allowance
+    return (_jsxs("div", { ref: box, className: "relative min-h-0 flex-1 overflow-y-auto px-3 py-3", children: [_jsx(ReplyToSelection, { box: box }), status?.wait && (_jsxs(Alert, { className: "mb-3", children: [_jsx(CircleAlertIcon, {}), _jsxs(AlertDescription, { className: "flex flex-col items-start gap-2", children: [status.wait === 'app_cap' && status.allowance
                                 ? allowanceWait(status.allowance)
                                 : WAIT[status.wait](status.admin, status.providers.find((p) => p.id === status.wait_provider)?.label ?? 'API'), settings && (_jsx(Button, { size: "sm", variant: "outline", onClick: () => settings(status.wait === 'app_cap' && status.allowance
                                     ? 'assistant-allowance'
@@ -236,6 +239,8 @@ const AssistantName = createContext('Assistant');
 /** 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). */
+/** The app's image tool (`LumenAssistant` `imageTool`). */
+const ImageTool = createContext(null);
 const UndoWrite = createContext(null);
 /** Sends a failed turn again; null while it can't (an answer runs, nobody can pay). */
 const RetryTurn = createContext(null);
@@ -281,13 +286,13 @@ function Item({ item, onSettle, busy, }) {
         case 'user': {
             if (item.steered)
                 return (_jsxs("div", { className: "ml-8 flex flex-col items-end gap-0.5 self-end", children: [_jsxs("span", { className: "flex items-center gap-1 text-primary text-xs", children: [_jsx(CornerDownRightIcon, { className: "size-3" }), "Steered"] }), _jsx("div", { className: "rounded-lg border border-primary/40 bg-muted px-3 py-2 text-sm whitespace-pre-wrap break-words", children: item.text })] }));
-            const bubble = (_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] }))] }));
+            const bubble = (_jsxs("div", { "data-chat-from": "user", 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.quote && _jsx(QuoteLine, { quote: item.quote }), (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] }))] }));
             if (!item.retried)
                 return bubble;
             return (_jsxs("div", { className: "flex flex-col items-end gap-0.5 self-end", children: [_jsxs("span", { className: "flex items-center gap-1 text-primary text-xs", children: [_jsx(RefreshCwIcon, { className: "size-3" }), "Retry"] }), bubble] }));
         }
         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" }))] }));
+            return (_jsxs("div", { "data-chat-from": "assistant", 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':
             return _jsx(Step, { step: item, live: !!item.live });
         case 'draft':
@@ -398,6 +403,11 @@ function WebSources({ items }) {
     return (_jsx("ol", { "aria-label": "Sources", className: "flex min-w-0 flex-wrap gap-1.5", children: pages.map((p, n) => (_jsx("li", { className: "min-w-0 max-w-full", children: _jsxs("a", { href: p.url, target: "_blank", rel: "noopener noreferrer", title: p.title ? `${p.title} · ${p.url}` : p.url, className: "flex h-6 min-w-0 items-center gap-1.5 rounded-full border pr-2.5 pl-1 text-xs hover:bg-muted", children: [_jsx("span", { className: "grid size-4 shrink-0 place-items-center rounded-full bg-primary/15 font-medium text-primary text-xs tabular-nums", children: n + 1 }), _jsx("span", { className: "truncate", children: hostOf(p.url) })] }) }, p.url))) }));
 }
 function Step({ step, live }) {
+    const images = useContext(ImageTool);
+    if (step.image)
+        return _jsx(ImageCard, { step: step, image: step.image, mode: images?.mode });
+    if (live && images && toolIs(step.tool, images.tool))
+        return _jsx(ImagePending, {});
     if (step.web)
         return _jsx(WebStep, { step: step, live: live });
     return _jsx(ToolStep, { step: step, live: live });
@@ -512,13 +522,20 @@ const TIER = '#';
 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" }) }))] }));
 }
+/**
+ * A quote a message replies to: the reply icon and the quoted words. Over the box it is one line
+ * with an × (`onRemove`); in a sent message up to two lines. The whole text is in its hover.
+ */
+function QuoteLine({ quote, onRemove }) {
+    return (_jsxs("span", { "data-slot": "chat-quote", className: cn('flex min-w-0 items-start gap-1.5 rounded-md bg-background/60 px-2 py-1 text-muted-foreground text-xs whitespace-normal', onRemove ? 'mb-2 items-center bg-muted py-0.5 pr-0.5' : 'mb-1.5'), title: quote.text, children: [_jsx(ReplyIcon, { className: cn('size-3.5 shrink-0', !onRemove && 'mt-0.5'), "aria-hidden": true }), _jsx("span", { className: cn('min-w-0 flex-1', onRemove ? 'truncate' : 'line-clamp-2 break-words'), children: quote.text }), onRemove && (_jsx(IconButton, { icon: XIcon, label: "Remove quote", size: "icon-xs", onClick: onRemove }))] }));
+}
 /** The longest edge an image is sent at (what the models read best; larger only costs more). */
 const IMAGE_EDGE = 1568;
 /**
- * A pasted or dropped image, ready to send: scaled to `IMAGE_EDGE` on a canvas and saved as JPEG
+ * A pasted, dropped or picked image, ready to send: scaled to `IMAGE_EDGE` on a canvas and saved as JPEG
  * (PNG when it has few pixels to lose), as base64. `null` when the browser cannot read it.
  */
-async function readImage(file) {
+export async function readAssistantImage(file) {
     try {
         const bmp = await createImageBitmap(file);
         const k = Math.min(1, IMAGE_EDGE / Math.max(bmp.width, bmp.height));
@@ -551,15 +568,18 @@ const imageUrl = (i) => `data:${i.media_type};base64,${i.data}`;
  * 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, queue, canSteer = false, onSteerQueued, onUnqueue, disabled, commands = [], tiers = [], sources = [], page, images: canAttach = false, onSend, onStop, }) {
+export function LumenComposer({ name, busy, queued, queue, canSteer = false, onSteerQueued, onUnqueue, disabled, commands = [], tiers = [], sources = [], page, images: canAttach = false, modes = [], onSend, onStop, }) {
     const [text, setText] = useState('');
     const [caret, setCaret] = useState(0);
     const [closed, setClosed] = useState(null);
     const [tier, setTier] = useState(null);
     const [refs, setRefs] = useState([]);
     const [images, setImages] = useState([]);
+    const [quote, setQuote] = useState(null);
+    const [use, setUse] = useState(null);
     const list = useRef(null);
     const box = useRef(null);
+    const filePick = useRef(null);
     const selection = usePageSelection();
     // An app's compose request (`composeAssistant`): its chips and text, ready to finish.
     const [request, take] = useComposeRequest();
@@ -568,10 +588,24 @@ export function LumenComposer({ name, busy, queued, queue, canSteer = false, onS
         if (!request)
             return;
         take();
+        // Make another: sent at once, the box left as it is.
+        if (request.send && request.text) {
+            onSend(request.text, {
+                ...(request.images?.length ? { images: request.images } : {}),
+                ...(request.use ? { use: request.use } : {}),
+            });
+            return;
+        }
+        if (request.images?.length)
+            setImages((p) => [...p, ...(request.images ?? [])].slice(0, ASSISTANT_IMAGES_MAX));
+        if (request.use)
+            setUse(request.use);
         if (request.refs?.length)
             setRefs((p) => [...p, ...(request.refs ?? [])]);
         if (request.tier)
             setTier(request.tier);
+        if (request.quote)
+            setQuote(request.quote);
         if (request.text !== undefined) {
             setText(request.text);
             setCaret(request.text.length);
@@ -592,6 +626,8 @@ export function LumenComposer({ name, busy, queued, queue, canSteer = false, onS
         ...(tier ? { tier } : {}),
         ...(refs.length ? { refs } : {}),
         ...(images.length ? { images } : {}),
+        ...(quote ? { quote } : {}),
+        ...(use ? { use } : {}),
     });
     const clear = () => {
         setText('');
@@ -599,6 +635,8 @@ export function LumenComposer({ name, busy, queued, queue, canSteer = false, onS
         setTier(null);
         setRefs([]);
         setImages([]);
+        setQuote(null);
+        setUse(null);
     };
     /** Adds the image files among `files`; says so when one is left out. Returns whether any was an image. */
     const attach = (files) => {
@@ -606,7 +644,7 @@ export function LumenComposer({ name, busy, queued, queue, canSteer = false, onS
         if (!canAttach || !picked.length)
             return false;
         void (async () => {
-            const read = (await Promise.all(picked.map(readImage))).filter((x) => !!x);
+            const read = (await Promise.all(picked.map(readAssistantImage))).filter((x) => !!x);
             if (read.length < picked.length)
                 lumenToast.error("That image couldn't be read. Try a PNG or JPEG.");
             setImages((p) => {
@@ -662,6 +700,10 @@ export function LumenComposer({ name, busy, queued, queue, canSteer = false, onS
             setRefs(q.extra.refs);
         if (q.extra?.images?.length)
             setImages(q.extra.images);
+        if (q.extra?.quote)
+            setQuote(q.extra.quote);
+        if (q.extra?.use)
+            setUse(q.extra.use);
         requestAnimationFrame(() => box.current?.focus());
     };
     const waiting = queue ?? (queued ? [{ id: 'queued', message: queued }] : []);
@@ -825,7 +867,7 @@ export function LumenComposer({ name, busy, queued, queue, canSteer = false, onS
                     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: 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: cn('max-h-48 min-h-11 resize-none', busy && text.trim() && canSteer ? 'pr-18' : 'pr-11'), value: text, disabled: disabled, onChange: (e) => {
+                }, onClose: () => setClosed(`${text}|${caret}`) })), quote && _jsx(QuoteLine, { quote: quote, onRemove: () => setQuote(null) }), 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: cn('max-h-48 min-h-11 resize-none', busy && text.trim() && canSteer ? 'pr-18' : 'pr-11', (canAttach || modes.length > 0) && 'pb-9'), value: text, disabled: disabled, onChange: (e) => {
                             setText(e.target.value);
                             setCaret(e.target.selectionStart);
                         }, onSelect: (e) => setCaret(e.currentTarget.selectionStart), onPaste: (e) => {
@@ -845,7 +887,11 @@ export function LumenComposer({ name, busy, queued, queue, canSteer = false, onS
                                 e.preventDefault();
                                 send(e.altKey ? 'queue' : undefined);
                             }
-                        } }), _jsx("div", { className: "absolute right-1.5 bottom-1.5", children: busy && !text.trim() ? (_jsx(IconButton, { icon: SquareIcon, label: "Stop", variant: "outline", size: "icon-xs", onClick: onStop })) : busy ? (_jsxs("span", { className: "flex gap-1", children: [_jsx(IconButton, { icon: ListPlusIcon, label: canSteer ? 'Queue for after (⌥↩)' : 'Queue for after (↩)', variant: canSteer ? 'outline' : 'default', size: "icon-xs", disabled: disabled, onClick: () => send('queue') }), canSteer && (_jsx(IconButton, { icon: CornerDownRightIcon, label: "Steer now (\u21A9)", variant: "default", size: "icon-xs", disabled: disabled, onClick: () => send('steer') }))] })) : (_jsx(IconButton, { icon: ArrowUpIcon, label: "Send", variant: "default", size: "icon-xs", disabled: !text.trim() || disabled, onClick: () => send() })) })] })] }));
+                        } }), (canAttach || modes.length > 0) && (_jsxs("div", { className: "absolute bottom-1.5 left-1.5 flex items-center gap-0.5", children: [canAttach && (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: PaperclipIcon, label: "Attach images", size: "icon-xs", disabled: disabled, onClick: () => filePick.current?.click() }), _jsx("input", { ref: filePick, type: "file", accept: "image/*", multiple: true, hidden: true, onChange: (e) => {
+                                            if (e.target.files)
+                                                attach(e.target.files);
+                                            e.target.value = '';
+                                        } })] })), modes.map((md) => (_jsx(IconButton, { icon: md.icon, label: md.label, size: "icon-xs", variant: use === md.id ? 'secondary' : 'ghost', "aria-pressed": use === md.id, className: cn(use === md.id && 'text-primary'), disabled: disabled, onClick: () => setUse((u) => (u === md.id ? null : md.id)) }, md.id)))] })), _jsx("div", { className: "absolute right-1.5 bottom-1.5", children: busy && !text.trim() ? (_jsx(IconButton, { icon: SquareIcon, label: "Stop", variant: "outline", size: "icon-xs", onClick: onStop })) : busy ? (_jsxs("span", { className: "flex gap-1", children: [_jsx(IconButton, { icon: ListPlusIcon, label: canSteer ? 'Queue for after (⌥↩)' : 'Queue for after (↩)', variant: canSteer ? 'outline' : 'default', size: "icon-xs", disabled: disabled, onClick: () => send('queue') }), canSteer && (_jsx(IconButton, { icon: CornerDownRightIcon, label: "Steer now (\u21A9)", variant: "default", size: "icon-xs", disabled: disabled, onClick: () => send('steer') }))] })) : (_jsx(IconButton, { icon: ArrowUpIcon, label: "Send", variant: "default", size: "icon-xs", disabled: !text.trim() || disabled, onClick: () => send() })) })] })] }));
 }
 /**
  * What waits above the box while an answer runs: steering messages until the answer reads them,

package/dist/assistant/reply-selection.d.ts

@@ -0,0 +1,8 @@
+import { type RefObject } from 'react';
+/**
+ * The Reply bar over selected chat text. `box` is the chat's scrolling box, positioned; the bar
+ * sits in it, above the selection (below it when the top is out of view).
+ */
+export declare function ReplyToSelection({ box }: {
+    box: RefObject<HTMLElement | null>;
+}): import("react").JSX.Element | null;

package/dist/assistant/reply-selection.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Reply to a piece of the chat: text selected inside one message (the person's or the assistant's)
+// gets a small bar above it, Reply and Copy. Reply puts the selection over the composer as a quote
+// (`composeAssistant`), which goes with the next message.
+import { ASSISTANT_QUOTE_MAX } from '@columenlabs/lumen-ui-types/assistant';
+import { CopyIcon, ReplyIcon } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { IconButton } from '../icon-button.js';
+import { lumenToast } from '../lumen-toast.js';
+import { composeAssistant } from './sources.js';
+/** The bar's size, to keep it inside the chat's box. */
+const BAR_W = 72;
+const BAR_H = 40;
+/** The message (`data-chat-from`) a node sits in, when it is inside `box`. */
+function messageOf(node, box) {
+    const el = node instanceof Element ? node : node?.parentElement;
+    const m = el?.closest('[data-chat-from]') ?? null;
+    return m && box.contains(m) ? m : null;
+}
+/** The selection as a quote and where its bar goes in `box`, or null when it is not one message's text. */
+function pickedIn(box) {
+    const sel = document.getSelection();
+    if (!sel || sel.isCollapsed || !sel.rangeCount)
+        return null;
+    const from = messageOf(sel.anchorNode, box);
+    if (!from || from !== messageOf(sel.focusNode, box))
+        return null;
+    const text = sel.toString().trim().slice(0, ASSISTANT_QUOTE_MAX);
+    if (!text)
+        return null;
+    const r = sel.getRangeAt(0).getBoundingClientRect();
+    const b = box.getBoundingClientRect();
+    const above = r.top - b.top - BAR_H - 4;
+    const top = (above >= 0 ? above : r.bottom - b.top + 4) + box.scrollTop;
+    const mid = r.left - b.left + r.width / 2 - BAR_W / 2;
+    const left = Math.max(4, Math.min(mid, b.width - BAR_W - 4));
+    return {
+        quote: { text, from: from.dataset.chatFrom === 'user' ? 'user' : 'assistant' },
+        top,
+        left,
+    };
+}
+/**
+ * The Reply bar over selected chat text. `box` is the chat's scrolling box, positioned; the bar
+ * sits in it, above the selection (below it when the top is out of view).
+ */
+export function ReplyToSelection({ box }) {
+    const [picked, setPicked] = useState(null);
+    useEffect(() => {
+        let frame = 0;
+        const read = () => {
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(() => {
+                const el = box.current;
+                setPicked(el ? pickedIn(el) : null);
+            });
+        };
+        document.addEventListener('selectionchange', read);
+        return () => {
+            cancelAnimationFrame(frame);
+            document.removeEventListener('selectionchange', read);
+        };
+    }, [box]);
+    if (!picked)
+        return null;
+    const done = () => {
+        document.getSelection()?.removeAllRanges();
+        setPicked(null);
+    };
+    return (_jsxs("div", { role: "toolbar", "aria-label": "Selected text", className: "absolute z-10 flex gap-0.5 rounded-lg border bg-popover p-0.5 shadow-md", style: { top: picked.top, left: picked.left }, 
+        // A press on the bar keeps the selection.
+        onMouseDown: (e) => e.preventDefault(), children: [_jsx(IconButton, { icon: ReplyIcon, label: "Reply", onClick: () => {
+                    composeAssistant({ quote: picked.quote });
+                    done();
+                } }), _jsx(IconButton, { icon: CopyIcon, label: "Copy", onClick: () => {
+                    void navigator.clipboard.writeText(picked.quote.text).then(() => lumenToast.success('Copied'), () => lumenToast.error("Couldn't copy. Copy it with your keyboard instead."));
+                    done();
+                } })] }));
+}

package/dist/assistant/sources.d.ts

@@ -1,4 +1,4 @@
-import type { AssistantRefNote } from '@columenlabs/lumen-ui-types/assistant';
+import type { AssistantImage, AssistantQuote, 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`. */
 export interface AssistantSourceItem {
@@ -35,6 +35,14 @@ export interface ComposeRequest {
     text?: string;
     refs?: AssistantRefNote[];
     tier?: string;
+    /** A piece of the chat to reply to: it shows above the box with an ×. */
+    quote?: AssistantQuote;
+    /** Images to send with the message (an image card's Use as reference). */
+    images?: AssistantImage[];
+    /** A composer mode to turn on (`LumenAssistant` `modes`), by id. */
+    use?: string;
+    /** Send at once with `text`, leaving the box as it is (an image card's Make another). */
+    send?: boolean;
 }
 /**
  * Opens the assistant with `refs` as chips in its composer and `text` typed, focused for the person

package/dist/assistant/use-assistant-chat.js

@@ -192,6 +192,7 @@ export function useAssistantChat(client) {
                     at: Date.now(),
                     ...(extra?.context ? { context: extra.context.label } : {}),
                     ...(extra?.refs?.length ? { refs: extra.refs } : {}),
+                    ...(extra?.quote ? { quote: extra.quote } : {}),
                     ...(extra?.tier ? { tier: extra.tier } : {}),
                     ...(retried ? { retried: true } : {}),
                     ...(extra?.images?.length
@@ -311,6 +312,7 @@ export function useAssistantChat(client) {
         void run(user.text, {
             ...extra,
             ...(user.refs?.length ? { refs: user.refs } : {}),
+            ...(user.quote ? { quote: user.quote } : {}),
             ...(user.tier ? { tier: user.tier } : {}),
             ...(images.length ? { images } : {}),
         }, true);

package/dist/whats-new.d.ts

@@ -1,8 +1,13 @@
 import { type ReactNode } from 'react';
-export declare function WhatsNew({ api, apps, everyone, }: {
+export declare function WhatsNew({ api, apps, everyone, label, }: {
     api: string;
     /** Each app's chip label by id, in the order groups list them; left out: no app chips. */
     apps?: Record<string, ReactNode>;
     /** The chip of a takeaway about no one app. */
     everyone?: string;
+    /**
+     * Status-bar text that opens the notes (the app's version): no spark and no "What's new" words;
+     * the tooltip and aria-label still say What's new. Left out: the spark and those words.
+     */
+    label?: ReactNode;
 }): import("react").JSX.Element | null;

package/dist/whats-new.js

@@ -42,7 +42,7 @@ async function page(api, before) {
         throw new Error(`releases ${r.status}`);
     return (await r.json()).releases;
 }
-export function WhatsNew({ api, apps, everyone = 'Global', }) {
+export function WhatsNew({ api, apps, everyone = 'Global', label = null, }) {
     const [open, setOpen] = useState(false);
     const { timeZone } = usePrefs();
     const q = useInfiniteQuery({
@@ -53,13 +53,15 @@ export function WhatsNew({ api, apps, everyone = 'Global', }) {
         staleTime: 30 * 60_000,
         retry: false,
     });
-    // Hidden while loading, on an error, and when the host has no releases API (404).
-    if (!q.data || q.data.pages[0] === null)
+    // Hidden while loading, on an error, and when the host has no releases API (404). A label (the
+    // app's version) stays on the bar through that and opens the notes once they load.
+    const ready = !!q.data && q.data.pages[0] !== null;
+    if (!ready && label == null)
         return null;
-    const releases = q.data.pages.flatMap((p) => p ?? []);
+    const releases = ready ? (q.data?.pages.flatMap((p) => p ?? []) ?? []) : [];
     const latest = releases[0];
     const day = (at) => new Date(at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', timeZone });
-    return (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "ghost", size: "sm", className: "h-6 gap-1 px-1.5 text-muted-foreground text-xs", onClick: () => setOpen(true), title: latest ? `What's new · ${latest.tag}` : "What's new", "aria-label": "What's new", children: [_jsx(SparklesIcon, { className: "size-3.5" }), _jsx("span", { className: "max-md:hidden", children: "What's new" })] }), _jsxs(LumenDrawer, { open: open, onClose: () => setOpen(false), title: "What's new", description: "Key takeaways of each release, newest first", footerStart: releases.length ? `${releases.length} releases` : undefined, footer: _jsxs(_Fragment, { children: [q.hasNextPage && (_jsx(Button, { variant: "outline", size: "sm", disabled: q.isFetchingNextPage, onClick: () => q.fetchNextPage(), children: "Show more" })), _jsx(Button, { size: "sm", onClick: () => setOpen(false), children: "Close" })] }), children: [!releases.length && (_jsx("p", { className: "py-2 text-muted-foreground text-sm", children: "No releases yet. Each release's key takeaways show here once it ships." })), releases.map((r, i) => (_jsx(DrawerSection, { title: r.tag, hint: day(r.published_at), defaultOpen: i === 0, children: r.takeaways.length ? (_jsx(Notes, { takeaways: r.takeaways, apps: apps, everyone: everyone })) : (_jsx("p", { className: "py-1 pl-1 text-muted-foreground text-sm", children: "Nothing new for you in this one." })) }, r.tag)))] })] }));
+    return (_jsxs(_Fragment, { children: [label != null ? (_jsx("button", { type: "button", className: "-mx-1 flex-none rounded px-1 tabular-nums hover:bg-muted hover:text-foreground", onClick: () => ready && setOpen(true), title: "What's new", "aria-label": "What's new", children: label })) : (_jsxs(Button, { variant: "ghost", size: "sm", className: "h-6 gap-1 px-1.5 text-muted-foreground text-xs", onClick: () => setOpen(true), title: latest ? `What's new · ${latest.tag}` : "What's new", "aria-label": "What's new", children: [_jsx(SparklesIcon, { className: "size-3.5" }), _jsx("span", { className: "max-md:hidden", children: "What's new" })] })), _jsxs(LumenDrawer, { open: open, onClose: () => setOpen(false), title: "What's new", description: "Key takeaways of each release, newest first", footerStart: releases.length ? `${releases.length} releases` : undefined, footer: _jsxs(_Fragment, { children: [q.hasNextPage && (_jsx(Button, { variant: "outline", size: "sm", disabled: q.isFetchingNextPage, onClick: () => q.fetchNextPage(), children: "Show more" })), _jsx(Button, { size: "sm", onClick: () => setOpen(false), children: "Close" })] }), children: [!releases.length && (_jsx("p", { className: "py-2 text-muted-foreground text-sm", children: "No releases yet. Each release's key takeaways show here once it ships." })), releases.map((r, i) => (_jsx(DrawerSection, { title: r.tag, hint: day(r.published_at), defaultOpen: i === 0, children: r.takeaways.length ? (_jsx(Notes, { takeaways: r.takeaways, apps: apps, everyone: everyone })) : (_jsx("p", { className: "py-1 pl-1 text-muted-foreground text-sm", children: "Nothing new for you in this one." })) }, r.tag)))] })] }));
 }
 /** One release's takeaways: a flat list, or one sub-section per app once one app has many. */
 function Notes({ takeaways, apps, everyone, }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.225",
+  "version": "0.1.227",
   "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.225",
+    "@columenlabs/lumen-ui-types": "0.1.227",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",