@tea-agent/loop-agent 0.4.0 → 0.6.0

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

@@ -0,0 +1,1419 @@
+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 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 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, "Rank 泳道"));
+	if (nodes.length === 0) {
+		ranksEl.appendChild(el("p", "empty", UI_TEXT.noNodes));
+	} else {
+		ranksEl.appendChild(renderRankLanes(dag));
+	}
+
+	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);
+}