@columenlabs/lumen-ui 0.1.196 → 0.1.198

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

@@ -0,0 +1,3 @@
+export default function ChatMarkdown({ children }: {
+    children: string;
+}): import("react").JSX.Element;

package/dist/assistant/chat-markdown.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { cn } from '../lib/utils.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table.js';
+const ALLOWED = [
+    'p',
+    'strong',
+    'em',
+    'del',
+    'code',
+    'ul',
+    'ol',
+    'li',
+    'a',
+    'pre',
+    'br',
+    'table',
+    'thead',
+    'tbody',
+    'tr',
+    'th',
+    'td',
+];
+// A number, with an optional sign, currency, thousands, decimals and a short unit (12, −3.5%,
+// $1,204.10, 2.1×, 4.2K). A dash or an empty cell does not decide a column either way.
+const NUMBER = /^[−+\-]?[$€£]?\d[\d,]*(\.\d+)?\s?(%|×|x|[KMBkmb])?$/;
+const BLANK = /^(|—|–|-|n\/a)$/i;
+function text(node) {
+    if (node.type === 'text')
+        return node.value ?? '';
+    return (node.children ?? []).map(text).join('');
+}
+const cells = (row) => (row.children ?? []).filter((c) => c.tagName === 'td' || c.tagName === 'th');
+const rows = (section) => (section?.children ?? []).filter((c) => c.tagName === 'tr');
+/**
+ * Marks each cell of a column that holds only numbers `dataNum`, so the column right-aligns on
+ * one edge, and gives every cell its text as `dataText` for its hover.
+ */
+function rehypeNumberColumns() {
+    const visit = (node) => {
+        if (node.tagName === 'table') {
+            const head = node.children?.find((c) => c.tagName === 'thead');
+            const body = node.children?.find((c) => c.tagName === 'tbody');
+            const bodyRows = rows(body);
+            const width = Math.max(0, ...[...rows(head), ...bodyRows].map((r) => cells(r).length));
+            const numeric = Array.from({ length: width }, (_, i) => {
+                const values = bodyRows.map((r) => text(cells(r)[i] ?? { type: 'root' }).trim());
+                const filled = values.filter((v) => !BLANK.test(v));
+                return filled.length > 0 && filled.every((v) => NUMBER.test(v));
+            });
+            for (const r of [...rows(head), ...bodyRows]) {
+                cells(r).forEach((c, i) => {
+                    c.properties = { ...c.properties, dataText: text(c).trim() };
+                    if (numeric[i])
+                        c.properties.dataNum = '';
+                });
+            }
+            return;
+        }
+        node.children?.forEach(visit);
+    };
+    return (tree) => visit(tree);
+}
+// A header keeps the label font; only its edge follows the numbers under it.
+const cellClass = (p, head = false) => cn('max-w-xs overflow-hidden text-ellipsis', p['data-num'] !== undefined && (head ? 'text-right' : 'num text-right'));
+const components = {
+    table: ({ children }) => (_jsx("div", { className: "not-prose my-2 rounded-md border", children: _jsx(Table, { className: "text-xs", children: children }) })),
+    thead: ({ children }) => _jsx(TableHeader, { children: children }),
+    tbody: ({ children }) => _jsx(TableBody, { children: children }),
+    tr: ({ children }) => _jsx(TableRow, { children: children }),
+    th: (p) => (_jsx(TableHead, { className: cn(cellClass(p, true), 'text-muted-foreground'), title: p['data-text'], children: p.children })),
+    td: (p) => (_jsx(TableCell, { className: cellClass(p), title: p['data-text'], children: p.children })),
+};
+export default function ChatMarkdown({ children }) {
+    return (_jsx(Markdown, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeNumberColumns], allowedElements: ALLOWED, unwrapDisallowed: true, components: components, children: children }));
+}

package/dist/assistant/lumen-assistant.js

@@ -21,8 +21,8 @@ import { Textarea } from '../ui/textarea.js';
 import { chatMarkdown, chatTurns, copyMarkdown, turnMarkdown } from './copy.js';
 import { composeAssistant, selectionRef, useComposeRequest, usePageSelection, useShownAssistantSources, } from './sources.js';
 import { useAssistantChat } from './use-assistant-chat.js';
