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

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

@@ -0,0 +1,708 @@
+/** 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,
+	formatAgo,
+	formatTs,
+	livenessBadge,
+	truncateText,
+} from "../format.js";
+import { parseRoute, navigate, buildHashPath } from "../router.js";
+import { fetchJson } from "../api.js";
+import { objectRouteLink } from "../relations.js";
+import {
+	isPageVisible,
+	dashboardPollDelay,
+	mountViewState,
+	renderViewState,
+} from "../state.js";
+import { uiState } from "../state.js";
+import {
+	sortPoolTasks,
+	matchesPoolStatusFilter,
+	poolStatusCounts,
+	sortAttentionTasks,
+	collectPlannerReadyTasks,
+	taskIdentityKey,
+} from "../format-pool.js";
+import { showView, setBreadcrumb, updateHeaderRefresh } from "../shell-chrome.js";
+import { renderProjectionFault } from "../kpi.js";
+import { mountBoundedEventTimeline } from "./timeline.js";
+
+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 filtersEl = document.getElementById("pool-filters");
+	if (!faultEl || !kpiEl || !emptyEl || !listEl || !attentionEl || !readyEl) {
+		return;
+	}
+
+	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) {
+		faultEl.hidden = false;
+		faultEl.classList.add("pool-fault-active");
+		mountViewState(faultEl, "error", "无法加载 snapshot。");
+		if (updatedAtEl) updatedAtEl.textContent = "";
+		return;
+	}
+	uiState.lastSnapshot = snapshot;
+	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) {
+		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", "投影警告"));
+		body.appendChild(
+			el(
+				"p",
+				"projection-fault-message",
+				snapshot.projectionWarnings.join("；"),
+			),
+		);
+		warn.appendChild(body);
+		faultEl.appendChild(warn);
+	}
+	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 filteredTasks = allTasks.filter((task) => {
+		if (statusFilter && !matchesPoolStatusFilter(task.status, statusFilter)) {
+			return false;
+		}
+		if (qFilter) {
+			const hay =
+				`${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 ?? {};
+
+	// 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}`;
+					}
+				},
+			},
+		);
+	}
+
+	if (projectionFailed) {
+		clearNode(kpiEl);
+		kpiEl.appendChild(
+			el(
+				"p",
+				"empty",
+				"投影失败，状态分布与健康 KPI 不可用（避免将未知显示为健康 0）。",
+			),
+		);
+		clearNode(attentionEl);
+		clearNode(readyEl);
+		clearNode(listEl);
+		emptyEl.hidden = true;
+		await refreshPoolEvents();
+		return;
+	}
+
+	if (!poolPresent && allTasks.length === 0) {
+		clearNode(kpiEl);
+		clearNode(attentionEl);
+		clearNode(readyEl);
+		clearNode(listEl);
+		emptyEl.hidden = false;
+		mountViewState(
+			emptyEl,
+			"empty",
+			"当前仓库未使用 Task Pool（未发现 .harness/task-pool）。",
+		);
+		await refreshPoolEvents();
+		return;
+	}
+
+	emptyEl.hidden = !(poolPresent && allTasks.length === 0);
+	if (!emptyEl.hidden) {
+		mountViewState(emptyEl, "empty", "Task Pool 已存在，但当前没有 Task。");
+	}
+
+	// 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;
+				},
+			});
+		},
+	});
+
+	// 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),
+				});
+			},
+		},
+	);
+
+	// 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 (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() {
+	startPoolView();
+}