@columenlabs/lumen-ui 0.1.188 → 0.1.190

package/dist/connection.d.ts

@@ -101,10 +101,11 @@ export type ConnectionStatus = 'connected' | 'untested' | 'expired' | 'failed' |
 export declare function connectionStatus(way: ConnectionWay | undefined): ConnectionStatus;
 /** The way in use: the picked one when it is set up, else the first set up. */
 export declare function activeWay(ways: ConnectionWay[], use?: string): ConnectionWay | undefined;
-/** The row's pill for a status. */
-export declare function ConnectionBadge({ status, signin, }: {
+/** The row's pill for a status: Works, Failed, Not tested or Off; hover says to sign in again. */
+export declare function ConnectionBadge({ status, signin, title, }: {
     status: ConnectionStatus;
     signin?: boolean;
+    title?: string;
 }): import("react").JSX.Element;
 /** A connection's mark: an icon or a letter on a tile. */
 export declare function ConnectionLogo({ icon: Icon, text, }: {
@@ -113,5 +114,10 @@ export declare function ConnectionLogo({ icon: Icon, text, }: {
     }>;
     text?: string;
 }): import("react").JSX.Element;
-/** One connection: a row with its status, the ways to connect inside. */
+/**
+ * One connection on the settings slots: the header carries its name, the way in use and one
+ * status pill; each way is a row (its label beside its value, Replace or Sign in again inside);
+ * with one way the action bar holds its last test, Test and Remove, with several each row ends in
+ * its own. `lines` are rows of their own; `children` the app's settings below them.
+ */
 export declare function LumenConnection({ id, name, meta, logo, ways, use, onUse, lines, defaultOpen, children, }: LumenConnectionProps): import("react").JSX.Element;

package/dist/connection.js

@@ -1,22 +1,21 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // One connection, one look on every app: an AI provider, an email relay, a Google account, a
-// connector. A row that expands in place (LumenExpandRow) with one status pill; inside, each way to
-// connect (a pasted key or token, a sign-in that ends on an address the person pastes back, or the
-// app's own form). Several ways show radios and an In use tag, so a person who has both an API key and
-// a plan sign-in picks which one runs. A way that is set up shows who or what it is and its last test,
-// then Test, Remove (asks first) and Replace or Sign in again, all on the right. `lines` and
-// `children` hold the app's own settings below the ways (a server, a sender, folders).
-import { AlertTriangleIcon, CheckIcon, ExternalLinkIcon, KeyRoundIcon, LogInIcon, PlusIcon, RefreshCwIcon, Trash2Icon, XIcon, } from 'lucide-react';
+// connector. Built on the settings slots (docs/parts/settings.md): a LumenExpandRow whose header has
+// one status pill; inside, each way to connect is a row (a pasted key or token, a sign-in that ends on
+// an address the person pastes back, or the app's own form) with Replace or Sign in again inside its
+// value. Several ways add a Use row, so a person who has both an API key and a plan sign-in picks which
+// one runs, and each way's row ends in its own status, Test and Remove; one way puts its last test,
+// Test and Remove in the action bar. `lines` and `children` are the app's own rows below the ways.
+import { ExternalLinkIcon, LogInIcon, PlusIcon, RefreshCwIcon, Trash2Icon } from 'lucide-react';
 import { useId, useState } from 'react';
 import { LumenConfirm } from './confirm.js';
 import { LumenExpandRow } from './expand-list.js';
 import { SaveButton } from './form-issues.js';
 import { IconButton } from './icon-button.js';
-import { InfoLabel } from './info-tip.js';
-import { ErrorLine, errorText, useClock } from './integrations.js';
+import { ErrorLine, errorText } from './integrations.js';
 import { cn } from './lib/utils.js';
 import { lumenToast } from './lumen-toast.js';
-import { Badge } from './ui/badge.js';
+import { SettingActions, SettingField, SettingStatus, SettingValue, } from './setting-parts.js';
 import { Button } from './ui/button.js';
 import { Input } from './ui/input.js';
 import { Label } from './ui/label.js';
@@ -35,44 +34,54 @@ export function connectionStatus(way) {
 export function activeWay(ways, use) {
     return ways.find((w) => w.id === use && w.set) ?? ways.find((w) => w.set);
 }
-/** The row's pill for a status. */
-export function ConnectionBadge({ status, signin, }) {
-    switch (status) {
-        case 'connected':
-            return (_jsxs(Badge, { variant: "outline", className: "text-gain", children: [_jsx(CheckIcon, {}), "Connected"] }));
-        case 'untested':
-            return _jsx(Badge, { variant: "outline", children: "Not tested" });
-        case 'expired':
-            return (_jsxs(Badge, { variant: "outline", className: "text-warning", children: [_jsx(AlertTriangleIcon, {}), signin ? 'Sign in again' : 'Key expired'] }));
-        case 'failed':
-            return (_jsxs(Badge, { variant: "outline", className: "text-loss", children: [_jsx(AlertTriangleIcon, {}), "Failed"] }));
-        default:
-            return (_jsx(Badge, { variant: "outline", className: "border-dashed text-muted-foreground", children: "Not connected" }));
-    }
+/** The row's pill for a status: Works, Failed, Not tested or Off; hover says to sign in again. */
+export function ConnectionBadge({ status, signin, title, }) {
+    const health = status === 'connected'
+        ? 'works'
+        : status === 'untested'
+            ? 'untested'
+            : status === 'off'
+                ? 'off'
+                : 'failed';
+    return (_jsx(SettingStatus, { health: health, title: title ?? (status === 'expired' ? (signin ? 'Sign in again' : 'Key expired') : undefined) }));
 }
 /** A connection's mark: an icon or a letter on a tile. */
 export function ConnectionLogo({ icon: Icon, text, }) {
     return (_jsx("span", { "aria-hidden": true, className: "flex size-8 shrink-0 items-center justify-center rounded-md border bg-muted font-semibold text-muted-foreground text-sm", children: Icon ? _jsx(Icon, { className: "size-4" }) : text }));
 }
-/** `just now`, `5 min ago`, `3 h ago`, `2 d ago`. */
-function ago(ms) {
-    const s = Math.max(0, (Date.now() - ms) / 1000);
-    if (s < 60)
-        return 'just now';
-    if (s < 3600)
-        return `${Math.floor(s / 60)} min ago`;
-    if (s < 86400)
-        return `${Math.floor(s / 3600)} h ago`;
-    return `${Math.floor(s / 86400)} d ago`;
-}
 /** `Service token` → `service token`; `API key` stays. */
 const lower = (label) => /^[A-Z][a-z]/.test(label) ? label.charAt(0).toLowerCase() + label.slice(1) : label;
-const toMs = (at) => (typeof at === 'number' ? at : Date.parse(at));
-/** One connection: a row with its status, the ways to connect inside. */
+const toIso = (at) => new Date(typeof at === 'number' ? at : Date.parse(at)).toISOString();
+/** A way's last test as the action bar reads it. */
+const lastTest = (t) => t
+    ? {
+        at: toIso(t.at),
+        ok: t.ok,
+        detail: t.detail,
+        error: t.ok ? t.error : (t.error ?? (t.expired ? 'Expired' : null)),
+    }
+    : null;
+/** The confirm that removes a way. */
+const removeOf = (way) => !way.readOnly && !way.note && way.onRemove
+    ? {
+        label: way.removeLabel ?? `Remove ${way.label}`,
+        title: way.removeTitle ?? `Remove ${lower(way.label)}?`,
+        description: way.removeText ?? 'You can add it again any time.',
+        action: way.removeLabel ?? 'Remove',
+        run: () => way.onRemove?.(),
+    }
+    : undefined;
+/**
+ * One connection on the settings slots: the header carries its name, the way in use and one
+ * status pill; each way is a row (its label beside its value, Replace or Sign in again inside);
+ * with one way the action bar holds its last test, Test and Remove, with several each row ends in
+ * its own. `lines` are rows of their own; `children` the app's settings below them.
+ */
 export function LumenConnection({ id, name, meta, logo, ways, use, onUse, lines, defaultOpen, children, }) {
     const active = activeWay(ways, use);
     const status = connectionStatus(active);
     const pick = ways.length > 1 && !!onUse;
+    const solo = ways.length === 1 ? ways[0] : null;
     const [picking, setPicking] = useState(false);
     const choose = async (way) => {
         if (!onUse || way === active?.id)
@@ -90,49 +99,52 @@ export function LumenConnection({ id, name, meta, logo, ways, use, onUse, lines,
     };
     const line = meta ??
         (active ? (_jsxs(_Fragment, { children: [ways.length > 1 && active.label, ways.length > 1 && active.ident ? ' · ' : '', active.ident] })) : ('Not set up'));
-    const list = ways.map((w) => (_jsx(WayRow, { way: w, pick: pick, inUse: w.id === active?.id && ways.length > 1 }, w.id)));
-    return (_jsxs(LumenExpandRow, { id: id, name: name, meta: line, icon: logo, defaultOpen: defaultOpen, badge: _jsx(ConnectionBadge, { status: status, signin: !!active?.signin }), children: [_jsx("div", { className: "grid grid-cols-1 gap-2", children: pick ? (_jsx(RadioGroup, { value: active?.id ?? '', onValueChange: (v) => void choose(v), disabled: picking, "aria-label": `Which way ${typeof name === 'string' ? name : ''} connects`, className: "gap-2", children: list })) : (list) }), lines?.length ? (_jsx("dl", { className: "grid grid-cols-1 text-sm", children: lines.map((l) => (_jsxs("div", { className: "flex items-center gap-3 border-b py-2 last:border-b-0", children: [_jsx("dt", { className: "shrink-0 text-muted-foreground", children: _jsx(InfoLabel, { info: l.info, children: l.label }) }), _jsx("dd", { className: cn('min-w-0 flex-1 truncate text-right', l.mono && 'font-code text-xs'), title: typeof l.value === 'string' ? l.value : undefined, children: l.value })] }, l.label))) })) : null, children] }));
+    const t = active?.test;
+    return (_jsxs(LumenExpandRow, { id: id, name: name, meta: line, icon: logo, defaultOpen: defaultOpen, status: _jsx(ConnectionBadge, { status: status, signin: !!active?.signin, title: t ? (t.ok ? (t.detail ?? undefined) : (t.error ?? undefined)) : undefined }), actions: solo?.set && !solo.note && (solo.onTest || removeOf(solo)) ? (_jsx(SettingActions, { test: lastTest(solo.test), onTest: solo.onTest, remove: removeOf(solo) })) : undefined, children: [pick && (_jsx(SettingField, { label: "Use", children: _jsx(RadioGroup, { value: active?.id ?? '', onValueChange: (v) => void choose(v), disabled: picking, "aria-label": `Which way ${typeof name === 'string' ? name : ''} connects`, className: "flex flex-wrap gap-x-4 gap-y-1", children: ways.map((w) => (_jsx(WayChoice, { way: w }, w.id))) }) })), ways.map((w) => (_jsx(WayField, { way: w, solo: !!solo }, w.id))), lines?.map((l) => (_jsx(SettingField, { label: l.label, info: l.info, children: _jsx("span", { className: cn('min-w-0 truncate text-sm', l.mono && 'font-code text-xs'), title: typeof l.value === 'string' ? l.value : undefined, children: l.value }) }, l.label))), children] }));
 }
-/** One way: its name and state, its actions on the right, its form when open. */
-function WayRow({ way, pick, inUse }) {
-    const radioId = useId();
-    const clock = useClock();
+/** One way in the Use picker. */
+function WayChoice({ way }) {
+    const rid = useId();
+    return (_jsxs("span", { className: "flex min-h-8 items-center gap-2", children: [_jsx(RadioGroupItem, { id: rid, value: way.id, disabled: !way.set, "aria-label": `Use ${way.label}` }), _jsx(Label, { htmlFor: rid, className: cn('font-normal', !way.set && 'text-muted-foreground'), children: way.label })] }));
+}
+/** One way as a row: its label, then its value with Replace inside, or Add; its form when open. */
+function WayField({ way, solo }) {
     const [editing, setEditing] = useState(false);
-    const [testing, setTesting] = useState(false);
-    const [error, setError] = useState(null);
-    const Icon = way.icon;
-    const status = connectionStatus(way);
-    const failing = status === 'failed' || status === 'expired';
+    const close = () => setEditing(false);
     const editable = !way.readOnly && !way.note;
     const hasForm = !!(way.form || way.fields?.length || way.signin);
+    if (editing)
+        return way.form ? (_jsx("div", { className: "py-2", children: way.form(close) })) : way.signin ? (_jsx(SigninForm, { way: way, close: close })) : (_jsx(FieldsForm, { way: way, close: close }));
+    const Icon = way.signin ? LogInIcon : PlusIcon;
+    const addLabel = way.addLabel ??
+        (way.signin
+            ? way.signin.provider
+                ? `Sign in with ${way.signin.provider}`
+                : 'Sign in'
+            : `Add ${lower(way.label)}`);
+    const control = way.note ? (_jsx("span", { className: "min-w-0 truncate text-muted-foreground text-sm", children: way.note })) : way.set ? ((typeof way.ident === 'string' || way.ident == null) && editable && hasForm ? (_jsx(SettingValue, { value: way.ident ?? 'Set', label: way.label, mono: true, onReplace: () => setEditing(true), replaceLabel: way.signin ? 'Sign in again' : 'Replace', replaceIcon: way.signin ? LogInIcon : undefined })) : (_jsx("span", { className: cn('min-w-0 truncate text-sm', typeof way.ident === 'string' && 'font-code text-xs'), title: typeof way.ident === 'string' ? way.ident : undefined, children: way.ident ?? 'Set' }))) : editable && hasForm ? (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => setEditing(true), children: [_jsx(Icon, {}), addLabel] })) : (_jsx("span", { className: "text-muted-foreground text-sm", children: "Not set up" }));
+    return (_jsx(SettingField, { label: way.label, info: way.info, stack: !solo, end: !solo && way.set && !way.note ? _jsx(WayEnd, { way: way }) : undefined, children: control }));
+}
+/** With several ways, each set-up way's row ends in its status, Test and Remove. */
+function WayEnd({ way }) {
+    const [testing, setTesting] = useState(false);
+    const remove = removeOf(way);
+    const t = way.test;
     const test = async () => {
         if (!way.onTest)
             return;
         setTesting(true);
-        setError(null);
         try {
             await way.onTest();
         }
         catch (e) {
-            setError(e);
+            lumenToast.error(errorText(e));
         }
         finally {
             setTesting(false);
         }
     };
-    const close = () => setEditing(false);
-    const fixLabel = way.signin ? 'Sign in again' : 'Replace';
-    const addLabel = way.addLabel ??
-        (way.signin
-            ? way.signin.provider
-                ? `Sign in with ${way.signin.provider}`
-                : 'Sign in'
-            : `Add ${lower(way.label)}`);
-    const t = way.test;
-    return (_jsxs("div", { className: cn('grid grid-cols-1 gap-2 rounded-md border px-3 py-2.5', inUse && 'border-primary/60 bg-primary/5'), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [pick && (_jsx(RadioGroupItem, { id: radioId, value: way.id, disabled: !way.set, "aria-label": `Use ${way.label}` })), Icon && _jsx(Icon, { className: "size-4 shrink-0 text-muted-foreground" }), _jsxs("span", { className: "min-w-0 flex-1 basis-40", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [pick ? (_jsx(Label, { htmlFor: radioId, className: "whitespace-nowrap font-medium", children: _jsx(InfoLabel, { info: way.info, children: way.label }) })) : (_jsx(InfoLabel, { className: "whitespace-nowrap font-medium text-sm", info: way.info, children: way.label })), inUse && (_jsx(Badge, { variant: "outline", className: "h-5 shrink-0 border-primary/40 text-primary", children: "In use" }))] }), _jsx("span", { className: "flex min-w-0 items-center gap-1 text-muted-foreground text-xs", children: way.set ? (_jsxs(_Fragment, { children: [way.ident && (_jsx("span", { className: "truncate", title: typeof way.ident === 'string' ? way.ident : undefined, children: way.ident })), way.ident && _jsx("span", { "aria-hidden": true, children: "\u00B7" }), t ? (_jsxs("span", { className: cn('flex shrink-0 items-center gap-1', t.ok ? 'text-gain' : 'text-loss'), title: `Tested ${clock(new Date(toMs(t.at)).toISOString())}${t.ok && t.detail ? ` · ${t.detail}` : ''}`, children: [t.ok ? (_jsx(CheckIcon, { className: "size-3" })) : (_jsx(AlertTriangleIcon, { className: "size-3" })), t.ok ? 'Works' : t.expired ? 'Expired' : 'Failed', " ", ago(toMs(t.at))] })) : (_jsx("span", { className: "shrink-0", children: "Not tested" }))] })) : (_jsx("span", { children: "Not set up" })) })] }), way.note ? (_jsx("span", { className: "ml-auto shrink-0 text-muted-foreground text-xs", children: way.note })) : way.set ? (_jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-1", children: [way.onTest && (_jsx(IconButton, { icon: RefreshCwIcon, label: testing ? 'Testing…' : `Test ${way.label}`, busy: testing, disabled: testing, onClick: () => void test() })), editable && way.onRemove && (_jsx(LumenConfirm, { title: way.removeTitle ?? `Remove ${lower(way.label)}?`, description: way.removeText ?? 'You can add it again any time.', action: way.removeLabel ?? 'Remove', onConfirm: () => way.onRemove?.(), problem: errorText, children: _jsx(IconButton, { icon: Trash2Icon, label: way.removeLabel ?? `Remove ${way.label}` }) })), editable && hasForm && !editing && (_jsxs(Button, { size: "sm", variant: failing ? 'default' : 'outline', onClick: () => setEditing(true), children: [way.signin ? _jsx(LogInIcon, {}) : _jsx(KeyRoundIcon, {}), fixLabel] }))] })) : (editable &&
-                        hasForm &&
-                        !editing && (_jsxs(Button, { size: "sm", className: "ml-auto shrink-0", onClick: () => setEditing(true), children: [way.signin ? _jsx(LogInIcon, {}) : _jsx(PlusIcon, {}), addLabel] })))] }), t && !t.ok && t.error && (_jsx("p", { role: "alert", className: "text-xs text-loss", children: t.error })), _jsx(ErrorLine, { error: error }), editing &&
-                (way.form ? (way.form(close)) : way.signin ? (_jsx(SigninForm, { way: way, close: close })) : (_jsx(FieldsForm, { way: way, close: close })))] }));
+    return (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(ConnectionBadge, { status: connectionStatus(way), signin: !!way.signin, title: t ? (t.ok ? (t.detail ?? undefined) : (t.error ?? undefined)) : undefined }), way.onTest && (_jsx(IconButton, { icon: RefreshCwIcon, label: testing ? 'Testing…' : `Test ${way.label}`, busy: testing, disabled: testing, onClick: () => void test() })), remove && (_jsx(LumenConfirm, { title: remove.title, description: remove.description, action: remove.action, onConfirm: remove.run, problem: errorText, children: _jsx(IconButton, { icon: Trash2Icon, label: remove.label, className: "text-loss" }) }))] }));
 }
 /** Runs a save; false or a throw keeps the form open (a throw says why). */
 async function keep(run, setError) {
@@ -145,7 +157,11 @@ async function keep(run, setError) {
         return false;
     }
 }