-// The Markdown renderer loads with the first answer (lazy-part.tsx).
-const Markdown = lazyPart(() => import('react-markdown').then((m) => m.default));
+// The Markdown renderer (tables included) loads with the first answer (lazy-part.tsx).
+const ChatMarkdown = lazyPart(() => import('./chat-markdown.js').then((m) => m.default));
 /** The main model's context drawn full (tokens); the mark sits where the assistant compacts. */
 const CONTEXT_MAX = 200_000;
 const COMPACT_AT = 150_000;
@@ -256,7 +256,7 @@ function Item({ item, onSettle, busy, }) {
         case 'user':
             return (_jsxs("div", { className: "ml-8 self-end rounded-lg bg-muted px-3 py-2 text-sm whitespace-pre-wrap", children: [(item.tier || item.refs?.length) && (_jsxs("span", { className: "mb-1 flex flex-wrap gap-1", children: [item.tier && _jsx(ComposerChip, { sign: "@", label: tierName(item.tier) }), item.refs?.map((r, i) => (_jsx(ComposerChip, { sign: "#", label: r.label }, `${r.kind}:${r.label}:${i}`)))] })), item.text, item.context && (_jsxs("span", { className: "mt-1 block text-muted-foreground text-xs", children: ["on ", item.context] }))] }));
         case 'text':
-            return (_jsxs("div", { className: "prose-sm text-sm leading-relaxed [&_code]:font-code [&_code]:text-xs [&_li]:ml-4 [&_ol]:list-decimal [&_p]:my-1.5 [&_ul]:list-disc", children: [_jsx(Markdown, { allowedElements: ['p', 'strong', 'em', 'code', 'ul', 'ol', 'li', 'a', 'pre', 'br'], unwrapDisallowed: true, children: item.text }), item.live && (_jsx("span", { className: "ml-0.5 inline-block h-3.5 w-1.5 animate-pulse bg-foreground/60 align-middle" }))] }));
+            return (_jsxs("div", { className: "prose-sm text-sm leading-relaxed [&_code]:font-code [&_code]:text-xs [&_li]:ml-4 [&_ol]:list-decimal [&_p]:my-1.5 [&_ul]:list-disc", children: [_jsx(ChatMarkdown, { children: item.text }), item.live && (_jsx("span", { className: "ml-0.5 inline-block h-3.5 w-1.5 animate-pulse bg-foreground/60 align-middle" }))] }));
         case 'step':
             return _jsx(Step, { step: item, live: !!item.live });
         case 'draft':

package/dist/browser-runner.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Runs a frame's browser recipe (a script with `runtime: 'browser'`) in the person's page and
+ * saves what it gives as the frame's rows: one write. The script runs in a Web Worker inside an
+ * iframe with `sandbox="allow-scripts"` (the server's `<api>/sandbox` page: an opaque origin, no
+ * cookies, no network of its own), so it cannot reach the app or its data. Its one way out is
+ * `hub.fetch(url, {method, body, key})`, which this file carries to the app's fetch proxy
+ * (`<api>/fetch`: allowlisted hosts, a named data key added server side) and back.
+ *
+ * The script is the body of an async function of `fetched` (the answers to its `requests`, in
+ * order: `{url, vars, status, body}`) and `hub`. It returns rows, or `{columns?, rows}` where
+ * `columns` picks and orders the fields. Limits: `BROWSER_RUN_MS`, `FETCH_CALLS` web reads a run
+ * and the frame's own caps (rows, size), which the server checks when it saves.
+ */
+import { type FrameData, type FrameScript } from '@columenlabs/lumen-ui-types/frames';
+/** Longest a browser run may take before it stops (the worker is ended, a loop included). */
+export declare const BROWSER_RUN_MS = 30000;
+/**
+ * Runs a browser script once and gives back its rows, or throws why it failed. Each web read it
+ * makes goes through `<api>/fetch`; more than `FETCH_CALLS` a run is refused.
+ */
+export declare function runBrowserScript(api: string, script: Extract<FrameScript, {
+    kind: 'script';
+}>, signal?: AbortSignal): Promise<Record<string, unknown>[]>;
+/**
+ * Runs a frame's browser recipe and saves the rows (or why it failed) on the frame: the ↻ of a
+ * browser tab. Gives back the frame as saved; a failed run throws after it is recorded.
+ */
+export declare function runBrowserFrame(api: string, id: string): Promise<FrameData>;

package/dist/browser-runner.js

@@ -0,0 +1,126 @@
+/**
+ * Runs a frame's browser recipe (a script with `runtime: 'browser'`) in the person's page and
+ * saves what it gives as the frame's rows: one write. The script runs in a Web Worker inside an
+ * iframe with `sandbox="allow-scripts"` (the server's `<api>/sandbox` page: an opaque origin, no
+ * cookies, no network of its own), so it cannot reach the app or its data. Its one way out is
+ * `hub.fetch(url, {method, body, key})`, which this file carries to the app's fetch proxy
+ * (`<api>/fetch`: allowlisted hosts, a named data key added server side) and back.
+ *
+ * The script is the body of an async function of `fetched` (the answers to its `requests`, in
+ * order: `{url, vars, status, body}`) and `hub`. It returns rows, or `{columns?, rows}` where
+ * `columns` picks and orders the fields. Limits: `BROWSER_RUN_MS`, `FETCH_CALLS` web reads a run
+ * and the frame's own caps (rows, size), which the server checks when it saves.
+ */
+import { FETCH_CALLS, fetchCalls, runsInBrowser, } from '@columenlabs/lumen-ui-types/frames';
+import { apiJson } from './api-fetch.js';
+/** Longest a browser run may take before it stops (the worker is ended, a loop included). */
+export const BROWSER_RUN_MS = 30_000;
+/** What the script gave, as rows; a bad shape says what it should be. */
+function rowsOf(out) {
+    const o = out;
+    const list = Array.isArray(out) ? out : Array.isArray(o?.rows) ? o.rows : null;
+    if (!list)
+        throw new Error('The script must return rows: a list, or {columns, rows}.');
+    const rows = list.map((r) => r && typeof r === 'object' && !Array.isArray(r)
+        ? r
+        : { value: r });
+    const columns = Array.isArray(o?.columns) ? o.columns.map(String) : null;
+    return columns
+        ? rows.map((r) => Object.fromEntries(columns.map((c) => [c, r[c] ?? null])))
+        : rows;
+}
+/**
+ * Runs a browser script once and gives back its rows, or throws why it failed. Each web read it
+ * makes goes through `<api>/fetch`; more than `FETCH_CALLS` a run is refused.
+ */
+export async function runBrowserScript(api, script, signal) {
+    let reads = 0;
+    const read = async (call) => {
+        if (++reads > FETCH_CALLS)
+            throw new Error(`A run makes at most ${FETCH_CALLS} web reads.`);
+        return apiJson(`${api}/fetch`, { method: 'POST', body: JSON.stringify(call), signal }, 'workspace.fetch');
+    };
+    // The recipe's own requests first, so the script starts with their answers.
+    const fetched = script.requests
+        ? await Promise.all(fetchCalls(script.requests).map(async (c) => {
+            const a = await read({ url: c.url, method: c.method, body: c.body, key: c.key });
+            return { url: c.url, vars: c.vars, status: a.status, body: a.body };
+        }))
+        : [];
+    const frame = document.createElement('iframe');
+    frame.setAttribute('sandbox', 'allow-scripts');
+    frame.setAttribute('aria-hidden', 'true');
+    frame.tabIndex = -1;
+    frame.hidden = true;
+    frame.src = `${api}/sandbox`;
+    return new Promise((resolve, reject) => {
+        let settled = false;
+        const finish = (fn) => {
+            if (settled)
+                return;
+            settled = true;
+            clearTimeout(timer);
+            window.removeEventListener('message', onMessage);
+            signal?.removeEventListener('abort', onAbort);
+            frame.remove();
+            fn();
+        };
+        const timer = setTimeout(() => finish(() => reject(new Error(`The script took over ${BROWSER_RUN_MS / 1000} s, so it stopped.`))), BROWSER_RUN_MS);
+        const onAbort = () => finish(() => reject(new DOMException('Stopped', 'AbortError')));
+        signal?.addEventListener('abort', onAbort);
+        const post = (m) => frame.contentWindow?.postMessage(m, '*');
+        function onMessage(e) {
+            // Only this run's own frame speaks here; its origin is opaque ("null").
+            if (e.source !== frame.contentWindow)
+                return;
+            const m = (e.data ?? {});
+            if (m.type === 'ready')
+                post({ type: 'run', code: script.code, fetched });
+            else if (m.type === 'fetch') {
+                const init = m.init ?? {};
+                read({
+                    url: String(m.url),
+                    method: init.method === 'POST' ? 'POST' : 'GET',
+                    ...(typeof init.body === 'string' ? { body: init.body } : {}),
+                    ...(typeof init.key === 'string' ? { key: init.key } : {}),
+                }).then((result) => post({ type: 'fetched', id: m.id, result }), (err) => post({ type: 'fetched', id: m.id, error: err.message }));
+            }
+            else if (m.type === 'done') {
+                if (m.error)
+                    finish(() => reject(new Error(m.error)));
+                else
+                    finish(() => {
+                        try {
+                            resolve(rowsOf(m.result));
+                        }
+                        catch (err) {
+                            reject(err);
+                        }
+                    });
+            }
+        }
+        window.addEventListener('message', onMessage);
+        document.body.appendChild(frame);
+    });
+}
+/**
+ * Runs a frame's browser recipe and saves the rows (or why it failed) on the frame: the ↻ of a
+ * browser tab. Gives back the frame as saved; a failed run throws after it is recorded.
+ */
+export async function runBrowserFrame(api, id) {
+    const { script } = await apiJson(`${api}/frames/${id}/script`, {}, 'workspace.script');
+    if (!script || !runsInBrowser(script) || script.kind !== 'script')
+        throw new Error('This tab has no browser script to run.');
+    const started = performance.now();
+    const save = (body) => apiJson(`${api}/frames/${id}/rows`, { method: 'PUT', body: JSON.stringify(body) }, 'workspace.rows');
+    let rows;
+    try {
+        rows = await runBrowserScript(api, script);
+    }
+    catch (err) {
+        const error = err.message || 'The script failed.';
+        await save({ error, ms: Math.round(performance.now() - started) }).catch(() => undefined);
+        throw err;
+    }
+    return save({ rows, ms: Math.round(performance.now() - started) });
+}

package/dist/frame-script.js

@@ -4,6 +4,7 @@ import { PlayIcon, RotateCcwIcon, WrapTextIcon } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
 import { apiJson } from './api-fetch.js';
 import { useAssistantName } from './assistant-context.js';
+import { runBrowserFrame } from './browser-runner.js';
 // A frame's Script editor: the one script that makes an assistant's table (a call as
 // JSON, SQL, or JavaScript), as code the person reads and edits, in a dialog off the card's signal
 // dot or ⋯ menu. Run and save runs the edited script once as the person, with the read tools the
@@ -25,12 +26,17 @@ function scriptText(s) {
         return { text: s.code, lang: 'js' };
     if (s.kind === 'sql')
         return { text: s.query, lang: 'sql' };
+    if (s.kind === 'fetch') {
+        const { kind: _k, ...reads } = s;
+        return { text: JSON.stringify(reads, null, 2), lang: 'json' };
+    }
     return { text: JSON.stringify({ fn: s.fn, args: s.args }, null, 2), lang: 'json' };
 }
 /** The edited text back as a script; a call that is not JSON says where. */
 function parseScript(was, text) {
+    // A browser script keeps where it runs and the reads it starts with.
     if (was.kind === 'script')
-        return { kind: 'script', code: text };
+        return { ...was, code: text };
     if (was.kind === 'sql')
         return { kind: 'sql', query: text };
     let v;
@@ -38,9 +44,11 @@ function parseScript(was, text) {
         v = JSON.parse(text);
     }
     catch (e) {
-        throw new Error(`The call is not valid JSON: ${e.message}`);
+        throw new Error(`The recipe is not valid JSON: ${e.message}`);
     }
     const o = (v ?? {});
+    if (was.kind === 'fetch')
+        return { ...o, kind: 'fetch' };
     return {
         kind: 'call',
         fn: String(o.fn ?? ''),
@@ -69,11 +77,15 @@ export function FrameScriptDialog({ api, frame, name, runs, open, onOpenChange,
         setError(null);
     }, [open, original]);
     const save = useMutation({
-        mutationFn: (next) => json(`${api}/frames/${frame}/script`, {
-            method: 'PUT',
-            headers: { 'content-type': 'application/json' },
-            body: JSON.stringify({ script: next }),
-        }),
+        // A browser script is kept first (the server runs no code), then run here and its rows saved.
+        mutationFn: async (next) => {
+            const kept = await json(`${api}/frames/${frame}/script`, {
+                method: 'PUT',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ script: next }),
+            });
+            return kept.meta.browser ? runBrowserFrame(api, frame) : kept;
+        },
         onSuccess: (data) => {
             qc.setQueryData(frameKey(api, frame), data);
             void qc.invalidateQueries({ queryKey: [...frameKey(api, frame), 'script'] });
@@ -96,7 +108,9 @@ export function FrameScriptDialog({ api, frame, name, runs, 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 }), 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: () => {
+    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] }), _jsx(DialogDescription, { children: script?.kind === 'script' && script.runtime === 'browser'
+                                ? 'Runs in your browser, in a sandbox, to make these rows.'
+                                : `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"] })] })] }) }));

package/dist/index.d.ts

@@ -105,6 +105,7 @@ export { type AppViewState, useAppView } from './app-views.js';
 export { type ScreenApi, type ScreenMap, type ScreenOutcome, type ScreenStatus, type WorkspaceOnScreen, type AssistantMove, type AssistantMoveHandlers, type AssistantPage, type AssistantPageType, AssistantScreenProvider, screenMapFor, useAssistantMoves, useAssistantPages, useAssistantScreen, useAssistantWorkspace, } from './assistant-screen.js';
 export { type AssistantActions, AssistantContext, type AssistantNote, type AssistantRef, type AssistantSlot, useAssistant, AssistantPendingContext, useAssistantName, useAssistantNote, useAssistantPending, } from './assistant-context.js';
 export { WORKSPACES_KEY, frameKey, workspacesListQuery } from './workspace-keys.js';
+export { BROWSER_RUN_MS, runBrowserFrame, runBrowserScript } from './browser-runner.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';

package/dist/index.js

@@ -112,6 +112,7 @@ export { useAppView } from './app-views.js';
 export { AssistantScreenProvider, screenMapFor, useAssistantMoves, useAssistantPages, useAssistantScreen, useAssistantWorkspace, } from './assistant-screen.js';
 export { AssistantContext, useAssistant, AssistantPendingContext, useAssistantName, useAssistantNote, useAssistantPending, } from './assistant-context.js';
 export { WORKSPACES_KEY, frameKey, workspacesListQuery } from './workspace-keys.js';
+export { BROWSER_RUN_MS, runBrowserFrame, runBrowserScript } from './browser-runner.js';
 export { WorkspacePage, WorkspacesProvider, WorkspacesSection, } from './workspaces.js';
 export { CHART_INDICATORS, LINE_COLOR, computeIndicators, formulaIndicator, lineColor, resolveIndicator, runFormula, } from './market/indicators.js';
 export { IndicatorPicker } from './market/indicator-picker.js';

package/dist/workspaces-config.d.ts

@@ -1,5 +1,5 @@
 import type { FrameScript } from '@columenlabs/lumen-ui-types/frames';
-import type { CustomViewConfig } from '@columenlabs/lumen-ui-types/views';
+import type { CustomViewConfig, ViewFormula } from '@columenlabs/lumen-ui-types/views';
 import { type ComponentType } from 'react';
 type Icon = ComponentType<{
     className?: string;
@@ -38,6 +38,8 @@ export interface WorkspaceRecipe {
     group?: string;
     icon?: Icon;
     recipe: FrameScript;
+    /** Formula columns the tab's layout starts with (dew point from temperature and humidity). */
+    formulas?: ViewFormula[];
 }
 /** The product's apps and domains for its workspaces. */
 export declare const WorkspacesProvider: import("react").Provider<WorkspacesConfig>;

package/dist/workspaces.js

@@ -4,11 +4,12 @@ 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, PlusIcon, RefreshCwIcon, SparklesIcon, TableIcon, TextCursorInputIcon, Trash2Icon, TypeIcon, } from 'lucide-react';
-import { useEffect, useMemo, useState } from 'react';
+import { ArrowRightLeftIcon, CalendarIcon, CodeIcon, ExternalLinkIcon, FileSpreadsheetIcon, HashIcon, LayersIcon, PencilIcon, PlusIcon, RefreshCwIcon, SparklesIcon, TableIcon, TextCursorInputIcon, Trash2Icon, TypeIcon, WorkflowIcon, } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { apiJson } from './api-fetch.js';
 import { useAssistant, useAssistantName, useAssistantPending } from './assistant-context.js';
 import { useAssistantWorkspace } from './assistant-screen.js';
+import { runBrowserFrame } from './browser-runner.js';
 import { LumenConfirm } from './confirm.js';
 import { FrameScriptDialog } from './frame-script.js';
 import { editedCells, editedKey, frameColor, useFrameEdits } from './joins.js';
@@ -209,7 +210,11 @@ function WorkspaceBody({ api, w, tab, draft, }) {
     const addTab = useMutation({
         mutationFn: (r) => json(`${api}/workspaces/${w.id}/tabs`, {
             method: 'POST',
-            body: JSON.stringify({ name: r.label, recipe: r.recipe }),
+            body: JSON.stringify({
+                name: r.label,
+                recipe: r.recipe,
+                ...(r.formulas?.length ? { start: { formulas: r.formulas } } : {}),
+            }),
         }),
         onSuccess: ({ workspace, tab: t }) => {
             put(workspace);
@@ -219,14 +224,16 @@ function WorkspaceBody({ api, w, tab, draft, }) {
         onError: (e) => lumenToast.error(`Couldn’t add the tab: ${e.message}`),
     });
     const runAll = useMutation({
-        mutationFn: () => json(`${api}/workspaces/${w.id}/refresh`, {
-            method: 'POST',
-        }),
+        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`;
+            // A browser tab runs only where it is open: each one's own ↻.
+            const open = r.browser?.length ? `. Open to refresh: ${r.browser.join(', ')}` : '';
             if (r.failed.length)
-                lumenToast.warning(`${ran}. Failed: ${r.failed.join(', ')}`);
+                lumenToast.warning(`${ran}. Failed: ${r.failed.join(', ')}${open}`);
+            else if (open)
+                lumenToast.info(`${ran}${open}`);
             else
                 lumenToast.success(ran);
         },
@@ -234,7 +241,11 @@ function WorkspaceBody({ api, w, tab, draft, }) {
     });
     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) => ({
+    const intro = (_jsx(LumenTabs, { tabs: w.tabs.map((t) => ({
+            value: t.id,
+            label: t.name,
+            icon: tabIcon(t, 'frame' in t.source ? w.frames[t.source.frame] : undefined),
+        })), 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,
@@ -247,7 +258,7 @@ function WorkspaceBody({ api, w, tab, draft, }) {
                     } })), tab && (_jsx(IconButton, { icon: PencilIcon, label: "Edit tab", onClick: () => setEditingTab(true) }))] }) }));
     const crumbs = [{ label: 'Workspaces' }, { label: w.name }];
     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)
