@datalayer/agent-runtimes 1.5.90 → 1.5.91

package/lib/components/teams/backdrops/nodes.d.ts

@@ -0,0 +1,123 @@
+/**
+ * What every backdrop's nodes share: the member's node — its figure
+ * (`AssistantStage`: the balloon that peeks and opens, the menu, the drag
+ * within the graph's box, the arrow keys), its name and where it runs — and
+ * the connection's node — the server's mark, a button whose details show
+ * and hide — each drawn in a backdrop's *look* (`MemberLook`,
+ * `ConnectionLook`): the figure a member is drawn as, the node's width, the
+ * type of its name. A backdrop's node types are these two with its look.
+ *
+ * The members and the calls are read from the graph's contexts, not from
+ * the nodes' data: a node whose object changes is taken by React Flow for
+ * a new one, measured again, and the edge is dropped until it is — the line
+ * vanished as the characters moved. The nodes stay the same objects; what
+ * they show is read from here.
+ *
+ * @module components/teams/backdrops/nodes
+ */
+import type { JSX } from 'react';
+import { type Node, type NodeProps } from '@xyflow/react';
+import { type AssistantStageProps } from '../../../chat/assistant/AssistantStage';
+import type { A2ATeamConnection } from '../a2aTeamFlow';
+import type { A2ATeamGraphMember, ConnectionData, MemberData, SceneBackdropFace, StageSx } from './types';
+/** How tall the notebook in a balloon grows before it scrolls. */
+export declare const NOTEBOOK_PREVIEW_HEIGHT = 180;
+/** Where the edge leaves and reaches a member: the middle of its figure. */
+export declare const HANDLE: (size: number) => {
+    opacity: number;
+    pointerEvents: "none";
+    top: number;
+    width: number;
+    height: number;
+    minWidth: number;
+    minHeight: number;
+    border: number;
+};
+/**
+ * The handles an edge leaves and reaches a member by, named: the middle of
+ * its figure on each side, chosen by where the other member stands.
+ */
+export declare const MEMBER_HANDLES: {
+    readonly inLeft: "in-left";
+    readonly outRight: "out-right";
+    readonly inTop: "in-top";
+    readonly outBottom: "out-bottom";
+    readonly inRight: "in-right";
+    readonly outLeft: "out-left";
+    readonly inBottom: "in-bottom";
+    readonly outTop: "out-top";
+    readonly connections: "connections";
+};
+/** The members as they are now, by id (see the module's note). */
+export declare const Members: import("react").Context<Record<string, A2ATeamGraphMember>>;
+/** The connections being called now, by node id: read by their nodes, as the members are. */
+export declare const Busy: import("react").Context<Record<string, string>>;
+/** How far a member was moved from its place, in the graph's coordinates. */
+export type MemberOffset = {
+    dx: number;
+    dy: number;
+};
+export declare const AT_PLACE: MemberOffset;
+/** How far a member may move: its node stays inside the graph's box. */
+export type MemberBounds = {
+    minDx: number;
+    maxDx: number;
+    minDy: number;
+    maxDy: number;
+};
+/** An offset kept inside its bounds. */
+export declare function clampOffset(offset: MemberOffset, bounds: MemberBounds): MemberOffset;
+/** The members' moves, read by their nodes. */
+export declare const Moving: import("react").Context<{
+    zoom: number;
+    offsetOf: (id: string) => MemberOffset;
+    move: (id: string, offset: MemberOffset) => void;
+    reset: (id: string) => void;
+}>;
+/** A connection's node id: beside its member. */
+export declare const connectionNodeId: (member: string, connection: string) => string;
+/** A member's accessible name: its name, and where it runs. */
+export declare function memberLabel(member: Pick<A2ATeamGraphMember, 'name' | 'where'>): string;
+/** A connection's accessible name: `Odoo, Accounting's MCP connection`. */
+export declare function connectionLabel(connection: Pick<A2ATeamConnection, 'label'>, member: string | undefined): string;
+/** What a connection's details say: the server, who reaches it, and the call running now. */
+export declare function connectionDetails(connection: Pick<A2ATeamConnection, 'name' | 'tools'>, member: string | undefined, calling?: string): string;
+/** How a backdrop draws a member: its figure, and the words under it. */
+export interface MemberLook {
+    /** The node's width, the layout's `nodeWidth`. */
+    width: number;
+    /**
+     * What the member is drawn as: its own character (studio), or a figure
+     * made for the backdrop from its face — its emoji, its character, its
+     * initial (hero, plain). Called on each render: give the same object
+     * for the same member, so that the figure is not drawn anew.
+     */
+    figure: (member: SceneBackdropFace) => AssistantStageProps['character'];
+    /** The name under the figure. */
+    name: StageSx;
+    /** Where it runs, under the name; `false` leaves it to the figure's label alone. */
+    where: StageSx | false;
+}
+/** A member of the team, drawn in a look. */
+export declare function MemberNodeBase({ data, look, }: NodeProps<Node<MemberData>> & {
+    look: MemberLook;
+}): JSX.Element | null;
+/** How a backdrop draws a member's connection: its mark's frame, and the words under it. */
+export interface ConnectionLook {
+    /** The node's width, the layout's `connectionWidth`. */
+    width: number;
+    /** The frame round the mark: a bordered square (studio), a ring (hero). */
+    mark: (busy: boolean) => StageSx;
+    /** What the mark holds, as a fraction of the mark's size. */
+    markScale: number;
+    /** The label under the mark. */
+    label: StageSx;
+    /** How it is reached, under the label: `via MCP`. */
+    via: StageSx;
+    /** Its details, shown by a click on the mark. */
+    details: StageSx;
+}
+/** A connection of a member's: the server's mark, what it reaches, and how. */
+export declare function ConnectionNodeBase({ id, data, look, }: NodeProps<Node<ConnectionData>> & {
+    look: ConnectionLook;
+}): JSX.Element | null;

