@rho-workspace/rho 0.5.3 → 0.5.4

package/node_modules/@rho-workspace/plugin-kernel/dist/ui-notebook.js

@@ -1,17 +1,19 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { statements, unfinished } from './statements.js';
+import { cellRelations } from './lineage.js';
+import { CellScriptFlow } from './ui-flow.js';
 import { Icon } from './ui-icons.js';
 import { PlaceChip, usePlaces, whereOf } from './ui-servers.js';
 import { takeCell } from './ui-notebook-target.js';
-import { call, refused, agentName, clock, durationText, useShell, withShell } from './ui-base.js';
+import { call, refused, agentName, clock, durationText, useShell, withShell, versionOf } from './ui-base.js';
+export { versionOf };
 export const languages = ['r', 'python'];
 export const languageName = { r: 'R', python: 'Python' };
 // A Notebook view at least this wide shows the sessions beside the cells.
 export const notebookViewLimits = { cells: 300, codeLines: 14, outputLines: 12, railPlots: 12, cachedPlots: 64, wideViewPx: 840 };
 const me = 'browser:local';
 const failure = (error) => error instanceof Error ? error.message : 'The live session could not be reached.';
-export const versionOf = (session) => session.version?.replace(/^R version (\S+).*$/, 'R $1') ?? languageName[session.language];
 export const at = (iso) => clock(Date.parse(iso));
 export function useAuthors(snapshot) {
     return useMemo(() => {
@@ -122,14 +124,49 @@ function Ending({ cell, now }) {
         return _jsx("span", { className: "nb-ending", children: "Not run" });
     return _jsx("span", { className: "nb-ending failed", children: "Outcome unknown" });
 }
-function CellView({ cell, author, who, client, projectId, now, onEdit, onRunAgain, onConversation, onObject }) {
+// A cell named where another reads from it or is read by it; it goes to that cell where the page
+// shows it. A cell lists at most `cells` of the later cells that read a value; the rest are counted.
+export const relationLimits = { cells: 3 };
+function CellLink({ cell, language, onCell, what }) {
+    const name = `${languageName[language]} ${cell.number}`;
+    return onCell ? _jsx("button", { className: "nb-cell-link", title: `Go to ${name}, which ${what}`, onClick: () => onCell(cell.cellId), children: name }) : _jsx("span", { className: "nb-cell-link", children: name });
+}
+// The later cells that read a value, at most `cells` of them; the rest are counted.
+function CellLinks({ cells, language, onCell }) {
+    const shown = cells.slice(0, relationLimits.cells);
+    return _jsxs(_Fragment, { children: [shown.map((c, i) => _jsxs("span", { className: "nb-cell-links", children: [_jsx(CellLink, { cell: c, language: language, onCell: onCell, what: "read it" }), i < shown.length - 1 && ','] }, c.cellId)), cells.length > shown.length && _jsxs("span", { children: ["and ", cells.length - shown.length, " more"] })] });
+}
+// What each session's cells read from each other, by session.
+export function useRelations(cells) {
+    return useMemo(() => {
+        const bySession = new Map();
+        for (const c of cells)
+            bySession.set(c.sessionId, [...bySession.get(c.sessionId) ?? [], c]);
+        const out = new Map(), all = { reads: new Map(), readers: new Map(), maker: new Map() };
+        for (const [id, list] of bySession) {
+            const r = cellRelations(list.map(c => ({ ...c, plots: 0 })));
+            out.set(id, r);
+            for (const [k, v] of r.reads)
+                all.reads.set(k, v);
+            for (const [k, v] of r.readers)
+                all.readers.set(k, v);
+        }
+        return { bySession: out, all };
+    }, [cells]);
+}
+function CellView({ cell, author, who, client, projectId, now, onEdit, onRunAgain, onConversation, onObject, relations, onCell }) {
     const settled = !['queued', 'running'].includes(cell.state);
+    const reads = relations?.reads.get(cell.cellId) ?? [], readers = relations?.readers.get(cell.cellId);
+    const value = (name) => onObject
+        ? _jsx("button", { className: "nb-value", title: 'Look at ' + name, onClick: () => onObject(cell.language, name), children: name })
+        : _jsx("code", { className: "nb-value", children: name });
     const interrupted = cell.interrupt ? `Interrupted by ${who(cell.interrupt.by).name === 'You' ? 'you' : who(cell.interrupt.by).name} at ${at(cell.interrupt.at)}.` : null;
     return _jsxs("li", { className: 'nb-cell ' + cell.state + (cell.by === me ? ' mine' : ''), id: 'cell-' + cell.cellId, children: [_jsxs("div", { className: "nb-gutter", "aria-hidden": "true", children: [_jsx("span", { className: 'nb-lang ' + cell.language, children: languageName[cell.language] }), _jsx("span", { className: "nb-number", children: cell.number })] }), _jsxs("div", { className: "nb-body", children: [_jsxs("header", { className: "nb-head", children: [_jsx("span", { className: "nb-who", children: author.conversationId
                                     ? _jsx("button", { className: "text-button", title: author.title ? 'Open ' + author.title : undefined, onClick: () => onConversation(author.conversationId), children: author.name })
-                                    : author.name }), _jsx("span", { className: "nb-purpose", children: cell.purpose ?? _jsxs("span", { className: "nb-unnamed", children: [languageName[cell.language], " cell ", cell.number] }) }), _jsxs("span", { className: "nb-when", children: [_jsx("time", { dateTime: cell.queuedAt, children: at(cell.queuedAt) }), _jsx(Ending, { cell: cell, now: now })] })] }), _jsx(Code, { code: cell.code, language: cell.language }), _jsx(Outputs, { cell: cell, client: client, projectId: projectId }), settled && ((cell.defined?.length ?? 0) > 0 || (cell.removed?.length ?? 0) > 0) && _jsxs("p", { className: "nb-values", children: [(cell.defined?.length ?? 0) > 0 && _jsxs(_Fragment, { children: [_jsx("span", { children: "Made or changed" }), cell.defined.map(name => onObject
-                                        ? _jsx("button", { className: "nb-value", title: 'Look at ' + name, onClick: () => onObject(cell.language, name), children: name }, name)
-                                        : _jsx("code", { className: "nb-value", children: name }, name))] }), (cell.removed?.length ?? 0) > 0 && _jsxs(_Fragment, { children: [_jsx("span", { children: "Removed" }), cell.removed.map(name => _jsx("code", { className: "nb-value gone", children: name }, name))] })] }), (interrupted || (cell.problem && cell.state !== 'interrupted')) && _jsx("p", { className: "nb-problem", children: interrupted ?? cell.problem }), settled && _jsxs("div", { className: "nb-actions", children: [_jsxs("button", { className: "text-button", onClick: () => onEdit(cell), children: [_jsx(Icon, { name: "pencil", size: 13 }), "Edit and run"] }), _jsxs("button", { className: "text-button", onClick: () => onRunAgain(cell), children: [_jsx(Icon, { name: "run", size: 13 }), "Run again"] })] })] })] });
+                                    : author.name }), _jsx("span", { className: "nb-purpose", children: cell.purpose ?? _jsxs("span", { className: "nb-unnamed", children: [languageName[cell.language], " cell ", cell.number] }) }), _jsxs("span", { className: "nb-when", children: [_jsx("time", { dateTime: cell.queuedAt, children: at(cell.queuedAt) }), _jsx(Ending, { cell: cell, now: now })] })] }), _jsx(Code, { code: cell.code, language: cell.language }), _jsx(Outputs, { cell: cell, client: client, projectId: projectId }), settled && (reads.length > 0 || (cell.defined?.length ?? 0) > 0 || (cell.removed?.length ?? 0) > 0) && _jsxs("p", { className: "nb-values", children: [reads.length > 0 && _jsxs(_Fragment, { children: [_jsx("span", { children: "Read" }), reads.map(({ name, from }) => _jsxs("span", { className: "nb-rel", children: [value(name), from && _jsxs(_Fragment, { children: ["from ", _jsx(CellLink, { cell: from, language: cell.language, onCell: onCell, what: "made it" })] })] }, name))] }), (cell.defined?.length ?? 0) > 0 && _jsxs(_Fragment, { children: [_jsx("span", { children: "Made or changed" }), cell.defined.map(name => {
+                                        const by = readers?.get(name) ?? [];
+                                        return _jsxs("span", { className: "nb-rel", children: [value(name), by.length > 0 && _jsxs(_Fragment, { children: ["read in ", _jsx(CellLinks, { cells: by, language: cell.language, onCell: onCell })] })] }, name);
+                                    })] }), (cell.removed?.length ?? 0) > 0 && _jsxs(_Fragment, { children: [_jsx("span", { children: "Removed" }), cell.removed.map(name => _jsx("code", { className: "nb-value gone", children: name }, name))] })] }), settled && _jsx(CellScriptFlow, { code: cell.code, language: cell.language }), (interrupted || (cell.problem && cell.state !== 'interrupted')) && _jsx("p", { className: "nb-problem", children: interrupted ?? cell.problem }), settled && _jsxs("div", { className: "nb-actions", children: [_jsxs("button", { className: "text-button", onClick: () => onEdit(cell), children: [_jsx(Icon, { name: "pencil", size: 13 }), "Edit and run"] }), _jsxs("button", { className: "text-button", onClick: () => onRunAgain(cell), children: [_jsx(Icon, { name: "run", size: 13 }), "Run again"] })] })] })] });
 }
 // Where a session started and where it ended, among the cells.
 function Mark({ session, edge, who }) {
@@ -156,7 +193,7 @@ function SessionRow({ language, session, onInterrupt, onStop, asking }) {
     return _jsxs("div", { className: 'nb-session ' + session.state, children: [_jsx("span", { className: "nb-dot", "aria-hidden": "true" }), _jsxs("div", { children: [_jsx("strong", { children: session.version ? versionOf(session) : name }), _jsx("small", { children: [whereOf(session), session.state === 'starting' ? (session.place ? 'Connecting…' : 'Starting…') : busy ? 'Running a cell' : 'Idle', `${session.cells} ${session.cells === 1 ? 'cell' : 'cells'}`].filter(Boolean).join(' · ') })] }), _jsxs("div", { className: "nb-session-actions", children: [busy && _jsx("button", { className: "secondary", disabled: asking.startsWith('interrupt:'), onClick: onInterrupt, children: "Interrupt" }), _jsx("button", { className: "text-button", disabled: asking === 'stop:' + session.sessionId, title: `End the ${name} session; its values are gone`, onClick: () => onStop(session), children: "Stop" })] })] });
 }
 // The session shown is the person's choice, else the one the newest cell ran in.
-function Variables({ sessions, onObject, pane = false, recent }) {
+function Variables({ sessions, onObject, pane = false, recent, relations, onCell }) {
     const live = languages.filter(l => sessions[l] && sessions[l].state !== 'ended');
     const [chosen, setChosen] = useState(null);
     useEffect(() => setChosen(null), [recent]);
@@ -167,7 +204,16 @@ function Variables({ sessions, onObject, pane = false, recent }) {
                         ? _jsx("h2", { id: id, className: "nb-pane-state", children: session ? _jsxs(_Fragment, { children: [_jsx("span", { className: 'nb-dot ' + session.state, "aria-hidden": "true" }), [versionOf(session), whereOf(session), session.state === 'busy' ? 'running a cell' : session.state === 'starting' ? 'starting' : 'idle', `${session.variables.length + session.variablesOmitted} ${session.variables.length + session.variablesOmitted === 1 ? 'value' : 'values'}`].filter(Boolean).join(' · ')] }) : 'Variables' })
                         : _jsx("h2", { id: id, children: "Variables" }), live.length > 1 && _jsx("div", { className: "nb-tabs", role: "group", "aria-label": "Session", children: live.map(l => _jsx("button", { "aria-pressed": l === shown, onClick: () => setChosen(l), children: languageName[l] }, l)) })] }), !session ? _jsx("p", { className: "nb-empty-line", children: pane ? 'No live session. Values show here once a cell runs in R or Python, from the Notebook or a script\'s line.' : 'No live session.' })
                 : !session.variables.length ? _jsxs("p", { className: "nb-empty-line", children: ["Nothing defined in ", languageName[session.language], " yet."] })
-                    : _jsx("ul", { className: "nb-vars", children: session.variables.map(v => _jsxs("li", { title: v.summary, children: [onObject ? _jsx("button", { className: "nb-var-name", title: 'Look at ' + v.name, onClick: () => onObject(session.language, v.name), children: v.name }) : _jsx("span", { className: "nb-var-name", children: v.name }), _jsxs("span", { className: "nb-var-type", children: [v.type, v.size ? ' · ' + v.size : ''] }), v.summary && _jsx("span", { className: "nb-var-summary", children: v.summary })] }, v.name)) }), session && session.variablesOmitted > 0 && _jsxs("p", { className: "nb-note", children: [session.variablesOmitted, " more not listed."] })] });
+                    : _jsx("ul", { className: "nb-vars", children: session.variables.map(v => _jsxs("li", { title: v.summary, children: [onObject ? _jsx("button", { className: "nb-var-name", title: 'Look at ' + v.name, onClick: () => onObject(session.language, v.name), children: v.name }) : _jsx("span", { className: "nb-var-name", children: v.name }), _jsxs("span", { className: "nb-var-type", children: [v.type, v.size ? ' · ' + v.size : ''] }), v.summary && _jsx("span", { className: "nb-var-summary", children: v.summary }), _jsx(Made, { name: v.name, session: session, relations: relations?.get(session.sessionId), onCell: onCell })] }, v.name)) }), session && session.variablesOmitted > 0 && _jsxs("p", { className: "nb-note", children: [session.variablesOmitted, " more not listed."] })] });
+}
+// Where a value came from and where it went: the cell that made it as it is now, and the later
+// cells that read that version.
+function Made({ name, session, relations, onCell }) {
+    const maker = relations?.maker.get(name);
+    if (!maker)
+        return null;
+    const by = relations.readers.get(maker.cellId)?.get(name) ?? [];
+    return _jsxs("span", { className: "nb-var-made", children: ["Made in ", _jsx(CellLink, { cell: maker, language: session.language, onCell: onCell, what: "made it" }), by.length > 0 && _jsxs(_Fragment, { children: [" \u00B7 read in ", _jsx(CellLinks, { cells: by, language: session.language, onCell: onCell })] })] });
 }
 function RailPlot({ client, projectId, cell, output, onShow }) {
     const { src } = usePlot(client, projectId, cell.cellId, output.plot);
@@ -431,18 +477,21 @@ function NotebookBody({ client, snapshot, onConversation, onObject, scope, compa
     const [now, setNow] = useState(Date.now());
     useEffect(() => { if (!running)
         return; const t = setInterval(() => setNow(Date.now()), 1000); return () => clearInterval(t); }, [running]);
-    // The list in time: each cell, and where a session started or ended among them.
+    // The list in time: each cell, and where a session started or ended among them. At one instant
+    // a session that ended comes first and the one that started next (an Agent starting its own
+    // session again with another program does both at once); one that started and ended then shows
+    // its start before its end.
     const rows = useMemo(() => {
-        const out = cells.map(cell => ({ at: Date.parse(cell.queuedAt), order: 1, key: cell.cellId, cell }));
+        const out = cells.map(cell => ({ at: Date.parse(cell.queuedAt), order: 2, key: cell.cellId, cell }));
         const first = out[0]?.at ?? Infinity, until = scope?.at ?? Infinity;
         for (const session of read?.sessions ?? []) {
             const has = cells.some(c => c.sessionId === session.sessionId);
             if (scope && !has)
                 continue;
             if (has || Date.parse(session.startedAt) >= first)
-                out.push({ at: Date.parse(session.startedAt), order: 0, key: session.sessionId + ':start', session, edge: 'start' });
+                out.push({ at: Date.parse(session.startedAt), order: 1, key: session.sessionId + ':start', session, edge: 'start' });
             if (session.endedAt && Date.parse(session.endedAt) <= until && (has || Date.parse(session.endedAt) >= first))
-                out.push({ at: Date.parse(session.endedAt), order: 2, key: session.sessionId + ':end', session, edge: 'end' });
+                out.push({ at: Date.parse(session.endedAt), order: session.endedAt === session.startedAt ? 3 : 0, key: session.sessionId + ':end', session, edge: 'end' });
         }
         return out.sort((a, b) => a.at - b.at || a.order - b.order);
     }, [cells, read?.sessions, scope?.at]);
@@ -553,7 +602,17 @@ function NotebookBody({ client, snapshot, onConversation, onObject, scope, compa
     }
     const edit = (cell) => { setLanguage(cell.language); setDraft(cell.code); requestAnimationFrame(() => { input.current?.focus(); input.current?.scrollIntoView({ block: 'nearest' }); }); };
     const plots = useMemo(() => cells.flatMap(cell => cell.outputs.filter(o => o.kind === 'plot').map(output => ({ cell, output }))).slice(-notebookViewLimits.railPlots).reverse(), [cells]);
-    const show = (cellId) => document.getElementById('cell-' + cellId)?.scrollIntoView({ block: 'start', behavior: 'smooth' });
+    // A cell gone to is brought into view and marked for a moment.
+    const show = (cellId) => {
+        const element = document.getElementById('cell-' + cellId);
+        if (!element)
+            return;
+        element.scrollIntoView({ block: 'start', behavior: 'smooth' });
+        element.classList.remove('flash');
+        void element.offsetWidth;
+        element.classList.add('flash');
+    };
+    const relations = useRelations(cells);
     if (off)
         return _jsx("p", { className: "nb-empty-line", children: problem });
     // The line to run waits for now during a replay.
@@ -586,16 +645,16 @@ function NotebookBody({ client, snapshot, onConversation, onObject, scope, compa
                         setNote(''); }, note: note, problem: runProblem, busy: busy, input: input, history: history, running: latest[shownLanguage]?.state === 'busy', onRun: code => void run(code, shownLanguage), onInterrupt: () => void interrupt(shownLanguage), onClear: () => setCleared(rows.at(-1)?.at ?? Date.now()) })] });
     }
     if (compact)
