@tea-agent/loop-agent 0.26.0 → 0.26.2

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

@@ -23,6 +23,9 @@ import {
 	updateDagOutputViewportState,
 	computeFollowLatest,
 	isInteractiveGestureActive,
+	inspectorViewportRegionKey,
+	saveDagInspectorViewportState,
+	getDagInspectorViewportState,
 } from "../state.js";
 import {
 	formatSessionEventTime,
@@ -37,7 +40,11 @@ const inspectorSelection = { dagRunId: null, node: null };
 
 function renderDagInspectorForCurrent() {
 	if (!inspectorSelection.dagRunId || !inspectorSelection.node) return;
-	renderDagInspector(inspectorSelection.dagRunId, inspectorSelection.node, false);
+	renderDagInspector(
+		inspectorSelection.dagRunId,
+		inspectorSelection.node,
+		false,
+	);
 }
 
 export function selectDagNode(dagRunId, nodeId) {
@@ -132,9 +139,7 @@ export function createDagInspectorResizeHandle(panel) {
 	const updateRange = (requestedWidth) => {
 		const range = setDagInspectorWidth(
 			panel,
-			requestedWidth ??
-				uiState.dagInspectorWidth ??
-				dagInspectorDefaultWidth(),
+			requestedWidth ?? uiState.dagInspectorWidth ?? dagInspectorDefaultWidth(),
 		);
 		handle.setAttribute("aria-valuemin", String(range.minimum));
 		handle.setAttribute("aria-valuemax", String(range.maximum));
@@ -200,16 +205,27 @@ export function captureDagTimelineViewportState(panel) {
 }
 
 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)) return;
+	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;
@@ -238,7 +254,12 @@ async function renderSpecEvidence(content, dagRunId, nodeId, cachedEvidence) {
 	}
 	content.appendChild(statusSection);
 
-	const appendListSection = (title, entries, renderEntry, emptyMessage = "") => {
+	const appendListSection = (
+		title,
+		entries,
+		renderEntry,
+		emptyMessage = "",
+	) => {
 		if (!entries?.length && !emptyMessage) return;
 		const section = el("div", "spec-evidence-section");
 		section.appendChild(el("h4", null, title));
@@ -253,36 +274,55 @@ async function renderSpecEvidence(content, dagRunId, nodeId, cachedEvidence) {
 		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(
+		"注入的 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),
+	);
 	const openspecReadPaths = new Set(
 		(evidence.openspecReads ?? []).map((entry) => entry.path),
 	);
@@ -316,7 +356,14 @@ async function renderSpecEvidence(content, dagRunId, nodeId, cachedEvidence) {
 				);
 			}
 			button.addEventListener("click", () =>
-				onSpecEvidenceFileClick(content, dagRunId, nodeId, "read", read.path, button),
+				onSpecEvidenceFileClick(
+					content,
+					dagRunId,
+					nodeId,
+					"read",
+					read.path,
+					button,
+				),
 			);
 			item.appendChild(button);
 			return item;
@@ -329,7 +376,10 @@ async function renderSpecEvidence(content, dagRunId, nodeId, cachedEvidence) {
 			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}`));
+			item.append(
+				icon,
+				document.createTextNode(` ${search.tool}: ${search.query}`),
+			);
 			return item;
 		},
 	);
@@ -374,7 +424,14 @@ async function renderSpecEvidence(content, dagRunId, nodeId, cachedEvidence) {
 				);
 			}
 			button.addEventListener("click", () =>
-				onSpecEvidenceFileClick(content, dagRunId, nodeId, "read", read.path, button),
+				onSpecEvidenceFileClick(
+					content,
+					dagRunId,
+					nodeId,
+					"read",
+					read.path,
+					button,
+				),
 			);
 			item.appendChild(button);
 			return item;
@@ -391,13 +448,20 @@ async function renderSpecEvidence(content, dagRunId, nodeId, cachedEvidence) {
 			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}`));
+			item.append(
+				icon,
+				document.createTextNode(` ${search.tool}: ${search.query}`),
+			);
 			return item;
 		},
 		"unavailable：未观察到 openspec 检索。",
 	);
 
-	if (evidence.status === "source-bound" || evidence.status === "spec-injected" || evidence.status === "no-evidence") {
+	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");
@@ -407,12 +471,13 @@ async function renderSpecEvidence(content, dagRunId, nodeId, cachedEvidence) {
 				evidence.status === "source-bound"
 					? "DAG 已绑定权威任务源及内容哈希，但尚未观察到成功的 read 工具调用；绑定证明上下文来源，read 事件才证明节点读取了完整文件。"
 					: evidence.status === "no-evidence"
-					? "未观察到规范读取。只有 session event 中成功配对的 read 工具调用才算已读取，模型总结或文件名命中不能作为证明。"
-					: "规范 skill 已注入，但未观察到规范读取或知识库查询；grep/find/ls 只能证明检索，不能替代 read。",
+						? "未观察到规范读取。只有 session event 中成功配对的 read 工具调用才算已读取，模型总结或文件名命中不能作为证明。"
+						: "规范 skill 已注入，但未观察到规范读取或知识库查询；grep/find/ls 只能证明检索，不能替代 read。",
 			),
 		);
 		content.appendChild(warning);
 	}
