@tea-agent/loop-agent 0.7.5 → 0.9.0

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

@@ -1,1480 +1,1965 @@
-import { layoutDag } from "./dag-layout.js";
-
-const POLL_MS = 2000;
-const DASHBOARD_POLL_MS = 5000;
-
-const UI_TEXT = {
-	dashboard: "总览",
-	dagRuns: "DAG 运行",
-	failures: "失败箱",
-	batchDetail: "批次详情",
-	runDetail: "运行详情",
-	dagDetail: "DAG 详情",
-	activeDags: "进行中的 DAG runs",
-	recentDags: "最近 DAG 运行",
-	batches: "Worker 批次",
-	noActiveDags: "当前无进行中的 DAG。启动 run-dag 后将出现在这里。",
-	noRecentDags: "暂无 DAG 运行记录。",
-	noBatches: "尚无 Task Pool 批次。产品线 batch 运行后会出现在这里。",
-	noNodes: "暂无节点。",
-	noOutput: "暂无输出预览。",
-	noSessionEvents:
-		"该节点暂无过程日志（可能为 CLI 后端、尚未落盘，或历史 run 早于 session-events 能力）",
-	noArtifacts: "暂无产物记录。",
-	noActiveCommand: "无活跃命令。",
-	noFailures: "暂无失败或阻塞的任务。",
-	enterDetail: "进入详情 →",
-	repoRoot: "仓库根目录",
-	generatedAt: "生成时间",
-	refreshStatus: "刷新状态",
-	failureInbox: "失败箱",
-	nearRealtime: "近实时（轮询）",
-};
-
-const STATUS_LABELS = {
-	running: "运行中",
-	started: "已启动",
-	pending: "等待中",
-	queued: "排队中",
-	succeeded: "成功",
-	finished: "已完成",
-	completed: "已完成",
-	done: "完成",
-	failed: "失败",
-	error: "错误",
-	partial_failed: "部分失败",
-	partialfailed: "部分失败",
-	blocked: "阻塞",
-	stale: "过期",
-	reused: "复用",
-	unknown: "未知",
-	cancelled: "已取消",
-	skipped: "已跳过",
-	finished_upper: "已完成",
-	error_upper: "错误",
-	skipped_upper: "已跳过",
-};
-
-const LIVENESS_LABELS = {
-	active: "活跃",
-	quiet: "安静但仍存活",
-	stale: "已过期",
-	"timeout-risk": "接近超时",
-};
-
-const STEP_LABELS = {
-	preflight: "预检",
-	materialize: "物化",
-	"dag-run-task": "生成 DAG 任务",
-	"pi-model-override": "Pi 模型覆盖",
-	"dag-validate": "校验 DAG",
-	"run-dag": "执行 DAG",
-	"report-decision": "报告决策",
-	"dag-doctor": "DAG 诊断",
-	"closeout-draft": "失败收尾草稿",
-	"promote-run": "晋升运行",
-	"closeout-task": "任务收尾",
-};
-
-const ARTIFACT_LABELS = {
-	stdoutPath: "标准输出",
-	stderrPath: "标准错误",
-	resultPath: "结果",
-	runRecordPath: "运行记录",
-	reportMarkdown: "报告",
-	doctorMarkdown: "诊断",
-	closeoutDraft: "收尾草稿",
-	dagPath: "DAG 路径",
-};
-
-const STEP_ORDER = [
-	"preflight",
-	"materialize",
-	"dag-run-task",
-	"pi-model-override",
-	"dag-validate",
-	"run-dag",
-	"report-decision",
-	"dag-doctor",
-	"closeout-draft",
-	"promote-run",
-	"closeout-task",
-];
-
-const TERMINAL_RUN_STATUSES = new Set([
-	"finished",
-	"completed",
-	"succeeded",
-	"failed",
-	"partial_failed",
-	"error",
-	"cancelled",
-]);
-
-const ARTIFACT_KEYS = [
-	"stdoutPath",
-	"stderrPath",
-	"resultPath",
-	"runRecordPath",
-	"reportMarkdown",
-	"doctorMarkdown",
-	"closeoutDraft",
-];
-
-let dashboardTimer = null;
-let runPollTimer = null;
-let dagPollTimer = null;
-let runEventOffset = 0;
-let runEvents = [];
-let currentRunId = null;
-let currentBatchRunId = null;
-let currentDagRunId = null;
-let selectedDagNodeId = null;
-let sessionEventOffset = 0;
-let sessionEvents = [];
-let lastSnapshot = null;
-
-export function parseHashRoute(hashValue) {
-	const hash = hashValue.replace(/^#/, "") || "/";
-	const batchMatch = /^\/batch\/([^/]+)$/.exec(hash);
-	if (batchMatch) {
-		return { view: "batch", batchRunId: decodeURIComponent(batchMatch[1]) };
-	}
-	const runMatch = /^\/run\/([^/]+)$/.exec(hash);
-	if (runMatch) {
-		return { view: "run", workerRunId: decodeURIComponent(runMatch[1]) };
-	}
-	const dagMatch = /^\/dag\/([^/]+)$/.exec(hash);
-	if (dagMatch) {
-		return { view: "dag", dagRunId: decodeURIComponent(dagMatch[1]) };
-	}
-	if (hash === "/failures") {
-		return { view: "failures" };
-	}
-	if (hash === "/dags") {
-		return { view: "dashboard", scrollTo: "dags" };
-	}
-	return { view: "dashboard" };
-}
-
-function parseRoute() {
-	return parseHashRoute(location.hash);
-}
-
-function navigate(path) {
-	location.hash = path;
-}
-
-async function fetchJson(url) {
-	try {
-		const res = await fetch(url);
-		if (!res.ok) return null;
-		return await res.json();
-	} catch {
-		return null;
-	}
-}
-
-function clearNode(node) {
-	while (node.firstChild) node.removeChild(node.firstChild);
-}
-
-function el(tag, className, text) {
-	const node = document.createElement(tag);
-	if (className) node.className = className;
-	if (text !== undefined) node.textContent = text;
-	return node;
-}
-
-function statusLabel(status) {
-	if (!status) return STATUS_LABELS.unknown;
-	const key = status.toLowerCase().replace(/-/g, "_");
-	if (STATUS_LABELS[key]) return STATUS_LABELS[key];
-	if (status === "FINISHED") return STATUS_LABELS.finished_upper;
-	if (status === "ERROR") return STATUS_LABELS.error_upper;
-	if (status === "SKIPPED") return STATUS_LABELS.skipped_upper;
-	return status;
-}
-
-function statusSymbol(status) {
-	const key = (status ?? "unknown").toLowerCase();
-	if (["finished", "completed", "succeeded", "done"].includes(key)) return "✓";
-	if (["failed", "error"].includes(key)) return "✕";
-	if (key === "skipped") return "↷";
-	if (["running", "started"].includes(key)) return "●";
-	if (["pending", "queued", "blocked"].includes(key)) return "○";
-	return "◇";
-}
-
-function badgeClass(status) {
-	if (!status) return "unknown";
-	const key = status.toLowerCase().replace(/_/g, "-");
-	if (key === "finished" || key === "completed" || key === "succeeded" || key === "done") {
-		return "succeeded";
-	}
-	if (key === "error" || key === "failed") return "failed";
-	if (key === "partial-failed") return "partial-failed";
-	if (key === "skipped") return "skipped";
-	if (key === "running" || key === "started") return "running";
-	return key;
-}
-
-function badge(status) {
-	const label = statusLabel(status);
-	const cls = badgeClass(status);
-	return el("span", `badge badge-${cls}`, label);
-}
-
-function formatTs(value) {
-	if (!value) return "—";
-	const d = new Date(value);
-	if (Number.isNaN(d.getTime())) return value;
-	return d.toLocaleString("zh-CN", { hour12: false });
-}
-
-function formatMs(ms) {
-	if (ms === undefined || ms === null) return "—";
-	if (ms < 1000) return `${ms}ms`;
-	return `${(ms / 1000).toFixed(1)}s`;
-}
-
-function formatDuration(ms) {
-	if (ms === undefined || ms === null || Number.isNaN(ms)) return "—";
-	if (ms < 0) ms = 0;
-	const totalSec = Math.floor(ms / 1000);
-	const hours = Math.floor(totalSec / 3600);
-	const minutes = Math.floor((totalSec % 3600) / 60);
-	const seconds = totalSec % 60;
-	if (hours > 0) return `${hours}小时 ${minutes}分 ${seconds}秒`;
-	if (minutes > 0) return `${minutes}分 ${seconds}秒`;
-	return `${seconds}秒`;
-}
-
-function formatAgo(iso, nowMs) {
-	if (!iso) return "—";
-	const ts = Date.parse(iso);
-	if (Number.isNaN(ts)) return "—";
-	const base = nowMs ?? Date.now();
-	const deltaSec = Math.max(0, Math.floor((base - ts) / 1000));
-	if (deltaSec < 10) return "刚刚";
-	if (deltaSec < 60) return `约 ${deltaSec} 秒前`;
-	if (deltaSec < 3600) return `约 ${Math.floor(deltaSec / 60)} 分钟前`;
-	if (deltaSec < 86400) return `约 ${Math.floor(deltaSec / 3600)} 小时前`;
-	return `约 ${Math.floor(deltaSec / 86400)} 天前`;
-}
-
-function livenessBadge(liveness) {
-	if (!liveness) return null;
-	return el("span", `badge liveness-${liveness}`, LIVENESS_LABELS[liveness] ?? liveness);
-}
-
-function showView(name) {
-	document.querySelectorAll("[data-view]").forEach((section) => {
-		section.hidden = section.dataset.view !== name;
-	});
-}
-
-function setBreadcrumb(parts) {
-	const nav = document.getElementById("breadcrumb");
-	clearNode(nav);
-	parts.forEach((part, i) => {
-		if (i > 0) nav.appendChild(document.createTextNode(" / "));
-		if (part.href) {
-			const a = document.createElement("a");
-			a.href = part.href;
-			a.textContent = part.label;
-			a.addEventListener("click", (e) => {
-				e.preventDefault();
-				navigate(part.href);
-			});
-			nav.appendChild(a);
-		} else {
-			nav.appendChild(document.createTextNode(part.label));
-		}
-	});
-}
-
-function updateHeaderRefresh(generatedAt) {
-	const elRefresh = document.getElementById("header-refresh");
-	if (!elRefresh) return;
-	if (!generatedAt) {
-		elRefresh.textContent = "";
-		return;
-	}
-	elRefresh.textContent = `${UI_TEXT.refreshStatus}：${formatAgo(generatedAt)} · ${UI_TEXT.nearRealtime}`;
-}
-
-function stopTimers() {
-	if (dashboardTimer) {
-		clearInterval(dashboardTimer);
-		dashboardTimer = null;
-	}
-	if (runPollTimer) {
-		clearInterval(runPollTimer);
-		runPollTimer = null;
-	}
-	if (dagPollTimer) {
-		clearInterval(dagPollTimer);
-		dagPollTimer = null;
-	}
-	currentRunId = null;
-	currentBatchRunId = null;
-	currentDagRunId = null;
-	selectedDagNodeId = null;
-	sessionEventOffset = 0;
-	sessionEvents = [];
-	runEventOffset = 0;
-	runEvents = [];
-}
-
-function metaGrid(entries) {
-	const dl = el("dl", "meta-grid");
-	for (const [label, value] of entries) {
-		const item = document.createElement("div");
-		item.className = "meta-item";
-		const dt = document.createElement("dt");
-		dt.textContent = label;
-		const dd = document.createElement("dd");
-		if (value instanceof Node) dd.appendChild(value);
-		else dd.textContent = value ?? "—";
-		item.appendChild(dt);
-		item.appendChild(dd);
-		dl.appendChild(item);
-	}
-	return dl;
-}
-
-function buildTable(headers, rows) {
-	const table = document.createElement("table");
-	const thead = document.createElement("thead");
-	const headRow = document.createElement("tr");
-	for (const h of headers) {
-		const th = document.createElement("th");
-		th.textContent = h;
-		headRow.appendChild(th);
-	}
-	thead.appendChild(headRow);
-	table.appendChild(thead);
-
-	const tbody = document.createElement("tbody");
-	for (const row of rows) {
-		const tr = document.createElement("tr");
-		if (row.className) tr.className = row.className;
-		if (row.onClick) {
-			tr.classList.add("clickable");
-			tr.addEventListener("click", row.onClick);
-		}
-		for (const cell of row.cells) {
-			const td = document.createElement("td");
-			if (cell instanceof Node) td.appendChild(cell);
-			else td.textContent = cell ?? "—";
-			tr.appendChild(td);
-		}
-		tbody.appendChild(tr);
-	}
-	table.appendChild(tbody);
-	return table;
-}
-
-function summaryText(summary) {
-	if (!summary) return "—";
-	return `共 ${summary.total} / 成功 ${summary.succeeded} / 失败 ${summary.failed} / 复用 ${summary.reused}`;
-}
-
-function failuresInboxLink(count) {
-	const wrap = el("span");
-	wrap.appendChild(document.createTextNode(`${count} `));
-	const a = el("a", "inbox-link", `${UI_TEXT.failureInbox} →`);
-	a.href = "#/failures";
-	a.addEventListener("click", (e) => {
-		e.preventDefault();
-		navigate("/failures");
-	});
-	wrap.appendChild(a);
-	return wrap;
-}
-
-function artifactLink(label, refPath) {
-	if (!refPath) return el("span", "muted", "—");
-	const a = el("a", "artifact-link", label);
-	a.href = `/api/artifacts?path=${encodeURIComponent(refPath)}&tail=200`;
-	a.target = "_blank";
-	return a;
-}
-
-function isNodeActive(status) {
-	if (!status) return false;
-	const s = status.toLowerCase();
-	return s === "running" || s === "started" || s === "pending" || s === "queued";
-}
-
-function isNodeFinished(status) {
-	if (!status) return false;
-	const s = status.toLowerCase();
-	return (
-		s === "finished" ||
-		s === "completed" ||
-		s === "succeeded" ||
-		s === "done" ||
-		s === "error" ||
-		s === "failed" ||
-		s === "skipped"
-	);
-}
-
-function isNodeFailed(status) {
-	if (!status) return false;
-	const s = status.toLowerCase();
-	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();
-	if (normalized.length <= maxLen) return normalized;
-	return `${normalized.slice(0, maxLen)}…`;
-}
-
-function extractAssistantSummary(event) {
-	if (!event || typeof event !== "object") return "—";
-	const record = event;
-	if (record.message && typeof record.message === "object") {
-		const content = record.message.content;
-		if (Array.isArray(content)) {
-			return (
-				content
-					.filter((part) => part?.type === "text" && typeof part.text === "string")
-					.map((part) => part.text)
-					.join(" ") || "—"
-			);
-		}
-		if (typeof record.message.content === "string") {
-			return record.message.content;
-		}
-	}
-	if (typeof record.text === "string") return record.text;
-	if (typeof record.outputPreview === "string") return record.outputPreview;
-	return "—";
-}
-
-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 === "tool_execution_start" || type === "tool_start") {
-		return `工具开始 · ${toolName}`;
-	}
-	if (type === "tool_execution_end" || type === "tool_end") {
-		return `工具结束 · ${toolName}`;
-	}
-	if (type === "turn_end" || type === "assistant" || type === "assistant_message") {
-		return `助手输出摘要 · ${truncateText(extractAssistantSummary(event), 120)}`;
-	}
-	return type;
-}
-
-function formatSessionEventTime(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 formatTs(ts).replace(/\s.*/, "") || formatTs(ts);
-}
-
-async function mergeSessionEvents(dagRunId, nodeId) {
-	if (!dagRunId || !nodeId) return;
-	const page = await fetchJson(
-		`/api/dag-runs/${encodeURIComponent(dagRunId)}/nodes/${encodeURIComponent(nodeId)}/session-events?after=${sessionEventOffset}`,
-	);
-	if (!page) return;
-	if (Array.isArray(page.events) && page.events.length > 0) {
-		sessionEvents = sessionEvents.concat(page.events);
-	}
-	if (typeof page.nextOffset === "number") {
-		sessionEventOffset = page.nextOffset;
-	}
-}
-
-function selectDagNode(dagRunId, nodeId) {
-	if (selectedDagNodeId === nodeId) return;
-	selectedDagNodeId = nodeId;
-	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;
-
-	clearNode(panel);
-	panel.appendChild(el("h3", null, "过程时间线"));
-	if (nodeId) {
-		panel.appendChild(el("p", "timeline-node-label", `节点：${nodeId}`));
-	}
-
-	if (!nodeId || sessionEvents.length === 0) {
-		panel.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");
-		li.appendChild(el("span", "process-timeline-time", formatSessionEventTime(event)));
-		li.appendChild(el("span", "process-timeline-label", formatSessionEventLabel(event)));
-		ul.appendChild(li);
-	}
-	container.appendChild(ul);
-	panel.appendChild(container);
-
-	if (wasNearBottom) {
-		container.scrollTop = container.scrollHeight;
-	}
-}
-
-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;
-}
-
-function dagProgress(dag) {
-	const nodes = dag.nodes ?? [];
-	const finished = nodes.filter((n) => isNodeFinished(n.status)).length;
-	return { finished, total: nodes.length };
-}
-
-function getActiveNodes(dag) {
-	return (dag.nodes ?? []).filter((n) => isNodeActive(n.status));
-}
-
-function dagSortTime(dag) {
-	return dag.startedAt ?? dag.finishedAt ?? "";
-}
-
-function findDagForRun(snapshot, workerRunId, task) {
-	const dagRuns = snapshot?.dagRuns ?? [];
-	const byId = dagRuns.find((d) => d.dagRunId === workerRunId);
-	if (byId) return byId;
-	if (task?.dagRunId) {
-		return dagRuns.find((d) => d.dagRunId === task.dagRunId);
-	}
-	return undefined;
-}
-
-function kpiCard(label, value, extraClass) {
-	const card = el("div", `kpi-card${extraClass ? ` ${extraClass}` : ""}`);
-	card.appendChild(el("div", "kpi-label", label));
-	card.appendChild(el("div", "kpi-value", String(value)));
-	return card;
-}
-
-function renderActiveDagCard(dag, nowMs) {
-	const card = el("div", "active-dag-card");
-	if (isNodeActive(dag.status) || getActiveNodes(dag).length > 0) {
-		card.classList.add("active-dag-card-running");
-	}
-	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));
-	card.appendChild(header);
-
-	const progress = dagProgress(dag);
-	const activeNodes = getActiveNodes(dag);
-	const currentLabel =
-		activeNodes.length > 0
-			? activeNodes
-					.map((n) => {
-						const parts = [n.nodeId];
-						if (n.executor) parts.push(`(${n.executor})`);
-						if (n.model) parts.push(n.model);
-						return parts.join(" ");
-					})
-					.join(", ")
-			: "—";
-
-	const elapsed =
-		dag.durationMs ??
-		(dag.startedAt
-			? Math.max(0, nowMs - Date.parse(dag.startedAt))
-			: undefined);
-	const lastUpdate = dag.finishedAt ?? dag.startedAt;
-
-	const meta = el("div", "active-dag-meta");
-	meta.appendChild(
-		el(
-			"span",
-			null,
-			`进度 ${progress.finished}/${progress.total} · 当前节点：${currentLabel}`,
-		),
-	);
-	meta.appendChild(
-		el(
-			"span",
-			null,
-			`已用时 ${formatDuration(elapsed)} · ${formatAgo(lastUpdate, nowMs)} 更新`,
-		),
-	);
-	card.appendChild(meta);
-
-	const link = el("a", "active-dag-link", UI_TEXT.enterDetail);
-	link.href = `#/dag/${encodeURIComponent(dag.dagRunId)}`;
-	link.addEventListener("click", (e) => {
-		e.preventDefault();
-		navigate(`/dag/${encodeURIComponent(dag.dagRunId)}`);
-	});
-	card.appendChild(link);
-	return card;
-}
-
-function renderRankLanes(dag) {
-	const container = el("div", "rank-lanes");
-	const nodes = dag.nodes ?? [];
-	const ranks = dag.ranks;
-	const rankGroups = new Map();
-
-	if (ranks && ranks.length > 0) {
-		for (let i = 0; i < ranks.length; i++) {
-			rankGroups.set(String(i), ranks[i]);
-		}
-		for (const node of nodes) {
-			const rank = node.rank ?? "—";
-			if (!rankGroups.has(rank)) {
-				rankGroups.set(rank, [node.nodeId]);
-			} else if (!rankGroups.get(rank).includes(node.nodeId)) {
-				rankGroups.get(rank).push(node.nodeId);
-			}
-		}
-	} else {
-		for (const node of nodes) {
-			const rank = node.rank ?? "—";
-			const list = rankGroups.get(rank) ?? [];
-			list.push(node.nodeId);
-			rankGroups.set(rank, list);
-		}
-	}
-
-	const sortedRanks = [...rankGroups.keys()].sort((a, b) => {
-		const na = Number(a);
-		const nb = Number(b);
-		if (!Number.isNaN(na) && !Number.isNaN(nb)) return na - nb;
-		return a.localeCompare(b);
-	});
-
-	const nodeById = Object.fromEntries(nodes.map((n) => [n.nodeId, n]));
-
-	for (const rank of sortedRanks) {
-		const lane = el("div", "rank-lane");
-		lane.appendChild(el("div", "rank-lane-label", `Rank ${rank}`));
-		const chips = el("div", "rank-lane-nodes");
-		for (const nodeId of rankGroups.get(rank) ?? []) {
-			const node = nodeById[nodeId] ?? { nodeId };
-			const chip = el("div", "rank-node-chip");
-			if (isNodeActive(node.status)) chip.classList.add("rank-node-active");
-			if (isNodeFailed(node.status)) chip.classList.add("rank-node-error");
-			chip.appendChild(el("span", "rank-node-id", nodeId));
-			if (node.status) chip.appendChild(badge(node.status));
-			if (node.durationMs !== undefined) {
-				chip.appendChild(el("span", "rank-node-dur", formatMs(node.durationMs)));
-			}
-			chips.appendChild(chip);
-		}
-		lane.appendChild(chips);
-		container.appendChild(lane);
-	}
-	return container;
-}
-
-function svgEl(tag, attrs = {}) {
-	const node = document.createElementNS("http://www.w3.org/2000/svg", tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	return node;
-}
-
-function renderDagGraph(dag, dagRunId) {
-	const nodes = dag.nodes ?? [];
-	const edges = dag.edges ?? [];
-	const layout = layoutDag(nodes, edges, dag.ranks ?? []);
-	const wrap = el("div", "dag-graph-wrap");
-	const toolbar = el("div", "dag-graph-toolbar");
-	toolbar.appendChild(el("span", "dag-graph-summary", `${nodes.length} 节点 · ${layout.edges.length} 条依赖`));
-	const reset = el("button", "dag-graph-reset", "重置视图");
-	toolbar.appendChild(reset);
-	wrap.appendChild(toolbar);
-	if (edges.length === 0) wrap.appendChild(el("p", "dag-graph-fallback", "该运行没有可用依赖数据；图按 Rank 展示，节点表格仍保留完整数据。"));
-	const viewport = el("div", "dag-graph-viewport");
-	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); svg.appendChild(defs);
-	const related = new Set([selectedDagNodeId]);
-	for (const edge of layout.edges) if (edge.from === selectedDagNodeId || edge.to === 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${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);
-	}
-	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 === selectedDagNodeId ? " selected" : ""}${selectedDagNodeId && !related.has(node.nodeId) ? " dag-dimmed" : ""}`, tabindex: 0, role: "button", "aria-label": `${node.nodeId}，状态 ${status}` });
-		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" }); state.textContent = `${statusSymbol(status)} ${statusLabel(node.status)} · ${formatMs(node.durationMs)}`; 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(); } });
-		svg.appendChild(group);
-	}
-	viewport.appendChild(svg); wrap.appendChild(viewport);
-	reset.addEventListener("click", () => { 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;
-}
-
-async function renderFailures() {
-	showView("failures");
-	setBreadcrumb([{ label: UI_TEXT.dashboard, href: "#/" }, { label: UI_TEXT.failures }]);
-
-	const listEl = document.getElementById("failures-list");
-	const emptyEl = document.getElementById("failures-empty");
-	clearNode(listEl);
-
-	const snapshot = await fetchJson("/api/snapshot");
-	if (!snapshot) return;
-	lastSnapshot = snapshot;
-	updateHeaderRefresh(snapshot.generatedAt);
-
-	const tasks = (snapshot.tasks ?? []).filter(
-		(task) =>
-			task.status === "failed" ||
-			task.status === "blocked" ||
-			task.status === "stale" ||
-			task.liveness === "stale",
-	);
-
-	if (tasks.length === 0) {
-		emptyEl.hidden = false;
-		return;
-	}
-	emptyEl.hidden = true;
-
-	const refs = (task) => task.artifactRefs ?? {};
-	const rows = tasks.map((task) => ({
-		className: `row-${task.status}`,
-		onClick: task.workerRunId
-			? () => navigate(`/run/${encodeURIComponent(task.workerRunId)}`)
-			: undefined,
-		cells: [
-			task.taskId ?? "—",
-			task.featureId ?? "—",
-			badge(task.status),
-			task.failureCategory ?? "—",
-			task.recommendedFollowUp ?? "—",
-			(() => {
-				const links = el("div", "artifact-links");
-				const r = refs(task);
-				links.appendChild(artifactLink("报告", r.reportMarkdown));
-				links.appendChild(document.createTextNode(" "));
-				links.appendChild(artifactLink("诊断", r.doctorMarkdown));
-				links.appendChild(document.createTextNode(" "));
-				links.appendChild(artifactLink("收尾", r.closeoutDraft));
-				return links;
-			})(),
-		],
-	}));
-	listEl.appendChild(
-		buildTable(
-			["任务", "特性", "状态", "分类", "建议跟进", "产物"],
-			rows,
-		),
-	);
-}
-
-async function renderDashboard(scrollTo) {
-	showView("dashboard");
-	setBreadcrumb([{ label: UI_TEXT.dashboard }]);
-
-	const kpiEl = document.getElementById("dashboard-kpi");
-	const activeEl = document.getElementById("dashboard-active-dags");
-	const dagsEl = document.getElementById("dashboard-dags");
-	const batchesEl = document.getElementById("dashboard-batches");
-
-	const snapshot = await fetchJson("/api/snapshot");
-	if (!snapshot) return;
-	lastSnapshot = snapshot;
-	updateHeaderRefresh(snapshot.generatedAt);
-
-	const dagRuns = snapshot.dagRuns ?? [];
-	const activeDags = dagRuns.filter(isDagRunActive);
-	const activeDagIds = new Set(activeDags.map((d) => d.dagRunId));
-	const recentDags = dagRuns
-		.filter((d) => !activeDagIds.has(d.dagRunId))
-		.sort((a, b) => dagSortTime(b).localeCompare(dagSortTime(a)))
-		.slice(0, 10);
-
-	clearNode(kpiEl);
-	kpiEl.appendChild(kpiCard("活跃 DAG", activeDags.length, "kpi-highlight"));
-	kpiEl.appendChild(kpiCard("活跃任务", 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 nowMs = Date.now();
-
-	clearNode(activeEl);
-	activeEl.appendChild(el("h3", "section-heading", UI_TEXT.activeDags));
-	if (activeDags.length === 0) {
-		activeEl.appendChild(el("p", "empty", UI_TEXT.noActiveDags));
-	} else {
-		const list = el("div", "active-dag-list");
-		for (const dag of activeDags.sort((a, b) =>
-			dagSortTime(b).localeCompare(dagSortTime(a)),
-		)) {
-			list.appendChild(renderActiveDagCard(dag, nowMs));
-		}
-		activeEl.appendChild(list);
-	}
-
-	clearNode(dagsEl);
-	dagsEl.id = "dashboard-dags";
-	dagsEl.appendChild(el("h3", "section-heading", UI_TEXT.recentDags));
-	if (recentDags.length === 0 && activeDags.length === 0) {
-		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),
-		);
-	}
-
-	clearNode(batchesEl);
-	batchesEl.appendChild(el("h3", "section-heading", UI_TEXT.batches));
-	const batches = snapshot.batches ?? [];
-	if (batches.length === 0) {
-		batchesEl.appendChild(el("p", "empty", UI_TEXT.noBatches));
-	} else {
-		const rows = batches.map((batch) => ({
-			onClick: () => navigate(`/batch/${encodeURIComponent(batch.batchRunId)}`),
-			cells: [
-				batch.batchRunId,
-				batch.featureId ?? "—",
-				badge(batch.status),
-				formatTs(batch.startedAt),
-				summaryText(batch.summary),
-			],
-		}));
-		batchesEl.appendChild(
-			buildTable(["批次 ID", "特性", "状态", "开始时间", "摘要"], rows),
-		);
-	}
-
-	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" });
-	}
-}
-
-async function renderBatch(batchRunId) {
-	showView("batch");
-	setBreadcrumb([
-		{ label: UI_TEXT.dashboard, href: "#/" },
-		{ label: batchRunId },
-	]);
-
-	const metaEl = document.getElementById("batch-meta");
-	const tasksEl = document.getElementById("batch-tasks");
-
-	const batch = await fetchJson(`/api/batches/${encodeURIComponent(batchRunId)}`);
-	if (!batch) {
-		clearNode(metaEl);
-		metaEl.appendChild(el("p", "empty", "批次未找到或不可用。"));
-		return;
-	}
-
-	clearNode(metaEl);
-	metaEl.appendChild(
-		metaGrid([
-			["批次 ID", batch.batchRunId],
-			["特性 ID", batch.featureId ?? "—"],
-			["状态", badge(batch.status)],
-			["开始时间", formatTs(batch.startedAt)],
-			["结束时间", formatTs(batch.finishedAt)],
-			["摘要", summaryText(batch.summary)],
-		]),
-	);
-
-	clearNode(tasksEl);
-	tasksEl.appendChild(el("h3", null, "任务"));
-
-	const tasks = batch.tasks ?? [];
-	if (tasks.length === 0) {
-		tasksEl.appendChild(el("p", "empty", "此批次暂无任务。"));
-		return;
-	}
-
-	const rows = tasks.map((task) => ({
-		className: task.status === "running" ? "active-task" : "",
-		onClick: task.workerRunId
-			? () => navigate(`/run/${encodeURIComponent(task.workerRunId)}`)
-			: undefined,
-		cells: [
-			task.taskId,
-			badge(task.status),
-			task.workerRunId ?? "—",
-			formatMs(task.durationMs),
-			task.failureCategory ?? "—",
-		],
-	}));
-	tasksEl.appendChild(
-		buildTable(["任务 ID", "状态", "Worker Run ID", "耗时", "失败"], rows),
-	);
-}
-
-function stepDisplayLabel(label) {
-	return STEP_LABELS[label] ?? label;
-}
-
-function buildStepStates(events) {
-	const states = new Map();
-	for (const ev of events) {
-		if (ev.type === "step.started") {
-			states.set(ev.label, { status: "running", startedAt: ev.at });
-		} else if (ev.type === "step.finished") {
-			states.set(ev.label, {
-				status: ev.status === "failed" ? "failed" : "succeeded",
-				durationMs: ev.durationMs,
-			});
-		}
-	}
-
-	const ordered = [...STEP_ORDER];
-	for (const label of states.keys()) {
-		if (!ordered.includes(label)) ordered.push(label);
-	}
-
-	return ordered.map((label) => {
-		const state = states.get(label);
-		return {
-			label,
-			display: stepDisplayLabel(label),
-			status: state?.status ?? "pending",
-			durationMs: state?.durationMs,
-		};
-	});
-}
-
-function stepMarker(status) {
-	switch (status) {
-		case "succeeded":
-			return "✓";
-		case "running":
-			return "●";
-		case "failed":
-			return "✗";
-		default:
-			return "○";
-	}
-}
-
-function getCurrentCommand(events) {
-	const active = new Map();
-	for (const ev of events) {
-		if (ev.type === "command.started") {
-			active.set(ev.label, ev);
-		} else if (ev.type === "command.finished") {
-			active.delete(ev.label);
-		}
-	}
-	let latest = null;
-	for (const cmd of active.values()) {
-		if (!latest || cmd.at > latest.at) latest = cmd;
-	}
-	if (latest?.at) {
-		const elapsed = Date.now() - Date.parse(latest.at);
-		latest = { ...latest, elapsedMs: Number.isFinite(elapsed) ? elapsed : 0 };
-	}
-	return latest;
-}
-
-function getOutputTail(events, commandLabel) {
-	if (!commandLabel) return "";
-	const chunks = [];
-	for (const ev of events) {
-		if (ev.type === "command.output" && ev.label === commandLabel && ev.outputPreview) {
-			chunks.push(ev.outputPreview);
-		}
-	}
-	return chunks.join("");
-}
-
-function collectArtifacts(task, events) {
-	const arts = new Map();
-	const add = (label, artifactPath) => {
-		if (artifactPath && !arts.has(label)) arts.set(label, artifactPath);
-	};
-
-	if (task?.artifactRefs) {
-		for (const key of ARTIFACT_KEYS) {
-			add(ARTIFACT_LABELS[key] ?? key, task.artifactRefs[key]);
-		}
-	}
-
-	for (const ev of events) {
-		if (!ev.artifactRefs) continue;
-		for (const [key, artifactPath] of Object.entries(ev.artifactRefs)) {
-			add(ARTIFACT_LABELS[key] ?? key, artifactPath);
-		}
-	}
-
-	return arts;
-}
-
-function artifactUrl(artifactPath) {
-	return `/api/artifacts?path=${encodeURIComponent(artifactPath)}&tail=200`;
-}
-
-function renderRunDagProgress(task, snapshot) {
-	const panel = document.getElementById("run-dag-progress");
-	clearNode(panel);
-	const dag = findDagForRun(snapshot, task.workerRunId, task);
-	if (!dag) return;
-
-	const progress = dagProgress(dag);
-	panel.appendChild(el("h3", null, "DAG 节点进度"));
-	panel.appendChild(
-		metaGrid([
-			["DAG", dag.title || dag.dagRunId],
-			["状态", badge(dag.status)],
-			["进度", `${progress.finished}/${progress.total} 节点`],
-			[
-				"详情",
-				(() => {
-					const a = el("a", "link", "查看 DAG 详情 →");
-					a.href = `#/dag/${encodeURIComponent(dag.dagRunId)}`;
-					a.addEventListener("click", (e) => {
-						e.preventDefault();
-						navigate(`/dag/${encodeURIComponent(dag.dagRunId)}`);
-					});
-					return a;
-				})(),
-			],
-		]),
-	);
-}
-
-function renderRunPanels(task, events, snapshot) {
-	const metaEl = document.getElementById("run-meta");
-	const stepsEl = document.getElementById("run-steps");
-	const commandEl = document.getElementById("run-command");
-	const outputEl = document.getElementById("run-output");
-	const artifactsEl = document.getElementById("run-artifacts");
-
-	const nowMs = Date.now();
-	const livenessNode = livenessBadge(task.liveness);
-	const statusCell = livenessNode
-		? (() => {
-				const wrap = document.createDocumentFragment();
-				wrap.appendChild(badge(task.status));
-				wrap.appendChild(document.createTextNode(" "));
-				wrap.appendChild(livenessNode);
-				return wrap;
-			})()
-		: badge(task.status);
-
-	clearNode(metaEl);
-	metaEl.appendChild(
-		metaGrid([
-			["Worker Run ID", task.workerRunId ?? "—"],
-			["任务 ID", task.taskId],
-			["状态", statusCell],
-			["开始时间", formatTs(task.startedAt)],
-			["已用时", formatDuration(task.elapsedMs)],
-			["最近心跳", formatAgo(task.lastHeartbeatAt, nowMs)],
-			["最近输出", formatAgo(task.lastOutputAt, nowMs)],
-			[
-				"超时",
-				task.timeoutAt
-					? formatAgo(task.timeoutAt, nowMs)
-					: task.pid !== undefined
-						? `pid ${task.pid}`
-						: "—",
-			],
-			["耗时", formatMs(task.durationMs)],
-			["失败分类", task.failureCategory ?? "—"],
-		]),
-	);
-
-	renderRunDagProgress(task, snapshot);
-
-	const steps = buildStepStates(events);
-	clearNode(stepsEl);
-	const stepsHeading = el("h3", null, "步骤时间线");
-	stepsEl.appendChild(stepsHeading);
-	const ul = el("ul", "step-timeline");
-	for (const step of steps) {
-		const li = document.createElement("li");
-		const marker = el("span", `step-marker ${step.status}`, stepMarker(step.status));
-		const name = el("span", "step-name", step.display);
-		const dur = el(
-			"span",
-			"step-duration",
-			step.durationMs !== undefined ? formatMs(step.durationMs) : "",
-		);
-		li.appendChild(marker);
-		if (step.label === "run-dag" && task.workerRunId) {
-			const dag = findDagForRun(snapshot, task.workerRunId, task);
-			const dagId = dag?.dagRunId ?? task.workerRunId;
-			const link = document.createElement("a");
-			link.href = `#/dag/${encodeURIComponent(dagId)}`;
-			link.className = "step-link";
-			link.textContent = "DAG →";
-			link.addEventListener("click", (e) => {
-				e.preventDefault();
-				navigate(`/dag/${encodeURIComponent(dagId)}`);
-			});
-			li.appendChild(name);
-			li.appendChild(link);
-		} else {
-			li.appendChild(name);
-		}
-		li.appendChild(dur);
-		ul.appendChild(li);
-	}
-	stepsEl.appendChild(ul);
-
-	const cmd = getCurrentCommand(events);
-	clearNode(commandEl);
-	commandEl.appendChild(el("h3", null, "当前命令"));
-	if (!cmd) {
-		commandEl.appendChild(el("p", "empty", UI_TEXT.noActiveCommand));
-	} else {
-		commandEl.appendChild(
-			metaGrid([
-				["标签", cmd.label ?? "—"],
-				["命令", (cmd.command ?? []).join(" ") || "—"],
-				["PID", cmd.pid !== undefined ? String(cmd.pid) : "—"],
-				["超时预算", cmd.timeoutMs !== undefined ? formatMs(cmd.timeoutMs) : "—"],
-				["已用时间", cmd.elapsedMs !== undefined ? formatMs(cmd.elapsedMs) : "—"],
-			]),
-		);
-	}
-
-	const outputLabel = cmd?.label;
-	const tail = getOutputTail(events, outputLabel);
-	clearNode(outputEl);
-	outputEl.appendChild(el("h3", null, "输出尾随"));
-	const pre = el("pre", "output-block", tail || "（暂无输出）");
-	outputEl.appendChild(pre);
-
-	const artifacts = collectArtifacts(task, events);
-	clearNode(artifactsEl);
-	artifactsEl.appendChild(el("h3", null, "产物"));
-	if (artifacts.size === 0) {
-		artifactsEl.appendChild(el("p", "empty", UI_TEXT.noArtifacts));
-	} else {
-		const list = el("ul", "artifact-list");
-		for (const [label, artifactPath] of artifacts) {
-			const li = document.createElement("li");
-			const a = document.createElement("a");
-			a.href = artifactUrl(artifactPath);
-			a.textContent = `${label}: ${artifactPath}`;
-			a.target = "_blank";
-			a.rel = "noopener";
-			li.appendChild(a);
-			list.appendChild(li);
-		}
-		artifactsEl.appendChild(list);
-	}
-}
-
-async function mergeRunEvents(workerRunId) {
-	const page = await fetchJson(
-		`/api/runs/${encodeURIComponent(workerRunId)}/events?after=${runEventOffset}`,
-	);
-	if (!page?.events) return;
-	runEvents = runEvents.concat(page.events);
-	runEventOffset += page.events.length;
-}
-
-async function renderRun(workerRunId, initial = true) {
-	showView("run");
-	setBreadcrumb([
-		{ label: UI_TEXT.dashboard, href: "#/" },
-		{ label: workerRunId },
-	]);
-
-	if (initial) {
-		runEvents = [];
-		runEventOffset = 0;
-		currentRunId = workerRunId;
-	}
-
-	const [task, snapshot] = await Promise.all([
-		fetchJson(`/api/runs/${encodeURIComponent(workerRunId)}`),
-		fetchJson("/api/snapshot"),
-	]);
-	if (!task) {
-		if (initial) {
-			clearNode(document.getElementById("run-meta"));
-			document
-				.getElementById("run-meta")
-				.appendChild(el("p", "empty", "运行未找到或不可用。"));
-		}
-		return;
-	}
-
-	if (snapshot) {
-		lastSnapshot = snapshot;
-		updateHeaderRefresh(snapshot.generatedAt);
-	}
-
-	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);
-}
-
-async function renderDagDetail(dagRunId, initial = true) {
-	showView("dag");
-	setBreadcrumb([
-		{ label: UI_TEXT.dashboard, href: "#/" },
-		{ label: dagRunId },
-	]);
-
-	if (initial || currentDagRunId !== dagRunId) {
-		currentDagRunId = dagRunId;
-		selectedDagNodeId = null;
-		sessionEventOffset = 0;
-		sessionEvents = [];
-	}
-
-	const metaEl = document.getElementById("dag-meta");
-	const ranksEl = document.getElementById("dag-ranks");
-	const nodesEl = document.getElementById("dag-nodes");
-	const outputEl = document.getElementById("dag-output");
-
-	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;
-	}
-
-	const nodes = dag.nodes ?? [];
-	if (!selectedDagNodeId || !nodes.some((n) => n.nodeId === selectedDagNodeId)) {
-		selectedDagNodeId = pickDefaultDagNode(nodes);
-		if (initial) {
-			sessionEventOffset = 0;
-			sessionEvents = [];
-		}
-	}
-
-	const progress = dagProgress(dag);
-	const failedCount = nodes.filter((n) => isNodeFailed(n.status)).length;
-	const skippedCount = nodes.filter(
-		(n) => (n.status ?? "").toLowerCase() === "skipped",
-	).length;
-	const succeededCount = nodes.filter((n) => isNodeFinished(n.status) && !isNodeFailed(n.status))
-		.length;
-
-	clearNode(metaEl);
-	metaEl.appendChild(
-		metaGrid([
-			["标题", dag.title || dag.dagRunId],
-			["DAG Run 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 ?? "—"],
-		]),
-	);
-
-	clearNode(ranksEl);
-		ranksEl.appendChild(el("h3", null, "DAG 依赖图"));
-	if (nodes.length === 0) {
-		ranksEl.appendChild(el("p", "empty", UI_TEXT.noNodes));
-	} else {
-			ranksEl.appendChild(renderDagGraph(dag, dagRunId));
-	}
-
-	clearNode(nodesEl);
-	nodesEl.appendChild(el("h3", null, "节点"));
-
-	if (nodes.length === 0) {
-		nodesEl.appendChild(el("p", "empty", UI_TEXT.noNodes));
-	} else {
-		const sortedNodes = [...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 rows = sortedNodes.map((node) => {
-			const active = isNodeActive(node.status);
-			const failed = isNodeFailed(node.status);
-			let className = "";
-			if (active) className = "dag-active-node";
-			if (failed) className = "dag-error-node";
-			if (node.nodeId === selectedDagNodeId) {
-				className = className ? `${className} dag-node-selected` : "dag-node-selected";
-			}
-			return {
-				className,
-				onClick: () => selectDagNode(dagRunId, node.nodeId),
-				cells: [
-					node.nodeId,
-					node.rank ?? "—",
-					node.executor ?? "—",
-					node.model ?? "—",
-					node.status ? badge(node.status) : "—",
-					formatMs(node.durationMs),
-					node.errorPreview ?? node.label ?? "—",
-				],
-			};
-		});
-		nodesEl.appendChild(
-			buildTable(
-				["节点 ID", "Rank", "执行器", "模型", "状态", "耗时", "摘要"],
-				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",
-					),
-				);
-			}
-		}
-	}
-}
-
-function startDagPolling(dagRunId) {
-	if (dagPollTimer) clearInterval(dagPollTimer);
-	dagPollTimer = setInterval(() => {
-		void renderDagDetail(dagRunId, false);
-	}, POLL_MS);
-}
-
-function route() {
-	stopTimers();
-	const r = parseRoute();
-	if (r.view === "dashboard") {
-		void renderDashboard(r.scrollTo);
-		dashboardTimer = setInterval(() => void renderDashboard(), DASHBOARD_POLL_MS);
-	} 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();
-	}
-}
-
-if (typeof window !== "undefined") {
-	window.addEventListener("hashchange", route);
-	window.addEventListener("load", route);
-}
+import { layoutDag } from "./dag-layout.js";
+
+const ACTIVE_DETAIL_POLL_MS = 2000;
+const HIDDEN_POLL_MS = 30000;
+const DASHBOARD_POLL_MS = 5000;
+
+const UI_TEXT = {
+	dashboard: "总览",
+	dagRuns: "DAG 运行",
+	failures: "异常 Task",
+	batchDetail: "批次详情",
+	runDetail: "运行详情",
+	dagDetail: "DAG 详情",
+	activeDags: "进行中的 DAG",
+	recentDags: "最近 DAG 运行",
+	batches: "Worker 批次",
+	noActiveDags: "当前没有进行中的 DAG，启动后将出现在这里。",
+	noRecentDags: "暂无 DAG 运行记录。",
+	noBatches: "暂无 Worker 批次，运行后将出现在这里。",
+	noNodes: "暂无节点。",
+	noOutput: "暂无节点输出。",
+	noSessionEvents: "该节点暂无过程日志",
+	noArtifacts: "暂无产物记录。",
+	noActiveCommand: "当前没有正在执行的命令。",
+	noFailures: "当前没有异常 Task。",
+	enterDetail: "查看详情 →",
+	repoRoot: "仓库根目录",
+	generatedAt: "生成时间",
+	refreshStatus: "更新",
+	failureInbox: "异常 Task",
+	nearRealtime: "轮询刷新",
+};
+
+const STATUS_LABELS = {
+	running: "运行中",
+	started: "已启动",
+	pending: "等待中",
+	queued: "排队中",
+	succeeded: "成功",
+	finished: "已完成",
+	completed: "已完成",
+	done: "完成",
+	failed: "失败",
+	error: "错误",
+	partial_failed: "部分失败",
+	partialfailed: "部分失败",
+	blocked: "阻塞",
+	stale: "心跳失联",
+	reused: "复用",
+	unknown: "未知",
+	cancelled: "已取消",
+	skipped: "已跳过",
+	finished_upper: "已完成",
+	error_upper: "错误",
+	skipped_upper: "已跳过",
+};
+
+const LIVENESS_LABELS = {
+	active: "活跃",
+	quiet: "无输出（存活）",
+	stale: "心跳失联",
+	"timeout-risk": "即将超时",
+};
+
+const STEP_LABELS = {
+	preflight: "预检",
+	materialize: "准备 Task 文件",
+	"dag-run-task": "生成 DAG",
+	"pi-model-override": "覆盖 Pi 模型",
+	"dag-validate": "校验 DAG",
+	"run-dag": "执行 DAG",
+	"report-decision": "上报决策结果",
+	"dag-doctor": "DAG 诊断",
+	"closeout-draft": "失败收尾草稿",
+	"promote-run": "提升运行",
+	"closeout-task": "Task 收尾",
+};
+
+const ARTIFACT_LABELS = {
+	stdoutPath: "运行输出",
+	stderrPath: "错误输出",
+	resultPath: "结果",
+	runRecordPath: "运行记录",
+	reportMarkdown: "报告",
+	doctorMarkdown: "诊断",
+	closeoutDraft: "收尾草稿",
+	dagPath: "DAG 路径",
+};
+
+const STEP_ORDER = [
+	"preflight",
+	"materialize",
+	"dag-run-task",
+	"pi-model-override",
+	"dag-validate",
+	"run-dag",
+	"report-decision",
+	"dag-doctor",
+	"closeout-draft",
+	"promote-run",
+	"closeout-task",
+];
+
+const TERMINAL_RUN_STATUSES = new Set([
+	"finished",
+	"completed",
+	"succeeded",
+	"failed",
+	"partial_failed",
+	"error",
+	"cancelled",
+]);
+
+const ARTIFACT_KEYS = [
+	"stdoutPath",
+	"stderrPath",
+	"resultPath",
+	"runRecordPath",
+	"reportMarkdown",
+	"doctorMarkdown",
+	"closeoutDraft",
+];
+
+let dashboardTimer = null;
+let runPollTimer = null;
+let dagPollTimer = null;
+let runEventOffset = 0;
+let runEvents = [];
+let currentRunId = null;
+let currentBatchRunId = null;
+let currentDagRunId = null;
+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(/^#/, "") || "/";
+	const batchMatch = /^\/batch\/([^/]+)$/.exec(hash);
+	if (batchMatch) {
+		return { view: "batch", batchRunId: decodeURIComponent(batchMatch[1]) };
+	}
+	const runMatch = /^\/run\/([^/]+)$/.exec(hash);
+	if (runMatch) {
+		return { view: "run", workerRunId: decodeURIComponent(runMatch[1]) };
+	}
+	const dagMatch = /^\/dag\/([^/]+)$/.exec(hash);
+	if (dagMatch) {
+		return { view: "dag", dagRunId: decodeURIComponent(dagMatch[1]) };
+	}
+	if (hash === "/failures") {
+		return { view: "failures" };
+	}
+	if (hash === "/dags") {
+		return { view: "dashboard", scrollTo: "dags" };
+	}
+	return { view: "dashboard" };
+}
+
+function parseRoute() {
+	return parseHashRoute(location.hash);
+}
+
+function navigate(path) {
+	location.hash = path;
+}
+
+async function fetchJson(url) {
+	try {
+		const res = await fetch(url);
+		if (!res.ok) return null;
+		return await res.json();
+	} catch {
+		return null;
+	}
+}
+
+function clearNode(node) {
+	while (node.firstChild) node.removeChild(node.firstChild);
+}
+
+function el(tag, className, text) {
+	const node = document.createElement(tag);
+	if (className) node.className = className;
+	if (text !== undefined) node.textContent = text;
+	return node;
+}
+
+function statusLabel(status) {
+	if (!status) return STATUS_LABELS.unknown;
+	const key = status.toLowerCase().replace(/-/g, "_");
+	if (STATUS_LABELS[key]) return STATUS_LABELS[key];
+	if (status === "FINISHED") return STATUS_LABELS.finished_upper;
+	if (status === "ERROR") return STATUS_LABELS.error_upper;
+	if (status === "SKIPPED") return STATUS_LABELS.skipped_upper;
+	return status;
+}
+
+function statusSymbol(status) {
+	const key = (status ?? "unknown").toLowerCase();
+	if (["finished", "completed", "succeeded", "done"].includes(key)) return "✓";
+	if (["failed", "error"].includes(key)) return "✕";
+	if (key === "skipped") return "↷";
+	if (["running", "started"].includes(key)) return "●";
+	if (["pending", "queued", "blocked"].includes(key)) return "○";
+	return "◇";
+}
+
+function badgeClass(status) {
+	if (!status) return "unknown";
+	const key = status.toLowerCase().replace(/_/g, "-");
+	if (key === "finished" || key === "completed" || key === "succeeded" || key === "done") {
+		return "succeeded";
+	}
+	if (key === "error" || key === "failed") return "failed";
+	if (key === "partial-failed") return "partial-failed";
+	if (key === "skipped") return "skipped";
+	if (key === "running" || key === "started") return "running";
+	return key;
+}
+
+function badge(status) {
+	const label = statusLabel(status);
+	const cls = badgeClass(status);
+	return el("span", `badge badge-${cls}`, label);
+}
+
+function formatTs(value) {
+	if (!value) return "—";
+	const d = new Date(value);
+	if (Number.isNaN(d.getTime())) return value;
+	return d.toLocaleString("zh-CN", { hour12: false });
+}
+
+function formatMs(ms) {
+	if (ms === undefined || ms === null) return "—";
+	if (ms < 1000) return `${ms}ms`;
+	return `${(ms / 1000).toFixed(1)}s`;
+}
+
+function formatDuration(ms) {
+	if (ms === undefined || ms === null || Number.isNaN(ms)) return "—";
+	if (ms < 0) ms = 0;
+	const totalSec = Math.floor(ms / 1000);
+	const hours = Math.floor(totalSec / 3600);
+	const minutes = Math.floor((totalSec % 3600) / 60);
+	const seconds = totalSec % 60;
+	if (hours > 0) return `${hours}小时 ${minutes}分 ${seconds}秒`;
+	if (minutes > 0) return `${minutes}分 ${seconds}秒`;
+	return `${seconds}秒`;
+}
+
+function formatAgo(iso, nowMs) {
+	if (!iso) return "—";
+	const ts = Date.parse(iso);
+	if (Number.isNaN(ts)) return "—";
+	const base = nowMs ?? Date.now();
+	const deltaSec = Math.max(0, Math.floor((base - ts) / 1000));
+	if (deltaSec < 10) return "刚刚";
+	if (deltaSec < 60) return `${deltaSec} 秒前`;
+	if (deltaSec < 3600) return `${Math.floor(deltaSec / 60)} 分钟前`;
+	if (deltaSec < 86400) return `${Math.floor(deltaSec / 3600)} 小时前`;
+	return `${Math.floor(deltaSec / 86400)} 天前`;
+}
+
+function livenessBadge(liveness) {
+	if (!liveness) return null;
+	return el("span", `badge liveness-${liveness}`, LIVENESS_LABELS[liveness] ?? 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(" / "));
+		if (part.href) {
+			const a = document.createElement("a");
+			a.href = part.href;
+			a.textContent = part.label;
+			a.addEventListener("click", (e) => {
+				e.preventDefault();
+				navigate(part.href);
+			});
+			nav.appendChild(a);
+		} else {
+			nav.appendChild(document.createTextNode(part.label));
+		}
+	});
+}
+
+function updateHeaderRefresh(generatedAt) {
+	const elRefresh = document.getElementById("header-refresh");
+	if (!elRefresh) return;
+	if (!generatedAt) {
+		elRefresh.textContent = "";
+		return;
+	}
+	elRefresh.textContent = `${formatAgo(generatedAt)} · ${UI_TEXT.nearRealtime}`;
+}
+
+function stopTimers() {
+	pollingGeneration += 1;
+	if (dashboardTimer) {
+		clearTimeout(dashboardTimer);
+		dashboardTimer = null;
+	}
+	if (runPollTimer) {
+		clearTimeout(runPollTimer);
+		runPollTimer = null;
+	}
+	if (dagPollTimer) {
+		clearTimeout(dagPollTimer);
+		dagPollTimer = null;
+	}
+	currentRunId = null;
+	currentBatchRunId = null;
+	currentDagRunId = null;
+	selectedDagNodeId = null;
+	sessionEventOffset = 0;
+	sessionEvents = [];
+	runEventOffset = 0;
+	runEvents = [];
+}
+
+function metaGrid(entries) {
+	const dl = el("dl", "meta-grid");
+	for (const [label, value] of entries) {
+		const item = document.createElement("div");
+		item.className = "meta-item";
+		const dt = document.createElement("dt");
+		dt.textContent = label;
+		const dd = document.createElement("dd");
+		if (value instanceof Node) dd.appendChild(value);
+		else dd.textContent = value ?? "—";
+		item.appendChild(dt);
+		item.appendChild(dd);
+		dl.appendChild(item);
+	}
+	return dl;
+}
+
+function buildTable(headers, rows) {
+	const table = document.createElement("table");
+	const thead = document.createElement("thead");
+	const headRow = document.createElement("tr");
+	for (const h of headers) {
+		const th = document.createElement("th");
+		th.textContent = h;
+		headRow.appendChild(th);
+	}
+	thead.appendChild(headRow);
+	table.appendChild(thead);
+
+	const tbody = document.createElement("tbody");
+	for (const row of rows) {
+		const tr = document.createElement("tr");
+		if (row.className) tr.className = row.className;
+		if (row.onClick) {
+			tr.classList.add("clickable");
+			tr.addEventListener("click", row.onClick);
+		}
+		for (const cell of row.cells) {
+			const td = document.createElement("td");
+			if (cell instanceof Node) td.appendChild(cell);
+			else td.textContent = cell ?? "—";
+			tr.appendChild(td);
+		}
+		tbody.appendChild(tr);
+	}
+	table.appendChild(tbody);
+	return table;
+}
+
+function summaryText(summary) {
+	if (!summary) return "—";
+	return `总计 ${summary.total} · 成功 ${summary.succeeded} · 失败 ${summary.failed} · 复用历史结果 ${summary.reused}`;
+}
+
+function failuresInboxLink(count) {
+	const wrap = el("span");
+	wrap.appendChild(document.createTextNode(`${count} `));
+	const a = el("a", "inbox-link", `${UI_TEXT.failureInbox} →`);
+	a.href = "#/failures";
+	a.addEventListener("click", (e) => {
+		e.preventDefault();
+		navigate("/failures");
+	});
+	wrap.appendChild(a);
+	return wrap;
+}
+
+function artifactLink(label, refPath) {
+	if (!refPath) return el("span", "muted", "—");
+	const a = el("a", "artifact-link", label);
+	a.href = `/api/artifacts?path=${encodeURIComponent(refPath)}&tail=200`;
+	a.target = "_blank";
+	return a;
+}
+
+function isNodeActive(status) {
+	if (!status) return false;
+	const s = status.toLowerCase();
+	return s === "running" || s === "started" || s === "pending" || s === "queued";
+}
+
+function isNodeFinished(status) {
+	if (!status) return false;
+	const s = status.toLowerCase();
+	return (
+		s === "finished" ||
+		s === "completed" ||
+		s === "succeeded" ||
+		s === "done" ||
+		s === "error" ||
+		s === "failed" ||
+		s === "skipped"
+	);
+}
+
+function isNodeFailed(status) {
+	if (!status) return false;
+	const s = status.toLowerCase();
+	return s === "error" || s === "failed" || s === "partial_failed";
+}
+
+function truncateText(text, maxLen) {
+	if (!text) return "—";
+	const normalized = String(text).replace(/\s+/g, " ").trim();
+	if (normalized.length <= maxLen) return normalized;
+	return `${normalized.slice(0, maxLen)}…`;
+}
+
+function extractAssistantSummary(event) {
+	if (!event || typeof event !== "object") return "—";
+	const record = event;
+	if (record.message && typeof record.message === "object") {
+		const content = record.message.content;
+		if (Array.isArray(content)) {
+			return (
+				content
+					.filter((part) => part?.type === "text" && typeof part.text === "string")
+					.map((part) => part.text)
+					.join(" ") || "—"
+			);
+		}
+		if (typeof record.message.content === "string") {
+			return record.message.content;
+		}
+	}
+	if (typeof record.text === "string") return record.text;
+	if (typeof record.outputPreview === "string") return record.outputPreview;
+	return "—";
+}
+
+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 === "tool_execution_start" || type === "tool_start") {
+		return `调用工具 · ${toolName}`;
+	}
+	if (type === "tool_execution_end" || type === "tool_end") {
+		return `工具调用完成 · ${toolName}`;
+	}
+	if (type === "turn_end" || type === "assistant" || type === "assistant_message") {
+		return `AI 回复摘要 · ${truncateText(extractAssistantSummary(event), 120)}`;
+	}
+	return type;
+}
+
+function formatSessionEventTime(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 formatTs(ts).replace(/\s.*/, "") || formatTs(ts);
+}
+
+async function mergeSessionEvents(dagRunId, nodeId) {
+	if (!dagRunId || !nodeId) return;
+	const page = await fetchJson(
+		`/api/dag-runs/${encodeURIComponent(dagRunId)}/nodes/${encodeURIComponent(nodeId)}/session-events?after=${sessionEventOffset}`,
+	);
+	if (!page) return;
+	if (Array.isArray(page.events) && page.events.length > 0) {
+		sessionEvents = sessionEvents.concat(page.events);
+	}
+	if (typeof page.nextOffset === "number") {
+		sessionEventOffset = page.nextOffset;
+	}
+}
+
+function selectDagNode(dagRunId, nodeId) {
+	const nodeChanged = selectedDagNodeId !== nodeId;
+	selectedDagNodeId = nodeId;
+	dagInspectorOpen = true;
+	if (nodeChanged) {
+		sessionEventOffset = 0;
+		sessionEvents = [];
+	}
+	void renderDagDetail(dagRunId, false);
+}
+
+function closeDagInspector() {
+	dagInspectorOpen = false;
+	const panel = document.getElementById("dag-inspector");
+	if (panel) {
+		panel.classList.remove("is-open");
+		panel.setAttribute("aria-hidden", "true");
+	}
+}
+
+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) {
+		content.appendChild(el("p", "empty", UI_TEXT.noSessionEvents));
+		return;
+	}
+
+	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)));
+		ul.appendChild(li);
+	}
+	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;
+	}
+}
+
+export function isDagRunActive(dag) {
+	const status = (dag.status ?? "").toLowerCase();
+	if (TERMINAL_RUN_STATUSES.has(status)) return false;
+	if (["running", "pending", "started"].includes(status)) return true;
+	return (dag.nodes ?? []).some((n) => isNodeActive(n.status));
+}
+
+function dagProgress(dag) {
+	const nodes = dag.nodes ?? [];
+	const finished = nodes.filter((n) => isNodeFinished(n.status)).length;
+	return { finished, total: nodes.length };
+}
+
+function getActiveNodes(dag) {
+	return (dag.nodes ?? []).filter((n) => isNodeActive(n.status));
+}
+
+function dagSortTime(dag) {
+	return dag.startedAt ?? dag.finishedAt ?? "";
+}
+
+function findDagForRun(snapshot, workerRunId, task) {
+	const dagRuns = snapshot?.dagRuns ?? [];
+	const byId = dagRuns.find((d) => d.dagRunId === workerRunId);
+	if (byId) return byId;
+	if (task?.dagRunId) {
+		return dagRuns.find((d) => d.dagRunId === task.dagRunId);
+	}
+	return undefined;
+}
+
+function kpiCard(label, value, extraClass) {
+	const card = el("div", `kpi-card${extraClass ? ` ${extraClass}` : ""}`);
+	card.appendChild(el("div", "kpi-label", label));
+	card.appendChild(el("div", "kpi-value", String(value)));
+	return card;
+}
+
+function renderActiveDagCard(dag, nowMs) {
+	const card = el("div", "active-dag-card");
+	if (isNodeActive(dag.status) || getActiveNodes(dag).length > 0) {
+		card.classList.add("active-dag-card-running");
+	}
+	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));
+	card.appendChild(header);
+
+	const progress = dagProgress(dag);
+	const activeNodes = getActiveNodes(dag);
+	const currentLabel =
+		activeNodes.length > 0
+			? activeNodes
+					.map((n) => {
+						const parts = [n.nodeId];
+						if (n.executor) parts.push(`(${n.executor})`);
+						if (n.model) parts.push(n.model);
+						return parts.join(" ");
+					})
+					.join(", ")
+			: "—";
+
+	const elapsed =
+		dag.durationMs ??
+		(dag.startedAt
+			? Math.max(0, nowMs - Date.parse(dag.startedAt))
+			: undefined);
+	const lastUpdate = dag.finishedAt ?? dag.startedAt;
+
+	const meta = el("div", "active-dag-meta");
+	meta.appendChild(
+		el(
+			"span",
+			null,
+			`进度 ${progress.finished}/${progress.total} · 当前节点：${currentLabel}`,
+		),
+	);
+	meta.appendChild(
+		el(
+			"span",
+			null,
+			`已用时 ${formatDuration(elapsed)} · 最近活动 ${formatAgo(lastUpdate, nowMs)}`,
+		),
+	);
+	card.appendChild(meta);
+
+	const link = el("a", "active-dag-link", UI_TEXT.enterDetail);
+	link.href = `#/dag/${encodeURIComponent(dag.dagRunId)}`;
+	link.addEventListener("click", (e) => {
+		e.preventDefault();
+		navigate(`/dag/${encodeURIComponent(dag.dagRunId)}`);
+	});
+	card.appendChild(link);
+	return card;
+}
+
+function renderRankLanes(dag) {
+	const container = el("div", "rank-lanes");
+	const nodes = dag.nodes ?? [];
+	const ranks = dag.ranks;
+	const rankGroups = new Map();
+
+	if (ranks && ranks.length > 0) {
+		for (let i = 0; i < ranks.length; i++) {
+			rankGroups.set(String(i), ranks[i]);
+		}
+		for (const node of nodes) {
+			const rank = node.rank ?? "—";
+			if (!rankGroups.has(rank)) {
+				rankGroups.set(rank, [node.nodeId]);
+			} else if (!rankGroups.get(rank).includes(node.nodeId)) {
+				rankGroups.get(rank).push(node.nodeId);
+			}
+		}
+	} else {
+		for (const node of nodes) {
+			const rank = node.rank ?? "—";
+			const list = rankGroups.get(rank) ?? [];
+			list.push(node.nodeId);
+			rankGroups.set(rank, list);
+		}
+	}
+
+	const sortedRanks = [...rankGroups.keys()].sort((a, b) => {
+		const na = Number(a);
+		const nb = Number(b);
+		if (!Number.isNaN(na) && !Number.isNaN(nb)) return na - nb;
+		return a.localeCompare(b);
+	});
+
+	const nodeById = Object.fromEntries(nodes.map((n) => [n.nodeId, n]));
+
+	for (const rank of sortedRanks) {
+		const lane = el("div", "rank-lane");
+		lane.appendChild(el("div", "rank-lane-label", `第 ${rank} 层`));
+		const chips = el("div", "rank-lane-nodes");
+		for (const nodeId of rankGroups.get(rank) ?? []) {
+			const node = nodeById[nodeId] ?? { nodeId };
+			const chip = el("div", "rank-node-chip");
+			if (isNodeActive(node.status)) chip.classList.add("rank-node-active");
+			if (isNodeFailed(node.status)) chip.classList.add("rank-node-error");
+			chip.appendChild(el("span", "rank-node-id", nodeId));
+			if (node.status) chip.appendChild(badge(node.status));
+			if (node.durationMs !== undefined) {
+				chip.appendChild(el("span", "rank-node-dur", formatMs(node.durationMs)));
+			}
+			chips.appendChild(chip);
+		}
+		lane.appendChild(chips);
+		container.appendChild(lane);
+	}
+	return container;
+}
+
+function svgEl(tag, attrs = {}) {
+	const node = document.createElementNS("http://www.w3.org/2000/svg", tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	return node;
+}
+
+function renderDagGraph(dag, dagRunId) {
+	const nodes = dag.nodes ?? [];
+	const edges = dag.edges ?? [];
+	const layout = layoutDag(nodes, edges, dag.ranks ?? []);
+	const wrap = el("div", "dag-graph-wrap");
+	const toolbar = el("div", "dag-graph-toolbar");
+	toolbar.appendChild(el("span", "dag-graph-summary", `${nodes.length} 节点 · ${layout.edges.length} 条依赖`));
+	const reset = el("button", "dag-graph-reset", "重置视图");
+	toolbar.appendChild(reset);
+	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" });
+	marker.appendChild(svgEl("path", { d: "M 0 0 L 10 5 L 0 10 z" }));
+	defs.appendChild(marker); svg.appendChild(defs);
+	const related = new Set([selectedDagNodeId]);
+	for (const edge of layout.edges) if (edge.from === selectedDagNodeId || edge.to === 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${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);
+	}
+	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 === selectedDagNodeId ? " selected" : ""}${selectedDagNodeId && !related.has(node.nodeId) ? " dag-dimmed" : ""}`, tabindex: 0, role: "button", "aria-label": `${node.nodeId}，状态 ${status}` });
+		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" }); state.textContent = `${statusSymbol(status)} ${statusLabel(node.status)} · ${formatMs(node.durationMs)}`; 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(); } });
+		svg.appendChild(group);
+	}
+	viewport.appendChild(svg); wrap.appendChild(viewport);
+	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 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() {
+	showView("failures");
+	setBreadcrumb([{ label: UI_TEXT.dashboard, href: "#/" }, { label: UI_TEXT.failures }]);
+
+	const listEl = document.getElementById("failures-list");
+	const emptyEl = document.getElementById("failures-empty");
+	clearNode(listEl);
+
+	const snapshot = await fetchJson("/api/snapshot");
+	if (!snapshot) return;
+	lastSnapshot = snapshot;
+	updateHeaderRefresh(snapshot.generatedAt);
+
+	const tasks = (snapshot.tasks ?? []).filter(
+		(task) =>
+			task.status === "failed" ||
+			task.status === "blocked" ||
+			task.status === "stale" ||
+			task.liveness === "stale",
+	);
+
+	if (tasks.length === 0) {
+		emptyEl.hidden = false;
+		return;
+	}
+	emptyEl.hidden = true;
+
+	const refs = (task) => task.artifactRefs ?? {};
+	const rows = tasks.map((task) => ({
+		className: `row-${task.status}`,
+		onClick: task.workerRunId
+			? () => navigate(`/run/${encodeURIComponent(task.workerRunId)}`)
+			: undefined,
+		cells: [
+			task.taskId ?? "—",
+			task.featureId ?? "—",
+			badge(task.status),
+			task.failureCategory ?? "—",
+			task.recommendedFollowUp ?? "—",
+			(() => {
+				const links = el("div", "artifact-links");
+				const r = refs(task);
+				links.appendChild(artifactLink("报告", r.reportMarkdown));
+				links.appendChild(document.createTextNode(" "));
+				links.appendChild(artifactLink("诊断", r.doctorMarkdown));
+				links.appendChild(document.createTextNode(" "));
+				links.appendChild(artifactLink("收尾方案", r.closeoutDraft));
+				return links;
+			})(),
+		],
+	}));
+	listEl.appendChild(
+		buildTable(
+			["Task ID", "功能", "状态", "分类", "建议跟进", "产物"],
+			rows,
+		),
+	);
+}
+
+async function renderDashboard(scrollTo) {
+	showView("dashboard");
+	setBreadcrumb([{ label: UI_TEXT.dashboard }]);
+
+	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");
+
+	const snapshot = await fetchJson("/api/snapshot");
+	if (!snapshot) return;
+	lastSnapshot = snapshot;
+	updateHeaderRefresh(snapshot.generatedAt);
+
+	const dagRuns = snapshot.dagRuns ?? [];
+	const activeDags = dagRuns.filter(isDagRunActive);
+	const activeDagIds = new Set(activeDags.map((d) => d.dagRunId));
+	const recentDags = dagRuns
+		.filter((d) => !activeDagIds.has(d.dagRunId))
+		.sort((a, b) => dagSortTime(b).localeCompare(dagSortTime(a)))
+		.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("无输出", quietCount, quietCount > 0 ? "kpi-muted" : ""));
+	kpiEl.appendChild(kpiCard("心跳失联", staleCount, staleCount > 0 ? "kpi-risk" : ""));
+	kpiEl.appendChild(
+		kpiCard("即将超时", timeoutRiskCount, timeoutRiskCount > 0 ? "kpi-risk" : ""),
+	);
+	kpiEl.appendChild(
+		kpiCard("失败", failuresCount, failuresCount > 0 ? "kpi-danger" : ""),
+	);
+
+	const nowMs = Date.now();
+
+	clearNode(activeEl);
+	activeEl.appendChild(el("h3", "section-heading", UI_TEXT.activeDags));
+	if (activeDags.length === 0) {
+		activeEl.appendChild(el("p", "empty", UI_TEXT.noActiveDags));
+	} else {
+		const list = el("div", "active-dag-list");
+		for (const dag of activeDags.sort((a, b) =>
+			dagSortTime(b).localeCompare(dagSortTime(a)),
+		)) {
+			list.appendChild(renderActiveDagCard(dag, nowMs));
+		}
+		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));
+	if (recentDags.length === 0 && activeDags.length === 0) {
+		dagsEl.appendChild(el("p", "empty", UI_TEXT.noRecentDags));
+	} else if (recentDags.length === 0) {
+		dagsEl.appendChild(el("p", "empty", "暂无历史 DAG 记录"));
+		} 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));
+	const batches = snapshot.batches ?? [];
+	if (batches.length === 0) {
+		batchesEl.appendChild(el("p", "empty", UI_TEXT.noBatches));
+	} else {
+		const rows = batches.map((batch) => ({
+			onClick: () => navigate(`/batch/${encodeURIComponent(batch.batchRunId)}`),
+			cells: [
+				batch.batchRunId,
+				batch.featureId ?? "—",
+				badge(batch.status),
+				formatTs(batch.startedAt),
+				summaryText(batch.summary),
+			],
+		}));
+		batchesEl.appendChild(
+		buildTable(["批次 ID", "功能", "状态", "开始时间", "摘要"], rows),
+		);
+	}
+
+	if (scrollTo === "dags") {
+		dagsEl.scrollIntoView({ behavior: "smooth" });
+	}
+}
+
+async function renderBatch(batchRunId) {
+	showView("batch");
+	setBreadcrumb([
+		{ label: UI_TEXT.dashboard, href: "#/" },
+		{ label: batchRunId },
+	]);
+
+	const metaEl = document.getElementById("batch-meta");
+	const tasksEl = document.getElementById("batch-tasks");
+
+	const batch = await fetchJson(`/api/batches/${encodeURIComponent(batchRunId)}`);
+	if (!batch) {
+		clearNode(metaEl);
+		metaEl.appendChild(el("p", "empty", "找不到该批次。"));
+		return;
+	}
+
+	clearNode(metaEl);
+	metaEl.appendChild(
+		metaGrid([
+			["批次 ID", batch.batchRunId],
+			["功能 ID", batch.featureId ?? "—"],
+			["状态", badge(batch.status)],
+			["开始时间", formatTs(batch.startedAt)],
+			["结束时间", formatTs(batch.finishedAt)],
+			["摘要", summaryText(batch.summary)],
+		]),
+	);
+
+	clearNode(tasksEl);
+	tasksEl.appendChild(el("h3", null, "Task"));
+
+	const tasks = batch.tasks ?? [];
+	if (tasks.length === 0) {
+		tasksEl.appendChild(el("p", "empty", "该批次暂无 Task"));
+		return;
+	}
+
+	const rows = tasks.map((task) => ({
+		className: task.status === "running" ? "active-task" : "",
+		onClick: task.workerRunId
+			? () => navigate(`/run/${encodeURIComponent(task.workerRunId)}`)
+			: undefined,
+		cells: [
+			task.taskId,
+			badge(task.status),
+			task.workerRunId ?? "—",
+			formatMs(task.durationMs),
+			task.failureCategory ?? "—",
+		],
+	}));
+	tasksEl.appendChild(
+		buildTable(["Task ID", "状态", "Worker 运行 ID", "耗时", "失败"], rows),
+	);
+}
+
+function stepDisplayLabel(label) {
+	return STEP_LABELS[label] ?? label;
+}
+
+function buildStepStates(events) {
+	const states = new Map();
+	for (const ev of events) {
+		if (ev.type === "step.started") {
+			states.set(ev.label, { status: "running", startedAt: ev.at });
+		} else if (ev.type === "step.finished") {
+			states.set(ev.label, {
+				status: ev.status === "failed" ? "failed" : "succeeded",
+				durationMs: ev.durationMs,
+			});
+		}
+	}
+
+	const ordered = [...STEP_ORDER];
+	for (const label of states.keys()) {
+		if (!ordered.includes(label)) ordered.push(label);
+	}
+
+	return ordered.map((label) => {
+		const state = states.get(label);
+		return {
+			label,
+			display: stepDisplayLabel(label),
+			status: state?.status ?? "pending",
+			durationMs: state?.durationMs,
+		};
+	});
+}
+
+function stepMarker(status) {
+	switch (status) {
+		case "succeeded":
+			return "✓";
+		case "running":
+			return "●";
+		case "failed":
+			return "✗";
+		default:
+			return "○";
+	}
+}
+
+function getCurrentCommand(events) {
+	const active = new Map();
+	for (const ev of events) {
+		if (ev.type === "command.started") {
+			active.set(ev.label, ev);
+		} else if (ev.type === "command.finished") {
+			active.delete(ev.label);
+		}
+	}
+	let latest = null;
+	for (const cmd of active.values()) {
+		if (!latest || cmd.at > latest.at) latest = cmd;
+	}
+	if (latest?.at) {
+		const elapsed = Date.now() - Date.parse(latest.at);
+		latest = { ...latest, elapsedMs: Number.isFinite(elapsed) ? elapsed : 0 };
+	}
+	return latest;
+}
+
+function getOutputTail(events, commandLabel) {
+	if (!commandLabel) return "";
+	const chunks = [];
+	for (const ev of events) {
+		if (ev.type === "command.output" && ev.label === commandLabel && ev.outputPreview) {
+			chunks.push(ev.outputPreview);
+		}
+	}
+	return chunks.join("");
+}
+
+function collectArtifacts(task, events) {
+	const arts = new Map();
+	const add = (label, artifactPath) => {
+		if (artifactPath && !arts.has(label)) arts.set(label, artifactPath);
+	};
+
+	if (task?.artifactRefs) {
+		for (const key of ARTIFACT_KEYS) {
+			add(ARTIFACT_LABELS[key] ?? key, task.artifactRefs[key]);
+		}
+	}
+
+	for (const ev of events) {
+		if (!ev.artifactRefs) continue;
+		for (const [key, artifactPath] of Object.entries(ev.artifactRefs)) {
+			add(ARTIFACT_LABELS[key] ?? key, artifactPath);
+		}
+	}
+
+	return arts;
+}
+
+function artifactUrl(artifactPath) {
+	return `/api/artifacts?path=${encodeURIComponent(artifactPath)}&tail=200`;
+}
+
+function renderRunDagProgress(task, snapshot) {
+	const panel = document.getElementById("run-dag-progress");
+	clearNode(panel);
+	const dag = findDagForRun(snapshot, task.workerRunId, task);
+	if (!dag) return;
+
+	const progress = dagProgress(dag);
+	panel.appendChild(el("h3", null, "DAG 节点进度"));
+	panel.appendChild(
+		metaGrid([
+			["DAG", dag.title || dag.dagRunId],
+			["状态", badge(dag.status)],
+			["进度", `${progress.finished}/${progress.total} 个节点`],
+			[
+				"详情",
+				(() => {
+					const a = el("a", "link", "查看 DAG 详情 →");
+					a.href = `#/dag/${encodeURIComponent(dag.dagRunId)}`;
+					a.addEventListener("click", (e) => {
+						e.preventDefault();
+						navigate(`/dag/${encodeURIComponent(dag.dagRunId)}`);
+					});
+					return a;
+				})(),
+			],
+		]),
+	);
+}
+
+function renderRunPanels(task, events, snapshot) {
+	const metaEl = document.getElementById("run-meta");
+	const stepsEl = document.getElementById("run-steps");
+	const commandEl = document.getElementById("run-command");
+	const outputEl = document.getElementById("run-output");
+	const artifactsEl = document.getElementById("run-artifacts");
+
+	const nowMs = Date.now();
+	const livenessNode = livenessBadge(task.liveness);
+	const statusCell = livenessNode
+		? (() => {
+				const wrap = document.createDocumentFragment();
+				wrap.appendChild(badge(task.status));
+				wrap.appendChild(document.createTextNode(" "));
+				wrap.appendChild(livenessNode);
+				return wrap;
+			})()
+		: badge(task.status);
+
+	clearNode(metaEl);
+	metaEl.appendChild(
+		metaGrid([
+			["Worker 运行 ID", task.workerRunId ?? "—"],
+			["Task ID", task.taskId],
+			["状态", statusCell],
+			["开始时间", formatTs(task.startedAt)],
+			["已用时", formatDuration(task.elapsedMs)],
+			["上次心跳", formatAgo(task.lastHeartbeatAt, nowMs)],
+			["上次输出", formatAgo(task.lastOutputAt, nowMs)],
+			[
+				"超时截止",
+				task.timeoutAt
+					? formatAgo(task.timeoutAt, nowMs)
+					: task.pid !== undefined
+						? `pid ${task.pid}`
+						: "—",
+			],
+			["耗时", formatMs(task.durationMs)],
+			["失败分类", task.failureCategory ?? "—"],
+		]),
+	);
+
+	renderRunDagProgress(task, snapshot);
+
+	const steps = buildStepStates(events);
+	clearNode(stepsEl);
+	const stepsHeading = el("h3", null, "执行步骤");
+	stepsEl.appendChild(stepsHeading);
+	const ul = el("ul", "step-timeline");
+	for (const step of steps) {
+		const li = document.createElement("li");
+		const marker = el("span", `step-marker ${step.status}`, stepMarker(step.status));
+		const name = el("span", "step-name", step.display);
+		const dur = el(
+			"span",
+			"step-duration",
+			step.durationMs !== undefined ? formatMs(step.durationMs) : "",
+		);
+		li.appendChild(marker);
+		if (step.label === "run-dag" && task.workerRunId) {
+			const dag = findDagForRun(snapshot, task.workerRunId, task);
+			const dagId = dag?.dagRunId ?? task.workerRunId;
+			const link = document.createElement("a");
+			link.href = `#/dag/${encodeURIComponent(dagId)}`;
+			link.className = "step-link";
+			link.textContent = "DAG →";
+			link.addEventListener("click", (e) => {
+				e.preventDefault();
+				navigate(`/dag/${encodeURIComponent(dagId)}`);
+			});
+			li.appendChild(name);
+			li.appendChild(link);
+		} else {
+			li.appendChild(name);
+		}
+		li.appendChild(dur);
+		ul.appendChild(li);
+	}
+	stepsEl.appendChild(ul);
+
+	const cmd = getCurrentCommand(events);
+	clearNode(commandEl);
+	commandEl.appendChild(el("h3", null, "当前命令"));
+	if (!cmd) {
+		commandEl.appendChild(el("p", "empty", UI_TEXT.noActiveCommand));
+	} else {
+		commandEl.appendChild(
+			metaGrid([
+				["标签", cmd.label ?? "—"],
+				["命令", (cmd.command ?? []).join(" ") || "—"],
+				["PID", cmd.pid !== undefined ? String(cmd.pid) : "—"],
+				["超时上限", cmd.timeoutMs !== undefined ? formatMs(cmd.timeoutMs) : "—"],
+				["已用时间", cmd.elapsedMs !== undefined ? formatMs(cmd.elapsedMs) : "—"],
+			]),
+		);
+	}
+
+	const outputLabel = cmd?.label;
+	const tail = getOutputTail(events, outputLabel);
+	clearNode(outputEl);
+	outputEl.appendChild(el("h3", null, "最新输出"));
+	const pre = el("pre", "output-block", tail || "暂无输出");
+	outputEl.appendChild(pre);
+
+	const artifacts = collectArtifacts(task, events);
+	clearNode(artifactsEl);
+	artifactsEl.appendChild(el("h3", null, "产物"));
+	if (artifacts.size === 0) {
+		artifactsEl.appendChild(el("p", "empty", UI_TEXT.noArtifacts));
+	} else {
+		const list = el("ul", "artifact-list");
+		for (const [label, artifactPath] of artifacts) {
+			const li = document.createElement("li");
+			const a = document.createElement("a");
+			a.href = artifactUrl(artifactPath);
+			a.textContent = `${label}: ${artifactPath}`;
+			a.target = "_blank";
+			a.rel = "noopener";
+			li.appendChild(a);
+			list.appendChild(li);
+		}
+		artifactsEl.appendChild(list);
+	}
+}
+
+async function mergeRunEvents(workerRunId) {
+	const page = await fetchJson(
+		`/api/runs/${encodeURIComponent(workerRunId)}/events?after=${runEventOffset}`,
+	);
+	if (!page?.events) return;
+	runEvents = runEvents.concat(page.events);
+	runEventOffset += page.events.length;
+}
+
+async function renderRun(workerRunId, initial = true) {
+	showView("run");
+	setBreadcrumb([
+		{ label: UI_TEXT.dashboard, href: "#/" },
+		{ label: workerRunId },
+	]);
+
+	if (initial) {
+		runEvents = [];
+		runEventOffset = 0;
+		currentRunId = workerRunId;
+	}
+
+	const [task, snapshot] = await Promise.all([
+		fetchJson(`/api/runs/${encodeURIComponent(workerRunId)}`),
+		fetchJson("/api/snapshot"),
+	]);
+	if (!task) {
+		if (initial) {
+			clearNode(document.getElementById("run-meta"));
+			document
+				.getElementById("run-meta")
+				.appendChild(el("p", "empty", "找不到该运行。"));
+		}
+		return false;
+	}
+
+	if (snapshot) {
+		lastSnapshot = snapshot;
+		updateHeaderRefresh(snapshot.generatedAt);
+	}
+
+	currentBatchRunId = task.batchRunId ?? currentBatchRunId;
+	await mergeRunEvents(workerRunId);
+	renderRunPanels(task, runEvents, snapshot ?? lastSnapshot);
+	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) {
+	showView("dag");
+	setBreadcrumb([
+		{ label: UI_TEXT.dashboard, href: "#/" },
+		{ label: dagRunId },
+	]);
+
+	if (initial || currentDagRunId !== dagRunId) {
+		currentDagRunId = dagRunId;
+		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");
+	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 运行。"));
+		closeDagInspector();
+		return false;
+	}
+
+	const nodes = dag.nodes ?? [];
+	if (selectedDagNodeId && !nodes.some((n) => n.nodeId === selectedDagNodeId)) {
+		selectedDagNodeId = null;
+		dagInspectorOpen = false;
+		if (initial) {
+			sessionEventOffset = 0;
+			sessionEvents = [];
+		}
+	}
+
+	const progress = dagProgress(dag);
+	const failedCount = nodes.filter((n) => isNodeFailed(n.status)).length;
+	const skippedCount = nodes.filter(
+		(n) => (n.status ?? "").toLowerCase() === "skipped",
+	).length;
+	const succeededCount = nodes.filter((n) => isNodeFinished(n.status) && !isNodeFailed(n.status))
+		.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 ?? "—"],
+		]),
+	);
+
+	clearNode(ranksEl);
+		ranksEl.appendChild(el("h3", null, "DAG 依赖图"));
+	if (nodes.length === 0) {
+		ranksEl.appendChild(el("p", "empty", UI_TEXT.noNodes));
+	} else {
+			ranksEl.appendChild(renderDagGraph(dag, dagRunId));
+	}
+
+	clearNode(nodesEl);
+	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));
+	} else {
+		const sortedNodes = [...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 rows = sortedNodes.map((node) => {
+			const active = isNodeActive(node.status);
+			const failed = isNodeFailed(node.status);
+			let className = "";
+			if (active) className = "dag-active-node";
+			if (failed) className = "dag-error-node";
+			if (node.nodeId === selectedDagNodeId) {
+				className = className ? `${className} dag-node-selected` : "dag-node-selected";
+			}
+			return {
+				className,
+				onClick: () => selectDagNode(dagRunId, node.nodeId),
+				cells: [
+					node.nodeId,
+					node.rank ?? "—",
+					node.executor ?? "—",
+					node.model ?? "—",
+					node.status ? badge(node.status) : "—",
+					formatMs(node.durationMs),
+					node.errorPreview ?? node.label ?? "—",
+				],
+			};
+		});
+		const nodeTable = buildTable(
+				["节点 ID", "依赖层", "执行方式", "模型", "状态", "耗时", "备注"],
+			rows,
+		);
+		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);
+	}
+
+	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") {
+		startDashboardPolling(r.scrollTo);
+	} else if (r.view === "batch") {
+		void renderBatch(r.batchRunId);
+	} else if (r.view === "run") {
+		startRunPolling(r.workerRunId);
+	} else if (r.view === "dag") {
+		startDagPolling(r.dagRunId);
+	} else if (r.view === "failures") {
+		void renderFailures();
+	}
+}
+
+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);
+	});
+}