@columenlabs/lumen-ui 0.1.190 → 0.1.192

package/dist/assistant/copy.js

@@ -56,6 +56,8 @@ function itemMarkdown(i, depth, name) {
             ]
                 .filter(Boolean)
                 .join('\n\n');
+        case 'screen':
+            return `_Screen: ${i.label}${i.outcome ? ` (${i.outcome.status})` : ''}._`;
         case 'handoff':
             return [
                 `${h} ${i.label} (${i.why})`,

package/dist/assistant/lumen-assistant.js

@@ -1,8 +1,9 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { ArrowUpIcon, CheckIcon, ChevronRightIcon, CircleAlertIcon, CopyIcon, CornerDownRightIcon, CrosshairIcon, FileTextIcon, LightbulbIcon, PencilIcon, PlusIcon, SparklesIcon, SquareIcon, Undo2Icon, WrenchIcon, XIcon, } from 'lucide-react';
+import { ArrowUpIcon, CheckIcon, ChevronRightIcon, CircleAlertIcon, CopyIcon, CornerDownRightIcon, CrosshairIcon, FileTextIcon, LightbulbIcon, MonitorIcon, PencilIcon, PlusIcon, SparklesIcon, SquareIcon, TriangleAlertIcon, Undo2Icon, WrenchIcon, XIcon, } from 'lucide-react';
 import { createContext, useContext, useEffect, useRef, useState } from 'react';
 import { LumenAssistantButton, LumenAssistantChats, LumenAssistantPanel, assistantOpen, useAssistantHotkey, } from '../assistant-panel.js';
+import { screenMapFor, useAssistantScreen } from '../assistant-screen.js';
 import { IconButton } from '../icon-button.js';
 import { errorText } from '../integrations.js';
 import { lazyPart } from '../lazy-part.js';
@@ -68,6 +69,43 @@ export function LumenAssistant({ client, context, onSettings, keepDays = 30, onC
             lumenToast.error(errorText(e));
         }
     };
+    // The assistant moves the screen (Settings ▸ Screen): the page map goes with each message, and
+    // each new screen call runs here once; how it ended goes with the next message.
+    const screen = useAssistantScreen();
+    const screenOn = !!screen && (s?.screen ?? 'move') === 'move';
+    const extra = () => ({
+        ...(context ? { context } : {}),
+        ...(screenOn && screen ? { screen: screenMapFor(screen) } : {}),
+    });
+    const ran = useRef(new Set());
+    const ended = chat.screenEnded;
+    useEffect(() => {
+        for (const i of screenCalls(chat.items)) {
+            if (!i.live || ran.current.has(i.id))
+                continue;
+            ran.current.add(i.id);
+            if (!screen) {
+                ended({ id: i.id, status: 'failed', text: 'this page cannot be moved' });
+                continue;
+            }
+            void screen.run(i.id, i.moves).then((o) => {
+                ended({ id: i.id, ...o });
+                // On a phone the panel covers the page: it steps aside so the move shows.
+                if (o.status === 'done' && onClose && window.matchMedia('(max-width: 767px)').matches)
+                    onClose();
+            });
+        }
+    }, [chat.items, screen, ended, onClose]);
+    const controls = screen
+        ? {
+            canUndo: (id) => screen.canUndo(id),
+            undo: (id) => void screen.undo(id).then((o) => ended({ id, ...o })),
+            go: (item) => {
+                ran.current.add(item.id);
+                void screen.run(item.id, item.moves, true).then((o) => ended({ id: item.id, ...o }));
+            },
+        }
+        : null;
     const tiers = s?.tiers ?? [];
     const above = tiers.slice(tiers.findIndex((t) => t.id === s?.tier) + 1);
     // The kit's commands; the app's own (`commands`, then the server's) come first and win a name.
@@ -121,7 +159,7 @@ export function LumenAssistant({ client, context, onSettings, keepDays = 30, onC
                     args: '<task>',
                     run: (task) => {
                         if (task.trim())
-                            chat.send(task, { ...(context ? { context } : {}), tier: above[0]?.id });
+                            chat.send(task, { ...extra(), tier: above[0]?.id });
                         return undefined;
                     },
                 },
@@ -142,7 +180,7 @@ export function LumenAssistant({ client, context, onSettings, keepDays = 30, onC
                             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(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, onSend: (text, extra) => chat.send(text, { ...(context ? { context } : {}), ...extra }), onStop: chat.stop }), _jsx(UsageLine, { usage: chat.usage })] }));
