@datalayer/agent-runtimes 1.5.89 → 1.5.91

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

@@ -0,0 +1,122 @@
+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 { Label } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { ConnectionNodeBase, MemberNodeBase, } from './nodes.js';
+import { arrowPath, straightPath } from './edges.js';
+import { EdgeHalo } from './halo.js';
+import { sceneBackdropChoice } from './catalogue.js';
+/** The graph's own coordinates: the members, and room above them for their balloons. */
+const NODE_WIDTH = 200;
+const GAP = 220;
+const CONNECTION_WIDTH = NODE_WIDTH / 2;
+/** The studio's layout: the entry and a peer 220 apart, a connection half a member's size to its right. */
+export const STUDIO_LAYOUT = {
+    nodeWidth: NODE_WIDTH,
+    gap: GAP,
+    rowGap: 48,
+    // The character, its name and where it runs.
+    memberHeight: size => size + 56,
+    connectionScale: 0.5,
+    connectionWidth: CONNECTION_WIDTH,
+    // Room for the MCP edge's words, as the A2A edge has room for its own.
+    connectionGap: 140,
+    connectionsApart: 16,
+    // Its mark, its label and how it is reached (about 45px under the mark),
+    // and room under it before the graph's edge.
+    connectionHeight: size => size + 58,
+    // The first one's mark level with the character's middle: a mark half
+    // the character's size, so a quarter down.
+    connectionsTop: size => size / 4,
+    balloonRoom: 144,
+};
+const MEMBER_LOOK = {
+    width: NODE_WIDTH,
+    figure: member => member.character,
+    name: { fontWeight: 600, textAlign: 'center' },
+    where: { fontSize: 0, color: 'fg.muted', textAlign: 'center' },
+};
+const CONNECTION_LOOK = {
+    width: CONNECTION_WIDTH,
+    mark: busy => ({
+        borderRadius: 2,
+        border: '1px solid',
+        borderColor: busy ? 'accent.emphasis' : 'border.default',
+        bg: 'canvas.default',
+    }),
+    markScale: 0.66,
+    label: { fontWeight: 600, fontSize: 1, textAlign: 'center' },
+    via: { fontSize: '10px', color: 'fg.muted', textAlign: 'center' },
+    details: { fontSize: '10px', color: 'fg.muted' },
+};
+/** A member: its character, its name and where it runs. */
+export const MemberNode = memo(function MemberNode(props) {
+    return _jsx(MemberNodeBase, { ...props, look: MEMBER_LOOK });
+});
+/** A connection of a member's: the server's mark, what it reaches, and how. */
+export const ConnectionNode = memo(function ConnectionNode(props) {
+    return _jsx(ConnectionNodeBase, { ...props, look: CONNECTION_LOOK });
+});
+/** The A2A link between two members: still, or flowing the way the message goes. */
+export const LinkEdge = memo(function LinkEdge({ id, sourceX, sourceY, targetX, targetY, data, }) {
+    const flow = data?.flow ?? 'still';
+    const source = { x: sourceX, y: sourceY };
+    const target = { x: targetX, y: targetY };
+    const path = straightPath(source, target);
+    // The arrow at the end the message goes to, along the edge.
+    const towardPeer = flow === 'asking';
+    const arrow = arrowPath(source, target, towardPeer);
+    return (_jsxs(_Fragment, { children: [data?.selected && (_jsx(EdgeHalo, { path: path, color: "var(--bgColor-accent-emphasis)" })), _jsx(BaseEdge, { id: id, path: path, style: {
+                    stroke: data?.connected
+                        ? 'var(--borderColor-accent-emphasis)'
+                        : 'var(--borderColor-muted)',
+                    strokeWidth: 2,
+                    strokeDasharray: data?.connected ? undefined : '6 6',
+                    opacity: flow === 'still' ? 0.6 : 0.25,
+                } }), flow !== 'still' && (_jsxs("g", { "data-a2a-edge-flow": flow, children: [_jsx("path", { d: path, fill: "none", className: `a2a-team-flow a2a-team-flow-${flow}`, stroke: "var(--fgColor-accent)", strokeWidth: 3, strokeLinecap: "round", strokeDasharray: "10 14" }), _jsx("path", { d: arrow, fill: "var(--fgColor-accent)" })] })), _jsx(EdgeLabelRenderer, { children: _jsx(Box, { className: "nodrag nopan", position: "absolute", transform: `translate(-50%, 12px) translate(${(sourceX + targetX) / 2}px, ${(sourceY + targetY) / 2}px)`, pointerEvents: "none", textAlign: "center", children: _jsx(Label, { variant: data?.connected ? 'accent' : 'secondary', children: data?.label }) }) })] }));
+});
+/**
+ * A member's link to a connection, drawn as the A2A link is: still, flowing
+ * toward the connection while a call runs, and back with its result.
+ */
+export const CallEdge = memo(function CallEdge({ id, sourceX, sourceY, targetX, targetY, data, }) {
+    const flow = data?.flow ?? 'still';
+    const source = { x: sourceX, y: sourceY };
+    const target = { x: targetX, y: targetY };
+    const path = straightPath(source, target);
+    // The arrow at the end the call or its result goes to, along the edge.
+    const arrow = arrowPath(source, target, flow === 'asking');
+    return (_jsxs(_Fragment, { children: [data?.selected && (_jsx(EdgeHalo, { path: path, color: "var(--bgColor-accent-emphasis)" })), _jsx(BaseEdge, { id: id, path: path, style: {
+                    stroke: 'var(--borderColor-accent-emphasis)',
+                    strokeWidth: 2,
+                    opacity: flow === 'still' ? 0.6 : 0.25,
+                } }), flow !== 'still' && (_jsxs("g", { "data-mcp-edge-call": data?.calling, "data-mcp-edge-flow": flow, children: [_jsx("path", { d: path, fill: "none", className: `a2a-team-flow a2a-team-flow-${flow}`, stroke: "var(--fgColor-accent)", strokeWidth: 3, strokeLinecap: "round", strokeDasharray: "10 14" }), _jsx("path", { d: arrow, fill: "var(--fgColor-accent)" })] })), _jsx(EdgeLabelRenderer, { children: _jsx(Box, { className: "nodrag nopan", position: "absolute", transform: `translate(-50%, 12px) translate(${(sourceX + targetX) / 2}px, ${(sourceY + targetY) / 2}px)`, pointerEvents: "none", textAlign: "center", whiteSpace: "nowrap", "data-mcp-edge-label": "", children: _jsx(Label, { variant: "accent", children: data?.label }) }) })] }));
+});
+const NODE_TYPES = { member: MemberNode, connection: ConnectionNode };
+const EDGE_TYPES = { a2a: LinkEdge, mcp: CallEdge };
+/** The `studio` backdrop. */
+export const STUDIO_BACKDROP = {
+    ...sceneBackdropChoice('studio'),
+    figure: MEMBER_LOOK.figure,
+    nodeTypes: NODE_TYPES,
+    edgeTypes: EDGE_TYPES,
+    theme: {
+        // The page's own colours: nothing of its own.
+        light: {},
+        dark: {},
+        sx: {
+            '@keyframes a2aTeamFlow': {
+                from: { strokeDashoffset: 24 },
+                to: { strokeDashoffset: 0 },
+            },
+            '& .a2a-team-flow-asking': {
+                animation: 'a2aTeamFlow 0.6s linear infinite',
+            },
+            '& .a2a-team-flow-answering': {
+                animation: 'a2aTeamFlow 0.6s linear infinite reverse',
+            },
+        },
+    },
+    layout: STUDIO_LAYOUT,
+};

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

