@columenlabs/lumen-ui 0.1.86 → 0.1.87

package/dist/assistant/lumen-assistant.js

@@ -302,7 +302,7 @@ function Draft({ draft, onSettle, busy, row, }) {
     const [open, setOpen] = useState(!row && draft.status === 'open');
     const lines = argLines(draft.args);
     const actions = draft.status === 'open' && (_jsxs("div", { className: "flex shrink-0 justify-end gap-1", children: [_jsx(Button, { size: "sm", variant: "ghost", disabled: !!pending || busy, onClick: () => void go(draft, 'dismiss'), children: "Dismiss" }), _jsxs(Button, { size: "sm", disabled: !!pending || busy, onClick: () => void go(draft, 'save'), children: [pending === 'save' ? _jsx(Spinner, {}) : _jsx(CheckIcon, {}), "Save"] })] }));
-    return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, "data-slot": "assistant-draft", className: cn('flex flex-col text-sm', row ? 'border-b px-1 py-1.5 last:border-b-0' : 'gap-2 rounded-lg border bg-card p-3'), children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": `${open ? 'Hide' : 'Show'} ${draft.title}`, className: "flex min-w-0 flex-1 items-center gap-1.5 text-left", children: [_jsx(ChevronRightIcon, { className: cn('size-3.5 shrink-0 text-muted-foreground transition-transform', open && 'rotate-90') }), _jsx("span", { className: "shrink-0 font-medium", children: draft.title }), !open && (_jsx("span", { className: "min-w-0 truncate text-muted-foreground text-xs", children: argSummary(draft.args) }))] }) }), _jsx(DraftStatus, { draft: draft }), row && draft.status === 'open' && (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: XIcon, label: `Dismiss ${draft.title}`, size: "icon-xs", disabled: !!pending || busy, onClick: () => void go(draft, 'dismiss') }), _jsx(IconButton, { icon: pending === 'save' ? Spinner : CheckIcon, label: `Save ${draft.title}`, size: "icon-xs", variant: "outline", disabled: !!pending || busy, onClick: () => void go(draft, 'save') })] }))] }), _jsxs(CollapsibleContent, { className: cn('flex flex-col gap-2', row && 'pt-1.5 pl-5'), children: [_jsx("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 text-xs", children: lines.slice(0, 12).map(([k, v]) => (_jsxs("div", { className: "contents", children: [_jsx("dt", { className: "text-muted-foreground", children: k }), _jsx("dd", { className: "font-code break-words", children: v })] }, k))) }), !row && actions] }), draft.error && _jsx("p", { className: "text-loss text-xs", children: draft.error })] }));
+    return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, "data-slot": "assistant-draft", className: cn('flex flex-col text-sm', row ? 'border-b px-1 py-1.5 last:border-b-0' : 'gap-2 rounded-lg border bg-card p-3'), children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": `${open ? 'Hide' : 'Show'} ${draft.title}`, className: "flex min-w-0 flex-1 items-center gap-1.5 text-left", children: [_jsx(ChevronRightIcon, { className: cn('size-3.5 shrink-0 text-muted-foreground transition-transform', open && 'rotate-90') }), _jsx("span", { className: "shrink-0 font-medium", children: draft.title }), !open && (_jsx("span", { className: "min-w-0 truncate text-muted-foreground text-xs", children: argSummary(draft.args) }))] }) }), _jsx(DraftStatus, { draft: draft }), row && draft.status === 'open' && (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: XIcon, label: `Dismiss ${draft.title}`, size: "icon-xs", disabled: !!pending || busy, onClick: () => void go(draft, 'dismiss') }), _jsx(IconButton, { icon: pending === 'save' ? Spinner : CheckIcon, label: `Save ${draft.title}`, size: "icon-xs", variant: "outline", disabled: !!pending || busy, onClick: () => void go(draft, 'save') })] }))] }), _jsxs(CollapsibleContent, { className: cn('flex flex-col gap-2', row && 'pt-1.5 pl-5'), children: [_jsx("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 text-xs", children: lines.slice(0, 12).map(([k, v]) => (_jsxs("div", { className: "contents", children: [_jsx("dt", { className: "whitespace-nowrap text-muted-foreground", children: k }), _jsx("dd", { className: "font-code break-words", children: v })] }, k))) }), !row && actions] }), draft.error && _jsx("p", { className: "text-loss text-xs", children: draft.error })] }));
 }
 /** Two or more cards in a row: one stack with a count, Save all and Dismiss all, a line each. */
 function DraftStack({ drafts, onSettle, busy, }) {

package/dist/expand-list.js

@@ -29,5 +29,5 @@ export function LumenExpandRow({ id, name, meta, badge, open: openProp, onOpenCh
         else
             setOwn(o);
     };
-    return (_jsxs(Collapsible, { open: open, onOpenChange: change, className: "border-b last:border-b-0", children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "flex w-full items-center gap-3 px-1 py-3 text-left hover:bg-muted/50", children: [_jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block font-medium", children: name }), meta && _jsx("span", { className: "block truncate text-xs text-muted-foreground", children: meta })] }), badge, _jsx(ChevronRightIcon, { className: cn('size-4 shrink-0 text-muted-foreground transition-transform', open && 'rotate-90') })] }) }), _jsx(CollapsibleContent, { className: "grid grid-cols-1 gap-5 px-1 pt-1 pb-5", children: children })] }));
+    return (_jsxs(Collapsible, { open: open, onOpenChange: change, className: "border-b last:border-b-0", children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "flex w-full items-center gap-3 px-1 py-3 text-left hover:bg-muted/50", children: [_jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate font-medium", title: typeof name === 'string' ? name : undefined, children: name }), meta && (_jsx("span", { className: "block truncate text-xs text-muted-foreground", title: typeof meta === 'string' ? meta : undefined, children: meta }))] }), badge, _jsx(ChevronRightIcon, { className: cn('size-4 shrink-0 text-muted-foreground transition-transform', open && 'rotate-90') })] }) }), _jsx(CollapsibleContent, { className: "grid grid-cols-1 gap-5 px-1 pt-1 pb-5", children: children })] }));
 }

package/dist/fact-list.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+export interface Fact {
+    label: string;
+    value: ReactNode;
+    /** The full value on hover, when the value is not plain text. */
+    title?: string;
+    /** A sentence that may take more lines ("What it inspects"); short values stay on one. */
+    wrap?: boolean;
+}
+export interface FactListProps {
+    facts: readonly (Fact | false | null | undefined)[];
+    className?: string;
+}
+/**
+ * Label and value pairs in a drawer or card ("Last seen  today 07:18 PM"). The labels take the
+ * width of the longest one and the values the rest. Each sits on one line: a value that runs out
+ * of room ends in an ellipsis, the whole of it on hover, so a time or an email never breaks.
+ */
+export declare function FactList({ facts, className }: FactListProps): import("react").JSX.Element;

package/dist/fact-list.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { cn } from './lib/utils.js';
+/**
+ * Label and value pairs in a drawer or card ("Last seen  today 07:18 PM"). The labels take the
+ * width of the longest one and the values the rest. Each sits on one line: a value that runs out
+ * of room ends in an ellipsis, the whole of it on hover, so a time or an email never breaks.
+ */
+export function FactList({ facts, className }) {
+    return (_jsx("dl", { className: cn('grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-1.5 text-sm', className), children: facts.map((f) => f && (_jsxs(Fragment, { children: [_jsx("dt", { className: "whitespace-nowrap text-muted-foreground", children: f.label }), _jsx("dd", { className: cn('min-w-0', f.wrap ? 'break-words' : 'truncate'), title: f.wrap
+                        ? undefined
+                        : (f.title ?? (typeof f.value === 'string' ? f.value : undefined)), children: f.value })] }, f.label))) }));
+}

package/dist/index.d.ts

@@ -51,6 +51,7 @@ export { KIT, type KitConfig, configureLumen } from './kit-config.js';
 export { ConnectionBlock, ErrorLine, IntegrationRow, KeyTestLine, type KeyTestResult, TestBadge, errorText, useClock, } from './integrations.js';
 export { LumenChatgptSignin, type LumenChatgptSigninProps } from './chatgpt-signin.js';
 export { LumenExpandList, LumenExpandRow } from './expand-list.js';
+export { type Fact, FactList, type FactListProps } from './fact-list.js';
 export { LumenPager } from './pager.js';
 export { createDeskQueryClient } from './query-client.js';
 export { type ClientPoint, type ClientPointKind, type LumenTelemetryOptions, apiRoute, reportClient, reportClientError, reportFailedFetch, stackFingerprint, useLumenTelemetry, } from './telemetry.js';

package/dist/index.js

@@ -58,6 +58,7 @@ export { KIT, configureLumen } from './kit-config.js';
 export { ConnectionBlock, ErrorLine, IntegrationRow, KeyTestLine, TestBadge, errorText, useClock, } from './integrations.js';
 export { LumenChatgptSignin } from './chatgpt-signin.js';
 export { LumenExpandList, LumenExpandRow } from './expand-list.js';
+export { FactList } from './fact-list.js';
 export { LumenPager } from './pager.js';
 export { createDeskQueryClient } from './query-client.js';
 export { apiRoute, reportClient, reportClientError, reportFailedFetch, stackFingerprint, useLumenTelemetry, } from './telemetry.js';

package/dist/lumen-drawer.js

@@ -16,7 +16,7 @@ import { Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetTi
  */
 export function LumenDrawer({ open, onClose, title, description, children, footer, footerStart, defaultSize = '32%', minSize = '320px', maxSize = '60%', }) {
     const isMobile = useIsMobile();
-    const head = (_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx(SheetTitle, { className: "truncate", children: title }), _jsx(SheetDescription, { className: description ? 'truncate text-muted-foreground text-xs' : 'sr-only', children: description ?? 'Details' })] }));
+    const head = (_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx(SheetTitle, { className: "truncate", title: typeof title === 'string' ? title : undefined, children: title }), _jsx(SheetDescription, { className: description ? 'truncate text-muted-foreground text-xs' : 'sr-only', title: typeof description === 'string' ? description : undefined, children: description ?? 'Details' })] }));
     const body = _jsx("div", { className: "flex flex-col px-4 pb-4", children: children });
     // Every drawer ends on a footer, styled like a dialog's: the body scrolls above it and always
     // ends on a clear edge. Without actions of its own it offers Close, except on a phone, where the

package/dist/people/person-drawer.js

@@ -6,6 +6,7 @@ import { AppWindowIcon, BanIcon, HistoryIcon, KeyRoundIcon, MailIcon, ShieldChec
 import { useState } from 'react';
 import { LumenConfirm } from '../confirm.js';
 import { DrawerSection } from '../drawer-section.js';
+import { FactList } from '../fact-list.js';
 import { InfoLabel, InfoTip } from '../info-tip.js';
 import { errorText } from '../integrations.js';
 import { LumenDrawer } from '../lumen-drawer.js';
@@ -35,9 +36,20 @@ export function PersonDrawer({ adapter, view, person, onClose, }) {
         void act(() => adapter.setAccess(p.id, next), `${scope.name}: ${levelLabel(scope, level)} for ${who}`, () => adapter.setAccess(p.id, before));
     };
     return (_jsx(LumenDrawer, { open: !!p, onClose: onClose, title: who, description: p ? `${p.email} · ${STATUS_LABEL[p.status]} · invited ${when(p.invitedAt)}` : undefined, footer: p && pending ? (_jsxs(_Fragment, { children: [_jsxs(Button, { size: "sm", variant: "outline", onClick: () => act(() => adapter.revoke(p.id), `Revoked the invite for ${p.email}`).then((r) => r && onClose()), children: [_jsx(XIcon, {}), " Revoke"] }), _jsxs(Button, { size: "sm", onClick: () => act(() => adapter.resend(p.id), `New invite sent to ${p.email}`), children: [_jsx(MailIcon, {}), " Resend invite"] })] })) : undefined, children: p && (_jsxs(_Fragment, { children: [_jsx(AccessSection, { adapter: adapter, view: view, person: p, onLevel: setLevel }), _jsxs(DrawerSection, { icon: ShieldCheckIcon, title: "Role", defaultOpen: true, children: [_jsxs("div", { className: "flex items-center justify-between gap-3 py-1 text-sm", children: [_jsx(InfoLabel, { info: "Admins hold the top level on every scope and manage People. One active admin is always kept.", children: "Role" }), _jsx(LumenSelector, { trigger: "chip", size: "sm", label: `Role of ${who}`, disabled: !!guard && p.role === 'admin', value: p.role, options: ROLES, onChange: (role) => role !== p.role &&
-                                        void act(() => adapter.update(p.id, { role }), `${who} is now ${role === 'admin' ? 'an admin' : 'a member'}`, () => adapter.update(p.id, { role: p.role })) })] }), guard && p.role === 'admin' && _jsx(NoteLine, { icon: ShieldCheckIcon, title: guard })] }), _jsx(DrawerSection, { icon: KeyRoundIcon, title: "Sign-in", defaultOpen: true, children: _jsxs("dl", { className: "grid grid-cols-2 gap-x-3 gap-y-1.5 text-sm", children: [_jsx("dt", { className: "text-muted-foreground", children: "Last seen" }), _jsx("dd", { children: when(p.lastSeen) }), _jsx("dt", { className: "text-muted-foreground", children: "Invited by" }), _jsx("dd", { className: "truncate", children: p.invitedBy ?? '—' }), pending && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-muted-foreground", children: "Invite" }), _jsx("dd", { children: p.status === 'expired'
-                                            ? `expired ${when(p.expiresAt)}`
-                                            : `expires ${fromNow(p.expiresAt)}` })] })), view.sync && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-muted-foreground", children: "Sign-in provider" }), _jsxs("dd", { children: [view.sync.ok ? 'Synced' : 'Out of step', " \u00B7 ", when(view.sync.at)] })] }))] }) }), adapter.audit && _jsx(ActivitySection, { adapter: adapter, person: p }), _jsx(DangerSection, { adapter: adapter, person: p, guard: guard, onGone: onClose })] })) }));
+                                        void act(() => adapter.update(p.id, { role }), `${who} is now ${role === 'admin' ? 'an admin' : 'a member'}`, () => adapter.update(p.id, { role: p.role })) })] }), guard && p.role === 'admin' && _jsx(NoteLine, { icon: ShieldCheckIcon, title: guard })] }), _jsx(DrawerSection, { icon: KeyRoundIcon, title: "Sign-in", defaultOpen: true, children: _jsx(FactList, { facts: [
+                            { label: 'Last seen', value: when(p.lastSeen) },
+                            { label: 'Invited by', value: p.invitedBy ?? '—' },
+                            pending && {
+                                label: 'Invite',
+                                value: p.status === 'expired'
+                                    ? `expired ${when(p.expiresAt)}`
+                                    : `expires ${fromNow(p.expiresAt)}`,
+                            },
+                            view.sync && {
+                                label: 'Sign-in provider',
+                                value: `${view.sync.ok ? 'Synced' : 'Out of step'} · ${when(view.sync.at)}`,
+                            },
+                        ] }) }), adapter.audit && _jsx(ActivitySection, { adapter: adapter, person: p }), _jsx(DangerSection, { adapter: adapter, person: p, guard: guard, onGone: onClose })] })) }));
 }
 /** Each app's level, then the person's grants on constructs inside it. */
 function AccessSection({ adapter, view, person: p, onLevel, }) {
@@ -73,7 +85,7 @@ function ActivitySection({ adapter, person }) {
         queryFn: () => adapter.audit?.({ target: person.id, limit: 5 }) ?? Promise.resolve(null),
     });
     const events = q.data?.events ?? [];
