@tea-agent/loop-agent 0.13.0-beta.0 → 0.14.0

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

@@ -1,124 +1,281 @@
-/** Observe UI view module (R5). */
-import {
-	UI_TEXT,
-	LIVENESS_LABELS,
-	ARTIFACT_LABELS,
-	ARTIFACT_KEYS,
-	STEP_LABELS,
-	STEP_ORDER,
-	DAG_INSPECTOR_DEFAULT_WIDTH,
-	DAG_INSPECTOR_MIN_WIDTH,
-	DAG_INSPECTOR_MAX_WIDTH,
-	DAG_INSPECTOR_RIGHT_OFFSET,
-	DAG_INSPECTOR_VIEWPORT_MARGIN,
-	DAG_INSPECTOR_KEYBOARD_STEP,
-	TERMINAL_RUN_STATUSES,
-	DAG_EFFECTIVE_STATUS_LABELS,
-	STATUS_LABELS,
-} from "../constants.js";
-import { clearNode, el, metaGrid, buildTable } from "../dom.js";
+/** Observe UI view module — Task Pool ops surface (R5 + ops refresh). */
+import { UI_TEXT, POOL_POLL_MS } from "../constants.js";
+import { clearNode, el, reconcileKeyed } from "../dom.js";
 import {
 	badge,
-	badgeClass,
-	statusLabel,
-	formatTs,
-	formatMs,
-	formatDuration,
 	formatAgo,
-	dagStatusBadge,
+	formatTs,
 	livenessBadge,
-	displayDurationMs,
-	derivedDurationMs,
-	summaryText,
 	truncateText,
-	repoBaseName,
-	parseMarkdownBlocks,
-	markdownLinkHref,
 } from "../format.js";
 import { parseRoute, navigate, buildHashPath } from "../router.js";
-import {
-	fetchJson,
-	artifactUrl,
-	parseArtifactPreviewResponse,
-} from "../api.js";
-import {
-	objectRouteLink,
-	findFeatureInSnapshot,
-	featureLookupState,
-	buildObjectRelations,
-	renderObjectRelationBar,
-} from "../relations.js";
-import { copyText, renderRecommendedCommand } from "../copy.js";
+import { fetchJson } from "../api.js";
+import { objectRouteLink } from "../relations.js";
 import {
 	isPageVisible,
-	detailPollDelay,
 	dashboardPollDelay,
-	captureDagGraphViewportState,
-	updateDagGraphViewportState,
-	updateDagTimelineViewportState,
-	renderViewState,
 	mountViewState,
+	renderViewState,
 } from "../state.js";
 import { uiState } from "../state.js";
 import {
 	sortPoolTasks,
 	matchesPoolStatusFilter,
 	poolStatusCounts,
+	sortAttentionTasks,
+	collectPlannerReadyTasks,
+	taskIdentityKey,
 } from "../format-pool.js";
-import {
-	dagMetaVisibility,
-	isDagRunActive,
-	dashboardVisibleFeatures,
-	findDagForRun,
-} from "../dag-model.js";
-import { layoutDag } from "../dag-layout.js";
 import { showView, setBreadcrumb, updateHeaderRefresh } from "../shell-chrome.js";
 import { renderProjectionFault } from "../kpi.js";
 import { mountBoundedEventTimeline } from "./timeline.js";
 
