@datalayer/agent-runtimes 1.5.88 → 1.5.90

package/lib/chat/messages/codeBlocks.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Fenced code blocks drawn by a plugin, in the agent's words.
+ *
+ * The chat draws an agent's answer as markdown (`ChatMarkdown`), and a
+ * fenced block as code. A plugin that knows better what a block of some
+ * language is — a ```csv block is a spreadsheet — contributes a renderer to
+ * {@link ChatCodeBlock}, and the block is drawn by it, in the message itself.
+ * Read from the Reactor platform the chat is mounted in, like the renderers
+ * of a tool call's display: a chat with no platform, or no renderer for the
+ * language, draws the block as code, as before.
+ *
+ * @module chat/messages/codeBlocks
+ */
+import { type ComponentType, type JSX, type ReactNode } from 'react';
+import { type Contribution } from '@datalayer/reactor';
+/** One fenced block of an answer: its info string's language, and its text. */
+export type ChatCodeBlockProps = {
+    /** The fence's language, lower-cased: `csv` for ```csv. Empty for a bare fence. */
+    language: string;
+    /** The block's text, as written between the fences. */
+    code: string;
+};
+/** A renderer of fenced blocks, contributed to {@link ChatCodeBlock}. */
+export type ChatCodeBlockContribution = {
+    /** Stable id, for the registry and the graph. */
+    id: string;
+    /** The fence languages it draws, lower-case: `['csv', 'tsv']`. */
+    languages: string[];
+    /** A finer test, on the block itself; the block is drawn as code when it says no. */
+    match?: (block: ChatCodeBlockProps) => boolean;
+    /** What draws the block, in place of the code. */
+    Component: ComponentType<ChatCodeBlockProps>;
+};
+/** Where plugins put their fenced-block renderers. The first that takes a block draws it. */
+export declare const ChatCodeBlock: import("@datalayer/reactor").ContributionPoint<ChatCodeBlockContribution>;
+/**
+ * The fenced block a `<pre>` holds, as markdown renders one: a `<code>`
+ * element whose class names the language. `null` for anything else.
+ */
+export declare function codeBlockOf(children: ReactNode): ChatCodeBlockProps | null;
+/** The renderer that takes a block, among the contributions, in their order. */
+export declare function codeBlockRenderer(contributions: readonly Contribution<ChatCodeBlockContribution>[], block: ChatCodeBlockProps): ChatCodeBlockContribution | undefined;
+/**
+ * The markdown `pre` the chat hands its renderer: a block a contribution
+ * takes is drawn by it, every other one exactly as the default `pre` draws
+ * it (its code element, unwrapped).
+ */
+export declare function ChatCodePre({ children, }: {
+    children?: ReactNode;
+}): JSX.Element;

