@datalayer/agent-runtimes 1.5.89 → 1.5.91

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

@@ -23,7 +23,11 @@ export type SceneTranscriptProps = {
     copy?: boolean;
     /** The clipboard: `navigator.clipboard.writeText` unless a test gives one. */
     writeText?: (text: string) => Promise<void>;
+    /** The selected line's key: drawn marked (SCENES S2-03). */
+    selected?: string | null;
+    /** A line was clicked: its key. */
+    onSelect?: (key: string) => void;
 };
 /** The transcript as a list of lines, newest last, with *Copy as text*. */
-export declare function SceneTranscript({ lines, emptyText, maxHeight, copy, writeText, }: SceneTranscriptProps): JSX.Element;
+export declare function SceneTranscript({ lines, emptyText, maxHeight, copy, writeText, selected, onSelect, }: SceneTranscriptProps): JSX.Element;
 export default SceneTranscript;

package/lib/components/teams/SceneTranscript.js

@@ -13,7 +13,7 @@ export function useSceneTranscript(tracer, members) {
 /** How long *Copied* stays, in milliseconds. */
 const COPIED_MS = 1500;
 /** The transcript as a list of lines, newest last, with *Copy as text*. */
-export function SceneTranscript({ lines, emptyText = 'What the scene says and does shows here, line by line.', maxHeight, copy = true, writeText, }) {
+export function SceneTranscript({ lines, emptyText = 'What the scene says and does shows here, line by line.', maxHeight, copy = true, writeText, selected, onSelect, }) {
     const [copied, setCopied] = useState(false);
     const onCopy = async () => {
         const write = writeText ??
@@ -27,7 +27,7 @@ export function SceneTranscript({ lines, emptyText = 'What the scene says and do
             // The clipboard refused: nothing to say but the text, still on screen.
         }
     };
-    return (_jsxs(Box, { "data-scene-transcript": "", "data-scene-lines": lines.length, children: [lines.length === 0 ? (_jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: emptyText })) : (_jsx(Box, { as: "ol", "aria-label": "Transcript", listStyle: "none", m: 0, p: 0, fontSize: 1, sx: maxHeight ? { maxHeight, overflowY: 'auto' } : {}, children: lines.map(line => (_jsxs(Box, { as: "li", "data-transcript-line": line.kind, "data-transcript-from": line.from, "data-transcript-to": line.to, "aria-busy": line.open ? 'true' : undefined, display: "grid", gridTemplateColumns: "auto 1fr", gap: 2, py: 1, borderBottom: "1px solid", borderColor: "border.muted", opacity: line.open ? 0.75 : 1, children: [_jsx(Text, { as: "time", sx: {
+    return (_jsxs(Box, { "data-scene-transcript": "", "data-scene-lines": lines.length, children: [lines.length === 0 ? (_jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: emptyText })) : (_jsx(Box, { as: "ol", "aria-label": "Transcript", listStyle: "none", m: 0, p: 0, fontSize: 1, sx: maxHeight ? { maxHeight, overflowY: 'auto' } : {}, children: lines.map(line => (_jsxs(Box, { as: "li", "data-transcript-line": line.kind, "data-transcript-from": line.from, "data-transcript-to": line.to, "aria-busy": line.open ? 'true' : undefined, "aria-selected": onSelect ? selected === line.key : undefined, onClick: onSelect ? () => onSelect(line.key) : undefined, bg: selected === line.key ? 'accent.subtle' : undefined, display: "grid", gridTemplateColumns: "auto 1fr", gap: 2, py: 1, borderBottom: "1px solid", borderColor: "border.muted", opacity: line.open ? 0.75 : 1, sx: onSelect ? { cursor: 'pointer' } : undefined, children: [_jsx(Text, { as: "time", sx: {
                                 color: 'fg.muted',
                                 fontFamily: 'mono',
                                 fontSize: 0,

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

@@ -1,18 +1,24 @@
 /**
  * A scene on a page: its graph (`A2ATeamGraph`) and its transcript
- * ({@link SceneTranscript}), one shown at a time behind a *Graph · Transcript*
- * toggle (A-06). The graph stays mounted while the transcript shows, so
- * that what its members were doing is still there when it comes back.
+ * ({@link TranscriptViews}: the lines, the table, the sequence diagram, the
+ * drill-down — SCENES S2, S3), one shown at a time behind a *Graph ·
+ * Transcript* toggle (A-06). The graph stays mounted while the transcript
+ * shows, so that what its members were doing is still there when it comes
+ * back.
  *
  * The lines come from the Agent Inspector's tracer the graph's members
  * record into (`tracer`, with the `members` to name them), or are given
- * (`lines`: a finished run's, from its record).
+ * (`lines`: a finished run's, from its record — a recording, whose
+ * drill-down says it has no span to open). *Open in the Inspector* opens
+ * the Agent Inspector over the page on the tracer's record.
  *
  * @module components/teams/SceneView
  */
 import type { JSX, ReactNode } from 'react';
 import type { OtelLiveTracer } from '@datalayer/core/lib/otel/live';
 import type { SceneTranscriptLine, SceneTranscriptMember } from './sceneTranscriptRules';
+import type { TranscriptSelection } from './transcript/selection';
+import type { TranscriptSpanIds } from './transcript/transcriptDetailRules';
 /** Which of the two the scene shows. */
 export type SceneViewChoice = 'graph' | 'transcript';
 export type SceneViewProps = {
@@ -35,7 +41,13 @@ export type SceneViewProps = {
     maxHeight?: number;
     /** Something of the page's beside the toggle: a clock, a line. */
     aside?: ReactNode;
+    /** The scene, by id: the transcript's export is named after it. */
+    scene?: string;
+    /** The selected line changed (SCENES S3-02): the page hands the stage its edge (`selectedEdgeOf`). */
+    onSelect?: (selection: TranscriptSelection | null) => void;
+    /** The Inspector's page for a span, when the site has one. */
+    inspectorHref?: (ids: TranscriptSpanIds) => string | undefined;
 };
 /** The graph and the transcript of a scene, behind a *Graph · Transcript* toggle. */
-export declare function SceneView({ children, members, tracer, lines, defaultView, view, onViewChange, emptyText, maxHeight, aside, }: SceneViewProps): JSX.Element;
+export declare function SceneView({ children, members, tracer, lines, defaultView, view, onViewChange, emptyText, maxHeight, aside, scene, onSelect, inspectorHref, }: SceneViewProps): JSX.Element;
 export default SceneView;

package/lib/components/teams/SceneView.js

@@ -2,11 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { SegmentedControl } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { SceneTranscript, useSceneTranscript } from './SceneTranscript.js';
+import { AgentInspectorDialog } from '../inspector/AgentInspectorDialog.js';
+import { useSceneTranscript } from './SceneTranscript.js';
+import { TranscriptViews } from './transcript/TranscriptViews.js';
 const NO_MEMBERS = [];
 /** The graph and the transcript of a scene, behind a *Graph · Transcript* toggle. */
-export function SceneView({ children, members = NO_MEMBERS, tracer, lines, defaultView = 'graph', view, onViewChange, emptyText, maxHeight = 360, aside, }) {
+export function SceneView({ children, members = NO_MEMBERS, tracer, lines, defaultView = 'graph', view, onViewChange, emptyText, maxHeight = 360, aside, scene, onSelect, inspectorHref, }) {
     const [own, setOwn] = useState(defaultView);
+    // *Open in the Inspector*: the Agent Inspector over the page, on the tracer's record.
+    const [inspecting, setInspecting] = useState(false);
     const shown = view ?? own;
     const choose = (next) => {
         setOwn(next);
@@ -16,6 +20,6 @@ export function SceneView({ children, members = NO_MEMBERS, tracer, lines, defau
     const transcript = lines ?? live;
     return (_jsxs(Box, { "data-scene-view": shown, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, flexWrap: "wrap", mb: 2, children: [_jsxs(SegmentedControl, { "aria-label": "Scene view", size: "small", children: [_jsx(SegmentedControl.Button, { selected: shown === 'graph', onClick: () => choose('graph'), "data-scene-choice": "graph", children: "Graph" }), _jsx(SegmentedControl.Button, { selected: shown === 'transcript', onClick: () => choose('transcript'), "data-scene-choice": "transcript", children: transcript.length
                                     ? `Transcript (${transcript.length})`
-                                    : 'Transcript' })] }), aside] }), _jsx(Box, { hidden: shown !== 'graph', "data-scene-graph": "", children: children }), shown === 'transcript' && (_jsx(SceneTranscript, { lines: transcript, emptyText: emptyText, maxHeight: maxHeight }))] }));
+                                    : 'Transcript' })] }), aside] }), _jsx(Box, { hidden: shown !== 'graph', "data-scene-graph": "", children: children }), shown === 'transcript' && (_jsx(TranscriptViews, { lines: transcript, members: members, tracer: lines ? null : tracer, recorded: Boolean(lines), scene: scene, emptyText: emptyText, maxHeight: maxHeight, onSelect: onSelect, inspectorHref: inspectorHref, onOpenInspector: tracer && !lines ? () => setInspecting(true) : undefined })), inspecting && tracer && (_jsx(AgentInspectorDialog, { tracer: tracer, onClose: () => setInspecting(false) }))] }));
 }
 export default SceneView;

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/components/teams/backdrops/catalogue.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The backdrops by name: the id a scene keeps (`stage.backdrop`, agentspecs'
+ * `Backdrop`), the name a chooser shows, and one line of what the stage
+ * looks like. Pure — no React, no React Flow — so a chooser, an editor or a
+ * test lists them without loading the drawings; `backdrops/index.ts` draws
+ * each one.
+ *
+ * @module components/teams/backdrops/catalogue
+ */
+import type { SceneBackdropId } from '../../../types/scenes';
+/** A backdrop as a chooser offers it. */
+export interface SceneBackdropChoice {
+    id: SceneBackdropId;
+    /** `Studio`, `Hero`, `Plain`. */
+    name: string;
+    /** One line of what the stage looks like. */
+    description: string;
+}
+/** The three backdrops, in a chooser's order: the drawing every scene had first. */
+export declare const SCENE_BACKDROP_CHOICES: readonly SceneBackdropChoice[];
+/** The backdrop of a scene that says none: every scene written before draws as before. */
+export declare const DEFAULT_SCENE_BACKDROP_ID: SceneBackdropId;
+/** The choice an id names; `studio` for none, and for an id no backdrop has. */
+export declare const sceneBackdropChoice: (id?: string) => SceneBackdropChoice;
+/**
+ * The backdrop a stage is drawn with: its scene's `stage.backdrop`, `studio`
+ * when the scene says none or one no backdrop has. Every stage reads it
+ * here — a card's thumbnail, a stage's page, the home page — so that a
+ * scene plays on the same backdrop wherever it plays.
+ */
+export declare const stageBackdropOf: (scene?: {
+    stage?: {
+        backdrop?: string;
+    };
+} | null) => SceneBackdropId;

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

@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/** The three backdrops, in a chooser's order: the drawing every scene had first. */
+export const SCENE_BACKDROP_CHOICES = [
+    {
+        id: 'studio',
+        name: 'Studio',
+        description: 'Characters with speech balloons; each message flows along its line.',
+    },
+    {
+        id: 'hero',
+        name: 'Hero',
+        description: 'Round faces on a deep tint, thin lines, and a dot that flies with each message.',
+    },
+    {
+        id: 'plain',
+        name: 'Plain',
+        description: 'Boxes and arrows, nothing moves: for a printout or a slide.',
+    },
+];
+/** The backdrop of a scene that says none: every scene written before draws as before. */
+export const DEFAULT_SCENE_BACKDROP_ID = 'studio';
+/** The choice an id names; `studio` for none, and for an id no backdrop has. */
+export const sceneBackdropChoice = (id) => SCENE_BACKDROP_CHOICES.find(choice => choice.id === id) ??
+    SCENE_BACKDROP_CHOICES[0];
+/**
+ * The backdrop a stage is drawn with: its scene's `stage.backdrop`, `studio`
+ * when the scene says none or one no backdrop has. Every stage reads it
+ * here — a card's thumbnail, a stage's page, the home page — so that a
+ * scene plays on the same backdrop wherever it plays.
+ */
+export const stageBackdropOf = (scene) => sceneBackdropChoice(scene?.stage?.backdrop).id;

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

@@ -0,0 +1,20 @@
+/**
+ * What every backdrop's edges share: the straight path between two ends,
+ * and the arrowhead at the end a message goes to.
+ *
+ * @module components/teams/backdrops/edges
+ */
+/** A point of the graph. */
+export type Point = {
+    x: number;
+    y: number;
+};
+/** The straight path from one end to the other. */
+export declare const straightPath: (source: Point, target: Point) => string;
+/**
+ * An arrowhead at the end a message goes to — the target's when `forward`,
+ * the source's otherwise — pointing along the edge.
+ */
+export declare function arrowPath(source: Point, target: Point, forward: boolean, length?: number): string;
+/** The middle of an edge, where its words go. */
+export declare const midpoint: (source: Point, target: Point) => Point;

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

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/** The straight path from one end to the other. */
+export const straightPath = (source, target) => `M ${source.x},${source.y} L ${target.x},${target.y}`;
+const ARROW = 9;
+/**
+ * An arrowhead at the end a message goes to — the target's when `forward`,
+ * the source's otherwise — pointing along the edge.
+ */
+export function arrowPath(source, target, forward, length = ARROW) {
+    const tip = forward ? target : source;
+    const from = forward ? source : target;
+    const span = Math.hypot(tip.x - from.x, tip.y - from.y) || 1;
+    // Along the edge, toward the tip; and across it.
+    const ax = (tip.x - from.x) / span;
+    const ay = (tip.y - from.y) / span;
+    const bx = tip.x - ax * length;
+    const by = tip.y - ay * length;
+    const px = -ay * (length / 1.6);
+    const py = ax * (length / 1.6);
+    return `M ${tip.x},${tip.y} L ${bx + px},${by + py} L ${bx - px},${by - py} Z`;
+}
+/** The middle of an edge, where its words go. */
+export const midpoint = (source, target) => ({
+    x: (source.x + target.x) / 2,
+    y: (source.y + target.y) / 2,
+});

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

@@ -0,0 +1,24 @@
+/**
+ * A member's face, as a figure `AssistantStage` draws: its emoji, large;
+ * else its character drawn small inside a frame; else its initial. The
+ * `hero` backdrop frames it in a ring, the `plain` one in a box — the
+ * frame is the backdrop's (`FaceFrame`), the face is the member's.
+ *
+ * It is an `AssistantCharacter`, so the stage keeps everything it does for
+ * a character — the balloon, the menu, the drag, the description *Its
+ * avatar: …* — and only the drawing changes.
+ *
+ * @module components/teams/backdrops/faces
+ */
+import type { CSSProperties } from 'react';
+import type { AssistantCharacter } from '../../../chat/assistant/characters';
+import type { SceneBackdropFace } from './types';
+/** How a backdrop frames a face. */
+export interface FaceFrame {
+    /** The figure's id, for the stage. */
+    id: string;
+    /** The frame's style: its corners, its border, its colours. */
+    ring: CSSProperties;
+}
+/** A member's face in a frame, as a character the stage draws. */
+export declare function faceCharacter(member: SceneBackdropFace, frame: FaceFrame): AssistantCharacter;

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { shippedAssistantCharacter } from '../../../chat/assistant/catalogue.js';
+/** The character a member's `character` id names, when one does; none for a 3D model or an id the catalogue does not know. */
+function drawnCharacter(member) {
+    if (typeof member.character !== 'string') {
+        return undefined;
+    }
+    try {
+        return shippedAssistantCharacter(member.character);
+    }
+    catch {
+        return undefined;
+    }
+}
+/** A member's face in a frame, as a character the stage draws. */
+export function faceCharacter(member, frame) {
+    const inner = member.emoji ? undefined : drawnCharacter(member);
+    const initial = member.name.trim().charAt(0).toUpperCase() || '?';
+    const Drawing = ({ size, mode, state, }) => (_jsx("span", { "data-scene-face": member.emoji ? 'emoji' : inner ? 'character' : 'initial', style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: size,
+            height: size,
+            borderRadius: '50%',
+            boxSizing: 'border-box',
+            overflow: 'hidden',
+            fontSize: Math.round(size * (member.emoji ? 0.5 : 0.42)),
+            fontWeight: 600,
+            lineHeight: 1,
+            userSelect: 'none',
+            ...frame.ring,
+        }, children: member.emoji ? (_jsx("span", { "aria-hidden": "true", children: member.emoji })) : inner ? (_jsx(inner.Drawing, { size: Math.round(size * 0.72), mode: mode, state: state })) : (_jsx("span", { "aria-hidden": "true", children: initial })) }));
+    return {
+        id: frame.id,
+        name: `${member.name}’s face`,
+        Drawing,
+    };
+}

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

@@ -0,0 +1,14 @@
+/**
+ * The halo round a selected edge (SCENES S3-02): a wide, faint stroke under
+ * the edge, in the backdrop's colour, so the exchange chosen in the
+ * transcript is seen on the stage, on every backdrop.
+ *
+ * @module components/teams/backdrops/halo
+ */
+import type { JSX } from 'react';
+/** A wide, faint stroke under a selected edge's path. */
+export declare function EdgeHalo({ path, color, }: {
+    path: string;
+    /** The halo's colour: a CSS value, `var(--scene-stage-glow)`. */
+    color: string;
+}): JSX.Element;

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** A wide, faint stroke under a selected edge's path. */
+export function EdgeHalo({ path, color, }) {
+    return (_jsx("path", { d: path, fill: "none", stroke: color, strokeWidth: 12, strokeLinecap: "round", opacity: 0.35, "data-edge-selected": "" }));
+}

package/lib/components/teams/backdrops/hero.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 hero's layout: faces closer together than the studio's characters, a smaller ring beside each. */
+export declare const HERO_LAYOUT: SceneBackdropLayout;
+/** A member: its face in a ring, and its name under it. */
+export declare const HeroMemberNode: import("react").NamedExoticComponent<NodeProps<Node<MemberData>>>;
+/** A system: a smaller ring with its mark. */
+export declare const HeroConnectionNode: import("react").NamedExoticComponent<NodeProps<Node<ConnectionData>>>;
+/** The A2A link: a thin line, and the dot that flies along it. */
+export declare const HeroLinkEdge: import("react").NamedExoticComponent<EdgeProps<Edge<LinkData>>>;
+/** A member's link to a system: the same thin line, the dot out with the call and back with its result. */
+export declare const HeroCallEdge: import("react").NamedExoticComponent<EdgeProps<Edge<CallData>>>;
+/** The `hero` backdrop. */
+export declare const HERO_BACKDROP: SceneBackdrop;

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

@@ -0,0 +1,178 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo } from 'react';
+import { BaseEdge, EdgeLabelRenderer, } from '@xyflow/react';
+import { Box } from '@datalayer/primer-addons';
+import { prefersReducedMotion } from '../../../chat/assistant/avatar3dModel.js';
+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 = 160;
+const CONNECTION_WIDTH = 88;
+/** The hero's layout: faces closer together than the studio's characters, a smaller ring beside each. */
+export const HERO_LAYOUT = {
+    nodeWidth: NODE_WIDTH,
+    gap: 200,
+    rowGap: 40,
+    // The face, its name and where it runs.
+    memberHeight: size => size + 50,
+    connectionScale: 0.5,
+    connectionWidth: CONNECTION_WIDTH,
+    connectionGap: 120,
+    connectionsApart: 14,
+    connectionHeight: size => size + 50,
+    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 ring: made once per member, so the figure is not drawn anew. */
+function heroFace(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: `hero-face-${member.id}`,
+            ring: {
+                background: 'var(--scene-stage-node)',
+                boxShadow: '0 0 0 2px var(--scene-stage-ring), 0 0 28px var(--scene-stage-glow)',
+                color: 'var(--scene-stage-fg)',
+            },
+        });
+        FACES.set(key, face);
+    }
+    return face;
+}
+const MEMBER_LOOK = {
+    width: NODE_WIDTH,
+    figure: heroFace,
+    name: {
+        fontWeight: 600,
+        textAlign: 'center',
+        color: 'var(--scene-stage-fg)',
+        letterSpacing: '0.01em',
+    },
+    where: {
+        fontSize: '11px',
+        color: 'var(--scene-stage-muted)',
+        textAlign: 'center',
+    },
+};
+const CONNECTION_LOOK = {
+    width: CONNECTION_WIDTH,
+    mark: busy => ({
+        borderRadius: '50%',
+        border: '1.5px solid',
+        borderColor: busy ? 'var(--scene-stage-dot)' : 'var(--scene-stage-ring)',
+        background: 'var(--scene-stage-node)',
+        boxShadow: busy ? '0 0 18px var(--scene-stage-glow)' : 'none',
+    }),
+    markScale: 0.58,
+    label: {
+        fontWeight: 600,
+        fontSize: 1,
+        textAlign: 'center',
+        color: 'var(--scene-stage-fg)',
+    },
+    via: {
+        fontSize: '10px',
+        color: 'var(--scene-stage-muted)',
+        textAlign: 'center',
+    },
+    details: { fontSize: '10px', color: 'var(--scene-stage-muted)' },
+};
+/** A member: its face in a ring, and its name under it. */
+export const HeroMemberNode = memo(function HeroMemberNode(props) {
+    return _jsx(MemberNodeBase, { ...props, look: MEMBER_LOOK });
+});
+/** A system: a smaller ring with its mark. */
+export const HeroConnectionNode = memo(function HeroConnectionNode(props) {
+    return _jsx(ConnectionNodeBase, { ...props, look: CONNECTION_LOOK });
+});
+/** How long the dot takes from one end to the other, in seconds. */
+const DOT_SECONDS = 1.4;
+/**
+ * The dot that flies along the edge: from the source to the target while
+ * asking, back while answering, again and again while the flow lasts; a
+ * fainter one a little behind it. Under reduced motion, a still dot at
+ * the end the message goes to, with an arrowhead.
+ */
+function FlyingDot({ source, target, forward, }) {
+    const from = forward ? source : target;
+    const to = forward ? target : source;
+    if (prefersReducedMotion()) {
+        return (_jsxs("g", { "data-scene-dot": "still", children: [_jsx("circle", { cx: to.x, cy: to.y, r: 5, fill: "var(--scene-stage-dot)" }), _jsx("path", { d: arrowPath(source, target, forward, 10), fill: "var(--scene-stage-dot)" })] }));
+    }
+    const path = straightPath(from, to);
+    return (_jsxs("g", { "data-scene-dot": forward ? 'out' : 'back', children: [_jsx("circle", { r: 3.5, fill: "var(--scene-stage-dot)", opacity: 0.45, children: _jsx("animateMotion", { dur: `${DOT_SECONDS}s`, begin: "0.18s", repeatCount: "indefinite", path: path }) }), _jsx("circle", { r: 5, fill: "var(--scene-stage-dot)", className: "scene-hero-dot", children: _jsx("animateMotion", { dur: `${DOT_SECONDS}s`, repeatCount: "indefinite", path: path }) })] }));
+}
+/** The words on an edge: `A2A` faint at rest, the flow's words while it carries a message. */
+function EdgeWords({ at, flowing, children, ...rest }) {
+    return (_jsx(EdgeLabelRenderer, { children: _jsx(Box, { className: "nodrag nopan", position: "absolute", transform: `translate(-50%, 10px) translate(${at.x}px, ${at.y}px)`, pointerEvents: "none", textAlign: "center", whiteSpace: "nowrap", fontSize: "11px", fontFamily: "mono", letterSpacing: "0.04em", color: flowing ? 'var(--scene-stage-fg)' : 'var(--scene-stage-muted)', ...rest, children: children }) }));
+}
+/** The A2A link: a thin line, and the dot that flies along it. */
+export const HeroLinkEdge = memo(function HeroLinkEdge({ 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: [data?.selected && (_jsx(EdgeHalo, { path: straightPath(source, target), color: "var(--scene-stage-glow)" })), _jsx(BaseEdge, { id: id, path: straightPath(source, target), style: {
+                    stroke: data?.selected
+                        ? 'var(--scene-stage-dot)'
+                        : 'var(--scene-stage-line)',
+                    strokeWidth: data?.selected ? 1.5 : 1,
+                    strokeDasharray: data?.connected ? undefined : '4 6',
+                    opacity: data?.connected ? 1 : 0.6,
+                } }), flow !== 'still' && (_jsx("g", { "data-a2a-edge-flow": flow, children: _jsx(FlyingDot, { source: source, target: target, forward: flow === 'asking' }) })), _jsx(EdgeWords, { at: midpoint(source, target), flowing: flow !== 'still', children: data?.label })] }));
+});
+/** A member's link to a system: the same thin line, the dot out with the call and back with its result. */
+export const HeroCallEdge = memo(function HeroCallEdge({ 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: [data?.selected && (_jsx(EdgeHalo, { path: straightPath(source, target), color: "var(--scene-stage-glow)" })), _jsx(BaseEdge, { id: id, path: straightPath(source, target), style: {
+                    stroke: data?.selected
+                        ? 'var(--scene-stage-dot)'
+                        : 'var(--scene-stage-line)',
+                    strokeWidth: data?.selected ? 1.5 : 1,
+                } }), flow !== 'still' && (_jsx("g", { "data-mcp-edge-call": data?.calling, "data-mcp-edge-flow": flow, children: _jsx(FlyingDot, { source: source, target: target, forward: flow === 'asking' }) })), _jsx(EdgeWords, { at: midpoint(source, target), flowing: flow !== 'still', "data-mcp-edge-label": "", children: data?.label })] }));
+});
+const NODE_TYPES = { member: HeroMemberNode, connection: HeroConnectionNode };
+const EDGE_TYPES = { a2a: HeroLinkEdge, mcp: HeroCallEdge };
+/** The `hero` backdrop. */
+export const HERO_BACKDROP = {
+    ...sceneBackdropChoice('hero'),
+    figure: heroFace,
+    nodeTypes: NODE_TYPES,
+    edgeTypes: EDGE_TYPES,
+    theme: {
+        // Deep in both modes: the space the faces float in. The words on it
+        // are the stage's own, not the page's, so they read on the tint.
+        light: {
+            '--scene-stage-bg': '#101a33',
+            '--scene-stage-fg': '#f0f4ff',
+            '--scene-stage-muted': '#9aa8c7',
+            '--scene-stage-line': 'rgba(190, 205, 240, 0.45)',
+            '--scene-stage-node': '#1a2747',
+            '--scene-stage-ring': 'rgba(190, 205, 240, 0.55)',
+            '--scene-stage-dot': '#7cc4ff',
+            '--scene-stage-glow': 'rgba(124, 196, 255, 0.35)',
+        },
+        dark: {
+            '--scene-stage-bg': '#070b16',
+            '--scene-stage-fg': '#e9eefb',
+            '--scene-stage-muted': '#8a97b8',
+            '--scene-stage-line': 'rgba(170, 190, 235, 0.4)',
+            '--scene-stage-node': '#121a30',
+            '--scene-stage-ring': 'rgba(170, 190, 235, 0.5)',
+            '--scene-stage-dot': '#8fd0ff',
+            '--scene-stage-glow': 'rgba(143, 208, 255, 0.4)',
+        },
+        sx: {
+            background: 'radial-gradient(ellipse at 50% 0%, rgba(124, 196, 255, 0.10), transparent 60%), var(--scene-stage-bg)',
+            borderRadius: 2,
+            color: 'var(--scene-stage-fg)',
+        },
+    },
+    layout: HERO_LAYOUT,
+};

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

@@ -0,0 +1,22 @@
+/**
+ * The backdrops a scene's stage is drawn with: `studio`, `hero`, `plain`
+ * ({@link SCENE_BACKDROPS}, in a chooser's order), and the one an id
+ * names ({@link sceneBackdrop}: `studio` for none, and for an id the
+ * graph does not know, said once in the console).
+ *
+ * @module components/teams/backdrops
+ */
+import type { SceneBackdrop } from './types';
+export type { SceneBackdrop, SceneBackdropFace, SceneBackdropId, SceneBackdropLayout, SceneBackdropTheme, StageSx, } from './types';
+export * from './catalogue';
+export { sceneStageSx } from './theme';
+/** The three backdrops, in a chooser's order: the drawing every scene had first. */
+export declare const SCENE_BACKDROPS: readonly SceneBackdrop[];
+/** The backdrop of a scene that says none: every scene written before draws as before. */
+export declare const DEFAULT_SCENE_BACKDROP: SceneBackdrop;
+/**
+ * The backdrop an id names; `studio` for none, and for an id no backdrop
+ * has — said once in the console, so a scene with a backdrop the graph does
+ * not know still plays.
+ */
+export declare function sceneBackdrop(id?: string): SceneBackdrop;