Agent Flow

1"use client";
2 
3import { motion, useReducedMotion } from "framer-motion";
4import * as React from "react";
5 
6// GodUI motion language (values mirrored inline — see motion/tokens.ts).
7const EASE_OUT = [0.22, 1, 0.36, 1] as const;
8// Length-driven flow is linear (constant speed) so the border trace and the
9// beams never speed up or settle — see EASE.linear in motion/tokens.ts.
10const EASE_LINEAR = [0, 0, 1, 1] as const;
11// Crisp pop for the icon chip — SPRING.snappy in motion/tokens.ts.
12const SPRING_SNAPPY = { type: "spring", stiffness: 520, damping: 32 } as const;
13// Ambient flow speed in px/second (FLOW_SPEED.base). Every length-driven
14// element derives its duration as `length / FLOW_SPEED`, so a card border and
15// the beam that continues from it move at the exact same pace — one flow.
16const FLOW_SPEED = 280;
17 
18export type AgentNodeStatus = "idle" | "running" | "done" | "error";
19 
20export type AgentFlowNode = {
21  id: string;
22  /** Primary label shown on the node. */
23  label: string;
24  /** Secondary label — tool name, model, duration, … */
25  sublabel?: string;
26  /** Consumer-supplied glyph rendered in the icon chip. */
27  icon?: React.ReactNode;
28  status?: AgentNodeStatus;
29  /** Node **center** in canvas units. */
30  x: number;
31  y: number;
32};
33 
34export type AgentFlowEdge = {
35  id: string;
36  /** Source node id. */
37  from: string;
38  /** Target node id. */
39  to: string;
40  /** Animate a data packet along the edge (default `true`). */
41  animated?: boolean;
42  /**
43   * Repeat the packet forever (default `true`). Set `false` to send a single
44   * packet — it travels once and fires `onEdgeArrive` when it lands, which lets
45   * you sequence the graph (light the next node, start the next edge, …).
46   */
47  loop?: boolean;
48  /** Bow of the curve in pixels (positive bends upward). */
49  curvature?: number;
50  /**
51   * Keep the edge lit after its packet passes (default `false`). The line draws
52   * on as the packet travels and then stays lit — the same behaviour as a card's
53   * traced border — so a completed path reads as an established connection.
54   */
55  persist?: boolean;
56};
57 
58export type AgentFlowProps = Omit<
59  React.HTMLAttributes<HTMLDivElement>,
60  "children"
61> & {
62  nodes: AgentFlowNode[];
63  edges: AgentFlowEdge[];
64  /** Allow dragging nodes (default `true`). */
65  draggable?: boolean;
66  /** Allow panning the canvas by dragging the backdrop (default `true`). */
67  pannable?: boolean;
68  /** Seconds for one packet travel (default `3`). */
69// … truncated