@datalayer/agent-runtimes 1.3.86 → 1.3.88

package/lib/components/a2ui/datalayer/Download.d.ts

@@ -0,0 +1,21 @@
+import { type OwnCommon } from './implementation';
+export type DownloadProps = OwnCommon & {
+    name?: string;
+    url?: string;
+    media_type?: string;
+    size?: number;
+    description?: string;
+};
+/** How large a file is, in words. */
+export declare function sizeInWords(size: number | undefined): string;
+/** The file a block offers, or why it cannot offer it. */
+export declare function downloadOf(props: Pick<DownloadProps, 'name' | 'url'>): {
+    name: string;
+    url: string;
+} | {
+    problem: string;
+};
+export declare function DownloadView({ props }: {
+    props: DownloadProps;
+}): import("react").JSX.Element;
+export declare const Download: import("@a2ui/react/v0_9").ReactComponentImplementation;

package/lib/components/a2ui/datalayer/Download.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * A file to download (STUDIO P-04): what an application gives to save — a
+ * report, a sheet, an export — by its name and its link, an http(s) link or
+ * the file itself as a `data:` URL. Its kind and size are said beside its
+ * name, its description under it. Pressing it saves the file under its name
+ * and dispatches the block's action (its `download` event), when it has one.
+ * A link of any other scheme is not followed: the block says so.
+ *
+ * @module components/a2ui/datalayer/Download
+ */
+import { useMemo } from 'react';
+import { Link, Text } from '@primer/react';
+import { DownloadIcon } from '@primer/octicons-react';
+import { Box } from '@datalayer/primer-addons';
+import { BlockFrame, Problem } from './parts';
+import { ownImplementation } from './implementation';
+/** The schemes a file is fetched by: the web's, or the file itself. */
+const SCHEMES = /^(https?:\/\/|data:)/i;
+/** How large a file is, in words. */
+export function sizeInWords(size) {
+    if (typeof size !== 'number' || !Number.isFinite(size) || size < 0) {
+        return '';
+    }
+    if (size < 1024) {
+        return size === 1 ? '1 byte' : `${size} bytes`;
+    }
+    const units = ['KB', 'MB', 'GB'];
+    let value = size / 1024;
+    let unit = 0;
+    while (value >= 1024 && unit < units.length - 1) {
+        value /= 1024;
+        unit += 1;
+    }
+    return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[unit]}`;
+}
+/** The file a block offers, or why it cannot offer it. */
+export function downloadOf(props) {
+    const name = typeof props.name === 'string' ? props.name.trim() : '';
+    const url = typeof props.url === 'string' ? props.url.trim() : '';
+    if (!name) {
+        return { problem: 'This file has no name.' };
+    }
+    if (!url) {
+        return { problem: `${name} has no link.` };
+    }
+    if (!SCHEMES.test(url)) {
+        return {
+            problem: `${name} is not offered: its link is neither an http(s) link nor a data: URL.`,
+        };
+    }
+    return { name, url };
+}
+export function DownloadView({ props }) {
+    const { action } = props;
+    const offered = useMemo(() => downloadOf({ name: props.name, url: props.url }), [props.name, props.url]);
+    const said = [props.media_type, sizeInWords(props.size)]
+        .filter(Boolean)
+        .join(' · ');
+    return (_jsx(BlockFrame, { label: "File to download", weight: props.weight, testId: "a2ui-download", children: 'problem' in offered ? (_jsx(Problem, { children: offered.problem })) : (_jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'flex-start' }, children: [_jsx(Box, { sx: { color: 'fg.muted', pt: '2px' }, children: _jsx(DownloadIcon, { size: 16, "aria-hidden": "true" }) }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', minWidth: 0 }, children: [_jsxs(Box, { children: [_jsx(Link, { href: offered.url, download: offered.name, target: "_blank", rel: "noreferrer noopener", onClick: () => action?.(), sx: { fontWeight: 'semibold', wordBreak: 'break-word' }, children: offered.name }), said ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1, ml: 2 }, children: said })) : null] }), props.description ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: props.description })) : null] })] })) }));
+}
+export const Download = ownImplementation('Download', DownloadView);

package/lib/components/a2ui/datalayer/drawn.d.ts

@@ -6,5 +6,5 @@
  *
  * @module components/a2ui/datalayer/drawn
  */
-export declare const DRAWN_OWN_COMPONENTS: readonly ["Table", "Chart", "FileUpload", "Chat", "Evidence", "Form"];
+export declare const DRAWN_OWN_COMPONENTS: readonly ["Table", "Chart", "FileUpload", "Chat", "Evidence", "Form", "Download"];
 export type DrawnOwnComponent = (typeof DRAWN_OWN_COMPONENTS)[number];

package/lib/components/a2ui/datalayer/drawn.js

@@ -17,4 +17,5 @@ export const DRAWN_OWN_COMPONENTS = [
     'Chat',
     'Evidence',
     'Form',
+    'Download',
 ];

package/lib/components/a2ui/datalayer/index.d.ts

@@ -1,7 +1,7 @@
 /**
  * Datalayer's own components, drawn (LOOP C-18): a renderer for each the
  * catalog has beside A2UI's basic ones — Table, Chart, File upload, Chat,
- * Evidence and Form — made as A2UI makes its own, so that the decision
+ * Evidence, Form and File to download — made as A2UI makes its own, so that the decision
  * surface, an application's page, the Surface view and the components page
  * draw them as they draw a Button.
  *
@@ -19,5 +19,6 @@ export { DRAWN_OWN_COMPONENTS, type DrawnOwnComponent } from './drawn';
 export { chartOption, chartPoints, chartSeries } from './Chart';
 export { chatItems } from './Chat';
 export { evidenceSources } from './Evidence';
+export { downloadOf, sizeInWords } from './Download';
 export { refusal as fileRefusal, type GivenFile } from './FileUpload';
 export { tableRows } from './Table';

package/lib/components/a2ui/datalayer/index.js

@@ -10,6 +10,7 @@ import { FileUpload } from './FileUpload';
 import { Chat } from './Chat';
 import { Evidence } from './Evidence';
 import { Form } from './Form';
+import { Download } from './Download';
 const RENDERERS = {
     Table,
     Chart,
@@ -17,6 +18,7 @@ const RENDERERS = {
     Chat,
     Evidence,
     Form,
+    Download,
 };
 /**
  * A renderer for every component of Datalayer's own the catalog has, in the
@@ -40,5 +42,6 @@ export { DRAWN_OWN_COMPONENTS } from './drawn';
 export { chartOption, chartPoints, chartSeries } from './Chart';
 export { chatItems } from './Chat';
 export { evidenceSources } from './Evidence';
+export { downloadOf, sizeInWords } from './Download';
 export { refusal as fileRefusal } from './FileUpload';
 export { tableRows } from './Table';

package/lib/components/inspector/a2aSpans.d.ts

@@ -41,9 +41,18 @@ export type A2ASpansOptions = {
      * Without it, a tool the peer's runtime runs.
      */
     classifyTool?: (name: string, args?: Record<string, unknown>) => ToolClass;
+    /**
+     * Who presses the buttons of what the peer shows: a request carrying a
+     * pressed button's action (`loop.action` in its message's metadata) is
+     * theirs, not the asker's — the person (`You`) on a page that draws the
+     * surfaces (STUDIO H-02). Unsaid, every request is the asker's.
+     */
+    pressedBy?: string;
 };
 /** The text of an A2A 1.0 message's or artifact's parts, as JSON carries them. */
 export declare function partsText(parts: unknown): string;
+/** Whether a message carries a pressed button's action: `metadata.loop.action`. */
+export declare function pressedAction(message: unknown): boolean;
 /**
  * A fetch that records the A2A traffic it carries as spans into
  * `options.tracer`, and hands the SDK what the network gave.

package/lib/components/inspector/a2aSpans.js

@@ -53,6 +53,14 @@ function stepOf(message) {
     }
     return undefined;
 }
+/** Whether a message carries a pressed button's action: `metadata.loop.action`. */
+export function pressedAction(message) {
+    if (!isObject(message) || !isObject(message.metadata)) {
+        return false;
+    }
+    const loop = message.metadata.loop;
+    return isObject(loop) && isObject(loop.action);
+}
 const FAILED_STATES = /FAILED|REJECTED|CANCELED/;
 /** Records what came back for one request onto its span. */
 class ResponseRecorder {
@@ -288,7 +296,9 @@ export function traceA2AFetch(base, options) {
         const params = rpc && isObject(rpc.params) ? rpc.params : undefined;
         const message = params && isObject(params.message) ? params.message : undefined;
         const span = tracer.startSpan(rpc ? `a2a ${method}` : `${httpMethod} ${path}`, {
-            serviceName: asker,
+            serviceName: options.pressedBy && pressedAction(message)
+                ? options.pressedBy
+                : asker,
             kind: 'CLIENT',
             attributes: {
                 'peer.service': peer,

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

@@ -20,7 +20,7 @@
  * values the rows, top to bottom.
  *
  * A member's connections — the MCP servers it reaches, Odoo for Accounting —
- * hang under it, each a node half a member's size with the server's mark
+ * 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
@@ -59,7 +59,7 @@ export type A2ATeamGraphMember = {
     onToggle?: () => void;
     /** It was sent away, or called back. */
     onAway?: (away: boolean) => void;
-    /** The MCP servers it reaches, drawn under it (`teamConnectionsOf`). */
+    /** The MCP servers it reaches, drawn to its right (`teamConnectionsOf`). */
     connections?: A2ATeamConnection[];
     /**
      * How its balloon shows what it says (LOOP T-23): only what it says or

package/lib/components/teams/A2ATeamGraph.js

@@ -25,9 +25,15 @@ 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. */
+/** Between a member and its connections, to its right. */
 const CONNECTION_GAP = 44;
 const CONNECTIONS_APART = 16;
+/** Where a member's connections start: right of it. */
+const CONNECTION_X = NODE_WIDTH + CONNECTION_GAP;
+/** Below the character's middle, so the A2A edge leaving it passes above. */
+const CONNECTION_DROP = 12;
+/** What a member's connections take beside it. */
+const CONNECTIONS_BESIDE = CONNECTION_GAP + CONNECTION_WIDTH;
 /** Where the edge leaves and reaches a member: the middle of its character. */
 const HANDLE = (size) => ({
     opacity: 0,
@@ -118,7 +124,7 @@ const Moving = createContext({
     move: () => undefined,
     reset: () => undefined,
 });
-/** A connection's node id: under its member. */
+/** A connection's node id: beside its member. */
 const connectionNodeId = (member, connection) => `${member}/${connection}`;
 const MemberNode = memo(function MemberNode({ data, }) {
     const { id, side, size } = data;
@@ -282,7 +288,7 @@ const MemberNode = memo(function MemberNode({ data, }) {
                     stayPut: true, 
                     // Named as the member, not its character: `Sales (in your
                     // browser)`; the character describes it.
-                    agentName: member.name, label: memberLabel(member) })) }), _jsxs(Text, { sx: { fontWeight: 600, textAlign: 'center' }, children: [member.emoji ? `${member.emoji} ` : '', member.name] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', textAlign: 'center' }, "data-member-where": "", children: member.where }), _jsx(Handle, { id: MEMBER_HANDLES.outRight, type: "source", position: Position.Right, style: HANDLE(size), isConnectable: false }), _jsx(Handle, { id: MEMBER_HANDLES.outLeft, type: "source", position: Position.Left, style: HANDLE(size), isConnectable: false }), _jsx(Handle, { id: MEMBER_HANDLES.outBottom, type: "source", position: Position.Bottom, style: { ...HANDLE(size), top: size }, isConnectable: false }), _jsx(Handle, { id: MEMBER_HANDLES.outTop, type: "source", position: Position.Top, style: { ...HANDLE(size), top: 0 }, isConnectable: false }), member.connections?.length ? (_jsx(Handle, { id: MEMBER_HANDLES.connections, type: "source", position: Position.Bottom, style: { ...HANDLE(size), top: 'auto', bottom: 0 }, isConnectable: false })) : null] }));
+                    agentName: member.name, label: memberLabel(member) })) }), _jsxs(Text, { sx: { fontWeight: 600, textAlign: 'center' }, children: [member.emoji ? `${member.emoji} ` : '', member.name] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', textAlign: 'center' }, "data-member-where": "", children: member.where }), _jsx(Handle, { id: MEMBER_HANDLES.outRight, type: "source", position: Position.Right, style: HANDLE(size), isConnectable: false }), _jsx(Handle, { id: MEMBER_HANDLES.outLeft, type: "source", position: Position.Left, style: HANDLE(size), isConnectable: false }), _jsx(Handle, { id: MEMBER_HANDLES.outBottom, type: "source", position: Position.Bottom, style: { ...HANDLE(size), top: size }, isConnectable: false }), _jsx(Handle, { id: MEMBER_HANDLES.outTop, type: "source", position: Position.Top, style: { ...HANDLE(size), top: 0 }, isConnectable: false }), member.connections?.length ? (_jsx(Handle, { id: MEMBER_HANDLES.connections, type: "source", position: Position.Right, style: { ...HANDLE(size), left: 'auto', right: 0 }, isConnectable: false })) : null] }));
 });
 /** A member's accessible name: its name, and where it runs. */
 export function memberLabel(member) {
@@ -314,7 +320,7 @@ const ConnectionNode = memo(function ConnectionNode({ id, data, }) {
             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.Top, style: { ...HANDLE(0), top: 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) => {
+        }, 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) => {
                     if (event.key === 'Escape' && told) {
                         event.stopPropagation();
                         setTold(false);
@@ -419,11 +425,19 @@ export const CallEdge = memo(function CallEdge({ id, sourceX, sourceY, targetX,
 });
 const NODE_TYPES = { member: MemberNode, connection: ConnectionNode };
 const EDGE_TYPES = { a2a: LinkEdge, mcp: CallEdge };
-/** Where a member's connections sit: under it, side by side, centred. */
-function connectionsX(memberX, count) {
-    const row = count * CONNECTION_WIDTH + (count - 1) * CONNECTIONS_APART;
-    const left = memberX + (NODE_WIDTH - row) / 2;
-    return Array.from({ length: count }, (_, at) => left + at * (CONNECTION_WIDTH + CONNECTIONS_APART));
+/** Where a member's connections sit: right of it, one under another from its character's middle. */
+function connectionsY(memberY, size, count, connectionHeight) {
+    const top = memberY + size / 2 + CONNECTION_DROP;
+    return Array.from({ length: count }, (_, at) => top + at * (connectionHeight + CONNECTIONS_APART));
+}
+/** How far down a member's connections reach, from its top; none, 0. */
+function connectionsReach(size, count, connectionHeight) {
+    return count
+        ? size / 2 +
+            CONNECTION_DROP +
+            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) {
@@ -502,7 +516,11 @@ export function A2ATeamGraph({ entry, peer, peers: more = NO_PEERS, flow, flows,
     // Where the members stand, as columns and rows, and the width that takes.
     const peerIds = peers.map(one => one.id);
     const placing = placeMembers(entry.id, peerIds, positions);
-    const drawn = Math.max(WIDTH, placing.columns * NODE_WIDTH + (placing.columns - 1) * GAP);
+    const hasConnections = members.some(member => member.connections?.length);
+    // The last column's connections sit beside it, inside the graph.
+    const drawn = Math.max(WIDTH, placing.columns * NODE_WIDTH +
+        (placing.columns - 1) * GAP +
+        (hasConnections ? CONNECTIONS_BESIDE : 0));
     const viewport = useMemo(() => teamViewport(width || drawn, drawn), [width, drawn]);
     // The members' height: the character, its name and where it runs.
     const memberHeight = size + 56;
@@ -516,14 +534,13 @@ export function A2ATeamGraph({ entry, peer, peers: more = NO_PEERS, flow, flows,
         connections: (member.connections ?? []).map(connection => connection.id),
     }));
     const placedKey = JSON.stringify(placed);
-    const hasConnections = placed.some(({ connections }) => connections.length);
     // A notebook in a balloon: more room above the members.
     const room = members.some(member => member.persona.notebook)
         ? Math.max(NOTEBOOK_BALLOON_ROOM, balloonRoom)
         : balloonRoom;
-    // Under a member: its connections, when any member has some.
-    const below = hasConnections ? CONNECTION_GAP + connectionHeight : 0;
-    const rowHeight = memberHeight + below;
+    // Beside a member, its connections may reach below it: the row takes them.
+    const reach = Math.max(0, ...placed.map(({ connections }) => connectionsReach(size, connections.length, connectionHeight)));
+    const rowHeight = Math.max(memberHeight, reach);
     const total = room + placing.rows * rowHeight + (placing.rows - 1) * ROW_GAP;
     const height = Math.ceil(total * viewport.zoom);
     // Where each member is laid out, before it is moved.
@@ -537,14 +554,14 @@ export function A2ATeamGraph({ entry, peer, peers: more = NO_PEERS, flow, flows,
     // Where the members were moved, kept inside the graph's box.
     const boundsOf = (id) => {
         const layout = layoutOf(id);
-        const under = placed.find(({ member }) => member === id)?.connections.length
-            ? CONNECTION_GAP + connectionHeight
-            : 0;
+        const count = placed.find(({ member }) => member === id)?.connections.length ?? 0;
+        const beside = count ? CONNECTIONS_BESIDE : 0;
+        const tall = Math.max(memberHeight, connectionsReach(size, count, connectionHeight));
         return {
             minDx: -layout.x,
-            maxDx: drawn - NODE_WIDTH - layout.x,
+            maxDx: drawn - NODE_WIDTH - beside - layout.x,
             minDy: -layout.y,
-            maxDy: total - layout.y - memberHeight - under,
+            maxDy: total - layout.y - tall,
         };
     };
     const [moved, setMoved] = useState(() => Object.fromEntries(members.map(member => [
@@ -597,13 +614,13 @@ export function A2ATeamGraph({ entry, peer, peers: more = NO_PEERS, flow, flows,
         },
         // A member's connections move with it.
         ...connections.map((connection, at) => {
-            const xs = connectionsX(x, connections.length);
+            const ys = connectionsY(y, size, connections.length, connectionHeight);
             return {
                 id: connectionNodeId(id, connection),
                 type: 'connection',
                 position: {
-                    x: xs[at],
-                    y: y + memberHeight + CONNECTION_GAP,
+                    x: x + CONNECTION_X,
+                    y: ys[at],
                 },
                 width: CONNECTION_WIDTH,
                 height: connectionHeight,

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

@@ -0,0 +1,56 @@
+/**
+ * What the members of a team showed with their answers: components of the
+ * catalog, drawn under the conversation (STUDIO H-02).
+ *
+ * A member that gives `application/json+a2ui` shows an A2UI surface beside
+ * its words — the sources as cards that open (`Evidence`), a comparison as a
+ * table, a series as a chart, a choice as buttons that answer the
+ * application — one per artifact ({@link A2ATeamSurface}). Each is drawn
+ * with the A2UI surface plugin's `InlineSurface`, Datalayer's catalog, in
+ * the page's theme. A button pressed is the reader's answer to the member
+ * that showed it: its words as the next request and its action beside them
+ * (`pressedOf`, the `loop.action` the runtime reads), so that an option
+ * that does more than read is decided by the member's rules — and refused
+ * to a visitor in a sentence. What came back is said under the surface.
+ *
+ * This module is light: A2UI's renderer is in `AnswerSurfacesView`, loaded
+ * only once a surface is drawn.
+ *
+ * @module components/teams/AnswerSurfaces
+ */
+import type { JSX } from 'react';
+import type { A2APeerAction } from '../../runtimes/browser/a2aPeer';
+import type { A2ATeamSurface } from './useA2ATeam';
+/** A button pressed on a surface, as it is sent back: its words, and its action. */
+export type AnswerPressed = {
+    /** The reader's turn, in words: the option's label. */
+    message: string;
+    action: A2APeerAction;
+    /** What choosing it does, as the option said: `read`, `send`, `write`… */
+    does: string;
+};
+/**
+ * What a button pressed on an answer's surface sends back, or `null` for an
+ * action that is not one of an answer's buttons (a form's submission).
+ */
+export declare function pressedOf(action: {
+    name: string;
+    surfaceId: string;
+    context?: Record<string, unknown>;
+}): AnswerPressed | null;
+export type AnswerSurfacesProps = {
+    /** The surfaces shown, in the order they came. */
+    surfaces: A2ATeamSurface[];
+    /** Each member's name, by its id: who showed a surface. */
+    names?: Record<string, string>;
+    /**
+     * A button pressed on one of them: ask the member that showed it, and
+     * answer what it said, in words, to be shown under the surface. A team's
+     * `pressAction(surface.giver, pressed)` makes the press a turn of its
+     * conversation too. A press that throws is said, and another is taken.
+     */
+    onPress?: (surface: A2ATeamSurface, pressed: AnswerPressed) => Promise<string | undefined>;
+};
+/** The surfaces the members showed, each under who showed it; nothing when there is none. */
+export declare function AnswerSurfaces(props: AnswerSurfacesProps): JSX.Element | null;
+export default AnswerSurfaces;

package/lib/components/teams/AnswerSurfaces.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense, lazy } from 'react';
+import { Text } from '@primer/react';
+import { answerAction } from '../../loop/plugins/a2ui-surface/toolResult';
+/** The renderer itself: A2UI and the catalog, loaded when a surface is drawn. */
+const AnswerSurfacesView = lazy(() => import('./AnswerSurfacesView'));
+/**
+ * What a button pressed on an answer's surface sends back, or `null` for an
+ * action that is not one of an answer's buttons (a form's submission).
+ */
+export function pressedOf(action) {
+    const pressed = answerAction(action);
+    if (!pressed) {
+        return null;
+    }
+    const { name, payload } = pressed.forwardedProps.loop.action;
+    const does = typeof payload.does === 'string' ? payload.does : 'read';
+    return { message: pressed.message, action: { name, payload }, does };
+}
+/** The surfaces the members showed, each under who showed it; nothing when there is none. */
+export function AnswerSurfaces(props) {
+    if (!props.surfaces.length) {
+        return null;
+    }
+    return (_jsx(Suspense, { fallback: _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Drawing what it shows\u2026" }), children: _jsx(AnswerSurfacesView, { ...props }) }));
+}
+export default AnswerSurfaces;

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

@@ -0,0 +1,14 @@
+/**
+ * The surfaces of `AnswerSurfaces`, drawn: each with `InlineSurface` on
+ * Datalayer's catalog, its title and who showed it above it, and under it
+ * what was chosen and what the member answered. One choice per surface:
+ * once a button is pressed the surface says what was chosen and asks no
+ * more — unless the press failed (the member not reached, a turn under
+ * way): what failed is said, and another press is taken.
+ *
+ * @module components/teams/AnswerSurfacesView
+ */
+import type { JSX } from 'react';
+import { type AnswerSurfacesProps } from './AnswerSurfaces';
+export declare function AnswerSurfacesView({ surfaces, names, onPress, }: AnswerSurfacesProps): JSX.Element;
+export default AnswerSurfacesView;

package/lib/components/teams/AnswerSurfacesView.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { Spinner, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { InlineSurface, SURFACE_CATALOG_ID, } from '../../loop/plugins/a2ui-surface/InlineSurface';
+import { readA2uiToolResult } from '../../loop/plugins/a2ui-surface/toolResult';
+import { pressedOf } from './AnswerSurfaces';
+function OneSurface({ surface, name, onPress, }) {
+    const parsed = useMemo(() => readA2uiToolResult(surface.artifact.data, SURFACE_CATALOG_ID), [surface.artifact.data]);
+    const [answered, setAnswered] = useState(null);
+    const onAction = useCallback((action) => {
+        const pressed = pressedOf(action);
+        if (!pressed || (answered && !answered.failed) || !onPress) {
+            return;
+        }
+        setAnswered({ chose: pressed.message, waiting: true });
+        onPress(surface, pressed).then(reply => setAnswered({ chose: pressed.message, reply, waiting: false }), (error) => setAnswered({
+            chose: pressed.message,
+            reply: error instanceof Error ? error.message : String(error),
+            waiting: false,
+            failed: true,
+        }));
+    }, [answered, onPress, surface]);
+    const title = parsed?.title || surface.artifact.name;
+    return (_jsxs(Box, { as: "section", "aria-label": name ? `${name}: ${title}` : title, "data-answer-surface": surface.id, sx: { display: 'flex', flexDirection: 'column', gap: 2, minWidth: 0 }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: name ? `${name} · ${title}` : title }), parsed?.messages?.length ? (_jsx(InlineSurface, { messages: parsed.messages, onAction: onAction })) : (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "This could not be drawn: it holds no surface." })), answered ? (_jsxs(Box, { role: "status", "data-answer-reply": "", sx: { display: 'flex', flexDirection: 'column', gap: 1, fontSize: 1 }, children: [_jsxs(Text, { sx: { color: 'fg.muted' }, children: ["You chose: ", answered.chose] }), answered.waiting ? (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: name ? `Asking ${name}…` : 'Asking…' })] })) : answered.reply ? (_jsx(Text, { children: name ? `${name}: ${answered.reply}` : answered.reply })) : null] })) : null] }));
+}
+export function AnswerSurfacesView({ surfaces, names = {}, onPress, }) {
+    return (_jsx(Box, { "data-answer-surfaces": "", sx: { display: 'flex', flexDirection: 'column', gap: 3, minWidth: 0 }, children: surfaces.map(surface => (_jsx(OneSurface, { surface: surface, name: names[surface.giver], onPress: onPress }, surface.id))) }));
+}
+export default AnswerSurfacesView;

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

@@ -17,3 +17,4 @@ export * from './sceneTranscript';
 export * from './SceneTranscript';
 export * from './SceneView';
 export * from './sceneStage';
+export * from './AnswerSurfaces';

package/lib/components/teams/index.js

@@ -21,3 +21,4 @@ export * from './sceneTranscript';
 export * from './SceneTranscript';
 export * from './SceneView';
 export * from './sceneStage';
+export * from './AnswerSurfaces';

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

@@ -1,7 +1,7 @@
 import type { AssistantState } from '../../chat/assistant/state';
 import type { DisplayItem } from '../../types/chat';
 import { type BrowserModelOptions } from '../../runtimes/browser/model';
-import { type A2APeer, type A2APeerArtifact } from '../../runtimes/browser/a2aPeer';
+import { type A2APeer, type A2APeerAction, type A2APeerArtifact } from '../../runtimes/browser/a2aPeer';
 import type { AppSpec } from '../../types/agentspecs';
 import type { OtelLiveTracer } from '@datalayer/core/lib/otel/live';
 import { type A2ATeamCall, type A2ATeamConnection, type A2ATeamFlow } from './a2aTeamFlow';
@@ -25,13 +25,51 @@ export type A2ATeamPersona = {
     notebook?: A2APeerArtifact;
 };
 export declare const AT_REST: A2ATeamPersona;
-/** One turn of the conversation with the entry. */
+/**
+ * One turn of the conversation with the entry. A button pressed on what
+ * another member showed is a turn of it too: the person's line addressed to
+ * that member, and its answer from it (`member`, STUDIO H-02).
+ */
 export type A2ATeamTurn = {
     role: 'user' | 'assistant';
     text: string;
+    /**
+     * The member other than the entry this turn is with: the one whose
+     * button the person pressed, and who answered it.
+     */
+    member?: {
+        id: string;
+        name: string;
+    };
+};
+/**
+ * A button pressed on a surface a member showed (`AnswerSurfaces`'
+ * `AnswerPressed`): its words, the person's turn, and its action.
+ */
+export type A2ATeamPress = {
+    message: string;
+    action: A2APeerAction;
 };
 /** What a page that shows notebooks accepts: a notebook, and words in Markdown. */
 export declare const NOTEBOOK_AND_WORDS: readonly string[];
+/**
+ * What a page that draws an answer's components accepts besides: the
+ * catalog's surfaces, a notebook, and words in Markdown (STUDIO H-02).
+ */
+export declare const COMPONENTS_NOTEBOOK_AND_WORDS: readonly string[];
+/** A surface of components a member showed with an answer: who gave it, and the surface. */
+export type A2ATeamSurface = {
+    /** Its surface's id: `answer-…`. */
+    id: string;
+    /** The member that showed it, by its id. */
+    giver: string;
+    artifact: A2APeerArtifact;
+};
+/**
+ * The surfaces among what a member gave, each once by its surface's id,
+ * after those already kept.
+ */
+export declare function surfacesAfter(kept: A2ATeamSurface[], giver: string, artifacts: A2APeerArtifact[]): A2ATeamSurface[];
 /** What the peer gave, in words: its words, and each of its artifacts. */
 export declare function answeredLine(artifacts: A2APeerArtifact[]): string;
 /** The latest notebook among what a peer gave, or none. */
@@ -158,6 +196,11 @@ export type A2ATeam = {
     artifacts: A2APeerArtifact[];
     /** The latest notebook a peer gave, kept until another one comes. */
     notebook: A2APeerArtifact | null;
+    /**
+     * Every surface of components the members showed in this conversation,
+     * in the order they came, with who showed it (STUDIO H-02).
+     */
+    surfaces: A2ATeamSurface[];
     /** Which way the first peer's link carries a message now. */
     flow: A2ATeamFlow;
     /** The tool calls the peers' connections are answering now. */
@@ -167,6 +210,17 @@ export type A2ATeam = {
     /** Whether the entry can be asked: every peer is connected, or the entry is. */
     ready: boolean;
     send: (text: string) => Promise<void>;
+    /**
+     * A button pressed on what a member showed (its id: the entry's, or a
+     * peer's), as a turn of the conversation (STUDIO H-02): the person's line
+     * in the entry's history, the member asked directly over A2A with the
+     * button's action beside its words (`askA2APeer({ action })`), and its
+     * reply landing as an `ask_<peer>` answer does — in its history, its
+     * balloon, its flow, the team's report, surfaces and notebook — and in
+     * the entry's history as that member's answer. Answers its words; throws
+     * when the member is not reached, a turn is under way, or it failed.
+     */
+    pressAction: (memberId: string, pressed: A2ATeamPress) => Promise<string>;
     stop: () => void;
 };
 /** Run a team over A2A in the page. */