-export async function renderPool() {
+let poolToolbarBound = false;
+let poolEventsBound = false;
+let poolHasRendered = false;
+
+function poolAutoRefreshEnabled() {
+	return uiState.poolAutoRefresh === true;
+}
+
+function syncPoolToolbar() {
+	const auto = document.getElementById("pool-auto-refresh");
+	const status = document.getElementById("pool-refresh-status");
+	if (auto) auto.checked = poolAutoRefreshEnabled();
+	if (status) {
+		status.textContent = poolAutoRefreshEnabled()
+			? `自动刷新约 ${Math.round(POOL_POLL_MS / 1000)}s`
+			: "已关闭自动刷新";
+	}
+}
+
+function bindPoolToolbar() {
+	if (poolToolbarBound) return;
+	const btn = document.getElementById("pool-refresh-btn");
+	const auto = document.getElementById("pool-auto-refresh");
+	if (!btn || !auto) return;
+	poolToolbarBound = true;
+	btn.addEventListener("click", () => {
+		void renderPool({ reason: "manual" });
+	});
+	auto.addEventListener("change", () => {
+		uiState.poolAutoRefresh = auto.checked;
+		syncPoolToolbar();
+		if (auto.checked) startPoolAutoPolling();
+		else stopPoolAutoPolling();
+	});
+}
+
+function bindPoolEventsDetails() {
+	if (poolEventsBound) return;
+	const details = document.getElementById("pool-events-details");
+	if (!details) return;
+	poolEventsBound = true;
+	details.addEventListener("toggle", () => {
+		if (details.open) void refreshPoolEvents();
+	});
+}
+
+function stopPoolAutoPolling() {
+	if (uiState.poolTimer) {
+		clearTimeout(uiState.poolTimer);
+		uiState.poolTimer = null;
+	}
+}
+
+function startPoolAutoPolling() {
+	stopPoolAutoPolling();
+	if (!poolAutoRefreshEnabled()) return;
+	const generation = ++uiState.pollingGeneration;
+	const poll = async () => {
+		if (!poolAutoRefreshEnabled()) return;
+		await renderPool({ reason: "auto" });
+		if (generation !== uiState.pollingGeneration) return;
+		if (!poolAutoRefreshEnabled()) return;
+		const delay = isPageVisible() ? POOL_POLL_MS : dashboardPollDelay();
+		uiState.poolTimer = setTimeout(() => {
+			uiState.poolTimer = null;
+			void poll();
+		}, delay);
+	};
+	void poll();
+}
+
+async function refreshPoolEvents() {
+	const eventsEl = document.getElementById("pool-events");
+	const details = document.getElementById("pool-events-details");
+	if (!eventsEl || !details?.open) return;
+	await mountBoundedEventTimeline(eventsEl, "/api/events", "最近事件");
+}
+
+function taskPath(task) {
+	if (task.featureId) {
+		return `/feature/${encodeURIComponent(task.featureId)}/task/${encodeURIComponent(task.taskId)}`;
+	}
+	return `/task/${encodeURIComponent(task.taskId)}`;
+}
+
+function linkTo(path, label, className) {
+	const a = el("a", className || "object-link", label);
+	a.href = `#${path}`;
+	a.addEventListener("click", (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		navigate(path);
+	});
+	return a;
+}
+
+function syncCell(row, index, content) {
+	let td = row.children[index];
+	if (!td) {
+		td = document.createElement("td");
+		row.appendChild(td);
+	}
+	while (td.firstChild) td.removeChild(td.firstChild);
+	if (content instanceof Node) td.appendChild(content);
+	else td.textContent = content ?? "—";
+}
+
+function ensureTable(parent, headers, scope) {
+	let table = parent.querySelector("table");
+	if (!table) {
+		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);
+		table.appendChild(document.createElement("tbody"));
+		parent.appendChild(table);
+	}
+	return table.querySelector("tbody");
+}
+
+function renderOpsCard(item, kind) {
+	const card = el("div", `pool-ops-card pool-ops-card-${kind}`);
+	const title = el("div", "pool-ops-card-title");
+	title.appendChild(linkTo(taskPath(item), item.taskId));
+	card.appendChild(title);
+	const meta = el("div", "pool-ops-card-meta");
+	meta.appendChild(
+		el("span", null, item.featureId ? `Feature ${item.featureId}` : "Feature —"),
+	);
+	if (item.priority) meta.appendChild(el("span", null, item.priority));
+	if (item.status) meta.appendChild(badge(item.status));
+	else if (item.liveness) meta.appendChild(livenessBadge(item.liveness));
+	card.appendChild(meta);
+	const detail = item.recommendedFollowUp || item.title || item.failureCategory;
+	if (detail) {
+		card.appendChild(
+			el("p", "pool-ops-card-detail", truncateText(String(detail), 96)),
+		);
+	}
+	card.classList.add("clickable");
+	card.addEventListener("click", () => navigate(taskPath(item)));
+	return card;
+}
+
+function updateOpsCard(card, item) {
+	const title = card.querySelector(".pool-ops-card-title");
+	if (title) {
+		while (title.firstChild) title.removeChild(title.firstChild);
+		title.appendChild(linkTo(taskPath(item), item.taskId));
+	}
+	const meta = card.querySelector(".pool-ops-card-meta");
+	if (meta) {
+		while (meta.firstChild) meta.removeChild(meta.firstChild);
+		meta.appendChild(
+			el("span", null, item.featureId ? `Feature ${item.featureId}` : "Feature —"),
+		);
+		if (item.priority) meta.appendChild(el("span", null, item.priority));
+		if (item.status) meta.appendChild(badge(item.status));
+		else if (item.liveness) meta.appendChild(livenessBadge(item.liveness));
+	}
+	let detail = card.querySelector(".pool-ops-card-detail");
+	const text = item.recommendedFollowUp || item.title || item.failureCategory;
+	if (text) {
+		if (!detail) {
+			detail = el("p", "pool-ops-card-detail");
+			card.appendChild(detail);
+		}
+		detail.textContent = truncateText(String(text), 96);
+	} else if (detail) {
+		detail.remove();
+	}
+}
+
+/**
+ * Mount or refresh the pool view. Default: no auto poll.
+ * @param {{ reason?: "route" | "manual" | "auto" }} [options]
+ */
+export async function renderPool(options = {}) {
 	showView("pool");
 	setBreadcrumb([
 		{ label: UI_TEXT.dashboard, href: "#/" },
 		{ label: "资源池" },
 	]);
+	bindPoolToolbar();
+	bindPoolEventsDetails();
+	syncPoolToolbar();
 
 	const faultEl = document.getElementById("pool-fault");
+	const updatedAtEl = document.getElementById("pool-updated-at");
 	const kpiEl = document.getElementById("pool-kpi");
 	const emptyEl = document.getElementById("pool-empty");
+	const attentionEl = document.getElementById("pool-attention");
+	const readyEl = document.getElementById("pool-ready");
 	const listEl = document.getElementById("pool-tasks");
-	const eventsEl = document.getElementById("pool-events");
-	if (!faultEl || !kpiEl || !emptyEl || !listEl) return;
+	const filtersEl = document.getElementById("pool-filters");
+	if (!faultEl || !kpiEl || !emptyEl || !listEl || !attentionEl || !readyEl) {
+		return;
+	}
 
-	mountViewState(faultEl, "loading", "加载资源池…");
-	clearNode(kpiEl);
-	clearNode(listEl);
-	clearNode(emptyEl);
-	emptyEl.hidden = true;
+	const firstPaint = !poolHasRendered;
+	if (firstPaint) {
+		faultEl.hidden = false;
+		faultEl.classList.add("pool-fault-active");
+		mountViewState(faultEl, "loading", "加载资源池…");
+	}
 
 	const snapshot = await fetchJson("/api/snapshot");
 	if (!snapshot) {
-		clearNode(kpiEl);
-		clearNode(listEl);
-		clearNode(emptyEl);
-		emptyEl.hidden = true;
-		if (eventsEl) clearNode(eventsEl);
+		faultEl.hidden = false;
+		faultEl.classList.add("pool-fault-active");
 		mountViewState(faultEl, "error", "无法加载 snapshot。");
+		if (updatedAtEl) updatedAtEl.textContent = "";
 		return;
 	}
 	uiState.lastSnapshot = snapshot;
-	updateHeaderRefresh(snapshot.generatedAt);
+	updateHeaderRefresh(snapshot.generatedAt, {
+		mode: poolAutoRefreshEnabled() ? "auto" : "manual",
+	});
+	poolHasRendered = true;
+
+	if (updatedAtEl) {
+		updatedAtEl.textContent = snapshot.generatedAt
+			? `投影更新：${formatTs(snapshot.generatedAt)}（advisory）`
+			: "";
+	}
 
 	clearNode(faultEl);
+	let hasFaultContent = false;
 	if (snapshot.projectionError) {
-		mountViewState(faultEl, "degraded", "投影降级：状态分布可能不完整。", {
-			detail: snapshot.projectionError.message ?? null,
-		});
-		faultEl.appendChild(
-			renderProjectionFault(snapshot.projectionError),
+		hasFaultContent = true;
+		const degraded = renderViewState(
+			"degraded",
+			"投影降级：状态分布可能不完整。",
+			{ detail: snapshot.projectionError.message ?? null },
 		);
+		faultEl.appendChild(degraded);
+		faultEl.appendChild(renderProjectionFault(snapshot.projectionError));
 	}
 	if ((snapshot.projectionWarnings ?? []).length > 0) {
+		hasFaultContent = true;
 		const warn = el("div", "projection-fault");
 		const body = el("div", "projection-fault-body");
 		body.appendChild(el("p", "projection-fault-title", "投影警告"));
@@ -132,98 +289,110 @@ export async function renderPool() {
 		warn.appendChild(body);
 		faultEl.appendChild(warn);
 	}
-	if (snapshot.generatedAt) {
-		faultEl.appendChild(
-			el(
-				"p",
-				"muted pool-updated-at",
-				`投影更新时间：${formatTs(snapshot.generatedAt)}（derived/advisory）`,
-			),
-		);
-	}
+	faultEl.hidden = !hasFaultContent;
+	faultEl.classList.toggle("pool-fault-active", hasFaultContent);
 
 	const allTasks = sortPoolTasks(snapshot.tasks ?? []);
 	const routeFilters = parseRoute().filters ?? {};
 	const statusFilter = (routeFilters.status ?? "").toLowerCase();
 	const qFilter = (routeFilters.q ?? "").trim().toLowerCase();
-	const tasks = allTasks.filter((task) => {
+	const filteredTasks = allTasks.filter((task) => {
 		if (statusFilter && !matchesPoolStatusFilter(task.status, statusFilter)) {
 			return false;
 		}
 		if (qFilter) {
 			const hay =
-				`${task.taskId ?? ""} ${task.featureId ?? ""} ${task.workerRunId ?? ""} ${task.failureCategory ?? ""}`.toLowerCase();
+				`${task.taskId ?? ""} ${task.featureId ?? ""} ${task.workerRunId ?? ""} ${task.failureCategory ?? ""} ${task.recommendedFollowUp ?? ""}`.toLowerCase();
 			if (!hay.includes(qFilter)) return false;
 		}
 		return true;
 	});
 	const poolPresent = snapshot.taskPool?.present === true;
 	const projectionFailed = Boolean(snapshot.projectionError);
+	const readyItems = collectPlannerReadyTasks(snapshot.features);
+	const attentionTasks = sortAttentionTasks(allTasks);
+	const counts = poolStatusCounts(allTasks);
+	const health = snapshot.health ?? {};
 
-	// Shareable hash filters (REQ-R5-04)
-	if (listEl) {
-		let filtersEl = document.getElementById("pool-filters");
-		if (!filtersEl) {
-			filtersEl = el("div", "pool-filters");
-			filtersEl.id = "pool-filters";
-			listEl.parentElement?.insertBefore(filtersEl, listEl);
-		}
-		clearNode(filtersEl);
-		const statusLabelEl = el("label", null);
-		statusLabelEl.appendChild(document.createTextNode("状态"));
-		const statusSelect = document.createElement("select");
-		statusSelect.setAttribute("aria-label", "按状态筛选 Task");
-		for (const [value, label] of [
-			["", "全部"],
-			["running", "运行中"],
-			["pending", "等待/排队"],
-			["blocked", "阻塞/失联"],
-			["failed", "失败"],
-			["succeeded", "成功/复用"],
-		]) {
-			const opt = document.createElement("option");
-			opt.value = value;
-			opt.textContent = label;
-			if (value === statusFilter) opt.selected = true;
-			statusSelect.appendChild(opt);
-		}
-		statusLabelEl.appendChild(statusSelect);
-		const qLabel = el("label", null);
-		qLabel.appendChild(document.createTextNode("搜索"));
-		const qInput = document.createElement("input");
-		qInput.type = "search";
-		qInput.placeholder = "Task / Feature / run…";
-		qInput.setAttribute("aria-label", "搜索 Task");
-		qInput.value = routeFilters.q ?? "";
-		qLabel.appendChild(qInput);
-		statusSelect.addEventListener("change", () => {
-			const next = buildHashPath("/pool", {
-				status: statusSelect.value || undefined,
-				q: qInput.value.trim() || undefined,
-			});
-			navigate(next);
-		});
-		qInput.addEventListener("change", () => {
-			const next = buildHashPath("/pool", {
-				status: statusSelect.value || undefined,
-				q: qInput.value.trim() || undefined,
-			});
-			navigate(next);
-		});
-		filtersEl.appendChild(statusLabelEl);
-		filtersEl.appendChild(qLabel);
-		filtersEl.appendChild(
-			el("span", "muted layer-raw", `显示 ${tasks.length}/${allTasks.length}`),
+	// Filters (stable container in HTML)
+	if (filtersEl) {
+		reconcileKeyed(
+			filtersEl,
+			[{ key: "__filters__" }],
+			{
+				getKey: (item) => item.key,
+				create: () => {
+					const wrap = el("div", "pool-filters-inner");
+					const statusLabelEl = el("label", null);
+					statusLabelEl.appendChild(document.createTextNode("状态"));
+					const statusSelect = document.createElement("select");
+					statusSelect.setAttribute("aria-label", "按状态筛选 Task");
+					statusSelect.dataset.role = "status";
+					for (const [value, label] of [
+						["", "全部"],
+						["running", "运行中"],
+						["pending", "等待/排队"],
+						["blocked", "阻塞/失联"],
+						["failed", "失败"],
+						["succeeded", "成功/复用"],
+					]) {
+						const opt = document.createElement("option");
+						opt.value = value;
+						opt.textContent = label;
+						statusSelect.appendChild(opt);
+					}
+					statusLabelEl.appendChild(statusSelect);
+					const qLabel = el("label", null);
+					qLabel.appendChild(document.createTextNode("搜索"));
+					const qInput = document.createElement("input");
+					qInput.type = "search";
+					qInput.placeholder = "Task / Feature / run…";
+					qInput.setAttribute("aria-label", "搜索 Task");
+					qInput.dataset.role = "q";
+					qLabel.appendChild(qInput);
+					const count = el("span", "muted layer-raw");
+					count.dataset.role = "count";
+					statusSelect.addEventListener("change", () => {
+						navigate(
+							buildHashPath("/pool", {
+								status: statusSelect.value || undefined,
+								q: qInput.value.trim() || undefined,
+							}),
+						);
+					});
+					qInput.addEventListener("change", () => {
+						navigate(
+							buildHashPath("/pool", {
+								status: statusSelect.value || undefined,
+								q: qInput.value.trim() || undefined,
+							}),
+						);
+					});
+					wrap.appendChild(statusLabelEl);
+					wrap.appendChild(qLabel);
+					wrap.appendChild(count);
+					return wrap;
+				},
+				update: (wrap) => {
+					const statusSelect = wrap.querySelector('[data-role="status"]');
+					const qInput = wrap.querySelector('[data-role="q"]');
+					const count = wrap.querySelector('[data-role="count"]');
+					if (statusSelect && statusSelect.value !== statusFilter) {
+						statusSelect.value = statusFilter;
+					}
+					if (qInput && document.activeElement !== qInput) {
+						qInput.value = routeFilters.q ?? "";
+					}
+					if (count) {
+						count.textContent = `显示 ${filteredTasks.length}/${allTasks.length}`;
+					}
+				},
+			},
 		);
 	}
 
-	clearNode(kpiEl);
-	clearNode(listEl);
-	emptyEl.hidden = true;
-	clearNode(emptyEl);
-
 	if (projectionFailed) {
-		// Fault-first: do not render healthy-looking zero KPIs when projection is broken.
+		clearNode(kpiEl);
 		kpiEl.appendChild(
 			el(
 				"p",
@@ -231,120 +400,309 @@ export async function renderPool() {
 				"投影失败，状态分布与健康 KPI 不可用（避免将未知显示为健康 0）。",
 			),
 		);
-		if (eventsEl) {
-			await mountBoundedEventTimeline(
-				eventsEl,
-				"/api/events",
-				"最近事件",
-			);
-		}
+		clearNode(attentionEl);
+		clearNode(readyEl);
+		clearNode(listEl);
+		emptyEl.hidden = true;
+		await refreshPoolEvents();
 		return;
 	}
 
-	if (!poolPresent && tasks.length === 0) {
+	if (!poolPresent && allTasks.length === 0) {
+		clearNode(kpiEl);
+		clearNode(attentionEl);
+		clearNode(readyEl);
+		clearNode(listEl);
 		emptyEl.hidden = false;
 		mountViewState(
 			emptyEl,
 			"empty",
 			"当前仓库未使用 Task Pool（未发现 .harness/task-pool）。",
 		);
-		if (eventsEl) {
-			await mountBoundedEventTimeline(
-				eventsEl,
-				"/api/events",
-				"最近事件",
-			);
-		}
+		await refreshPoolEvents();
 		return;
 	}
 
-	if (poolPresent && tasks.length === 0) {
-		emptyEl.hidden = false;
+	emptyEl.hidden = !(poolPresent && allTasks.length === 0);
+	if (!emptyEl.hidden) {
 		mountViewState(emptyEl, "empty", "Task Pool 已存在，但当前没有 Task。");
 	}
 
-	const counts = poolStatusCounts(tasks);
-	const cards = el("div", "kpi-grid");
-	for (const [label, value] of [
-		["运行中", counts.running],
-		["等待/排队", counts.pending],
-		["阻塞/失联", counts.blocked],
-		["失败", counts.failed],
-		["成功/复用", counts.succeeded],
-		["其他", counts.other],
-		["合计", tasks.length],
-	]) {
-		const card = el("div", "kpi-card");
-		card.appendChild(el("div", "kpi-value", String(value)));
-		card.appendChild(el("div", "kpi-label", label));
-		cards.appendChild(card);
-	}
-	kpiEl.appendChild(el("h3", "section-heading", "状态分布"));
-	kpiEl.appendChild(cards);
-
-	if (tasks.length > 0) {
-		const rows = tasks.map((task) => {
-			const taskLink = document.createElement("a");
-			const taskPath = task.featureId
-				? `/feature/${encodeURIComponent(task.featureId)}/task/${encodeURIComponent(task.taskId)}`
-				: `/task/${encodeURIComponent(task.taskId)}`;
-			taskLink.href = `#${taskPath}`;
-			taskLink.textContent = task.taskId;
-			taskLink.addEventListener("click", (e) => {
-				e.preventDefault();
-				navigate(taskPath);
+	// L1 health — always from full pool, not filtered set
+	reconcileKeyed(kpiEl, [{ key: "__heading__" }], {
+		getKey: () => "__heading__",
+		scope: "heading",
+		create: () => el("h3", "section-heading", "池健康"),
+		update: () => {},
+	});
+	reconcileKeyed(kpiEl, [{ key: "__cards__" }], {
+		getKey: () => "__cards__",
+		scope: "cards",
+		create: () => el("div", "kpi-grid pool-health-grid"),
+		update: (cards) => {
+			const entries = [
+				["运行中", counts.running, counts.running > 0 ? "kpi-highlight" : ""],
+				[
+					"阻塞/失联",
+					counts.blocked,
+					counts.blocked > 0 ? "kpi-risk" : "",
+				],
+				["失败", counts.failed, counts.failed > 0 ? "kpi-danger" : ""],
+				[
+					"Ready",
+					readyItems.length,
+					readyItems.length > 0 ? "kpi-highlight" : "",
+				],
+				[
+					"无输出",
+					health.quietCount ?? 0,
+					(health.quietCount ?? 0) > 0 ? "kpi-muted" : "",
+				],
+				[
+					"即将超时",
+					health.timeoutRiskCount ?? 0,
+					(health.timeoutRiskCount ?? 0) > 0 ? "kpi-risk" : "",
+				],
+				["合计", allTasks.length, ""],
+			];
+			reconcileKeyed(cards, entries, {
+				getKey: ([label]) => label,
+				create: ([label, value, extra]) => {
+					const card = el("div", `kpi-card${extra ? ` ${extra}` : ""}`);
+					card.appendChild(el("div", "kpi-value", String(value)));
+					card.appendChild(el("div", "kpi-label", label));
+					return card;
+				},
+				update: (card, [label, value, extra]) => {
+					card.className = `kpi-card${extra ? ` ${extra}` : ""}`;
+					const valueEl = card.querySelector(".kpi-value");
+					const labelEl = card.querySelector(".kpi-label");
+					if (valueEl) valueEl.textContent = String(value);
+					if (labelEl) labelEl.textContent = label;
+				},
 			});
+		},
+	});
 
-			let runCell = "—";
-			if (task.workerRunId) {
-				const a = document.createElement("a");
-				a.href = `#/run/${encodeURIComponent(task.workerRunId)}`;
-				a.textContent = task.workerRunId;
-				a.addEventListener("click", (e) => {
-					e.preventDefault();
-					navigate(`#/run/${encodeURIComponent(task.workerRunId)}`);
+	// L2 attention
+	reconcileKeyed(attentionEl, [{ key: "__heading__" }], {
+		getKey: () => "__heading__",
+		scope: "heading",
+		create: () => el("h3", "section-heading", "需处理"),
+		update: () => {},
+	});
+	reconcileKeyed(
+		attentionEl,
+		attentionTasks.length === 0
+			? [{ key: "__empty__", text: "当前没有需要处理的 Task。" }]
+			: [{ key: "__list__" }],
+		{
+			getKey: (item) => item.key,
+			scope: "body",
+			create: (item) => {
+				if (item.key === "__empty__") return el("p", "empty", item.text);
+				return el("div", "pool-ops-list");
+			},
+			update: (node, item) => {
+				if (item.key === "__empty__") {
+					node.textContent = item.text;
+					return;
+				}
+				reconcileKeyed(node, attentionTasks, {
+					getKey: (task) => taskIdentityKey(task.featureId, task.taskId),
+					create: (task) => renderOpsCard(task, "attention"),
+					update: (card, task) => updateOpsCard(card, task),
 				});
-				runCell = a;
-			}
-
-			return {
-				cells: [
-					taskLink,
-					task.featureId ?? "—",
-					badge(task.status),
-					runCell,
-					formatAgo(task.updatedAt || task.finishedAt || task.startedAt),
-					task.failureCategory ?? "—",
-				],
-			};
-		});
-		listEl.appendChild(
-			buildTable(
-				["Task", "Feature", "状态", "最新 worker run", "更新时间", "失败分类"],
-				rows,
-			),
+			},
+		},
+	);
+
+	// L2 Ready — planner selected only
+	reconcileKeyed(readyEl, [{ key: "__heading__" }], {
+		getKey: () => "__heading__",
+		scope: "heading",
+		create: () => el("h3", "section-heading", "Ready（Planner）"),
+		update: () => {},
+	});
+	reconcileKeyed(
+		readyEl,
+		readyItems.length === 0
+			? [{ key: "__empty__", text: "当前没有 Planner 选中的 Ready Task。" }]
+			: [{ key: "__list__" }],
+		{
+			getKey: (item) => item.key,
+			scope: "body",
+			create: (item) => {
+				if (item.key === "__empty__") return el("p", "empty", item.text);
+				return el("div", "pool-ops-list");
+			},
+			update: (node, item) => {
+				if (item.key === "__empty__") {
+					node.textContent = item.text;
+					return;
+				}
+				const taskByKey = new Map(
+					allTasks.map((t) => [taskIdentityKey(t.featureId, t.taskId), t]),
+				);
+				reconcileKeyed(node, readyItems, {
+					getKey: (ready) => taskIdentityKey(ready.featureId, ready.taskId),
+					create: (ready) => {
+						const live = taskByKey.get(
+							taskIdentityKey(ready.featureId, ready.taskId),
+						);
+						return renderOpsCard(
+							{
+								...ready,
+								status: live?.status ?? "pending",
+								recommendedFollowUp: live?.recommendedFollowUp,
+							},
+							"ready",
+						);
+					},
+					update: (card, ready) => {
+						const live = taskByKey.get(
+							taskIdentityKey(ready.featureId, ready.taskId),
+						);
+						updateOpsCard(card, {
+							...ready,
+							status: live?.status ?? "pending",
+							recommendedFollowUp: live?.recommendedFollowUp,
+						});
+					},
+				});
+			},
+		},
+	);
+
+	// L3 inventory
+	reconcileKeyed(listEl, [{ key: "__heading__" }], {
+		getKey: () => "__heading__",
+		scope: "heading",
+		create: () => el("h3", "section-heading", "全部 Task"),
+		update: () => {},
+	});
+	if (filteredTasks.length === 0) {
+		reconcileKeyed(
+			listEl,
+			[{ key: "__empty__", text: "没有匹配筛选条件的 Task。" }],
+			{
+				getKey: (item) => item.key,
+				scope: "table",
+				create: (item) => el("p", "empty", item.text),
+				update: (node, item) => {
+					node.textContent = item.text;
+				},
+			},
 		);
+	} else {
+		reconcileKeyed(listEl, [{ key: "__table__" }], {
+			getKey: () => "__table__",
+			scope: "table",
+			create: () => el("div", "pool-table-wrap"),
+			update: (wrap) => {
+				const tbody = ensureTable(wrap, [
+					"Task",
+					"Feature",
+					"状态",
+					"存活",
+					"最新 run",
+					"Batch / DAG",
+					"跟进",
+					"更新",
+				]);
+				reconcileKeyed(tbody, filteredTasks, {
+					getKey: (task) => taskIdentityKey(task.featureId, task.taskId),
+					create: (task) => {
+						const tr = document.createElement("tr");
+						tr.classList.add("clickable");
+						tr.addEventListener("click", () => navigate(taskPath(task)));
+						for (let i = 0; i < 8; i++) tr.appendChild(document.createElement("td"));
+						return tr;
+					},
+					update: (tr, task) => {
+						syncCell(tr, 0, linkTo(taskPath(task), task.taskId));
+						syncCell(
+							tr,
+							1,
+							task.featureId
+								? objectRouteLink("feature", task.featureId, snapshot)
+								: "—",
+						);
+						syncCell(tr, 2, badge(task.status));
+						syncCell(
+							tr,
+							3,
+							task.liveness ? livenessBadge(task.liveness) : "—",
+						);
+						syncCell(
+							tr,
+							4,
+							task.workerRunId
+								? linkTo(
+										`/run/${encodeURIComponent(task.workerRunId)}`,
+										task.workerRunId,
+									)
+								: "—",
+						);
+						const links = el("span", "pool-ref-links");
+						if (task.batchRunId) {
+							links.appendChild(
+								linkTo(
+									`/batch/${encodeURIComponent(task.batchRunId)}`,
+									task.batchRunId,
+								),
+							);
+						}
+						if (task.dagRunId) {
+							if (links.childNodes.length) {
+								links.appendChild(document.createTextNode(" · "));
+							}
+							links.appendChild(
+								linkTo(
+									`/dag/${encodeURIComponent(task.dagRunId)}`,
+									task.dagRunId,
+								),
+							);
+						}
+						syncCell(
+							tr,
+							5,
+							links.childNodes.length ? links : "—",
+						);
+						syncCell(
+							tr,
+							6,
+							task.recommendedFollowUp || task.failureCategory || "—",
+						);
+						syncCell(
+							tr,
+							7,
+							formatAgo(task.updatedAt || task.finishedAt || task.startedAt),
+						);
+					},
+				});
+			},
+		});
 	}
 
-	if (eventsEl) {
-		await mountBoundedEventTimeline(
-			eventsEl,
-			"/api/events",
-			"最近事件",
-		);
+	if (options.reason === "manual" || options.reason === "auto") {
+		await refreshPoolEvents();
+	} else {
+		// Route entry: only load events if the operator already expanded them.
+		await refreshPoolEvents();
 	}
 }
 
+/** Enter pool view; auto-refresh stays off unless the user already enabled it. */
+export function startPoolView() {
+	stopPoolAutoPolling();
+	syncPoolToolbar();
+	void renderPool({ reason: "route" }).then(() => {
+		if (poolAutoRefreshEnabled()) startPoolAutoPolling();
+	});
+}
+
+/** @deprecated Use startPoolView — kept as alias for older call sites/tests. */
 export function startPoolPolling() {
-	if (uiState.poolTimer) clearTimeout(uiState.poolTimer);
-	const generation = ++uiState.pollingGeneration;
-	const poll = async () => {
-		await renderPool();
-		if (generation !== uiState.pollingGeneration) return;
-		uiState.poolTimer = setTimeout(() => {
-			uiState.poolTimer = null;
-			void poll();
-		}, dashboardPollDelay());
-	};
-	void poll();
+	startPoolView();
 }