+    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 }, 'frame' in tab.source ? w.frames[tab.source.frame] : undefined), 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: {
                     description: 'Its layout goes with it.',
@@ -389,15 +400,26 @@ function FrameTab({ api, tab, meta, crumbs, actions, intro, onChange, }) {
         queryFn: () => json(`${api}/frames/${meta.id}`),
     });
     const refresh = useMutation({
-        mutationFn: () => json(`${api}/frames/${meta.id}/refresh`, { method: 'POST' }),
+        // A browser recipe runs here, in a sandbox, and saves its rows; any other runs on the server.
+        mutationFn: () => (rows.data?.meta ?? meta).browser
+            ? runBrowserFrame(api, meta.id)
+            : json(`${api}/frames/${meta.id}/refresh`, { method: 'POST' }),
         onSuccess: (data) => {
             qc.setQueryData(frameKey(api, meta.id), data);
             void qc.invalidateQueries({ queryKey: [...WORKSPACES_KEY, api, 'ws'] });
         },
     });
     // A frame refreshes only when the person taps ↻: opening a tab shows the
-    // stored rows.
+    // stored rows. A browser recipe that never ran runs once when its tab first opens.
     const current = rows.data?.meta ?? meta;
+    const firstRun = Boolean(rows.data && current.browser && !current.runs?.length);
+    const started = useRef(false);
+    useEffect(() => {
+        if (!firstRun || started.current)
+            return;
+        started.current = true;
+        refresh.mutate();
+    }, [firstRun, refresh.mutate]);
     const reload = useLumenLoad(rows);
     const data = useMemo(() => (rows.data?.rows ?? []).map((v, i) => ({ i, v })), [rows.data]);
     const symbolAt = frameSymbolAt(current);
