Cyrene_v2/frontend/web/src/admin/modules/FlowGraph.tsx

import { useId } from "react";
import type { ReactNode } from "react";
import type {
  AgentStatus,
  FlowEdge,
  FlowGraph,
  FlowNode,
} from "../../lib/types";

/** Lightweight SVG directed-graph renderer for a FlowGraph (no graph deps).
 *  Left-to-right layered layout: a node's layer is its longest-path depth from
 *  a root; within a layer nodes are stacked top-down. Edges are cubic beziers
 *  with an arrowhead; node stroke/fill is coded by status. */

const NODE_W = 148;
const NODE_H = 52;
const GAP_X = 64;
const GAP_Y = 30;
const PAD = 20;

interface FlowTone {
  stroke: string;
  fill: string;
  label: string;
}

const flowTone: Record<AgentStatus, FlowTone> = {
  idle: {
    stroke: "var(--mu-surface-5)",
    fill: "color-mix(in srgb, var(--mu-surface-5) 18%, transparent)",
    label: "空闲",
  },
  running: {
    stroke: "var(--mu-accent)",
    fill: "color-mix(in srgb, var(--mu-accent) 18%, transparent)",
    label: "运行中",
  },
  blocked: {
    stroke: "var(--mu-warn)",
    fill: "color-mix(in srgb, var(--mu-warn) 18%, transparent)",
    label: "阻塞",
  },
  done: {
    stroke: "var(--mu-ok)",
    fill: "color-mix(in srgb, var(--mu-ok) 18%, transparent)",
    label: "完成",
  },
  error: {
    stroke: "var(--mu-err)",
    fill: "color-mix(in srgb, var(--mu-err) 18%, transparent)",
    label: "错误",
  },
};

const STATUS_ORDER: ReadonlyArray<AgentStatus> = [
  "idle",
  "running",
  "blocked",
  "done",
  "error",
];

interface PlacedNode {
  node: FlowNode;
  x: number;
  y: number;
  tone: FlowTone;
}

function layout(graph: FlowGraph): {
  placed: PlacedNode[];
  edges: FlowEdge[];
  width: number;
  height: number;
} {
  if (graph.nodes.length === 0) {
    return { placed: [], edges: [], width: PAD * 2, height: PAD * 2 };
  }

  const byId = new Map<string, FlowNode>();
  graph.nodes.forEach((n) => byId.set(n.id, n));

  const preds = new Map<string, string[]>();
  graph.nodes.forEach((n) => preds.set(n.id, []));

  const validEdges: FlowEdge[] = [];
  graph.edges.forEach((e) => {
    if (e.from === e.to) return;
    if (!byId.has(e.from) || !byId.has(e.to)) return;
    preds.get(e.to)!.push(e.from);
    validEdges.push(e);
  });

  const memo = new Map<string, number>();
  const visiting = new Set<string>();
  const depth = (id: string): number => {
    const cached = memo.get(id);
    if (cached !== undefined) return cached;
    if (visiting.has(id)) return 0;
    visiting.add(id);
    let d = 0;
    for (const p of preds.get(id)!) d = Math.max(d, depth(p) + 1);
    visiting.delete(id);
    memo.set(id, d);
    return d;
  };

  const byLayer = new Map<number, string[]>();
  let maxRows = 0;
  graph.nodes.forEach((n) => {
    const l = depth(n.id);
    const arr = byLayer.get(l) ?? [];
    arr.push(n.id);
    byLayer.set(l, arr);
    maxRows = Math.max(maxRows, arr.length);
  });

  const layers = Array.from(byLayer.keys()).sort((a, b) => a - b);
  const pos = new Map<string, { x: number; y: number }>();
  layers.forEach((l, li) => {
    const ids = byLayer.get(l)!;
    ids.forEach((id, ri) =>
      pos.set(id, { x: PAD + li * (NODE_W + GAP_X), y: PAD + ri * (NODE_H + GAP_Y) })
    );
  });

  const width = PAD * 2 + layers.length * NODE_W + (layers.length - 1) * GAP_X;
  const height = PAD * 2 + maxRows * NODE_H + (maxRows - 1) * GAP_Y;

  const placed: PlacedNode[] = graph.nodes.map((n) => {
    const p = pos.get(n.id)!;
    return {
      node: n,
      x: p.x,
      y: p.y,
      tone: flowTone[n.status ?? "idle"] ?? flowTone.idle,
    };
  });

  return { placed, edges: validEdges, width, height };
}

