@tea-agent/loop-agent 0.1.0-fe-test.0

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

@@ -0,0 +1,1722 @@
+/** DAG node inspector panel (Observe UI R5). */
+import {
+	DAG_INSPECTOR_DEFAULT_WIDTH,
+	DAG_INSPECTOR_DEFAULT_WIDTH_RATIO,
+	DAG_INSPECTOR_MIN_WIDTH,
+	DAG_INSPECTOR_MAX_WIDTH,
+	DAG_INSPECTOR_RIGHT_OFFSET,
+	DAG_INSPECTOR_VIEWPORT_MARGIN,
+	DAG_INSPECTOR_KEYBOARD_STEP,
+	UI_TEXT,
+} from "../constants.js";
+import { clearNode, el } from "../dom.js";
+import { attemptFailureLabel } from "../dag-history-labels.js";
+import { fetchJson, fetchSpecEvidenceFile, fetchDagNodeInput } from "../api.js";
+import { badge, formatMs } from "../format.js";
+import { renderMarkdown } from "../markdown-render.js";
+import {
+	uiState,
+	makeSessionEventIdentity,
+	makeDagNodeInputIdentity,
+	makeDagNodeExecutionOutputIdentity,
+	getDagNodeExecutionOutputCache,
+	setDagNodeExecutionOutputCache,
+	clearDagNodeExecutionOutputCache,
+	openSpecEvidenceDetail,
+	closeSpecEvidenceDetail,
+	updateDagTimelineViewportState,
+	updateDagOutputViewportState,
+	computeFollowLatest,
+	isInteractiveGestureActive,
+	inspectorViewportRegionKey,
+	saveDagInspectorViewportState,
+	getDagInspectorViewportState,
+} from "../state.js";
+import {
+	formatSessionEventTime,
+	renderSessionTimeline,
+} from "./session-timeline.js";
+import { createCustomSelect } from "../custom-select.js";
+
+// Current inspector selection. Tab handlers reference this mutable slot so a
+// reused inspector shell never keeps stale node closures: every render writes
+// the latest {dagRunId, node} here and tab clicks re-render from the same
+// reference, always resolving the currently selected node identity.
+const inspectorSelection = { dagRunId: null, node: null };
+
+function renderDagInspectorForCurrent() {
+	if (!inspectorSelection.dagRunId || !inspectorSelection.node) return;
+	renderDagInspector(
+		inspectorSelection.dagRunId,
+		inspectorSelection.node,
+		false,
+	);
+}
+
+function resetInspectorNodeSelection(dagRunId, nodeId) {
+	uiState.selectedDagNodeId = nodeId;
+	uiState.dagInspectorOpen = true;
+	// Reset the per-attempt selection so an old node's attempt cannot leak
+	// into the newly selected node (always defaults back to the latest).
+	uiState.dagInspectorAttempt = null;
+	uiState.sessionEventOffset = 0;
+	uiState.sessionEvents = [];
+	// Drop any open spec-evidence preview so a stale A detail cannot survive
+	// into node B's spec-evidence panel (AC-007 regression guard).
+	uiState.specEvidenceDetail = null;
+	uiState.specEvidenceListEvidence = null;
+	uiState.dagNodeInputData = null;
+	uiState.dagNodeInputError = null;
+	uiState.dagNodeInputLoading = false;
+	// Drop execution-output cache/identity so node A's bodies never leak into B.
+	clearDagNodeExecutionOutputCache();
+	// Bump the session-event identity token so any in-flight response for the
+	// previous node is rejected before it can mutate the current node cache.
+	uiState.sessionEventIdentity = makeSessionEventIdentity(dagRunId, nodeId);
+	uiState.dagNodeInputIdentity = makeDagNodeInputIdentity(dagRunId, nodeId);
+}
+
+export function selectDagNode(dagRunId, nodeId) {
+	const nodeChanged = uiState.selectedDagNodeId !== nodeId;
+	if (nodeChanged) {
+		resetInspectorNodeSelection(dagRunId, nodeId);
+	} else {
+		uiState.dagInspectorOpen = true;
+	}
+	void import("./dag.js").then((m) => m.renderDagDetail(dagRunId, false));
+}
+
+/**
+ * 从执行轨迹 occurrence 打开同一 Inspector 并选中对应 execution（AC-005）。
+ * `executionKey` 为既有 pass-<n> key（@pass-<n> 映射）或 null（@base/@final
+ * 默认最新）。uiState.dagInspectorAttempt 跨 poll 保持。
+ */
+export function selectDagExecution(dagRunId, nodeId, executionKey) {
+	const nodeChanged = uiState.selectedDagNodeId !== nodeId;
+	if (nodeChanged) {
+		resetInspectorNodeSelection(dagRunId, nodeId);
+	} else {
+		uiState.dagInspectorOpen = true;
+	}
+	uiState.dagInspectorAttempt = {
+		dagRunId,
+		nodeId,
+		key: executionKey ? String(executionKey) : null,
+	};
+	void import("./dag.js").then((m) => m.renderDagDetail(dagRunId, false));
+}
+
+export function closeDagInspector() {
+	uiState.dagInspectorOpen = false;
+	const panel = document.getElementById("dag-inspector");
+	if (panel) {
+		panel.classList.remove("is-open");
+		panel.setAttribute("aria-hidden", "true");
+	}
+}
+
+export function closeDagInspectorOnOutsideClick(event) {
+	if (!uiState.dagInspectorOpen || !(event.target instanceof Element)) return;
+	if (
+		event.target.closest(
+			"#dag-inspector, .dag-node-table tbody tr, button, a, input, select, textarea, [role='button'], [role='tab']",
+		)
+	) {
+		return;
+	}
+	closeDagInspector();
+}
+
+export function dagInspectorMaximumWidth() {
+	return Math.max(
+		DAG_INSPECTOR_MIN_WIDTH,
+		Math.min(
+			DAG_INSPECTOR_MAX_WIDTH,
+			window.innerWidth - DAG_INSPECTOR_VIEWPORT_MARGIN,
+		),
+	);
+}
+
+/** Default open width: half the viewport, clamped to min/max. */
+export function dagInspectorDefaultWidth() {
+	const half = Math.round(
+		window.innerWidth * DAG_INSPECTOR_DEFAULT_WIDTH_RATIO,
+	);
+	return Math.min(
+		dagInspectorMaximumWidth(),
+		Math.max(DAG_INSPECTOR_MIN_WIDTH, half || DAG_INSPECTOR_DEFAULT_WIDTH),
+	);
+}
+
+export function setDagInspectorWidth(panel, requestedWidth) {
+	const maximum = dagInspectorMaximumWidth();
+	uiState.dagInspectorWidth = Math.min(
+		maximum,
+		Math.max(DAG_INSPECTOR_MIN_WIDTH, Math.round(requestedWidth)),
+	);
+	panel.style.setProperty(
+		"--dag-inspector-width",
+		`${uiState.dagInspectorWidth}px`,
+	);
+	return {
+		minimum: DAG_INSPECTOR_MIN_WIDTH,
+		maximum,
+		value: uiState.dagInspectorWidth,
+	};
+}
+
+export function createDagInspectorResizeHandle(panel) {
+	const handle = el("div", "dag-inspector-resize-handle");
+	handle.tabIndex = 0;
+	handle.setAttribute("role", "separator");
+	handle.setAttribute("aria-orientation", "vertical");
+	handle.setAttribute("aria-label", "调整节点检查器宽度");
+	handle.title = "拖动调整节点检查器宽度";
+
+	const updateRange = (requestedWidth) => {
+		const range = setDagInspectorWidth(
+			panel,
+			requestedWidth ?? uiState.dagInspectorWidth ?? dagInspectorDefaultWidth(),
+		);
+		handle.setAttribute("aria-valuemin", String(range.minimum));
+		handle.setAttribute("aria-valuemax", String(range.maximum));
+		handle.setAttribute("aria-valuenow", String(range.value));
+	};
+
+	updateRange();
+	handle.addEventListener("pointerdown", (event) => {
+		if (event.button !== 0) return;
+		event.preventDefault();
+		handle.setPointerCapture(event.pointerId);
+		document.body.classList.add("is-resizing-dag-inspector");
+	});
+	handle.addEventListener("pointermove", (event) => {
+		if (!handle.hasPointerCapture(event.pointerId)) return;
+		updateRange(window.innerWidth - event.clientX - DAG_INSPECTOR_RIGHT_OFFSET);
+	});
+	const stopResizing = (event) => {
+		if (handle.hasPointerCapture(event.pointerId)) {
+			handle.releasePointerCapture(event.pointerId);
+		}
+		document.body.classList.remove("is-resizing-dag-inspector");
+	};
+	handle.addEventListener("pointerup", stopResizing);
+	handle.addEventListener("pointercancel", stopResizing);
+	handle.addEventListener("keydown", (event) => {
+		const currentWidth =
+			uiState.dagInspectorWidth ?? dagInspectorDefaultWidth();
+		if (event.key === "ArrowLeft") {
+			event.preventDefault();
+			updateRange(currentWidth + DAG_INSPECTOR_KEYBOARD_STEP);
+		} else if (event.key === "ArrowRight") {
+			event.preventDefault();
+			updateRange(currentWidth - DAG_INSPECTOR_KEYBOARD_STEP);
+		} else if (event.key === "Home") {
+			event.preventDefault();
+			updateRange(DAG_INSPECTOR_MIN_WIDTH);
+		} else if (event.key === "End") {
+			event.preventDefault();
+			updateRange(dagInspectorMaximumWidth());
+		}
+	});
+	return handle;
+}
+
+export function captureDagTimelineViewportState(panel) {
+	const scrollEl = panel.querySelector(".process-timeline-scroll");
+	if (scrollEl?.dataset.dagRunId && scrollEl.dataset.nodeId) {
+		const followLatest = computeFollowLatest(
+			scrollEl.scrollTop,
+			scrollEl.scrollHeight,
+			scrollEl.clientHeight,
+		);
+		uiState.dagTimelineViewportState = updateDagTimelineViewportState(
+			uiState.dagTimelineViewportState,
+			scrollEl.dataset.dagRunId,
+			scrollEl.dataset.nodeId,
+			scrollEl.scrollLeft,
+			scrollEl.scrollTop,
+			followLatest,
+		);
+	}
+}
+
+async function renderSpecEvidence(content, dagRunId, nodeId, cachedEvidence) {
+	const evidence =
+		cachedEvidence ??
+		(await fetchJson(
+			`/api/dag-runs/${encodeURIComponent(dagRunId)}/nodes/${encodeURIComponent(nodeId)}/spec-evidence`,
+		));
+	if (
+		!content.isConnected ||
+		content.dataset.dagNodeId !== String(nodeId) ||
+		content.dataset.dagRunId !== String(dagRunId) ||
+		uiState.dagInspectorTab !== "spec-evidence"
+	) {
+		return;
+	}
+	if (uiState.specEvidenceDetail) {
+		renderSpecEvidenceDetail(content, dagRunId, nodeId);
+		restoreInspectorContentScroll(content, dagRunId, nodeId, "spec-evidence");
+		return;
+	}
+	if (!evidence) {
+		content.appendChild(el("p", "empty", "无法加载规范证据。"));
+		restoreInspectorContentScroll(content, dagRunId, nodeId, "spec-evidence");
+		return;
+	}
+	uiState.specEvidenceListEvidence = evidence;
+
+	const statusLabels = {
+		"spec-read": "已读取规范",
+		"source-bound": "已绑定任务源",
+		"spec-injected": "仅注入 skill",
+		"search-only": "仅执行检索",
+		"kb-queried": "已观察知识库查询",
+		"no-evidence": "未观察到读取",
+	};
+	const statusSection = el("div", "spec-evidence-section");
+	statusSection.appendChild(el("h4", null, "证据状态"));
+	statusSection.appendChild(
+		el(
+			"span",
+			`badge badge-${evidence.status === "spec-read" ? "succeeded" : evidence.status === "no-evidence" ? "failed" : "pending"}`,
+			statusLabels[evidence.status] ?? evidence.status,
+		),
+	);
+	if (evidence.summary) {
+		statusSection.appendChild(
+			el("p", "spec-evidence-summary", evidence.summary),
+		);
+	}
+	content.appendChild(statusSection);
+
+	const appendListSection = (
+		title,
+		entries,
+		renderEntry,
+		emptyMessage = "",
+	) => {
+		if (!entries?.length && !emptyMessage) return;
+		const section = el("div", "spec-evidence-section");
+		section.appendChild(el("h4", null, title));
+		if (!entries?.length) {
+			section.appendChild(el("p", "spec-evidence-summary", emptyMessage));
+			content.appendChild(section);
+			return;
+		}
+		const list = el("ul", "spec-evidence-list");
+		for (const entry of entries) list.appendChild(renderEntry(entry));
+		section.appendChild(list);
+		content.appendChild(section);
+	};
+
+	appendListSection(
+		"注入的 Skill",
+		evidence.skillInjection?.skills,
+		(skill) => {
+			const item = el("li", null);
+			const icon = el("i", "ri-bookmark-line");
+			icon.setAttribute("aria-hidden", "true");
+			item.append(icon, document.createTextNode(` ${skill}`));
+			return item;
+		},
+	);
+	appendListSection(
+		"已绑定任务源",
+		evidence.sourceBinding?.sources,
+		(source) => {
+			const item = el("li", null);
+			const button = document.createElement("button");
+			button.type = "button";
+			button.className = "spec-evidence-file-btn";
+			button.setAttribute("data-source", "binding");
+			button.setAttribute("data-path", source.path);
+			button.id = `spec-evidence-btn-binding-${source.path}`;
+			const icon = el("i", "ri-links-line");
+			icon.setAttribute("aria-hidden", "true");
+			button.append(
+				icon,
+				document.createTextNode(` ${source.kind}: `),
+				el("code", null, source.path),
+				document.createTextNode(` · sha256 ${source.sha256.slice(0, 12)}…`),
+			);
+			button.addEventListener("click", () =>
+				onSpecEvidenceFileClick(
+					content,
+					dagRunId,
+					nodeId,
+					"binding",
+					source.path,
+					button,
+				),
+			);
+			item.appendChild(button);
+			return item;
+		},
+	);
+	appendListSection(
+		"显式需求编号",
+		evidence.sourceBinding?.requirementIds,
+		(id) => el("li", null, id),
+	);
+	appendListSection(
+		`规范已读取（${evidence.specReads?.length ?? 0}）`,
+		evidence.specReads,
+		(read) => {
+			const item = el("li", null);
+			const button = document.createElement("button");
+			button.type = "button";
+			button.className = "spec-evidence-file-btn";
+			button.setAttribute("data-source", "read");
+			button.setAttribute("data-path", read.path);
+			if (read.timestamp) {
+				button.setAttribute("data-read-at", read.timestamp);
+			}
+			button.id = `spec-evidence-btn-read-${read.path}`;
+			const icon = el("i", "ri-book-open-line");
+			icon.setAttribute("aria-hidden", "true");
+			button.append(icon, el("code", null, read.path));
+			if (read.timestamp) {
+				button.appendChild(
+					el(
+						"span",
+						"spec-evidence-time",
+						formatSessionEventTime({ timestamp: read.timestamp }),
+					),
+				);
+			}
+			button.addEventListener("click", () =>
+				onSpecEvidenceFileClick(
+					content,
+					dagRunId,
+					nodeId,
+					"read",
+					read.path,
+					button,
+				),
+			);
+			item.appendChild(button);
+			return item;
+		},
+		"unavailable：未观察到规范读取。",
+	);
+	appendListSection(
+		`规范检索（${evidence.specSearches?.length ?? 0}）`,
+		evidence.specSearches,
+		(search) => {
+			const item = el("li", null);
+			const icon = el("i", "ri-search-line");
+			icon.setAttribute("aria-hidden", "true");
+			item.append(
+				icon,
+				document.createTextNode(` ${search.tool}: ${search.query}`),
+			);
+			return item;
+		},
+		"unavailable：未观察到规范检索。",
+	);
+	appendListSection(
+		`知识库查询（${evidence.knowledgeBaseQueries?.length ?? 0}）`,
+		evidence.knowledgeBaseQueries,
+		(query) => {
+			const item = el("li", null);
+			const icon = el("i", "ri-database-2-line");
+			icon.setAttribute("aria-hidden", "true");
+			item.append(icon, document.createTextNode(` ${query.connector}`));
+			return item;
+		},
+		"unavailable：未观察到知识库查询；connector 可能未配置或未调用。",
+	);
+
+	if (
+		evidence.status === "source-bound" ||
+		evidence.status === "spec-injected" ||
+		evidence.status === "no-evidence"
+	) {
+		const warning = el("div", "spec-evidence-warning");
+		const icon = el("i", "ri-alert-line");
+		icon.setAttribute("aria-hidden", "true");
+		warning.append(
+			icon,
+			document.createTextNode(
+				evidence.status === "source-bound"
+					? "DAG 已绑定权威任务源及内容哈希，但尚未观察到成功的 read 工具调用；绑定证明上下文来源，read 事件才证明节点读取了完整文件。"
+					: evidence.status === "no-evidence"
+						? "未观察到规范读取。只有 session event 中成功配对的 read 工具调用才算已读取，模型总结或文件名命中不能作为证明。"
+						: "规范 skill 已注入，但未观察到规范读取或知识库查询；grep/find/ls 只能证明检索，不能替代 read。",
+			),
+		);
+		content.appendChild(warning);
+	}
+	restoreInspectorContentScroll(content, dagRunId, nodeId, "spec-evidence");
+}
+
+/**
+ * Click handler for spec-evidence file buttons (AC-001/002). Opens the detail
+ * view in the same spec-evidence panel (no modal), records the trigger button
+ * so the back action can restore keyboard focus (AC-005).
+ */
+function onSpecEvidenceFileClick(
+	content,
+	dagRunId,
+	nodeId,
+	source,
+	relPath,
+	button,
+) {
+	openSpecEvidenceDetail(source, relPath, button);
+	clearNode(content);
+	const detail = uiState.specEvidenceDetail;
+	renderSpecEvidenceDetail(content, dagRunId, nodeId);
+	void (async () => {
+		try {
+			const data = await fetchSpecEvidenceFile(
+				dagRunId,
+				nodeId,
+				source,
+				relPath,
+			);
+			if (
+				!content.isConnected ||
+				content.dataset.dagNodeId !== String(nodeId) ||
+				!uiState.specEvidenceDetail ||
+				uiState.specEvidenceDetail.source !== source ||
+				uiState.specEvidenceDetail.path !== relPath
+			) {
+				return;
+			}
+			detail.loading = false;
+			detail.data = data;
+		} catch (error) {
+			if (
+				!content.isConnected ||
+				content.dataset.dagNodeId !== String(nodeId) ||
+				!uiState.specEvidenceDetail ||
+				uiState.specEvidenceDetail.source !== source ||
+				uiState.specEvidenceDetail.path !== relPath
+			) {
+				return;
+			}
+			detail.loading = false;
+			detail.error = error instanceof Error ? error.message : String(error);
+		}
+		renderSpecEvidenceDetail(content, dagRunId, nodeId);
+	})();
+}
+
+/**
+ * Render the in-inspector file preview (AC-005). Single scroll container for
+ * the body, always-visible back button, and accessible loading/error states.
+ */
+function renderSpecEvidenceDetail(content, dagRunId, nodeId) {
+	const detail = uiState.specEvidenceDetail;
+	clearNode(content);
+	if (!detail) {
+		renderSpecEvidence(
+			content,
+			dagRunId,
+			nodeId,
+			uiState.specEvidenceListEvidence,
+		);
+		return;
+	}
+
+	const wrapper = el("div", "spec-evidence-detail");
+	const back = document.createElement("button");
+	back.type = "button";
+	back.className = "spec-evidence-back";
+	back.setAttribute("aria-label", "返回规范证据");
+	const backIcon = el("i", "ri-arrow-left-line");
+	backIcon.setAttribute("aria-hidden", "true");
+	back.append(backIcon, document.createTextNode(" 返回规范证据"));
+	back.addEventListener("click", () => {
+		const closed = closeSpecEvidenceDetail();
+		clearNode(content);
+		// Restore the list synchronously from the cached evidence so the user
+		// sees no flicker and the trigger button is immediately focusable.
+		renderSpecEvidence(
+			content,
+			dagRunId,
+			nodeId,
+			uiState.specEvidenceListEvidence,
+		);
+		if (closed?.triggerId) {
+			const trigger = document.getElementById(closed.triggerId);
+			trigger?.focus();
+		}
+	});
+	wrapper.appendChild(back);
+
+	const meta = el("div", "spec-evidence-detail-meta");
+	meta.appendChild(el("code", null, detail.path));
+	if (detail.source === "binding" && detail.data) {
+		meta.appendChild(
+			el(
+				"span",
+				"spec-evidence-detail-hash",
+				`绑定 sha256 ${String(detail.data.sha256 ?? "").slice(0, 12)}… · 当前 ${detail.data.hashMatch ? "一致" : "不一致"}`,
+			),
+		);
+	} else if (detail.source === "read" && detail.data?.readAt) {
+		meta.appendChild(
+			el(
+				"span",
+				"spec-evidence-detail-time",
+				`读取于 ${formatSessionEventTime({ timestamp: detail.data.readAt })}`,
+			),
+		);
+	}
+	wrapper.appendChild(meta);
+
+	if (detail.loading) {
+		const loading = el("p", "muted", "正在加载文件内容…");
+		loading.setAttribute("role", "status");
+		loading.setAttribute("aria-live", "polite");
+		wrapper.appendChild(loading);
+	} else if (detail.error) {
+		const error = el(
+			"p",
+			"spec-evidence-detail-error",
+			`加载失败：${detail.error}`,
+		);
+		error.setAttribute("role", "alert");
+		wrapper.appendChild(error);
+	} else if (detail.data) {
+		const body = el("div", "spec-evidence-detail-content");
+		body.appendChild(renderMarkdown(detail.data.content ?? ""));
+		wrapper.appendChild(body);
+		if (detail.data.truncated) {
+			const note = el(
+				"p",
+				"spec-evidence-detail-truncated",
+				`已截断，仅显示前 ${detail.data.maxBytes ?? 0} 字节。`,
+			);
+			wrapper.appendChild(note);
+		}
+	}
+	content.appendChild(wrapper);
+	restoreInspectorContentScroll(content, dagRunId, nodeId, "spec-evidence");
+}
+
+function sourceLabel(source) {
+	if (source === "defaults") return "继承默认值";
+	if (source === "schema-default") return "schema 默认";
+	if (source === "merged") return "合并";
+	return null;
+}
+
+function appendMetaRow(dl, label, value, source) {
+	if (value == null || value === "") return;
+	const dt = el("dt", null, label);
+	const dd = el("dd", null, String(value));
+	const inherited = sourceLabel(source);
+	if (inherited) {
+		dd.appendChild(document.createTextNode(" "));
+		dd.appendChild(el("span", "node-input-inherited", inherited));
+	}
+	dl.appendChild(dt);
+	dl.appendChild(dd);
+}
+
+function appendCodeList(parent, title, values) {
+	if (!values || values.length === 0) return;
+	const section = el("section", "node-input-section");
+	section.appendChild(el("h4", null, title));
+	const list = el("ul", "node-input-code-list");
+	for (const value of values) {
+		const item = document.createElement("li");
+		const code = document.createElement("code");
+		code.textContent = String(value);
+		item.appendChild(code);
+		list.appendChild(item);
+	}
+	section.appendChild(list);
+	parent.appendChild(section);
+}
+
+function renderDagNodeInputDetail(content, data) {
+	const wrap = el("div", "node-input-root");
+	wrap.appendChild(el("p", "node-input-semantics", UI_TEXT.inputFrozenLabel));
+
+	if (data.summary) {
+		const section = el("section", "node-input-section");
+		section.appendChild(el("h4", null, "摘要"));
+		const dl = el("dl", "node-input-summary");
+		appendMetaRow(
+			dl,
+			"executor",
+			data.summary.executor,
+			data.summary.executorSource,
+		);
+		appendMetaRow(dl, "role", data.summary.role, null);
+		appendMetaRow(dl, "complexity", data.summary.complexity, null);
+		appendMetaRow(
+			dl,
+			"writePolicy",
+			data.summary.writePolicy,
+			data.summary.writePolicySource,
+		);
+		appendMetaRow(dl, "toolProfile", data.summary.toolProfile, null);
+		section.appendChild(dl);
+		wrap.appendChild(section);
+	}
+
+	if (data.dependency) {
+		const section = el("section", "node-input-section");
+		section.appendChild(el("h4", null, "依赖"));
+		const dl = el("dl", "node-input-summary");
+		appendMetaRow(
+			dl,
+			"depends_on",
+			(data.dependency.dependsOn ?? []).join(", ") || "(none)",
+			null,
+		);
+		if (data.dependency.dependsPolicy) {
+			appendMetaRow(dl, "dependsPolicy", data.dependency.dependsPolicy, null);
+		}
+		if ((data.dependency.failureAwareDependsOn ?? []).length > 0) {
+			appendMetaRow(
+				dl,
+				"failureAwareDependsOn",
+				data.dependency.failureAwareDependsOn.join(", "),
+				null,
+			);
+		}
+		if (data.dependency.runIf) {
+			appendMetaRow(dl, "runIf", data.dependency.runIf, null);
+		}
+		section.appendChild(dl);
+		wrap.appendChild(section);
+	}
+
+	if (data.prompt) {
+		const section = el("section", "node-input-section");
+		section.appendChild(el("h4", null, "任务正文"));
+		if (data.prompt.source?.path) {
+			const meta = el("p", "muted");
+			meta.textContent = `source: ${data.prompt.source.path}${
+				data.prompt.source.sha256Prefix
+					? ` (sha256 ${data.prompt.source.sha256Prefix}…)`
+					: ""
+			}`;
+			section.appendChild(meta);
+		}
+		section.appendChild(renderMarkdown(data.prompt.text ?? ""));
+		if (data.prompt.truncated) {
+			section.appendChild(
+				el(
+					"p",
+					"node-input-truncated",
+					`已截断，仅显示前 ${data.prompt.maxBytes ?? 0} 字节（UTF-8）。`,
+				),
+			);
+		}
+		wrap.appendChild(section);
+	}
+
+	if (data.executorInput) {
+		const section = el("section", "node-input-section");
+		section.appendChild(el("h4", null, "执行器输入摘要"));
+		const dl = el("dl", "node-input-summary");
+		appendMetaRow(dl, "kind", data.executorInput.kind, null);
+		if (data.executorInput.modelHint) {
+			appendMetaRow(dl, "modelHint", data.executorInput.modelHint, null);
+		}
+		section.appendChild(dl);
+		appendCodeList(section, "skills", data.executorInput.skills);
+		if (data.executorInput.shell) {
+			const shell = data.executorInput.shell;
+			const shellDl = el("dl", "node-input-summary");
+			appendMetaRow(shellDl, "preset", shell.preset, null);
+			appendMetaRow(shellDl, "cwd", shell.cwd, null);
+			appendMetaRow(shellDl, "timeoutMs", shell.timeoutMs, null);
+			appendMetaRow(
+				shellDl,
+				"nonZeroExitPolicy",
+				shell.nonZeroExitPolicy,
+				null,
+			);
+			appendMetaRow(
+				shellDl,
+				"gates",
+				(shell.gates ?? []).join(", ") || "(none)",
+				null,
+			);
+			section.appendChild(shellDl);
+			if ((shell.commands ?? []).length > 0) {
+				const list = el("ol", "node-input-command-list");
+				for (const command of shell.commands) {
+					const item = document.createElement("li");
+					const pre = document.createElement("pre");
+					const code = document.createElement("code");
+					code.textContent = String(command);
+					pre.appendChild(code);
+					item.appendChild(pre);
+					list.appendChild(item);
+				}
+				section.appendChild(list);
+			}
+		}
+		if (data.executorInput.static) {
+			const staticBlock = data.executorInput.static;
+			const staticDl = el("dl", "node-input-summary");
+			appendMetaRow(staticDl, "status", staticBlock.status, null);
+			section.appendChild(staticDl);
+			section.appendChild(renderMarkdown(staticBlock.resultPreview ?? ""));
+			if (staticBlock.truncated) {
+				section.appendChild(
+					el(
+						"p",
+						"node-input-truncated",
+						`已截断，仅显示前 ${staticBlock.maxBytes ?? 0} 字节（UTF-8）。`,
+					),
+				);
+			}
+		}
+		wrap.appendChild(section);
+	}
+
+	if (data.boundaries) {
+		const section = el("section", "node-input-section");
+		section.appendChild(el("h4", null, "边界与输出契约"));
+		const dl = el("dl", "node-input-summary");
+		appendMetaRow(dl, "outputMode", data.boundaries.outputMode, null);
+		appendMetaRow(
+			dl,
+			"firstProtocolLine",
+			data.boundaries.firstProtocolLine,
+			null,
+		);
+		section.appendChild(dl);
+		if (data.boundaries.outputContract) {
+			section.appendChild(el("h5", null, "outputContract"));
+			section.appendChild(renderMarkdown(data.boundaries.outputContract));
+		}
+		appendCodeList(section, "allowedPaths", data.boundaries.allowedPaths);
+		appendCodeList(section, "forbiddenPaths", data.boundaries.forbiddenPaths);
+		appendCodeList(section, "writeSet", data.boundaries.writeSet);
+		wrap.appendChild(section);
+	}
+
+	if (data.promptFingerprint?.exists) {
+		const section = el("section", "node-input-section");
+		section.appendChild(el("h4", null, "Assembled prompt 指纹"));
+		const dl = el("dl", "node-input-summary");
+		appendMetaRow(
+			dl,
+			"sha256",
+			data.promptFingerprint.sha256Prefix ?? "(parse failed)",
+			null,
+		);
+		appendMetaRow(dl, "lengthChars", data.promptFingerprint.lengthChars, null);
+		appendMetaRow(dl, "artifact", data.promptFingerprint.artifact, null);
+		section.appendChild(dl);
+		section.appendChild(el("p", "muted", UI_TEXT.inputFingerprintNote));
+		wrap.appendChild(section);
+	}
+
+	if ((data.warnings ?? []).length > 0) {
+		const section = el("section", "node-input-section");
+		section.appendChild(el("h4", null, "警告"));
+		for (const warning of data.warnings) {
+			section.appendChild(el("p", "node-input-warning", String(warning)));
+		}
+		wrap.appendChild(section);
+	}
+
+	content.appendChild(wrap);
+}
+
+function unavailableMessage(reason) {
+	if (reason === "unsupported-dynamic-node") {
+		return UI_TEXT.inputDynamicUnsupported;
+	}
+	if (reason === "run-spec-unavailable") {
+		return UI_TEXT.inputRunSpecUnavailable;
+	}
+	if (reason === "task-not-found") {
+		return UI_TEXT.inputUnavailable;
+	}
+	return UI_TEXT.noInput;
+}
+
+async function renderDagNodeInput(content, dagRunId, node) {
+	const nodeId = node.nodeId;
+	const identity = makeDagNodeInputIdentity(dagRunId, nodeId);
+	uiState.dagNodeInputIdentity = identity;
+	uiState.dagNodeInputLoading = true;
+	uiState.dagNodeInputError = null;
+
+	// Preserve prior intent scroll across the short loading shell (AC-004).
+	saveInspectorContentScroll(content, dagRunId, nodeId, "input", {
+		preserveIntent: true,
+	});
+	clearNode(content);
+	const loading = el("p", "muted", UI_TEXT.inputLoading);
+	loading.setAttribute("role", "status");
+	loading.setAttribute("aria-live", "polite");
+	content.appendChild(loading);
+
+	const result = await fetchDagNodeInput(dagRunId, nodeId);
+	if (
+		uiState.dagNodeInputIdentity !== identity ||
+		uiState.selectedDagNodeId !== nodeId ||
+		uiState.currentDagRunId !== dagRunId ||
+		uiState.dagInspectorTab !== "input" ||
+		!content.isConnected ||
+		content.dataset.dagNodeId !== String(nodeId) ||
+		content.dataset.dagRunId !== String(dagRunId)
+	) {
+		return;
+	}
+
+	clearNode(content);
+	const finishInputRender = () => {
+		restoreInspectorContentScroll(content, dagRunId, nodeId, "input");
+		uiState.dagNodeInputLoading = false;
+	};
+
+	if (!result.ok) {
+		const message =
+			result.body?.error ||
+			(result.status === 0
+				? UI_TEXT.inputError
+				: `${UI_TEXT.inputError}（HTTP ${result.status}）`);
+		uiState.dagNodeInputError = message;
+		uiState.dagNodeInputData = null;
+		const error = el("p", "node-input-error", message);
+		error.setAttribute("role", "alert");
+		content.appendChild(error);
+		finishInputRender();
+		return;
+	}
+
+	const data = result.body;
+	uiState.dagNodeInputData = data;
+	uiState.dagNodeInputError = null;
+	if (!data?.available) {
+		const empty = el(
+			"p",
+			"empty",
+			unavailableMessage(data?.availabilityReason),
+		);
+		empty.setAttribute("role", "status");
+		content.appendChild(empty);
+		if ((data?.warnings ?? []).length > 0) {
+			for (const warning of data.warnings) {
+				content.appendChild(el("p", "node-input-warning", String(warning)));
+			}
+		}
+		finishInputRender();
+		return;
+	}
+
+	renderDagNodeInputDetail(content, data);
+	finishInputRender();
+}
+
+function activeInspectorTab() {
+	return ["input", "timeline", "spec-evidence"].includes(
+		uiState.dagInspectorTab,
+	)
+		? uiState.dagInspectorTab
+		: "output";
+}
+
+function saveInspectorContentScroll(
+	content,
+	dagRunId,
+	nodeId,
+	tab,
+	options = {},
+) {
+	if (!content) return null;
+	const regionKey = inspectorViewportRegionKey(dagRunId, nodeId, tab);
+	const saved = saveDagInspectorViewportState(
+		regionKey,
+		content.scrollLeft,
+		content.scrollTop,
+		options,
+	);
+	if (tab === "input") {
+		uiState.dagNodeInputViewportState = updateDagOutputViewportState(
+			uiState.dagNodeInputViewportState,
+			regionKey,
+			saved?.scrollLeft ?? 0,
+			saved?.scrollTop ?? 0,
+			false,
+		);
+	} else if (tab === "output") {
+		const followLatest = computeFollowLatest(
+			content.scrollTop,
+			content.scrollHeight,
+			content.clientHeight,
+		);
+		uiState.dagNodeOutputViewportState = updateDagOutputViewportState(
+			uiState.dagNodeOutputViewportState,
+			regionKey,
+			content.scrollLeft,
+			content.scrollTop,
+			followLatest,
+		);
+	} else if (tab === "spec-evidence") {
+		uiState.dagNodeSpecEvidenceViewportState = saved;
+	}
+	return saved;
+}
+
+function restoreInspectorContentScroll(content, dagRunId, nodeId, tab) {
+	if (!content) return;
+	const regionKey = inspectorViewportRegionKey(dagRunId, nodeId, tab);
+	const apply = () => {
+		if (
+			!content.isConnected ||
+			content.dataset.dagNodeId !== String(nodeId ?? "") ||
+			content.dataset.dagRunId !== String(dagRunId ?? "") ||
+			activeInspectorTab() !== tab
+		) {
+			return;
+		}
+		if (tab === "output") {
+			const saved = uiState.dagNodeOutputViewportState;
+			if (saved?.regionKey === regionKey && saved.followLatest) {
+				content.scrollTop = content.scrollHeight;
+				content.scrollLeft = saved.scrollLeft ?? 0;
+				return;
+			}
+		}
+		const saved =
+			getDagInspectorViewportState(regionKey) ??
+			(tab === "input" &&
+			uiState.dagNodeInputViewportState?.regionKey === regionKey
+				? uiState.dagNodeInputViewportState
+				: null) ??
+			(tab === "output" &&
+			uiState.dagNodeOutputViewportState?.regionKey === regionKey
+				? uiState.dagNodeOutputViewportState
+				: null) ??
+			(tab === "spec-evidence" &&
+			uiState.dagNodeSpecEvidenceViewportState?.regionKey === regionKey
+				? uiState.dagNodeSpecEvidenceViewportState
+				: null);
+		content.scrollLeft = saved?.scrollLeft ?? 0;
+		content.scrollTop = saved?.scrollTop ?? 0;
+	};
+	apply();
+	if (typeof requestAnimationFrame === "function") {
+		requestAnimationFrame(apply);
+	}
+}
+
+function ensureInspectorContentScrollCapture(content, dagRunId, nodeId, tab) {
+	if (!content || content.dataset.scrollCaptureBound === "1") return;
+	content.dataset.scrollCaptureBound = "1";
+	content.addEventListener(
+		"scroll",
+		() => {
+			const runId = content.dataset.dagRunId;
+			const nId = content.dataset.dagNodeId;
+			const active = activeInspectorTab();
+			if (!runId || !nId || !active) return;
+			saveInspectorContentScroll(content, runId, nId, active, {
+				// Clearing a tall input pane for its loading shell can emit a native
+				// scroll-to-zero event. Preserve the user's prior intent until the
+				// asynchronous content has been restored.
+				preserveIntent:
+					active === "input" && Boolean(uiState.dagNodeInputLoading),
+			});
+		},
+		{ passive: true },
+	);
+	// Touch current context so callers always have a key even before first scroll.
+	saveInspectorContentScroll(content, dagRunId, nodeId, tab, {
+		preserveIntent: true,
+	});
+}
+
+function attemptPreviewStatus(status) {
+	if (!status) return null;
+	const normalized = String(status).toLowerCase();
+	if (
+		["success", "finished", "completed", "succeeded", "done"].includes(
+			normalized,
+		)
+	) {
+		return { cls: "succeeded", label: "成功" };
+	}
+	if (
+		[
+			"failure",
+			"failed",
+			"error",
+			"partial_failed",
+			"partial-failed",
+			"interrupted",
+		].includes(normalized)
+	) {
+		return { cls: "failed", label: "失败" };
+	}
+	return null;
+}
+
+/**
+ * Attempt selector options for a node: per-attempt when attempts>1,
+ * per-pass when convergence passes>1, none otherwise (legacy/single).
+ * 主文案为中文：首次尝试 / 第 N 次尝试 / 初始执行 / 修复轮次 N-1
+ * （AC-001/AC-002）；option value 保持 raw attempt-<n>/pass-<n>（AC-003）。
+ */
+function attemptSelectorOptions(node) {
+	const summary = node.executionSummary;
+	if (summary?.attempts && summary.attempts.length > 1) {
+		return summary.attempts.map((attempt) => ({
+			key: `attempt-${attempt.attempt}`,
+			label:
+				attempt.attempt === 1 ? "首次尝试" : `第 ${attempt.attempt} 次尝试`,
+			preview: attempt,
+		}));
+	}
+	const passes = node.passes ?? [];
+	if (passes.length > 1) {
+		const passPreviews = summary?.passes ?? [];
+		return passes.map((pass) => {
+			const preview = passPreviews.find((entry) => entry.pass === pass) ?? {
+				pass,
+			};
+			// 仅显示文案做人类轮次映射：raw pass=1 → 初始执行，raw pass>=2 →
+			// 修复轮次 N-1（AC-001/AC-002）；option value 保持 raw pass-<n>（AC-003）。
+			return {
+				key: `pass-${pass}`,
+				label: pass <= 1 ? "初始执行" : `修复轮次 ${pass - 1}`,
+				preview,
+			};
+		});
+	}
+	return [];
+}
+
+/** Selected attempt key for the current node; null = latest. */
+function resolveSelectedAttemptKey(dagRunId, node) {
+	const selection = uiState.dagInspectorAttempt;
+	if (
+		selection &&
+		selection.dagRunId === dagRunId &&
+		selection.nodeId === node.nodeId
+	) {
+		return selection.key;
+	}
+	return null;
+}
+
+/**
+ * Sticky selector + preview strip shown at the top of output/timeline tabs
+ * when the node carries multi-attempt (or multi-pass) history. Preview shows
+ * status badge / failureCategory / durationMs for the selected attempt; for a
+ * non-latest attempt the full body stays in the immutable attempt artifact.
+ */
+function buildAttemptBar(dagRunId, node) {
+	const options = attemptSelectorOptions(node);
+	if (options.length === 0) return null;
+	const latestKey = options[options.length - 1].key;
+	const requestedKey = resolveSelectedAttemptKey(dagRunId, node);
+	const selectedKey = options.some((option) => option.key === requestedKey)
+		? requestedKey
+		: latestKey;
+
+	const bar = el("div", "dag-inspector-attempt-bar");
+	bar.appendChild(el("label", "dag-inspector-attempt-label", "执行分次"));
+	const select = createCustomSelect({
+		ariaLabel: "选择执行分次",
+		className: "dag-inspector-attempt-select",
+		value: selectedKey,
+		options: options.map((option) => ({
+			value: option.key,
+			label: option.label,
+		})),
+		onChange: (nextKey) => {
+			uiState.dagInspectorAttempt = {
+				dagRunId,
+				nodeId: node.nodeId,
+				key: String(nextKey),
+			};
+			renderDagInspectorForCurrent();
+		},
+	});
+	// Keep raw key on the root for existing integration assertions that read
+	// `.value` after assign + change (StubNode handler contract).
+	select.value = selectedKey;
+	bar.appendChild(select);
+
+	const selected =
+		options.find((option) => option.key === selectedKey) ??
+		options[options.length - 1];
+	const data = selected.preview ?? {};
+	const preview = el("div", "dag-inspector-attempt-preview");
+	const status = attemptPreviewStatus(data.status);
+	if (status) {
+		preview.appendChild(el("span", `badge badge-${status.cls}`, status.label));
+	}
+	if (status?.cls === "failed" && data.failureCategory) {
+		// 仅失败尝试显示原因；部分 runtime 会在成功尝试保留
+		// failureCategory="success"，不能将其误映射为「其他失败原因」。
+		// 未知失败分类仍 fail-closed，raw token 仅保留在 title 诊断中。
+		const reason = el(
+			"span",
+			"dag-inspector-attempt-category",
+			`原因 ${attemptFailureLabel(data.failureCategory)}`,
+		);
+		reason.setAttribute("title", `failureCategory ${data.failureCategory}`);
+		preview.appendChild(reason);
+	}
+	if (data.durationMs !== undefined) {
+		preview.appendChild(
+			el(
+				"span",
+				"dag-inspector-attempt-duration",
+				`耗时 ${formatMs(data.durationMs)}`,
+			),
+		);
+	}
+	// Historical bodies load via execution-output endpoint; do not surface
+	// raw artifact paths as the primary path for full text (AC-003/004).
+	bar.appendChild(preview);
+	return { bar, selectedKey, latestKey, options };
+}
+
+/**
+ * Resolve whether the current selection is the semantic latest execution.
+ * Users selecting the last option still write a concrete attempt-N/pass-N key;
+ * treat that as latest so preview/body is never blank on "切回最新".
+ */
+function isLatestExecutionSelection(dagRunId, node) {
+	const options = attemptSelectorOptions(node);
+	if (options.length === 0) return true;
+	const latestKey = options[options.length - 1].key;
+	const requested = resolveSelectedAttemptKey(dagRunId, node);
+	return requested === null || requested === latestKey;
+}
+
+function effectiveExecutionKey(dagRunId, node) {
+	const options = attemptSelectorOptions(node);
+	if (options.length === 0) return null;
+	const latestKey = options[options.length - 1].key;
+	const requested = resolveSelectedAttemptKey(dagRunId, node);
+	if (requested === null) return latestKey;
+	return options.some((option) => option.key === requested)
+		? requested
+		: latestKey;
+}
+
+/**
+ * Inline read-only fetch for execution-output (api.js is outside writeSet).
+ * Mirrors fetchJsonResult: preserves status, never throws on transport errors.
+ */
+async function fetchExecutionOutput(dagRunId, nodeId, key) {
+	const url = `/api/dag-runs/${encodeURIComponent(dagRunId)}/nodes/${encodeURIComponent(nodeId)}/execution-output?key=${encodeURIComponent(key)}`;
+	try {
+		const res = await fetch(url);
+		let body = null;
+		try {
+			body = await res.json();
+		} catch {
+			body = null;
+		}
+		return { ok: res.ok, status: res.status, body };
+	} catch {
+		return { ok: false, status: 0, body: null };
+	}
+}
+
+function composeExecutionBodyText(payload) {
+	if (!payload || typeof payload !== "object") return "";
+	const assistant =
+		typeof payload.assistantText === "string" && payload.assistantText
+			? payload.assistantText
+			: "";
+	const stdout =
+		typeof payload.stdout === "string" && payload.stdout ? payload.stdout : "";
+	// Dedupe when both streams are non-empty and equal after trim (AC-001);
+	// keep order assistantText → stdout when they differ (AC-002).
+	if (assistant && stdout) {
+		if (assistant.trim() === stdout.trim()) return assistant;
+		return `${assistant}\n\n${stdout}`;
+	}
+	return assistant || stdout;
+}
+
+function composeExecutionErrorText(payload) {
+	if (!payload || typeof payload !== "object") return "";
+	return typeof payload.stderr === "string" ? payload.stderr : "";
+}
+
+function appendOutputBody(content, outputText, errorText, options = null) {
+	if (!outputText && !errorText) {
+		content.appendChild(el("p", "empty", UI_TEXT.noOutput));
+		return;
+	}
+	if (outputText) content.appendChild(renderMarkdown(outputText));
+	// Truncation note only for full/cached execution-output bodies (AC-003);
+	// preview path never invents truncated/maxBytes.
+	if (options?.truncated === true) {
+		const maxBytes = options.maxBytes ?? 0;
+		content.appendChild(
+			el(
+				"p",
+				"muted execution-output-truncated",
+				`内容过长，已截断（maxBytes=${maxBytes}）`,
+			),
+		);
+	}
+	if (errorText) {
+		const error = el("section", "markdown-error");
+		error.appendChild(el("p", "markdown-error-title", "错误输出"));
+		error.appendChild(renderMarkdown(errorText));
+		content.appendChild(error);
+	}
+}
+
+function renderCachedOrPreviewBody(content, dagRunId, node, key, isLatest) {
+	const cached = key
+		? getDagNodeExecutionOutputCache(dagRunId, node.nodeId, key)
+		: null;
+	if (cached?.ok && cached.body) {
+		appendOutputBody(
+			content,
+			composeExecutionBodyText(cached.body),
+			composeExecutionErrorText(cached.body),
+			{
+				truncated: cached.body.truncated === true,
+				maxBytes: cached.body.maxBytes,
+			},
+		);
+		return "cached";
+	}
+	if (isLatest) {
+		appendOutputBody(
+			content,
+			node.outputPreview ?? "",
+			node.errorPreview ?? "",
+		);
+		return "preview";
+	}
+	if (cached && cached.ok === false) {
+		const message =
+			cached.error || "该次执行输出暂不可用（artifact 缺失或无法读取）。";
+		const error = el("p", "empty", message);
+		error.setAttribute("role", "status");
+		content.appendChild(error);
+		return "missing";
+	}
+	return null;
+}
+
+async function loadAndRenderExecutionOutput(
+	content,
+	dagRunId,
+	node,
+	key,
+	isLatest,
+) {
+	const nodeId = node.nodeId;
+	const identity = makeDagNodeExecutionOutputIdentity(dagRunId, nodeId, key);
+	uiState.dagNodeExecutionOutputIdentity = identity;
+	uiState.dagNodeExecutionOutputKey = key;
+	uiState.dagNodeExecutionOutputLoading = true;
+	uiState.dagNodeExecutionOutputError = null;
+
+	const stillCurrent = () =>
+		uiState.dagNodeExecutionOutputIdentity === identity &&
+		uiState.selectedDagNodeId === nodeId &&
+		// currentDagRunId may be unset in isolated unit stubs; prefer dataset match.
+		(uiState.currentDagRunId == null || uiState.currentDagRunId === dagRunId) &&
+		uiState.dagInspectorTab === "output" &&
+		content.isConnected &&
+		content.dataset.dagNodeId === String(nodeId) &&
+		content.dataset.dagRunId === String(dagRunId) &&
+		effectiveExecutionKey(dagRunId, inspectorSelection.node ?? node) === key;
+
+	const result = await fetchExecutionOutput(dagRunId, nodeId, key);
+	if (!stillCurrent()) return;
+
+	uiState.dagNodeExecutionOutputLoading = false;
+	if (!result.ok || !result.body) {
+		const message =
+			result.body?.error ||
+			(result.status === 0
+				? "加载执行输出失败（网络错误）。"
+				: result.status === 404
+					? "该次执行输出暂不可用（artifact 缺失或无法读取）。"
+					: `加载执行输出失败（HTTP ${result.status}）。`);
+		// Cache the miss for this key only — never wipe other valid bodies.
+		setDagNodeExecutionOutputCache(dagRunId, nodeId, key, {
+			ok: false,
+			error: message,
+			status: result.status,
+		});
+		uiState.dagNodeExecutionOutputError = message;
+		// Rebuild body area: keep attempt bar, replace status/body.
+		repaintOutputTabBody(content, dagRunId, node);
+		return;
+	}
+
+	setDagNodeExecutionOutputCache(dagRunId, nodeId, key, {
+		ok: true,
+		body: result.body,
+	});
+	uiState.dagNodeExecutionOutputError = null;
+	repaintOutputTabBody(content, dagRunId, node);
+}
+
+/**
+ * Rebuild the output tab body under the attempt bar using cache + preview
+ * without losing selection identity (poll / async completion).
+ */
+function repaintOutputTabBody(content, dagRunId, node) {
+	if (
+		!content?.isConnected ||
+		content.dataset.dagNodeId !== String(node.nodeId ?? "") ||
+		content.dataset.dagRunId !== String(dagRunId ?? "") ||
+		activeInspectorTab() !== "output"
+	) {
+		return;
+	}
+	// Remove everything after the attempt bar (or all if no bar).
+	const bar = content.querySelector(".dag-inspector-attempt-bar");
+	const keep = bar ? [bar] : [];
+	while (content.firstChild) content.removeChild(content.firstChild);
+	for (const nodeEl of keep) content.appendChild(nodeEl);
+
+	const key = effectiveExecutionKey(dagRunId, node);
+	const latest = isLatestExecutionSelection(dagRunId, node);
+	const rendered = renderCachedOrPreviewBody(
+		content,
+		dagRunId,
+		node,
+		key,
+		latest,
+	);
+	if (rendered === null) {
+		const loading = el("p", "muted", "正在加载执行输出…");
+		loading.setAttribute("role", "status");
+		loading.setAttribute("aria-live", "polite");
+		content.appendChild(loading);
+	}
+	restoreInspectorContentScroll(content, dagRunId, node.nodeId, "output");
+}
+
+function fillDagInspectorContent(content, dagRunId, node) {
+	const previousRenderedNode = content.dataset.dagNodeId ?? "";
+	const previousRenderedRun = content.dataset.dagRunId ?? "";
+	const previousTab = content.dataset.inspectorTab ?? "";
+	const nodeChanged =
+		previousRenderedNode !== String(node.nodeId ?? "") ||
+		previousRenderedRun !== String(dagRunId ?? "");
+	if (nodeChanged) {
+		// Drop any open spec-evidence preview + cached list so a stale A detail
+		// cannot survive into node B (AC-007 regression guard).
+		uiState.specEvidenceDetail = null;
+		uiState.specEvidenceListEvidence = null;
+		uiState.dagNodeInputData = null;
+		uiState.dagNodeInputError = null;
+	}
+	const activeTab = activeInspectorTab();
+	// Capture outgoing context scroll before datasets flip (AC-005 isolation).
+	if (
+		previousRenderedNode &&
+		previousRenderedRun &&
+		(previousTab || activeTab)
+	) {
+		saveInspectorContentScroll(
+			content,
+			previousRenderedRun,
+			previousRenderedNode,
+			previousTab || activeTab,
+			{ preserveIntent: true },
+		);
+	}
+	content.id = `dag-inspector-panel-${activeTab}`;
+	content.setAttribute("role", "tabpanel");
+	content.setAttribute("aria-labelledby", `dag-inspector-tab-${activeTab}`);
+	content.dataset.dagNodeId = String(node.nodeId ?? "");
+	content.dataset.dagRunId = String(dagRunId ?? "");
+	content.dataset.inspectorTab = activeTab;
+	// Drop timeline-only classes when switching tabs so output layout stays clean.
+	content.className = "dag-inspector-content";
+	ensureInspectorContentScrollCapture(
+		content,
+		dagRunId,
+		node.nodeId,
+		activeTab,
+	);
+	if (activeTab === "spec-evidence") {
+		void renderSpecEvidence(content, dagRunId, node.nodeId);
+	} else if (activeTab === "timeline") {
+		const attemptBuilt = buildAttemptBar(dagRunId, node);
+		if (attemptBuilt?.bar) content.appendChild(attemptBuilt.bar);
+		renderSessionTimeline(content, node.nodeId);
+	} else if (activeTab === "input") {
+		void renderDagNodeInput(content, dagRunId, node);
+	} else {
+		// output tab: attempt bar + latest preview immediate / historical async body.
+		const attemptBuilt = buildAttemptBar(dagRunId, node);
+		if (attemptBuilt?.bar) content.appendChild(attemptBuilt.bar);
+		const key = effectiveExecutionKey(dagRunId, node);
+		const latest = isLatestExecutionSelection(dagRunId, node);
+		const rendered = renderCachedOrPreviewBody(
+			content,
+			dagRunId,
+			node,
+			key,
+			latest,
+		);
+		// Historical (or multi-exec) selection without cache → loading then fetch.
+		if (key && rendered === null) {
+			const loading = el("p", "muted", "正在加载执行输出…");
+			loading.setAttribute("role", "status");
+			loading.setAttribute("aria-live", "polite");
+			content.appendChild(loading);
+			void loadAndRenderExecutionOutput(content, dagRunId, node, key, latest);
+		} else if (key && rendered === "preview" && latest) {
+			// Optional parallel enhance: load full artifact body for latest.
+			const cached = getDagNodeExecutionOutputCache(dagRunId, node.nodeId, key);
+			if (!cached) {
+				void loadAndRenderExecutionOutput(content, dagRunId, node, key, latest);
+			}
+		}
+		// Single-execution nodes (!key) already painted preview via renderCachedOrPreviewBody.
+		restoreInspectorContentScroll(content, dagRunId, node.nodeId, "output");
+	}
+}
+
+function buildDagInspectorHeader(dagRunId, node) {
+	const header = el("div", "dag-inspector-header");
+	header.dataset.dagRunId = String(dagRunId ?? "");
+	header.dataset.dagNodeId = String(node.nodeId ?? "");
+	const title = el("div", "dag-inspector-title");
+	title.appendChild(el("h3", null, "节点检查器"));
+	title.appendChild(el("div", "dag-inspector-node", node.nodeId));
+	header.appendChild(title);
+	const controls = el("div", "dag-inspector-controls");
+	const status = badge(node.status ?? "unknown");
+	status.classList.add("dag-inspector-status");
+	controls.appendChild(status);
+	const close = document.createElement("button");
+	close.type = "button";
+	close.className = "dag-inspector-close";
+	close.setAttribute("aria-label", "关闭节点检查器");
+	const closeIcon = el("i", "ri-close-line");
+	closeIcon.setAttribute("aria-hidden", "true");
+	close.appendChild(closeIcon);
+	close.addEventListener("click", closeDagInspector);
+	controls.appendChild(close);
+	header.appendChild(controls);
+
+	const tabDefs = [
+		["input", "节点输入", "ri-login-box-line"],
+		["output", "节点输出", "ri-file-text-line"],
+		["timeline", "执行过程", "ri-route-line"],
+		["spec-evidence", "规范证据", "ri-book-open-line"],
+	];
+	const tabs = el("div", "dag-inspector-tabs");
+	tabs.setAttribute("role", "tablist");
+	tabs.setAttribute("aria-label", "节点检查器面板");
+	for (const [tab, label, icon] of tabDefs) {
+		const selected = uiState.dagInspectorTab === tab;
+		const button = document.createElement("button");
+		button.type = "button";
+		button.id = `dag-inspector-tab-${tab}`;
+		button.className = "dag-inspector-tab";
+		button.setAttribute("role", "tab");
+		button.setAttribute("aria-controls", `dag-inspector-panel-${tab}`);
+		button.setAttribute("aria-selected", String(selected));
+		button.tabIndex = selected ? 0 : -1;
+		button.dataset.tab = tab;
+		const tabIcon = el("i", icon);
+		tabIcon.setAttribute("aria-hidden", "true");
+		button.appendChild(tabIcon);
+		button.appendChild(document.createTextNode(` ${label}`));
+		button.addEventListener("click", () => {
+			uiState.dagInspectorTab = tab;
+			renderDagInspectorForCurrent();
+			const next = document.getElementById(`dag-inspector-tab-${tab}`);
+			next?.focus();
+		});
+		button.addEventListener("keydown", (event) => {
+			if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+			event.preventDefault();
+			event.stopPropagation();
+			const order = tabDefs.map(([id]) => id);
+			const idx = order.indexOf(tab);
+			if (idx < 0) return;
+			const delta = event.key === "ArrowRight" ? 1 : -1;
+			const nextTab = order[(idx + delta + order.length) % order.length];
+			uiState.dagInspectorTab = nextTab;
+			renderDagInspectorForCurrent();
+			document.getElementById(`dag-inspector-tab-${nextTab}`)?.focus();
+		});
+		tabs.appendChild(button);
+	}
+	header.appendChild(tabs);
+	return header;
+}
+
+function syncDagInspectorHeader(panel, dagRunId, node) {
+	const header = panel.querySelector(".dag-inspector-header");
+	if (!header) return;
+	header.dataset.dagRunId = String(dagRunId ?? "");
+	header.dataset.dagNodeId = String(node.nodeId ?? "");
+	const nodeLabel = header.querySelector(".dag-inspector-node");
+	if (nodeLabel) nodeLabel.textContent = node.nodeId;
+	const status = header.querySelector(".dag-inspector-status");
+	if (status) {
+		const next = badge(node.status ?? "unknown");
+		next.classList.add("dag-inspector-status");
+		status.replaceWith(next);
+	}
+	for (const button of header.querySelectorAll(".dag-inspector-tab")) {
+		const selected = button.dataset.tab === uiState.dagInspectorTab;
+		button.setAttribute("aria-selected", String(selected));
+		button.tabIndex = selected ? 0 : -1;
+	}
+}
+
+function dagInspectorSignature(dagRunId, node) {
+	const tab = activeInspectorTab();
+	const execKey = effectiveExecutionKey(dagRunId, node);
+	const cachedBody = execKey
+		? getDagNodeExecutionOutputCache(dagRunId, node.nodeId, execKey)
+		: null;
+	const cachedRevision = cachedBody?.ok
+		? [
+				cachedBody.body?.assistantText ?? "",
+				cachedBody.body?.stdout ?? "",
+				cachedBody.body?.stderr ?? "",
+				cachedBody.body?.truncated === true ? "trunc" : "full",
+				cachedBody.body?.maxBytes ?? "",
+			]
+		: cachedBody
+			? ["err", cachedBody.error ?? ""]
+			: ["none"];
+	const contentRevision =
+		tab === "output"
+			? [
+					node.outputPreview ?? "",
+					node.errorPreview ?? "",
+					...cachedRevision,
+					uiState.dagNodeExecutionOutputLoading ? "loading" : "idle",
+				]
+			: tab === "timeline"
+				? [uiState.sessionEventOffset]
+				: [node.status ?? ""];
+	// Attempt dimension: selection identity + history shape. Poll refreshes keep
+	// the DOM while selection/history are unchanged; switching attempt or a
+	// changed attempt count rebuilds the selector.
+	const summary = node.executionSummary;
+	const attemptRevision = [
+		summary?.totalAttemptCount ?? 0,
+		(node.passes ?? []).join(","),
+		execKey ?? "latest",
+	];
+	return JSON.stringify([
+		dagRunId,
+		node.nodeId,
+		tab,
+		attemptRevision,
+		contentRevision,
+	]);
+}
+
+export function renderDagInspector(dagRunId, node, initial = true) {
+	// Record the current selection before any early-return so tab handlers
+	// (which reference the mutable inspectorSelection slot) always re-render
+	// the currently selected node, never a stale build-time closure.
+	inspectorSelection.dagRunId = dagRunId;
+	inspectorSelection.node = node;
+	const panel = document.getElementById("dag-inspector");
+	if (!panel) return;
+	captureDagTimelineViewportState(panel);
+	if (!uiState.dagInspectorOpen || !node) {
+		panel.classList.remove("is-open");
+		panel.setAttribute("aria-hidden", "true");
+		return;
+	}
+
+	// Defer tearing down the inspector shell while the user is actively
+	// dragging the resize handle (or the graph) so the pointer-capture target
+	// is not destroyed mid-gesture; the next poll refreshes the content.
+	if (isInteractiveGestureActive(document.body.classList)) {
+		return;
+	}
+
+	const existingContent = panel.querySelector(".dag-inspector-content") ?? null;
+	const reuseShell = !initial && Boolean(existingContent);
+	const nextContentSignature = dagInspectorSignature(dagRunId, node);
+
+	if (reuseShell && existingContent) {
+		panel.classList.add("is-open");
+		panel.setAttribute("aria-hidden", "false");
+		syncDagInspectorHeader(panel, dagRunId, node);
+		// AC-003: signature unchanged → keep content DOM; header already synced.
+		if (panel.dataset.contentSignature === nextContentSignature) return;
+		const previousNode = existingContent.dataset.dagNodeId ?? "";
+		const previousRun = existingContent.dataset.dagRunId ?? "";
+		const previousTab =
+			existingContent.dataset.inspectorTab ?? activeInspectorTab();
+		const nodeChanged =
+			previousNode !== String(node.nodeId ?? "") ||
+			previousRun !== String(dagRunId ?? "");
+		const activeTab = activeInspectorTab();
+		// Capture scroll for the outgoing context before rebuild.
+		saveInspectorContentScroll(
+			existingContent,
+			previousRun || dagRunId,
+			previousNode || node.nodeId,
+			previousTab,
+			{ preserveIntent: true },
+		);
+		const nestedViewportState = [
+			...existingContent.querySelectorAll("pre"),
+		].map((pre) => ({
+			scrollLeft: pre.scrollLeft,
+			scrollTop: pre.scrollTop,
+		}));
+		clearNode(existingContent);
+		fillDagInspectorContent(existingContent, dagRunId, node);
+		// Async tabs restore themselves after fetch; sync tabs restore here.
+		if (activeTab === "output" || activeTab === "timeline") {
+			restoreInspectorContentScroll(
+				existingContent,
+				dagRunId,
+				node.nodeId,
+				activeTab,
+			);
+		}
+		if (!nodeChanged && previousTab === activeTab) {
+			for (const [index, pre] of [
+				...existingContent.querySelectorAll("pre"),
+			].entries()) {
+				const previous = nestedViewportState[index];
+				if (!previous) continue;
+				pre.scrollLeft = previous.scrollLeft;
+				pre.scrollTop = previous.scrollTop;
+			}
+		}
+		panel.dataset.contentSignature = nextContentSignature;
+		return;
+	}
+
+	clearNode(panel);
+	panel.classList.add("is-open");
+	panel.setAttribute("aria-hidden", "false");
+	panel.appendChild(createDagInspectorResizeHandle(panel));
+	panel.appendChild(buildDagInspectorHeader(dagRunId, node));
+
+	const content = el("div", "dag-inspector-content");
+	fillDagInspectorContent(content, dagRunId, node);
+	panel.appendChild(content);
+	panel.dataset.contentSignature = nextContentSignature;
+}
+
+/**
+ * Bounded event history UI. Uses opaque `cursor`/`nextCursor` (not SSE/run `after` offsets).
+ */