-/** The way's fields, checked before Test and save. */
+/** A form's footer: a link on the left, then Cancel and its Save. */
+function FormFooter({ left, children }) {
+    return (_jsxs("div", { className: "mt-1 flex min-h-10 min-w-0 items-center gap-2 border-t pt-2 text-sm", children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: left }), children] }));
+}
+/** The way's fields, a row each, checked before Test and save. */
 function FieldsForm({ way, close }) {
     const ids = useId();
     const fields = way.fields ?? [];
@@ -173,7 +189,7 @@ function FieldsForm({ way, close }) {
             close();
         setBusy(false);
     };
-    return (_jsxs("div", { className: "grid grid-cols-1 gap-2 border-t pt-2", children: [fields.map((f) => (_jsxs("div", { className: "grid grid-cols-1 gap-1", children: [fields.length > 1 && (_jsx(Label, { htmlFor: `${ids}-${f.id}`, className: "text-xs", children: _jsx(InfoLabel, { info: f.info, children: f.label }) })), _jsx(Input, { id: `${ids}-${f.id}`, "aria-label": f.label, type: f.secret ? 'password' : 'text', autoComplete: "off", placeholder: f.placeholder ?? (f.prefix ? `${f.prefix}…` : f.label), className: "font-code text-xs", value: values[f.id] ?? '', onChange: (e) => setValues((s) => ({ ...s, [f.id]: e.target.value })), onKeyDown: (e) => e.key === 'Enter' && !empty && !issues.length && void save() })] }, f.id))), _jsx(ErrorLine, { error: error }), _jsxs("div", { className: "flex items-center justify-end gap-1", children: [way.getUrl && (_jsx(IconButton, { icon: ExternalLinkIcon, label: `Get ${/^[AEIOU]/i.test(way.label) ? 'an' : 'a'} ${lower(way.label)}`, href: way.getUrl })), _jsx(IconButton, { icon: XIcon, label: "Cancel", onClick: close }), _jsx(SaveButton, { issues: issues, busy: busy, disabled: empty, label: "Test and save", onSave: () => void save() })] })] }));
+    return (_jsxs("div", { className: "flex flex-col", children: [fields.map((f) => (_jsx(SettingField, { label: fields.length > 1 ? f.label : way.label, info: fields.length > 1 ? f.info : (f.info ?? way.info), htmlFor: `${ids}-${f.id}`, children: _jsx(Input, { id: `${ids}-${f.id}`, type: f.secret ? 'password' : 'text', autoComplete: "off", placeholder: f.placeholder ?? (f.prefix ? `${f.prefix}…` : f.label), className: "h-8 font-code text-xs", value: values[f.id] ?? '', onChange: (e) => setValues((s) => ({ ...s, [f.id]: e.target.value })), onKeyDown: (e) => e.key === 'Enter' && !empty && !issues.length && void save() }) }, f.id))), _jsx(ErrorLine, { error: error }), _jsxs(FormFooter, { left: way.getUrl && (_jsxs("a", { className: "underline", href: way.getUrl, target: "_blank", rel: "noreferrer", children: ["Get ", /^[AEIOU]/i.test(way.label) ? 'an' : 'a', " ", lower(way.label), " \u2197"] })), children: [_jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: close, children: "Cancel" }), _jsx(SaveButton, { issues: issues, busy: busy, disabled: empty, label: "Test and save", onSave: () => void save() })] })] }));
 }
 /** Open the sign-in in a new tab, then paste back the address it ended on. */
 function SigninForm({ way, close }) {
@@ -222,8 +238,5 @@ function SigninForm({ way, close }) {
             close();
         setBusy(false);
     };
-    return (_jsxs("ol", { className: "grid grid-cols-1 gap-3 border-t pt-2 text-sm", children: [_jsxs("li", { className: "flex items-center gap-2", children: [_jsx(Step, { n: 1 }), _jsx("span", { className: "flex-1", children: "Sign in in a new tab" }), _jsxs(Button, { size: "sm", variant: redirect === null ? 'default' : 'outline', onClick: () => void open(), children: [_jsx(ExternalLinkIcon, {}), redirect === null ? 'Open sign-in' : 'Open again'] })] }), _jsxs("li", { className: "grid grid-cols-1 gap-2", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(Step, { n: 2 }), _jsx(Label, { htmlFor: id, className: cn(redirect === null && 'text-muted-foreground'), children: _jsx(InfoLabel, { info: `The sign-in ends on ${redirect || signin.redirect || 'an address'} that does not load. That is expected: copy the whole address from that tab's address bar.`, children: "Paste the address it ended on" }) })] }), _jsx("span", { className: "flex gap-2 pl-7", children: _jsx(Input, { id: id, autoComplete: "off", disabled: redirect === null, placeholder: `${redirect || signin.redirect || 'http://localhost'}…`, className: "font-code text-xs", value: pasted, onChange: (e) => setPasted(e.target.value) }) })] }), _jsx(ErrorLine, { error: error }), _jsxs("li", { className: "flex items-center justify-end gap-1", children: [_jsx(IconButton, { icon: XIcon, label: "Cancel", onClick: close }), _jsx(SaveButton, { issues: issues, busy: busy, disabled: !p, label: "Finish", onSave: () => void finish() })] })] }));
-}
-function Step({ n }) {
-    return (_jsx("span", { className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-muted font-medium text-xs tabular-nums", children: n }));
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsx(SettingField, { label: way.label, info: way.info, children: _jsxs(Button, { size: "sm", variant: redirect === null ? 'default' : 'outline', onClick: () => void open(), children: [_jsx(ExternalLinkIcon, {}), redirect === null ? 'Open sign-in' : 'Open again'] }) }), _jsx(SettingField, { label: "Address", htmlFor: id, stack: true, info: `The sign-in ends on ${redirect || signin.redirect || 'an address'} that does not load. That is expected: copy the whole address from that tab's address bar and paste it here.`, children: _jsx(Input, { id: id, autoComplete: "off", disabled: redirect === null, placeholder: `${redirect || signin.redirect || 'http://localhost'}…`, className: "h-8 font-code text-xs", value: pasted, onChange: (e) => setPasted(e.target.value) }) }), _jsx(ErrorLine, { error: error }), _jsxs(FormFooter, { children: [_jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: close, children: "Cancel" }), _jsx(SaveButton, { issues: issues, busy: busy, disabled: !p, label: "Finish", onSave: () => void finish() })] })] }));
 }

