@datalayer/agent-runtimes 1.5.90 → 1.5.91

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

@@ -32,105 +32,27 @@
  * zoomed, and the wheel scrolls the page. Its viewport is worked out from its
  * box, so it fits a phone as it fits a desk.
  *
+ * How it is drawn is its *backdrop* (`backdrop`, the scene's
+ * `stage.backdrop`; {@link SceneBackdrop}): `studio`, the drawing above —
+ * characters, balloons, flowing edges — `hero`, faces on a deep tint with
+ * a dot that flies with each message, or `plain`, boxes and arrows that do
+ * not move. The graph works out the same things for every backdrop — who
+ * stands where, which way each link carries a message, which connection
+ * answers a call, the words a screen reader hears — and reads the node
+ * types, the edge types, the colours and the layout from the backdrop.
+ *
  * @module components/teams/A2ATeamGraph
  */
-import type { AssistantModel3D } from '../../chat/assistant/avatar3dModel';
 import type { JSX } from 'react';
-import { type Edge, type EdgeProps, type Viewport } from '@xyflow/react';
+import { type Viewport } from '@xyflow/react';
 import '@xyflow/react/dist/base.css';
-import { type AssistantAbout } 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 A2ATeamCall, type A2ATeamConnection, type A2ATeamFlow } from './a2aTeamFlow';
-import type { A2ATeamPersona } from './useA2ATeam';
-import type { BalloonExpandTarget } from '../../chat/assistant/BalloonVisual';
-import type { BalloonDisplay } from '../../chat/assistant/toolLine';
-/** 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;
-};
+import type { A2ATeamGraphLink, A2ATeamGraphMember, A2ATeamGraphPosition, SceneBackdropId } from './backdrops/types';
+import type { SelectedEdge } from './transcript/selection';
+export type { A2ATeamGraphLink, A2ATeamGraphMember, A2ATeamGraphPosition, } from './backdrops/types';
+export { MEMBER_HANDLES, clampOffset, connectionDetails, connectionLabel, memberLabel, type MemberBounds, type MemberOffset, } from './backdrops/nodes';
+export { arrowPath } from './backdrops/edges';
+export { CallEdge, LinkEdge, MemberNode, ConnectionNode, } from './backdrops/studio';
 export type A2ATeamGraphProps = {
     /** The member that asks: drawn on the left. */
     entry: A2ATeamGraphMember;
@@ -166,25 +88,32 @@ export type A2ATeamGraphProps = {
      * The least room above the members for their balloons, in pixels at full
      * scale: the graph keeps what its balloons take now (`useBalloonRoom`) —
      * suggestions, *more* unfolded — and never less than this. A notebook in
-     * a balloon gets at least its own.
+     * a balloon gets at least its own. Unsaid, the backdrop's.
      */
     balloonRoom?: number;
+    /**
+     * How the stage is drawn (`SceneStageSpec.backdrop`): `studio`, the
+     * drawing every scene had first, `hero` or `plain`. `studio` when unsaid,
+     * and for an id the graph does not know.
+     */
+    backdrop?: SceneBackdropId;
+    /**
+     * The exchange selected in the transcript, as the edge it is on
+     * (`selectedEdgeOf`, SCENES S3-02): drawn with a halo on every backdrop —
+     * the edge by its id, or by its ends either way, since an answer travels
+     * the asker's edge back.
+     */
+    selected?: SelectedEdge | null;
+    /**
+     * An edge was clicked: the page selects its latest exchange
+     * (`latestLineOnEdge`). With it, the edges take the pointer.
+     */
+    onSelectEdge?: (edge: A2ATeamGraphEdge) => void;
 };
-/**
- * The handles an edge leaves and reaches a member by, named: the middle of
- * its character 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";
-};
+/** An edge of the graph, as a click names it: `selectedEdgeOf`'s shape without the selection's key. */
+export type A2ATeamGraphEdge = Omit<SelectedEdge, 'key'>;
+/** Whether a selection is on the edge between two ends: by its id, or by its ends either way. */
+export declare function edgeSelected(selected: SelectedEdge | null | undefined, from: string, to: string): boolean;
 /**
  * The handles for an edge from one place to another: rightward across,
  * leftward across, or down or up when the other member is mostly below or
@@ -200,52 +129,8 @@ export declare function handlesBetween(from: {
     sourceHandle: string;
     targetHandle: string;
 };
-/** How far a member was moved from its place, in the graph's coordinates. */
-export type MemberOffset = {
-    dx: number;
-    dy: number;
-};
-/** 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;
-/** 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;
 /** The words on the edge for a flow. */
 export declare function flowWords(flow: A2ATeamFlow, entry: string, peer: string): 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: {
-    x: number;
-    y: number;
-}, target: {
-    x: number;
-    y: number;
-}, forward: boolean): string;
-type CallData = {
-    /** Which way it carries a call: out with the call, back with its result. */
-    flow: A2ATeamFlow;
-    /** The tool being called, in words (`list invoices`); empty while none is. */
-    calling: string;
-    /** What it says: `MCP`, and what it carries while it carries something. */
-    label: string;
-};
-/**
- * A member's link to a connection, drawn as the A2A link is: still, flowing
- * toward the connection while a call runs, and back with its result.
- */
-export declare const CallEdge: import("react").NamedExoticComponent<EdgeProps<Edge<CallData>>>;
 /** What a link to a connection says at rest, as `A2A` says the members' link. */
 export declare const MCP_LABEL = "MCP";
 /**
@@ -281,5 +166,5 @@ export declare function placeMembers(entryId: string, peerIds: readonly string[]
 /** The one flow the graph reports for all its edges: asking before answering before still. */
 export declare function flowOfAll(flows: readonly A2ATeamFlow[]): A2ATeamFlow;
 /** Draw a team over A2A, each link moving with what travels on it. */
-export declare function A2ATeamGraph({ entry, peer, peers: more, flow, flows, connected, label, labels, links, positions, size, calls, balloonRoom, }: A2ATeamGraphProps): JSX.Element;
+export declare function A2ATeamGraph({ entry, peer, peers: more, flow, flows, connected, label, labels, links, positions, size, calls, balloonRoom, backdrop, selected, onSelectEdge, }: A2ATeamGraphProps): JSX.Element;
 export default A2ATeamGraph;