package/lib/components/teams/backdrops/nodes.js

@@ -0,0 +1,265 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useId, useRef, useState, } from 'react';
+import { Handle, Position } from '@xyflow/react';
+import { Button, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { AssistantStage, } from '../../../chat/assistant/AssistantStage.js';
+import { SpecMark } from '../../../chat/marks/SpecMark.js';
+import { NotebookPreview } from '../NotebookPreview.js';
+import { notebookBalloonVisual } from '../TeamNotebook.js';
+import { toolLineText } from '../../../chat/assistant/toolLine.js';
+/** How tall the notebook in a balloon grows before it scrolls. */
+export const NOTEBOOK_PREVIEW_HEIGHT = 180;
+/** Where the edge leaves and reaches a member: the middle of its figure. */
+export const HANDLE = (size) => ({
+    opacity: 0,
+    pointerEvents: 'none',
+    top: size / 2,
+    width: 1,
+    height: 1,
+    minWidth: 0,
+    minHeight: 0,
+    border: 0,
+});
+/**
+ * The handles an edge leaves and reaches a member by, named: the middle of
+ * its figure on each side, chosen by where the other member stands.
+ */
+export const MEMBER_HANDLES = {
+    inLeft: 'in-left',
+    outRight: 'out-right',
+    inTop: 'in-top',
+    outBottom: 'out-bottom',
+    inRight: 'in-right',
+    outLeft: 'out-left',
+    inBottom: 'in-bottom',
+    outTop: 'out-top',
+    connections: 'connections',
+};
+/** The members as they are now, by id (see the module's note). */
+export const Members = createContext({});
+/** The connections being called now, by node id: read by their nodes, as the members are. */
+export const Busy = createContext({});
+export const AT_PLACE = { dx: 0, dy: 0 };
+/** An offset kept inside its bounds. */
+export function clampOffset(offset, bounds) {
+    return {
+        dx: Math.min(bounds.maxDx, Math.max(bounds.minDx, offset.dx)),
+        dy: Math.min(bounds.maxDy, Math.max(bounds.minDy, offset.dy)),
+    };
+}
+/** How far a press moves before it is a drag, not a click, in pixels. */
+const DRAG_THRESHOLD = 4;
+/** How far an arrow key moves a member; with Shift, more. */
+const NUDGE = 10;
+const NUDGE_FAR = 40;
+/** The members' moves, read by their nodes. */
+export const Moving = createContext({
+    zoom: 1,
+    offsetOf: () => AT_PLACE,
+    move: () => undefined,
+    reset: () => undefined,
+});
+/** A connection's node id: beside its member. */
+export const connectionNodeId = (member, connection) => `${member}/${connection}`;
+/** A member's accessible name: its name, and where it runs. */
+export function memberLabel(member) {
+    return member.where ? `${member.name} (${member.where})` : member.name;
+}
+/** A connection's accessible name: `Odoo, Accounting's MCP connection`. */
+export function connectionLabel(connection, member) {
+    return member
+        ? `${connection.label}, ${member}’s MCP connection`
+        : `${connection.label}, an MCP connection`;
+}
+/** What a connection's details say: the server, who reaches it, and the call running now. */
+export function connectionDetails(connection, member, calling) {
+    const tools = connection.tools.length;
+    return [
+        `${connection.name}, an MCP server${member ? ` ${member} reaches` : ''}.`,
+        tools ? `${tools} tool${tools === 1 ? '' : 's'}.` : '',
+        calling ? `Now: ${calling}.` : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+}
+/** A member of the team, drawn in a look. */
+export function MemberNodeBase({ data, look, }) {
+    const { id, side, size } = data;
+    const member = useContext(Members)[id];
+    const moving = useContext(Moving);
+    const offset = moving.offsetOf(id);
+    const stageRef = useRef(null);
+    // Its balloon's display, as its menu changes it.
+    const [display, setDisplay] = useState();
+    // Its balloon as a click on it left it: shown, hidden, or as the team
+    // says (`auto`: what it is doing, and on hover).
+    const [shown, setShown] = useState('auto');
+    // What it says or does now: something new reopens a hidden balloon.
+    const persona = member?.persona;
+    const news = [
+        persona?.saying,
+        persona?.tool ? toolLineText(persona.tool) : '',
+        persona?.notebook?.name,
+    ].join('\u0000');
+    const seen = useRef(news);
+    useEffect(() => {
+        if (news !== seen.current) {
+            seen.current = news;
+            setShown(current => (current === 'hidden' ? 'auto' : current));
+        }
+    }, [news]);
+    if (!member || !persona) {
+        return null;
+    }
+    const shownDisplay = display ?? member.balloonDisplay ?? 'current';
+    // History: what it said and did, listed.
+    const listed = shownDisplay === 'history' && member.history?.length
+        ? { history: member.history }
+        : {};
+    // A notebook it was given: read-only in its balloon, and its large visual
+    // the one that runs, editable — under the graph, or in a dialog.
+    const notebookTitle = member.notebookTitle ?? (persona.notebook?.name || 'The notebook');
+    const given = persona.notebook
+        ? {
+            attachment: (_jsx(NotebookPreview, { notebook: persona.notebook.data, title: notebookTitle, maxHeight: NOTEBOOK_PREVIEW_HEIGHT, onOpen: member.onNotebookOpen, openLabel: member.expandTarget ? 'Open it below to run it' : undefined })),
+            visual: notebookBalloonVisual(persona.notebook, notebookTitle),
+        }
+        : {};
+    const balloonNow = persona.tool
+        ? {
+            text: toolLineText(persona.tool),
+            tool: persona.tool,
+            busy: persona.state !== 'idle',
+            ...given,
+            ...listed,
+        }
+        : persona.saying
+            ? {
+                text: persona.saying,
+                ...(persona.full ? { fullText: persona.full } : {}),
+                more: persona.saying.endsWith('…'),
+                speaking: persona.state === 'speaking',
+                busy: persona.state === 'thinking' ||
+                    persona.state === 'working' ||
+                    persona.state === 'speaking',
+                ...given,
+                ...listed,
+            }
+            : 'history' in listed
+                ? { text: '', ...listed }
+                : undefined;
+    return (_jsxs(Box
+    // React Flow lets the pointer through a node that is neither dragged
+    // nor selected (`pointer-events: none` on its wrapper): the figure,
+    // its balloon and its menu take it back, and are left to themselves —
+    // no drag, no pan, no wheel.
+    , { 
+        // React Flow lets the pointer through a node that is neither dragged
+        // nor selected (`pointer-events: none` on its wrapper): the figure,
+        // its balloon and its menu take it back, and are left to themselves —
+        // no drag, no pan, no wheel.
+        className: "nodrag nopan nowheel", width: look.width, display: "flex", flexDirection: "column", alignItems: "center", gap: 1, cursor: "default", pointerEvents: "all", "data-team-member": member.id, "data-member-balloon": shown, "data-member-moved": offset.dx || offset.dy
+            ? `${Math.round(offset.dx)},${Math.round(offset.dy)}`
+            : undefined, "data-member-state": persona.state, children: [_jsx(Handle, { id: MEMBER_HANDLES.inLeft, type: "target", position: Position.Left, style: HANDLE(size), isConnectable: false }), _jsx(Handle, { id: MEMBER_HANDLES.inRight, type: "target", position: Position.Right, style: HANDLE(size), isConnectable: false }), _jsx(Handle, { id: MEMBER_HANDLES.inTop, type: "target", position: Position.Top, style: { ...HANDLE(size), top: 0 }, isConnectable: false }), _jsx(Handle, { id: MEMBER_HANDLES.inBottom, type: "target", position: Position.Bottom, style: { ...HANDLE(size), top: size }, isConnectable: false }), _jsx(Box, { width: size, height: size, position: "relative", children: persona.away ? (_jsxs(Button, { size: "small", sx: { position: 'absolute', top: size / 2 - 16, left: -24 }, onClick: () => member.onAway?.(false), children: ["Call ", member.name, " back"] })) : (_jsx(AssistantStage, { character: look.figure(member), state: persona.state, size: size, 
+                    // In the node, not over the page; the balloon opens toward the
+                    // middle of the graph: rightward from the left member.
+                    place: side === 'left'
+                        ? { position: 'absolute', left: 'auto' }
+                        : { position: 'absolute', right: 'auto' }, stageRef: stageRef, 
+                    // Dragged within the graph's box: a press that moves more than
+                    // a few pixels is a drag; one that does not is a click, and the
+                    // stage ignores the click that ends a drag.
+                    onDragStart: event => {
+                        if (event.button !== 0) {
+                            return;
+                        }
+                        const start = { x: event.clientX, y: event.clientY };
+                        const from = offset;
+                        let dragging = false;
+                        const onMove = (next) => {
+                            const dx = next.clientX - start.x;
+                            const dy = next.clientY - start.y;
+                            if (!dragging && Math.hypot(dx, dy) <= DRAG_THRESHOLD) {
+                                return;
+                            }
+                            dragging = true;
+                            moving.move(id, {
+                                dx: from.dx + dx / moving.zoom,
+                                dy: from.dy + dy / moving.zoom,
+                            });
+                        };
+                        const onUp = () => {
+                            window.removeEventListener('pointermove', onMove);
+                            window.removeEventListener('pointerup', onUp);
+                            window.removeEventListener('pointercancel', onUp);
+                        };
+                        window.addEventListener('pointermove', onMove);
+                        window.addEventListener('pointerup', onUp);
+                        window.addEventListener('pointercancel', onUp);
+                    }, onCharacterKeyDown: event => {
+                        const step = event.shiftKey ? NUDGE_FAR : NUDGE;
+                        const by = {
+                            ArrowLeft: { dx: -step, dy: 0 },
+                            ArrowRight: { dx: step, dy: 0 },
+                            ArrowUp: { dx: 0, dy: -step },
+                            ArrowDown: { dx: 0, dy: step },
+                        };
+                        const nudge = by[event.key];
+                        if (nudge) {
+                            event.preventDefault();
+                            moving.move(id, {
+                                dx: offset.dx + nudge.dx,
+                                dy: offset.dy + nudge.dy,
+                            });
+                        }
+                    }, onResetPosition: offset.dx || offset.dy ? () => moving.reset(id) : undefined, open: false, onToggle: member.onToggle ?? (() => undefined), 
+                    // A click shows and hides its balloon; the menu's *Ask Sales*
+                    // still takes the reader to the composer.
+                    onCharacterClick: () => setShown(current => current === 'shown' ||
+                        (current === 'auto' &&
+                            (persona.insist || display === 'history'))
+                        ? 'hidden'
+                        : 'shown'), balloonDisplay: shownDisplay, onBalloonDisplayChange: next => {
+                        setDisplay(next);
+                        member.onBalloonDisplayChange?.(next);
+                    }, conversationLabel: member.onToggle ? (member.conversationLabel ?? undefined) : false, balloon: shown === 'hidden'
+                        ? undefined
+                        : (balloonNow ??
+                            (shown === 'shown'
+                                ? {
+                                    text: `${member.name}, ${member.where ?? ''}`.replace(/, $/, ''),
+                                }
+                                : undefined)), expandTarget: member.expandTarget, expandOnArrival: !!member.expandTarget, 
+                    // History, chosen in its menu: shown until Current is.
+                    insist: shown === 'shown' ||
+                        (shown === 'auto' && (persona.insist || display === 'history')), onDismiss: away => member.onAway?.(away !== 'none'), suggestions: member.suggestions, onSuggestion: member.onSuggestion, inspector: member.inspector, inspectAgent: member.name, onStop: member.onStop, about: member.about, sandbox: member.sandbox, contextMenu: member.contextMenu, 
+                    // A member of the graph: what is clicked around it is the graph.
+                    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: look.name, "data-member-name": "", children: [member.emoji ? `${member.emoji} ` : '', member.name] }), look.where !== false && (_jsx(Text, { sx: look.where, "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 connection of a member's: the server's mark, what it reaches, and how. */
+export function ConnectionNodeBase({ id, data, look, }) {
+    const { member, connection: connectionId, size } = data;
+    const owner = useContext(Members)[member];
+    const connection = owner?.connections?.find(known => known.id === connectionId);
+    const tool = useContext(Busy)[id];
+    // Its details, shown and hidden by a click or Enter on its mark.
+    const [told, setTold] = useState(false);
+    const detailsId = useId();
+    if (!connection) {
+        return null;
+    }
+    return (_jsxs(Box, { className: "nodrag nopan nowheel", width: look.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: (look.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);
+                    }
+                }, width: size, height: size, p: 0, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", sx: look.mark(Boolean(tool)), focusVisible: {
+                    outline: '2px solid',
+                    outlineColor: 'var(--focus-outlineColor, var(--fgColor-accent))',
+                    outlineOffset: 2,
+                }, children: _jsx(SpecMark, { icon: connection.icon, emoji: connection.emoji, size: Math.round(size * look.markScale) }) }), _jsx(Text, { sx: look.label, children: connection.label }), connection.via && (_jsx(Text, { sx: look.via, "data-connection-via": "", children: connection.via })), _jsx(Box, { id: detailsId, hidden: !told, "data-connection-details": "", textAlign: "center", maxWidth: look.width + 40, sx: look.details, children: connectionDetails(connection, owner?.name, tool) })] }));
+}

package/lib/components/teams/backdrops/plain.d.ts

@@ -0,0 +1,14 @@
+import { type Edge, type EdgeProps, type Node, type NodeProps } from '@xyflow/react';
+import type { CallData, ConnectionData, LinkData, MemberData, SceneBackdrop, SceneBackdropLayout } from './types';
+/** The plain layout: as the studio's, a little tighter. */
+export declare const PLAIN_LAYOUT: SceneBackdropLayout;
+/** A member: a box with its face, its name and where it runs. */
+export declare const PlainMemberNode: import("react").NamedExoticComponent<NodeProps<Node<MemberData>>>;
+/** A system: a smaller box with its mark. */
+export declare const PlainConnectionNode: import("react").NamedExoticComponent<NodeProps<Node<ConnectionData>>>;
+/** The A2A link: an arrow toward the peer, toward the entry while the peer answers, its state in words. */
+export declare const PlainLinkEdge: import("react").NamedExoticComponent<EdgeProps<Edge<LinkData>>>;
+/** A member's link to a system: the same arrow, the call's words on it. */
+export declare const PlainCallEdge: import("react").NamedExoticComponent<EdgeProps<Edge<CallData>>>;
+/** The `plain` backdrop. */
+export declare const PLAIN_BACKDROP: SceneBackdrop;

package/lib/components/teams/backdrops/plain.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { BaseEdge, EdgeLabelRenderer, } from '@xyflow/react';
+import { Label } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { ConnectionNodeBase, MemberNodeBase, } from './nodes.js';
+import { arrowPath, midpoint, straightPath } from './edges.js';
+import { faceCharacter } from './faces.js';
+import { EdgeHalo } from './halo.js';
+import { sceneBackdropChoice } from './catalogue.js';
+const NODE_WIDTH = 180;
+const CONNECTION_WIDTH = 90;
+/** The plain layout: as the studio's, a little tighter. */
+export const PLAIN_LAYOUT = {
+    nodeWidth: NODE_WIDTH,
+    gap: 200,
+    rowGap: 40,
+    memberHeight: size => size + 56,
+    connectionScale: 0.5,
+    connectionWidth: CONNECTION_WIDTH,
+    connectionGap: 130,
+    connectionsApart: 16,
+    connectionHeight: size => size + 58,
+    connectionsTop: size => size / 4,
+    balloonRoom: 144,
+};
+/** The faces drawn so far, by member: the same figure for the same member. */
+const FACES = new Map();
+/** The member's face in a box: made once per member. */
+function plainFace(member) {
+    const key = `${member.id}\u0000${member.emoji ?? ''}\u0000${typeof member.character === 'string' ? member.character : member.character.url}`;
+    let face = FACES.get(key);
+    if (!face) {
+        face = faceCharacter(member, {
+            id: `plain-face-${member.id}`,
+            ring: {
+                borderRadius: 6,
+                border: '1px solid var(--borderColor-default)',
+                background: 'var(--bgColor-default)',
+                color: 'var(--fgColor-default)',
+            },
+        });
+        FACES.set(key, face);
+    }
+    return face;
+}
+const MEMBER_LOOK = {
+    width: NODE_WIDTH,
+    figure: plainFace,
+    name: { fontWeight: 600, textAlign: 'center' },
+    where: { fontSize: 0, color: 'fg.muted', textAlign: 'center' },
+};
+const CONNECTION_LOOK = {
+    width: CONNECTION_WIDTH,
+    mark: busy => ({
+        borderRadius: 1,
+        border: '1px solid',
+        borderColor: busy ? 'fg.default' : 'border.default',
+        bg: 'canvas.default',
+    }),
+    markScale: 0.6,
+    label: { fontWeight: 600, fontSize: 1, textAlign: 'center' },
+    via: { fontSize: '10px', color: 'fg.muted', textAlign: 'center' },
+    details: { fontSize: '10px', color: 'fg.muted' },
+};
+/** A member: a box with its face, its name and where it runs. */
+export const PlainMemberNode = memo(function PlainMemberNode(props) {
+    return _jsx(MemberNodeBase, { ...props, look: MEMBER_LOOK });
+});
+/** A system: a smaller box with its mark. */
+export const PlainConnectionNode = memo(function PlainConnectionNode(props) {
+    return _jsx(ConnectionNodeBase, { ...props, look: CONNECTION_LOOK });
+});
+/** A straight line with an arrowhead at the end the message goes to. */
+function Arrow({ id, source, target, forward, flowing, selected, }) {
+    const stroke = flowing || selected
+        ? 'var(--fgColor-default)'
+        : 'var(--borderColor-emphasis, var(--borderColor-default))';
+    return (_jsxs(_Fragment, { children: [selected && (_jsx(EdgeHalo, { path: straightPath(source, target), color: "var(--bgColor-neutral-emphasis)" })), _jsx(BaseEdge, { id: id, path: straightPath(source, target), style: { stroke, strokeWidth: selected ? 2.5 : 1.5 } }), _jsx("path", { d: arrowPath(source, target, forward), fill: stroke, "data-scene-arrow": forward ? 'target' : 'source' })] }));
+}
+/** The words on the edge: the state, in words, in a chip. */
+function Words({ at, flowing, children, ...rest }) {
+    return (_jsx(EdgeLabelRenderer, { children: _jsx(Box, { className: "nodrag nopan", position: "absolute", transform: `translate(-50%, 12px) translate(${at.x}px, ${at.y}px)`, pointerEvents: "none", textAlign: "center", whiteSpace: "nowrap", ...rest, children: _jsx(Label, { variant: flowing ? 'primary' : 'secondary', children: children }) }) }));
+}
+/** The A2A link: an arrow toward the peer, toward the entry while the peer answers, its state in words. */
+export const PlainLinkEdge = memo(function PlainLinkEdge({ id, sourceX, sourceY, targetX, targetY, data, }) {
+    const flow = data?.flow ?? 'still';
+    const source = { x: sourceX, y: sourceY };
+    const target = { x: targetX, y: targetY };
+    return (_jsxs(_Fragment, { children: [_jsx("g", { "data-a2a-edge-flow": flow, children: _jsx(Arrow, { id: id, source: source, target: target, forward: flow !== 'answering', flowing: flow !== 'still', selected: Boolean(data?.selected) }) }), _jsx(Words, { at: midpoint(source, target), flowing: flow !== 'still', children: data?.label })] }));
+});
+/** A member's link to a system: the same arrow, the call's words on it. */
+export const PlainCallEdge = memo(function PlainCallEdge({ id, sourceX, sourceY, targetX, targetY, data, }) {
+    const flow = data?.flow ?? 'still';
+    const source = { x: sourceX, y: sourceY };
+    const target = { x: targetX, y: targetY };
+    return (_jsxs(_Fragment, { children: [_jsx("g", { "data-mcp-edge-flow": flow, ...(flow !== 'still' ? { 'data-mcp-edge-call': data?.calling } : {}), children: _jsx(Arrow, { id: id, source: source, target: target, forward: flow !== 'answering', flowing: flow !== 'still', selected: Boolean(data?.selected) }) }), _jsx(Words, { at: midpoint(source, target), flowing: flow !== 'still', "data-mcp-edge-label": "", children: data?.label })] }));
+});
+const NODE_TYPES = { member: PlainMemberNode, connection: PlainConnectionNode };
+const EDGE_TYPES = { a2a: PlainLinkEdge, mcp: PlainCallEdge };
+/** The `plain` backdrop. */
+export const PLAIN_BACKDROP = {
+    ...sceneBackdropChoice('plain'),
+    figure: plainFace,
+    nodeTypes: NODE_TYPES,
+    edgeTypes: EDGE_TYPES,
+    theme: {
+        light: {},
+        dark: {},
+        // On one page, when printed (`break-inside` is newer than the sx types).
+        sx: {
+            '@media print': { breakInside: 'avoid', pageBreakInside: 'avoid' },
+        },
+    },
+    layout: PLAIN_LAYOUT,
+};

package/lib/components/teams/backdrops/studio.d.ts

@@ -0,0 +1,17 @@
+import { type Edge, type EdgeProps, type Node, type NodeProps } from '@xyflow/react';
+import type { CallData, ConnectionData, LinkData, MemberData, SceneBackdrop, SceneBackdropLayout } from './types';
+/** The studio's layout: the entry and a peer 220 apart, a connection half a member's size to its right. */
+export declare const STUDIO_LAYOUT: SceneBackdropLayout;
+/** A member: its character, its name and where it runs. */
+export declare const MemberNode: import("react").NamedExoticComponent<NodeProps<Node<MemberData>>>;
+/** A connection of a member's: the server's mark, what it reaches, and how. */
+export declare const ConnectionNode: import("react").NamedExoticComponent<NodeProps<Node<ConnectionData>>>;
+/** The A2A link between two members: still, or flowing the way the message goes. */
+export declare const LinkEdge: import("react").NamedExoticComponent<EdgeProps<Edge<LinkData>>>;
+/**
+ * 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>>>;
+/** The `studio` backdrop. */
+export declare const STUDIO_BACKDROP: SceneBackdrop;