+                        })) ?? (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, onSend: (text, more) => chat.send(text, { ...extra(), ...more }), onStop: chat.stop }), _jsx(UsageLine, { usage: chat.usage })] }));
 }
 function Messages({ chat, status, onSettings, }) {
     const end = useRef(null);
@@ -223,6 +261,8 @@ function Item({ item, onSettle, busy, }) {
             return _jsx(Step, { step: item, live: !!item.live });
         case 'draft':
             return _jsx(Draft, { draft: item, onSettle: onSettle, busy: busy });
+        case 'screen':
+            return _jsx(ScreenChip, { item: item });
         case 'handoff':
             return _jsx(HandOff, { item: item, onSettle: onSettle, busy: busy });
         case 'advice':
@@ -239,6 +279,40 @@ function Item({ item, onSettle, busy, }) {
             return (_jsxs("p", { role: "alert", className: "flex items-start gap-1.5 text-loss text-sm", children: [_jsx(CircleAlertIcon, { className: "mt-0.5 size-4 shrink-0" }), item.text] }));
     }
 }
+/** Every screen call in the chat, hand-off sections included. */
+function screenCalls(items) {
+    return items.flatMap((i) => i.kind === 'screen' ? [i] : i.kind === 'handoff' ? screenCalls(i.items) : []);
+}
+const Screen = createContext(null);
+/** A screen call's moves in words, for the chip's hover. */
+const movesText = (moves) => moves
+    .map((m) => 'go' in m
+    ? `Go to ${m.go}`
+    : 'settings' in m
+        ? `Settings ▸ ${m.settings}${m.row ? ` ▸ ${m.row}` : ''}`
+        : 'chart' in m
+            ? `Chart ${[m.chart].flat().join(', ')}`
+            : 'open' in m
+                ? `Open ${m.open}`
+                : `Point at ${m.point.replace(/^card:/, '')}`)
+    .join(' · ');
+/**
+ * A screen call in the chat: ✓ and what is on screen, with Undo; why it failed; or, while the
+ * person was mid-edit, Go now.
+ */
+function ScreenChip({ item }) {
+    const c = useContext(Screen);
+    // No outcome and not running: it ran in another tab or before a reload, which kept no result.
+    const status = item.outcome?.status ?? (item.live ? 'running' : 'sent');
+    const said = status === 'failed'
+        ? `Couldn't move · ${item.outcome?.text ?? ''}`
+        : status === 'waiting'
+            ? 'Waits while you edit'
+            : status === 'undone'
+                ? 'Undone'
+                : null;
+    return (_jsxs("div", { "data-slot": "assistant-screen", "data-status": status, className: "flex min-w-0 items-center gap-2 rounded-lg border bg-muted/30 px-3 py-1.5 text-muted-foreground text-xs", children: [status === 'running' ? (_jsx(Spinner, { className: "size-3.5" })) : status === 'done' ? (_jsx(CheckIcon, { className: "size-3.5 shrink-0 text-edge" })) : status === 'failed' ? (_jsx(TriangleAlertIcon, { className: "size-3.5 shrink-0 text-loss" })) : status === 'undone' ? (_jsx(Undo2Icon, { className: "size-3.5 shrink-0" })) : (_jsx(MonitorIcon, { className: "size-3.5 shrink-0" })), _jsxs("span", { className: "min-w-0 flex-1 truncate", title: `${item.label} · ${movesText(item.moves)}`, children: [_jsx("span", { className: cn(status === 'undone' ? 'line-through' : 'text-foreground'), children: item.label }), said && _jsxs("span", { children: [" \u00B7 ", said] })] }), status === 'done' && c?.canUndo(item.id) && (_jsx(IconButton, { icon: Undo2Icon, label: "Undo", size: "icon-xs", onClick: () => c.undo(item.id) })), status === 'waiting' && c && (_jsx(IconButton, { icon: MonitorIcon, label: "Go now", variant: "outline", size: "icon-xs", onClick: () => c.go(item) }))] }));
+}
 const Rule = ({ children }) => (_jsx("p", { className: "flex items-center gap-2 text-muted-foreground text-xs before:h-px before:flex-1 before:bg-border after:h-px after:flex-1 after:bg-border", children: children }));
 function Step({ step, live }) {
     const undo = useContext(UndoWrite);

package/dist/assistant/settings.js

@@ -85,7 +85,10 @@ function General({ client }) {
                                     value: t.id,
                                     label: t.label,
                                 })),
