@tea-agent/loop-agent 0.26.0 → 0.26.2

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

@@ -1,172 +1,248 @@
-/** 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");
+	// Preserve .dag-graph-viewport DOM identity across poll refreshes so the
+	// user's active scroll/pointer target is not destroyed mid-gesture.
+	let viewport =
+		existingWrap?.querySelector?.(":scope > .dag-graph-viewport") ??
+		existingWrap?.querySelector?.(".dag-graph-viewport") ??
+		null;
+	if (existingWrap) {
+		// Remove only non-interactive siblings. Keeping the viewport connected is
+		// important: detaching and re-inserting the same node still cancels a native
+		// scrollbar drag/pointer target even though object identity is unchanged.
+		for (const child of [...wrap.children]) {
+			if (child !== viewport) wrap.removeChild(child);
+		}
+		if (viewport) {
+			while (viewport.firstChild) viewport.removeChild(viewport.firstChild);
+		}
+	}
+	const toolbar = el("div", "dag-graph-toolbar");
+	let summaryText = `${nodes.length} 节点 · ${layout.edges.length} 条依赖`;
+	const convergence = dag.convergence;
+	if (convergence?.enabled) {
+		summaryText += ` · pass ${convergence.currentPass}/${convergence.maxPasses}`;
+		if (convergence.terminalReason) {
+			summaryText += ` · ${convergence.terminalReason}`;
+		}
+	}
+	toolbar.appendChild(el("span", "dag-graph-summary", summaryText));
+	const reset = el("button", "dag-graph-reset", "重置视图");
+	toolbar.appendChild(reset);
+	const appendBeforeViewport = (child) => {
+		if (viewport?.parentNode === wrap) wrap.insertBefore(child, viewport);
+		else wrap.appendChild(child);
+	};
+	appendBeforeViewport(toolbar);
+	if (edges.length === 0) {
+		appendBeforeViewport(
+			el(
+				"p",
+				"dag-graph-fallback",
+				"该运行没有可用依赖数据；图按并行层级展示，节点表格仍保留完整数据。",
+			),
+		);
+	}
+	if (!viewport) {
+		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);
+	const controlMarker = svgEl("marker", {
+		id: "dag-arrow-control",
+		viewBox: "0 0 10 10",
+		refX: 9,
+		refY: 5,
+		markerWidth: 7,
+		markerHeight: 7,
+		orient: "auto-start-reverse",
+	});
+	controlMarker.appendChild(svgEl("path", { d: "M 0 0 L 10 5 L 0 10 z" }));
+	defs.appendChild(controlMarker);
+	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);
+	}
+	// 控制回环：仅由 read model 派生（dag.controlEdges），不进 layout、不参与拓扑。
+	// 路径从 review-gate-shell 左侧绕回 repair-pi 右侧，避开节点矩形。
+	const layoutByNode = new Map(layout.nodes.map((n) => [n.nodeId, n]));
+	for (const ctrl of dag.controlEdges ?? []) {
+		const from = layoutByNode.get(ctrl.from);
+		const to = layoutByNode.get(ctrl.to);
+		if (!from || !to) continue;
+		const x1 = from.x;
+		const y1 = from.y + from.height / 2;
+		const x2 = to.x + to.width;
+		const y2 = to.y + to.height / 2;
+		const lift = Math.max(48, (from.x - to.x) / 2);
+		const rise = Math.max(40, Math.abs(from.y - to.y) / 2 + 16);
+		const path = svgEl("path", {
+			d: `M ${x1} ${y1} C ${x1 - lift} ${y1 - rise}, ${x2 + lift} ${y2 - rise}, ${x2} ${y2}`,
+			class: "dag-edge dag-edge-control",
+			"marker-end": "url(#dag-arrow-control)",
+		});
+		path.appendChild(svgEl("title"));
+		path.firstChild.textContent = `${ctrl.from} → ${ctrl.to} (control loop)`;
+		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" });
+		let stateText = `${statusSymbol(status)} ${statusLabel(node.status)} · ${formatMs(node.durationMs)}`;
+		if (node.passes?.length) {
+			stateText += ` · P${node.passes.join(",")}`;
+		}
+		if (node.attemptCount > 0) {
+			stateText += ` · attempt ${node.attemptCount}`;
+		}
+		state.textContent = stateText;
+		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);
+	if (viewport.parentNode !== wrap) wrap.appendChild(viewport);
+	const graphViewportState =
+		dagGraphViewportStates.get(dagRunId) ??
+		(uiState.dagGraphViewportState?.dagRunId === dagRunId
+			? uiState.dagGraphViewportState
+			: null);
+	// Bind scroll capture once per viewport instance so reuse does not stack listeners.
+	if (viewport.dataset.scrollBound !== "1") {
+		viewport.dataset.scrollBound = "1";
+		viewport.addEventListener(
+			"scroll",
+			() => {
+				const id = viewport.dataset.dagRunId;
+				if (!id) return;
+				uiState.dagGraphViewportState = updateDagGraphViewportState(
+					uiState.dagGraphViewportState,
+					id,
+					viewport.scrollLeft,
+					viewport.scrollTop,
+				);
+				dagGraphViewportStates.set(id, uiState.dagGraphViewportState);
+			},
+			{ passive: true },
+		);
+	}
+	if (graphViewportState) {
+		const restoreViewport = () => {
+			if (viewport.dataset.dagRunId !== dagRunId) return;
+			viewport.scrollLeft = graphViewportState.scrollLeft;
+			viewport.scrollTop = graphViewportState.scrollTop;
+		};
+		// Apply immediately so identity reuse keeps position even before paint,
+		// then again on rAF after SVG layout settles.
+		restoreViewport();
+		if (typeof requestAnimationFrame === "function") {
+			requestAnimationFrame(restoreViewport);
+		}
+	}
+	// Toolbar is rebuilt each paint; bind reset to the current viewport/dagRunId.
+	reset.addEventListener("click", () => {
+		uiState.dagGraphViewportState = updateDagGraphViewportState(
+			uiState.dagGraphViewportState,
+			dagRunId,
+			0,
+			0,
+		);
+		dagGraphViewportStates.set(dagRunId, uiState.dagGraphViewportState);
+		if (typeof viewport.scrollTo === "function") {
+			viewport.scrollTo({ left: 0, top: 0, behavior: "smooth" });
+		} else {
+			viewport.scrollLeft = 0;
+			viewport.scrollTop = 0;
+		}
+	});
+	return wrap;
+}