@tangle-network/sandbox-ui 0.138.2 → 0.139.1

package/dist/AgentGraph-DL-QLjkw.d.ts

@@ -0,0 +1,132 @@
+import { ReactNode } from "react";
+/**
+ * Where every agent of a multi-agent run sits on the `AgentGraph` canvas.
+ *
+ * Only SPAWN edges shape the layout: they make the run's tree (a manager and
+ * the workers it started). Message and delegation edges are drawn over the
+ * finished layout and never move a card.
+ *
+ * A parent that spawned many workers which spawned nobody would, laid out as a
+ * plain tree, put all of them in one row: sixteen 200px cards side by side is a
+ * 3,000px strip that a 360px pane can only show as specks. Those leaf workers
+ * are packed into a grid inside one frame instead, reached by one edge from
+ * their parent, and the grid's column count is chosen for the canvas it is
+ * shown in ({@link pickAgentLayout}). Workers that spawned workers of their own
+ * stay tree nodes, so the depth of the run is still visible.
+ *
+ * Positions come from ELK's layered algorithm (the optional `elkjs` peer,
+ * shared with `WorkflowGraph` through `loadElk`). Without it, a row-per-depth
+ * layout keeps the graph drawable.
+ */
+type AgentGraphStatus = "running" | "waiting" |
+/** Blocked on a person: drawn amber, named in the header. */
+"needs-you" | "succeeded" | "failed" | "stopped" | "idle" | "unknown";
+interface AgentGraphNode {
+  id: string;
+  /** The agent's name, e.g. "root", "memscale". */
+  label: string;
+  /** What it was started as, e.g. "manager", "v6-battery". */
+  role?: string | null;
+  /** The coding harness it runs in, e.g. "opencode", "claude-code", "codex". */
+  harness?: string | null;
+  /** The model it runs, e.g. "glm-5.3-flash"; its brand mark identifies the card. */
+  model?: string | null;
+  status: AgentGraphStatus;
+  /** What it is doing now, or did last — one line. */
+  turn?: string | null;
+  costUsd?: number | null;
+  tokens?: number | null;
+  /** Live cards: what it is doing now, from its real state; loops the card's figure. */
+  activity?: AgentGraphActivity | null;
+  /** Live cards: its latest tool calls or events, oldest first; the card shows the last three. */
+  events?: readonly AgentGraphEvent[] | null;
+  /** Live cards: the reasoning effort it runs at, e.g. "high". */
+  effort?: string | null;
+  /** Live cards: epoch ms it was spawned, for its time alive. */
+  startedAt?: number | null;
+  /** Live cards: commits it shipped. */
+  commits?: number | null;
+  /** Live cards: a settled agent's result, shown on its chip, e.g. "rc2 · 14 commits". */
+  result?: string | null;
+}
+type AgentGraphActivity = "thinking" | "reading" | "building" | "proving" | "writing" | "waiting" | "restarting";
+interface AgentGraphEvent {
+  id: string;
+  /** One line, e.g. "bash cargo test -p prover". */
+  label: string;
+  at?: number;
+}
+type AgentGraphEdgeKind = "spawn" | "message" | "delegation";
+interface AgentGraphEdge {
+  from: string;
+  to: string;
+  kind: AgentGraphEdgeKind;
+  /** How many times it happened; a badge shows counts above one. */
+  count?: number;
+  label?: string;
+}
+type AgentGraphDirection = "TB" | "LR";
+/** A tool or service an agent calls: drawn as an outer node with its brand mark. */
+interface AgentGraphTool {
+  id: string;
+  label: string;
+  /** Brand id for `ProviderIcon` ("github", "slack", "postgres"…). */
+  provider?: string | null;
+  /** One line under the name in its popover, e.g. "Postgres, read-only". */
+  detail?: string | null;
+}
+type AgentGraphCallKind = "call" | "answer" | "needs-you" | "failed";
+/** One recorded call between two nodes ("you", an agent id or a tool id). */
+interface AgentGraphCall {
+  id: string;
+  from: string;
+  to: string;
+  kind: AgentGraphCallKind;
+  /** What was asked or answered, one line. */
+  label?: string | null;
+  /** Epoch ms. */
+  startedAt: number;
+  /** Absent while it runs. */
+  durationMs?: number | null;
+}
+interface AgentGraphProps {
+  nodes: readonly AgentGraphNode[];
+  /** `spawn` edges shape the tree; `message` and `delegation` edges are drawn
+   *  over it as dashed curves and never move a card. */
+  edges: readonly AgentGraphEdge[];
+  selectedId?: string | null;
+  onSelect?: (id: string) => void;
+  /** Tree direction. Default `TB` (root at the top). */
+  direction?: AgentGraphDirection;
+  /** Sizes the canvas; the graph fills it. Give it a height. */
+  className?: string;
+  /** Shown instead of the canvas when there are no agents. */
+  emptyState?: ReactNode;
+  /**
+   * `tree` (default) lays out a spawn tree of cards for large runs. `hub` draws
+   * the run around its orchestrator: You, the agents, the tools they call, and
+   * each call travelling along its edge in its kind's colour.
+   */
+  layout?: "tree" | "hub";
+  /** Hub layout: the tools and services agents call, drawn as outer nodes. */
+  tools?: readonly AgentGraphTool[];
+  /** Hub layout: recorded calls between nodes, newest last. They colour and animate edges and fill popovers. */
+  calls?: readonly AgentGraphCall[];
+  /** Hub layout: draw the person who asked as "You". */
+  you?: {
+    label?: string;
+    summary?: string;
+  } | boolean;
+  /** Hub layout and live cards: epoch ms to draw at (a replay position); defaults to now, ticking. */
+  now?: number;
+  /** Hub layout: the header title. Default "Agent graph". */
+  title?: ReactNode;
+  /**
+   * Tree layout: live cards for a running run. Each card loops a small figure of the agent's `activity`, shows its
+   * thinking line (`turn`) and last three `events` as they arrive, its model, effort, time alive and commits; a settled
+   * agent shrinks to a chip with its `result`, and a new spawn grows in. Cards keep a fixed size, so updates never move one.
+   */
+  live?: boolean;
+}
+declare function AgentGraph(props: AgentGraphProps): import("react").JSX.Element;
+export { AgentGraphTool as a, AgentGraphEdge as c, AgentGraphNode as d, AgentGraphStatus as f, AgentGraphCallKind as i, AgentGraphEdgeKind as l, AgentGraphProps as n, AgentGraphActivity as o, AgentGraphCall as r, AgentGraphDirection as s, AgentGraph as t, AgentGraphEvent as u };