+	restoreInspectorContentScroll(content, dagRunId, nodeId, "spec-evidence");
 }
 
 /**
@@ -420,14 +485,26 @@ async function renderSpecEvidence(content, dagRunId, nodeId, cachedEvidence) {
  * 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) {
+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);
+			const data = await fetchSpecEvidenceFile(
+				dagRunId,
+				nodeId,
+				source,
+				relPath,
+			);
 			if (
 				!content.isConnected ||
 				content.dataset.dagNodeId !== String(nodeId) ||
@@ -464,7 +541,12 @@ function renderSpecEvidenceDetail(content, dagRunId, nodeId) {
 	const detail = uiState.specEvidenceDetail;
 	clearNode(content);
 	if (!detail) {
-		renderSpecEvidence(content, dagRunId, nodeId, uiState.specEvidenceListEvidence);
+		renderSpecEvidence(
+			content,
+			dagRunId,
+			nodeId,
+			uiState.specEvidenceListEvidence,
+		);
 		return;
 	}
 
@@ -481,7 +563,12 @@ function renderSpecEvidenceDetail(content, dagRunId, nodeId) {
 		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);
+		renderSpecEvidence(
+			content,
+			dagRunId,
+			nodeId,
+			uiState.specEvidenceListEvidence,
+		);
 		if (closed?.triggerId) {
 			const trigger = document.getElementById(closed.triggerId);
 			trigger?.focus();
@@ -516,7 +603,11 @@ function renderSpecEvidenceDetail(content, dagRunId, nodeId) {
 		loading.setAttribute("aria-live", "polite");
 		wrapper.appendChild(loading);
 	} else if (detail.error) {
-		const error = el("p", "spec-evidence-detail-error", `加载失败：${detail.error}`);
+		const error = el(
+			"p",
+			"spec-evidence-detail-error",
+			`加载失败：${detail.error}`,
+		);
 		error.setAttribute("role", "alert");
 		wrapper.appendChild(error);
 	} else if (detail.data) {
@@ -533,6 +624,7 @@ function renderSpecEvidenceDetail(content, dagRunId, nodeId) {
 		}
 	}
 	content.appendChild(wrapper);
+	restoreInspectorContentScroll(content, dagRunId, nodeId, "spec-evidence");
 }
 
 function sourceLabel(source) {
@@ -573,9 +665,7 @@ function appendCodeList(parent, title, values) {
 
 function renderDagNodeInputDetail(content, data) {
 	const wrap = el("div", "node-input-root");
-	wrap.appendChild(
-		el("p", "node-input-semantics", UI_TEXT.inputFrozenLabel),
-	);
+	wrap.appendChild(el("p", "node-input-semantics", UI_TEXT.inputFrozenLabel));
 
 	if (data.summary) {
 		const section = el("section", "node-input-section");
@@ -747,17 +837,10 @@ function renderDagNodeInputDetail(content, data) {
 			data.promptFingerprint.sha256Prefix ?? "(parse failed)",
 			null,
 		);
-		appendMetaRow(
-			dl,
-			"lengthChars",
-			data.promptFingerprint.lengthChars,
-			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),
-		);
+		section.appendChild(el("p", "muted", UI_TEXT.inputFingerprintNote));
 		wrap.appendChild(section);
 	}
 
@@ -793,6 +876,10 @@ async function renderDagNodeInput(content, dagRunId, node) {
 	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");
@@ -812,8 +899,11 @@ async function renderDagNodeInput(content, dagRunId, node) {
 		return;
 	}
 
-	uiState.dagNodeInputLoading = false;
 	clearNode(content);
+	const finishInputRender = () => {
+		restoreInspectorContentScroll(content, dagRunId, nodeId, "input");
+		uiState.dagNodeInputLoading = false;
+	};
 
 	if (!result.ok) {
 		const message =
@@ -826,6 +916,7 @@ async function renderDagNodeInput(content, dagRunId, node) {
 		const error = el("p", "node-input-error", message);
 		error.setAttribute("role", "alert");
 		content.appendChild(error);
+		finishInputRender();
 		return;
 	}
 
@@ -845,57 +936,198 @@ async function renderDagNodeInput(content, dagRunId, node) {
 				content.appendChild(el("p", "node-input-warning", String(warning)));
 			}
 		}
+		finishInputRender();
 		return;
 	}
 
 	renderDagNodeInputDetail(content, data);
+	finishInputRender();
 }
 
-	function fillDagInspectorContent(content, dagRunId, node) {
-		const previousRenderedNode = content.dataset.dagNodeId ?? "";
-		const previousRenderedRun = content.dataset.dagRunId ?? "";
-		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;
+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;
 		}
-		const activeTab = ["input", "timeline", "spec-evidence"].includes(
-			uiState.dagInspectorTab,
-		)
-			? uiState.dagInspectorTab
-			: "output";
-		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 ?? "");
-		// Drop timeline-only classes when switching tabs so output layout stays clean.
-		content.className = "dag-inspector-content";
-		if (activeTab === "spec-evidence") {
-			void renderSpecEvidence(content, dagRunId, node.nodeId);
-		} else if (activeTab === "timeline") {
-			renderSessionTimeline(content, node.nodeId);
-		} else if (activeTab === "input") {
-			void renderDagNodeInput(content, dagRunId, node);
-		} else if (!node.outputPreview && !node.errorPreview) {
-			content.appendChild(el("p", "empty", UI_TEXT.noOutput));
-		} else {
-			if (node.outputPreview)
-				content.appendChild(renderMarkdown(node.outputPreview));
-			if (node.errorPreview) {
-				const error = el("section", "markdown-error");
-				error.appendChild(el("p", "markdown-error-title", "错误输出"));
-				error.appendChild(renderMarkdown(node.errorPreview));
-				content.appendChild(error);
+		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 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") {
+		renderSessionTimeline(content, node.nodeId);
+	} else if (activeTab === "input") {
+		void renderDagNodeInput(content, dagRunId, node);
+	} else if (!node.outputPreview && !node.errorPreview) {
+		content.appendChild(el("p", "empty", UI_TEXT.noOutput));
+		restoreInspectorContentScroll(content, dagRunId, node.nodeId, "output");
+	} else {
+		if (node.outputPreview)
+			content.appendChild(renderMarkdown(node.outputPreview));
+		if (node.errorPreview) {
+			const error = el("section", "markdown-error");
+			error.appendChild(el("p", "markdown-error-title", "错误输出"));
+			error.appendChild(renderMarkdown(node.errorPreview));
+			content.appendChild(error);
+		}
+		restoreInspectorContentScroll(content, dagRunId, node.nodeId, "output");
 	}
+}
 
 function buildDagInspectorHeader(dagRunId, node) {
 	const header = el("div", "dag-inspector-header");
@@ -990,25 +1222,18 @@ function syncDagInspectorHeader(panel, dagRunId, node) {
 }
 
 function dagInspectorSignature(dagRunId, node) {
-	const inputRevision =
-		uiState.dagInspectorTab === "input"
-			? [
-					uiState.dagNodeInputIdentity,
-					uiState.dagNodeInputLoading,
-					uiState.dagNodeInputError ?? "",
-					uiState.dagNodeInputData?.availabilityReason ?? "",
-					uiState.dagNodeInputData?.promptFingerprint?.sha256Prefix ?? "",
-					node.status ?? "",
-				]
-			: null;
+	const tab = activeInspectorTab();
+	const contentRevision =
+		tab === "output"
+			? [node.outputPreview ?? "", node.errorPreview ?? ""]
+			: tab === "timeline"
+				? [uiState.sessionEventOffset]
+				: [node.status ?? ""];
 	return JSON.stringify([
 		dagRunId,
 		node.nodeId,
-		uiState.dagInspectorTab,
-		node.outputPreview ?? "",
-		node.errorPreview ?? "",
-		uiState.dagInspectorTab === "timeline" ? uiState.sessionEventOffset : null,
-		inputRevision,
+		tab,
+		contentRevision,
 	]);
 }
 
@@ -1042,36 +1267,23 @@ export function renderDagInspector(dagRunId, node, initial = true) {
 		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 = ["input", "timeline", "spec-evidence"].includes(
-			uiState.dagInspectorTab,
-		)
-			? uiState.dagInspectorTab
-			: "output";
-		const isInputTab = activeTab === "input";
-		const followLatest = isInputTab
-			? false
-			: nodeChanged ||
-				computeFollowLatest(
-					existingContent.scrollTop,
-					existingContent.scrollHeight,
-					existingContent.clientHeight,
-				);
-		const regionKey = `dag:${dagRunId}:${node.nodeId}:${isInputTab ? "input" : "output"}`;
-		const viewportUpdater = isInputTab
-			? "dagNodeInputViewportState"
-			: "dagNodeOutputViewportState";
-		uiState[viewportUpdater] = updateDagOutputViewportState(
-			uiState[viewportUpdater],
-			regionKey,
-			existingContent.scrollLeft,
-			existingContent.scrollTop,
-			followLatest,
+		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"),
@@ -1081,19 +1293,24 @@ export function renderDagInspector(dagRunId, node, initial = true) {
 		}));
 		clearNode(existingContent);
 		fillDagInspectorContent(existingContent, dagRunId, node);
-		if (followLatest) {
-			existingContent.scrollTop = existingContent.scrollHeight;
-		} else {
-			const saved = uiState[viewportUpdater];
-			existingContent.scrollTop = nodeChanged ? 0 : (saved?.scrollTop ?? 0);
+		// Async tabs restore themselves after fetch; sync tabs restore here.
+		if (activeTab === "output" || activeTab === "timeline") {
+			restoreInspectorContentScroll(
+				existingContent,
+				dagRunId,
+				node.nodeId,
+				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;
+		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;