package/dist/frame-script.d.ts

@@ -1,7 +1,10 @@
-export declare function FrameScriptDialog({ api, frame, name, open, onOpenChange, }: {
+import type { FrameRun } from '@columenlabs/lumen-ui-types/frames';
+export declare function FrameScriptDialog({ api, frame, name, runs, open, onOpenChange, }: {
     api: string;
     frame: string;
     name: string;
+    /** The last runs, newest first: when, how many rows, how long, who, and why one failed. */
+    runs?: FrameRun[];
     open: boolean;
     onOpenChange: (open: boolean) => void;
 }): import("react").JSX.Element;

package/dist/frame-script.js

@@ -47,7 +47,7 @@ function parseScript(was, text) {
         args: (o.args ?? {}),
     };
 }
-export function FrameScriptDialog({ api, frame, name, open, onOpenChange, }) {
+export function FrameScriptDialog({ api, frame, name, runs, open, onOpenChange, }) {
     const qc = useQueryClient();
     const assistant = useAssistantName();
     const read = useQuery({
@@ -96,8 +96,17 @@ export function FrameScriptDialog({ api, frame, name, open, onOpenChange, }) {
             setError(e.message);
         }
     };
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "flex h-[min(44rem,calc(100dvh-2rem))] flex-col sm:max-w-4xl", children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { children: ["Script \u00B7 ", name] }), _jsxs(DialogDescription, { children: ["What ", assistant, " runs to make these rows. Saved only if it runs."] })] }), read.isPending ? (_jsx(Skeleton, { className: "min-h-0 flex-1" })) : read.error ? (_jsxs(Alert, { variant: "destructive", children: [_jsx(AlertTitle, { children: "Couldn't read the script" }), _jsx(AlertDescription, { children: read.error.message })] })) : !script ? (_jsxs(Alert, { children: [_jsx(AlertTitle, { children: "No script" }), _jsxs(AlertDescription, { children: [assistant, " wrote these rows once: nothing runs to make them."] })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-end gap-1", children: [lang && (_jsx(Badge, { variant: "secondary", className: "font-mono", children: lang })), _jsx(IconButton, { icon: WrapTextIcon, label: wrap ? 'Stop wrapping lines' : 'Wrap long lines', pressed: wrap, onClick: () => setWrap(!wrap) })] }), _jsx(LumenCodeEditor, { className: "flex-1", value: text, lang: lang, wrap: wrap, onChange: setText }), error && (_jsxs(Alert, { variant: "destructive", className: "max-h-32 overflow-y-auto", children: [_jsx(AlertTitle, { children: "Didn't save" }), _jsx(AlertDescription, { className: "break-words font-mono text-xs", children: error })] }))] })), _jsxs(DialogFooter, { children: [_jsx(IconButton, { icon: RotateCcwIcon, label: "Undo my changes", disabled: !changed || save.isPending, onClick: () => {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "flex h-[min(44rem,calc(100dvh-2rem))] flex-col sm:max-w-4xl", children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { children: ["Script \u00B7 ", name] }), _jsxs(DialogDescription, { children: ["What ", assistant, " runs to make these rows. Saved only if it runs."] })] }), read.isPending ? (_jsx(Skeleton, { className: "min-h-0 flex-1" })) : read.error ? (_jsxs(Alert, { variant: "destructive", children: [_jsx(AlertTitle, { children: "Couldn't read the script" }), _jsx(AlertDescription, { children: read.error.message })] })) : !script ? (_jsxs(Alert, { children: [_jsx(AlertTitle, { children: "No script" }), _jsxs(AlertDescription, { children: [assistant, " wrote these rows once: nothing runs to make them."] })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-end gap-1", children: [lang && (_jsx(Badge, { variant: "secondary", className: "font-mono", children: lang })), _jsx(IconButton, { icon: WrapTextIcon, label: wrap ? 'Stop wrapping lines' : 'Wrap long lines', pressed: wrap, onClick: () => setWrap(!wrap) })] }), _jsx(LumenCodeEditor, { className: "flex-1", value: text, lang: lang, wrap: wrap, onChange: setText }), runs && runs.length > 0 && _jsx(RunList, { runs: runs, assistant: assistant }), error && (_jsxs(Alert, { variant: "destructive", className: "max-h-32 overflow-y-auto", children: [_jsx(AlertTitle, { children: "Didn't save" }), _jsx(AlertDescription, { className: "break-words font-mono text-xs", children: error })] }))] })), _jsxs(DialogFooter, { children: [_jsx(IconButton, { icon: RotateCcwIcon, label: "Undo my changes", disabled: !changed || save.isPending, onClick: () => {
                                 setText(original);
                                 setError(null);
                             } }), _jsxs(Button, { disabled: !script || save.isPending, onClick: run, children: [save.isPending ? _jsx(Spinner, {}) : _jsx(PlayIcon, {}), " Run and save"] })] })] }) }));
 }