@@ -0,0 +1,14 @@
+/**
+ * The rules a backdrop's theme puts on a stage's box: the variables light
+ * and dark, and the box's own rules — for the graph, and for a stage that
+ * draws one member alone in the same look.
+ *
+ * @module components/teams/backdrops/theme
+ */
+import type { SceneBackdropTheme, StageSx } from './types';
+/**
+ * A theme's rules on a box: its own (its background, its keyframes) and its
+ * variables, light and dark (Primer's `data-color-mode`: `dark`, or `auto`
+ * on a dark system).
+ */
+export declare function sceneStageSx(theme: SceneBackdropTheme): StageSx;

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

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * A theme's rules on a box: its own (its background, its keyframes) and its
+ * variables, light and dark (Primer's `data-color-mode`: `dark`, or `auto`
+ * on a dark system).
+ */
+export function sceneStageSx(theme) {
+    return {
+        ...theme.sx,
+        ...theme.light,
+        '[data-color-mode="dark"] &': theme.dark,
+        '@media (prefers-color-scheme: dark)': {
+            '[data-color-mode="auto"] &': theme.dark,
+        },
+    };
+}

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

@@ -0,0 +1,214 @@
+/**
+ * A backdrop: how a scene's stage is drawn. The same members, systems and
+ * links — what `A2ATeamGraph` computes of a team: who stands where, which
+ * way each link carries a message, which connection answers a call — drawn
+ * in another look: React Flow's node and edge types, the stage's own
+ * colours as CSS variables on its box, and how a member is sized and its
+ * connections placed beside it.
+ *
+ * The scene keeps its backdrop (`SceneStageSpec.backdrop`, agentspecs'
+ * `Backdrop`): `studio`, the drawing every scene had first; `hero`, round
+ * faces on a deep tint with a dot that flies with each message; `plain`,
+ * boxes and arrows that do not move.
+ *
+ * @module components/teams/backdrops/types
+ */
+import type { EdgeTypes, NodeTypes } from '@xyflow/react';
+import type { BoxProps } from '@datalayer/primer-addons';
+import type { AssistantModel3D } from '../../../chat/assistant/avatar3dModel';
+import type { AssistantAbout, AssistantStageProps } from '../../../chat/assistant/AssistantStage';
+import type { BalloonSuggestion } from '../../../chat/assistant/SpeechBalloon';
+import type { DisplayItem } from '../../../types/chat';
+import type { AssistantMenuItem } from '../../../chat/assistant/AssistantContextMenu';
+import type { AssistantSandbox } from '../../../chat/assistant/assistantDetails';
+import type { OtelLiveTracer } from '@datalayer/core/lib/otel/live';
+import type { BalloonExpandTarget } from '../../../chat/assistant/BalloonVisual';
+import type { BalloonDisplay } from '../../../chat/assistant/toolLine';
+import type { A2ATeamConnection, A2ATeamFlow } from '../a2aTeamFlow';
+import type { A2ATeamPersona } from '../useA2ATeam';
+import type { SceneBackdropId } from '../../../types/scenes';
+export type { SceneBackdropId };
+/** Rules on the stage's box or a node, as `Box`'s `sx` reads them: Primer's tokens, nested selectors, keyframes. */
+export type StageSx = NonNullable<BoxProps['sx']>;
+/** One member of the team, as the graph draws it. */
+export type A2ATeamGraphMember = {
+    id: string;
+    name: string;
+    emoji?: string;
+    /** Its avatar, as its Appspec's `interface.avatar` names it: an id, or a 3D model. */
+    character: string | AssistantModel3D;
+    /** Where it runs, in a few words: "in your browser", "on a runtime". */
+    where: string;
+    persona: A2ATeamPersona;
+    /** A click on the character. */
+    onToggle?: () => void;
+    /** It was sent away, or called back. */
+    onAway?: (away: boolean) => void;
+    /** The MCP servers it reaches, drawn to its right (`teamConnectionsOf`). */
+    connections?: A2ATeamConnection[];
+    /**
+     * How its balloon shows what it says (T-23): only what it says or
+     * does now (`current`, a team's default) — the words, the tool it calls,
+     * a notebook it was given — or a peek (`history`).
+     */
+    balloonDisplay?: BalloonDisplay;
+    /**
+     * The notebook in its balloon was clicked: by default, it is expanded —
+     * into `expandTarget`, scrolled to and focused, or in a dialog.
+     */
+    onNotebookOpen?: () => void;
+    /**
+     * Where the notebook it was given runs (`TeamNotebook`, editable, on the
+     * browser sandbox): an element of the page — the area under the graph —
+     * where it is drawn as it arrives and when it is expanded; without one,
+     * *Expand* opens it in a dialog over the page.
+     */
+    expandTarget?: BalloonExpandTarget;
+    /** What its notebook is called: `Accounting's notebook`. */
+    notebookTitle?: string;
+    /**
+     * What the person may ask it: chips in its balloon while it waits for a
+     * question, and a group of its menu; one chosen is sent (`onSuggestion`).
+     */
+    suggestions?: readonly BalloonSuggestion[];
+    onSuggestion?: (suggestion: BalloonSuggestion) => void;
+    /**
+     * The team's Agent Inspector's tracer: its menu offers *Inspect the
+     * agent…*, its own spans (what it did, and the A2A requests sent to it).
+     */
+    inspector?: OtelLiveTracer | null;
+    /** Stops its turn, from its menu, while it works. */
+    onStop?: () => void;
+    /** What its menu's *About* and *Agent Details…* say. */
+    about?: AssistantAbout;
+    /**
+     * Its code sandbox, for *Code Sandbox Details…*. The entry — the agent in
+     * the page — has the kernel of the notebook open under the graph, while
+     * one is.
+     */
+    sandbox?: AssistantSandbox;
+    /** The host's own entries of its menu. */
+    contextMenu?: readonly AssistantMenuItem[];
+    /**
+     * What its menu calls a click on it (`onToggle`): `Ask Sales` where it
+     * takes the person to the composer. Without `onToggle`, its menu has no
+     * such entry.
+     */
+    conversationLabel?: string;
+    /**
+     * What it said and did, as its `history` balloon lists it (`useA2ATeam`'s
+     * `entryHistory`, `peerHistory`): shown when its menu chooses *History*.
+     */
+    history?: readonly DisplayItem[];
+    /** Its balloon's display was chosen in its menu: the page may keep it. */
+    onBalloonDisplayChange?: (display: BalloonDisplay) => void;
+};
+/** Who talks to whom over A2A: an edge of the graph. */
+export type A2ATeamGraphLink = {
+    from: string;
+    to: string;
+};
+/** Where a member stands: fractions of the box, as a scene's stage says. */
+export type A2ATeamGraphPosition = {
+    x: number;
+    y: number;
+};
+/** What a member's node is given: the rest is read from the graph's contexts. */
+export type MemberData = {
+    id: string;
+    /** Which half of the graph it stands in: its balloon opens toward the middle. */
+    side: 'left' | 'right';
+    /** Its figure's size, in pixels at full scale. */
+    size: number;
+};
+/** What a connection's node is given. */
+export type ConnectionData = {
+    member: string;
+    connection: string;
+    /** Its mark's size, in pixels at full scale. */
+    size: number;
+};
+/** What an A2A link's edge is given. */
+export type LinkData = {
+    flow: A2ATeamFlow;
+    connected: boolean;
+    /** What it says: `A2A`, and the flow's words while it carries a message. */
+    label: string;
+    /** The exchange selected in the transcript is on it: drawn with a halo (S3-02). */
+    selected: boolean;
+};
+/** What a member's link to a connection is given. */
+export type CallData = {
+    /** Which way it carries a call: out with the call, back with its result. */
+    flow: A2ATeamFlow;
+    /** The tool being called, in words (`list invoices`); empty while none is. */
+    calling: string;
+    /** What it says: `MCP`, and what it carries while it carries something. */
+    label: string;
+    /** The call selected in the transcript is on it: drawn with a halo (S3-02). */
+    selected: boolean;
+};
+/**
+ * The stage's own colours and type, as CSS variables on the graph's box —
+ * `--scene-stage-bg` and the others a backdrop's nodes and edges read —
+ * for the light mode and the dark one (Primer's `data-color-mode`), and
+ * the box's own rules beside them: its background, its corners, the
+ * keyframes its edges move by.
+ */
+export interface SceneBackdropTheme {
+    /** The variables in the light mode. */
+    light: Record<`--${string}`, string>;
+    /** The variables in the dark mode: `data-color-mode="dark"`, or `auto` on a dark system. */
+    dark: Record<`--${string}`, string>;
+    /** The box's rules: its background, padding and corners, the classes and keyframes its drawing uses. */
+    sx?: StageSx;
+}
+/** How a member is sized, and how its connections are placed beside it, in the graph's coordinates at full scale. */
+export interface SceneBackdropLayout {
+    /** A member's node, wide. */
+    nodeWidth: number;
+    /** Between two columns of members. */
+    gap: number;
+    /** Between two rows of members. */
+    rowGap: number;
+    /** A member's node, tall: its figure of `size`, its name and where it runs. */
+    memberHeight: (size: number) => number;
+    /** A connection's mark, as a fraction of its member's figure. */
+    connectionScale: number;
+    /** A connection's node, wide. */
+    connectionWidth: number;
+    /** Between a member and its connections, to its right: room for the edge's words. */
+    connectionGap: number;
+    /** Between two connections of one member. */
+    connectionsApart: number;
+    /** A connection's node, tall: its mark of `size`, its label and how it is reached. */
+    connectionHeight: (size: number) => number;
+    /** Where a member's first connection's top is, from the member's top. */
+    connectionsTop: (size: number) => number;
+    /** The least room above the members for their balloons, when the page says none. */
+    balloonRoom: number;
+}
+/** A backdrop: how a scene's stage is drawn. */
+export interface SceneBackdrop {
+    id: SceneBackdropId;
+    /** `Studio`, `Hero`, `Plain`. */
+    name: string;
+    /** One line of what the stage looks like, for a chooser. */
+    description: string;
+    /** React Flow's node types: `member`, `connection`. */
+    nodeTypes: NodeTypes;
+    /** React Flow's edge types: `a2a`, `mcp`. */
+    edgeTypes: EdgeTypes;
+    theme: SceneBackdropTheme;
+    layout: SceneBackdropLayout;
+    /**
+     * What a member is drawn as in this look — its own character, or a face
+     * made from its emoji, its character or its initial — for a stage that
+     * draws one member alone (the home page's solo scenes) in the graph's
+     * look. The same object for the same member, so the figure is not drawn
+     * anew.
+     */
+    figure: (member: SceneBackdropFace) => AssistantStageProps['character'];
+}
+/** What a face is made from: the member's id, name, emoji and character. */
+export type SceneBackdropFace = Pick<A2ATeamGraphMember, 'id' | 'name' | 'emoji' | 'character'>;

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

