@tea-agent/loop-agent 0.7.5 → 0.8.0

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

@@ -1,1480 +1,1479 @@
-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 POLL_MS = 2000;
+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;
+
+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 = `${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 `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) {
+	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} 层`));
+		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");
+	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(
+			["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 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("活跃 Task", snapshot.health?.activeTasks ?? 0));
+	kpiEl.appendChild(kpiCard("无输出", snapshot.health?.quietCount ?? 0));
+	kpiEl.appendChild(kpiCard("心跳失联", snapshot.health?.staleCount ?? 0));
+	kpiEl.appendChild(kpiCard("即将超时", snapshot.health?.timeoutRiskCount ?? 0));
+	kpiEl.appendChild(
+		kpiCard("失败", snapshot.health?.failuresCount ?? 0, "kpi-danger"),
+	);
+
+	const 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, "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;
+	}
+
+	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 运行 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", "层级", "执行方式", "模型", "状态", "耗时", "备注"],
+				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);
+}