@@ -411,14 +433,15 @@ function FrameTab({ api, tab, meta, crumbs, actions, intro, onChange, }) {
         edited,
         save: (edit) => edits.mutateAsync({ id: current.id, edits: [edit] }),
     }, drop, assistant), [current, symbolAt, edited, edits.mutateAsync, drop, assistant]);
-    const config = useMemo(() => tab.config ?? frameConfig(current), [tab.config, current]);
+    const config = useMemo(() => tab.config ?? frameConfig(current, tab.start), [tab.config, tab.start, current]);
     // The cause once, even from a frame stored before the server unwrapped it.
     const failed = (refresh.error?.message ?? current.error)?.replace(/^(?:(?:Code execution failed|Refresh failed):\s*)+/, '');
     // The card's own ↻ runs the assistant's script again and its footer says when they last ran (per card, not the page header); rows the assistant wrote itself only reload.
     const runs = current.mode !== 'static' && current.origin !== 'yours';
-    // The assistant's script as code to read and edit; a Your data column has none.
+    // The recipe as code to read and edit; a Your data column and a pushed dataset have none.
     const [scriptOpen, setScriptOpen] = useState(false);
-    const assistantMade = current.origin !== 'yours';
+    const pushed = current.origin === 'harness';
+    const assistantMade = current.origin !== 'yours' && !pushed;
     const load = useMemo(() => ({
         ...reload,
         updated: {
@@ -431,11 +454,15 @@ function FrameTab({ api, tab, meta, crumbs, actions, intro, onChange, }) {
                 : 'fixed',
             about: current.origin === 'yours'
                 ? 'Your own data: you change it by typing.'
-                : !runs
-                    ? `${assistant} wrote these rows once: nothing to run again.`
-                    : current.mode === 'asof'
-                        ? `${assistant}’s script reads the web, so it runs only when you ask.`
-                        : `${assistant}’s script reads live data.`,
+                : pushed
+                    ? `${current.by ?? 'An agent'} pushed these rows: it pushes again to change them.`
+                    : current.browser
+                        ? 'This recipe runs in your browser: ↻ runs it here and saves the rows.'
+                        : !runs
+                            ? `${assistant} wrote these rows once: nothing to run again.`
+                            : current.mode === 'asof'
+                                ? `${assistant}’s script reads the web, so it runs only when you ask.`
+                                : `${assistant}’s script reads live data.`,
         },
         ...(assistantMade ? { editScript: () => setScriptOpen(true) } : {}),
         ...(runs
@@ -445,9 +472,11 @@ function FrameTab({ api, tab, meta, crumbs, actions, intro, onChange, }) {
                 refresh: async () => {
                     await refresh.mutateAsync().catch(() => undefined);
                 },
-                refreshLabel: current.mode === 'asof'
-                    ? `Run ${assistant}’s script again (it reads the web, so only when you ask)`
-                    : `Run ${assistant}’s script again`,
+                refreshLabel: current.browser
+                    ? 'Run the script in your browser'
+                    : current.mode === 'asof'
+                        ? `Run ${assistant}’s script again (it reads the web, so only when you ask)`
+                        : `Run ${assistant}’s script again`,
             }
             : {}),
     }), [
@@ -455,6 +484,9 @@ function FrameTab({ api, tab, meta, crumbs, actions, intro, onChange, }) {
         current.at,
         current.mode,
         current.origin,
+        current.by,
+        current.browser,
+        pushed,
         failed,
         runs,
         assistantMade,
@@ -464,9 +496,11 @@ function FrameTab({ api, tab, meta, crumbs, actions, intro, onChange, }) {
     ]);
     return (_jsxs(_Fragment, { children: [_jsx(LumenLayout, { crumbs: crumbs, intro: intro, actions: actions, domain: domain, config: config, rows: data, onConfigChange: onChange, save: "sheet", rowTitle: (r) => String(r.v[symbolAt >= 0 ? symbolAt : 0] ?? `Row ${r.i + 1}`), load: load, status: _jsxs(_Fragment, { children: [_jsx(StatusItem, { label: "Frame", value: current.name }), _jsx(StatusItem, { label: "Rows", value: current.rows.toLocaleString('en-US') }), _jsx(StatusItem, { label: "Kind", value: current.origin === 'yours'
                                 ? `Your data, by ${current.key}`
-                                : current.kind === 'linked'
-                                    ? `Linked by ${current.key}`
-                                    : 'Snapshot' }), current.edited ? (_jsx(StatusItem, { label: "Edited by hand", value: current.edited.toLocaleString('en-US') })) : null, _jsx(StatusItem, { label: current.kind === 'linked'
+                                : pushed
+                                    ? 'Pushed dataset'
+                                    : current.kind === 'linked'
+                                        ? `Linked by ${current.key}`
+                                        : 'Snapshot' }), current.edited ? (_jsx(StatusItem, { label: "Edited by hand", value: current.edited.toLocaleString('en-US') })) : null, pushed ? (_jsx(StatusItem, { label: "Pushed by", value: `${current.by ?? 'an agent'} · ${ago(current.at)}` })) : null, pushed ? null : (_jsx(StatusItem, { label: current.kind === 'linked'
                                 ? 'As of'
                                 : current.mode === 'live'
                                     ? 'Live, read'
@@ -479,11 +513,33 @@ 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, runs: current.runs, 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 what makes its frame (a file for a pushed CSV, a
+ * pipeline for web reads, code for a browser script, the assistant's mark), else a table.
+ */
+function tabIcon(t, meta) {
+    const made = !('frame' in t.source)
+        ? TableIcon
+        : meta?.origin === 'harness'
+            ? FileSpreadsheetIcon
+            : meta?.recipe === 'fetch'
+                ? WorkflowIcon
+                : meta?.browser
+                    ? CodeIcon
+                    : SparklesIcon;
+    return iconOf(t.config?.icon, made);
 }
-/** A tab's icon: the person's pick, else the assistant's mark on a frame, else a table. */
-function tabIcon(t) {
-    return iconOf(t.config?.icon, 'frame' in t.source ? SparklesIcon : TableIcon);
+/** How long ago, in short words: `4 min ago`, `2 h ago`, `3 d ago`. */
+function ago(at) {
+    const min = Math.max(0, Math.round((Date.now() - Date.parse(at)) / 60_000));
+    if (min < 1)
+        return 'just now';
+    if (min < 60)
+        return `${min} min ago`;
+    const h = Math.round(min / 60);
+    return h < 48 ? `${h} h ago` : `${Math.round(h / 24)} d ago`;
 }
 /** A tab's layout as it shows: its own config, else its source's default. */
 function tabConfig(t, w, defaultConfig) {
@@ -491,7 +547,10 @@ function tabConfig(t, w, defaultConfig) {
         return t.config;
     if ('frame' in t.source) {
         const meta = w.frames[t.source.frame];
-        return { ...(meta ? frameConfig(meta) : customViewConfigSchema.parse({})), name: t.name };
+        return {
+            ...(meta ? frameConfig(meta, t.start) : customViewConfigSchema.parse({})),
+            name: t.name,
+        };
     }
     const start = defaultConfig?.(t.source.domain);
     return { ...customViewConfigSchema.parse(start ?? {}), name: t.name };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.196",
+  "version": "0.1.198",
   "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.196",
+    "@columenlabs/lumen-ui-types": "0.1.198",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
@@ -80,6 +80,7 @@
     "react-markdown": "10.1.0",
     "react-resizable-panels": "^4.14.3",
     "recharts": "^3.10.1",
+    "remark-gfm": "4.0.1",
     "shiki": "4.5.0",
     "sonner": "^2.0.8",
     "tailwind-merge": "^3.7.0",