+/** The frame's last runs, one line each; a failure's reason in its hover. */
+function RunList({ runs, assistant }) {
+    return (_jsx("ul", { className: "flex max-h-28 flex-col gap-0.5 overflow-y-auto text-xs text-muted-foreground", children: runs.map((r) => (_jsxs("li", { className: "flex min-w-0 items-center gap-2", title: r.error, children: [_jsx("span", { className: `size-1.5 shrink-0 rounded-full ${r.ok ? 'bg-[var(--meter-ok)]' : 'bg-destructive'}` }), _jsx("time", { className: "shrink-0", dateTime: r.at, children: new Date(r.at).toLocaleString('en-US', {
+                        month: 'short',
+                        day: 'numeric',
+                        hour: 'numeric',
+                        minute: '2-digit',
+                    }) }), _jsx("span", { className: "num shrink-0", children: r.ok ? `${r.rows.toLocaleString('en-US')} rows` : 'failed' }), _jsxs("span", { className: "num shrink-0", children: [(r.ms / 1000).toFixed(1), " s"] }), _jsx("span", { className: "min-w-0 truncate", children: r.ok ? `by ${r.by === 'you' ? 'you' : assistant}` : r.error })] }, r.at))) }));
+}

package/dist/index.d.ts

@@ -105,7 +105,7 @@ 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 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 WorkspacesConfig, WorkspacesProvider, WorkspacesSection, } from './workspaces.js';
+export { type WorkspaceApp, type WorkspaceDraftProps, WorkspacePage, type WorkspaceRecipe, type WorkspacesConfig, WorkspacesProvider, WorkspacesSection, } from './workspaces.js';
 export { CHART_INDICATORS, type ChartIndicator, type IndicatorValues, LINE_COLOR, computeIndicators, formulaIndicator, lineColor, resolveIndicator, runFormula, } from './market/indicators.js';
 export { IndicatorPicker } from './market/indicator-picker.js';
 export { type OptionChainField, type OptionChainRow, OptionChainTable, } from './market/option-chain.js';