-                            ], onChange: (advice) => void set({ advice }) }) }))] }));
+                            ], onChange: (advice) => void set({ advice }) }) })), _jsx(Row, { label: "Screen", info: "Takes you to a page, a Settings row, a chart or a card when you ask. Each move has an Undo; nothing is saved.", children: _jsx(LumenSelector, { label: "Screen", size: "sm", className: "w-44", value: s.screen ?? 'move', options: [
+                                { value: 'move', label: 'Move' },
+                                { value: 'off', label: 'Off' },
+                            ], onChange: (screen) => void set({ screen: screen }) }) })] }));
         } }));
 }
 // ---------------------------------------------------------------- model providers

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

@@ -1,4 +1,4 @@
-import type { AssistantEvent, AssistantMessage, ChatItem, ChatUsage, DraftItem, StepItem } from '@columenlabs/lumen-ui-types/assistant';
+import type { AssistantEvent, AssistantMessage, AssistantScreenOutcome, ChatItem, ChatUsage, DraftItem, StepItem } from '@columenlabs/lumen-ui-types/assistant';
 import type { AssistantAdapter } from './client.js';
 /** An item as the panel draws it: a text still streaming, a step still running. */
 export type LiveItem = ChatItem & {
@@ -22,6 +22,8 @@ export interface AssistantChatState {
     settle: (draft: DraftItem, action: 'save' | 'dismiss') => Promise<void>;
     /** Takes back a change the assistant made at once (Undo on its line). */
     undo: (step: StepItem) => Promise<void>;
+    /** A screen call ended in the browser: shown on its chip, and sent with the next message. */
+    screenEnded: (outcome: AssistantScreenOutcome) => void;
 }
 /** A copy of the items with one event applied (hand-off sections copied too). */
 export declare function applyEvent(prev: LiveItem[], e: AssistantEvent): LiveItem[];

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

@@ -9,6 +9,27 @@ function browserZone() {
         return undefined;
     }
 }
+// Screen calls' outcomes not yet sent (they go with the next message), kept for this tab so a
+// reload neither loses them nor leaves their chips without a result.
+const SCREEN_KEY = 'lumen-assistant:screen';
+function readOutcomes() {
+    try {
+        const m = new Map(JSON.parse(sessionStorage.getItem(SCREEN_KEY) ?? '[]'));
+        return m;
+    }
+    catch {
+        return new Map();
+    }
+}
+function keepOutcomes(m) {
+    try {
+        if (m.size)
+            sessionStorage.setItem(SCREEN_KEY, JSON.stringify([...m].slice(-50)));
+        else
+            sessionStorage.removeItem(SCREEN_KEY);
+    }
+    catch { }
+}
 /** Where an event lands: the chat, or the last hand-off section when it came from inside one. */
 function sinkOf(items, handoff) {
     if (!handoff)
@@ -62,6 +83,12 @@ export function applyEvent(prev, e) {
             sink.push(draft);
             break;
         }
+        case 'screen': {
+            // Live until the browser runs it: the panel runs a screen call once, while it is new.
+            const { handoff: _h, ...call } = e.data;
+            sink.push({ ...call, live: true });
+            break;
+        }
         case 'handoff':
             items.push({ ...e.data, items: [] });
             break;
@@ -102,11 +129,14 @@ export function applyEvent(prev, e) {
     }
     return items;
 }
