@tea-agent/loop-agent 0.8.0 → 0.9.0

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

@@ -1,6 +1,7 @@
 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 UI_TEXT = {
@@ -132,6 +133,172 @@ let selectedDagNodeId = null;
 let sessionEventOffset = 0;
 let sessionEvents = [];
 let lastSnapshot = null;
+let dagInspectorOpen = false;
+let dagInspectorTab = "output";
+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(/^#/, "") || "/";
@@ -268,13 +435,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 +478,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;
@@ -427,26 +602,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();
@@ -517,32 +672,50 @@ 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 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 ul = el("ul", "process-timeline");
 	for (const event of sessionEvents) {
 		const li = el("li", "process-timeline-item");
@@ -550,21 +723,43 @@ function renderSessionTimeline(nodeId) {
 		li.appendChild(el("span", "process-timeline-label", formatSessionEventLabel(event)));
 		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) {
 	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 (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));
 }
 
 function dagProgress(dag) {
@@ -733,6 +928,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 +956,226 @@ 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");
+	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() {
@@ -838,6 +1243,7 @@ async function renderDashboard(scrollTo) {
 
 	const kpiEl = document.getElementById("dashboard-kpi");
 	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");
 
@@ -855,13 +1261,19 @@ async function renderDashboard(scrollTo) {
 		.slice(0, 10);
 
 	clearNode(kpiEl);
+	const quietCount = snapshot.health?.quietCount ?? 0;
+	const staleCount = snapshot.health?.staleCount ?? 0;
+	const timeoutRiskCount = snapshot.health?.timeoutRiskCount ?? 0;
+	const failuresCount = snapshot.health?.failuresCount ?? 0;
 	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("无输出", quietCount, quietCount > 0 ? "kpi-muted" : ""));
+	kpiEl.appendChild(kpiCard("心跳失联", staleCount, staleCount > 0 ? "kpi-risk" : ""));
+	kpiEl.appendChild(
+		kpiCard("即将超时", timeoutRiskCount, timeoutRiskCount > 0 ? "kpi-risk" : ""),
+	);
 	kpiEl.appendChild(
-		kpiCard("失败", snapshot.health?.failuresCount ?? 0, "kpi-danger"),
+		kpiCard("失败", failuresCount, failuresCount > 0 ? "kpi-danger" : ""),
 	);
 
 	const nowMs = Date.now();
@@ -880,6 +1292,30 @@ async function renderDashboard(scrollTo) {
 		activeEl.appendChild(list);
 	}
 
+	const riskCount = failuresCount + staleCount + timeoutRiskCount;
+	clearNode(riskEl);
+	riskEl.classList.toggle("panel-risk-attention", riskCount > 0);
+	riskEl.appendChild(el("h3", "section-heading", "运行风险"));
+	if (riskCount === 0) {
+		riskEl.appendChild(el("p", "risk-empty", "当前没有需要处理的异常。"));
+	} else {
+		riskEl.appendChild(el("div", "risk-total", String(riskCount)));
+		riskEl.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");
+		});
+		riskEl.appendChild(link);
+	}
+
 	clearNode(dagsEl);
 	dagsEl.id = "dashboard-dags";
 	dagsEl.appendChild(el("h3", "section-heading", UI_TEXT.recentDags));
@@ -887,24 +1323,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-${String(dag.status ?? "unknown").toLowerCase()}`,
+					),
+				);
+				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(badge(dag.status));
+				item.appendChild(state);
+				timeline.appendChild(item);
+			}
+			dagsEl.appendChild(timeline);
+		}
 
 	clearNode(batchesEl);
 	batchesEl.appendChild(el("h3", "section-heading", UI_TEXT.batches));
@@ -927,15 +1384,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" });
 	}
@@ -1287,7 +1735,7 @@ async function renderRun(workerRunId, initial = true) {
 				.getElementById("run-meta")
 				.appendChild(el("p", "empty", "找不到该运行。"));
 		}
-		return;
+		return false;
 	}
 
 	if (snapshot) {
@@ -1298,13 +1746,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 +1776,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 = [];
@@ -1375,7 +1844,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 +1883,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 +1955,11 @@ function route() {
 if (typeof window !== "undefined") {
 	window.addEventListener("hashchange", route);
 	window.addEventListener("load", route);
+	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);
+	});
 }