function clampLabel(label: string): string {
  return label.length > 20 ? `${label.slice(0, 19)}…` : label;
}

export function FlowGraphView({
  graph,
  onNodeClick,
}: {
  graph: FlowGraph;
  onNodeClick?: (node: FlowNode) => void;
}): ReactNode {
  const markerId = useId().replace(/[^a-zA-Z0-9]/g, "");
  const { placed, edges, width, height } = layout(graph);

  return (
    <div className="space-y-2">
      <div className="overflow-x-auto rounded-[var(--mu-radius)] border border-[var(--mu-glass-border)] bg-[var(--mu-surface-2)] p-3">
        <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} className="block">
          <defs>
            <marker
              id={markerId}
              viewBox="0 0 10 10"
              refX="9"
              refY="5"
              markerWidth="7"
              markerHeight="7"
              orient="auto-start-reverse"
            >
              <path d="M 0 0 L 10 5 L 0 10 z" fill="var(--mu-text-lo)" />
            </marker>
          </defs>
          {edges.map((e, i) => {
            const s = placed.find((p) => p.node.id === e.from);
            const t = placed.find((p) => p.node.id === e.to);
            if (!s || !t) return null;
            const sx = s.x + NODE_W;
            const sy = s.y + NODE_H / 2;
            const tx = t.x;
            const ty = t.y + NODE_H / 2;
            const dx = Math.max(24, Math.abs(tx - sx) / 2);
            return (
              <path
                key={i}
                d={`M ${sx} ${sy} C ${sx + dx} ${sy}, ${tx - dx} ${ty}, ${tx} ${ty}`}
                fill="none"
                stroke="var(--mu-text-lo)"
                strokeWidth="1.5"
                markerEnd={`url(#${markerId})`}
              />
            );
          })}
          {placed.map((p) => (
            <g
              key={p.node.id}
              onClick={onNodeClick ? () => onNodeClick(p.node) : undefined}
              className={onNodeClick ? "cursor-pointer" : undefined}
            >
              <rect
                x={p.x}
                y={p.y}
                width={NODE_W}
                height={NODE_H}
                rx="12"
                fill={p.tone.fill}
                stroke={p.tone.stroke}
                strokeWidth="1.5"
              />
              {p.node.kind ? (
                <text
                  x={p.x + NODE_W / 2}
                  y={p.y + 20}
                  textAnchor="middle"
                  fontSize="9"
                  fill="var(--mu-text-lo)"
                >
                  {p.node.kind}
                </text>
              ) : null}
              <text
                x={p.x + NODE_W / 2}
                y={p.y + (p.node.kind ? 41 : NODE_H / 2 + 5)}
                textAnchor="middle"
                fontSize="12"
                fontWeight="500"
                fill="var(--mu-text-hi)"
              >
                {clampLabel(p.node.label)}
              </text>
            </g>
          ))}
        </svg>
      </div>
      <div className="flex flex-wrap items-center gap-3 px-1">
        {STATUS_ORDER.map((s) => (
          <span
            key={s}
            className="inline-flex items-center gap-1.5 text-[10px] text-[var(--mu-text-lo)]"
          >
            <span
              className="h-2 w-2 rounded-full"
              style={{ backgroundColor: flowTone[s].stroke }}
            />
            {flowTone[s].label}
          </span>
        ))}
      </div>
    </div>
  );
}