@tea-agent/loop-agent 0.30.0 → 0.31.0

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

@@ -1,18 +1,29 @@
 /** DAG dependency graph rendering (Observe UI R5). */
 import { layoutDag } from "../dag-layout.js";
+import {
+	assignControlLanes,
+	controlLaneMetrics,
+	edgeCollidesNonEndpointNodes,
+	routeControlEdge,
+} from "../dag-edge-routing.js";
 import { el } from "../dom.js";
 import {
 	statusLabel,
 	statusSymbol,
 	formatMs,
-	truncateText,
+	truncateDisplayText,
 } from "../format.js";
 import {
 	uiState,
 	dagGraphViewportStates,
+	dagTrajectoryViewportStates,
 	updateDagGraphViewportState,
+	updateDagTrajectoryViewportState,
+	setDagGraphViewMode,
+	currentDagGraphViewMode,
 } from "../state.js";
 import { selectDagNode } from "./dag-inspector.js";
+import { renderTrajectoryStoryboard } from "./dag-trajectory.js";
 
 export function svgEl(tag, attrs = {}) {
 	const node = document.createElementNS("http://www.w3.org/2000/svg", tag);
@@ -21,10 +32,110 @@ export function svgEl(tag, attrs = {}) {
 	return node;
 }
 
+/** Card geometry: compact 3-line card vs 4-line history card. */
+const NODE_HEIGHT_BASE = 92;
+const NODE_HEIGHT_WITH_HISTORY = 108;
+const NODE_TEXT = {
+	labelY: 24,
+	executorY: 44,
+	statusY: 66,
+	historyY: 88,
+};
+
+const GRAPH_MODE_TABS = [
+	{ mode: "topology", label: "逻辑拓扑" },
+	{ mode: "trajectory", label: "执行轨迹" },
+];
+
+function hasHistoryLabel(node) {
+	return (
+		typeof node?.executionSummary?.historyLabel === "string" &&
+		Boolean(node.executionSummary.historyLabel.trim())
+	);
+}
+
+/** Visible primary control-loop count (Chinese label uses 修复回环 ×N). */
+function controlLoopCount(dag) {
+	const conv = dag?.convergence;
+	if (conv?.enabled && Number.isFinite(Number(conv.currentPass))) {
+		return Math.max(1, Number(conv.currentPass) - 1);
+	}
+	if (Array.isArray(conv?.passHistory) && conv.passHistory.length > 0) {
+		return Math.max(1, conv.passHistory.length);
+	}
+	return 1;
+}
+
+/** Raw pass range for title/diagnostics only (not primary label). */
+function controlPassRangeLabel(dag) {
+	const conv = dag?.convergence;
+	if (!conv?.enabled) return "";
+	const current = Number(conv.currentPass);
+	if (!Number.isFinite(current) || current < 2) return "";
+	return `P${current - 1} → P${current}`;
+}
+
+/**
+ * 双视图 segmented control（AC-001）：role=tab + aria-selected + roving
+ * tabIndex；ArrowLeft/ArrowRight 循环、Enter/Space 激活。切换后写入
+ * dagGraphViewModes(dagRunId) 并就地重绘图区域（不依赖 fetch）。
+ */
+function buildGraphModeSwitch(dag, dagRunId, wrap, mode) {
+	const switchEl = el("div", "dag-graph-mode-switch");
+	switchEl.setAttribute("role", "tablist");
+	switchEl.setAttribute("aria-label", "图视图模式");
+	const activate = (nextMode) => {
+		if (nextMode === mode) return;
+		setDagGraphViewMode(dagRunId, nextMode);
+		renderDagGraph(dag, dagRunId, wrap);
+		// Restore keyboard focus to the newly selected tab after rebuild.
+		wrap.querySelector?.('.dag-graph-mode-tab[aria-selected="true"]')?.focus?.();
+	};
+	GRAPH_MODE_TABS.forEach((tab, index) => {
+		const selected = tab.mode === mode;
+		const button = document.createElement("button");
+		button.type = "button";
+		button.className = "dag-graph-mode-tab";
+		button.setAttribute("role", "tab");
+		button.setAttribute("aria-selected", String(selected));
+		button.setAttribute("tabindex", selected ? "0" : "-1");
+		button.textContent = tab.label;
+		button.addEventListener("click", () => activate(tab.mode));
+		button.addEventListener("keydown", (event) => {
+			if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+				event.preventDefault();
+				const delta = event.key === "ArrowRight" ? 1 : -1;
+				const next = GRAPH_MODE_TABS[
+					(index + delta + GRAPH_MODE_TABS.length) % GRAPH_MODE_TABS.length
+				];
+				activate(next.mode);
+			} else if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				activate(tab.mode);
+			}
+		});
+		switchEl.appendChild(button);
+	});
+	return switchEl;
+}
+
 export function renderDagGraph(dag, dagRunId, existingWrap = null) {
 	const nodes = dag.nodes ?? [];
 	const edges = dag.edges ?? [];
-	const layout = layoutDag(nodes, edges, dag.ranks ?? []);
+	const mode = currentDagGraphViewMode(dagRunId);
+	const nodeHeights = Object.fromEntries(
+		nodes.map((node) => [
+			node.nodeId,
+			hasHistoryLabel(node) ? NODE_HEIGHT_WITH_HISTORY : NODE_HEIGHT_BASE,
+		]),
+	);
+	// controlEdges never enter topology; only reserve presentation lanes.
+	const controlEdgeList = Array.isArray(dag.controlEdges) ? dag.controlEdges : [];
+	const controlLaneCount = controlEdgeList.length;
+	const layout = layoutDag(nodes, edges, dag.ranks ?? [], {
+		nodeHeights,
+		controlLaneCount,
+	});
 	const wrap = existingWrap ?? el("div", "dag-graph-wrap");
 	// Preserve .dag-graph-viewport DOM identity across poll refreshes so the
 	// user's active scroll/pointer target is not destroyed mid-gesture.
@@ -44,15 +155,19 @@ export function renderDagGraph(dag, dagRunId, existingWrap = null) {
 		}
 	}
 	const toolbar = el("div", "dag-graph-toolbar");