-/** Nothing streams any more: a text or step cut by Stop ends where it was. */
+/**
+ * Nothing streams any more: a text or step cut by Stop ends where it was. A screen call stays live
+ * until the browser has run it (`screenEnded`).
+ */
 const settled = (items) => items.map((i) => {
     if (i.kind === 'handoff')
         return { ...i, items: settled(i.items) };
-    if (!i.live)
+    if (!i.live || i.kind === 'screen')
         return i;
     const { live: _l, ...rest } = i;
     return rest;
@@ -120,6 +150,8 @@ export function useAssistantChat(client) {
     const [loading, setLoading] = useState(false);
     const [queued, setQueued] = useState(null);
     const abort = useRef(null);
+    const outcomes = useRef(null);
+    outcomes.current ??= readOutcomes();
     const idRef = useRef(null);
     idRef.current = chatId;
     const run = useCallback(async (message, extra) => {
@@ -138,12 +170,17 @@ export function useAssistantChat(client) {
                     ...(extra?.tier ? { tier: extra.tier } : {}),
                 },
             ]);
+        // Every screen outcome not yet sent goes with this message; kept again if it fails.
+        const sent = [...(outcomes.current?.values() ?? [])];
+        outcomes.current?.clear();
+        keepOutcomes(new Map());
         try {
             await client.send({
                 message,
                 ...(idRef.current ? { chat_id: idRef.current } : {}),
                 ...(browserZone() ? { time_zone: browserZone() } : {}),
                 ...extra,
+                ...(sent.length ? { outcomes: sent } : {}),
             }, (e) => {
                 if (e.event === 'chat') {
                     idRef.current = e.data.id;
@@ -159,6 +196,11 @@ export function useAssistantChat(client) {
             }, ctl.signal);
         }
         catch (err) {
+            for (const o of sent)
+                if (!outcomes.current?.has(o.id))
+                    outcomes.current?.set(o.id, o);
+            if (outcomes.current)
+                keepOutcomes(outcomes.current);
             if (ctl.signal.aborted)
                 setItems((p) => [...p, { kind: 'stopped' }]);
             else
@@ -205,7 +247,14 @@ export function useAssistantChat(client) {
             idRef.current = c.id;
             setChatId(c.id);
             setTitle(c.title);
-            setItems(c.items);
+            // A call that ended here but whose outcome is not sent yet shows it already.
+            const kept = outcomes.current ?? new Map();
+            setItems(c.items.map((i) => {
+                const o = i.kind === 'screen' && !i.outcome ? kept.get(i.id) : undefined;
+                return o && i.kind === 'screen'
+                    ? { ...i, outcome: { status: o.status, ...(o.text ? { text: o.text } : {}) } }
+                    : i;
+            }));
             setUsage(c.usage ?? null);
         }
         catch (err) {
@@ -236,6 +285,18 @@ export function useAssistantChat(client) {
             return;
         replace(await client.undoWrite(id, step.id));
     }, [client, replace]);
+    const screenEnded = useCallback((o) => {
+        outcomes.current?.set(o.id, o);
+        if (outcomes.current)
+            keepOutcomes(outcomes.current);
+        const outcome = { status: o.status, ...(o.text ? { text: o.text } : {}) };
+        const mark = (list) => list.map((i) => i.kind === 'screen' && i.id === o.id
+            ? { kind: 'screen', id: i.id, label: i.label, moves: i.moves, outcome }
+            : i.kind === 'handoff'
+                ? { ...i, items: mark(i.items) }
+                : i);
+        setItems(mark);
+    }, []);
     return {
         chatId,
         title,
@@ -250,5 +311,6 @@ export function useAssistantChat(client) {
         reset,
         settle,
         undo,
+        screenEnded,
     };
 }

package/dist/assistant-screen.d.ts

@@ -1,3 +1,4 @@
+import type { AssistantScreenMap, AssistantScreenMove, AssistantScreenStatus } from '@columenlabs/lumen-ui-types/assistant';
 import type { IndicatorSpec } from '@columenlabs/lumen-ui-types/chart-formula';
 import { type ReactNode } from 'react';
 import { type CardOnScreen } from './spotlight.js';
@@ -28,20 +29,8 @@ export interface AssistantMoveHandlers {
     restore?: (snap: unknown) => void;
 }
 /** One move, as the server checked it. */
-export type AssistantMove = {
-    go: string;
-} | {
-    settings: string;
-    row?: string;
-} | {
-    chart: string | string[];
-    indicators?: IndicatorSpec[];
-} | {
-    open: string;
-} | {
-    point: string;
-};
-export type ScreenStatus = 'done' | 'failed' | 'waiting' | 'undone';
+export type AssistantMove = AssistantScreenMove;
+export type ScreenStatus = AssistantScreenStatus;
 export interface ScreenOutcome {
     status: ScreenStatus;
     text?: string;
@@ -86,7 +75,7 @@ export interface ScreenMap {
     cards: CardOnScreen[];
     workspace?: WorkspaceOnScreen;
 }
-interface ScreenApi {
+export interface ScreenApi {
     register: (slot: string, h: AssistantMoveHandlers | null) => void;
     pages: (key: string, items: AssistantPage[] | null) => void;
     /** The workspace page says which workspace and tabs are on screen while it shows. */
@@ -121,4 +110,8 @@ export declare function useAssistantPages(items: {
 export declare function AssistantScreenProvider({ children }: {
     children: ReactNode;
 }): import("react").JSX.Element;
-export {};
+/**
+ * The page map as the assistant's server reads it (`AssistantMessage.screen`): routes, named pages,
+ * Settings sections, the cards on screen and the rows the view can open.
+ */
+export declare function screenMapFor(api: ScreenApi): AssistantScreenMap;

package/dist/assistant-screen.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useRouter } from '@tanstack/react-router';
 import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, } from 'react';
 import { cardsOnScreen } from './spotlight.js';
@@ -88,6 +88,31 @@ const here = () => `${window.location.pathname}${window.location.search}${window
 const cardOf = (id) => document.querySelector(`[data-slot="lumen-card"][data-card="${CSS.escape(id)}"]`);
 /** Holds what each part of the screen takes, and runs the assistant's moves over them. */
 export function AssistantScreenProvider({ children }) {
+    // One per app: a shell inside an app's own provider uses that one.
+    if (useContext(ScreenCtx))
+        return _jsx(_Fragment, { children: children });
+    return _jsx(ScreenProvider, { children: children });
+}
+/**
+ * The page map as the assistant's server reads it (`AssistantMessage.screen`): routes, named pages,
+ * Settings sections, the cards on screen and the rows the view can open.
+ */
+export function screenMapFor(api) {
+    const m = api.map();
+    const rows = api.can()?.rows ?? [];
+    return {
+        routes: m.routes,
+        pages: m.pages.map((p) => ({
+            path: p.path,
+            title: p.title,
+            ...(p.section ? { section: p.section } : {}),
+        })),
+        settings: m.settings,
+        cards: m.cards.map((c) => ({ id: c.id, title: c.title, kind: c.kind })),
+        ...(rows.length ? { rows } : {}),
+    };
+}
+function ScreenProvider({ children }) {
     const router = useRouter();
     const slots = useRef(new Map());
     const navPages = useRef(new Map());

package/dist/index.d.ts

@@ -102,7 +102,7 @@ export { useTell } from './hooks/use-tell.js';
 export { useBackClose } from './hooks/use-back-close.js';
 export { VIEW_ICONS, iconOf, viewIcon } from './view-icons.js';
 export { type AppViewState, useAppView } from './app-views.js';
-export { type ScreenMap, type ScreenOutcome, type ScreenStatus, type WorkspaceOnScreen, type AssistantMove, type AssistantMoveHandlers, type AssistantPage, type AssistantPageType, AssistantScreenProvider, useAssistantMoves, useAssistantPages, useAssistantScreen, useAssistantWorkspace, } from './assistant-screen.js';
+export { type ScreenApi, type ScreenMap, type ScreenOutcome, type ScreenStatus, type WorkspaceOnScreen, type AssistantMove, type AssistantMoveHandlers, type AssistantPage, type AssistantPageType, AssistantScreenProvider, screenMapFor, useAssistantMoves, useAssistantPages, useAssistantScreen, useAssistantWorkspace, } from './assistant-screen.js';
 export { type AssistantActions, AssistantContext, type AssistantNote, type AssistantRef, type AssistantSlot, useAssistant, AssistantPendingContext, useAssistantName, useAssistantNote, useAssistantPending, } from './assistant-context.js';
 export { WORKSPACES_KEY, frameKey, workspacesListQuery } from './workspace-keys.js';
 export { type WorkspaceApp, type WorkspaceDraftProps, WorkspacePage, type WorkspaceRecipe, type WorkspacesConfig, WorkspacesProvider, WorkspacesSection, } from './workspaces.js';

package/dist/index.js

@@ -109,7 +109,7 @@ export { useTell } from './hooks/use-tell.js';
 export { useBackClose } from './hooks/use-back-close.js';
 export { VIEW_ICONS, iconOf, viewIcon } from './view-icons.js';
 export { useAppView } from './app-views.js';
-export { AssistantScreenProvider, useAssistantMoves, useAssistantPages, useAssistantScreen, useAssistantWorkspace, } from './assistant-screen.js';
+export { AssistantScreenProvider, screenMapFor, useAssistantMoves, useAssistantPages, useAssistantScreen, useAssistantWorkspace, } from './assistant-screen.js';
 export { AssistantContext, useAssistant, AssistantPendingContext, useAssistantName, useAssistantNote, useAssistantPending, } from './assistant-context.js';
 export { WORKSPACES_KEY, frameKey, workspacesListQuery } from './workspace-keys.js';
 export { WorkspacePage, WorkspacesProvider, WorkspacesSection, } from './workspaces.js';

package/dist/setting-parts.js

@@ -18,7 +18,9 @@ import { InputGroup, InputGroupAddon, InputGroupButton } from './ui/input-group.
 import { Label } from './ui/label.js';
 /** One setting inside an item: its label, then its control group, then an optional switch at the end. */
 export function SettingField({ label, info, htmlFor, end, stack = false, className, children, }) {
-    return (_jsxs("div", { "data-slot": "setting-field", "data-stack": stack || undefined, className: cn('flex min-h-10 min-w-0 items-center gap-3 border-t border-border/60 py-1.5 first:border-t-0', stack && 'max-sm:flex-wrap max-sm:gap-y-1.5', className), children: [_jsxs("div", { className: cn('flex w-32 shrink-0 items-center gap-1.5 max-sm:w-24', stack && 'max-sm:w-auto max-sm:flex-1'), children: [_jsx(Label, { htmlFor: htmlFor, className: "truncate font-normal text-muted-foreground", title: label, children: label }), info && _jsx(InfoTip, { label: `About ${label}`, children: info })] }), children !== undefined && (_jsx("div", { className: cn('flex min-w-0 max-w-md flex-1 items-center gap-2', stack && 'max-sm:order-2 max-sm:max-w-none max-sm:basis-full'), children: children })), end && _jsx("div", { className: cn('ml-auto shrink-0', stack && 'max-sm:order-1'), children: end })] }));
+    return (_jsxs("div", { "data-slot": "setting-field", "data-stack": stack || undefined, className: cn('flex min-h-10 min-w-0 items-center gap-3 border-t border-border/60 py-1.5 first:border-t-0', stack && 'max-sm:flex-wrap max-sm:gap-y-1.5', className), children: [_jsxs("div", { className: cn('flex w-32 shrink-0 items-center gap-1.5 max-sm:w-24', stack && 'max-sm:w-auto max-sm:flex-1', 
+                // Nothing beside it but `end`: the label takes the row, so a short name never cuts off.
+                children === undefined && 'w-auto min-w-0 flex-1 shrink max-sm:w-auto'), children: [_jsx(Label, { htmlFor: htmlFor, className: "truncate font-normal text-muted-foreground", title: label, children: label }), info && _jsx(InfoTip, { label: `About ${label}`, children: info })] }), children !== undefined && (_jsx("div", { className: cn('flex min-w-0 max-w-md flex-1 items-center gap-2', stack && 'max-sm:order-2 max-sm:max-w-none max-sm:basis-full'), children: children })), end && _jsx("div", { className: cn('ml-auto shrink-0', stack && 'max-sm:order-1'), children: end })] }));
 }
 /** A value read in place: cut to one line with the full text on hover, with Copy and Replace inside. */
 export function SettingValue({ value, label, mono = false, copy = false, onReplace, replaceLabel = 'Replace', replaceIcon: ReplaceIcon = PencilIcon, }) {

package/dist/shell.js

@@ -7,6 +7,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useRouterState } from '@tanstack/react-router';
 import { ChevronsUpDownIcon, LogOutIcon, ScrollTextIcon, SettingsIcon, SunMoonIcon, } from 'lucide-react';
 import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+import { AssistantScreenProvider } from './assistant-screen.js';
 import { lazyPart } from './lazy-part.js';
 import { cn } from './lib/utils.js';
 import { LumenFinder } from './lumen-finder.js';
@@ -133,18 +134,18 @@ export function LumenShell({ app, appLabel, brand, nav, tabs, bar, status, healt
         title: s.title,
     })));
     const findSettings = useMemo(() => JSON.parse(sectionNames), [sectionNames]);
-    return (_jsx(Ctx.Provider, { value: {
-            app,
-            appLabel,
-            statusSlot,
-            openSettings,
-            closeSettings: () => setSettingsAt(null),
-            hasSettings: (section) => findSettings.some((s) => s.id === section),
-            refresh: onRefresh ? refresh : null,
-            refreshing,
-            hideAmounts,
-            headerActions,
-        }, children: _jsx(StatusBarProvider, { children: _jsx(DockSlot.Provider, { value: dockSlot, children: _jsx(StatusSignals, { app: app, model: bar, openSettings: openSettings, children: _jsx(SourceHealthProvider, { children: wrap(_jsx(TooltipProvider, { delayDuration: 200, children: _jsx(SidebarProvider, { defaultOpen: sidebarOpen(), children: _jsxs(LumenFinder, { app: app, settings: findSettings, openSettings: openSettings, config: finder, children: [_jsx(CloseDrawerOnNavigate, {}), _jsxs(Sidebar, { collapsible: "icon", children: [_jsx(SidebarHeader, { children: brand }), _jsx(SidebarContent, { children: nav }), _jsx(SidebarFooter, { children: _jsx(NavUser, { who: user, signOutUrl: signOutUrl, onSettings: () => openSettings(), onLogs: onLogs }) }), _jsx(SidebarRail, {})] }), _jsxs(SidebarInset, { className: "flex min-h-svh min-w-0 flex-col", children: [_jsx(SignalBanners, {}), _jsx("div", { className: "flex min-w-0 flex-1 flex-col", children: children }, epoch), _jsx(LumenStatusBar, { app: app, model: bar, legacy: status, slot: setStatusSlot, end: _jsxs(_Fragment, { children: [health, releases && _jsx(WhatsNew, { api: releases, apps: releaseApps }), statusEnd, _jsx(StatusTimeZone, {})] }) }), tabs && _jsx(LumenTabBar, { items: tabs })] }), _jsx("div", { ref: setDockSlot, "data-slot": "shell-dock", className: "contents" }), panel, _jsx(LumenSettings, { open: settingsAt !== null, section: settingsAt ?? lastSection, onOpen: openSettings, onClose: () => setSettingsAt(null), appLabel: appLabel, profile: profile, security: security, sections: settings, shared: shared, sharedLabel: sharedLabel, groups: settingsGroups }), _jsx(Toaster, { position: "bottom-right" })] }) }) })) }) }) }) }) }));
+    return (_jsx(AssistantScreenProvider, { children: _jsx(Ctx.Provider, { value: {
+                app,
+                appLabel,
+                statusSlot,
+                openSettings,
+                closeSettings: () => setSettingsAt(null),
+                hasSettings: (section) => findSettings.some((s) => s.id === section),
+                refresh: onRefresh ? refresh : null,
+                refreshing,
+                hideAmounts,
+                headerActions,
+            }, children: _jsx(StatusBarProvider, { children: _jsx(DockSlot.Provider, { value: dockSlot, children: _jsx(StatusSignals, { app: app, model: bar, openSettings: openSettings, children: _jsx(SourceHealthProvider, { children: wrap(_jsx(TooltipProvider, { delayDuration: 200, children: _jsx(SidebarProvider, { defaultOpen: sidebarOpen(), children: _jsxs(LumenFinder, { app: app, settings: findSettings, openSettings: openSettings, config: finder, children: [_jsx(CloseDrawerOnNavigate, {}), _jsxs(Sidebar, { collapsible: "icon", children: [_jsx(SidebarHeader, { children: brand }), _jsx(SidebarContent, { children: nav }), _jsx(SidebarFooter, { children: _jsx(NavUser, { who: user, signOutUrl: signOutUrl, onSettings: () => openSettings(), onLogs: onLogs }) }), _jsx(SidebarRail, {})] }), _jsxs(SidebarInset, { className: "flex min-h-svh min-w-0 flex-col", children: [_jsx(SignalBanners, {}), _jsx("div", { className: "flex min-w-0 flex-1 flex-col", children: children }, epoch), _jsx(LumenStatusBar, { app: app, model: bar, legacy: status, slot: setStatusSlot, end: _jsxs(_Fragment, { children: [health, releases && _jsx(WhatsNew, { api: releases, apps: releaseApps }), statusEnd, _jsx(StatusTimeZone, {})] }) }), tabs && _jsx(LumenTabBar, { items: tabs })] }), _jsx("div", { ref: setDockSlot, "data-slot": "shell-dock", className: "contents" }), panel, _jsx(LumenSettings, { open: settingsAt !== null, section: settingsAt ?? lastSection, onOpen: openSettings, onClose: () => setSettingsAt(null), appLabel: appLabel, profile: profile, security: security, sections: settings, shared: shared, sharedLabel: sharedLabel, groups: settingsGroups }), _jsx(Toaster, { position: "bottom-right" })] }) }) })) }) }) }) }) }) }));
 }
 /** A status bar entry: an optional health dot, a label and its value ("Mail · Up to date"). */
 export function StatusItem({ label, value, ok, className, }) {

package/package.json

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