@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export {};

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

@@ -11,11 +11,13 @@ export * from './teamConnections';
 export * from './useA2ATeam';
 export * from './usePeerSandbox';
 export * from './A2ATeamGraph';
+export * from './backdrops';
 export * from './TeamNotebook';
 export * from './NotebookPreview';
 export * from './sceneTranscriptRules';
 export * from './SceneTranscript';
 export * from './SceneView';
+export * from './transcript';
 export * from './useBalloonRoom';
 export * from './sceneStage';
 export * from './AnswerSurfaces';

package/lib/components/teams/index.js

@@ -15,11 +15,13 @@ export * from './teamConnections.js';
 export * from './useA2ATeam.js';
 export * from './usePeerSandbox.js';
 export * from './A2ATeamGraph.js';
+export * from './backdrops/index.js';
 export * from './TeamNotebook.js';
 export * from './NotebookPreview.js';
 export * from './sceneTranscriptRules.js';
 export * from './SceneTranscript.js';
 export * from './SceneView.js';
+export * from './transcript/index.js';
 export * from './useBalloonRoom.js';
 export * from './sceneStage.js';
 export * from './AnswerSurfaces.js';

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

@@ -9,7 +9,10 @@
  * tool call an `execute_tool` span (the member and, for an MCP call, the
  * server it reaches: a connection of the member's), and a request to
  * another member an `a2a` span (who asked whom, in what words, and what came
- * back as its events). Once a run is over, the same lines are read from its
+ * back as its events). A coding harness's turn is a `shield.turn` span whose
+ * events are the Shield's decisions on each of its steps: one line per step,
+ * *Code Explainer → its workspace: Read README.md*, failed when the Shield
+ * refused it ({@link shieldStepsOf}). Once a run is over, the same lines are read from its
  * record (`RecordEntry`: a `turn`, a `tool_call`), the session's entries as
  * ai-agents kept them.
  *