-	let summaryText = `${nodes.length} 节点 · ${layout.edges.length} 条依赖`;
+	const toolbarLeft = el("div", "dag-graph-toolbar-left");
+	toolbarLeft.appendChild(buildGraphModeSwitch(dag, dagRunId, wrap, mode));
+	let summaryText = `${nodes.length} 节点 · ${edges.length} 条依赖`;
 	const convergence = dag.convergence;
 	if (convergence?.enabled) {
-		summaryText += ` · pass ${convergence.currentPass}/${convergence.maxPasses}`;
+		// AC-003：工具栏摘要使用中文「修复轮次 x/y」，不以裸 P1/P2 为主文案。
+		summaryText += ` · 修复轮次 ${convergence.currentPass}/${convergence.maxPasses}`;
 		if (convergence.terminalReason) {
 			summaryText += ` · ${convergence.terminalReason}`;
 		}
 	}
-	toolbar.appendChild(el("span", "dag-graph-summary", summaryText));
+	toolbarLeft.appendChild(el("span", "dag-graph-summary", summaryText));
+	toolbar.appendChild(toolbarLeft);
 	const reset = el("button", "dag-graph-reset", "重置视图");
 	toolbar.appendChild(reset);
 	const appendBeforeViewport = (child) => {
@@ -60,143 +175,237 @@ export function renderDagGraph(dag, dagRunId, existingWrap = null) {
 		else wrap.appendChild(child);
 	};
 	appendBeforeViewport(toolbar);
-	if (edges.length === 0) {
-		appendBeforeViewport(
-			el(
-				"p",
-				"dag-graph-fallback",
-				"该运行没有可用依赖数据；图按并行层级展示，节点表格仍保留完整数据。",
-			),
-		);
-	}
 	if (!viewport) {
 		viewport = el("div", "dag-graph-viewport");
 	}
 	viewport.dataset.dagRunId = dagRunId;
-	const svg = svgEl("svg", {
-		class: "dag-graph",
-		viewBox: `0 0 ${layout.width} ${layout.height}`,
-		width: layout.width,
-		height: layout.height,
-		role: "img",
-		"aria-label": `DAG 依赖图，共 ${nodes.length} 个节点`,
-	});
-	const defs = svgEl("defs");
-	const marker = svgEl("marker", {
-		id: "dag-arrow",
-		viewBox: "0 0 10 10",
-		refX: 9,
-		refY: 5,
-		markerWidth: 7,
-		markerHeight: 7,
-		orient: "auto-start-reverse",
-	});
-	marker.appendChild(svgEl("path", { d: "M 0 0 L 10 5 L 0 10 z" }));
-	defs.appendChild(marker);
-	const controlMarker = svgEl("marker", {
-		id: "dag-arrow-control",
-		viewBox: "0 0 10 10",
-		refX: 9,
-		refY: 5,
-		markerWidth: 7,
-		markerHeight: 7,
-		orient: "auto-start-reverse",
-	});
-	controlMarker.appendChild(svgEl("path", { d: "M 0 0 L 10 5 L 0 10 z" }));
-	defs.appendChild(controlMarker);
-	svg.appendChild(defs);
-	const related = new Set([uiState.selectedDagNodeId]);
-	for (const edge of layout.edges)
-		if (
-			edge.from === uiState.selectedDagNodeId ||
-			edge.to === uiState.selectedDagNodeId
-		) {
-			related.add(edge.from);
-			related.add(edge.to);
+
+	if (mode === "trajectory") {
+		// 执行轨迹：lane storyboard / 空态 / 警示横幅 / 纵向降级列表。
+		renderTrajectoryStoryboard(dag, dagRunId, viewport, () =>
+			renderDagGraph(dag, dagRunId, wrap),
+		);
+	} else {
+		if (edges.length === 0) {
+			appendBeforeViewport(
+				el(
+					"p",
+					"dag-graph-fallback",
+					"该运行没有可用依赖数据；图按并行层级展示，节点表格仍保留完整数据。",
+				),
+			);
 		}
-	for (const edge of layout.edges) {
-		const path = svgEl("path", {
-			d: edge.path,
-			class: `dag-edge${uiState.selectedDagNodeId && (!related.has(edge.from) || !related.has(edge.to)) ? " dag-dimmed" : ""}`,
-			"marker-end": "url(#dag-arrow)",
+		const svg = svgEl("svg", {
+			class: "dag-graph",
+			viewBox: `0 0 ${layout.width} ${layout.height}`,
+			width: layout.width,
+			height: layout.height,
+			role: "img",
+			"aria-label": `DAG 依赖图，共 ${nodes.length} 个节点`,
 		});
-		path.appendChild(svgEl("title"));
-		path.firstChild.textContent = `${edge.from} → ${edge.to}`;
-		svg.appendChild(path);
-	}
-	// 控制回环：仅由 read model 派生（dag.controlEdges），不进 layout、不参与拓扑。
-	// 路径从 review-gate-shell 左侧绕回 repair-pi 右侧，避开节点矩形。
-	const layoutByNode = new Map(layout.nodes.map((n) => [n.nodeId, n]));
-	for (const ctrl of dag.controlEdges ?? []) {
-		const from = layoutByNode.get(ctrl.from);
-		const to = layoutByNode.get(ctrl.to);
-		if (!from || !to) continue;
-		const x1 = from.x;
-		const y1 = from.y + from.height / 2;
-		const x2 = to.x + to.width;
-		const y2 = to.y + to.height / 2;
-		const lift = Math.max(48, (from.x - to.x) / 2);
-		const rise = Math.max(40, Math.abs(from.y - to.y) / 2 + 16);
-		const path = svgEl("path", {
-			d: `M ${x1} ${y1} C ${x1 - lift} ${y1 - rise}, ${x2 + lift} ${y2 - rise}, ${x2} ${y2}`,
-			class: "dag-edge dag-edge-control",
-			"marker-end": "url(#dag-arrow-control)",
+		const defs = svgEl("defs");
+		const marker = svgEl("marker", {
+			id: "dag-arrow",
+			viewBox: "0 0 10 10",
+			refX: 9,
+			refY: 5,
+			markerWidth: 7,
+			markerHeight: 7,
+			orient: "auto-start-reverse",
 		});
-		path.appendChild(svgEl("title"));
-		path.firstChild.textContent = `${ctrl.from} → ${ctrl.to} (control loop)`;
-		svg.appendChild(path);
-	}
-	const byId = Object.fromEntries(nodes.map((node) => [node.nodeId, node]));
-	for (const position of layout.nodes) {
-		const node = byId[position.nodeId] ?? { nodeId: position.nodeId };
-		const status = (node.status ?? "unknown").toLowerCase();
-		const group = svgEl("g", {
-			transform: `translate(${position.x} ${position.y})`,
-			class: `dag-graph-node status-${status}${node.nodeId === uiState.selectedDagNodeId ? " selected" : ""}${uiState.selectedDagNodeId && !related.has(node.nodeId) ? " dag-dimmed" : ""}`,
-			tabindex: 0,
-			role: "button",
-			"aria-label": `${node.nodeId}，状态 ${status}`,
+		marker.appendChild(svgEl("path", { d: "M 0 0 L 10 5 L 0 10 z" }));
+		defs.appendChild(marker);
+		const controlMarker = svgEl("marker", {
+			id: "dag-arrow-control",
+			viewBox: "0 0 10 10",
+			refX: 9,
+			refY: 5,
+			markerWidth: 7,
+			markerHeight: 7,
+			orient: "auto-start-reverse",
 		});
-		group.appendChild(
-			svgEl("rect", { width: position.width, height: position.height, rx: 10 }),
-		);
-		const title = svgEl("title");
-		title.textContent = `${node.nodeId}\n${node.executor ?? "未知执行器"}\n${status}`;
-		group.appendChild(title);
-		const label = svgEl("text", { x: 14, y: 26, class: "dag-node-label" });
-		label.textContent = truncateText(node.label ?? node.nodeId, 26);
-		group.appendChild(label);
-		const executor = svgEl("text", { x: 14, y: 50, class: "dag-node-meta" });
-		executor.textContent = `◈ ${node.executor ?? "unknown"}`;
-		group.appendChild(executor);
-		const state = svgEl("text", { x: 14, y: 74, class: "dag-node-status" });
-		let stateText = `${statusSymbol(status)} ${statusLabel(node.status)} · ${formatMs(node.durationMs)}`;
-		if (node.passes?.length) {
-			stateText += ` · P${node.passes.join(",")}`;
+		controlMarker.appendChild(svgEl("path", { d: "M 0 0 L 10 5 L 0 10 z" }));
+		defs.appendChild(controlMarker);
+		svg.appendChild(defs);
+		const related = new Set([uiState.selectedDagNodeId]);
+		for (const edge of layout.edges)
+			if (
+				edge.from === uiState.selectedDagNodeId ||
+				edge.to === uiState.selectedDagNodeId
+			) {
+				related.add(edge.from);
+				related.add(edge.to);
+			}
+		for (const edge of layout.edges) {
+			const path = svgEl("path", {
+				d: edge.path,
+				class: `dag-edge${uiState.selectedDagNodeId && (!related.has(edge.from) || !related.has(edge.to)) ? " dag-dimmed" : ""}`,
+				"marker-end": "url(#dag-arrow)",
+			});
+			path.appendChild(svgEl("title"));
+			path.firstChild.textContent = `${edge.from} → ${edge.to}`;
+			svg.appendChild(path);
 		}
-		if (node.attemptCount > 0) {
-			stateText += ` · attempt ${node.attemptCount}`;
+		// 控制回环：仅由 read model 派生（dag.controlEdges），不进拓扑。
+		// 独立顶部 lane + rounded-orthogonal；标签锚定顶部水平段中部。
+		const layoutByNode = new Map(layout.nodes.map((n) => [n.nodeId, n]));
+		const assignedControl = assignControlLanes(controlEdgeList, layoutByNode);
+		const laneMetrics = controlLaneMetrics(assignedControl.length);
+		let minX = 0;
+		let maxX = layout.width;
+		let maxY = layout.height;
+		const controlDraw = [];
+		for (const ctrl of assignedControl) {
+			const from = layoutByNode.get(ctrl.from);
+			const to = layoutByNode.get(ctrl.to);
+			if (!from || !to) continue;
+			const routed = routeControlEdge(from, to, ctrl.laneIndex, {
+				controlLaneHeight: laneMetrics.laneHeight,
+				controlLaneTop: laneMetrics.laneTop,
+			});
+			const collides = edgeCollidesNonEndpointNodes(
+				routed.points,
+				layout.nodes,
+				ctrl.from,
+				ctrl.to,
+			);
+			for (const p of routed.points) {
+				minX = Math.min(minX, p.x);
+				maxX = Math.max(maxX, p.x + 24);
+				maxY = Math.max(maxY, p.y + 24);
+			}
+			const passRange = controlPassRangeLabel(dag);
+			const titleText = `${ctrl.from} → ${ctrl.to} (control loop)${passRange ? ` ${passRange}` : ""}${collides ? " [routing-collision]" : ""}`;
+			// Prefer router-provided top-lane midpoint so the label is not on a corner.
+			const labelX =
+				Number.isFinite(routed.labelX)
+					? routed.labelX
+					: (from.x + to.x + to.width) / 2;
+			const labelY =
+				Number.isFinite(routed.labelY) ? routed.labelY : routed.laneY - 8;
+			controlDraw.push({
+				path: routed.path,
+				titleText,
+				labelX,
+				labelY,
+				labelText: `修复回环 ×${controlLoopCount(dag)}`,
+			});
 		}
-		state.textContent = stateText;
-		group.appendChild(state);
-		const activate = () => selectDagNode(dagRunId, node.nodeId);
-		group.addEventListener("click", activate);
-		group.addEventListener("keydown", (event) => {
-			if (event.key === "Enter" || event.key === " ") {
-				event.preventDefault();
-				activate();
+		const originX = minX < 0 ? minX - 16 : 0;
+		const viewWidth = Math.max(layout.width, maxX) - originX;
+		const viewHeight = Math.max(layout.height, maxY);
+		svg.setAttribute(
+			"viewBox",
+			`${originX} 0 ${viewWidth} ${viewHeight}`,
+		);
+		svg.setAttribute("width", String(viewWidth));
+		svg.setAttribute("height", String(viewHeight));
+		for (const item of controlDraw) {
+			const path = svgEl("path", {
+				d: item.path,
+				class: "dag-edge dag-edge-control",
+				"marker-end": "url(#dag-arrow-control)",
+			});
+			path.appendChild(svgEl("title"));
+			path.firstChild.textContent = item.titleText;
+			svg.appendChild(path);
+			const text = svgEl("text", {
+				x: item.labelX,
+				y: item.labelY,
+				class: "dag-edge-control-label",
+				"text-anchor": "middle",
+			});
+			text.textContent = item.labelText;
+			const title = svgEl("title");
+			title.textContent = item.titleText;
+			text.appendChild(title);
+			svg.appendChild(text);
+		}
+		const byId = Object.fromEntries(nodes.map((node) => [node.nodeId, node]));
+		for (const position of layout.nodes) {
+			const node = byId[position.nodeId] ?? { nodeId: position.nodeId };
+			const status = (node.status ?? "unknown").toLowerCase();
+			// 仅有叙事价值的历史才上卡（多 attempt / 多 pass）；"1 次" / 单 P1 不展示。
+			const historyLabel =
+				typeof node.executionSummary?.historyLabel === "string" &&
+				node.executionSummary.historyLabel.trim()
+					? node.executionSummary.historyLabel.trim()
+					: "";
+			// 状态行只保留「状态 · 耗时」；P*/attempt 细节放 history 行或 title，避免溢出节点宽。
+			const statusLine = `${statusSymbol(status)} ${statusLabel(node.status)} · ${formatMs(node.durationMs)}`;
+			// 节点宽 216、左右 padding≈14：按显示列宽截断（CJK 双宽）。
+			const maxDisplayWidth = Math.max(10, Math.floor((position.width - 28) / 7));
+			const group = svgEl("g", {
+				transform: `translate(${position.x} ${position.y})`,
+				class: `dag-graph-node status-${status}${node.nodeId === uiState.selectedDagNodeId ? " selected" : ""}${uiState.selectedDagNodeId && !related.has(node.nodeId) ? " dag-dimmed" : ""}`,
+				tabindex: 0,
+				role: "button",
+				"aria-label": `${node.nodeId}，状态 ${status}${historyLabel ? `，执行历史 ${historyLabel}` : ""}`,
+			});
+			group.appendChild(
+				svgEl("rect", { width: position.width, height: position.height, rx: 10 }),
+			);
+			const title = svgEl("title");
+			const passHint =
+				Array.isArray(node.passes) && node.passes.length > 0
+					? `\nconvergence pass: P${node.passes.join(",")}`
+					: "";
+			const attemptHint =
+				node.attemptCount > 0 ? `\nattempts: ${node.attemptCount}` : "";
+			title.textContent = `${node.nodeId}\n${node.executor ?? "未知执行器"}\n${status}${historyLabel ? `\n执行历史：${historyLabel}` : ""}${passHint}${attemptHint}`;
+			group.appendChild(title);
+			const label = svgEl("text", {
+				x: 14,
+				y: NODE_TEXT.labelY,
+				class: "dag-node-label",
+			});
+			label.textContent = truncateDisplayText(
+				node.label ?? node.nodeId,
+				maxDisplayWidth,
+			);
+			group.appendChild(label);
+			const executor = svgEl("text", {
+				x: 14,
+				y: NODE_TEXT.executorY,
+				class: "dag-node-meta",
+			});
+			executor.textContent = truncateDisplayText(
+				`◈ ${node.executor ?? "unknown"}`,
+				maxDisplayWidth,
+			);
+			group.appendChild(executor);
+			const state = svgEl("text", {
+				x: 14,
+				y: NODE_TEXT.statusY,
+				class: "dag-node-status",
+			});
+			state.textContent = truncateDisplayText(statusLine, maxDisplayWidth);
+			group.appendChild(state);
+			if (historyLabel) {
+				const history = svgEl("text", {
+					x: 14,
+					y: NODE_TEXT.historyY,
+					class: "dag-node-history",
+				});
+				history.textContent = truncateDisplayText(historyLabel, maxDisplayWidth);
+				group.appendChild(history);
 			}
-		});
-		svg.appendChild(group);
+			const activate = () => selectDagNode(dagRunId, node.nodeId);
+			group.addEventListener("click", activate);
+			group.addEventListener("keydown", (event) => {
+				if (event.key === "Enter" || event.key === " ") {
+					event.preventDefault();
+					activate();
+				}
+			});
+			svg.appendChild(group);
+		}
+		viewport.appendChild(svg);
 	}
-	viewport.appendChild(svg);
 	if (viewport.parentNode !== wrap) wrap.appendChild(viewport);
-	const graphViewportState =
-		dagGraphViewportStates.get(dagRunId) ??
-		(uiState.dagGraphViewportState?.dagRunId === dagRunId
-			? uiState.dagGraphViewportState
-			: null);
-	// Bind scroll capture once per viewport instance so reuse does not stack listeners.
+	// Bind scroll capture once per viewport instance so reuse does not stack
+	// listeners. Capture routes to the mode-specific viewport state map so the
+	// two views keep independent positions (AC-001 / 交互 reset-current-mode).
 	if (viewport.dataset.scrollBound !== "1") {
 		viewport.dataset.scrollBound = "1";
 		viewport.addEventListener(
@@ -204,39 +413,90 @@ export function renderDagGraph(dag, dagRunId, existingWrap = null) {
 			() => {
 				const id = viewport.dataset.dagRunId;
 				if (!id) return;
-				uiState.dagGraphViewportState = updateDagGraphViewportState(
-					uiState.dagGraphViewportState,
-					id,
-					viewport.scrollLeft,
-					viewport.scrollTop,
-				);
-				dagGraphViewportStates.set(id, uiState.dagGraphViewportState);
+				if (currentDagGraphViewMode(id) === "trajectory") {
+					uiState.dagTrajectoryViewportState = updateDagTrajectoryViewportState(
+						uiState.dagTrajectoryViewportState,
+						id,
+						viewport.scrollLeft,
+						viewport.scrollTop,
+					);
+					dagTrajectoryViewportStates.set(
+						id,
+						uiState.dagTrajectoryViewportState,
+					);
+				} else {
+					uiState.dagGraphViewportState = updateDagGraphViewportState(
+						uiState.dagGraphViewportState,
+						id,
+						viewport.scrollLeft,
+						viewport.scrollTop,
+					);
+					dagGraphViewportStates.set(id, uiState.dagGraphViewportState);
+				}
 			},
 			{ passive: true },
 		);
 	}
-	if (graphViewportState) {
-		const restoreViewport = () => {
-			if (viewport.dataset.dagRunId !== dagRunId) return;
-			viewport.scrollLeft = graphViewportState.scrollLeft;
-			viewport.scrollTop = graphViewportState.scrollTop;
-		};
-		// Apply immediately so identity reuse keeps position even before paint,
-		// then again on rAF after SVG layout settles.
-		restoreViewport();
-		if (typeof requestAnimationFrame === "function") {
-			requestAnimationFrame(restoreViewport);
+	if (mode === "trajectory") {
+		const trajectoryViewportState =
+			dagTrajectoryViewportStates.get(dagRunId) ??
+			(uiState.dagTrajectoryViewportState?.dagRunId === dagRunId
+				? uiState.dagTrajectoryViewportState
+				: null);
+		if (trajectoryViewportState) {
+			const restoreViewport = () => {
+				if (viewport.dataset.dagRunId !== dagRunId) return;
+				viewport.scrollLeft = trajectoryViewportState.scrollLeft;
+				viewport.scrollTop = trajectoryViewportState.scrollTop;
+			};
+			restoreViewport();
+			if (typeof requestAnimationFrame === "function") {
+				requestAnimationFrame(restoreViewport);
+			}
+		}
+	} else {
+		const graphViewportState =
+			dagGraphViewportStates.get(dagRunId) ??
+			(uiState.dagGraphViewportState?.dagRunId === dagRunId
+				? uiState.dagGraphViewportState
+				: null);
+		if (graphViewportState) {
+			const restoreViewport = () => {
+				if (viewport.dataset.dagRunId !== dagRunId) return;
+				viewport.scrollLeft = graphViewportState.scrollLeft;
+				viewport.scrollTop = graphViewportState.scrollTop;
+			};
+			// Apply immediately so identity reuse keeps position even before paint,
+			// then again on rAF after SVG layout settles.
+			restoreViewport();
+			if (typeof requestAnimationFrame === "function") {
+				requestAnimationFrame(restoreViewport);
+			}
 		}
 	}
 	// Toolbar is rebuilt each paint; bind reset to the current viewport/dagRunId.
+	// 重置视图只重置当前模式的 viewport：不切换模式、不重置另一模式、不关闭 Inspector。
 	reset.addEventListener("click", () => {
-		uiState.dagGraphViewportState = updateDagGraphViewportState(
-			uiState.dagGraphViewportState,
-			dagRunId,
-			0,
-			0,
-		);
-		dagGraphViewportStates.set(dagRunId, uiState.dagGraphViewportState);
+		if (mode === "trajectory") {
+			uiState.dagTrajectoryViewportState = updateDagTrajectoryViewportState(
+				uiState.dagTrajectoryViewportState,
+				dagRunId,
+				0,
+				0,
+			);
+			dagTrajectoryViewportStates.set(
+				dagRunId,
+				uiState.dagTrajectoryViewportState,
+			);
+		} else {
+			uiState.dagGraphViewportState = updateDagGraphViewportState(
+				uiState.dagGraphViewportState,
+				dagRunId,
+				0,
+				0,
+			);
+			dagGraphViewportStates.set(dagRunId, uiState.dagGraphViewportState);
+		}
 		if (typeof viewport.scrollTo === "function") {
 			viewport.scrollTo({ left: 0, top: 0, behavior: "smooth" });
 		} else {