-    return (_jsx(DrawerSection, { icon: HistoryIcon, title: "Recent activity", count: events.length || null, children: q.isError ? (_jsx("p", { className: "text-destructive text-sm", children: errorText(q.error) })) : events.length ? (_jsx("ul", { className: "flex flex-col gap-1.5 text-sm", children: events.map((e) => (_jsxs("li", { className: "flex gap-3", children: [_jsx("span", { className: "num w-24 shrink-0 text-muted-foreground", children: when(e.at) }), _jsxs("span", { className: "min-w-0 flex-1 truncate", title: e.detail, children: [e.actor, " \u00B7 ", e.detail] }), e.refused && _jsx(Badge, { variant: "destructive", children: "Refused" })] }, e.id))) })) : (_jsx("p", { className: "text-muted-foreground text-sm", children: q.isPending ? 'Loading…' : 'Nothing yet.' })) }));
+    return (_jsx(DrawerSection, { icon: HistoryIcon, title: "Recent activity", count: events.length || null, children: q.isError ? (_jsx("p", { className: "text-destructive text-sm", children: errorText(q.error) })) : events.length ? (_jsx("ul", { className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1.5 text-sm", children: events.map((e) => (_jsxs("li", { className: "col-span-2 grid grid-cols-subgrid items-center", children: [_jsx("time", { dateTime: new Date(e.at).toISOString(), className: "num text-muted-foreground", children: when(e.at) }), _jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsxs("span", { className: "truncate", title: `${e.actor} · ${e.detail}`, children: [e.actor, " \u00B7 ", e.detail] }), e.refused && _jsx(Badge, { variant: "destructive", children: "Refused" })] })] }, e.id))) })) : (_jsx("p", { className: "text-muted-foreground text-sm", children: q.isPending ? 'Loading…' : 'Nothing yet.' })) }));
 }
 /** Disable or Enable, and Remove with what each part of the app does with their data first. */
 function DangerSection({ adapter, person: p, guard, onGone, }) {

package/dist/people/sections.js

@@ -212,7 +212,7 @@ export function PermissionsSection({ frame }) {
                 title: `Levels for ${scope.name}`,
                 icon: ListOrderedIcon,
                 link: false,
-                children: (_jsxs("ol", { className: "flex flex-col gap-2 text-sm", children: [levels.map((l, i) => (_jsxs("li", { className: "flex gap-3", children: [_jsx("span", { className: "num w-4 shrink-0 text-muted-foreground", children: i + 1 }), _jsx("span", { className: "w-20 shrink-0 font-medium", children: l.label }), _jsx("span", { className: "min-w-0 flex-1 text-muted-foreground", children: l.description ?? '' })] }, l.id))), parent && (_jsxs("li", { className: "pt-1 text-muted-foreground text-xs", children: ["No grant of its own: the level on ", parent.name, ", by rank."] }))] })),
+                children: (_jsxs("ol", { className: "grid grid-cols-[auto_auto_minmax(0,1fr)] gap-x-3 gap-y-2 text-sm", children: [levels.map((l, i) => (_jsxs("li", { className: "col-span-3 grid grid-cols-subgrid", children: [_jsx("span", { className: "num text-muted-foreground", children: i + 1 }), _jsx("span", { className: "whitespace-nowrap font-medium", children: l.label }), _jsx("span", { className: "text-muted-foreground", children: l.description ?? '' })] }, l.id))), parent && (_jsxs("li", { className: "col-span-3 pt-1 text-muted-foreground text-xs", children: ["No grant of its own: the level on ", parent.name, ", by rank."] }))] })),
             },
             {
                 id: 'roles',
@@ -220,7 +220,7 @@ export function PermissionsSection({ frame }) {
                 title: 'Roles',
                 icon: ShieldCheckIcon,
                 link: false,
-                children: (_jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm", children: [_jsx("dt", { className: "font-medium", children: "Admin" }), _jsx("dd", { className: "text-muted-foreground", children: "The top level on every scope; manages People. One is always kept." }), _jsx("dt", { className: "font-medium", children: "Member" }), _jsx("dd", { className: "text-muted-foreground", children: "Only the levels set per scope. The default for invites." })] })),
+                children: (_jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm", children: [_jsx("dt", { className: "whitespace-nowrap font-medium", children: "Admin" }), _jsx("dd", { className: "text-muted-foreground", children: "The top level on every scope; manages People. One is always kept." }), _jsx("dt", { className: "whitespace-nowrap font-medium", children: "Member" }), _jsx("dd", { className: "text-muted-foreground", children: "Only the levels set per scope. The default for invites." })] })),
             },
         ] }));
 }

package/dist/people/shared.js

@@ -22,6 +22,8 @@ export const statusTone = (p) => p.status === 'active'
             ? 'amber'
             : 'muted';
 const DAY = 86_400_000;
+/** Non-breaking spaces, so `today 07:18 PM` and `in 7 d` never split across lines in any text. */
+const glue = (s) => s.replace(/ /g, '\u00a0');
 const sameDay = (a, b) => a.toDateString() === b.toDateString();
 /** `today 09:12`, `yesterday 18:42`, `24 Oct`, `24 Oct 2025`; a dash for never. */
 export function when(ts, now = Date.now()) {
@@ -31,14 +33,14 @@ export function when(ts, now = Date.now()) {
     const n = new Date(now);
     const time = d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
     if (sameDay(d, n))
-        return `today ${time}`;
+        return glue(`today ${time}`);
     if (sameDay(d, new Date(now - DAY)))
-        return `yesterday ${time}`;
-    return d.toLocaleDateString(undefined, {
+        return glue(`yesterday ${time}`);
+    return glue(d.toLocaleDateString(undefined, {
         day: 'numeric',
         month: 'short',
         ...(d.getFullYear() === n.getFullYear() ? {} : { year: 'numeric' }),
-    });
+    }));
 }
 /** `in 5 d`, `in 3 h`, `2 d ago`: how far a time is from now. */
 export function fromNow(ts, now = Date.now()) {
@@ -51,7 +53,7 @@ export function fromNow(ts, now = Date.now()) {
         : abs >= 3_600_000
             ? `${Math.round(abs / 3_600_000)} h`
             : `${Math.max(1, Math.round(abs / 60_000))} min`;
-    return ms >= 0 ? `in ${n}` : `${n} ago`;
+    return glue(ms >= 0 ? `in ${n}` : `${n} ago`);
 }
 /** The top scopes (apps), in order; constructs inside one have a `parent`. */
 export const topScopes = (scopes) => scopes.filter((s) => !s.parent);

package/dist/schedules.js

@@ -149,7 +149,7 @@ function Editor({ s, onSave, onRun, onRuns, recent, briefs, onClose, }) {
                             ['Cost', s.about.cost],
                         ]
                             .filter(([, v]) => v)
-                            .map(([k, v]) => (_jsxs(Fragment, { children: [_jsx("dt", { className: "text-muted-foreground", children: k }), _jsx("dd", { children: v })] }, k))) }), s.brief ? (_jsx(Row, { label: "Instructions", children: own ? (_jsx(Textarea, { "aria-label": "Instructions", rows: 5, maxLength: 4000, value: brief.instructions ?? '', onChange: (e) => setBrief((b) => ({ ...b, instructions: e.target.value })) })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: s.brief.instructions })) })) : null, _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { htmlFor: "sched-on", children: "On" }), _jsx(Switch, { id: "sched-on", checked: draft.on, onCheckedChange: (on) => set({ on }) })] }), s.choices.length ? (_jsx(Row, { label: "Every", children: _jsx(ToggleGroup, { type: "single", variant: "outline", size: "sm", value: String(draft.every), onValueChange: (v) => v && set({ every: Number(v) }), children: s.choices.map((m) => (_jsx(ToggleGroupItem, { value: String(m), className: "num", children: everyText(m) }, m))) }) })) : null, s.kind === 'window' ? (_jsx(_Fragment, { children: _jsx(Row, { label: "Window", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { type: "time", "aria-label": "From", className: "num w-32", value: draft.from, onChange: (e) => set({ from: e.target.value }) }), _jsx("span", { className: "text-muted-foreground", children: "to" }), _jsx(Input, { type: "time", "aria-label": "To", className: "num w-32", value: draft.to, onChange: (e) => set({ to: e.target.value }) })] }) }) })) : null, s.kind === 'window' || s.kind === 'daily' ? (_jsx(TimeFields, { kind: s.kind, draft: draft, set: set })) : null, s.brief ? (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Spend cap a run", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "$" }), _jsx(Input, { type: "number", "aria-label": "Spend cap a run, USD", className: "num w-24", min: 0.05, max: 5, step: 0.05, value: brief.cap_usd ?? '', onChange: (e) => setBrief((b) => ({ ...b, cap_usd: Number(e.target.value) })) })] }) }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { htmlFor: "brief-notify", children: "Notify when ready" }), _jsx(Switch, { id: "brief-notify", checked: brief.notify ?? false, onCheckedChange: (notify) => setBrief((b) => ({ ...b, notify })) })] })] })) : null, s.waiting ? (_jsx("p", { className: "text-sm text-warning", children: s.waiting })) : s.next ? (_jsxs("p", { className: "text-sm text-muted-foreground", children: ["Next run ", time(s.next)] })) : null, recent && !ran ? (_jsx(Row, { label: "Last runs", children: recent(s.id) })) : (_jsx(Row, { label: "Last run", children: _jsx("span", { className: "text-sm", children: _jsx(Last, { s: ran ? { ...s, last: ran } : s }) }) })), last && assistant ? (_jsxs(Button, { variant: "outline", size: "sm", className: "justify-self-start", onClick: () => {
+                            .map(([k, v]) => (_jsxs(Fragment, { children: [_jsx("dt", { className: "whitespace-nowrap text-muted-foreground", children: k }), _jsx("dd", { children: v })] }, k))) }), s.brief ? (_jsx(Row, { label: "Instructions", children: own ? (_jsx(Textarea, { "aria-label": "Instructions", rows: 5, maxLength: 4000, value: brief.instructions ?? '', onChange: (e) => setBrief((b) => ({ ...b, instructions: e.target.value })) })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: s.brief.instructions })) })) : null, _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { htmlFor: "sched-on", children: "On" }), _jsx(Switch, { id: "sched-on", checked: draft.on, onCheckedChange: (on) => set({ on }) })] }), s.choices.length ? (_jsx(Row, { label: "Every", children: _jsx(ToggleGroup, { type: "single", variant: "outline", size: "sm", value: String(draft.every), onValueChange: (v) => v && set({ every: Number(v) }), children: s.choices.map((m) => (_jsx(ToggleGroupItem, { value: String(m), className: "num", children: everyText(m) }, m))) }) })) : null, s.kind === 'window' ? (_jsx(_Fragment, { children: _jsx(Row, { label: "Window", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { type: "time", "aria-label": "From", className: "num w-32", value: draft.from, onChange: (e) => set({ from: e.target.value }) }), _jsx("span", { className: "text-muted-foreground", children: "to" }), _jsx(Input, { type: "time", "aria-label": "To", className: "num w-32", value: draft.to, onChange: (e) => set({ to: e.target.value }) })] }) }) })) : null, s.kind === 'window' || s.kind === 'daily' ? (_jsx(TimeFields, { kind: s.kind, draft: draft, set: set })) : null, s.brief ? (_jsxs(_Fragment, { children: [_jsx(Row, { label: "Spend cap a run", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "$" }), _jsx(Input, { type: "number", "aria-label": "Spend cap a run, USD", className: "num w-24", min: 0.05, max: 5, step: 0.05, value: brief.cap_usd ?? '', onChange: (e) => setBrief((b) => ({ ...b, cap_usd: Number(e.target.value) })) })] }) }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { htmlFor: "brief-notify", children: "Notify when ready" }), _jsx(Switch, { id: "brief-notify", checked: brief.notify ?? false, onCheckedChange: (notify) => setBrief((b) => ({ ...b, notify })) })] })] })) : null, s.waiting ? (_jsx("p", { className: "text-sm text-warning", children: s.waiting })) : s.next ? (_jsxs("p", { className: "text-sm text-muted-foreground", children: ["Next run ", time(s.next)] })) : null, recent && !ran ? (_jsx(Row, { label: "Last runs", children: recent(s.id) })) : (_jsx(Row, { label: "Last run", children: _jsx("span", { className: "text-sm", children: _jsx(Last, { s: ran ? { ...s, last: ran } : s }) }) })), last && assistant ? (_jsxs(Button, { variant: "outline", size: "sm", className: "justify-self-start", onClick: () => {
                             assistant.loadChat(last.chat);
                             assistant.setOpen(true);
                             onClose();

package/dist/theme.css

@@ -465,6 +465,16 @@
     font-family: var(--num-font);
     font-variant-numeric: tabular-nums;
   }
+
+  /* Short values never wrap: a number, a time, a key. `07:18 PM` stays on one line; where room
+     runs out the holder truncates it (`truncate` and a `title`), never breaks it. A `.num` that
+     clamps on purpose (`line-clamp-*`) keeps its lines. */
+  span.num:not([class*="line-clamp"]),
+  dd.num,
+  time,
+  kbd {
+    white-space: nowrap;
+  }
 }
 
 /* Font and size: the size is the root every rem scales from. Unlayered, so

package/package.json

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