@tea-agent/loop-agent 0.8.0 → 0.10.0

package/dist/worker/observe/static/app.js

@@ -1,7 +1,14 @@
 import { layoutDag } from "./dag-layout.js";
 
-const POLL_MS = 2000;
+const ACTIVE_DETAIL_POLL_MS = 2000;
+const HIDDEN_POLL_MS = 30000;
 const DASHBOARD_POLL_MS = 5000;
+const DAG_INSPECTOR_DEFAULT_WIDTH = 440;
+const DAG_INSPECTOR_MIN_WIDTH = 360;
+const DAG_INSPECTOR_MAX_WIDTH = 680;
+const DAG_INSPECTOR_RIGHT_OFFSET = 24;
+const DAG_INSPECTOR_VIEWPORT_MARGIN = 48;
+const DAG_INSPECTOR_KEYBOARD_STEP = 24;
 
 const UI_TEXT = {
 	dashboard: "总览",
@@ -55,10 +62,28 @@ const STATUS_LABELS = {
 };
 
 const LIVENESS_LABELS = {
-	active: "活跃",
+	active: "执行器正常",
+	"node-quiet": "执行器正常，节点长时间无活动",
 	quiet: "无输出（存活）",
-	stale: "心跳失联",
+	stale: "执行器心跳中断",
 	"timeout-risk": "即将超时",
+	orphaned: "执行器已退出",
+	"unknown-host": "无法判断（在其他主机运行）",
+	unknown: "无法判断（无心跳记录）",
+};
+
+const DAG_EFFECTIVE_STATUS_LABELS = {
+	pending: "等待执行",
+	running: "正在执行",
+	"running-quiet": "运行可疑",
+	paused: "已暂停",
+	interrupted: "执行已中断",
+	"remote-unknown": "远端状态未知",
+	finished: "已完成",
+	failed: "执行失败",
+	superseded: "任务已另行完成",
+	abandoned: "已放弃",
+	unknown: "状态未知",
 };
 
 const STEP_LABELS = {
@@ -132,6 +157,173 @@ let selectedDagNodeId = null;
 let sessionEventOffset = 0;
 let sessionEvents = [];
 let lastSnapshot = null;
+let dagInspectorOpen = false;
+let dagInspectorTab = "output";
+let dagInspectorWidth = null;
+let dagGraphViewportState = null;
+const dagGraphViewportStates = new Map();
+let dagTimelineViewportState = null;
+let pollingGeneration = 0;
+
+function isPageVisible() {
+	return typeof document === "undefined" || document.visibilityState !== "hidden";
+}
+
+export function detailPollDelay(status, isVisible) {
+	const normalizedStatus = (status ?? "").toLowerCase().replace(/-/g, "_");
+	if (TERMINAL_RUN_STATUSES.has(normalizedStatus)) return null;
+	return isVisible ? ACTIVE_DETAIL_POLL_MS : HIDDEN_POLL_MS;
+}
+
+function dashboardPollDelay() {
+	return isPageVisible() ? DASHBOARD_POLL_MS : HIDDEN_POLL_MS;
+}
+
+export function parseMarkdownBlocks(markdown) {
+	const lines = String(markdown ?? "").replace(/\r\n?/g, "\n").split("\n");
+	const blocks = [];
+	let paragraph = [];
+	let list = null;
+	let code = null;
+
+	const flushParagraph = () => {
+		const text = paragraph.join(" ").trim();
+		if (text) blocks.push({ type: "paragraph", text });
+		paragraph = [];
+	};
+	const flushList = () => {
+		if (list?.items.length) blocks.push(list);
+		list = null;
+	};
+
+	for (let index = 0; index < lines.length; index += 1) {
+		const line = lines[index] ?? "";
+		if (code) {
+			if (/^```\s*$/.test(line)) {
+				blocks.push({ type: "code", language: code.language, text: code.lines.join("\n") });
+				code = null;
+			} else {
+				code.lines.push(line);
+			}
+			continue;
+		}
+
+		const fence = line.match(/^```([^\s]*)\s*$/);
+		if (fence) {
+			flushParagraph();
+			flushList();
+			code = { language: fence[1] ?? "", lines: [] };
+			continue;
+		}
+		if (!line.trim()) {
+			flushParagraph();
+			flushList();
+			continue;
+		}
+		const heading = line.match(/^(#{1,4})\s+(.+)$/);
+		if (heading) {
+			flushParagraph();
+			flushList();
+			blocks.push({ type: "heading", level: heading[1].length, text: heading[2].trim() });
+			continue;
+		}
+		if (/^\s{0,3}([-*_])(?:\s*\1){2,}\s*$/.test(line)) {
+			flushParagraph();
+			flushList();
+			blocks.push({ type: "rule" });
+			continue;
+		}
+		if (line.startsWith(">")) {
+			flushParagraph();
+			flushList();
+			blocks.push({ type: "quote", text: line.replace(/^>\s?/, "") });
+			continue;
+		}
+		const unordered = line.match(/^[-*+]\s+(.+)$/);
+		const ordered = line.match(/^\d+[.)]\s+(.+)$/);
+		if (unordered || ordered) {
+			flushParagraph();
+			const orderedList = Boolean(ordered);
+			if (!list || list.ordered !== orderedList) {
+				flushList();
+				list = { type: "list", ordered: orderedList, items: [] };
+			}
+			list.items.push((ordered?.[1] ?? unordered?.[1] ?? "").trim());
+			continue;
+		}
+		if (line.includes("|") && /^\s*\|?\s*:?-{3,}:?\s*(?:\|\s*:?-{3,}:?\s*)+\|?\s*$/.test(lines[index + 1] ?? "")) {
+			flushParagraph();
+			flushList();
+			const parseCells = (row) => row.trim().replace(/^\||\|$/g, "").split("|").map((cell) => cell.trim());
+			const headers = parseCells(line);
+			const rows = [];
+			index += 2;
+			while (index < lines.length && lines[index].includes("|")) {
+				rows.push(parseCells(lines[index]));
+				index += 1;
+			}
+			index -= 1;
+			blocks.push({ type: "table", headers, rows });
+			continue;
+		}
+		flushList();
+		paragraph.push(line.trim());
+	}
+	if (code) blocks.push({ type: "code", language: code.language, text: code.lines.join("\n") });
+	flushParagraph();
+	flushList();
+	return blocks;
+}
+
+export function markdownLinkHref(value) {
+	const href = typeof value === "string" ? value.trim() : "";
+	if (!href) return null;
+	if (href.startsWith("#") || href.startsWith("/")) return href;
+	try {
+		const parsed = new URL(
+			href,
+			typeof location === "undefined" ? "http://localhost" : location.href,
+		);
+		return ["http:", "https:", "mailto:"].includes(parsed.protocol) ? href : null;
+	} catch {
+		return null;
+	}
+}
+
+export function updateDagGraphViewportState(_previous, dagRunId, scrollLeft, scrollTop) {
+	return {
+		dagRunId,
+		scrollLeft: Math.max(0, Number(scrollLeft) || 0),
+		scrollTop: Math.max(0, Number(scrollTop) || 0),
+	};
+}
+
+export function captureDagGraphViewportState(previous, dagRunId, viewport) {
+	if (!viewport || viewport.dataset?.dagRunId !== dagRunId) return previous;
+	return updateDagGraphViewportState(
+		previous,
+		dagRunId,
+		viewport.scrollLeft,
+		viewport.scrollTop,
+	);
+}
+
+export function updateDagTimelineViewportState(
+	_previous,
+	dagRunId,
+	nodeId,
+	scrollLeft,
+	scrollTop,
+	followLatest,
+) {
+	return {
+		dagRunId,
+		nodeId,
+		scrollLeft: Math.max(0, Number(scrollLeft) || 0),
+		scrollTop: Math.max(0, Number(scrollTop) || 0),
+		followLatest: Boolean(followLatest),
+	};
+}
 
 export function parseHashRoute(hashValue) {
 	const hash = hashValue.replace(/^#/, "") || "/";
@@ -205,16 +397,18 @@ function statusSymbol(status) {
 	return "◇";
 }
 
-function badgeClass(status) {
+export function badgeClass(status) {
 	if (!status) return "unknown";
 	const key = status.toLowerCase().replace(/_/g, "-");
-	if (key === "finished" || key === "completed" || key === "succeeded" || key === "done") {
+	if (["finished", "completed", "succeeded", "done", "superseded"].includes(key)) {
 		return "succeeded";
 	}
-	if (key === "error" || key === "failed") return "failed";
+	if (["error", "failed", "interrupted"].includes(key)) return "failed";
 	if (key === "partial-failed") return "partial-failed";
-	if (key === "skipped") return "skipped";
-	if (key === "running" || key === "started") return "running";
+	if (key === "skipped" || key === "abandoned") return "skipped";
+	if (key === "running" || key === "started" || key === "running-quiet") return "running";
+	if (key === "paused") return "blocked";
+	if (key === "remote-unknown") return "unknown";
 	return key;
 }
 
@@ -231,12 +425,25 @@ function formatTs(value) {
 	return d.toLocaleString("zh-CN", { hour12: false });
 }
 
-function formatMs(ms) {
+export function formatMs(ms) {
 	if (ms === undefined || ms === null) return "—";
 	if (ms < 1000) return `${ms}ms`;
+	if (ms >= 60_000) {
+		const totalSeconds = Math.floor(ms / 1000);
+		return `${Math.floor(totalSeconds / 60)}min ${totalSeconds % 60}s`;
+	}
 	return `${(ms / 1000).toFixed(1)}s`;
 }
 
+function dagStatusBadge(status) {
+	const value = status ?? "unknown";
+	return el(
+		"span",
+		`badge badge-${badgeClass(value)}`,
+		DAG_EFFECTIVE_STATUS_LABELS[value] ?? statusLabel(value),
+	);
+}
+
 function formatDuration(ms) {
 	if (ms === undefined || ms === null || Number.isNaN(ms)) return "—";
 	if (ms < 0) ms = 0;
@@ -268,13 +475,20 @@ function livenessBadge(liveness) {
 }
 
 function showView(name) {
+	document.body.dataset.view = name;
+	if (name !== "dag") closeDagInspector();
 	document.querySelectorAll("[data-view]").forEach((section) => {
 		section.hidden = section.dataset.view !== name;
 	});
+	const activeHref = name === "failures" ? "#/failures" : "#/";
+	document.querySelectorAll(".nav-link").forEach((link) => {
+		link.classList.toggle("nav-link-active", link.getAttribute("href") === activeHref);
+	});
 }
 
 function setBreadcrumb(parts) {
 	const nav = document.getElementById("breadcrumb");
+	nav.hidden = parts.length <= 1;
 	clearNode(nav);
 	parts.forEach((part, i) => {
 		if (i > 0) nav.appendChild(document.createTextNode(" / "));
@@ -304,16 +518,17 @@ function updateHeaderRefresh(generatedAt) {
 }
 
 function stopTimers() {
+	pollingGeneration += 1;
 	if (dashboardTimer) {
-		clearInterval(dashboardTimer);
+		clearTimeout(dashboardTimer);
 		dashboardTimer = null;
 	}
 	if (runPollTimer) {
-		clearInterval(runPollTimer);
+		clearTimeout(runPollTimer);
 		runPollTimer = null;
 	}
 	if (dagPollTimer) {
-		clearInterval(dagPollTimer);
+		clearTimeout(dagPollTimer);
 		dagPollTimer = null;
 	}
 	currentRunId = null;
@@ -343,6 +558,25 @@ function metaGrid(entries) {
 	return dl;
 }
 
+const TERMINAL_DAG_EFFECTIVE_STATUSES = new Set([
+	"finished",
+	"failed",
+	"superseded",
+	"abandoned",
+]);
+
+export function dagMetaVisibility(dag) {
+	const terminal =
+		(dag?.lifecycle ?? "").toLowerCase() === "completed"
+		|| TERMINAL_DAG_EFFECTIVE_STATUSES.has(dag?.effectiveStatus);
+	return {
+		showExecutorStatus: !terminal,
+		showConsistencyWarning: dag?.stateConsistent === false,
+		showResume: dag?.recoveryEligibility?.canResume === true,
+		showReconcile: dag?.recoveryEligibility?.canReconcile === true,
+	};
+}
+
 function buildTable(headers, rows) {
 	const table = document.createElement("table");
 	const thead = document.createElement("thead");
@@ -427,26 +661,6 @@ function isNodeFailed(status) {
 	return s === "error" || s === "failed" || s === "partial_failed";
 }
 
-function pickDefaultDagNode(nodes) {
-	if (!nodes?.length) return null;
-	const sorted = [...nodes].sort((a, b) => {
-		const ra = Number(a.rank);
-		const rb = Number(b.rank);
-		if (!Number.isNaN(ra) && !Number.isNaN(rb) && ra !== rb) return ra - rb;
-		if (a.rank !== b.rank) return (a.rank ?? "").localeCompare(b.rank ?? "");
-		return a.nodeId.localeCompare(b.nodeId);
-	});
-	const failed = sorted.find((n) => isNodeFailed(n.status));
-	if (failed) return failed.nodeId;
-	const active = sorted.find((n) => isNodeActive(n.status));
-	if (active) return active.nodeId;
-	const withOutput = sorted.find(
-		(n) => (n.outputPreview || n.errorPreview) && isNodeFinished(n.status),
-	);
-	if (withOutput) return withOutput.nodeId;
-	return sorted[0]?.nodeId ?? null;
-}
-
 function truncateText(text, maxLen) {
 	if (!text) return "—";
 	const normalized = String(text).replace(/\s+/g, " ").trim();
@@ -480,6 +694,10 @@ function formatSessionEventLabel(event) {
 	if (!event || typeof event !== "object") return "未知类型";
 	const type = typeof event.type === "string" ? event.type : "unknown";
 	const toolName = event.toolName ?? event.name ?? "—";
+	if (type === "agent_start") return "Agent 已启动";
+	if (type === "agent_end") return "Agent 已结束";
+	if (type === "agent_settled") return "Agent 已稳定";
+	if (type === "turn_start") return "开始新一轮处理";
 	if (type === "tool_execution_start" || type === "tool_start") {
 		return `调用工具 · ${toolName}`;
 	}
@@ -492,16 +710,53 @@ function formatSessionEventLabel(event) {
 	return type;
 }
 
-function formatSessionEventTime(event) {
-	if (!event || typeof event !== "object") return "—";
+function sessionEventTimestamp(event) {
+	if (!event || typeof event !== "object") return "";
 	const ts =
 		(typeof event.timestamp === "string" && event.timestamp) ||
 		(typeof event.at === "string" && event.at) ||
 		(typeof event.recordedAt === "string" && event.recordedAt);
-	if (!ts) return "—";
+	return ts || "";
+}
+
+function formatSessionEventTime(event) {
+	const ts = sessionEventTimestamp(event);
+	if (!ts) return "未记录时间";
 	return formatTs(ts).replace(/\s.*/, "") || formatTs(ts);
 }
 
+function sessionEventKind(event) {
+	const type = typeof event?.type === "string" ? event.type : "unknown";
+	if (type === "tool_execution_start" || type === "tool_start") return "tool-start";
+	if (type === "tool_execution_end" || type === "tool_end") return "tool-end";
+	if (type === "turn_end" || type === "assistant" || type === "assistant_message") {
+		return "assistant";
+	}
+	if (type.startsWith("agent_") || type === "turn_start") return "lifecycle";
+	return "protocol";
+}
+
+function buildSessionTimelineItems(events) {
+	const items = [];
+	for (let index = 0; index < events.length; index += 1) {
+		const event = events[index];
+		const type = typeof event?.type === "string" ? event.type : "unknown";
+		if (type === "message_start" || type === "message_end") {
+			let count = 1;
+			while (index + 1 < events.length) {
+				const nextType = events[index + 1]?.type;
+				if (nextType !== "message_start" && nextType !== "message_end") break;
+				count += 1;
+				index += 1;
+			}
+			items.push({ event, kind: "protocol", protocolCount: count });
+			continue;
+		}
+		items.push({ event, kind: sessionEventKind(event) });
+	}
+	return items;
+}
+
 async function mergeSessionEvents(dagRunId, nodeId) {
 	if (!dagRunId || !nodeId) return;
 	const page = await fetchJson(
@@ -517,54 +772,219 @@ async function mergeSessionEvents(dagRunId, nodeId) {
 }
 
 function selectDagNode(dagRunId, nodeId) {
-	if (selectedDagNodeId === nodeId) return;
+	const nodeChanged = selectedDagNodeId !== nodeId;
 	selectedDagNodeId = nodeId;
-	sessionEventOffset = 0;
-	sessionEvents = [];
+	dagInspectorOpen = true;
+	if (nodeChanged) {
+		sessionEventOffset = 0;
+		sessionEvents = [];
+	}
 	void renderDagDetail(dagRunId, false);
 }
 
-function renderSessionTimeline(nodeId) {
-	const panel = document.getElementById("dag-timeline");
-	const scrollEl = panel.querySelector(".process-timeline-scroll");
-	const wasNearBottom = scrollEl
-		? scrollEl.scrollHeight - scrollEl.scrollTop - scrollEl.clientHeight < 48
-		: true;
+function closeDagInspector() {
+	dagInspectorOpen = false;
+	const panel = document.getElementById("dag-inspector");
+	if (panel) {
+		panel.classList.remove("is-open");
+		panel.setAttribute("aria-hidden", "true");
+	}
+}
 
-	clearNode(panel);
-	panel.appendChild(el("h3", null, "执行过程"));
-	if (nodeId) {
-		panel.appendChild(el("p", "timeline-node-label", `节点：${nodeId}`));
+function closeDagInspectorOnOutsideClick(event) {
+	if (!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();
+}
+
+function dagInspectorMaximumWidth() {
+	return Math.max(
+		DAG_INSPECTOR_MIN_WIDTH,
+		Math.min(
+			DAG_INSPECTOR_MAX_WIDTH,
+			window.innerWidth - DAG_INSPECTOR_VIEWPORT_MARGIN,
+		),
+	);
+}
+
+function setDagInspectorWidth(panel, requestedWidth) {
+	const maximum = dagInspectorMaximumWidth();
+	dagInspectorWidth = Math.min(
+		maximum,
+		Math.max(DAG_INSPECTOR_MIN_WIDTH, Math.round(requestedWidth)),
+	);
+	panel.style.setProperty("--dag-inspector-width", `${dagInspectorWidth}px`);
+	return { minimum: DAG_INSPECTOR_MIN_WIDTH, maximum, value: dagInspectorWidth };
+}
+
+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 ?? dagInspectorWidth ?? DAG_INSPECTOR_DEFAULT_WIDTH,
+		);
+		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 = dagInspectorWidth ?? DAG_INSPECTOR_DEFAULT_WIDTH;
+		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;
+}
+
+function captureDagTimelineViewportState(panel) {
+	const scrollEl = panel.querySelector(".process-timeline-scroll");
+	if (scrollEl?.dataset.dagRunId && scrollEl.dataset.nodeId) {
+		const followLatest =
+			scrollEl.scrollHeight - scrollEl.scrollTop - scrollEl.clientHeight < 48;
+		dagTimelineViewportState = updateDagTimelineViewportState(
+			dagTimelineViewportState,
+			scrollEl.dataset.dagRunId,
+			scrollEl.dataset.nodeId,
+			scrollEl.scrollLeft,
+			scrollEl.scrollTop,
+			followLatest,
+		);
 	}
+}
 
+function renderSessionTimeline(content, nodeId) {
+	content.dataset.dagRunId = currentDagRunId ?? "";
+	content.dataset.nodeId = nodeId ?? "";
+	content.classList.add("process-timeline-scroll");
 	if (!nodeId || sessionEvents.length === 0) {
-		panel.appendChild(el("p", "empty", UI_TEXT.noSessionEvents));
+		content.appendChild(el("p", "empty", UI_TEXT.noSessionEvents));
 		return;
 	}
 
-	const container = el("div", "process-timeline-scroll");
+	const timelineItems = buildSessionTimelineItems(sessionEvents);
+	const hasEventTimes = sessionEvents.some((event) => Boolean(sessionEventTimestamp(event)));
+	if (!hasEventTimes) {
+		content.appendChild(
+			el("p", "process-timeline-note", "事件未记录具体时间，以下按采集顺序展示。"),
+		);
+	}
 	const ul = el("ul", "process-timeline");
-	for (const event of sessionEvents) {
-		const li = el("li", "process-timeline-item");
-		li.appendChild(el("span", "process-timeline-time", formatSessionEventTime(event)));
-		li.appendChild(el("span", "process-timeline-label", formatSessionEventLabel(event)));
+	for (let index = 0; index < timelineItems.length; index += 1) {
+		const item = timelineItems[index];
+		const li = el(
+			"li",
+			`process-timeline-item process-timeline-${item.kind}${hasEventTimes ? " has-time" : ""}`,
+		);
+		if (index === 0) li.classList.add("is-first");
+		if (index === timelineItems.length - 1) li.classList.add("is-last");
+		const rail = el("span", "process-timeline-rail");
+		rail.appendChild(el("span", "process-timeline-dot"));
+		li.appendChild(rail);
+		if (hasEventTimes) {
+			li.appendChild(el("span", "process-timeline-time", formatSessionEventTime(item.event)));
+		}
+		const label =
+			item.protocolCount > 1
+				? `消息收发 · 已合并 ${item.protocolCount} 条协议事件`
+				: formatSessionEventLabel(item.event);
+		li.appendChild(el("span", "process-timeline-label", label));
 		ul.appendChild(li);
 	}
-	container.appendChild(ul);
-	panel.appendChild(container);
-
-	if (wasNearBottom) {
-		container.scrollTop = container.scrollHeight;
+	content.appendChild(ul);
+
+	const timelineState =
+		dagTimelineViewportState?.dagRunId === currentDagRunId &&
+		dagTimelineViewportState.nodeId === nodeId
+			? dagTimelineViewportState
+			: null;
+	content.addEventListener(
+		"scroll",
+		() => {
+			const followLatest =
+				content.scrollHeight - content.scrollTop - content.clientHeight < 48;
+			dagTimelineViewportState = updateDagTimelineViewportState(
+				dagTimelineViewportState,
+				currentDagRunId,
+				nodeId,
+				content.scrollLeft,
+				content.scrollTop,
+				followLatest,
+			);
+		},
+		{ passive: true },
+	);
+	if (timelineState?.followLatest ?? true) {
+		content.scrollLeft = timelineState?.scrollLeft ?? 0;
+		content.scrollTop = content.scrollHeight;
+	} else {
+		content.scrollLeft = timelineState.scrollLeft;
+		content.scrollTop = timelineState.scrollTop;
 	}
 }
 
-function isDagRunActive(dag) {
+export function isDagRunActive(dag) {
+	if (["running", "running-quiet", "remote-unknown", "pending"].includes(dag.effectiveStatus)) return true;
+	// Only "unknown" (and absent) means liveness evidence is insufficient;
+	// it must NOT override raw lifecycle/status/node facts. Every other concrete
+	// effectiveStatus is authoritative-non-active and short-circuits to false.
+	if (dag.effectiveStatus && dag.effectiveStatus !== "unknown") return false;
 	const status = (dag.status ?? "").toLowerCase();
-	if (["running", "pending", "started"].includes(status)) return true;
-	const hasActiveNode = (dag.nodes ?? []).some((n) => isNodeActive(n.status));
-	if (hasActiveNode) return true;
+	if ((dag.lifecycle ?? "").toLowerCase() === "paused") return false;
+	if (["orphaned", "stale"].includes((dag.liveness ?? "").toLowerCase())) return false;
 	if (TERMINAL_RUN_STATUSES.has(status)) return false;
-	return false;
+	if (["running", "pending", "started"].includes(status)) return true;
+	return (dag.nodes ?? []).some((n) => isNodeActive(n.status));
+}
+
+const DASHBOARD_FEATURE_STATUSES = new Set(["running", "needs_action"]);
+
+export function dashboardVisibleFeatures(features) {
+	return (features ?? []).filter((feature) =>
+		DASHBOARD_FEATURE_STATUSES.has(feature?.status),
+	);
 }
 
 function dagProgress(dag) {
@@ -591,13 +1011,69 @@ function findDagForRun(snapshot, workerRunId, task) {
 	return undefined;
 }
 
-function kpiCard(label, value, extraClass) {
+let kpiHelpSeed = 0;
+function kpiCard(label, value, extraClass, helpText) {
 	const card = el("div", `kpi-card${extraClass ? ` ${extraClass}` : ""}`);
 	card.appendChild(el("div", "kpi-label", label));
-	card.appendChild(el("div", "kpi-value", String(value)));
+	const valueWrap = el("div", "kpi-value-row");
+	valueWrap.appendChild(el("div", "kpi-value", String(value)));
+	if (helpText) {
+		kpiHelpSeed += 1;
+		const tipId = `kpi-tip-${kpiHelpSeed}`;
+		const helpBtn = el("button", "kpi-help");
+		helpBtn.type = "button";
+		helpBtn.setAttribute("aria-describedby", tipId);
+		helpBtn.setAttribute("aria-label", `${label} 指标说明`);
+		const icon = el("i", "ri-question-line");
+		icon.setAttribute("aria-hidden", "true");
+		helpBtn.appendChild(icon);
+		const tip = el("span", "kpi-tip");
+		tip.id = tipId;
+		tip.setAttribute("role", "tooltip");
+		tip.textContent = helpText;
+		valueWrap.appendChild(helpBtn);
+		valueWrap.appendChild(tip);
+	}
+	card.appendChild(valueWrap);
 	return card;
 }
 
+function repoBaseName(repoRoot) {
+	if (!repoRoot) return "未绑定仓库";
+	const trimmed = String(repoRoot).replace(/[\\/]+$/, "");
+	const parts = trimmed.split(/[\\/]/);
+	return parts[parts.length - 1] || trimmed || "未绑定仓库";
+}
+
+function renderRepoBanner(repoEl, snapshot) {
+	if (!repoEl) return;
+	clearNode(repoEl);
+	const repoRoot = snapshot.repoRoot ?? "";
+	const icon = el("i", "ri-git-repository-line");
+	icon.setAttribute("aria-hidden", "true");
+	repoEl.appendChild(icon);
+	const text = el("div", "repo-banner-text");
+	text.appendChild(el("span", "repo-banner-name", repoBaseName(repoRoot)));
+	const pathLine = el("span", "repo-banner-path", repoRoot || "路径未知");
+	pathLine.title = repoRoot || "";
+	text.appendChild(pathLine);
+	repoEl.appendChild(text);
+}
+
+function renderProjectionFault(error) {
+	const banner = el("div", "projection-fault");
+	banner.setAttribute("role", "alert");
+	const icon = el("i", "ri-error-warning-line");
+	icon.setAttribute("aria-hidden", "true");
+	banner.appendChild(icon);
+	const body = el("div", "projection-fault-body");
+	body.appendChild(el("p", "projection-fault-title", "指标暂不可用：数据投影失败。"));
+	body.appendChild(el("p", "projection-fault-message", error.message ?? "投影失败 (projection failed)"));
+	if (error.at) body.appendChild(el("p", "projection-fault-at", `发生时间：${error.at}`));
+	banner.appendChild(body);
+	return banner;
+}
+
 function renderActiveDagCard(dag, nowMs) {
 	const card = el("div", "active-dag-card");
 	if (isNodeActive(dag.status) || getActiveNodes(dag).length > 0) {
@@ -606,7 +1082,7 @@ function renderActiveDagCard(dag, nowMs) {
 	const title = dag.title || dag.dagRunId;
 	const header = el("div", "active-dag-header");
 	header.appendChild(el("span", "active-dag-title", title));
-	header.appendChild(badge(dag.status));
+	header.appendChild(dagStatusBadge(dag.effectiveStatus ?? dag.status));
 	card.appendChild(header);
 
 	const progress = dagProgress(dag);
@@ -733,6 +1209,7 @@ function renderDagGraph(dag, dagRunId) {
 	wrap.appendChild(toolbar);
 	if (edges.length === 0) wrap.appendChild(el("p", "dag-graph-fallback", "该运行没有可用依赖数据；图按并行层级展示，节点表格仍保留完整数据。"));
 	const viewport = el("div", "dag-graph-viewport");
+	viewport.dataset.dagRunId = dagRunId;
 	const svg = svgEl("svg", { class: "dag-graph", viewBox: `0 0 ${layout.width} ${layout.height}`, width: layout.width, height: layout.height, role: "img", "aria-label": `DAG 依赖图，共 ${nodes.length} 个节点` });
 	const defs = svgEl("defs");
 	const marker = svgEl("marker", { id: "dag-arrow", viewBox: "0 0 10 10", refX: 9, refY: 5, markerWidth: 7, markerHeight: 7, orient: "auto-start-reverse" });
@@ -760,17 +1237,227 @@ function renderDagGraph(dag, dagRunId) {
 		svg.appendChild(group);
 	}
 	viewport.appendChild(svg); wrap.appendChild(viewport);
-	reset.addEventListener("click", () => { viewport.scrollTo({ left: 0, top: 0, behavior: "smooth" }); });
+	const graphViewportState =
+		dagGraphViewportStates.get(dagRunId) ??
+		(dagGraphViewportState?.dagRunId === dagRunId
+			? dagGraphViewportState
+			: null);
+	viewport.addEventListener(
+		"scroll",
+			() => {
+				dagGraphViewportState = updateDagGraphViewportState(
+					dagGraphViewportState,
+					dagRunId,
+					viewport.scrollLeft,
+					viewport.scrollTop,
+				);
+				dagGraphViewportStates.set(dagRunId, dagGraphViewportState);
+			},
+		{ passive: true },
+	);
+	if (graphViewportState) {
+		const restoreViewport = () => {
+			viewport.scrollLeft = graphViewportState.scrollLeft;
+			viewport.scrollTop = graphViewportState.scrollTop;
+		};
+		if (typeof requestAnimationFrame === "function") {
+			requestAnimationFrame(restoreViewport);
+		} else {
+			restoreViewport();
+		}
+	}
+	reset.addEventListener("click", () => {
+			dagGraphViewportState = updateDagGraphViewportState(
+				dagGraphViewportState,
+				dagRunId,
+				0,
+				0,
+			);
+			dagGraphViewportStates.set(dagRunId, dagGraphViewportState);
+		viewport.scrollTo({ left: 0, top: 0, behavior: "smooth" });
+	});
 	return wrap;
 }
 
-function expandablePreview(title, content, previewClass) {
-	const wrap = el("details", previewClass ?? "output-preview");
-	const summary = el("summary", null, title);
-	wrap.appendChild(summary);
-	const pre = el("pre", "output-block", content);
-	wrap.appendChild(pre);
-	return wrap;
+function appendInlineMarkdown(target, text) {
+	const tokenPattern = /(`[^`]*`|\*\*[^*]+\*\*|\*[^*]+\*|\[[^\]]+\]\([^)]+\))/g;
+	let cursor = 0;
+	for (const match of text.matchAll(tokenPattern)) {
+		const index = match.index ?? 0;
+		if (index > cursor) target.appendChild(document.createTextNode(text.slice(cursor, index)));
+		const token = match[0];
+		if (token.startsWith("`")) {
+			target.appendChild(el("code", null, token.slice(1, -1)));
+		} else if (token.startsWith("**")) {
+			const strong = document.createElement("strong");
+			strong.textContent = token.slice(2, -2);
+			target.appendChild(strong);
+		} else if (token.startsWith("*")) {
+			const emphasis = document.createElement("em");
+			emphasis.textContent = token.slice(1, -1);
+			target.appendChild(emphasis);
+		} else {
+			const link = token.match(/^\[([^\]]+)\]\((.+)\)$/);
+			const href = markdownLinkHref(link?.[2]);
+			if (link && href) {
+				const anchor = document.createElement("a");
+				anchor.href = href;
+				anchor.target = "_blank";
+				anchor.rel = "noopener noreferrer";
+				anchor.textContent = link[1];
+				target.appendChild(anchor);
+			} else {
+				target.appendChild(document.createTextNode(token));
+			}
+		}
+		cursor = index + token.length;
+	}
+	if (cursor < text.length) target.appendChild(document.createTextNode(text.slice(cursor)));
+}
+
+function renderMarkdown(content) {
+	const article = el("article", "markdown-output");
+	for (const block of parseMarkdownBlocks(content)) {
+		switch (block.type) {
+			case "heading": {
+				const heading = document.createElement(`h${block.level}`);
+				appendInlineMarkdown(heading, block.text);
+				article.appendChild(heading);
+				break;
+			}
+			case "paragraph": {
+				const paragraph = document.createElement("p");
+				appendInlineMarkdown(paragraph, block.text);
+				article.appendChild(paragraph);
+				break;
+			}
+			case "quote": {
+				const quote = document.createElement("blockquote");
+				appendInlineMarkdown(quote, block.text);
+				article.appendChild(quote);
+				break;
+			}
+			case "list": {
+				const list = document.createElement(block.ordered ? "ol" : "ul");
+				for (const item of block.items) {
+					const listItem = document.createElement("li");
+					appendInlineMarkdown(listItem, item);
+					list.appendChild(listItem);
+				}
+				article.appendChild(list);
+				break;
+			}
+			case "code": {
+				const pre = document.createElement("pre");
+				const code = document.createElement("code");
+				if (block.language) code.dataset.language = block.language;
+				code.textContent = block.text;
+				pre.appendChild(code);
+				article.appendChild(pre);
+				break;
+			}
+			case "table": {
+				const table = document.createElement("table");
+				const head = document.createElement("thead");
+				const headRow = document.createElement("tr");
+				for (const value of block.headers) {
+					const cell = document.createElement("th");
+					appendInlineMarkdown(cell, value);
+					headRow.appendChild(cell);
+				}
+				head.appendChild(headRow);
+				table.appendChild(head);
+				const body = document.createElement("tbody");
+				for (const row of block.rows) {
+					const tableRow = document.createElement("tr");
+					for (const value of row) {
+						const cell = document.createElement("td");
+						appendInlineMarkdown(cell, value);
+						tableRow.appendChild(cell);
+					}
+					body.appendChild(tableRow);
+				}
+				table.appendChild(body);
+				article.appendChild(table);
+				break;
+			}
+			case "rule":
+				article.appendChild(document.createElement("hr"));
+				break;
+		}
+	}
+	return article;
+}
+
+function renderDagInspector(dagRunId, node) {
+	const panel = document.getElementById("dag-inspector");
+	if (!panel) return;
+	captureDagTimelineViewportState(panel);
+	if (!dagInspectorOpen || !node) {
+		panel.classList.remove("is-open");
+		panel.setAttribute("aria-hidden", "true");
+		return;
+	}
+
+	clearNode(panel);
+	panel.classList.add("is-open");
+	panel.setAttribute("aria-hidden", "false");
+	panel.appendChild(createDagInspectorResizeHandle(panel));
+	const header = el("div", "dag-inspector-header");
+	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");
+	controls.appendChild(badge(node.status ?? "unknown"));
+	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 tabs = el("div", "dag-inspector-tabs");
+	tabs.setAttribute("role", "tablist");
+	for (const [tab, label, icon] of [["output", "节点输出", "ri-file-text-line"], ["timeline", "执行过程", "ri-route-line"]]) {
+		const button = document.createElement("button");
+		button.type = "button";
+		button.className = "dag-inspector-tab";
+		button.setAttribute("role", "tab");
+		button.setAttribute("aria-selected", String(dagInspectorTab === tab));
+		const tabIcon = el("i", icon);
+		tabIcon.setAttribute("aria-hidden", "true");
+		button.appendChild(tabIcon);
+		button.appendChild(document.createTextNode(` ${label}`));
+		button.addEventListener("click", () => {
+			dagInspectorTab = tab;
+			renderDagInspector(dagRunId, node);
+		});
+		tabs.appendChild(button);
+	}
+	header.appendChild(tabs);
+	panel.appendChild(header);
+
+	const content = el("div", "dag-inspector-content");
+	content.setAttribute("role", "tabpanel");
+	if (dagInspectorTab === "timeline") {
+		renderSessionTimeline(content, node.nodeId);
+	} 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);
+		}
+	}
+	panel.appendChild(content);
 }
 
 async function renderFailures() {
@@ -837,9 +1524,12 @@ async function renderDashboard(scrollTo) {
 	setBreadcrumb([{ label: UI_TEXT.dashboard }]);
 
 	const kpiEl = document.getElementById("dashboard-kpi");
+	const featureEl = document.getElementById("dashboard-features");
 	const activeEl = document.getElementById("dashboard-active-dags");
+	const riskEl = document.getElementById("dashboard-risk");
 	const dagsEl = document.getElementById("dashboard-dags");
 	const batchesEl = document.getElementById("dashboard-batches");
+	const repoEl = document.getElementById("dashboard-repo");
 
 	const snapshot = await fetchJson("/api/snapshot");
 	if (!snapshot) return;
@@ -854,15 +1544,88 @@ async function renderDashboard(scrollTo) {
 		.sort((a, b) => dagSortTime(b).localeCompare(dagSortTime(a)))
 		.slice(0, 10);
 
+	const features = dashboardVisibleFeatures(snapshot.features);
+	featureEl.hidden = features.length === 0;
+	clearNode(featureEl);
+	if (features.length > 0) {
+		featureEl.appendChild(el("h3", "section-heading", "Feature 决策"));
+		featureEl.appendChild(buildTable(
+			["Feature", "状态", "下一步", "原因", "required AC", "证据"],
+			features.map((feature) => ({ cells: [
+				feature.featureId,
+				feature.statusLabel ?? feature.status,
+				feature.nextAction?.command ?? feature.nextAction?.label ?? "—",
+				feature.blockingItems?.[0]?.message ?? `${feature.summary?.tasksSucceeded ?? 0}/${feature.summary?.tasksTotal ?? 0} tasks completed`,
+				`${feature.summary?.requiredAcCovered ?? 0}/${feature.summary?.requiredAcTotal ?? 0}`,
+				artifactLink("查看", feature.evidence?.delivery ?? feature.evidence?.closeout ?? feature.evidence?.morningReport ?? feature.evidence?.observeSnapshot),
+			] })),
+		));
+	}
+	if (features.length > 0 && (snapshot.projectionWarnings ?? []).length > 0) {
+		featureEl.appendChild(el("p", "empty", `投影警告：${snapshot.projectionWarnings.join("；")}`));
+	}
+
+	renderRepoBanner(repoEl, snapshot);
+
 	clearNode(kpiEl);
-	kpiEl.appendChild(kpiCard("活跃 DAG", activeDags.length, "kpi-highlight"));
-	kpiEl.appendChild(kpiCard("活跃 Task", snapshot.health?.activeTasks ?? 0));
-	kpiEl.appendChild(kpiCard("无输出", snapshot.health?.quietCount ?? 0));
-	kpiEl.appendChild(kpiCard("心跳失联", snapshot.health?.staleCount ?? 0));
-	kpiEl.appendChild(kpiCard("即将超时", snapshot.health?.timeoutRiskCount ?? 0));
-	kpiEl.appendChild(
-		kpiCard("失败", snapshot.health?.failuresCount ?? 0, "kpi-danger"),
-	);
+	const dagHealth = snapshot.health?.dag;
+	const dagActiveRuns = dagHealth?.activeRuns ?? activeDags.length;
+	const dagRunningNodes = dagHealth?.runningNodes
+		?? activeDags.flatMap((dag) => dag.nodes ?? []).filter((node) => ["running", "started"].includes((node.status ?? "").toLowerCase())).length;
+	const dagPendingNodes = dagHealth?.pendingNodes
+		?? activeDags.flatMap((dag) => dag.nodes ?? []).filter((node) => ["pending", "queued"].includes((node.status ?? "").toLowerCase())).length;
+	const dagPausedRuns = dagHealth?.pausedRuns ?? 0;
+	const dagStaleRuns = dagHealth?.staleRuns ?? 0;
+	const dagInterruptedRuns = dagHealth?.interruptedRuns ?? 0;
+	const dagInconsistentRuns = dagHealth?.inconsistentRuns ?? 0;
+	const dagAttentionRuns = dagHealth?.attentionRuns
+		?? dagRuns.filter((dag) => (dag.lifecycle ?? "").toLowerCase() !== "completed" && (
+			(dag.lifecycle ?? "").toLowerCase() === "paused"
+			|| ["stale", "orphaned"].includes((dag.liveness ?? "").toLowerCase())
+			|| ["interrupted", "remote-unknown"].includes(dag.effectiveStatus)
+			|| dag.stateConsistent === false
+		)).length;
+
+	const quietCount = snapshot.health?.quietCount ?? 0;
+	const staleCount = snapshot.health?.staleCount ?? 0;
+	const timeoutRiskCount = snapshot.health?.timeoutRiskCount ?? 0;
+	const failuresCount = snapshot.health?.failuresCount ?? 0;
+
+	if (snapshot.projectionError) {
+		kpiEl.appendChild(renderProjectionFault(snapshot.projectionError));
+	} else {
+		const dagGroup = el("fieldset", "kpi-group");
+		dagGroup.appendChild(el("legend", "kpi-group-legend", "DAG 运行"));
+		const dagCards = el("div", "kpi-grid");
+		dagCards.appendChild(kpiCard("活跃 DAG", dagActiveRuns, "kpi-highlight",
+			"当前处于运行、静默运行、远端状态未知或等待执行的 DAG 数量（来源：.harness/dag-runs 的有效状态）。"));
+		dagCards.appendChild(kpiCard("执行中节点", dagRunningNodes, "",
+			"活跃 DAG 中状态为 running 或 started、正在执行的节点数量；DAG 内执行单元统一称为节点。"));
+		dagCards.appendChild(kpiCard("等待节点", dagPendingNodes, "",
+			"活跃 DAG 中状态为 pending 或 queued、尚未开始执行的节点数量。"));
+		dagCards.appendChild(kpiCard("暂停 DAG", dagPausedRuns, dagPausedRuns > 0 ? "kpi-muted" : "",
+			"生命周期被暂停的 DAG 运行数量（来源：.harness/dag-runs 下的 lifecycle 目录）。"));
+		dagCards.appendChild(kpiCard("需处理 DAG", dagAttentionRuns, dagAttentionRuns > 0 ? "kpi-risk" : "",
+			"未完成且暂停、失联、中断、远端状态未知或状态不一致的 DAG 数量；同一个 DAG 只计一次。"));
+		dagGroup.appendChild(dagCards);
+
+		const workerGroup = el("fieldset", "kpi-group");
+		workerGroup.appendChild(el("legend", "kpi-group-legend", "Worker 执行"));
+		const workerCards = el("div", "kpi-grid");
+		workerCards.appendChild(kpiCard("活跃 Worker Task", snapshot.health?.activeTasks ?? 0, "",
+			"当前运行或等待执行的 Worker Task Pool 任务数量（来源：.harness/task-pool 的状态、运行记录与事件；不含 .harness/tasks 下的 task.json）。"));
+		workerCards.appendChild(kpiCard("无输出", quietCount, quietCount > 0 ? "kpi-muted" : "",
+			"心跳仍正常，但超过无输出判定时长仍没有新输出的 Worker Task 数量。"));
+		workerCards.appendChild(kpiCard("心跳失联", staleCount, staleCount > 0 ? "kpi-risk" : "",
+			"超过心跳失联判定时长仍没有新心跳的 Worker Task 数量。"));
+		workerCards.appendChild(kpiCard("即将超时", timeoutRiskCount, timeoutRiskCount > 0 ? "kpi-risk" : "",
+			"命令已执行时长超过 80% 超时的 Worker Task 数量。"));
+		workerCards.appendChild(kpiCard("失败", failuresCount, failuresCount > 0 ? "kpi-danger" : "",
+			"状态为 failed 的 Worker Task 数量。"));
+		workerGroup.appendChild(workerCards);
+		kpiEl.appendChild(workerGroup);
+		kpiEl.appendChild(dagGroup);
+	}
 
 	const nowMs = Date.now();
 
@@ -880,6 +1643,41 @@ async function renderDashboard(scrollTo) {
 		activeEl.appendChild(list);
 	}
 
+	clearNode(riskEl);
+	const dagRiskCount = dagAttentionRuns;
+	const workerRiskCount = failuresCount + staleCount + timeoutRiskCount;
+	riskEl.classList.toggle("panel-risk-attention", dagRiskCount > 0 || workerRiskCount > 0);
+	riskEl.appendChild(el("h3", "section-heading", "运行风险"));
+	if (dagRiskCount === 0 && workerRiskCount === 0) {
+		riskEl.appendChild(el("p", "risk-empty", "当前没有需要处理的异常。"));
+	} else {
+		const riskBlocks = el("div", "risk-blocks");
+		if (dagRiskCount > 0) {
+			const dagBlock = el("div", "risk-block risk-block-dag");
+			dagBlock.appendChild(el("div", "risk-block-label", "需处理 DAG"));
+			dagBlock.appendChild(el("div", "risk-total", String(dagRiskCount)));
+			dagBlock.appendChild(el("p", "risk-summary",
+				`去重运行数 ${dagAttentionRuns} · 中断 ${dagInterruptedRuns} · 失联 ${dagStaleRuns} · 状态不一致 ${dagInconsistentRuns} · 暂停 ${dagPausedRuns}`));
+			riskBlocks.appendChild(dagBlock);
+		}
+		if (workerRiskCount > 0) {
+			const workerBlock = el("div", "risk-block risk-block-worker");
+			workerBlock.appendChild(el("div", "risk-block-label", "Worker 风险"));
+			workerBlock.appendChild(el("div", "risk-total", String(workerRiskCount)));
+			workerBlock.appendChild(el("p", "risk-summary",
+				`失败 ${failuresCount} · 心跳失联 ${staleCount} · 即将超时 ${timeoutRiskCount}`));
+			const link = el("a", "risk-link", "查看异常 Task →");
+			link.href = "#/failures";
+			link.addEventListener("click", (event) => {
+				event.preventDefault();
+				navigate("/failures");
+			});
+			workerBlock.appendChild(link);
+			riskBlocks.appendChild(workerBlock);
+		}
+		riskEl.appendChild(riskBlocks);
+	}
+
 	clearNode(dagsEl);
 	dagsEl.id = "dashboard-dags";
 	dagsEl.appendChild(el("h3", "section-heading", UI_TEXT.recentDags));
@@ -887,24 +1685,45 @@ async function renderDashboard(scrollTo) {
 		dagsEl.appendChild(el("p", "empty", UI_TEXT.noRecentDags));
 	} else if (recentDags.length === 0) {
 		dagsEl.appendChild(el("p", "empty", "暂无历史 DAG 记录"));
-	} else {
-		const rows = recentDags.map((dag) => {
-			const progress = dagProgress(dag);
-			return {
-				onClick: () => navigate(`/dag/${encodeURIComponent(dag.dagRunId)}`),
-				cells: [
-					dag.title || dag.dagRunId,
-					badge(dag.status),
-					`${progress.finished}/${progress.total}`,
-					formatDuration(dag.durationMs),
-					formatTs(dag.startedAt),
-				],
-			};
-		});
-		dagsEl.appendChild(
-			buildTable(["标题", "状态", "进度", "耗时", "开始时间"], rows),
-		);
-	}
+		} else {
+			const timeline = el("div", "dag-run-timeline");
+			for (const dag of recentDags) {
+				const progress = dagProgress(dag);
+				const item = el("a", "dag-run-timeline-item");
+				item.href = `#/dag/${encodeURIComponent(dag.dagRunId)}`;
+				item.title = dag.title || dag.dagRunId;
+				item.addEventListener("click", (event) => {
+					event.preventDefault();
+					navigate(`/dag/${encodeURIComponent(dag.dagRunId)}`);
+				});
+
+				const rail = el("span", "dag-run-timeline-rail");
+				rail.appendChild(
+					el(
+						"span",
+						`dag-run-timeline-dot status-${badgeClass(dag.effectiveStatus ?? dag.status)}`,
+					),
+				);
+				item.appendChild(rail);
+
+				const content = el("span", "dag-run-timeline-content");
+				content.appendChild(el("span", "dag-run-timeline-title", dag.title || dag.dagRunId));
+				content.appendChild(
+					el(
+						"span",
+						"dag-run-timeline-meta",
+						`${formatTs(dag.startedAt)} · ${progress.finished}/${progress.total} · ${formatDuration(dag.durationMs)}`,
+					),
+				);
+				item.appendChild(content);
+
+				const state = el("span", "dag-run-timeline-status");
+				state.appendChild(dagStatusBadge(dag.effectiveStatus ?? dag.status));
+				item.appendChild(state);
+				timeline.appendChild(item);
+			}
+			dagsEl.appendChild(timeline);
+		}
 
 	clearNode(batchesEl);
 	batchesEl.appendChild(el("h3", "section-heading", UI_TEXT.batches));
@@ -927,15 +1746,6 @@ async function renderDashboard(scrollTo) {
 		);
 	}
 
-	const failuresFooter = el("p", "dashboard-footer");
-	failuresFooter.appendChild(document.createTextNode("失败/失联合计："));
-	failuresFooter.appendChild(
-		failuresInboxLink(
-			(snapshot.health?.failuresCount ?? 0) + (snapshot.health?.staleCount ?? 0),
-		),
-	);
-	batchesEl.appendChild(failuresFooter);
-
 	if (scrollTo === "dags") {
 		dagsEl.scrollIntoView({ behavior: "smooth" });
 	}
@@ -1111,7 +1921,7 @@ function renderRunDagProgress(task, snapshot) {
 	panel.appendChild(
 		metaGrid([
 			["DAG", dag.title || dag.dagRunId],
-			["状态", badge(dag.status)],
+			["当前状态", dagStatusBadge(dag.effectiveStatus ?? dag.status)],
 			["进度", `${progress.finished}/${progress.total} 个节点`],
 			[
 				"详情",
@@ -1287,7 +2097,7 @@ async function renderRun(workerRunId, initial = true) {
 				.getElementById("run-meta")
 				.appendChild(el("p", "empty", "找不到该运行。"));
 		}
-		return;
+		return false;
 	}
 
 	if (snapshot) {
@@ -1298,13 +2108,22 @@ async function renderRun(workerRunId, initial = true) {
 	currentBatchRunId = task.batchRunId ?? currentBatchRunId;
 	await mergeRunEvents(workerRunId);
 	renderRunPanels(task, runEvents, snapshot ?? lastSnapshot);
-}
-
-function startRunPolling(workerRunId) {
-	if (runPollTimer) clearInterval(runPollTimer);
-	runPollTimer = setInterval(() => {
-		void renderRun(workerRunId, false);
-	}, POLL_MS);
+	return !TERMINAL_RUN_STATUSES.has((task.status ?? "").toLowerCase());
+}
+
+function startRunPolling(workerRunId, initial = true) {
+	if (runPollTimer) clearTimeout(runPollTimer);
+	const generation = ++pollingGeneration;
+	const poll = async (isInitial) => {
+		const active = await renderRun(workerRunId, isInitial);
+		if (generation !== pollingGeneration || !active) return;
+		const delay = detailPollDelay("running", isPageVisible());
+		runPollTimer = setTimeout(() => {
+			runPollTimer = null;
+			void poll(false);
+		}, delay);
+	};
+	void poll(initial);
 }
 
 async function renderDagDetail(dagRunId, initial = true) {
@@ -1319,24 +2138,36 @@ async function renderDagDetail(dagRunId, initial = true) {
 		selectedDagNodeId = null;
 		sessionEventOffset = 0;
 		sessionEvents = [];
+		dagInspectorOpen = false;
+		dagInspectorTab = "output";
+		dagGraphViewportState = null;
+		dagTimelineViewportState = null;
 	}
 
 	const metaEl = document.getElementById("dag-meta");
 	const ranksEl = document.getElementById("dag-ranks");
 	const nodesEl = document.getElementById("dag-nodes");
-	const outputEl = document.getElementById("dag-output");
+	dagGraphViewportState = captureDagGraphViewportState(
+		dagGraphViewportState,
+		dagRunId,
+		ranksEl.querySelector(".dag-graph-viewport"),
+	);
+	if (dagGraphViewportState?.dagRunId === dagRunId) {
+		dagGraphViewportStates.set(dagRunId, dagGraphViewportState);
+	}
 
 	const dag = await fetchJson(`/api/dag-runs/${encodeURIComponent(dagRunId)}`);
 	if (!dag) {
 		clearNode(metaEl);
 		metaEl.appendChild(el("p", "empty", "找不到该 DAG 运行。"));
-		clearNode(document.getElementById("dag-timeline"));
-		return;
+		closeDagInspector();
+		return false;
 	}
 
 	const nodes = dag.nodes ?? [];
-	if (!selectedDagNodeId || !nodes.some((n) => n.nodeId === selectedDagNodeId)) {
-		selectedDagNodeId = pickDefaultDagNode(nodes);
+	if (selectedDagNodeId && !nodes.some((n) => n.nodeId === selectedDagNodeId)) {
+		selectedDagNodeId = null;
+		dagInspectorOpen = false;
 		if (initial) {
 			sessionEventOffset = 0;
 			sessionEvents = [];
@@ -1352,19 +2183,38 @@ async function renderDagDetail(dagRunId, initial = true) {
 		.length;
 
 	clearNode(metaEl);
-	metaEl.appendChild(
-		metaGrid([
-			["标题", dag.title || dag.dagRunId],
-			["DAG 运行 ID", dag.dagRunId],
-			["状态", badge(dag.status)],
-			["开始时间", formatTs(dag.startedAt)],
-			["结束时间", formatTs(dag.finishedAt)],
-			["总耗时", formatDuration(dag.durationMs)],
-			["进度", `${progress.finished}/${progress.total}`],
-			["成功/失败/跳过", `${succeededCount}/${failedCount}/${skippedCount}`],
-			["DAG 路径", dag.dagPath ?? "—"],
-		]),
+	const visibility = dagMetaVisibility(dag);
+	const livenessValue = LIVENESS_LABELS[dag.liveness] ?? dag.liveness ?? LIVENESS_LABELS.unknown;
+	const primaryEntries = [
+		["标题", dag.title || dag.dagRunId],
+		["DAG 运行 ID", dag.dagRunId],
+		["状态", dagStatusBadge(dag.effectiveStatus ?? dag.status)],
+	];
+	if (visibility.showExecutorStatus) primaryEntries.push(["执行器状态", livenessValue]);
+	if (visibility.showConsistencyWarning) primaryEntries.push(["状态一致性", "不一致，需要处理"]);
+	if (visibility.showResume) primaryEntries.push(["允许恢复", "是"]);
+	if (visibility.showReconcile) primaryEntries.push(["允许收口", "是"]);
+	primaryEntries.push(
+		["开始时间", formatTs(dag.startedAt)],
+		["结束时间", formatTs(dag.finishedAt)],
+		["总耗时", formatDuration(dag.durationMs)],
+		["进度", `${progress.finished}/${progress.total}`],
+		["成功/失败/跳过", `${succeededCount}/${failedCount}/${skippedCount}`],
+		["DAG 路径", dag.dagPath ?? "—"],
 	);
+	metaEl.appendChild(metaGrid(primaryEntries));
+	const details = el("details", "meta-diagnostics");
+	details.appendChild(el("summary", null, "诊断信息"));
+	details.appendChild(metaGrid([
+		["当前判定", dagStatusBadge(dag.effectiveStatus ?? dag.status)],
+		["原始记录状态", badge(dag.status)],
+		["执行器状态", livenessValue],
+		["生命周期", dag.lifecycle ?? "—"],
+		["状态一致性", visibility.showConsistencyWarning ? "不一致，需要处理" : "一致"],
+		["允许恢复", visibility.showResume ? "是" : "否"],
+		["允许收口", visibility.showReconcile ? "是" : "否"],
+	]));
+	metaEl.appendChild(details);
 
 	clearNode(ranksEl);
 		ranksEl.appendChild(el("h3", null, "DAG 依赖图"));
@@ -1375,7 +2225,10 @@ async function renderDagDetail(dagRunId, initial = true) {
 	}
 
 	clearNode(nodesEl);
-	nodesEl.appendChild(el("h3", null, "节点"));
+	const nodeHeading = el("div", "dag-section-heading");
+	nodeHeading.appendChild(el("h3", null, "节点"));
+	nodeHeading.appendChild(el("span", "dag-section-meta", `共 ${nodes.length} 个节点`));
+	nodesEl.appendChild(nodeHeading);
 
 	if (nodes.length === 0) {
 		nodesEl.appendChild(el("p", "empty", UI_TEXT.noNodes));
@@ -1411,62 +2264,69 @@ async function renderDagDetail(dagRunId, initial = true) {
 				],
 			};
 		});
-		nodesEl.appendChild(
-			buildTable(
-				["节点 ID", "层级", "执行方式", "模型", "状态", "耗时", "备注"],
-				rows,
-			),
+		const nodeTable = buildTable(
+				["节点 ID", "依赖层", "执行方式", "模型", "状态", "耗时", "备注"],
+			rows,
 		);
-	}
-
-	await mergeSessionEvents(dagRunId, selectedDagNodeId);
-	renderSessionTimeline(selectedDagNodeId);
-
-	clearNode(outputEl);
-	outputEl.appendChild(el("h3", null, "节点输出"));
-	const withOutput = nodes.filter((n) => n.outputPreview || n.errorPreview);
-	if (withOutput.length === 0) {
-		outputEl.appendChild(el("p", "empty", UI_TEXT.noOutput));
-	} else {
-		for (const node of withOutput) {
-			if (node.outputPreview) {
-				outputEl.appendChild(
-					expandablePreview(`${node.nodeId} · 输出`, node.outputPreview),
-				);
-			}
-			if (node.errorPreview) {
-				outputEl.appendChild(
-					expandablePreview(
-						`${node.nodeId} · 错误`,
-						node.errorPreview,
-						"output-preview error-preview",
-					),
-				);
+		nodeTable.classList.add("dag-node-table");
+		for (const row of nodeTable.tBodies[0]?.rows ?? []) {
+			for (const columnIndex of [0, 3, 6]) {
+				const cell = row.cells[columnIndex];
+				if (cell?.textContent) cell.title = cell.textContent;
 			}
 		}
+		nodesEl.appendChild(nodeTable);
 	}
-}
 
-function startDagPolling(dagRunId) {
-	if (dagPollTimer) clearInterval(dagPollTimer);
-	dagPollTimer = setInterval(() => {
-		void renderDagDetail(dagRunId, false);
-	}, POLL_MS);
+	if (dagInspectorOpen && selectedDagNodeId) {
+		await mergeSessionEvents(dagRunId, selectedDagNodeId);
+	}
+	renderDagInspector(
+		dagRunId,
+		nodes.find((node) => node.nodeId === selectedDagNodeId),
+	);
+	return isDagRunActive(dag);
+}
+
+function startDagPolling(dagRunId, initial = true) {
+	if (dagPollTimer) clearTimeout(dagPollTimer);
+	const generation = ++pollingGeneration;
+	const poll = async (isInitial) => {
+		const active = await renderDagDetail(dagRunId, isInitial);
+		if (generation !== pollingGeneration || !active) return;
+		const delay = detailPollDelay("running", isPageVisible());
+		dagPollTimer = setTimeout(() => {
+			dagPollTimer = null;
+			void poll(false);
+		}, delay);
+	};
+	void poll(initial);
+}
+
+function startDashboardPolling(scrollTo) {
+	if (dashboardTimer) clearTimeout(dashboardTimer);
+	const generation = ++pollingGeneration;
+	const poll = async (initialScrollTo) => {
+		await renderDashboard(initialScrollTo);
+		if (generation !== pollingGeneration) return;
+		dashboardTimer = setTimeout(() => {
+			dashboardTimer = null;
+			void poll();
+		}, dashboardPollDelay());
+	};
+	void poll(scrollTo);
 }
 
 function route() {
 	stopTimers();
 	const r = parseRoute();
 	if (r.view === "dashboard") {
-		void renderDashboard(r.scrollTo);
-		dashboardTimer = setInterval(() => void renderDashboard(), DASHBOARD_POLL_MS);
+		startDashboardPolling(r.scrollTo);
 	} else if (r.view === "batch") {
 		void renderBatch(r.batchRunId);
 	} else if (r.view === "run") {
-		void renderRun(r.workerRunId, true);
 		startRunPolling(r.workerRunId);
 	} else if (r.view === "dag") {
-		void renderDagDetail(r.dagRunId, true);
 		startDagPolling(r.dagRunId);
 	} else if (r.view === "failures") {
 		void renderFailures();
@@ -1476,4 +2336,12 @@ function route() {
 if (typeof window !== "undefined") {
 	window.addEventListener("hashchange", route);
 	window.addEventListener("load", route);
+	document.addEventListener("pointerdown", closeDagInspectorOnOutsideClick);
+	document.addEventListener("visibilitychange", () => {
+		if (!isPageVisible()) return;
+		const r = parseRoute();
+		if (r.view === "dashboard") startDashboardPolling();
+		if (r.view === "run") startRunPolling(r.workerRunId, false);
+		if (r.view === "dag") startDagPolling(r.dagRunId, false);
+	});
 }