package/dist/mcp-settings.js

@@ -7,7 +7,8 @@ import { useState } from 'react';
 // common `mcp-remote` bridge on the person's own computer, whose sign-in returns to localhost.
 import { LumenSelector } from './lumen-selector.js';
 import { IconButton } from './page.js';
-import { SettingRow } from './settings.js';
+import { SettingField, SettingValue } from './setting-parts.js';
+import { SettingsFooter } from './settings.js';
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from './ui/input-group.js';
 import { Tabs, TabsList, TabsTrigger } from './ui/tabs.js';
 const CLIENTS = {
@@ -52,14 +53,10 @@ function ClientSteps({ client, server }) {
     }
 }
 export function McpSettings({ servers, current }) {
-    const { copied, copy } = useCopy();
     const [serverId, setServerId] = useState(current ?? servers[0]?.id);
     const [client, setClient] = useState('claude');
     const server = servers.find((d) => d.id === serverId) ?? servers[0];
     if (!server)
         return null;
-    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("section", { className: "flex flex-col", children: [_jsx("h4", { className: "text-xs font-medium text-muted-foreground", children: "Servers" }), servers.map((d) => {
-                        const url = d.url;
-                        return (_jsx(SettingRow, { label: d.label, description: "MCP address", children: _jsxs(InputGroup, { className: "w-56 sm:w-80", children: [_jsx(InputGroupInput, { readOnly: true, value: url, "aria-label": `${d.label} MCP address`, className: "font-mono text-xs", onFocus: (e) => e.currentTarget.select() }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { size: "icon-xs", "aria-label": `Copy the ${d.label} address`, onClick: () => copy(url), children: copied === url ? _jsx(CheckIcon, {}) : _jsx(CopyIcon, {}) }) })] }) }, d.id));
-                    })] }), _jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("h4", { className: "text-xs font-medium text-muted-foreground", children: "Connect" }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [servers.length > 1 && (_jsx(LumenSelector, { label: "Server", size: "sm", className: "w-40", options: servers.map((d) => ({ value: d.id, label: d.label })), value: server.id, onChange: setServerId })), _jsx(LumenSelector, { label: "App", size: "sm", className: "w-36 md:hidden", options: Object.entries(CLIENTS).map(([k, label]) => ({ value: k, label })), value: client, onChange: (v) => setClient(v) })] }), _jsx(Tabs, { value: client, onValueChange: (v) => setClient(v), className: "max-md:hidden", children: _jsx(TabsList, { children: Object.entries(CLIENTS).map(([k, label]) => (_jsx(TabsTrigger, { value: k, children: label }, k))) }) }), _jsx(ClientSteps, { client: client, server: server })] }), _jsxs("p", { className: "flex items-start gap-1.5 text-xs text-muted-foreground", children: [_jsx(ShieldIcon, { className: "mt-0.5 size-3.5 shrink-0" }), "Every client signs in as you through your browser; there are no API keys. Sign-ins return only to known apps and to http://localhost or http://127.0.0.1 on your own computer."] })] }));
+    return (_jsxs("div", { className: "flex flex-col", children: [servers.map((d) => (_jsx(SettingField, { label: d.label, stack: true, children: _jsx(SettingValue, { value: d.url, label: `${d.label} address`, mono: true, copy: true }) }, d.id))), servers.length > 1 && (_jsx(SettingField, { label: "Connect", children: _jsx(LumenSelector, { label: "Server", size: "sm", className: "w-40", options: servers.map((d) => ({ value: d.id, label: d.label })), value: server.id, onChange: setServerId }) })), _jsxs(SettingField, { label: "From", children: [_jsx(LumenSelector, { label: "App", size: "sm", className: "w-36 md:hidden", options: Object.entries(CLIENTS).map(([k, label]) => ({ value: k, label })), value: client, onChange: (v) => setClient(v) }), _jsx(Tabs, { value: client, onValueChange: (v) => setClient(v), className: "max-md:hidden", children: _jsx(TabsList, { children: Object.entries(CLIENTS).map(([k, label]) => (_jsx(TabsTrigger, { value: k, children: label }, k))) }) })] }), _jsx("div", { className: "pt-3", children: _jsx(ClientSteps, { client: client, server: server }) }), _jsx(SettingsFooter, { children: _jsxs("p", { className: "flex items-start gap-1.5 text-xs text-muted-foreground", children: [_jsx(ShieldIcon, { className: "mt-0.5 size-3.5 shrink-0" }), "Every client signs in as you through your browser; there are no API keys. Sign-ins return only to known apps and to http://localhost or http://127.0.0.1 on your own computer."] }) })] }));
 }

package/dist/schedules.js