@@ -49,9 +52,36 @@ export type SceneTranscriptLine = {
     open?: boolean;
     /** It failed: the span's status, the task's state. */
     failed?: boolean;
+    /**
+     * When a call or an ask that is over ended, in milliseconds since the
+     * epoch: the span's end (SCENES S2-01, the table's durations). None while
+     * it is open, and none for a line read from a record.
+     */
+    ended?: number;
 };
 /** The person in the scene, as the transcript names them. */
 export declare const PERSON = "You";
+/** Where a harness's steps go (agentspecs' `WORKSPACE`): its files, its terminal. */
+export declare const WORKSPACE: string;
+/** The Shield's events that decide a harness's step, each naming the step's call. */
+export declare const SHIELD_STEP_EVENTS: readonly string[];
+/** Whether a call goes to a tool's home (*the page*, *a skill*…) rather than to a connection over MCP. */
+export declare function isToolHome(to: string | undefined): boolean;
+type Attributes = Record<string, unknown>;
+/** Whether a span is a coding harness's turn behind the Shield. */
+export declare const isShieldTurn: (span: OtelSpan) => boolean;
+/** The call a Shield event decides, as a line's key carries it (no `:`). */
+export declare const stepCallOf: (event: {
+    attributes?: Attributes;
+}) => string;
+/**
+ * A harness's steps in a `shield.turn` span: one line per call the Shield
+ * decided, at its first decision, saying its title, ended when the call
+ * completed or failed, failed when the Shield refused it (any of its
+ * decisions a `deny`). Its key is `<span>/<call>:called`: the drill-down
+ * reads the Shield's rule from the span's events by it.
+ */
+export declare function shieldStepsOf(span: OtelSpan, member: SceneTranscriptMember): SceneTranscriptLine[];
 /**
  * The transcript of a scene from the spans recorded while it works (the
  * Agent Inspector's, one tracer for every member).
@@ -72,3 +102,4 @@ export declare function lineHeading(line: Pick<SceneTranscriptLine, 'from' | 'to
 export declare function lineText(line: SceneTranscriptLine): string;
 /** The transcript as text, one line each with its time: what *Copy as text* copies. */
 export declare function transcriptText(lines: readonly SceneTranscriptLine[]): string;