-        return _jsx("div", { className: "nb-page compact", ref: page, children: _jsxs("div", { className: "nb-main", children: [problem && _jsx("p", { className: "inline-error", role: "alert", children: problem }), live.length > 0 && !beside.variables && _jsxs("details", { className: "nb-strip", children: [_jsx("summary", { children: live.map(l => _jsxs("span", { className: 'nb-strip-session ' + latest[l].state, children: [_jsx("span", { className: "nb-dot", "aria-hidden": "true" }), versionOf(latest[l]), " \u00B7 ", latest[l].state === 'busy' ? 'running' : latest[l].state, " \u00B7 ", latest[l].variables.length, " ", latest[l].variables.length === 1 ? 'value' : 'values'] }, l)) }), _jsx(Variables, { sessions: Object.fromEntries(live.map(l => [l, latest[l]])), onObject: onObject })] }), !read ? _jsx("p", { className: "nb-empty-line", children: "Reading the live sessions\u2026" })
+        return _jsx("div", { className: "nb-page compact", ref: page, children: _jsxs("div", { className: "nb-main", children: [problem && _jsx("p", { className: "inline-error", role: "alert", children: problem }), live.length > 0 && !beside.variables && _jsxs("details", { className: "nb-strip", children: [_jsx("summary", { children: live.map(l => _jsxs("span", { className: 'nb-strip-session ' + latest[l].state, children: [_jsx("span", { className: "nb-dot", "aria-hidden": "true" }), versionOf(latest[l]), " \u00B7 ", latest[l].state === 'busy' ? 'running' : latest[l].state, " \u00B7 ", latest[l].variables.length, " ", latest[l].variables.length === 1 ? 'value' : 'values'] }, l)) }), _jsx(Variables, { sessions: Object.fromEntries(live.map(l => [l, latest[l]])), onObject: onObject, relations: relations.bySession, onCell: show })] }), !read ? _jsx("p", { className: "nb-empty-line", children: "Reading the live sessions\u2026" })
                         : !cells.length ? _jsx("p", { className: "nb-empty-line", children: nothing })
                             : _jsx("ol", { className: "nb-cells", ref: list, children: rows.map(row => 'cell' in row
-                                    ? _jsx(CellView, { cell: row.cell, author: who(row.cell.by), who: who, client: client, projectId: projectId, now: now, onEdit: edit, onRunAgain: cell => void run(cell.code, cell.language), onConversation: onConversation, onObject: current.has(row.cell.sessionId) ? onObject : undefined }, row.key)
+                                    ? _jsx(CellView, { cell: row.cell, author: who(row.cell.by), who: who, client: client, projectId: projectId, now: now, onEdit: edit, onRunAgain: cell => void run(cell.code, cell.language), onConversation: onConversation, onObject: current.has(row.cell.sessionId) ? onObject : undefined, relations: relations.bySession.get(row.cell.sessionId), onCell: show }, row.key)
                                     : _jsx(Mark, { session: row.session, edge: row.edge, who: who }, row.key)) }), composer(true)] }) });
     return _jsxs("div", { className: 'nb-page' + (inView ? ' in-view' : ''), ref: page, children: [_jsxs("div", { className: "nb-main", children: [problem && _jsx("p", { className: "inline-error", role: "alert", children: problem }), !read ? _jsx("p", { className: "nb-empty-line", children: "Reading the live sessions\u2026" })
                         : !cells.length ? inView ? _jsx("p", { className: "nb-empty-line", children: nothing }) : _jsxs("div", { className: "nb-empty", children: [_jsx("h2", { children: "Nothing has run here yet" }), _jsx("p", { children: "When the Agent runs R or Python in this project's live sessions, each cell shows here with its purpose, its code, what it printed, its plots and the values it left. Your own cells run in the same sessions, so you can look at what the Agent made." })] })
                             : _jsx("ol", { className: "nb-cells", ref: list, children: rows.map(row => 'cell' in row
-                                    ? _jsx(CellView, { cell: row.cell, author: who(row.cell.by), who: who, client: client, projectId: projectId, now: now, onEdit: edit, onRunAgain: cell => void run(cell.code, cell.language), onConversation: onConversation, onObject: current.has(row.cell.sessionId) ? onObject : undefined }, row.key)
-                                    : _jsx(Mark, { session: row.session, edge: row.edge, who: who }, row.key)) }), read && read.omitted > 0 && _jsxs("p", { className: "nb-note", children: [read.omitted, " earlier ", read.omitted === 1 ? 'cell is' : 'cells are', " kept but not shown."] }), composer(false)] }), _jsxs("aside", { className: "nb-rail", "aria-label": "Live sessions", children: [_jsxs("section", { className: "nb-rail-section", "aria-labelledby": "nb-sessions", children: [_jsx("header", { children: _jsx("h2", { id: "nb-sessions", children: "Sessions" }) }), languages.map(l => _jsx(SessionRow, { language: l, session: latest[l], asking: asking, onInterrupt: () => void interrupt(l), onStop: session => void stop(session) }, l)), askProblem && _jsx("p", { className: "inline-error", role: "alert", children: askProblem })] }), !beside.variables && _jsx(Variables, { sessions: latest, onObject: onObject }), plots.length > 0 && !beside.plots && _jsxs("section", { className: "nb-rail-section", "aria-labelledby": "nb-plots", children: [_jsx("header", { children: _jsx("h2", { id: "nb-plots", children: "Plots" }) }), _jsx("div", { className: "nb-thumbs", children: plots.map(({ cell, output }) => _jsx(RailPlot, { client: client, projectId: projectId, cell: cell, output: output, onShow: () => show(cell.cellId) }, cell.cellId + ':' + output.plot)) })] })] })] });
+                                    ? _jsx(CellView, { cell: row.cell, author: who(row.cell.by), who: who, client: client, projectId: projectId, now: now, onEdit: edit, onRunAgain: cell => void run(cell.code, cell.language), onConversation: onConversation, onObject: current.has(row.cell.sessionId) ? onObject : undefined, relations: relations.bySession.get(row.cell.sessionId), onCell: show }, row.key)
+                                    : _jsx(Mark, { session: row.session, edge: row.edge, who: who }, row.key)) }), read && read.omitted > 0 && _jsxs("p", { className: "nb-note", children: [read.omitted, " earlier ", read.omitted === 1 ? 'cell is' : 'cells are', " kept but not shown."] }), composer(false)] }), _jsxs("aside", { className: "nb-rail", "aria-label": "Live sessions", children: [_jsxs("section", { className: "nb-rail-section", "aria-labelledby": "nb-sessions", children: [_jsx("header", { children: _jsx("h2", { id: "nb-sessions", children: "Sessions" }) }), languages.map(l => _jsx(SessionRow, { language: l, session: latest[l], asking: asking, onInterrupt: () => void interrupt(l), onStop: session => void stop(session) }, l)), askProblem && _jsx("p", { className: "inline-error", role: "alert", children: askProblem })] }), !beside.variables && _jsx(Variables, { sessions: latest, onObject: onObject, relations: relations.bySession, onCell: show }), plots.length > 0 && !beside.plots && _jsxs("section", { className: "nb-rail-section", "aria-labelledby": "nb-plots", children: [_jsx("header", { children: _jsx("h2", { id: "nb-plots", children: "Plots" }) }), _jsx("div", { className: "nb-thumbs", children: plots.map(({ cell, output }) => _jsx(RailPlot, { client: client, projectId: projectId, cell: cell, output: output, onShow: () => show(cell.cellId) }, cell.cellId + ':' + output.plot)) })] })] })] });
 }
 // The newest session of each language.
 export function latestSessions(read) {
@@ -607,12 +666,14 @@ export function latestSessions(read) {
 }
 // The live sessions' variables as a view of their own, beside a script and the Notebook: each
 // with its type, size and summary, read again after every cell. A name opens the value.
+const none = [];
 export function VariablesPane({ client, snapshot, onObject }) {
     const { read, off, problem } = useKernel(client, snapshot.project.id, snapshot.cursor);
     const latest = useMemo(() => latestSessions(read), [read]);
+    const relations = useRelations(read?.cells ?? none);
     return _jsx("div", { className: "nb-pane", children: off || (problem && !read) ? _jsx("p", { className: "nb-empty-line", children: problem })
             : !read ? _jsx("p", { className: "nb-empty-line", children: "Reading the live sessions\u2026" })
-                : _jsx(Variables, { pane: true, sessions: latest, onObject: onObject, recent: read.cells.at(-1)?.language }) });
+                : _jsx(Variables, { pane: true, sessions: latest, onObject: onObject, recent: read.cells.at(-1)?.language, relations: relations.bySession }) });
 }
 // The plots the live sessions drew, as a view of their own: the newest at the size of the view,
 // the ones before it to step back through. A new plot comes forward as it is drawn. Plots of an