@@ -12,6 +12,7 @@ import { useIsMobile } from './hooks/use-mobile.js';
 import { LumenSelector } from './lumen-selector.js';
 import { IconButton } from './page.js';
 import { usePrefs, zoneAbbr } from './prefs.js';
+import { SettingField } from './setting-parts.js';
 import { useShell } from './shell.js';
 import { Badge } from './ui/badge.js';
 import { Button } from './ui/button.js';
@@ -118,13 +119,14 @@ function OnSwitch({ s, onSave }) {
             void onSave(s.id, { on }).finally(() => setPending(false));
         } }));
 }
-function Row({ label, children }) {
-    return (_jsxs("div", { className: "grid grid-cols-1 gap-1.5", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: label }), children] }));
+/** One setting in the editor: its label beside its control (`stack` puts it above on a phone). */
+function Row({ label, stack, end, children, }) {
+    return (_jsx(SettingField, { label: label, stack: stack, end: end, children: children }));
 }
 /** At (a daily schedule), Days and Time zone: the schedule editor's and New brief's. */
 function TimeFields({ kind, draft, set, }) {
     const zones = !draft.tz || ZONES.includes(draft.tz) ? ZONES : [draft.tz, ...ZONES];
-    return (_jsxs(_Fragment, { children: [kind === 'daily' ? (_jsx(Row, { label: "At", children: _jsx(Input, { type: "time", "aria-label": "At", className: "num w-32", value: draft.from, onChange: (e) => set({ from: e.target.value }) }) })) : null, _jsx(Row, { label: "Days", children: _jsx(ToggleGroup, { type: "multiple", variant: "outline", size: "sm", spacing: 1, className: "w-full", value: (draft.days ?? []).map(String), onValueChange: (v) => v.length && set({ days: v.map(Number) }), children: [1, 2, 3, 4, 5, 6, 0].map((d) => (_jsx(ToggleGroupItem, { value: String(d), className: "flex-1 px-0", children: DAYS[d] }, d))) }) }), _jsx(Row, { label: "Time zone", children: _jsx(LumenSelector, { label: "Time zone", className: "w-full", options: zones.map((z) => ({ value: z, label: z.replace('_', ' ') })), value: draft.tz, onChange: (tz) => set({ tz }) }) })] }));
+    return (_jsxs(_Fragment, { children: [kind === 'daily' ? (_jsx(Row, { label: "At", children: _jsx(Input, { type: "time", "aria-label": "At", className: "num w-32", value: draft.from, onChange: (e) => set({ from: e.target.value }) }) })) : null, _jsx(Row, { label: "Days", stack: true, children: _jsx(ToggleGroup, { type: "multiple", variant: "outline", size: "sm", spacing: 1, className: "w-full", value: (draft.days ?? []).map(String), onValueChange: (v) => v.length && set({ days: v.map(Number) }), children: [1, 2, 3, 4, 5, 6, 0].map((d) => (_jsx(ToggleGroupItem, { value: String(d), className: "flex-1 px-0", children: DAYS[d] }, d))) }) }), _jsx(Row, { label: "Time zone", children: _jsx(LumenSelector, { label: "Time zone", className: "w-full", options: zones.map((z) => ({ value: z, label: z.replace('_', ' ') })), value: draft.tz, onChange: (tz) => set({ tz }) }) })] }));
 }
 /** One schedule's settings, with Run now. */
 function Editor({ s, onSave, onRun, onRuns, recent, briefs, onClose, }) {
@@ -182,7 +184,7 @@ function Editor({ s, onSave, onRun, onRuns, recent, briefs, onClose, }) {
             setBusy(null);
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: s.name }), _jsx(SheetDescription, { children: when(s, timeZone) })] }), _jsxs("div", { className: "grid grid-cols-1 gap-5 overflow-y-auto px-4", children: [_jsx("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-xs", children: [
+    return (_jsxs(_Fragment, { children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: s.name }), _jsx(SheetDescription, { children: when(s, timeZone) })] }), _jsxs("div", { className: "flex flex-col overflow-y-auto px-4", children: [_jsx("dl", { className: "mb-2 grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-xs", children: [
                             ['Inspects', s.about.inspects],
                             ['Processes', s.about.processes],
                             ['Enriches', s.about.enriches],
@@ -190,7 +192,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: "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: () => {
+                            .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", stack: true, 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, _jsx(Row, { label: "On", end: _jsx(Switch, { "aria-label": `${s.name} on`, checked: draft.on, onCheckedChange: (on) => set({ on }) }) }), s.choices.length ? (_jsx(Row, { label: "Every", stack: true, 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: "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) })) })] }) }), _jsx(Row, { label: "Notify", end: _jsx(Switch, { "aria-label": "Notify when ready", checked: brief.notify ?? false, onCheckedChange: (notify) => setBrief((b) => ({ ...b, notify })) }) })] })) : null, s.waiting ? (_jsx("p", { className: "py-2 text-sm text-warning", children: s.waiting })) : s.next ? (_jsx(Row, { label: "Next run", children: _jsx("span", { className: "truncate text-sm", children: time(s.next) }) })) : null, recent && !ran ? (_jsx(Row, { label: "Last runs", stack: true, 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: "mt-2 self-start", onClick: () => {
                             assistant.loadChat(last.chat);
                             assistant.setOpen(true);
                             onClose();
@@ -258,5 +260,5 @@ function NewBrief({ create, onDone, }) {
             setBusy(false);
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "New brief" }), _jsxs(SheetDescription, { children: [assistantName, " works it out on a schedule, reads only, and sends it when it is ready."] })] }), _jsxs("div", { className: "grid grid-cols-1 gap-5 overflow-y-auto px-4", children: [_jsx(Row, { label: "Name", children: _jsx(Input, { "aria-label": "Name", maxLength: 60, placeholder: "Options brief", value: name, onChange: (e) => setName(e.target.value) }) }), _jsx(Row, { label: "Instructions", children: _jsx(Textarea, { "aria-label": "Instructions", rows: 6, maxLength: 4000, placeholder: `What ${assistantName} should look at and report, e.g. my short options expiring this week with their delta and P&L.`, value: instructions, onChange: (e) => setInstructions(e.target.value) }) }), _jsx(TimeFields, { kind: "daily", draft: time, set: (c) => setTime((t) => ({ ...t, ...c })) }), error ? (_jsx("p", { role: "alert", className: "text-xs text-loss", children: error })) : null] }), _jsx(SheetFooter, { className: "flex-row justify-end", children: _jsxs(Button, { size: "sm", disabled: busy || !name.trim() || !instructions.trim(), onClick: () => void add(), children: [_jsx(PlusIcon, {}), "Add brief"] }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "New brief" }), _jsxs(SheetDescription, { children: [assistantName, " works it out on a schedule, reads only, and sends it when it is ready."] })] }), _jsxs("div", { className: "grid grid-cols-1 gap-5 overflow-y-auto px-4", children: [_jsx(Row, { label: "Name", children: _jsx(Input, { "aria-label": "Name", maxLength: 60, placeholder: "Options brief", value: name, onChange: (e) => setName(e.target.value) }) }), _jsx(Row, { label: "Instructions", stack: true, children: _jsx(Textarea, { "aria-label": "Instructions", rows: 6, maxLength: 4000, placeholder: `What ${assistantName} should look at and report, e.g. my short options expiring this week with their delta and P&L.`, value: instructions, onChange: (e) => setInstructions(e.target.value) }) }), _jsx(TimeFields, { kind: "daily", draft: time, set: (c) => setTime((t) => ({ ...t, ...c })) }), error ? (_jsx("p", { role: "alert", className: "text-xs text-loss", children: error })) : null] }), _jsx(SheetFooter, { className: "flex-row justify-end", children: _jsxs(Button, { size: "sm", disabled: busy || !name.trim() || !instructions.trim(), onClick: () => void add(), children: [_jsx(PlusIcon, {}), "Add brief"] }) })] }));
 }