package/lib/chat/messages/codeBlocks.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Fenced code blocks drawn by a plugin, in the agent's words.
+ *
+ * The chat draws an agent's answer as markdown (`ChatMarkdown`), and a
+ * fenced block as code. A plugin that knows better what a block of some
+ * language is — a ```csv block is a spreadsheet — contributes a renderer to
+ * {@link ChatCodeBlock}, and the block is drawn by it, in the message itself.
+ * Read from the Reactor platform the chat is mounted in, like the renderers
+ * of a tool call's display: a chat with no platform, or no renderer for the
+ * language, draws the block as code, as before.
+ *
+ * @module chat/messages/codeBlocks
+ */
+import { isValidElement, useSyncExternalStore, } from 'react';
+import { defineContributionPoint } from '@datalayer/reactor';
+import { useOptionalReactorPlatform } from '@datalayer/reactor/react';
+/** Where plugins put their fenced-block renderers. The first that takes a block draws it. */
+export const ChatCodeBlock = defineContributionPoint('chat.codeBlock');
+const LANGUAGE = /(?:^|\s)language-([^\s]+)/;
+/** The text of a React node: strings and numbers, joined, through elements' children. */
+function textOf(node) {
+    if (typeof node === 'string' || typeof node === 'number') {
+        return String(node);
+    }
+    if (Array.isArray(node)) {
+        return node.map(textOf).join('');
+    }
+    if (isValidElement(node)) {
+        return textOf(node.props.children);
+    }
+    return '';
+}
+/**
+ * The fenced block a `<pre>` holds, as markdown renders one: a `<code>`
+ * element whose class names the language. `null` for anything else.
+ */
+export function codeBlockOf(children) {
+    const only = Array.isArray(children)
+        ? children.filter(child => child !== null && child !== '\n')
+        : [children];
+    if (only.length !== 1 || !isValidElement(only[0])) {
+        return null;
+    }
+    const props = only[0].props;
+    const language = LANGUAGE.exec(props.className ?? '')?.[1]?.toLowerCase();
+    if (language === undefined) {
+        return null;
+    }
+    return { language, code: textOf(props.children) };
+}
+/** The renderer that takes a block, among the contributions, in their order. */
+export function codeBlockRenderer(contributions, block) {
+    return contributions
+        .map(entry => entry.value)
+        .find(value => value.languages.includes(block.language) &&
+        (value.match ? value.match(block) : true));
+}
+const NO_SUBSCRIPTION = () => () => { };
+/**
+ * The markdown `pre` the chat hands its renderer: a block a contribution
+ * takes is drawn by it, every other one exactly as the default `pre` draws
+ * it (its code element, unwrapped).
+ */
+export function ChatCodePre({ children, }) {
+    const platform = useOptionalReactorPlatform();
+    useSyncExternalStore(platform?.subscribe ?? NO_SUBSCRIPTION, () => platform?.getRevision() ?? 0);
+    const block = platform ? codeBlockOf(children) : null;
+    const renderer = block
+        ? codeBlockRenderer(platform.getContributions(ChatCodeBlock), block)
+        : undefined;
+    if (block && renderer) {
+        const { Component } = renderer;
+        return (_jsx("div", { "data-chat-code-block": renderer.id, children: _jsx(Component, { language: block.language, code: block.code }) }));
+    }
+    return _jsx(_Fragment, { children: children });
+}

package/lib/components/teams/A2ATeamGraph.d.ts

@@ -21,10 +21,12 @@
  *
  * A member's connections — the MCP servers it reaches, Odoo for Accounting —
  * stand to its right, each a node half a member's size with the server's mark
- * (`SpecMark`), linked to it by an edge of its own. That edge is still until
- * the member calls one of the connection's tools: then it flows toward the
- * connection for as long as the call runs ({@link A2ATeamCall}), with the
- * tool's name on it; under reduced motion, the arrow and the words alone.
+ * (`SpecMark`), linked to it by an edge of its own, `MCP`, drawn as the A2A
+ * link is: still until the member calls one of the connection's tools, then
+ * flowing toward the connection for as long as the call runs
+ * ({@link A2ATeamCall}), `MCP · list invoices`, and back with its result for
+ * a moment, `MCP · Odoo answers` (a screen reader hears who calls whom);
+ * under reduced motion, the arrow and the words alone.
  *
  * The graph is a picture, not an editor: nothing is dragged, panned or
  * zoomed, and the wheel scrolls the page. Its viewport is worked out from its
@@ -232,13 +234,32 @@ export declare function arrowPath(source: {
     y: number;
 }, forward: boolean): string;
 type CallData = {
+    /** Which way it carries a call: out with the call, back with its result. */
+    flow: A2ATeamFlow;
     /** The tool being called, in words (`list invoices`); empty while none is. */
     calling: string;
+    /** What it says: `MCP`, and what it carries while it carries something. */
+    label: string;
 };
-/** A member's link to a connection: still, or flowing toward it while a call runs. */
+/**
+ * A member's link to a connection, drawn as the A2A link is: still, flowing
+ * toward the connection while a call runs, and back with its result.
+ */
 export declare const CallEdge: import("react").NamedExoticComponent<EdgeProps<Edge<CallData>>>;
-/** What a member's call says, on its edge and to a screen reader. */
-export declare function callWords(member: string, connection: A2ATeamConnection, tool: string): string;
+/** What a link to a connection says at rest, as `A2A` says the members' link. */
+export declare const MCP_LABEL = "MCP";
+/**
+ * What a link to a connection says while it carries a call, short enough
+ * for the room beside the member: the tool going out, `MCP · list invoices`,
+ * then `MCP · Odoo answers` as its result comes back.
+ */
+export declare function callEdgeWords(connection: A2ATeamConnection, tool: string, flow: A2ATeamFlow): string;
+/**
+ * What a member's call says, on its edge and to a screen reader: the call
+ * going out, `Accounting calls Odoo · list invoices`, then its result
+ * coming back, `Odoo answers Accounting · list invoices`.
+ */
+export declare function callWords(member: string, connection: A2ATeamConnection, tool: string, flow?: A2ATeamFlow): string;
 /** The viewport that shows a graph `drawn` wide whole in a box `width` wide, never larger than drawn. */
 export declare function teamViewport(width: number, drawn?: number): Viewport;
 /** Where a member is laid out: its column and row, from the positions or the default. */

package/lib/components/teams/A2ATeamGraph.js

@@ -8,7 +8,7 @@ import { AssistantStage, } from '../../chat/assistant/AssistantStage.js';
 import { useSignalValue } from '@datalayer/reactor/react';
 import { teamNotebookKernel } from './teamNotebookKernel.js';
 import { SpecMark } from '../../chat/marks/SpecMark.js';
-import { toolWords, } from './a2aTeamFlow.js';
+import { callFlow, toolWords, } from './a2aTeamFlow.js';
 import { NotebookPreview } from './NotebookPreview.js';
 import { notebookBalloonVisual } from './TeamNotebook.js';
 import { useBalloonRoom } from './useBalloonRoom.js';
@@ -26,8 +26,11 @@ const WIDTH = NODE_WIDTH * 2 + GAP;
 const ROW_GAP = 48;
 /** A connection's node: half a member's. */
 const CONNECTION_WIDTH = NODE_WIDTH / 2;
-/** Between a member and its connections, to its right. */
-const CONNECTION_GAP = 44;
+/**
+ * Between a member and its connections, to its right: room for the MCP
+ * edge's words, as the A2A edge has room for its own.
+ */
+const CONNECTION_GAP = 140;
 const CONNECTIONS_APART = 16;
 /** Where a member's connections start: right of it. */
 const CONNECTION_X = NODE_WIDTH + CONNECTION_GAP;
@@ -304,7 +307,7 @@ const ConnectionNode = memo(function ConnectionNode({ id, data, }) {
     if (!connection) {
         return null;
     }
-    return (_jsxs(Box, { className: "nodrag nopan nowheel", width: CONNECTION_WIDTH, display: "flex", flexDirection: "column", alignItems: "center", gap: "2px", cursor: "default", pointerEvents: "all", title: connection.name, "data-team-connection": connection.id, "data-connection-busy": tool ? 'true' : 'false', children: [_jsx(Handle, { type: "target", position: Position.Left, style: { ...HANDLE(size), left: 0 }, isConnectable: false }), _jsx(Box, { as: "button", type: "button", className: tool ? 'a2a-team-connection-busy' : undefined, "aria-label": connectionLabel(connection, owner?.name), "aria-expanded": told, "aria-controls": detailsId, "data-connection-figure": "", onClick: () => setTold(shown => !shown), onKeyDown: (event) => {
+    return (_jsxs(Box, { className: "nodrag nopan nowheel", width: CONNECTION_WIDTH, display: "flex", flexDirection: "column", alignItems: "center", gap: "2px", cursor: "default", pointerEvents: "all", title: connection.name, "data-team-connection": connection.id, "data-connection-busy": tool ? 'true' : 'false', children: [_jsx(Handle, { type: "target", position: Position.Left, style: { ...HANDLE(size), left: (CONNECTION_WIDTH - size) / 2 }, isConnectable: false }), _jsx(Box, { as: "button", type: "button", className: tool ? 'a2a-team-connection-busy' : undefined, "aria-label": connectionLabel(connection, owner?.name), "aria-expanded": told, "aria-controls": detailsId, "data-connection-figure": "", onClick: () => setTold(shown => !shown), onKeyDown: (event) => {
                     if (event.key === 'Escape' && told) {
                         event.stopPropagation();
                         setTold(false);
@@ -367,18 +370,20 @@ const LinkEdge = memo(function LinkEdge({ id, sourceX, sourceY, targetX, targetY
                     opacity: flow === 'still' ? 0.6 : 0.25,
                 } }), flow !== 'still' && (_jsxs("g", { "data-a2a-edge-flow": flow, children: [_jsx("path", { d: path, fill: "none", className: `a2a-team-flow a2a-team-flow-${flow}`, stroke: "var(--fgColor-accent)", strokeWidth: 3, strokeLinecap: "round", strokeDasharray: "10 14" }), _jsx("path", { d: arrow, fill: "var(--fgColor-accent)" })] })), _jsx(EdgeLabelRenderer, { children: _jsx(Box, { className: "nodrag nopan", position: "absolute", transform: `translate(-50%, 12px) translate(${(sourceX + targetX) / 2}px, ${(sourceY + targetY) / 2}px)`, pointerEvents: "none", textAlign: "center", children: _jsx(Label, { variant: data?.connected ? 'accent' : 'secondary', children: data?.label }) }) })] }));
 });
-/** A member's link to a connection: still, or flowing toward it while a call runs. */
+/**
+ * A member's link to a connection, drawn as the A2A link is: still, flowing
+ * toward the connection while a call runs, and back with its result.
+ */
 export const CallEdge = memo(function CallEdge({ id, sourceX, sourceY, targetX, targetY, data, }) {
-    const calling = Boolean(data?.calling);
+    const flow = data?.flow ?? 'still';
     const path = `M ${sourceX},${sourceY} L ${targetX},${targetY}`;
-    const arrow = `M ${targetX},${targetY} L ${targetX - ARROW / 1.6},${targetY - ARROW} L ${targetX + ARROW / 1.6},${targetY - ARROW} Z`;
+    // The arrow at the end the call or its result goes to, along the edge.
+    const arrow = arrowPath({ x: sourceX, y: sourceY }, { x: targetX, y: targetY }, flow === 'asking');
     return (_jsxs(_Fragment, { children: [_jsx(BaseEdge, { id: id, path: path, style: {
-                    stroke: 'var(--borderColor-default)',
+                    stroke: 'var(--borderColor-accent-emphasis)',
                     strokeWidth: 2,
-                    opacity: calling ? 0.3 : 0.8,
-                } }), calling && (_jsxs("g", { "data-mcp-edge-call": data?.calling, children: [_jsx("path", { d: path, fill: "none", className: "a2a-team-flow a2a-team-call", stroke: "var(--fgColor-accent)", strokeWidth: 3, strokeLinecap: "round", strokeDasharray: "6 8" }), _jsx("path", { d: arrow, fill: "var(--fgColor-accent)" })] })), calling && (_jsx(EdgeLabelRenderer, { children: _jsx(Box, { className: "nodrag nopan", position: "absolute", 
-                    // Beside the edge, toward the middle of the graph.
-                    transform: `translate(calc(-100% - 10px), -50%) translate(${(sourceX + targetX) / 2}px, ${(sourceY + targetY) / 2}px)`, pointerEvents: "none", whiteSpace: "nowrap", children: _jsx(Label, { variant: "accent", children: data?.calling }) }) }))] }));
+                    opacity: flow === 'still' ? 0.6 : 0.25,
+                } }), flow !== 'still' && (_jsxs("g", { "data-mcp-edge-call": data?.calling, "data-mcp-edge-flow": flow, children: [_jsx("path", { d: path, fill: "none", className: `a2a-team-flow a2a-team-flow-${flow}`, stroke: "var(--fgColor-accent)", strokeWidth: 3, strokeLinecap: "round", strokeDasharray: "10 14" }), _jsx("path", { d: arrow, fill: "var(--fgColor-accent)" })] })), _jsx(EdgeLabelRenderer, { children: _jsx(Box, { className: "nodrag nopan", position: "absolute", transform: `translate(-50%, 12px) translate(${(sourceX + targetX) / 2}px, ${(sourceY + targetY) / 2}px)`, pointerEvents: "none", textAlign: "center", whiteSpace: "nowrap", "data-mcp-edge-label": "", children: _jsx(Label, { variant: "accent", children: data?.label }) }) })] }));
 });
 const NODE_TYPES = { member: MemberNode, connection: ConnectionNode };
 const EDGE_TYPES = { a2a: LinkEdge, mcp: CallEdge };
@@ -397,9 +402,30 @@ function connectionsReach(size, count, connectionHeight) {
         ? size / 4 + count * connectionHeight + (count - 1) * CONNECTIONS_APART
         : 0;
 }
-/** What a member's call says, on its edge and to a screen reader. */
-export function callWords(member, connection, tool) {
-    return `${member} calls ${connection.label} · ${toolWords(tool, connection)}`;
+/** What a link to a connection says at rest, as `A2A` says the members' link. */
+export const MCP_LABEL = 'MCP';
+/**
+ * What a link to a connection says while it carries a call, short enough
+ * for the room beside the member: the tool going out, `MCP · list invoices`,
+ * then `MCP · Odoo answers` as its result comes back.
+ */
+export function callEdgeWords(connection, tool, flow) {
+    return flow === 'asking'
+        ? `${MCP_LABEL} · ${toolWords(tool, connection)}`
+        : flow === 'answering'
+            ? `${MCP_LABEL} · ${connection.label} answers`
+            : MCP_LABEL;
+}
+/**
+ * What a member's call says, on its edge and to a screen reader: the call
+ * going out, `Accounting calls Odoo · list invoices`, then its result
+ * coming back, `Odoo answers Accounting · list invoices`.
+ */
+export function callWords(member, connection, tool, flow = 'asking') {
+    const words = toolWords(tool, connection);
+    return flow === 'answering'
+        ? `${connection.label} answers ${member} · ${words}`
+        : `${member} calls ${connection.label} · ${words}`;
 }
 /** The viewport that shows a graph `drawn` wide whole in a box `width` wide, never larger than drawn. */
 export function teamViewport(width, drawn = WIDTH) {
@@ -621,21 +647,34 @@ export function A2ATeamGraph({ entry, peer, peers: more = NO_PEERS, flow, flows,
         ? flowWords(flowOf(link.to), entry.name, memberOf(link.to)?.name ?? link.to)
         : '';
     const words = edgesWanted.map(wordsOf).filter(Boolean);
-    // The tool each connection is answering now, in words, by its node's id.
+    // The tool each connection is answering now, in words, by its node's id,
+    // and which way its edge carries it: a call still running before one
+    // whose result is coming back.
     const busy = useMemo(() => {
         const byNode = {};
+        const edgeByNode = {};
         const said = [];
-        for (const call of calls) {
+        const running = [
+            ...calls.filter(call => callFlow(call) === 'asking'),
+            ...calls.filter(call => callFlow(call) === 'answering'),
+        ];
+        for (const call of running) {
             const member = members.find(one => one.id === call.member);
             const connection = member?.connections?.find(known => known.id === call.connection);
             if (!member || !connection) {
                 continue;
             }
             const node = connectionNodeId(member.id, connection.id);
+            const flow = callFlow(call);
+            const words = callWords(member.name, connection, call.tool, flow);
             byNode[node] ??= toolWords(call.tool, connection);
-            said.push(callWords(member.name, connection, call.tool));
+            edgeByNode[node] ??= {
+                flow,
+                label: callEdgeWords(connection, call.tool, flow),
+            };
+            said.push(words);
         }
-        return { byNode, said: [...new Set(said)] };
+        return { byNode, edgeByNode, said: [...new Set(said)] };
     }, [calls, members]);
     const linkKey = JSON.stringify(edgesWanted.map(link => ({
         ...link,
@@ -661,6 +700,7 @@ export function A2ATeamGraph({ entry, peer, peers: more = NO_PEERS, flow, flows,
         ...JSON.parse(placedKey).flatMap(({ member, connections }) => connections.map(connection => {
             const node = connectionNodeId(member, connection);
             const calling = busy.byNode[node] ?? '';
+            const carried = busy.edgeByNode[node];
             return {
                 id: `${member}->${node}`,
                 source: member,
@@ -669,7 +709,11 @@ export function A2ATeamGraph({ entry, peer, peers: more = NO_PEERS, flow, flows,
                 type: 'mcp',
                 selectable: false,
                 focusable: false,
-                data: { calling },
+                data: {
+                    flow: carried?.flow ?? 'still',
+                    calling,
+                    label: carried?.label ?? MCP_LABEL,
+                },
             };
         })),
     ], [linkKey, placedKey, busy]);
@@ -686,19 +730,12 @@ export function A2ATeamGraph({ entry, peer, peers: more = NO_PEERS, flow, flows,
             '& .a2a-team-flow-answering': {
                 animation: 'a2aTeamFlow 0.6s linear infinite reverse',
             },
-            '@keyframes a2aTeamCall': {
-                from: { strokeDashoffset: 14 },
-                to: { strokeDashoffset: 0 },
-            },
             '@keyframes a2aTeamPulse': {
                 '0%, 100%': { boxShadow: '0 0 0 0 transparent' },
                 '50%': {
                     boxShadow: '0 0 0 4px var(--bgColor-accent-muted)',
                 },
             },
-            '& .a2a-team-call': {
-                animation: 'a2aTeamCall 0.5s linear infinite',
-            },
             '& .a2a-team-connection-busy': {
                 animation: 'a2aTeamPulse 1s ease-in-out infinite',
             },

package/lib/components/teams/a2aTeamFlow.d.ts

@@ -65,11 +65,20 @@ export type A2ATeamCall = {
     id?: string;
     /** When it started, in milliseconds. */
     started: number;
-    /** Ended, but shown until it has been shown {@link CALL_SHOWN_MS}. */
-    ended?: boolean;
+    /**
+     * When it ended: its result is shown coming back from the connection
+     * until {@link RESULT_SHOWN_MS} after.
+     */
+    ended?: number;
 };
-/** The least time a call is shown, in milliseconds: a quick one still reads. */
-export declare const CALL_SHOWN_MS = 900;
+/**
+ * How long a call's result is shown coming back to the member, in
+ * milliseconds: the link to a connection flows like the A2A link, out with
+ * the call, back with its result.
+ */
+export declare const RESULT_SHOWN_MS = 1200;
+/** Which way a member's link to a connection carries a call now. */
+export declare function callFlow(call: A2ATeamCall): A2ATeamFlow;
 /**
  * The connection a tool is of: one whose tools name it (a toolset's prefix
  * before the name is allowed, as a host may add one), else one whose
@@ -85,8 +94,8 @@ export declare function toolWords(tool: string, connection?: A2ATeamConnection):
 export declare function toolOwnName(tool: string, connections: A2ATeamConnection[]): string;
 /**
  * The calls running after an event of the peer's (`member`): a call it
- * starts to one of its connections is added; its end marks it ended, and
- * drops it once it has been shown long enough (else `holdMs` says when to
+ * starts to one of its connections is added; its end marks it ended, its
+ * result coming back, for {@link RESULT_SHOWN_MS} (`holdMs` says when to
  * look again, with {@link pruneCalls}). A new request, an answer or a
  * failure ends them all.
  */
@@ -94,5 +103,5 @@ export declare function callsAfter(calls: A2ATeamCall[], event: A2APeerEvent, me
     calls: A2ATeamCall[];
     holdMs?: number;
 };
-/** The calls without those ended and shown long enough. */
+/** The calls without those whose result has been shown long enough. */
 export declare function pruneCalls(calls: A2ATeamCall[], now: number): A2ATeamCall[];

package/lib/components/teams/a2aTeamFlow.js

@@ -30,8 +30,16 @@ export function flowEnds(flow, entry, peer) {
     }
     return undefined;
 }
-/** The least time a call is shown, in milliseconds: a quick one still reads. */
-export const CALL_SHOWN_MS = 900;
+/**
+ * How long a call's result is shown coming back to the member, in
+ * milliseconds: the link to a connection flows like the A2A link, out with
+ * the call, back with its result.
+ */
+export const RESULT_SHOWN_MS = 1200;
+/** Which way a member's link to a connection carries a call now. */
+export function callFlow(call) {
+    return call.ended === undefined ? 'asking' : 'answering';
+}
 /**
  * The connection a tool is of: one whose tools name it (a toolset's prefix
  * before the name is allowed, as a host may add one), else one whose
@@ -65,8 +73,8 @@ export function toolOwnName(tool, connections) {
 }
 /**
  * The calls running after an event of the peer's (`member`): a call it
- * starts to one of its connections is added; its end marks it ended, and
- * drops it once it has been shown long enough (else `holdMs` says when to
+ * starts to one of its connections is added; its end marks it ended, its
+ * result coming back, for {@link RESULT_SHOWN_MS} (`holdMs` says when to
  * look again, with {@link pruneCalls}). A new request, an answer or a
  * failure ends them all.
  */
@@ -96,24 +104,19 @@ export function callsAfter(calls, event, member, connections, now) {
             ],
         };
     }
-    const index = calls.findIndex(call => !call.ended &&
+    const index = calls.findIndex(call => call.ended === undefined &&
         call.connection === connection.id &&
         (step.id && call.id ? call.id === step.id : call.tool === step.name));
     if (index < 0) {
         return { calls };
     }
-    const call = calls[index];
-    const left = call.started + CALL_SHOWN_MS - now;
-    if (left <= 0) {
-        return { calls: calls.filter((_, at) => at !== index) };
-    }
     return {
-        calls: calls.map((c, at) => (at === index ? { ...c, ended: true } : c)),
-        holdMs: left,
+        calls: calls.map((c, at) => (at === index ? { ...c, ended: now } : c)),
+        holdMs: RESULT_SHOWN_MS,
     };
 }
-/** The calls without those ended and shown long enough. */
+/** The calls without those whose result has been shown long enough. */
 export function pruneCalls(calls, now) {
-    const kept = calls.filter(call => !call.ended || call.started + CALL_SHOWN_MS > now);
+    const kept = calls.filter(call => call.ended === undefined || call.ended + RESULT_SHOWN_MS > now);
     return kept.length === calls.length ? calls : kept;
 }

package/lib/examples/AgentOutputsExample.d.ts

@@ -14,6 +14,13 @@
  * We subscribe to the chat store, detect the output type of the latest
  * assistant message, auto-switch the sidebar tab, and render the payload
  * inline in the sidebar.
+ *
+ * A spreadsheet (a ```csv block) is also drawn in the chat message itself, by
+ * the `AgentOutputsSheetsPlugin` renderer the chat reads from its
+ * `ChatCodeBlock` point; the message's grid and the Sheet tab's are one
+ * workbook. The Cells agent tools (`AgentOutputsSheetToolsPlugin`, the
+ * `cells` bundle the spec's `frontend_tools` names) act on the last one, so
+ * "Chart the spreadsheet" inserts a chart that appears on both grids.
  */
 import React from 'react';
 declare const AgentOutputsExample: React.FC;

package/lib/examples/AgentOutputsExample.js

@@ -19,6 +19,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * We subscribe to the chat store, detect the output type of the latest
  * assistant message, auto-switch the sidebar tab, and render the payload
  * inline in the sidebar.
+ *
+ * A spreadsheet (a ```csv block) is also drawn in the chat message itself, by
+ * the `AgentOutputsSheetsPlugin` renderer the chat reads from its
+ * `ChatCodeBlock` point; the message's grid and the Sheet tab's are one
+ * workbook. The Cells agent tools (`AgentOutputsSheetToolsPlugin`, the
+ * `cells` bundle the spec's `frontend_tools` names) act on the last one, so
+ * "Chart the spreadsheet" inserts a chart that appears on both grids.
  */
 /// <reference types="vite/client" />
 import { useEffect, useState, useRef, useMemo } from 'react';
@@ -26,15 +33,16 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Text, Button, Heading, Label } from '@primer/react';
 import { TableIcon, FileIcon, CodeIcon, GraphIcon, DownloadIcon, } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
+import { CellsProvider, Spreadsheet } from '@datalayer/cells';
 import { AuthRequiredView } from './components/index.js';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel/index.js';
 import { ThemedProvider } from './utils/themedProvider.js';
 import { uniqueAgentId } from './utils/agentId.js';
 import { LoopEmbed } from '../apps/index.js';
-import { AgentOutputsPlugin } from '../apps/plugins/agent-outputs/index.js';
+import { downloadSheet, parseSheetBlock, useFitHeight, useSheetModel, } from '../apps/plugins/agent-outputs/sheets.js';
+import { AGENT_OUTPUTS_LOOP_PLUGINS } from './utils/agentOutputsPlugins.js';
 import { useChatStore } from '../stores/chatStore.js';
 import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl.js';
-const LOOP_PLUGINS_AGENTOUT = [AgentOutputsPlugin];
 const queryClient = new QueryClient();
 // ─── Constants ─────────────────────────────────────────────────────────────
 const AGENT_NAME = 'outputs-example-agent';
@@ -57,8 +65,6 @@ const expandCompactMarkdownTable = (text) => {
     return text.replace(/\|\|/g, '|\n|');
 };
 const EXT_LIKE_INFOS = new Set([
-    'csv',
-    'tsv',
     'txt',
     'md',
     'markdown',
@@ -119,6 +125,20 @@ const detectOutput = (m) => {
         }
         // File: info string is a known extension OR first line declares a filename.
         const filenameMatch = firstLine.match(/^#\s*filename:\s*([\w.-]+)/i);
+        // Spreadsheet: a CSV or TSV, by its fence (`csv`, `tsv`, `spreadsheet`,
+        // `cells`) or a `# filename:` ending in .csv or .tsv — read as the chat's
+        // renderer reads it, so both grids show the same workbook.
+        const sheet = parseSheetBlock(info, rawBody);
+        if (sheet) {
+            return {
+                tab: 'sheet',
+                payload: sheet.source,
+                filename: sheet.name,
+                extension: sheet.extension,
+                sheet,
+                messageId: m.id,
+            };
+        }
         if (filenameMatch || EXT_LIKE_INFOS.has(info)) {
             const filename = filenameMatch?.[1] ?? (info ? `output.${info}` : 'output.txt');
             return {
@@ -257,6 +277,24 @@ const ChartView = ({ source }) => {
     }
     return (_jsx(ReactECharts, { option: option, style: { height: 280, width: '100%' } }));
 };
+// ─── Spreadsheet renderer (Datalayer Cells) ───────────────────────────────
+/**
+ * A CSV or TSV the agent wrote, in a Datalayer Cells grid: the workbook the
+ * chat message shows too (read once, on this thread), editable here, and
+ * where the agent's chart goes.
+ */
+const SheetView = ({ block }) => {
+    const { model, error } = useSheetModel(block);
+    // As tall as its data and charts (up to 640 px), so a chart the agent adds shows.
+    const height = useFitHeight(model, 200, 640);
+    if (error) {
+        return (_jsxs(Text, { sx: { color: 'danger.fg', fontSize: 0 }, children: ["Could not read the spreadsheet: ", error] }));
+    }
+    if (!model) {
+        return _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Reading\u2026" });
+    }
+    return (_jsx(CellsProvider, { model: model, children: _jsx(Box, { height: height, border: "1px solid", borderColor: "border.muted", children: _jsx(Spreadsheet, { model: model, "aria-label": block.name }) }) }));
+};
 // ─── Inner component (rendered after auth) ─────────────────────────────────
 const AgentOutputsInner = () => {
     // The Loop creates the agent from the plugin's blueprint when it connects;
@@ -312,10 +350,11 @@ const AgentOutputsInner = () => {
         document.body.removeChild(a);
         URL.revokeObjectURL(url);
     };
-    return (_jsxs(Box, { height: "100%", display: "flex", flexDirection: "column", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.default", flexShrink: 0, children: [_jsx(TableIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: "Agent Outputs \u2014 Local Runtime" })] }), _jsxs(Box, { flex: 1, minHeight: 0, display: "flex", children: [_jsx(Box, { flex: 1, minWidth: 0, children: _jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: agentName, editors: false, showHeader: true, plugins: LOOP_PLUGINS_AGENTOUT }) }), _jsxs(Box, { width: 420, borderLeft: "1px solid", borderColor: "border.default", display: "flex", flexDirection: "column", overflow: "hidden", children: [_jsx(Box, { display: "flex", borderBottom: "1px solid", borderColor: "border.default", flexShrink: 0, children: [
+    return (_jsxs(Box, { height: "100%", display: "flex", flexDirection: "column", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.default", flexShrink: 0, children: [_jsx(TableIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: "Agent Outputs \u2014 Local Runtime" })] }), _jsxs(Box, { flex: 1, minHeight: 0, display: "flex", children: [_jsx(Box, { flex: 1, minWidth: 0, children: _jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: agentName, editors: false, showHeader: true, plugins: AGENT_OUTPUTS_LOOP_PLUGINS }) }), _jsxs(Box, { width: 420, borderLeft: "1px solid", borderColor: "border.default", display: "flex", flexDirection: "column", overflow: "hidden", children: [_jsx(Box, { display: "flex", borderBottom: "1px solid", borderColor: "border.default", flexShrink: 0, children: [
                                     { key: 'table', icon: TableIcon, label: 'Table' },
                                     { key: 'json', icon: CodeIcon, label: 'JSON' },
                                     { key: 'chart', icon: GraphIcon, label: 'Chart' },
+                                    { key: 'sheet', icon: TableIcon, label: 'Sheet' },
                                     { key: 'files', icon: FileIcon, label: 'Files' },
                                 ].map(t => {
                                     const n = countByTab(t.key);
@@ -328,14 +367,15 @@ const AgentOutputsInner = () => {
                                             borderColor: activeTab === t.key ? 'accent.fg' : 'transparent',
                                             fontWeight: activeTab === t.key ? 'bold' : 'normal',
                                         }, children: [t.label, n > 0 ? ` (${n})` : ''] }, t.key));
-                                }) }), _jsxs(Box, { p: 3, flex: 1, overflow: "auto", children: [_jsxs(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: [activeTab.charAt(0).toUpperCase() + activeTab.slice(1), " outputs"] }), filtered.length === 0 ? (_jsxs(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: ["No ", activeTab, " outputs yet. Use one of the openers in the chat to produce one \u2014 the side panel will switch to the matching tab automatically."] })) : (filtered.map((d, idx) => (_jsxs(Box, { p: 2, mb: 2, border: "1px solid", borderColor: "border.default", borderRadius: 2, children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, gap: 2, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: d.filename ?? `${d.tab} output` }), _jsx(Label, { size: "small", variant: "secondary", children: d.tab })] }), d.tab === 'table' && _jsx(MarkdownTable, { source: d.payload }), d.tab === 'json' && (_jsx(Box, { as: "pre", bg: "canvas.default", p: 2, borderRadius: 2, fontFamily: "mono", fontSize: 0, maxHeight: 320, overflow: "auto", whiteSpace: "pre-wrap", m: 0, children: (() => {
+                                }) }), _jsxs(Box, { p: 3, flex: 1, overflow: "auto", children: [_jsxs(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: [activeTab.charAt(0).toUpperCase() + activeTab.slice(1), " outputs"] }), filtered.length === 0 ? (_jsxs(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: ["No ", activeTab, " outputs yet. Use one of the openers in the chat to produce one \u2014 the side panel will switch to the matching tab automatically.", activeTab === 'sheet' &&
+                                                ' For a spreadsheet, ask for the data as CSV, for example: "Give me twelve months of sales by region as a CSV".'] })) : (filtered.map((d, idx) => (_jsxs(Box, { p: 2, mb: 2, border: "1px solid", borderColor: "border.default", borderRadius: 2, children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, gap: 2, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: d.filename ?? `${d.tab} output` }), _jsx(Label, { size: "small", variant: "secondary", children: d.tab })] }), d.tab === 'table' && _jsx(MarkdownTable, { source: d.payload }), d.tab === 'json' && (_jsx(Box, { as: "pre", bg: "canvas.default", p: 2, borderRadius: 2, fontFamily: "mono", fontSize: 0, maxHeight: 320, overflow: "auto", whiteSpace: "pre-wrap", m: 0, children: (() => {
                                                     try {
                                                         return JSON.stringify(JSON.parse(d.payload), null, 2);
                                                     }
                                                     catch {
                                                         return d.payload;
                                                     }
-                                                })() })), d.tab === 'chart' && _jsx(ChartView, { source: d.payload }), d.tab === 'files' && (_jsxs(_Fragment, { children: [_jsx(Box, { as: "pre", bg: "canvas.default", p: 2, borderRadius: 2, fontFamily: "mono", fontSize: 0, maxHeight: 200, overflow: "auto", whiteSpace: "pre-wrap", m: 0, mb: 2, children: d.payload }), _jsxs(Button, { size: "small", leadingVisual: DownloadIcon, onClick: () => download(d), children: ["Download ", d.filename ?? 'file'] })] }))] }, d.messageId + ':' + idx))))] })] })] })] }));
+                                                })() })), d.tab === 'chart' && _jsx(ChartView, { source: d.payload }), d.tab === 'sheet' && d.sheet && (_jsxs(_Fragment, { children: [_jsx(SheetView, { block: d.sheet }), _jsx(Box, { mt: 2, children: _jsxs(Button, { size: "small", leadingVisual: DownloadIcon, onClick: () => downloadSheet(d.sheet), children: ["Download ", d.filename ?? 'spreadsheet'] }) })] })), d.tab === 'files' && (_jsxs(_Fragment, { children: [_jsx(Box, { as: "pre", bg: "canvas.default", p: 2, borderRadius: 2, fontFamily: "mono", fontSize: 0, maxHeight: 200, overflow: "auto", whiteSpace: "pre-wrap", m: 0, mb: 2, children: d.payload }), _jsxs(Button, { size: "small", leadingVisual: DownloadIcon, onClick: () => download(d), children: ["Download ", d.filename ?? 'file'] })] }))] }, d.messageId + ':' + idx))))] })] })] })] }));
 };
 // ─── Sync token to core IAM store ──────────────────────────────────────────
 const syncTokenToIamStore = (token) => {

package/lib/examples/utils/agentOutputsPlugins.d.ts

@@ -0,0 +1,2 @@
+/** The Loop's plugins on the outputs page: the agent, the chat's grids, the grid's tools. */
+export declare const AGENT_OUTPUTS_LOOP_PLUGINS: import("@datalayer/reactor").ReactorPlugin<Record<string, never>, unknown, unknown>[];