@tea-agent/loop-agent 0.13.0-beta.0 → 0.13.0

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

@@ -1,362 +1,371 @@
-/** Observe UI view module (R5). */
-import {
-	UI_TEXT,
-	LIVENESS_LABELS,
-	ARTIFACT_LABELS,
-	ARTIFACT_KEYS,
-	STEP_LABELS,
-	STEP_ORDER,
-	DAG_INSPECTOR_DEFAULT_WIDTH,
-	DAG_INSPECTOR_MIN_WIDTH,
-	DAG_INSPECTOR_MAX_WIDTH,
-	DAG_INSPECTOR_RIGHT_OFFSET,
-	DAG_INSPECTOR_VIEWPORT_MARGIN,
-	DAG_INSPECTOR_KEYBOARD_STEP,
-	TERMINAL_RUN_STATUSES,
-	DAG_EFFECTIVE_STATUS_LABELS,
-	STATUS_LABELS,
-} from "../constants.js";
-import { clearNode, el, metaGrid, buildTable } from "../dom.js";
-import {
-	badge,
-	badgeClass,
-	statusLabel,
-	formatTs,
-	formatMs,
-	formatDuration,
-	formatAgo,
-	dagStatusBadge,
-	livenessBadge,
-	displayDurationMs,
-	derivedDurationMs,
-	summaryText,
-	truncateText,
-	repoBaseName,
-	parseMarkdownBlocks,
-	markdownLinkHref,
-} from "../format.js";
-import { parseRoute, navigate, buildHashPath } from "../router.js";
-import {
-	fetchJson,
-	artifactUrl,
-	parseArtifactPreviewResponse,
-} from "../api.js";
-import {
-	objectRouteLink,
-	findFeatureInSnapshot,
-	featureLookupState,
-	buildObjectRelations,
-	renderObjectRelationBar,
-} from "../relations.js";
-import { copyText, renderRecommendedCommand } from "../copy.js";
-import {
-	isPageVisible,
-	detailPollDelay,
-	dashboardPollDelay,
-	captureDagGraphViewportState,
-	updateDagGraphViewportState,
-	updateDagTimelineViewportState,
-	shouldReuseDagDetailShell,
-	shouldPreserveDiagnosticsOpen,
-	renderViewState,
-	mountViewState,
-} from "../state.js";
-import { uiState, dagGraphViewportStates } from "../state.js";
-import { sortPoolTasks } from "../format-pool.js";
-import {
-	dagMetaVisibility,
-	isDagRunActive,
-	dashboardVisibleFeatures,
-	findDagForRun,
-} from "../dag-model.js";
-import { layoutDag } from "../dag-layout.js";
-import {
-	showView,
-	setBreadcrumb,
-	updateHeaderRefresh,
-	mountRelationBar,
-} from "../shell-chrome.js";
-import {
-	dagProgress,
-	isNodeFailed,
-	isNodeFinished,
-	isNodeActive,
-	renderRankLanes,
-} from "../dag-helpers.js";
-import { findBatchRunIdForTask } from "../run-processing.js";
-import { renderDagGraph } from "./dag-graph.js";
-import {
-	closeDagInspector,
-	selectDagNode,
-	renderDagInspector,
-} from "./dag-inspector.js";
-import { mergeSessionEvents } from "./session-timeline.js";
-
-export async function renderDagDetail(dagRunId, initial = true) {
-	showView("dag");
-	setBreadcrumb([
-		{ label: UI_TEXT.dashboard, href: "#/" },
-		{ label: dagRunId },
-	]);
-
-	if (initial || uiState.currentDagRunId !== dagRunId) {
-		uiState.currentDagRunId = dagRunId;
-		uiState.selectedDagNodeId = null;
-		uiState.sessionEventOffset = 0;
-		uiState.sessionEvents = [];
-		uiState.dagInspectorOpen = false;
-		uiState.dagInspectorTab = "output";
-		uiState.dagGraphViewportState = null;
-		uiState.dagTimelineViewportState = null;
-	}
-
-	const metaEl = document.getElementById("dag-meta");
-	const ranksEl = document.getElementById("dag-ranks");
-	const nodesEl = document.getElementById("dag-nodes");
-	if (initial && metaEl) mountViewState(metaEl, "loading", "加载 DAG…");
-	uiState.dagGraphViewportState = captureDagGraphViewportState(
-		uiState.dagGraphViewportState,
-		dagRunId,
-		ranksEl.querySelector(".dag-graph-viewport"),
-	);
-	if (uiState.dagGraphViewportState?.dagRunId === dagRunId) {
-		dagGraphViewportStates.set(dagRunId, uiState.dagGraphViewportState);
-	}
-
-	const [dag, snapshot] = await Promise.all([
-		fetchJson(`/api/dag-runs/${encodeURIComponent(dagRunId)}`),
-		fetchJson("/api/snapshot"),
-	]);
-	if (snapshot) {
-		uiState.lastSnapshot = snapshot;
-		updateHeaderRefresh(snapshot.generatedAt);
-	}
-	if (!dag) {
-		clearNode(metaEl);
-		mountViewState(metaEl, "error", "找不到该 DAG 运行。");
-		mountRelationBar("dag-relations", {}, snapshot);
-		closeDagInspector();
-		return false;
-	}
-
-	// Only link feature/task when a snapshot object carries this dagRunId (no naming guess).
-	const snap = snapshot ?? uiState.lastSnapshot;
-	const linkedTask = (snap?.tasks ?? []).find(
-		(t) => t.dagRunId === dag.dagRunId,
-	);
-	mountRelationBar(
-		"dag-relations",
-		{
-			featureId: linkedTask?.featureId,
-			taskId: linkedTask?.taskId,
-			batchRunId:
-				linkedTask?.batchRunId ??
-				(linkedTask ? findBatchRunIdForTask(snap, linkedTask) : undefined),
-			workerRunId: linkedTask?.workerRunId,
-			dagRunId: dag.dagRunId,
-		},
-		snap,
-	);
-
-	const nodes = dag.nodes ?? [];
-	if (
-		uiState.selectedDagNodeId &&
-		!nodes.some((n) => n.nodeId === uiState.selectedDagNodeId)
-	) {
-		uiState.selectedDagNodeId = null;
-		uiState.dagInspectorOpen = false;
-		if (initial) {
-			uiState.sessionEventOffset = 0;
-			uiState.sessionEvents = [];
-		}
-	}
-
-	const progress = dagProgress(dag);
-	const failedCount = nodes.filter((n) => isNodeFailed(n.status)).length;
-	const skippedCount = nodes.filter(
-		(n) => (n.status ?? "").toLowerCase() === "skipped",
-	).length;
-	const succeededCount = nodes.filter(
-		(n) => isNodeFinished(n.status) && !isNodeFailed(n.status),
-	).length;
-
-	// reuse-dag-detail-shell: on a poll refresh (non-initial) we keep the
-	// interactive DOM identity stable so active scroll/resize gestures and the
-	// diagnostics <details> open state survive the redraw. Initial paints and
-	// DAG-run switches rebuild everything from scratch as before.
-	const existingGraphWrap =
-		ranksEl.querySelector(":scope > .dag-graph-wrap") ?? null;
-	const existingViewport =
-		existingGraphWrap?.querySelector(":scope > .dag-graph-viewport") ?? null;
-	const existingDetails =
-		metaEl.querySelector("details.meta-diagnostics") ?? null;
-	const reuseShell = shouldReuseDagDetailShell(
-		initial,
-		Boolean(existingViewport),
-	);
-	const preserveDetailsOpen = shouldPreserveDiagnosticsOpen(
-		initial,
-		Boolean(existingDetails?.open),
-	);
-
-	const visibility = dagMetaVisibility(dag);
-	const livenessValue =
-		LIVENESS_LABELS[dag.liveness] ?? dag.liveness ?? LIVENESS_LABELS.unknown;
-	const primaryEntries = [
-		["标题", dag.title || dag.dagRunId],
-		["DAG 运行 ID", dag.dagRunId],
-		["状态", dagStatusBadge(dag.effectiveStatus ?? dag.status)],
-	];
-	if (visibility.showExecutorStatus)
-		primaryEntries.push(["执行器状态", livenessValue]);
-	if (visibility.showConsistencyWarning)
-		primaryEntries.push(["状态一致性", "不一致，需要处理"]);
-	if (visibility.showResume) primaryEntries.push(["允许恢复", "是"]);
-	if (visibility.showReconcile) primaryEntries.push(["允许收口", "是"]);
-	primaryEntries.push(
-		["开始时间", formatTs(dag.startedAt)],
-		["结束时间", formatTs(dag.finishedAt)],
-		["总耗时", formatDuration(dag.durationMs)],
-		["进度", `${progress.finished}/${progress.total}`],
-		["成功/失败/跳过", `${succeededCount}/${failedCount}/${skippedCount}`],
-		["DAG 路径", dag.dagPath ?? "—"],
-	);
-	const primaryGrid = metaGrid(primaryEntries);
-	const diagnosticGrid = metaGrid([
-		["当前判定", dagStatusBadge(dag.effectiveStatus ?? dag.status)],
-		["原始记录状态", badge(dag.status)],
-		["执行器状态", livenessValue],
-		["生命周期", dag.lifecycle ?? "—"],
-		[
-			"状态一致性",
-			visibility.showConsistencyWarning ? "不一致，需要处理" : "一致",
-		],
-		["允许恢复", visibility.showResume ? "是" : "否"],
-		["允许收口", visibility.showReconcile ? "是" : "否"],
-	]);
-	if (!initial && existingDetails?.parentNode === metaEl) {
-		const existingPrimary = metaEl.querySelector(":scope > .meta-grid");
-		if (existingPrimary) metaEl.replaceChild(primaryGrid, existingPrimary);
-		else metaEl.insertBefore(primaryGrid, existingDetails);
-		const existingDiagnosticGrid = existingDetails.querySelector(
-			":scope > .meta-grid",
-		);
-		if (existingDiagnosticGrid) {
-			existingDetails.replaceChild(diagnosticGrid, existingDiagnosticGrid);
-		} else {
-			existingDetails.appendChild(diagnosticGrid);
-		}
-		existingDetails.open = preserveDetailsOpen;
-	} else {
-		clearNode(metaEl);
-		metaEl.appendChild(primaryGrid);
-		const details = el("details", "meta-diagnostics");
-		details.appendChild(el("summary", null, "诊断信息"));
-		details.appendChild(diagnosticGrid);
-		metaEl.appendChild(details);
-	}
-
-	const graphGestureActive = document.body.classList.contains(
-		"is-resizing-dag-graph",
-	);
-	if (nodes.length === 0) {
-		clearNode(ranksEl);
-		ranksEl.appendChild(el("h3", null, "DAG 依赖图"));
-		ranksEl.appendChild(el("p", "empty", UI_TEXT.noNodes));
-	} else if (reuseShell && existingGraphWrap?.parentNode === ranksEl) {
-		// reuse-dag-graph-wrap: keep wrap identity across polls when possible.
-		if (!graphGestureActive) {
-			renderDagGraph(dag, dagRunId, existingGraphWrap);
-		}
-	} else {
-		clearNode(ranksEl);
-		ranksEl.appendChild(el("h3", null, "DAG 依赖图"));
-		ranksEl.appendChild(renderDagGraph(dag, dagRunId, null));
-		ranksEl.appendChild(renderRankLanes(dag));
-	}
-
-	const nodesScrollLeft = nodesEl.scrollLeft;
-	clearNode(nodesEl);
-	const nodeHeading = el("div", "dag-section-heading");
-	nodeHeading.appendChild(el("h3", null, "节点"));
-	nodeHeading.appendChild(
-		el("span", "dag-section-meta", `共 ${nodes.length} 个节点`),
-	);
-	nodesEl.appendChild(nodeHeading);
-
-	if (nodes.length === 0) {
-		mountViewState(nodesEl, "empty", UI_TEXT.noNodes);
-	} else {
-		const sortedNodes = [...nodes].sort((a, b) => {
-			const ra = Number(a.rank);
-			const rb = Number(b.rank);
-			if (!Number.isNaN(ra) && !Number.isNaN(rb) && ra !== rb) return ra - rb;
-			if (a.rank !== b.rank) return (a.rank ?? "").localeCompare(b.rank ?? "");
-			return a.nodeId.localeCompare(b.nodeId);
-		});
-
-		const rows = sortedNodes.map((node) => {
-			const active = isNodeActive(node.status);
-			const failed = isNodeFailed(node.status);
-			let className = "";
-			if (active) className = "dag-active-node";
-			if (failed) className = "dag-error-node";
-			if (node.nodeId === uiState.selectedDagNodeId) {
-				className = className
-					? `${className} dag-node-selected`
-					: "dag-node-selected";
-			}
-			return {
-				className,
-				onClick: () => selectDagNode(dagRunId, node.nodeId),
-				cells: [
-					node.nodeId,
-					node.rank ?? "—",
-					node.executor ?? "—",
-					node.model ?? "—",
-					node.status ? badge(node.status) : "—",
-					formatMs(node.durationMs),
-					node.errorPreview ?? node.label ?? "—",
-				],
-			};
-		});
-		const nodeTable = buildTable(
-			["节点 ID", "依赖层", "执行方式", "模型", "状态", "耗时", "备注"],
-			rows,
-		);
-		nodeTable.classList.add("dag-node-table");
-		for (const row of nodeTable.tBodies[0]?.rows ?? []) {
-			for (const columnIndex of [0, 3, 6]) {
-				const cell = row.cells[columnIndex];
-				if (cell?.textContent) cell.title = cell.textContent;
-			}
-		}
-		nodesEl.appendChild(nodeTable);
-	}
-	nodesEl.scrollLeft = nodesScrollLeft;
-
-	if (uiState.dagInspectorOpen && uiState.selectedDagNodeId) {
-		await mergeSessionEvents(dagRunId, uiState.selectedDagNodeId);
-	}
-	renderDagInspector(
-		dagRunId,
-		nodes.find((node) => node.nodeId === uiState.selectedDagNodeId),
-		initial,
-	);
-	return isDagRunActive(dag);
-}
-
-export function startDagPolling(dagRunId, initial = true) {
-	if (uiState.dagPollTimer) clearTimeout(uiState.dagPollTimer);
-	const generation = ++uiState.pollingGeneration;
-	const poll = async (isInitial) => {
-		const active = await renderDagDetail(dagRunId, isInitial);
-		if (generation !== uiState.pollingGeneration || !active) return;
-		const delay = detailPollDelay("running", isPageVisible());
-		uiState.dagPollTimer = setTimeout(() => {
-			uiState.dagPollTimer = null;
-			void poll(false);
-		}, delay);
-	};
-	void poll(initial);
-}
+/** Observe UI view module (R5). */
+import {
+	UI_TEXT,
+	LIVENESS_LABELS,
+	ARTIFACT_LABELS,
+	ARTIFACT_KEYS,
+	STEP_LABELS,
+	STEP_ORDER,
+	DAG_INSPECTOR_DEFAULT_WIDTH,
+	DAG_INSPECTOR_MIN_WIDTH,
+	DAG_INSPECTOR_MAX_WIDTH,
+	DAG_INSPECTOR_RIGHT_OFFSET,
+	DAG_INSPECTOR_VIEWPORT_MARGIN,
+	DAG_INSPECTOR_KEYBOARD_STEP,
+	TERMINAL_RUN_STATUSES,
+	DAG_EFFECTIVE_STATUS_LABELS,
+	STATUS_LABELS,
+} from "../constants.js";
+import { clearNode, el, metaGrid, buildTable } from "../dom.js";
+import {
+	badge,
+	badgeClass,
+	statusLabel,
+	formatTs,
+	formatMs,
+	formatDuration,
+	formatAgo,
+	dagStatusBadge,
+	livenessBadge,
+	displayDurationMs,
+	derivedDurationMs,
+	summaryText,
+	truncateText,
+	repoBaseName,
+	parseMarkdownBlocks,
+	markdownLinkHref,
+} from "../format.js";
+import { parseRoute, navigate, buildHashPath } from "../router.js";
+import {
+	fetchJson,
+	artifactUrl,
+	parseArtifactPreviewResponse,
+} from "../api.js";
+import {
+	objectRouteLink,
+	findFeatureInSnapshot,
+	featureLookupState,
+	buildObjectRelations,
+	renderObjectRelationBar,
+} from "../relations.js";
+import { copyText, renderRecommendedCommand } from "../copy.js";
+import {
+	isPageVisible,
+	detailPollDelay,
+	dashboardPollDelay,
+	captureDagGraphViewportState,
+	updateDagGraphViewportState,
+	updateDagTimelineViewportState,
+	shouldReuseDagDetailShell,
+	shouldPreserveDiagnosticsOpen,
+	renderViewState,
+	mountViewState,
+	makeSessionEventIdentity,
+} from "../state.js";
+import { uiState, dagGraphViewportStates } from "../state.js";
+import { sortPoolTasks } from "../format-pool.js";
+import {
+	dagMetaVisibility,
+	isDagRunActive,
+	dashboardVisibleFeatures,
+	findDagForRun,
+} from "../dag-model.js";
+import { layoutDag } from "../dag-layout.js";
+import {
+	showView,
+	setBreadcrumb,
+	updateHeaderRefresh,
+	mountRelationBar,
+} from "../shell-chrome.js";
+import {
+	dagProgress,
+	isNodeFailed,
+	isNodeFinished,
+	isNodeActive,
+	renderRankLanes,
+} from "../dag-helpers.js";
+import { findBatchRunIdForTask } from "../run-processing.js";
+import { renderDagGraph } from "./dag-graph.js";
+import {
+	closeDagInspector,
+	selectDagNode,
+	renderDagInspector,
+} from "./dag-inspector.js";
+import { mergeSessionEvents } from "./session-timeline.js";
+
+export async function renderDagDetail(dagRunId, initial = true) {
+	showView("dag");
+	setBreadcrumb([
+		{ label: UI_TEXT.dashboard, href: "#/" },
+		{ label: dagRunId },
+	]);
+
+	if (initial || uiState.currentDagRunId !== dagRunId) {
+		uiState.currentDagRunId = dagRunId;
+		uiState.selectedDagNodeId = null;
+		uiState.sessionEventOffset = 0;
+		uiState.sessionEvents = [];
+		uiState.sessionEventIdentity = null;
+		uiState.dagInspectorOpen = false;
+		uiState.dagInspectorTab = "output";
+		uiState.dagGraphViewportState = null;
+		uiState.dagTimelineViewportState = null;
+	}
+
+	const metaEl = document.getElementById("dag-meta");
+	const ranksEl = document.getElementById("dag-ranks");
+	const nodesEl = document.getElementById("dag-nodes");
+	if (initial && metaEl) mountViewState(metaEl, "loading", "加载 DAG…");
+	uiState.dagGraphViewportState = captureDagGraphViewportState(
+		uiState.dagGraphViewportState,
+		dagRunId,
+		ranksEl.querySelector(".dag-graph-viewport"),
+	);
+	if (uiState.dagGraphViewportState?.dagRunId === dagRunId) {
+		dagGraphViewportStates.set(dagRunId, uiState.dagGraphViewportState);
+	}
+
+	const [dag, snapshot] = await Promise.all([
+		fetchJson(`/api/dag-runs/${encodeURIComponent(dagRunId)}`),
+		fetchJson("/api/snapshot"),
+	]);
+	if (snapshot) {
+		uiState.lastSnapshot = snapshot;
+		updateHeaderRefresh(snapshot.generatedAt);
+	}
+	if (!dag) {
+		clearNode(metaEl);
+		mountViewState(metaEl, "error", "找不到该 DAG 运行。");
+		mountRelationBar("dag-relations", {}, snapshot);
+		closeDagInspector();
+		return false;
+	}
+
+	// Only link feature/task when a snapshot object carries this dagRunId (no naming guess).
+	const snap = snapshot ?? uiState.lastSnapshot;
+	const linkedTask = (snap?.tasks ?? []).find(
+		(t) => t.dagRunId === dag.dagRunId,
+	);
+	mountRelationBar(
+		"dag-relations",
+		{
+			featureId: linkedTask?.featureId,
+			taskId: linkedTask?.taskId,
+			batchRunId:
+				linkedTask?.batchRunId ??
+				(linkedTask ? findBatchRunIdForTask(snap, linkedTask) : undefined),
+			workerRunId: linkedTask?.workerRunId,
+			dagRunId: dag.dagRunId,
+		},
+		snap,
+	);
+
+	const nodes = dag.nodes ?? [];
+	if (
+		uiState.selectedDagNodeId &&
+		!nodes.some((n) => n.nodeId === uiState.selectedDagNodeId)
+	) {
+		uiState.selectedDagNodeId = null;
+		uiState.dagInspectorOpen = false;
+		if (initial) {
+			uiState.sessionEventOffset = 0;
+			uiState.sessionEvents = [];
+			uiState.sessionEventIdentity = null;
+		}
+	}
+
+	const progress = dagProgress(dag);
+	const failedCount = nodes.filter((n) => isNodeFailed(n.status)).length;
+	const skippedCount = nodes.filter(
+		(n) => (n.status ?? "").toLowerCase() === "skipped",
+	).length;
+	const succeededCount = nodes.filter(
+		(n) => isNodeFinished(n.status) && !isNodeFailed(n.status),
+	).length;
+
+	// reuse-dag-detail-shell: on a poll refresh (non-initial) we keep the
+	// interactive DOM identity stable so active scroll/resize gestures and the
+	// diagnostics <details> open state survive the redraw. Initial paints and
+	// DAG-run switches rebuild everything from scratch as before.
+	const existingGraphWrap =
+		ranksEl.querySelector(":scope > .dag-graph-wrap") ?? null;
+	const existingViewport =
+		existingGraphWrap?.querySelector(":scope > .dag-graph-viewport") ?? null;
+	const existingDetails =
+		metaEl.querySelector("details.meta-diagnostics") ?? null;
+	const reuseShell = shouldReuseDagDetailShell(
+		initial,
+		Boolean(existingViewport),
+	);
+	const preserveDetailsOpen = shouldPreserveDiagnosticsOpen(
+		initial,
+		Boolean(existingDetails?.open),
+	);
+
+	const visibility = dagMetaVisibility(dag);
+	const livenessValue =
+		LIVENESS_LABELS[dag.liveness] ?? dag.liveness ?? LIVENESS_LABELS.unknown;
+	const primaryEntries = [
+		["标题", dag.title || dag.dagRunId],
+		["DAG 运行 ID", dag.dagRunId],
+		["状态", dagStatusBadge(dag.effectiveStatus ?? dag.status)],
+	];
+	if (visibility.showExecutorStatus)
+		primaryEntries.push(["执行器状态", livenessValue]);
+	if (visibility.showConsistencyWarning)
+		primaryEntries.push(["状态一致性", "不一致，需要处理"]);
+	if (visibility.showResume) primaryEntries.push(["允许恢复", "是"]);
+	if (visibility.showReconcile) primaryEntries.push(["允许收口", "是"]);
+	primaryEntries.push(
+		["开始时间", formatTs(dag.startedAt)],
+		["结束时间", formatTs(dag.finishedAt)],
+		["总耗时", formatDuration(dag.durationMs)],
+		["进度", `${progress.finished}/${progress.total}`],
+		["成功/失败/跳过", `${succeededCount}/${failedCount}/${skippedCount}`],
+		["DAG 路径", dag.dagPath ?? "—"],
+	);
+	const primaryGrid = metaGrid(primaryEntries);
+	const diagnosticGrid = metaGrid([
+		["当前判定", dagStatusBadge(dag.effectiveStatus ?? dag.status)],
+		["原始记录状态", badge(dag.status)],
+		["执行器状态", livenessValue],
+		["生命周期", dag.lifecycle ?? "—"],
+		[
+			"状态一致性",
+			visibility.showConsistencyWarning ? "不一致，需要处理" : "一致",
+		],
+		["允许恢复", visibility.showResume ? "是" : "否"],
+		["允许收口", visibility.showReconcile ? "是" : "否"],
+	]);
+	if (!initial && existingDetails?.parentNode === metaEl) {
+		const existingPrimary = metaEl.querySelector(":scope > .meta-grid");
+		if (existingPrimary) metaEl.replaceChild(primaryGrid, existingPrimary);
+		else metaEl.insertBefore(primaryGrid, existingDetails);
+		const existingDiagnosticGrid = existingDetails.querySelector(
+			":scope > .meta-grid",
+		);
+		if (existingDiagnosticGrid) {
+			existingDetails.replaceChild(diagnosticGrid, existingDiagnosticGrid);
+		} else {
+			existingDetails.appendChild(diagnosticGrid);
+		}
+		existingDetails.open = preserveDetailsOpen;
+	} else {
+		clearNode(metaEl);
+		metaEl.appendChild(primaryGrid);
+		const details = el("details", "meta-diagnostics");
+		details.appendChild(el("summary", null, "诊断信息"));
+		details.appendChild(diagnosticGrid);
+		metaEl.appendChild(details);
+	}
+
+	const graphGestureActive = document.body.classList.contains(
+		"is-resizing-dag-graph",
+	);
+	if (nodes.length === 0) {
+		clearNode(ranksEl);
+		ranksEl.appendChild(el("h3", null, "DAG 依赖图"));
+		ranksEl.appendChild(el("p", "empty", UI_TEXT.noNodes));
+	} else if (reuseShell && existingGraphWrap?.parentNode === ranksEl) {
+		// reuse-dag-graph-wrap: keep wrap identity across polls when possible.
+		if (!graphGestureActive) {
+			renderDagGraph(dag, dagRunId, existingGraphWrap);
+		}
+	} else {
+		clearNode(ranksEl);
+		ranksEl.appendChild(el("h3", null, "DAG 依赖图"));
+		ranksEl.appendChild(renderDagGraph(dag, dagRunId, null));
+		ranksEl.appendChild(renderRankLanes(dag));
+	}
+
+	const nodesScrollLeft = nodesEl.scrollLeft;
+	clearNode(nodesEl);
+	const nodeHeading = el("div", "dag-section-heading");
+	nodeHeading.appendChild(el("h3", null, "节点"));
+	nodeHeading.appendChild(
+		el("span", "dag-section-meta", `共 ${nodes.length} 个节点`),
+	);
+	nodesEl.appendChild(nodeHeading);
+
+	if (nodes.length === 0) {
+		mountViewState(nodesEl, "empty", UI_TEXT.noNodes);
+	} else {
+		const sortedNodes = [...nodes].sort((a, b) => {
+			const ra = Number(a.rank);
+			const rb = Number(b.rank);
+			if (!Number.isNaN(ra) && !Number.isNaN(rb) && ra !== rb) return ra - rb;
+			if (a.rank !== b.rank) return (a.rank ?? "").localeCompare(b.rank ?? "");
+			return a.nodeId.localeCompare(b.nodeId);
+		});
+
+		const rows = sortedNodes.map((node) => {
+			const active = isNodeActive(node.status);
+			const failed = isNodeFailed(node.status);
+			let className = "";
+			if (active) className = "dag-active-node";
+			if (failed) className = "dag-error-node";
+			if (node.nodeId === uiState.selectedDagNodeId) {
+				className = className
+					? `${className} dag-node-selected`
+					: "dag-node-selected";
+			}
+			return {
+				className,
+				onClick: () => selectDagNode(dagRunId, node.nodeId),
+				cells: [
+					node.nodeId,
+					node.rank ?? "—",
+					node.executor ?? "—",
+					node.model ?? "—",
+					node.status ? badge(node.status) : "—",
+					formatMs(node.durationMs),
+					node.errorPreview ?? node.label ?? "—",
+				],
+			};
+		});
+		const nodeTable = buildTable(
+			["节点 ID", "依赖层", "执行方式", "模型", "状态", "耗时", "备注"],
+			rows,
+		);
+		nodeTable.classList.add("dag-node-table");
+		for (const row of nodeTable.tBodies[0]?.rows ?? []) {
+			for (const columnIndex of [0, 3, 6]) {
+				const cell = row.cells[columnIndex];
+				if (cell?.textContent) cell.title = cell.textContent;
+			}
+		}
+		nodesEl.appendChild(nodeTable);
+	}
+	nodesEl.scrollLeft = nodesScrollLeft;
+
+	if (uiState.dagInspectorOpen && uiState.selectedDagNodeId) {
+		if (!uiState.sessionEventIdentity) {
+			uiState.sessionEventIdentity = makeSessionEventIdentity(
+				dagRunId,
+				uiState.selectedDagNodeId,
+			);
+		}
+		await mergeSessionEvents(dagRunId, uiState.selectedDagNodeId);
+	}
+	renderDagInspector(
+		dagRunId,
+		nodes.find((node) => node.nodeId === uiState.selectedDagNodeId),
+		initial,
+	);
+	return isDagRunActive(dag);
+}
+
+export function startDagPolling(dagRunId, initial = true) {
+	if (uiState.dagPollTimer) clearTimeout(uiState.dagPollTimer);
+	const generation = ++uiState.pollingGeneration;
+	const poll = async (isInitial) => {
+		const active = await renderDagDetail(dagRunId, isInitial);
+		if (generation !== uiState.pollingGeneration || !active) return;
+		const delay = detailPollDelay("running", isPageVisible());
+		uiState.dagPollTimer = setTimeout(() => {
+			uiState.dagPollTimer = null;
+			void poll(false);
+		}, delay);
+	};
+	void poll(initial);
+}