@tea-agent/loop-agent 0.1.0-fe-test.0

package/dist/worker/observe/static/views/dags.js

@@ -0,0 +1,877 @@
+/** Observe UI — formal DAG run history page (independent #/dags). */
+import { UI_TEXT } from "../constants.js";
+import { el, clearNode } from "../dom.js";
+import {
+	dagStatusBadge,
+	formatDuration,
+	formatTs,
+} from "../format.js";
+import {
+	buildDagHistoryHash,
+	clampDagHistoryPage,
+	clampDagHistoryPageSize,
+	DAG_HISTORY_ALLOWED_PAGE_SIZES,
+	DAG_HISTORY_DEFAULT_PAGE,
+	DAG_HISTORY_DEFAULT_PAGE_SIZE,
+	navigate,
+	parseRoute,
+} from "../router.js";
+import { fetchDagRunHistory, summarizeFetchError } from "../api.js";
+import { copyText } from "../copy.js";
+import { uiState } from "../state.js";
+import { showView, setBreadcrumb, updateHeaderRefresh } from "../shell-chrome.js";
+import { createCustomSelect } from "../custom-select.js";
+
+let toolbarBound = false;
+/** Per-button copy success restore timers (WeakMap so multi-copy is independent). */
+const copyFeedbackTimers = new WeakMap();
+let copyToastTimer = null;
+
+function ensureHistorySessionState() {
+	if (!(uiState.dagHistoryCache instanceof Map)) {
+		uiState.dagHistoryCache = new Map();
+	}
+	if (!(uiState.dagHistoryPrefetchInFlight instanceof Map)) {
+		uiState.dagHistoryPrefetchInFlight = new Map();
+	}
+}
+
+function cacheKey(pageSize, page) {
+	return `${pageSize}:${page}`;
+}
+
+function currentHistoryQuery() {
+	const route = parseRoute();
+	if (route.view === "dags") {
+		return {
+			page: clampDagHistoryPage(route.page ?? DAG_HISTORY_DEFAULT_PAGE),
+			pageSize: clampDagHistoryPageSize(
+				route.pageSize ?? DAG_HISTORY_DEFAULT_PAGE_SIZE,
+			),
+		};
+	}
+	return {
+		page: DAG_HISTORY_DEFAULT_PAGE,
+		pageSize: DAG_HISTORY_DEFAULT_PAGE_SIZE,
+	};
+}
+
+function syncHash(page, pageSize, { replace = false } = {}) {
+	const next = buildDagHistoryHash(page, pageSize);
+	const current = (location.hash || "").replace(/^#/, "") || "/";
+	const currentPath = current.split("?")[0];
+	const nextPath = next.split("?")[0];
+	const currentQs = new URLSearchParams(current.split("?")[1] || "").toString();
+	const nextQs = new URLSearchParams(next.split("?")[1] || "").toString();
+	if (current === next || (currentPath === nextPath && currentQs === nextQs)) {
+		if (current !== next) {
+			if (replace && typeof history !== "undefined" && history.replaceState) {
+				const base = `${location.pathname}${location.search}`;
+				history.replaceState(null, "", `${base}#${next}`);
+			} else {
+				location.hash = next;
+			}
+		}
+		return next;
+	}
+	if (replace && typeof history !== "undefined" && history.replaceState) {
+		const base = `${location.pathname}${location.search}`;
+		history.replaceState(null, "", `${base}#${next}`);
+		return next;
+	}
+	navigate(next);
+	return next;
+}
+
+function setControlsDisabled(disabled) {
+	const root = document.getElementById("view-dags");
+	if (!root) return;
+	for (const elCtrl of root.querySelectorAll(
+		"button[data-dags-action], select[data-dags-page-size]",
+	)) {
+		// Keep current page number button marked but still disable navigation set.
+		elCtrl.disabled = Boolean(disabled);
+	}
+	// Custom pageSize control (button trigger + root.disabled mirror).
+	for (const custom of root.querySelectorAll("[data-dags-page-size]")) {
+		const isCustomRoot =
+			(typeof custom.className === "string" &&
+				custom.className.split(/\s+/).includes("custom-select")) ||
+			typeof custom.setCustomSelectDisabled === "function";
+		if (!isCustomRoot) continue;
+		if (typeof custom.setCustomSelectDisabled === "function") {
+			custom.setCustomSelectDisabled(Boolean(disabled));
+		} else {
+			custom.disabled = Boolean(disabled);
+			const trigger = custom.querySelector?.(".custom-select-trigger");
+			if (trigger) trigger.disabled = Boolean(disabled);
+		}
+	}
+	const page = uiState.dagHistoryPage;
+	if (page && !disabled) {
+		const prev = root.querySelector('[data-dags-action="prev"]');
+		const next = root.querySelector('[data-dags-action="next"]');
+		const atStart = page.page <= 1;
+		const atEnd = page.page >= page.totalPages;
+		if (prev) prev.disabled = atStart;
+		if (next) next.disabled = atEnd;
+		// Current page button stays non-interactive.
+		const currentBtn = root.querySelector(
+			`[data-dags-action="page"][data-dags-page="${page.page}"]`,
+		);
+		if (currentBtn) currentBtn.disabled = true;
+	}
+}
+
+function bindToolbar() {
+	if (toolbarBound) return;
+	const root = document.getElementById("view-dags");
+	if (!root) return;
+	toolbarBound = true;
+	root.addEventListener("click", (event) => {
+		const target = event.target;
+		if (!target || typeof target.closest !== "function") return;
+		const actionEl = target.closest("[data-dags-action]");
+		if (!actionEl) return;
+		const action =
+			typeof actionEl.getAttribute === "function"
+				? actionEl.getAttribute("data-dags-action")
+				: null;
+		if (!action) return;
+		event.preventDefault();
+		event.stopPropagation();
+		if (action === "refresh") {
+			void loadHistory({ reason: "manual", force: true });
+			return;
+		}
+		// Pagination / pageSize: hash-only. Formal load enters only via startDagsView.
+		const page = uiState.dagHistoryPage;
+		const q = currentHistoryQuery();
+		const totalPages = page?.totalPages ?? 1;
+		if (action === "prev") {
+			const nextPage = Math.max(1, q.page - 1);
+			if (nextPage !== q.page) syncHash(nextPage, q.pageSize);
+			return;
+		}
+		if (action === "next") {
+			const nextPage = Math.min(totalPages, q.page + 1);
+			if (nextPage !== q.page) syncHash(nextPage, q.pageSize);
+			return;
+		}
+		if (action === "page") {
+			const targetPage = clampDagHistoryPage(
+				actionEl.getAttribute("data-dags-page"),
+				totalPages,
+			);
+			if (targetPage !== q.page) syncHash(targetPage, q.pageSize);
+			return;
+		}
+	});
+	// pageSize selection is wired directly via createCustomSelect onChange
+	// (hash-only). Keep a legacy change listener for any residual native select.
+	root.addEventListener("change", (event) => {
+		const target = event.target;
+		if (!target || typeof target.matches !== "function") return;
+		if (!target.matches("[data-dags-page-size]")) return;
+		const pageSize = clampDagHistoryPageSize(target.value);
+		// Hash-only; formal load via startDagsView / hashchange.
+		syncHash(1, pageSize);
+	});
+}
+
+function focusHistoryHeading() {
+	const title = document.getElementById("dags-page-title");
+	if (title && typeof title.focus === "function") {
+		try {
+			title.focus({ preventScroll: false });
+		} catch {
+			title.focus();
+		}
+	}
+	if (typeof title?.scrollIntoView === "function") {
+		title.scrollIntoView({ block: "nearest" });
+	}
+}
+
+function renderShell() {
+	showView("dags");
+	setBreadcrumb([
+		{ label: UI_TEXT.dashboard, href: "#/" },
+		{ label: UI_TEXT.dagHistory },
+	]);
+	const title = document.getElementById("dags-page-title");
+	if (title) title.textContent = UI_TEXT.dagHistory;
+	bindToolbar();
+}
+
+function progressText(run) {
+	const finished = run?.progress?.finished ?? 0;
+	const total = run?.progress?.total ?? 0;
+	return `${finished}/${total}`;
+}
+
+function announceCopy(message) {
+	const live = document.getElementById("dags-copy-announce");
+	if (!live) return;
+	live.textContent = "";
+	// Force polite re-announcement on repeated successes.
+	try {
+		void live.offsetWidth;
+	} catch {
+		// ignore non-DOM stubs
+	}
+	live.textContent = message;
+}
+
+function showCopyToast(message) {
+	const toast = document.getElementById("dags-copy-toast");
+	if (!toast) return;
+	toast.textContent = message;
+	toast.hidden = false;
+	if (copyToastTimer) clearTimeout(copyToastTimer);
+	copyToastTimer = setTimeout(() => {
+		toast.hidden = true;
+		toast.textContent = "";
+	}, 3000);
+}
+
+async function handleCopyRunId(event, dagRunId, copyBtn) {
+	event.preventDefault();
+	event.stopPropagation();
+	const ok = await copyText(dagRunId);
+	if (ok) {
+		if (copyBtn) {
+			const prevTimer = copyFeedbackTimers.get(copyBtn);
+			if (prevTimer != null) clearTimeout(prevTimer);
+			copyBtn.classList.add("is-copied");
+			const timer = setTimeout(() => {
+				copyBtn.classList.remove("is-copied");
+				copyFeedbackTimers.delete(copyBtn);
+			}, 1500);
+			copyFeedbackTimers.set(copyBtn, timer);
+		}
+		announceCopy(UI_TEXT.dagHistoryCopiedAnnounce);
+		return;
+	}
+	showCopyToast(UI_TEXT.dagHistoryCopyFailed);
+	announceCopy(UI_TEXT.dagHistoryCopyFailed);
+}
+
+function buildCopyIcon() {
+	// Dual-rectangle copy glyph (inline SVG, ~16px).
+	const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	svg.setAttribute("class", "dags-copy-icon dags-copy-icon-rects");
+	svg.setAttribute("viewBox", "0 0 16 16");
+	svg.setAttribute("width", "16");
+	svg.setAttribute("height", "16");
+	svg.setAttribute("aria-hidden", "true");
+	svg.setAttribute("focusable", "false");
+	const r1 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+	r1.setAttribute("x", "5");
+	r1.setAttribute("y", "5");
+	r1.setAttribute("width", "9");
+	r1.setAttribute("height", "9");
+	r1.setAttribute("rx", "1.5");
+	r1.setAttribute("fill", "none");
+	r1.setAttribute("stroke", "currentColor");
+	r1.setAttribute("stroke-width", "1.5");
+	const r2 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+	r2.setAttribute("x", "2");
+	r2.setAttribute("y", "2");
+	r2.setAttribute("width", "9");
+	r2.setAttribute("height", "9");
+	r2.setAttribute("rx", "1.5");
+	r2.setAttribute("fill", "none");
+	r2.setAttribute("stroke", "currentColor");
+	r2.setAttribute("stroke-width", "1.5");
+	svg.appendChild(r2);
+	svg.appendChild(r1);
+	return svg;
+}
+
+function buildCheckIcon() {
+	const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	svg.setAttribute("class", "dags-copy-icon dags-copy-icon-check");
+	svg.setAttribute("viewBox", "0 0 16 16");
+	svg.setAttribute("width", "16");
+	svg.setAttribute("height", "16");
+	svg.setAttribute("aria-hidden", "true");
+	svg.setAttribute("focusable", "false");
+	const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+	path.setAttribute(
+		"d",
+		"M3.5 8.5 6.5 11.5 12.5 4.5",
+	);
+	path.setAttribute("fill", "none");
+	path.setAttribute("stroke", "currentColor");
+	path.setAttribute("stroke-width", "1.8");
+	path.setAttribute("stroke-linecap", "round");
+	path.setAttribute("stroke-linejoin", "round");
+	svg.appendChild(path);
+	return svg;
+}
+
+function buildRow(run) {
+	const tr = document.createElement("tr");
+	tr.classList.add("clickable", "dags-history-row");
+	tr.dataset.dagRunId = run.dagRunId;
+	tr.addEventListener("click", (event) => {
+		const t = event.target;
+		if (t instanceof Element && t.closest("a, button, [data-copy-run-id]")) {
+			return;
+		}
+		navigate(`/dag/${encodeURIComponent(run.dagRunId)}`);
+	});
+
+	const nameTd = document.createElement("td");
+	const nameLink = el("a", "dags-name-link", run.title || run.dagRunId);
+	nameLink.href = `#/dag/${encodeURIComponent(run.dagRunId)}`;
+	nameLink.addEventListener("click", (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		navigate(`/dag/${encodeURIComponent(run.dagRunId)}`);
+	});
+	nameTd.appendChild(nameLink);
+	tr.appendChild(nameTd);
+
+	const idTd = document.createElement("td");
+	idTd.className = "dags-run-id-cell";
+	const idWrap = el("div", "dags-run-id-wrap");
+	const idCode = el("code", "dags-run-id", run.dagRunId);
+	idCode.title = run.dagRunId;
+	const copyBtn = el("button", "dags-copy-btn dags-copy-btn-icon");
+	copyBtn.type = "button";
+	copyBtn.setAttribute("data-copy-run-id", run.dagRunId);
+	copyBtn.setAttribute("aria-label", `复制运行 ID ${run.dagRunId}`);
+	copyBtn.title = UI_TEXT.dagHistoryCopyTooltip;
+	copyBtn.appendChild(buildCopyIcon());
+	copyBtn.appendChild(buildCheckIcon());
+	copyBtn.addEventListener("click", (event) => {
+		void handleCopyRunId(event, run.dagRunId, copyBtn);
+	});
+	idWrap.appendChild(idCode);
+	idWrap.appendChild(copyBtn);
+	idTd.appendChild(idWrap);
+	tr.appendChild(idTd);
+
+	const statusTd = document.createElement("td");
+	statusTd.appendChild(dagStatusBadge(run.effectiveStatus ?? run.status));
+	tr.appendChild(statusTd);
+
+	const startedTd = document.createElement("td");
+	startedTd.textContent = formatTs(run.startedAt);
+	tr.appendChild(startedTd);
+
+	const durationTd = document.createElement("td");
+	durationTd.textContent = formatDuration(run.durationMs);
+	tr.appendChild(durationTd);
+
+	const progressTd = document.createElement("td");
+	progressTd.textContent = progressText(run);
+	tr.appendChild(progressTd);
+
+	return tr;
+}
+
+function renderTable(container, runs) {
+	clearNode(container);
+	const wrap = el("div", "dags-table-wrap table-scroll");
+	const table = document.createElement("table");
+	table.className = "dags-history-table";
+	const thead = document.createElement("thead");
+	const headRow = document.createElement("tr");
+	for (const h of ["DAG 名称", "运行 ID", "状态", "开始时间", "耗时", "进度"]) {
+		const th = document.createElement("th");
+		th.textContent = h;
+		if (h === "DAG 名称") th.id = "dags-table-heading";
+		headRow.appendChild(th);
+	}
+	thead.appendChild(headRow);
+	table.appendChild(thead);
+	const tbody = document.createElement("tbody");
+	for (const run of runs) {
+		tbody.appendChild(buildRow(run));
+	}
+	table.appendChild(tbody);
+	wrap.appendChild(table);
+	container.appendChild(wrap);
+}
+
+/**
+ * Fixed page window:
+ * - totalPages <= 7: show all
+ * - else: strictly first, last, current, current±1 (clipped) with ellipsis gaps
+ *   (no near-edge filler pages beyond that set)
+ */
+export function buildPageWindow(current, totalPages) {
+	const total = Math.max(1, Number(totalPages) || 1);
+	const page = Math.min(Math.max(1, Number(current) || 1), total);
+	if (total <= 7) {
+		return Array.from({ length: total }, (_, i) => i + 1);
+	}
+	const pages = new Set([1, total, page]);
+	if (page - 1 >= 1) pages.add(page - 1);
+	if (page + 1 <= total) pages.add(page + 1);
+	const sorted = [...pages].filter((p) => p >= 1 && p <= total).sort((a, b) => a - b);
+	const out = [];
+	let prev = 0;
+	for (const p of sorted) {
+		if (prev && p - prev > 1) out.push("ellipsis");
+		out.push(p);
+		prev = p;
+	}
+	return out;
+}
+
+function renderPaginationControls(metaEl, {
+	page,
+	pageSize,
+	totalPages,
+	total,
+	generatedAt: _generatedAt,
+	disabled = false,
+	showSummary = true,
+	busy = false,
+} = {}) {
+	clearNode(metaEl);
+	const bar = el("div", "dags-pagination");
+	if (busy) bar.classList.add("is-busy");
+
+	const summaryWrap = el("div", "dags-pagination-summary");
+	if (showSummary && total != null) {
+		summaryWrap.appendChild(
+			el(
+				"p",
+				"dags-meta muted",
+				`共 ${total} 条 · 第 ${page} / ${totalPages} 页`,
+			),
+		);
+	} else {
+		summaryWrap.appendChild(el("p", "dags-meta muted", "加载中…"));
+	}
+	bar.appendChild(summaryWrap);
+
+	const pagesWrap = el("div", "dags-pagination-pages");
+	const mkIcon = (iconClass) => {
+		const icon = el("i", iconClass);
+		icon.setAttribute("aria-hidden", "true");
+		return icon;
+	};
+	const mkNavBtn = (action, iconClass, ariaLabel) => {
+		const btn = el("button", "btn btn-secondary dags-page-nav");
+		btn.type = "button";
+		btn.setAttribute("data-dags-action", action);
+		btn.setAttribute("aria-label", ariaLabel);
+		btn.title = ariaLabel;
+		btn.appendChild(mkIcon(iconClass));
+		if (disabled) btn.disabled = true;
+		return btn;
+	};
+	const prevBtn = mkNavBtn("prev", "ri-arrow-left-s-line", "上一页");
+	const nextBtn = mkNavBtn("next", "ri-arrow-right-s-line", "下一页");
+	if (!disabled) {
+		if (page <= 1) prevBtn.disabled = true;
+		if (page >= totalPages) nextBtn.disabled = true;
+	}
+	pagesWrap.appendChild(prevBtn);
+
+	const windowItems = buildPageWindow(page, totalPages);
+	for (const item of windowItems) {
+		if (item === "ellipsis") {
+			const dots = el("span", "dags-page-ellipsis", "…");
+			dots.setAttribute("aria-hidden", "true");
+			pagesWrap.appendChild(dots);
+			continue;
+		}
+		const btn = el(
+			"button",
+			`btn btn-secondary dags-page-num${item === page ? " is-current" : ""}`,
+			String(item),
+		);
+		btn.type = "button";
+		btn.setAttribute("data-dags-action", "page");
+		btn.setAttribute("data-dags-page", String(item));
+		btn.setAttribute("aria-label", `第 ${item} 页`);
+		if (item === page) {
+			btn.setAttribute("aria-current", "page");
+			btn.disabled = true;
+		} else if (disabled) {
+			btn.disabled = true;
+		}
+		pagesWrap.appendChild(btn);
+	}
+	pagesWrap.appendChild(nextBtn);
+	bar.appendChild(pagesWrap);
+
+	const tools = el("div", "dags-pagination-tools");
+	const sizeLabel = el("label", "dags-page-size-label", "每页");
+	const select = createCustomSelect({
+		ariaLabel: "每页条数",
+		value: String(pageSize),
+		options: DAG_HISTORY_ALLOWED_PAGE_SIZES.map((size) => ({
+			value: String(size),
+			label: String(size),
+		})),
+		disabled: Boolean(disabled),
+		className: "dags-page-size-select",
+		onChange: (next) => {
+			const nextSize = clampDagHistoryPageSize(next);
+			// Hash-only; formal load via startDagsView / hashchange.
+			syncHash(1, nextSize);
+		},
+	});
+	select.setAttribute("data-dags-page-size", "1");
+	// Also stamp the trigger so attribute queries and a11y tools find the control.
+	const pageSizeTrigger =
+		typeof select.getCustomSelectTrigger === "function"
+			? select.getCustomSelectTrigger()
+			: select.querySelector?.(".custom-select-trigger");
+	if (pageSizeTrigger) {
+		pageSizeTrigger.setAttribute("data-dags-page-size", "1");
+	}
+	sizeLabel.appendChild(select);
+	tools.appendChild(sizeLabel);
+
+	const refresh = el("button", "btn btn-secondary dags-refresh-btn");
+	refresh.type = "button";
+	refresh.setAttribute("data-dags-action", "refresh");
+	refresh.setAttribute("aria-label", "刷新");
+	refresh.title = "刷新";
+	refresh.appendChild(mkIcon("ri-refresh-line"));
+	if (disabled) refresh.disabled = true;
+	tools.appendChild(refresh);
+	bar.appendChild(tools);
+
+	metaEl.appendChild(bar);
+}
+
+function renderPagination(metaEl, page, { busy = false } = {}) {
+	renderPaginationControls(metaEl, {
+		page: page.page,
+		pageSize: page.pageSize,
+		totalPages: page.totalPages,
+		total: page.total,
+		generatedAt: page.generatedAt,
+		disabled: Boolean(busy),
+		showSummary: true,
+		busy,
+	});
+}
+
+/** First-load Loading skeleton: controls exist and stay disabled. */
+function renderLoadingControls(metaEl) {
+	const q = currentHistoryQuery();
+	renderPaginationControls(metaEl, {
+		page: q.page,
+		pageSize: q.pageSize,
+		totalPages: Math.max(1, q.page),
+		total: null,
+		disabled: true,
+		showSummary: false,
+		busy: true,
+	});
+}
+
+function renderStatusArea(statusEl, kind, message, detail) {
+	clearNode(statusEl);
+	if (!kind) {
+		statusEl.hidden = true;
+		return;
+	}
+	statusEl.hidden = false;
+	const node = el(
+		"div",
+		`view-state view-state-${kind}${kind === "empty" ? " empty" : ""}`,
+	);
+	if (kind === "error" || kind === "degraded") {
+		node.setAttribute("role", "alert");
+	} else if (kind === "loading") {
+		node.setAttribute("role", "status");
+		node.setAttribute("aria-live", "polite");
+	}
+	node.appendChild(
+		el("p", kind === "empty" ? "empty" : kind === "loading" ? "muted" : null, message),
+	);
+	if (detail) node.appendChild(el("p", "muted", detail));
+	if (kind === "error") {
+		const retry = el("button", "btn btn-secondary", "重新加载");
+		retry.type = "button";
+		retry.setAttribute("data-dags-action", "refresh");
+		node.appendChild(retry);
+	}
+	statusEl.appendChild(node);
+}
+
+function pagePayloadFromBody(body, fallbackPage, fallbackPageSize) {
+	const totalPages = Math.max(1, Number(body.totalPages) || 1);
+	const page = clampDagHistoryPage(body.page ?? fallbackPage, totalPages);
+	const pageSize = clampDagHistoryPageSize(body.pageSize ?? fallbackPageSize);
+	return {
+		schemaVersion: 1,
+		generatedAt: body.generatedAt,
+		page,
+		pageSize,
+		total: Number(body.total) || 0,
+		totalPages,
+		runs: Array.isArray(body.runs) ? body.runs : [],
+	};
+}
+
+function applyPageToState(payload) {
+	uiState.dagHistoryPage = payload;
+	uiState.dagHistoryError = null;
+	uiState.dagHistoryDegraded = false;
+	const key = cacheKey(payload.pageSize, payload.page);
+	ensureHistorySessionState();
+	uiState.dagHistoryCache.set(key, payload);
+}
+
+function paint() {
+	const tableEl = document.getElementById("dags-table");
+	const statusEl = document.getElementById("dags-status");
+	const metaEl = document.getElementById("dags-meta");
+	const bannerEl = document.getElementById("dags-degraded");
+	if (!tableEl || !statusEl || !metaEl) return;
+
+	const page = uiState.dagHistoryPage;
+	const loading = uiState.dagHistoryLoading;
+	const busy = uiState.dagHistoryBusy;
+	const error = uiState.dagHistoryError;
+	const degraded = uiState.dagHistoryDegraded;
+
+	if (bannerEl) {
+		if (degraded && page) {
+			bannerEl.hidden = false;
+			bannerEl.textContent = UI_TEXT.dagHistoryRefreshFailed;
+			if (typeof bannerEl.setAttribute === "function") {
+				bannerEl.setAttribute("role", "alert");
+			}
+		} else {
+			bannerEl.hidden = true;
+			bannerEl.textContent = "";
+			if (typeof bannerEl.removeAttribute === "function") {
+				bannerEl.removeAttribute("role");
+			}
+		}
+	}
+
+	if (loading && !page) {
+		renderStatusArea(statusEl, "loading", "加载 DAG 运行历史…");
+		clearNode(tableEl);
+		renderLoadingControls(metaEl);
+		setControlsDisabled(true);
+		return;
+	}
+
+	if (error && !page) {
+		renderStatusArea(statusEl, "error", "无法加载 DAG 运行历史。", error);
+		clearNode(tableEl);
+		clearNode(metaEl);
+		setControlsDisabled(false);
+		return;
+	}
+
+	if (page) {
+		if (page.total === 0) {
+			renderStatusArea(
+				statusEl,
+				"empty",
+				UI_TEXT.noFormalDagHistory,
+				UI_TEXT.noFormalDagHistoryHint,
+			);
+			clearNode(tableEl);
+		} else {
+			renderStatusArea(statusEl, null);
+			renderTable(tableEl, page.runs ?? []);
+		}
+		renderPagination(metaEl, page, { busy: Boolean(busy || loading) });
+		updateHeaderRefresh(page.generatedAt, { mode: "manual" });
+		setControlsDisabled(Boolean(busy || loading));
+		return;
+	}
+
+	renderStatusArea(statusEl, "empty", UI_TEXT.noFormalDagHistory);
+	setControlsDisabled(false);
+}
+
+function abortFormalRequest() {
+	const prev = uiState.dagHistoryAbortController;
+	if (prev && typeof prev.abort === "function") {
+		try {
+			prev.abort();
+		} catch {
+			// ignore
+		}
+	}
+	uiState.dagHistoryAbortController = null;
+}
+
+function invalidateAdjacentHistoryCache(page, pageSize, totalPages) {
+	ensureHistorySessionState();
+	const neighbors = [page - 1, page + 1].filter(
+		(p) => p >= 1 && p <= totalPages,
+	);
+	for (const neighbor of neighbors) {
+		uiState.dagHistoryCache.delete(cacheKey(pageSize, neighbor));
+	}
+}
+
+function scheduleAdjacentPrefetch(page, pageSize, totalPages) {
+	ensureHistorySessionState();
+	const generation = uiState.dagHistoryPrefetchGeneration ?? 0;
+	const neighbors = [page - 1, page + 1].filter(
+		(p) => p >= 1 && p <= totalPages,
+	);
+	for (const neighbor of neighbors) {
+		const key = cacheKey(pageSize, neighbor);
+		if (uiState.dagHistoryCache.has(key)) continue;
+		// Same-generation in-flight dedupe only; a stale generation must not
+		// block a post-refresh re-prefetch for the same pageSize:page key.
+		if (uiState.dagHistoryPrefetchInFlight.get(key) === generation) continue;
+		uiState.dagHistoryPrefetchInFlight.set(key, generation);
+		void (async () => {
+			try {
+				const result = await fetchDagRunHistory(neighbor, pageSize);
+				// Prefetch never mutates URL, focus, loading, busy, or refresh copy.
+				if (!result.ok || !result.body || typeof result.body !== "object") {
+					return;
+				}
+				const payload = pagePayloadFromBody(result.body, neighbor, pageSize);
+				// Only store when generation + pageSize still match (post-refresh guard).
+				const current = currentHistoryQuery();
+				if (current.pageSize !== pageSize) return;
+				if ((uiState.dagHistoryPrefetchGeneration ?? 0) !== generation) return;
+				uiState.dagHistoryCache.set(cacheKey(pageSize, payload.page), payload);
+			} catch {
+				// Silent prefetch failure.
+			} finally {
+				// Stale finally must not clear a newer generation's in-flight slot.
+				if (uiState.dagHistoryPrefetchInFlight.get(key) === generation) {
+					uiState.dagHistoryPrefetchInFlight.delete(key);
+				}
+			}
+		})();
+	}
+}
+
+async function loadHistory(options = {}) {
+	ensureHistorySessionState();
+	const q = {
+		page: options.page ?? currentHistoryQuery().page,
+		pageSize: options.pageSize ?? currentHistoryQuery().pageSize,
+	};
+	const force = options.force === true;
+	const reason = options.reason ?? "route";
+
+	// Normalize illegal hash query without creating a navigation loop.
+	const normalized = buildDagHistoryHash(q.page, q.pageSize);
+	const current = (location.hash || "").replace(/^#/, "");
+	if (current.startsWith("/dags") && current !== normalized) {
+		syncHash(q.page, q.pageSize, { replace: true });
+	}
+
+	const key = cacheKey(q.pageSize, q.page);
+	if (!force && uiState.dagHistoryCache.has(key)) {
+		// Drop any in-flight formal GET so a late response cannot overwrite this
+		// hash-aligned cached paint (advance requestSeq + abort).
+		abortFormalRequest();
+		uiState.dagHistoryRequestSeq += 1;
+		const cached = uiState.dagHistoryCache.get(key);
+		uiState.dagHistoryPage = cached;
+		uiState.dagHistoryError = null;
+		uiState.dagHistoryDegraded = false;
+		uiState.dagHistoryLoading = false;
+		uiState.dagHistoryBusy = false;
+		paint();
+		scheduleAdjacentPrefetch(cached.page, cached.pageSize, cached.totalPages);
+		if (reason === "paginate") focusHistoryHeading();
+		return;
+	}
+
+	const requestSeq = ++uiState.dagHistoryRequestSeq;
+	abortFormalRequest();
+	const controller =
+		typeof AbortController !== "undefined" ? new AbortController() : null;
+	uiState.dagHistoryAbortController = controller;
+
+	const hasPage = Boolean(uiState.dagHistoryPage);
+	uiState.dagHistoryError = null;
+	if (!hasPage) {
+		uiState.dagHistoryLoading = true;
+		uiState.dagHistoryBusy = false;
+		uiState.dagHistoryDegraded = false;
+	} else {
+		// Cache-miss navigate / manual refresh: keep old table, light busy.
+		uiState.dagHistoryLoading = false;
+		uiState.dagHistoryBusy = true;
+	}
+	// Manual refresh: bump prefetch generation and drop neighbor cache so older
+	// prefetches cannot write back after we replace the current page.
+	if (force && hasPage) {
+		uiState.dagHistoryPrefetchGeneration =
+			(uiState.dagHistoryPrefetchGeneration ?? 0) + 1;
+		const currentPage = uiState.dagHistoryPage;
+		if (currentPage) {
+			invalidateAdjacentHistoryCache(
+				currentPage.page,
+				currentPage.pageSize,
+				currentPage.totalPages,
+			);
+		}
+	}
+	paint();
+
+	const result = await fetchDagRunHistory(q.page, q.pageSize, {
+		signal: controller?.signal,
+	});
+	if (requestSeq !== uiState.dagHistoryRequestSeq) return;
+
+	uiState.dagHistoryLoading = false;
+	uiState.dagHistoryBusy = false;
+	uiState.dagHistoryAbortController = null;
+
+	if (result?.aborted) {
+		return;
+	}
+
+	if (!result.ok || !result.body || typeof result.body !== "object") {
+		const summary = summarizeFetchError(result);
+		if (uiState.dagHistoryPage) {
+			uiState.dagHistoryDegraded = true;
+			uiState.dagHistoryError = summary;
+		} else {
+			uiState.dagHistoryDegraded = false;
+			uiState.dagHistoryError = summary;
+			uiState.dagHistoryPage = null;
+		}
+		paint();
+		return;
+	}
+
+	const payload = pagePayloadFromBody(result.body, q.page, q.pageSize);
+	// Server may clamp over-range page; reflect in hash.
+	if (payload.page !== q.page || payload.pageSize !== q.pageSize) {
+		syncHash(payload.page, payload.pageSize, { replace: true });
+	}
+
+	applyPageToState(payload);
+	// Successful manual refresh also ensures neighbors stay invalidated against
+	// the newly applied page metadata (totalPages may change).
+	if (force) {
+		invalidateAdjacentHistoryCache(
+			payload.page,
+			payload.pageSize,
+			payload.totalPages,
+		);
+	}
+	paint();
+	scheduleAdjacentPrefetch(payload.page, payload.pageSize, payload.totalPages);
+	if (reason === "paginate") focusHistoryHeading();
+}
+
+export async function startDagsView() {
+	ensureHistorySessionState();
+	renderShell();
+	const q = currentHistoryQuery();
+	await loadHistory({ reason: "route", page: q.page, pageSize: q.pageSize });
+}