+export {};

package/lib/components/teams/sceneTranscriptRules.js

@@ -11,7 +11,19 @@ const TOOL_HOMES = {
     skill: 'a skill',
     codemode: 'codemode',
     runtime: 'its runtime',
+    harness: 'its workspace',
 };
+/** Where a harness's steps go (agentspecs' `WORKSPACE`): its files, its terminal. */
+export const WORKSPACE = TOOL_HOMES.harness;
+/** The Shield's events that decide a harness's step, each naming the step's call. */
+export const SHIELD_STEP_EVENTS = [
+    'shield.tool_call',
+    'shield.permission',
+];
+/** Whether a call goes to a tool's home (*the page*, *a skill*…) rather than to a connection over MCP. */
+export function isToolHome(to) {
+    return Object.values(TOOL_HOMES).includes(to ?? '');
+}
 const text = (value) => typeof value === 'string' ? value : '';
 /** The text of the first message of a GenAI messages attribute (JSON). */
 function messageText(value) {
@@ -72,12 +84,98 @@ function onceEach(lines) {
         return true;
     });
 }
+/** Whether a span is a coding harness's turn behind the Shield. */
+export const isShieldTurn = (span) => span.span_name === 'shield.turn' ||
+    Object.prototype.hasOwnProperty.call(span.attributes ?? {}, 'shield.harness');
+/** The call a Shield event decides, as a line's key carries it (no `:`). */
+export const stepCallOf = (event) => text(event.attributes?.tool_call_id).replace(/:/g, '_');
+/** A step in words: its title (*Read README.md*), else its path, command or kind. */
+function stepText(attributes) {
+    for (const name of ['title', 'path', 'command', 'url', 'kind']) {
+        const said = text(attributes[name]).trim();
+        if (said) {
+            return said;
+        }
+    }
+    return 'a step';
+}
+/**
+ * A harness's steps in a `shield.turn` span: one line per call the Shield
+ * decided, at its first decision, saying its title, ended when the call
+ * completed or failed, failed when the Shield refused it (any of its
+ * decisions a `deny`). Its key is `<span>/<call>:called`: the drill-down
+ * reads the Shield's rule from the span's events by it.
+ */
+export function shieldStepsOf(span, member) {
+    const start = millis(span.start_time);
+    const steps = new Map();
+    for (const event of span.events ?? []) {
+        if (!SHIELD_STEP_EVENTS.includes(event.name)) {
+            continue;
+        }
+        const call = stepCallOf(event);
+        if (!call) {
+            continue;
+        }
+        const attributes = event.attributes ?? {};
+        const at = millis(event.timestamp, start);
+        let step = steps.get(call);
+        if (!step) {
+            step = { at, text: '', failed: false };
+            steps.set(call, step);
+        }
+        if (!step.text &&
+            ['title', 'path', 'command', 'url'].some(name => text(attributes[name]).trim())) {
+            step.text = stepText(attributes);
+        }
+        if (attributes.decision === 'deny') {
+            step.failed = true;
+            step.ended = at;
+        }
+        if (attributes.status === 'completed' || attributes.status === 'failed') {
+            step.ended = at;
+            step.failed = step.failed || attributes.status === 'failed';
+        }
+    }
+    const lines = [];
+    for (const [call, step] of steps) {
+        // A step the Shield saw no end of ends with the turn, or is still going.
+        const ended = step.ended ??
+            (span.in_progress ? undefined : millis(span.end_time, step.at));
+        lines.push({
+            key: `${span.span_id}/${call}:called`,
+            at: step.at,
+            from: member.name,
+            to: WORKSPACE,
+            kind: 'called',
+            text: step.text || 'a step',
+            ...(ended === undefined ? { open: true } : { ended }),
+            ...(step.failed ? { failed: true } : {}),
+        });
+    }
+    return lines;
+}
+/** Whose turn a `shield.turn` span is: the agent of the turn above it, else its service. */
+function turnMember(span, byId, members) {
+    let parent = span.parent_span_id ? byId.get(span.parent_span_id) : undefined;
+    for (let seen = 0; parent && seen < 32; seen += 1) {
+        const name = text(parent.attributes?.['gen_ai.agent.name']);
+        if (name) {
+            return memberNamed(name, members);
+        }
+        parent = parent.parent_span_id
+            ? byId.get(parent.parent_span_id)
+            : undefined;
+    }
+    return memberNamed(span.service_name, members);
+}
 /**
  * The transcript of a scene from the spans recorded while it works (the
  * Agent Inspector's, one tracer for every member).
  */
 export function transcriptOfSpans(spans, members) {
     const lines = [];
+    const byId = new Map(spans.map(span => [span.span_id, span]));
     // A tool call under which an A2A request sits is the asking itself: the
     // request says it, with its words.
     const asking = new Set();
@@ -92,6 +190,10 @@ export function transcriptOfSpans(spans, members) {
         const end = millis(span.end_time, start);
         const operation = attributes['gen_ai.operation.name'];
         const failed = span.status_code === 'ERROR';
+        if (isShieldTurn(span)) {
+            lines.push(...shieldStepsOf(span, turnMember(span, byId, members)));
+            continue;
+        }
         if (operation === 'invoke_agent') {
             const agent = memberNamed(text(attributes['gen_ai.agent.name']) || span.service_name, members);
             const asked = messageText(attributes['gen_ai.input.messages']);
@@ -143,7 +245,7 @@ export function transcriptOfSpans(spans, members) {
                 to: calledOf(tool, text(attributes['datalayer.tool.kind']), agent),
                 kind: 'called',
                 text: tool,
-                ...(span.in_progress ? { open: true } : {}),
+                ...(span.in_progress ? { open: true } : { ended: end }),
                 ...(failed ? { failed } : {}),
             });
             continue;
@@ -163,7 +265,7 @@ export function transcriptOfSpans(spans, members) {
                 to: peer.name,
                 kind: 'asked',
                 text: request,
-                ...(span.in_progress ? { open: true } : {}),
+                ...(span.in_progress ? { open: true } : { ended: end }),
             });
             // What came back: the answer, or the last words of its events.
             let answer = text(attributes['a2a.answer.text']).trim();

package/lib/components/teams/transcript/RecordingLabel.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The label a recording plays under: *Recording, taken 29 October 2026*,
+ * so that nobody takes it for the scene playing live. Its note, when the
+ * recording has one, is the label's title.
+ *
+ * @module components/teams/transcript/RecordingLabel
+ */
+import type { JSX } from 'react';
+export type RecordingLabelProps = {
+    /** When it was taken: `2026-10-29`. */
+    taken?: string;
+    /** What the audience is told of it. */
+    note?: string;
+    size?: 'small' | 'large';
+};
+export declare function RecordingLabel({ taken, note, size, }: RecordingLabelProps): JSX.Element;
+export default RecordingLabel;

package/lib/components/teams/transcript/RecordingLabel.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Label } from '@primer/react';
+import { recordingLabel } from './recordingPlayback.js';
+export function RecordingLabel({ taken, note, size = 'small', }) {
+    return (_jsx(Label, { variant: "attention", size: size, title: note, "data-scene-recording-label": taken ?? '', children: recordingLabel(taken) }));
+}
+export default RecordingLabel;