@tea-agent/loop-agent 0.13.0 → 0.14.0

package/dist/worker/observe/static/views/dag-graph.js

@@ -1,172 +1,172 @@
-/** DAG dependency graph rendering (Observe UI R5). */
-import { layoutDag } from "../dag-layout.js";
-import { el } from "../dom.js";
-import {
-	statusLabel,
-	statusSymbol,
-	formatMs,
-	truncateText,
-} from "../format.js";
-import {
-	uiState,
-	dagGraphViewportStates,
-	updateDagGraphViewportState,
-} from "../state.js";
-import { selectDagNode } from "./dag-inspector.js";
-
-export function svgEl(tag, attrs = {}) {
-	const node = document.createElementNS("http://www.w3.org/2000/svg", tag);
-	for (const [key, value] of Object.entries(attrs))
-		node.setAttribute(key, String(value));
-	return node;
-}
-
-export function renderDagGraph(dag, dagRunId, existingWrap = null) {
-	const nodes = dag.nodes ?? [];
-	const edges = dag.edges ?? [];
-	const layout = layoutDag(nodes, edges, dag.ranks ?? []);
-	const wrap = existingWrap ?? el("div", "dag-graph-wrap");
-	if (existingWrap) {
-		// reuse-dag-graph-wrap: replace children while keeping wrap identity.
-		while (wrap.firstChild) wrap.removeChild(wrap.firstChild);
-	}
-	const toolbar = el("div", "dag-graph-toolbar");
-	toolbar.appendChild(
-		el(
-			"span",
-			"dag-graph-summary",
-			`${nodes.length} 节点 · ${layout.edges.length} 条依赖`,
-		),
-	);
-	const reset = el("button", "dag-graph-reset", "重置视图");
-	toolbar.appendChild(reset);
-	wrap.appendChild(toolbar);
-	if (edges.length === 0)
-		wrap.appendChild(
-			el(
-				"p",
-				"dag-graph-fallback",
-				"该运行没有可用依赖数据；图按并行层级展示，节点表格仍保留完整数据。",
-			),
-		);
-	const viewport = el("div", "dag-graph-viewport");
-	viewport.dataset.dagRunId = dagRunId;
-	const svg = svgEl("svg", {
-		class: "dag-graph",
-		viewBox: `0 0 ${layout.width} ${layout.height}`,
-		width: layout.width,
-		height: layout.height,
-		role: "img",
-		"aria-label": `DAG 依赖图，共 ${nodes.length} 个节点`,
-	});
-	const defs = svgEl("defs");
-	const marker = svgEl("marker", {
-		id: "dag-arrow",
-		viewBox: "0 0 10 10",
-		refX: 9,
-		refY: 5,
-		markerWidth: 7,
-		markerHeight: 7,
-		orient: "auto-start-reverse",
-	});
-	marker.appendChild(svgEl("path", { d: "M 0 0 L 10 5 L 0 10 z" }));
-	defs.appendChild(marker);
-	svg.appendChild(defs);
-	const related = new Set([uiState.selectedDagNodeId]);
-	for (const edge of layout.edges)
-		if (
-			edge.from === uiState.selectedDagNodeId ||
-			edge.to === uiState.selectedDagNodeId
-		) {
-			related.add(edge.from);
-			related.add(edge.to);
-		}
-	for (const edge of layout.edges) {
-		const path = svgEl("path", {
-			d: edge.path,
-			class: `dag-edge${uiState.selectedDagNodeId && (!related.has(edge.from) || !related.has(edge.to)) ? " dag-dimmed" : ""}`,
-			"marker-end": "url(#dag-arrow)",
-		});
-		path.appendChild(svgEl("title"));
-		path.firstChild.textContent = `${edge.from} → ${edge.to}`;
-		svg.appendChild(path);
-	}
-	const byId = Object.fromEntries(nodes.map((node) => [node.nodeId, node]));
-	for (const position of layout.nodes) {
-		const node = byId[position.nodeId] ?? { nodeId: position.nodeId };
-		const status = (node.status ?? "unknown").toLowerCase();
-		const group = svgEl("g", {
-			transform: `translate(${position.x} ${position.y})`,
-			class: `dag-graph-node status-${status}${node.nodeId === uiState.selectedDagNodeId ? " selected" : ""}${uiState.selectedDagNodeId && !related.has(node.nodeId) ? " dag-dimmed" : ""}`,
-			tabindex: 0,
-			role: "button",
-			"aria-label": `${node.nodeId}，状态 ${status}`,
-		});
-		group.appendChild(
-			svgEl("rect", { width: position.width, height: position.height, rx: 10 }),
-		);
-		const title = svgEl("title");
-		title.textContent = `${node.nodeId}\n${node.executor ?? "未知执行器"}\n${status}`;
-		group.appendChild(title);
-		const label = svgEl("text", { x: 14, y: 26, class: "dag-node-label" });
-		label.textContent = truncateText(node.label ?? node.nodeId, 26);
-		group.appendChild(label);
-		const executor = svgEl("text", { x: 14, y: 50, class: "dag-node-meta" });
-		executor.textContent = `◈ ${node.executor ?? "unknown"}`;
-		group.appendChild(executor);
-		const state = svgEl("text", { x: 14, y: 74, class: "dag-node-status" });
-		state.textContent = `${statusSymbol(status)} ${statusLabel(node.status)} · ${formatMs(node.durationMs)}`;
-		group.appendChild(state);
-		const activate = () => selectDagNode(dagRunId, node.nodeId);
-		group.addEventListener("click", activate);
-		group.addEventListener("keydown", (event) => {
-			if (event.key === "Enter" || event.key === " ") {
-				event.preventDefault();
-				activate();
-			}
-		});
-		svg.appendChild(group);
-	}
-	viewport.appendChild(svg);
-	wrap.appendChild(viewport);
-	const graphViewportState =
-		dagGraphViewportStates.get(dagRunId) ??
-		(uiState.dagGraphViewportState?.dagRunId === dagRunId
-			? uiState.dagGraphViewportState
-			: null);
-	viewport.addEventListener(
-		"scroll",
-		() => {
-			uiState.dagGraphViewportState = updateDagGraphViewportState(
-				uiState.dagGraphViewportState,
-				dagRunId,
-				viewport.scrollLeft,
-				viewport.scrollTop,
-			);
-			dagGraphViewportStates.set(dagRunId, uiState.dagGraphViewportState);
-		},
-		{ passive: true },
-	);
-	if (graphViewportState) {
-		const restoreViewport = () => {
-			viewport.scrollLeft = graphViewportState.scrollLeft;
-			viewport.scrollTop = graphViewportState.scrollTop;
-		};
-		if (typeof requestAnimationFrame === "function") {
-			requestAnimationFrame(restoreViewport);
-		} else {
-			restoreViewport();
-		}
-	}
-	reset.addEventListener("click", () => {
-		uiState.dagGraphViewportState = updateDagGraphViewportState(
-			uiState.dagGraphViewportState,
-			dagRunId,
-			0,
-			0,
-		);
-		dagGraphViewportStates.set(dagRunId, uiState.dagGraphViewportState);
-		viewport.scrollTo({ left: 0, top: 0, behavior: "smooth" });
-	});
-	return wrap;
-}
+/** DAG dependency graph rendering (Observe UI R5). */
+import { layoutDag } from "../dag-layout.js";
+import { el } from "../dom.js";
+import {
+	statusLabel,
+	statusSymbol,
+	formatMs,
+	truncateText,
+} from "../format.js";
+import {
+	uiState,
+	dagGraphViewportStates,
+	updateDagGraphViewportState,
+} from "../state.js";
+import { selectDagNode } from "./dag-inspector.js";
+
+export function svgEl(tag, attrs = {}) {
+	const node = document.createElementNS("http://www.w3.org/2000/svg", tag);
+	for (const [key, value] of Object.entries(attrs))
+		node.setAttribute(key, String(value));
+	return node;
+}
+
+export function renderDagGraph(dag, dagRunId, existingWrap = null) {
+	const nodes = dag.nodes ?? [];
+	const edges = dag.edges ?? [];
+	const layout = layoutDag(nodes, edges, dag.ranks ?? []);
+	const wrap = existingWrap ?? el("div", "dag-graph-wrap");
+	if (existingWrap) {
+		// reuse-dag-graph-wrap: replace children while keeping wrap identity.
+		while (wrap.firstChild) wrap.removeChild(wrap.firstChild);
+	}
+	const toolbar = el("div", "dag-graph-toolbar");
+	toolbar.appendChild(
+		el(
+			"span",
+			"dag-graph-summary",
+			`${nodes.length} 节点 · ${layout.edges.length} 条依赖`,
+		),
+	);
+	const reset = el("button", "dag-graph-reset", "重置视图");
+	toolbar.appendChild(reset);
+	wrap.appendChild(toolbar);
+	if (edges.length === 0)
+		wrap.appendChild(
+			el(
+				"p",
+				"dag-graph-fallback",
+				"该运行没有可用依赖数据；图按并行层级展示，节点表格仍保留完整数据。",
+			),
+		);
+	const viewport = el("div", "dag-graph-viewport");
+	viewport.dataset.dagRunId = dagRunId;
+	const svg = svgEl("svg", {
+		class: "dag-graph",
+		viewBox: `0 0 ${layout.width} ${layout.height}`,
+		width: layout.width,
+		height: layout.height,
+		role: "img",
+		"aria-label": `DAG 依赖图，共 ${nodes.length} 个节点`,
+	});
+	const defs = svgEl("defs");
+	const marker = svgEl("marker", {
+		id: "dag-arrow",
+		viewBox: "0 0 10 10",
+		refX: 9,
+		refY: 5,
+		markerWidth: 7,
+		markerHeight: 7,
+		orient: "auto-start-reverse",
+	});
+	marker.appendChild(svgEl("path", { d: "M 0 0 L 10 5 L 0 10 z" }));
+	defs.appendChild(marker);
+	svg.appendChild(defs);
+	const related = new Set([uiState.selectedDagNodeId]);
+	for (const edge of layout.edges)
+		if (
+			edge.from === uiState.selectedDagNodeId ||
+			edge.to === uiState.selectedDagNodeId
+		) {
+			related.add(edge.from);
+			related.add(edge.to);
+		}
+	for (const edge of layout.edges) {
+		const path = svgEl("path", {
+			d: edge.path,
+			class: `dag-edge${uiState.selectedDagNodeId && (!related.has(edge.from) || !related.has(edge.to)) ? " dag-dimmed" : ""}`,
+			"marker-end": "url(#dag-arrow)",
+		});
+		path.appendChild(svgEl("title"));
+		path.firstChild.textContent = `${edge.from} → ${edge.to}`;
+		svg.appendChild(path);
+	}
+	const byId = Object.fromEntries(nodes.map((node) => [node.nodeId, node]));
+	for (const position of layout.nodes) {
+		const node = byId[position.nodeId] ?? { nodeId: position.nodeId };
+		const status = (node.status ?? "unknown").toLowerCase();
+		const group = svgEl("g", {
+			transform: `translate(${position.x} ${position.y})`,
+			class: `dag-graph-node status-${status}${node.nodeId === uiState.selectedDagNodeId ? " selected" : ""}${uiState.selectedDagNodeId && !related.has(node.nodeId) ? " dag-dimmed" : ""}`,
+			tabindex: 0,
+			role: "button",
+			"aria-label": `${node.nodeId}，状态 ${status}`,
+		});
+		group.appendChild(
+			svgEl("rect", { width: position.width, height: position.height, rx: 10 }),
+		);
+		const title = svgEl("title");
+		title.textContent = `${node.nodeId}\n${node.executor ?? "未知执行器"}\n${status}`;
+		group.appendChild(title);
+		const label = svgEl("text", { x: 14, y: 26, class: "dag-node-label" });
+		label.textContent = truncateText(node.label ?? node.nodeId, 26);
+		group.appendChild(label);
+		const executor = svgEl("text", { x: 14, y: 50, class: "dag-node-meta" });
+		executor.textContent = `◈ ${node.executor ?? "unknown"}`;
+		group.appendChild(executor);
+		const state = svgEl("text", { x: 14, y: 74, class: "dag-node-status" });
+		state.textContent = `${statusSymbol(status)} ${statusLabel(node.status)} · ${formatMs(node.durationMs)}`;
+		group.appendChild(state);
+		const activate = () => selectDagNode(dagRunId, node.nodeId);
+		group.addEventListener("click", activate);
+		group.addEventListener("keydown", (event) => {
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				activate();
+			}
+		});
+		svg.appendChild(group);
+	}
+	viewport.appendChild(svg);
+	wrap.appendChild(viewport);
+	const graphViewportState =
+		dagGraphViewportStates.get(dagRunId) ??
+		(uiState.dagGraphViewportState?.dagRunId === dagRunId
+			? uiState.dagGraphViewportState
+			: null);
+	viewport.addEventListener(
+		"scroll",
+		() => {
+			uiState.dagGraphViewportState = updateDagGraphViewportState(
+				uiState.dagGraphViewportState,
+				dagRunId,
+				viewport.scrollLeft,
+				viewport.scrollTop,
+			);
+			dagGraphViewportStates.set(dagRunId, uiState.dagGraphViewportState);
+		},
+		{ passive: true },
+	);
+	if (graphViewportState) {
+		const restoreViewport = () => {
+			viewport.scrollLeft = graphViewportState.scrollLeft;
+			viewport.scrollTop = graphViewportState.scrollTop;
+		};
+		if (typeof requestAnimationFrame === "function") {
+			requestAnimationFrame(restoreViewport);
+		} else {
+			restoreViewport();
+		}
+	}
+	reset.addEventListener("click", () => {
+		uiState.dagGraphViewportState = updateDagGraphViewportState(
+			uiState.dagGraphViewportState,
+			dagRunId,
+			0,
+			0,
+		);
+		dagGraphViewportStates.set(dagRunId, uiState.dagGraphViewportState);
+		viewport.scrollTo({ left: 0, top: 0, behavior: "smooth" });
+	});
+	return wrap;
+}