package/dist/setting-parts.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type ComponentType, type ReactNode } from 'react';
 import { type KeyTestResult } from './integrations.js';
 /** One setting inside an item: its label, then its control group, then an optional switch at the end. */
 export declare function SettingField({ label, info, htmlFor, end, stack, className, children, }: {
@@ -16,7 +16,7 @@ export declare function SettingField({ label, info, htmlFor, end, stack, classNa
     children?: ReactNode;
 }): import("react").JSX.Element;
 /** A value read in place: cut to one line with the full text on hover, with Copy and Replace inside. */
-export declare function SettingValue({ value, label, mono, copy, onReplace, replaceLabel, }: {
+export declare function SettingValue({ value, label, mono, copy, onReplace, replaceLabel, replaceIcon: ReplaceIcon, }: {
     value: string;
     /** The value's name for Copy's and Replace's accessible names. */
     label: string;
@@ -24,6 +24,10 @@ export declare function SettingValue({ value, label, mono, copy, onReplace, repl
     copy?: boolean;
     onReplace?: () => void;
     replaceLabel?: string;
+    /** Replace's icon: a pencil, or a sign-in for `Sign in again`. */
+    replaceIcon?: ComponentType<{
+        className?: string;
+    }>;
 }): import("react").JSX.Element;
 /** The five words a thing's status takes: Works, Failed, Not tested, Off, or a count. */
 export type SettingHealth = 'works' | 'failed' | 'untested' | 'off';

package/dist/setting-parts.js

@@ -18,10 +18,10 @@ 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-b border-border/60 py-1.5 last:border-b-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'), 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', }) {
+export function SettingValue({ value, label, mono = false, copy = false, onReplace, replaceLabel = 'Replace', replaceIcon: ReplaceIcon = PencilIcon, }) {
     const [copied, setCopied] = useState(false);
     const doCopy = async () => {
         try {
@@ -33,7 +33,7 @@ export function SettingValue({ value, label, mono = false, copy = false, onRepla
             setCopied(false);
         }
     };
-    return (_jsxs(InputGroup, { className: "h-8 min-w-0", children: [_jsx("span", { className: cn('min-w-0 flex-1 truncate px-2.5 text-sm', mono && 'font-code text-xs'), title: value, children: value }), (copy || onReplace) && (_jsxs(InputGroupAddon, { align: "inline-end", children: [copy && (_jsx(InputGroupButton, { size: "icon-xs", "aria-label": copied ? 'Copied' : `Copy ${label.toLowerCase()}`, title: copied ? 'Copied' : `Copy ${label.toLowerCase()}`, onClick: () => void doCopy(), children: copied ? _jsx(CheckIcon, {}) : _jsx(CopyIcon, {}) })), onReplace && (_jsx(InputGroupButton, { size: "icon-xs", "aria-label": `${replaceLabel} ${label.toLowerCase()}`, title: `${replaceLabel} ${label.toLowerCase()}`, onClick: onReplace, children: _jsx(PencilIcon, {}) }))] }))] }));
+    return (_jsxs(InputGroup, { className: "h-8 min-w-0", children: [_jsx("span", { className: cn('min-w-0 flex-1 truncate px-2.5 text-sm', mono && 'font-code text-xs'), title: value, children: value }), (copy || onReplace) && (_jsxs(InputGroupAddon, { align: "inline-end", children: [copy && (_jsx(InputGroupButton, { size: "icon-xs", "aria-label": copied ? 'Copied' : `Copy ${label.toLowerCase()}`, title: copied ? 'Copied' : `Copy ${label.toLowerCase()}`, onClick: () => void doCopy(), children: copied ? _jsx(CheckIcon, {}) : _jsx(CopyIcon, {}) })), onReplace && (_jsx(InputGroupButton, { size: "icon-xs", "aria-label": `${replaceLabel} ${label.toLowerCase()}`, title: `${replaceLabel} ${label.toLowerCase()}`, onClick: onReplace, children: _jsx(ReplaceIcon, {}) }))] }))] }));
 }
 /** Where a thing stands from its switch and last test. */
 export function settingHealth(on, test) {

package/dist/workspaces.d.ts

@@ -1,3 +1,4 @@
+import { type FrameScript } from '@columenlabs/lumen-ui-types/frames';
 import { type CustomViewConfig } from '@columenlabs/lumen-ui-types/views';
 import { type ComponentType, type ReactNode } from 'react';
 import { type Crumb } from './page.js';
@@ -24,6 +25,20 @@ export interface WorkspacesConfig {
     defaultConfig?: (domain: string) => CustomViewConfig | null;
     /** The empty workspace's example ask, on an app: `put my holdings with their earnings dates in`. */
     example?: (app: string) => string;
+    /** Recipes a person picks to start a tab by hand (+ in the tab bar); none hides the +. */
+    recipes?: WorkspaceRecipe[];
+}
+/** A saved data pull a person can start a tab from: one call to one of the product's read tools. */
+export interface WorkspaceRecipe {
+    id: string;
+    /** The tab's name and the picker's row: `Jobs scoring 70+`. */
+    label: string;
+    /** When to pick it, under the label. */
+    description?: string;
+    /** The picker's section: the app the rows come from. */
+    group?: string;
+    icon?: Icon;
+    recipe: FrameScript;
 }
 /** The product's apps and domains for its workspaces. */
 export declare const WorkspacesProvider: import("react").Provider<WorkspacesConfig>;

package/dist/workspaces.js

@@ -4,7 +4,7 @@ import { customViewConfigSchema, frameSpace, } from '@columenlabs/lumen-ui-types
 import { workspacePath, } from '@columenlabs/lumen-ui-types/workspaces';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useNavigate, useParams, useSearch } from '@tanstack/react-router';
-import { ArrowRightLeftIcon, CalendarIcon, ExternalLinkIcon, HashIcon, LayersIcon, PencilIcon, SparklesIcon, TableIcon, TextCursorInputIcon, Trash2Icon, TypeIcon, } from 'lucide-react';
+import { ArrowRightLeftIcon, CalendarIcon, ExternalLinkIcon, HashIcon, LayersIcon, PencilIcon, PlusIcon, RefreshCwIcon, SparklesIcon, TableIcon, TextCursorInputIcon, Trash2Icon, TypeIcon, } from 'lucide-react';
 import { createContext, useContext, useEffect, useMemo, useState, } from 'react';
 import { apiJson } from './api-fetch.js';
 import { useAssistant, useAssistantName, useAssistantPending } from './assistant-context.js';
@@ -206,9 +206,48 @@ function WorkspaceBody({ api, w, tab, draft, }) {
                 }).then(() => qc.invalidateQueries({ queryKey: WORKSPACES_KEY }));
         }, { id: `ws-save:${tab.id}`, duration: 4000 });
     };
-    const intro = (_jsx(LumenTabs, { tabs: w.tabs.map((t) => ({ value: t.id, label: t.name, icon: tabIcon(t) })), value: tab?.id, onChange: (t) => void navigate({ href: workspacePath(w.id, t), replace: true }), actions: tab && _jsx(IconButton, { icon: PencilIcon, label: "Edit tab", onClick: () => setEditingTab(true) }) }));
+    // + in the tab bar: a tab from a recipe, run once now; ↻ in the header runs every tab again.
+    const addTab = useMutation({
+        mutationFn: (r) => json(`${api}/workspaces/${w.id}/tabs`, {
+            method: 'POST',
+            body: JSON.stringify({ name: r.label, recipe: r.recipe }),
+        }),
+        onSuccess: ({ workspace, tab: t }) => {
+            put(workspace);
+            void qc.invalidateQueries({ queryKey: [...WORKSPACES_KEY, api, 'list'] });
+            void navigate({ href: workspacePath(w.id, t), replace: true });
+        },
+        onError: (e) => lumenToast.error(`Couldn’t add the tab: ${e.message}`),
+    });
+    const runAll = useMutation({
+        mutationFn: () => json(`${api}/workspaces/${w.id}/refresh`, {
+            method: 'POST',
+        }),
+        onSuccess: (r) => {
+            void qc.invalidateQueries({ queryKey: WORKSPACES_KEY });
+            const ran = `Ran ${r.ran} ${r.ran === 1 ? 'tab' : 'tabs'}: ${r.rows.toLocaleString('en-US')} rows`;
+            if (r.failed.length)
+                lumenToast.warning(`${ran}. Failed: ${r.failed.join(', ')}`);
+            else
+                lumenToast.success(ran);
+        },
+        onError: (e) => lumenToast.error(`Couldn’t run the tabs: ${e.message}`),
+    });
+    const recipes = config.recipes ?? [];
+    const runnable = w.tabs.some((t) => 'frame' in t.source);
+    const intro = (_jsx(LumenTabs, { tabs: w.tabs.map((t) => ({ value: t.id, label: t.name, icon: tabIcon(t) })), value: tab?.id, onChange: (t) => void navigate({ href: workspacePath(w.id, t), replace: true }), actions: _jsxs(_Fragment, { children: [recipes.length > 0 && (_jsx(LumenSelector, { trigger: "icon", icon: PlusIcon, label: addTab.isPending ? 'Adding a tab…' : 'New tab from a recipe', align: "end", disabled: addTab.isPending, options: recipes.map((r) => ({
+                        value: r.id,
+                        label: r.label,
+                        description: r.description,
+                        group: r.group,
+                        icon: r.icon,
+                    })), value: null, onChange: (id) => {
+                        const r = recipes.find((x) => x.id === id);
+                        if (r)
+                            addTab.mutate(r);
+                    } })), tab && (_jsx(IconButton, { icon: PencilIcon, label: "Edit tab", onClick: () => setEditingTab(true) }))] }) }));
     const crumbs = [{ label: 'Workspaces' }, { label: w.name }];
-    const actions = (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: TextCursorInputIcon, label: "Rename workspace", onClick: () => setNaming('workspace') }), moveTo.length > 0 && (_jsx(LumenSelector, { trigger: "icon", icon: ArrowRightLeftIcon, label: `Move to ${noun}`, align: "end", search: false, options: moveTo.map((a) => ({ value: a.id, label: a.label, icon: a.icon })), value: null, onChange: (a) => move.mutate(a) })), _jsx(IconButton, { icon: Trash2Icon, label: "Delete workspace", className: "text-muted-foreground hover:text-destructive", onClick: () => setRemoving('workspace') })] }));
+    const actions = (_jsxs(_Fragment, { children: [runnable && (_jsx(IconButton, { icon: RefreshCwIcon, label: runAll.isPending ? 'Running every tab…' : 'Run every tab again', disabled: runAll.isPending, className: runAll.isPending ? '[&_svg]:animate-spin' : undefined, onClick: () => runAll.mutate() })), _jsx(IconButton, { icon: TextCursorInputIcon, label: "Rename workspace", onClick: () => setNaming('workspace') }), moveTo.length > 0 && (_jsx(LumenSelector, { trigger: "icon", icon: ArrowRightLeftIcon, label: `Move to ${noun}`, align: "end", search: false, options: moveTo.map((a) => ({ value: a.id, label: a.label, icon: a.icon })), value: null, onChange: (a) => move.mutate(a) })), _jsx(IconButton, { icon: Trash2Icon, label: "Delete workspace", className: "text-muted-foreground hover:text-destructive", onClick: () => setRemoving('workspace') })] }));
     const dialogs = (_jsxs(_Fragment, { children: [_jsx(NameDialog, { open: naming !== null, title: "Rename workspace", value: w.name, onClose: () => setNaming(null), onSave: (name) => rename.mutate(name) }), tab && (_jsx(LumenTabDrawer, { open: editingTab, onClose: () => setEditingTab(false), name: tab.name, icon: tab.config?.icon, fallback: tabIcon({ ...tab, config: null }), description: "Its filters and columns save as you change them.", maxName: 60, busy: editTab.isPending, error: editTab.error?.message, onSave: ({ name, icon }) => editTab.mutate(icon === (tab.config?.icon ?? null)
                     ? { name }
                     : { name, config: { ...tabConfig(tab, w, config.defaultConfig), name, icon } }), remove: {
@@ -226,7 +265,9 @@ function WorkspaceBody({ api, w, tab, draft, }) {
                     title: 'No tabs yet',
                     icon: LayersIcon,
                     kind: 'widget',
-                    children: (_jsxs("p", { className: "text-sm text-muted-foreground", children: ["Ask ", assistant, " for data and to open it here: \u201C", config.example?.(here) ?? 'put this month’s numbers in', " ", w.name, "\u201D."] })),
+                    children: (_jsx("p", { className: "text-sm text-muted-foreground", children: recipes.length > 0
+                            ? 'Pick a recipe from + above: its rows open here as a tab, and run again whenever you tap ↻.'
+                            : `Ask ${assistant} for data and to open it here: “${config.example?.(here) ?? 'put this month’s numbers in'} ${w.name}”.` })),
                 },
             ] }));
     }
@@ -290,6 +331,7 @@ assistant = 'Assistant') {
                 value: (r) => r.v[i] ?? null,
                 format: c.format,
                 amount: c.amount,
+                ...(c.tags ? { tags: true } : {}),
                 filterable: true,
                 groupable: c.type !== 'number',
                 ...(c.type === 'number' ? { aggregate: c.format === 'percent' ? 'mean' : 'sum' } : {}),
@@ -438,7 +480,7 @@ function FrameTab({ api, tab, meta, crumbs, actions, intro, onChange, }) {
                                 day: 'numeric',
                                 hour: 'numeric',
                                 minute: '2-digit',
-                            }) }), failed ? (_jsx(StatusItem, { label: "Refresh failed", className: "min-w-0", value: _jsx("span", { className: "inline-block max-w-72 truncate align-bottom", title: failed, children: failed }), ok: false })) : null] }) }, `frame:${tab.id}`), assistantMade && (_jsx(FrameScriptDialog, { api: api, frame: current.id, name: current.name, open: scriptOpen, onOpenChange: setScriptOpen }))] }));
+                            }) }), failed ? (_jsx(StatusItem, { label: "Refresh failed", className: "min-w-0", value: _jsx("span", { className: "inline-block max-w-72 truncate align-bottom", title: failed, children: failed }), ok: false })) : null] }) }, `frame:${tab.id}`), assistantMade && (_jsx(FrameScriptDialog, { api: api, frame: current.id, name: current.name, runs: current.runs, open: scriptOpen, onOpenChange: setScriptOpen }))] }));
 }
 /** A tab's icon: the person's pick, else the assistant's mark on a frame, else a table. */
 function tabIcon(t) {

package/package.json

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