package/node_modules/@rho-workspace/plugin-kernel/dist/ui-styles.js

@@ -107,6 +107,18 @@ button.nb-var-name:hover { text-decoration: underline; background: none; }
 button.nb-value:hover { border-color: var(--color-accent); background: var(--color-hover); }
 code.nb-value { border-color: transparent; background: var(--color-well); color: var(--color-ink); font-weight: 500; }
 .nb-value.gone { color: var(--color-meta); text-decoration: line-through; }
+/* What a cell read and from which cell, and which later cells read what it made. */
+.nb-values > .nb-rel + span { margin-left: 8px; }
+.nb-rel { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
+.nb-rel + .nb-rel { margin-left: 4px; }
+.nb-cell-link { min-height: 0; padding: 0 2px; border: 0; border-radius: 4px; background: none; box-shadow: none; color: var(--color-meta); font: 500 11.5px var(--font-mono); white-space: nowrap; }
+button.nb-cell-link { color: var(--color-accent-strong); }
+button.nb-cell-link:hover { background: var(--color-hover); text-decoration: underline; }
+.nb-var-made { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0 3px; color: var(--color-meta); font-size: 11.5px; }
+.nb-var-made .nb-cell-link { font-size: 11px; }
+.nb-cell-links { display: inline-flex; align-items: baseline; }
+@keyframes nb-flash { from { background: var(--color-accent-soft); } to { background: transparent; } }
+.nb-cell.flash { animation: nb-flash 1.6s ease-out; }
 .nb-var-type { overflow: hidden; color: var(--color-meta); font-size: 12px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
 .nb-var-summary { grid-column: 1 / -1; overflow: hidden; color: var(--color-muted); font: 11.5px/1.4 var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
 .nb-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@@ -340,54 +352,112 @@ code.nb-value { border-color: transparent; background: var(--color-well); color:
 .sv-reader-body { min-width: 0; font-size: 12.5px; overflow-wrap: anywhere; }
 .sv-reader-body pre { white-space: pre-wrap; }
 .sv-reader .nb-note code { overflow-wrap: anywhere; }
-/* The Data flow view: boxes in the order their cells ran, with lanes in the margin on the left
-   from what a cell made to each cell that read it. */
+/* Data flow: a graph of values from the data read at the top to the results at the bottom, with
+   the results to trace above it and the value chosen beside it (below it when narrow). Its path
+   shows in the colors a script's editor marks lines in: what it comes from, and what comes of it. */
 .flow-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
-.flow-lede { margin: -4px 0 0; color: var(--color-meta); font-size: 12px; }
-.flow-canvas { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 2px 0 8px; }
-.flow-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
-.flow-links path { fill: none; stroke: var(--color-hairline-strong); stroke-width: 1.4; transition: stroke .12s, opacity .12s; }
-.flow-links path.on { stroke: var(--color-accent); stroke-width: 1.8; }
-.flow-links path.off { opacity: .2; }
-.flow-links marker path { fill: var(--color-meta); stroke: none; }
-.flow-step { position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 7px 9px 7px; border: 1px solid var(--color-hairline-strong); border-radius: 10px; background: var(--color-surface); transition: opacity .12s, border-color .12s; }
-.flow-step.earlier { border-style: dashed; background: var(--color-canvas); }
-.flow-step.latest { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-soft); }
-.flow-step.open { border-color: var(--color-accent-strong); }
-.flow-step.faded { opacity: .38; }
-.flow-step-head { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--color-muted); font-size: 12px; font-weight: 600; text-align: left; }
-button.flow-step-head { cursor: pointer; }
-.flow-step-head code { flex: 1; min-width: 0; overflow: hidden; color: var(--color-ink); font-size: 11.5px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
-button.flow-step-head:hover code { text-decoration: underline; text-underline-offset: 2px; }
-.flow-step-head .nb-lang { flex: none; padding: 0 6px; font-size: 10.5px; }
-.flow-step-head > svg { flex: none; color: var(--color-meta); transition: transform .12s; }
-.flow-step.open .flow-step-head > svg { transform: rotate(90deg); }
-.flow-newest { flex: none; color: var(--color-accent); font-size: 10.5px; font-weight: 650; }
-.flow-reads { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 0; color: var(--color-meta); font-size: 11px; }
-.flow-file { display: inline-flex; align-items: center; gap: 3px; min-width: 0; max-width: 100%; min-height: 0; padding: 0 5px; border: 0; border-radius: 5px; background: none; box-shadow: none; color: var(--color-muted); font-size: 11px; font-weight: 500; overflow-wrap: anywhere; text-align: left; }
-button.flow-file:hover { background: var(--color-hover); color: var(--color-ink); }
-.flow-file > svg { flex: none; }
-/* What a cell made, one to a line, so a lane leaves the box beside the value it carries. */
-.flow-outs { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; }
-.flow-out { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; min-height: 0; padding: 3px 7px; border: 1px solid var(--color-hairline); border-radius: 7px; background: var(--color-well); box-shadow: none; color: var(--color-ink); font-size: 12px; font-weight: 500; text-align: left; }
-.flow-out:not(:disabled):hover { border-color: var(--color-accent); background: var(--color-hover); }
-.flow-out:disabled { opacity: 1; cursor: default; }
-.flow-out > svg { flex: none; color: var(--color-meta); }
-.flow-out > span { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.flow-out.value > span { font-family: var(--font-mono); font-size: 11.5px; }
-.flow-out > small { flex: 0 1 auto; min-width: 0; margin-left: auto; overflow: hidden; color: var(--color-meta); font-size: 11px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
-.flow-out.plot { background: var(--color-hue-iris); color: var(--color-hue-iris-ink); border-color: transparent; }
-.flow-out.wrote { background: var(--color-hue-moss); color: var(--color-hue-moss-ink); border-color: transparent; }
-.flow-out.plot > svg, .flow-out.wrote > svg, .flow-out.wrote > small { color: inherit; }
-.flow-step-note { margin: 0; color: var(--color-meta); font-size: 11px; }
-.flow-step-note.stale { color: var(--color-amber-text); }
-.flow-cell { display: flex; flex-direction: column; gap: 8px; margin-top: 3px; padding-top: 8px; border-top: 1px solid var(--color-divider); }
-.flow-cell > footer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--color-meta); font-size: 12px; }
-.flow-cell > footer > button { margin-left: auto; }
-.flow-cell-earlier { display: flex; flex-direction: column; gap: 4px; opacity: .8; }
-.flow-cell-earlier > .nb-lang { align-self: flex-start; }
+.flow-lede { margin: -4px 0 0; color: var(--color-meta); font-size: 12px; line-height: 1.45; }
+.lin { display: flex; flex-direction: column; gap: 10px; min-width: 0; container-type: inline-size; }
+.lin-results { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
+.lin-results > span { margin-right: 4px; color: var(--color-meta); font-size: 11.5px; font-weight: 650; }
+.lin-results > button:not(.text-button) { display: inline-flex; align-items: center; justify-content: flex-start; gap: 4px; max-width: 16rem; min-height: 0; padding: 2px 8px; border: 1px solid var(--color-hairline); border-radius: 999px; background: var(--color-surface); box-shadow: none; color: var(--color-muted); font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.lin-results > button:not(.text-button) > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.lin-results > button:not(.text-button):hover { border-color: var(--color-hairline-strong); color: var(--color-ink); }
+.lin-results > button[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent-strong); }
+.lin-results > button > svg { flex: none; }
+.lin-results > .text-button { min-height: 0; padding: 2px 4px; font-size: 11.5px; }
+.lin-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
+.lin-canvas { position: relative; display: flex; flex-direction: column; gap: 30px; min-width: 0; padding: 4px 0 10px; }
+.lin-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
+.lin-edges path { fill: none; stroke: var(--color-hairline-strong); stroke-width: 1.3; transition: stroke .12s, opacity .12s; }
+.lin-edges path.from { stroke: var(--color-hue-sky-ink); stroke-width: 1.8; }
+.lin-edges path.into { stroke: var(--color-hue-clay-ink); stroke-width: 1.8; }
+.lin-edges path.off { opacity: .18; }
+.lin-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
+.lin-node { position: relative; display: flex; align-items: flex-start; gap: 6px; max-width: min(100%, 14rem); min-width: 0; min-height: 0; padding: 6px 10px 7px; border: 1px solid var(--color-hairline-strong); border-radius: 8px; background: var(--color-surface); box-shadow: none; color: var(--color-ink); text-align: left; cursor: pointer; transition: opacity .12s, border-color .12s, background .12s; }
+.lin-node:hover { border-color: var(--color-accent); }
+.lin-node > svg { flex: none; margin-top: 2px; color: var(--color-meta); }
+.lin-text { display: grid; gap: 2px; min-width: 0; }
+.lin-title { display: -webkit-box; min-width: 0; overflow: hidden; overflow-wrap: anywhere; font-size: 12.5px; font-weight: 500; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
+.lin-name { min-width: 0; overflow: hidden; font: 600 12px var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
+.lin-name.lin-sub { font: 500 10.5px/1.3 var(--font-mono); color: var(--color-meta); }
+.lin-node.input { border-style: dashed; background: var(--color-canvas); }
+.lin-node.output { border-color: transparent; background: var(--color-hue-moss); color: var(--color-hue-moss-ink); }
+.lin-node.plot { border-color: transparent; background: var(--color-hue-iris); color: var(--color-hue-iris-ink); }
+.lin-node.output > svg, .lin-node.plot > svg, .lin-node.output .lin-sub, .lin-node.plot .lin-sub { color: inherit; opacity: .8; }
+.lin-node.from { border-color: var(--color-hue-sky-ink); }
+.lin-node.into { border-color: var(--color-hue-clay-ink); }
+.lin-node.value.from, .lin-node.input.from { background: var(--color-hue-sky); }
+.lin-node.value.into { background: var(--color-hue-clay); }
+.lin-node.here { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-soft); }
+.lin-node.chosen { border-color: var(--color-accent); border-style: solid; box-shadow: 0 0 0 3px var(--color-accent-soft); }
+.lin-node.dim { border-color: var(--color-hairline); background: var(--color-canvas); color: var(--color-meta); }
+.lin-node.dim > * { opacity: .55; }
+.lin-detail { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px 12px 11px; border: 1px solid var(--color-hairline); border-radius: 10px; background: var(--color-surface); font-size: 12px; }
+.lin-detail > * { flex: none; }
+.lin-detail .flow-cell-plots img { max-height: 9rem; width: auto; }
+.lin-detail.empty { color: var(--color-muted); }
+.lin-detail p { margin: 0; }
+.lin-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; color: var(--color-muted); font-size: 12px; }
+.lin-sum b { color: var(--color-ink); font-size: 15px; font-variant-numeric: tabular-nums; }
+.lin-sum > span { color: var(--color-meta); }
+.lin-detail > header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; min-width: 0; }
+.lin-detail > header > svg { flex: none; color: var(--color-meta); }
+.lin-detail h3 { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 14px; font-weight: 650; line-height: 1.35; }
+.lin-detail h3.lin-bare { font: 650 13px var(--font-mono); }
+.lin-kind { color: var(--color-meta); font-size: 11.5px; }
+.lin-detail > header > .text-button { min-height: 0; padding: 1px 4px; font-size: 12px; }
+.lin-detail > header > .text-button:first-of-type { margin-left: auto; }
+.lin-path { color: var(--color-meta); font: 11px var(--font-mono); overflow-wrap: anywhere; }
+.lin-said { color: var(--color-meta); font-size: 11.5px; overflow-wrap: anywhere; }
+.lin-ident { font: 11px var(--font-mono); color: var(--color-muted); }
+.lin-made-line { display: flex; flex-wrap: wrap; gap: 2px 8px; color: var(--color-muted); }
+.lin-made .text-button { min-height: 0; padding: 0 2px; font-size: 12px; font-weight: 650; }
+.lin-made b { font-weight: 650; color: var(--color-ink); }
+.lin-purpose { color: var(--color-ink); }
+.lin-purpose > span { color: var(--color-meta); }
+.lin-detail dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; margin: 0; }
+.lin-detail dt { padding-top: 2px; color: var(--color-meta); font-weight: 600; }
+.lin-detail dd { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 4px; min-width: 0; margin: 0; color: var(--color-muted); }
+.lin-detail dd.lin-uses { display: grid; gap: 4px; color: var(--color-ink); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
+.lin-use { display: block; }
+.lin-use code { color: var(--color-muted); font: 11.5px var(--font-mono); }
+.lin-use-means { color: var(--color-ink); }
+.lin-chip { max-width: 100%; min-width: 0; min-height: 0; padding: 1px 7px; text-align: left; overflow: hidden; border: 1px solid var(--color-hairline); border-radius: 999px; background: var(--color-well); box-shadow: none; color: var(--color-ink); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
+.lin-chip:hover { border-color: var(--color-accent); }
+.lin-chip > span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.lin-chip.from { border-color: transparent; background: var(--color-hue-sky); color: var(--color-hue-sky-ink); }
+.lin-chip.into { border-color: transparent; background: var(--color-hue-clay); color: var(--color-hue-clay-ink); }
+.lin-chip.chosen { border-color: var(--color-accent); }
+.lin-code > summary { width: fit-content; color: var(--color-accent-strong); font-weight: 600; cursor: pointer; }
+.lin-code[open] > summary { margin-bottom: 6px; }
+.lin-code > .nb-code-block, .lin-code > pre { margin-top: 4px; }
+.lin-who { color: var(--color-meta); }
+.lin-stale { color: var(--color-amber-text); }
+.lin-others { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 4px; }
+/* Narrow, the chosen value is above the graph, and stays in view in a view of its own; the graph
+   names its values without how each is made. Wide, the chosen value sits beside the graph. */
+@container (max-width: 639px) {
+  .lin-main.pinned > .lin-detail { position: sticky; top: 0; z-index: 2; max-height: 12rem; overflow-y: auto; box-shadow: 0 6px 14px -10px rgb(0 0 0 / 30%); }
+  .lin-detail { gap: 6px; padding: 8px 10px; }
+  .lin-main.pinned > .lin-detail.empty, .lin-detail.empty { position: static; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 0; border: 0; background: none; box-shadow: none; }
+  .lin-detail.empty > * { flex: 0 1 auto; }
+  .lin-detail.empty > p:last-child { font-size: 11.5px; }
+  .lin-node { max-width: 100%; }
+  .lin-title { -webkit-line-clamp: 3; }
+}
+@container (min-width: 640px) {
+  .lin-main { grid-template-columns: minmax(0, 1fr) minmax(240px, 34%); }
+  .lin-main > .lin-detail { grid-column: 2; grid-row: 1; }
+  .lin-main > .lin-canvas { grid-column: 1; grid-row: 1; }
+  .lin-main.pinned > .lin-detail { position: sticky; top: 8px; }
+}
 .flow-cell-plots { display: flex; flex-wrap: wrap; gap: 8px; }
 .flow-cell-plots img { max-width: min(100%, 320px); height: auto; border: 1px solid var(--color-hairline); border-radius: 6px; background: #fff; }
+.flow-inner { display: flex; flex-direction: column; gap: 8px; }
+.flow-inner > summary { width: fit-content; color: var(--color-accent-strong); font-size: 12px; font-weight: 600; cursor: pointer; }
+.flow-inner[open] > summary { margin-bottom: 6px; }
+.nb-body > .flow-inner { padding-left: 12px; }
 /* A value of a live session: where in it, what it is and when it was read, then its facts and a page of it. */
 .ov { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px 16px; container-type: inline-size; }
 .ov.stale .ov-section, .ov.stale .ov-facts, .ov.stale .ov-value { opacity: .62; }

package/node_modules/@rho-workspace/plugin-kernel/dist/ui.d.ts

@@ -3,7 +3,7 @@ export { SessionPane, NotebookPage, VariablesPane, PlotsPane, Code, FormSwitch,
 export { savedForm, saveForm } from './ui-notebook-form.js';
 export { askCell } from './ui-notebook-target.js';
 export { ServersPane, showOnServer } from './ui-servers.js';
-export { FlowPane, flowLimits } from './ui-flow.js';
+export { FlowPane, ScriptFlowView, lineageViewLimits, innerFlowLimits } from './ui-flow.js';
 export { ObjectView, objectViewLimits } from './ui-object.js';
 export { NotebookWorkSection, useNotebookWork, notebookWorkLimits, type NotebookWork } from './ui-notebook-work.js';
 export { useLiveValues, liveValueLimits, type LiveSession, type LiveValues, type ValueLanguage } from './ui-values.js';

package/node_modules/@rho-workspace/plugin-kernel/dist/ui.js

@@ -8,7 +8,7 @@ export { SessionPane, NotebookPage, VariablesPane, PlotsPane, Code, FormSwitch,
 export { savedForm, saveForm } from './ui-notebook-form.js';
 export { askCell } from './ui-notebook-target.js';
 export { ServersPane, showOnServer } from './ui-servers.js';
-export { FlowPane, flowLimits } from './ui-flow.js';
+export { FlowPane, ScriptFlowView, lineageViewLimits, innerFlowLimits } from './ui-flow.js';
 export { ObjectView, objectViewLimits } from './ui-object.js';
 export { NotebookWorkSection, useNotebookWork, notebookWorkLimits } from './ui-notebook-work.js';
 export { useLiveValues, liveValueLimits } from './ui-values.js';

package/node_modules/@rho-workspace/plugin-kernel/dist/value-graph.d.ts

@@ -0,0 +1,63 @@
+import type { Language } from './explore-code.js';
+import { type LineageCell } from './lineage.js';
+import { type ScriptFlow } from './script-flow.js';
+export type GraphKind = 'input' | 'value' | 'output' | 'plot';
+export interface Making {
+    from: number;
+    to: number;
+    code: string;
+    cell?: {
+        cellId: string;
+        number: number;
+        label: string;
+    };
+}
+export interface GraphNode {
+    id: string;
+    kind: GraphKind;
+    name: string;
+    means?: string;
+    how: string;
+    made: Making[];
+    uses: string[];
+    parents: string[];
+    children: string[];
+    stale?: string[];
+}
+export interface ValueGraph {
+    nodes: Map<string, GraphNode>;
+    results: string[];
+    inputs: string[];
+    others: string[];
+    folded: Map<string, {
+        made: Making[];
+        means?: string;
+    }>;
+    quiet: number;
+    cut: number;
+    tooLong: boolean;
+}
+export declare function scriptGraph(flow: ScriptFlow, language: Language): ValueGraph;
+export interface SessionCell extends LineageCell {
+    language: Language;
+}
+export declare function sessionGraph(cells: SessionCell[], values: Array<{
+    name: string;
+    type?: string;
+}>, language: Language): ValueGraph & {
+    omitted: {
+        values: number;
+        plots: number;
+        files: number;
+    };
+};
+export declare function graphPath(graph: ValueGraph, id: string): {
+    up: Set<string>;
+    down: Set<string>;
+};
+export declare function graphRows(graph: ValueGraph, shown: Set<string>): string[][];
+export type MarkKind = 'here' | 'from' | 'into';
+export declare function graphMarks(graph: ValueGraph, id: string): Array<Making & {
+    kind: MarkKind;
+}>;
+export declare function graphNodeAt(graph: ValueGraph, line: number, cellId?: string): GraphNode | null;