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

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

@@ -16,7 +16,7 @@ import {
 	DAG_EFFECTIVE_STATUS_LABELS,
 	STATUS_LABELS,
 } from "../constants.js";
-import { clearNode, el, metaGrid, buildTable } from "../dom.js";
+import { el, reconcileKeyed, syncCompatibleNode } from "../dom.js";
 import {
 	badge,
 	badgeClass,
@@ -68,6 +68,15 @@ import { showView, setBreadcrumb, updateHeaderRefresh } from "../shell-chrome.js
 import { kpiCard, renderRepoBanner, renderProjectionFault, failuresInboxLink, artifactLink } from "../kpi.js";
 import { dagSortTime, renderActiveDagCard, dagProgress } from "../dag-helpers.js";
 
+// Cached KPI fieldsets so successful polls keep node identity instead of
+// rebuilding the whole KPI block each cycle (REQ-OBS-POLL-002). Reset to null
+// when a projection error replaces the block with a degraded/fault node.
+let kpiWorkerGroup = null;
+let kpiDagGroup = null;
+// The loading placeholder mounted before the first successful snapshot. It is
+// removed once on first success so subsequent polls never see it again.
+let dashboardLoadingNode = null;
+
 export async function renderDashboard(scrollTo) {
 	showView("dashboard");
 	setBreadcrumb([{ label: UI_TEXT.dashboard }]);
@@ -80,7 +89,11 @@ export async function renderDashboard(scrollTo) {
 	const batchesEl = document.getElementById("dashboard-batches");
 	const repoEl = document.getElementById("dashboard-repo");
 	const host = kpiEl || featureEl || activeEl;
-	if (host) mountViewState(host, "loading", "加载看板…");
+	// Loading only mounts before the first successful snapshot. Subsequent
+	// successful polls reuse the stable DOM and never flash the loading state.
+	if (host && !uiState.lastSnapshot) {
+		dashboardLoadingNode = mountViewState(host, "loading", "加载看板…");
+	}
 
 	const snapshot = await fetchJson("/api/snapshot");
 	if (!snapshot) {
@@ -89,6 +102,10 @@ export async function renderDashboard(scrollTo) {
 	}
 	uiState.lastSnapshot = snapshot;
 	updateHeaderRefresh(snapshot.generatedAt);
+	if (dashboardLoadingNode?.parentNode) {
+		dashboardLoadingNode.parentNode.removeChild(dashboardLoadingNode);
+	}
+	dashboardLoadingNode = null;
 
 	const dagRuns = snapshot.dagRuns ?? [];
 	const activeDags = dagRuns.filter(isDagRunActive);
@@ -100,32 +117,66 @@ export async function renderDashboard(scrollTo) {
 
 	const features = dashboardVisibleFeatures(snapshot.features);
 	featureEl.hidden = features.length === 0;
-	clearNode(featureEl);
 	if (features.length > 0) {
-		featureEl.appendChild(el("h3", "section-heading", "Feature 决策"));
-		featureEl.appendChild(
-			buildTable(
-				["Feature", "状态", "下一步（建议）", "原因", "required AC", "证据"],
-				features.map((feature) => {
-					const idCell = objectRouteLink(
-						"feature",
-						feature.featureId,
-						snapshot,
-					);
-					// Prefer planner-selected next task; never re-rank ready pool order here.
-					const selected = feature.planning?.selected?.[0];
-					const nextHint = selected
-						? `Next Task: ${selected.taskId} (${selected.priority})`
-						: feature.nextAction?.label ??
-							(feature.nextAction?.command
-								? truncateText(feature.nextAction.command, 48)
-								: "—");
-					return {
-						onClick: feature.featureId
-							? () =>
-									navigate(`/feature/${encodeURIComponent(feature.featureId)}`)
-							: undefined,
-						cells: [
+		reconcileKeyed(featureEl, [{ key: "__heading__" }], {
+			getKey: () => "__heading__",
+			scope: "heading",
+			create: () => el("h3", "section-heading", "Feature 决策"),
+			update: () => {},
+		});
+		reconcileKeyed(featureEl, [{ key: "__table__" }], {
+			getKey: () => "__table__",
+			scope: "table",
+			create: () => {
+				const table = document.createElement("table");
+				const thead = document.createElement("thead");
+				const headRow = document.createElement("tr");
+				for (const h of [
+					"Feature",
+					"状态",
+					"下一步（建议）",
+					"原因",
+					"required AC",
+					"证据",
+				]) {
+					const th = document.createElement("th");
+					th.textContent = h;
+					headRow.appendChild(th);
+				}
+				thead.appendChild(headRow);
+				table.appendChild(thead);
+				table.appendChild(document.createElement("tbody"));
+				return table;
+			},
+			update: (table) => {
+				let tbody = table.querySelector("tbody");
+				if (!tbody) {
+					tbody = document.createElement("tbody");
+					table.appendChild(tbody);
+				}
+				reconcileKeyed(tbody, features, {
+					getKey: (feature) => feature.featureId ?? "__nofeature__",
+					create: (feature) => {
+						const tr = document.createElement("tr");
+						tr.classList.add("clickable");
+						if (feature.featureId) {
+							tr.addEventListener("click", () =>
+								navigate(`/feature/${encodeURIComponent(feature.featureId)}`),
+							);
+						}
+						return tr;
+					},
+					update: (tr, feature) => {
+						const idCell = objectRouteLink("feature", feature.featureId, snapshot);
+						// Prefer planner-selected next task; never re-rank ready pool order here.
+						const selected = feature.planning?.selected?.[0];
+						const nextHint = selected
+							? `Next Task: ${selected.taskId} (${selected.priority})`
+							: feature.nextAction?.label ??
+								(feature.nextAction?.command
+									? truncateText(feature.nextAction.command, 48)
+									: "—");
+						const cells = [
 							idCell,
 							feature.statusLabel ?? feature.status,
 							nextHint,
@@ -139,21 +190,41 @@ export async function renderDashboard(scrollTo) {
 									feature.evidence?.morningReport ??
 									feature.evidence?.observeSnapshot,
 							),
-						],
-					};
-				}),
-			),
-		);
-	}
-	if (features.length > 0 && (snapshot.projectionWarnings ?? []).length > 0) {
-		featureEl.appendChild(
-			el("p", "empty", `投影警告：${snapshot.projectionWarnings.join("；")}`),
-		);
+						];
+						syncTableRow(tr, cells);
+					},
+				});
+			},
+		});
+	} else {
+		reconcileKeyed(featureEl, [], {
+			getKey: (item) => item.key,
+			scope: "table",
+			create: () => el("div"),
+		});
 	}
+	reconcileKeyed(
+		featureEl,
+		features.length > 0 && (snapshot.projectionWarnings ?? []).length > 0
+			? [
+					{
+						key: "__warning__",
+						text: `投影警告：${snapshot.projectionWarnings.join("；")}`,
+					},
+				]
+			: [],
+		{
+			getKey: (item) => item.key,
+			scope: "warning",
+			create: (item) => el("p", "empty", item.text),
+			update: (node, item) => {
+				node.textContent = item.text;
+			},
+		},
+	);
 
 	renderRepoBanner(repoEl, snapshot);
 
-	clearNode(kpiEl);
 	const dagHealth = snapshot.health?.dag;
 	const dagActiveRuns = dagHealth?.activeRuns ?? activeDags.length;
 	const dagRunningNodes =
@@ -191,242 +262,429 @@ export async function renderDashboard(scrollTo) {
 	const failuresCount = snapshot.health?.failuresCount ?? 0;
 
 	if (snapshot.projectionError) {
-		mountViewState(kpiEl, "degraded", "指标暂不可用：数据投影失败。", {
-			detail: snapshot.projectionError.message ?? null,
-		});
-		// keep legacy banner for non-color / structure parity
-		kpiEl.appendChild(renderProjectionFault(snapshot.projectionError));
-	} else {
-		const dagGroup = el("fieldset", "kpi-group");
-		dagGroup.appendChild(el("legend", "kpi-group-legend", "DAG 运行"));
-		const dagCards = el("div", "kpi-grid");
-		dagCards.appendChild(
-			kpiCard(
-				"活跃 DAG",
-				dagActiveRuns,
-				"kpi-highlight",
-				"当前处于运行、静默运行、远端状态未知或等待执行的 DAG 数量（来源：.harness/dag-runs 的有效状态）。",
-			),
-		);
-		dagCards.appendChild(
-			kpiCard(
-				"执行中节点",
-				dagRunningNodes,
-				"",
-				"活跃 DAG 中状态为 running 或 started、正在执行的节点数量；DAG 内执行单元统一称为节点。",
-			),
-		);
-		dagCards.appendChild(
-			kpiCard(
-				"等待节点",
-				dagPendingNodes,
-				"",
-				"活跃 DAG 中状态为 pending 或 queued、尚未开始执行的节点数量。",
-			),
-		);
-		dagCards.appendChild(
-			kpiCard(
-				"暂停 DAG",
-				dagPausedRuns,
-				dagPausedRuns > 0 ? "kpi-muted" : "",
-				"生命周期被暂停的 DAG 运行数量（来源：.harness/dag-runs 下的 lifecycle 目录）。",
-			),
-		);
-		dagCards.appendChild(
-			kpiCard(
-				"需处理 DAG",
-				dagAttentionRuns,
-				dagAttentionRuns > 0 ? "kpi-risk" : "",
-				"未完成且暂停、失联、中断、远端状态未知或状态不一致的 DAG 数量；同一个 DAG 只计一次。",
-			),
+		// Drop any cached KPI groups so a later recovery rebuilds them cleanly.
+		kpiWorkerGroup = null;
+		kpiDagGroup = null;
+		reconcileKeyed(
+			kpiEl,
+			[{ key: "__fault__", error: snapshot.projectionError }],
+			{
+				getKey: (item) => item.key,
+				scope: "kpi",
+				create: (item) => {
+					const node = renderViewState(
+						"degraded",
+						"指标暂不可用：数据投影失败。",
+						{ detail: item.error.message ?? null },
+					);
+					node.appendChild(renderProjectionFault(item.error));
+					return node;
+				},
+				update: (node, item) => {
+					const fresh = renderViewState(
+						"degraded",
+						"指标暂不可用：数据投影失败。",
+						{ detail: item.error.message ?? null },
+					);
+					fresh.appendChild(renderProjectionFault(item.error));
+					syncCompatibleNode(node, fresh);
+				},
+			},
 		);
-		dagGroup.appendChild(dagCards);
+	} else {
+		const workerGroup = kpiWorkerGroup ?? (kpiWorkerGroup = el("fieldset", "kpi-group"));
+		syncKpiGroup(workerGroup, "Worker 执行", [
+			{
+				label: "活跃 Worker Task",
+				value: snapshot.health?.activeTasks ?? 0,
+				extraClass: "",
+				helpText:
+					"当前运行或等待执行的 Worker Task Pool 任务数量（来源：.harness/task-pool 的状态、运行记录与事件；不含 .harness/tasks 下的 task.json）。",
+			},
+			{
+				label: "无输出",
+				value: quietCount,
+				extraClass: quietCount > 0 ? "kpi-muted" : "",
+				helpText: "心跳仍正常，但超过无输出判定时长仍没有新输出的 Worker Task 数量。",
+			},
+			{
+				label: "心跳失联",
+				value: staleCount,
+				extraClass: staleCount > 0 ? "kpi-risk" : "",
+				helpText: "超过心跳失联判定时长仍没有新心跳的 Worker Task 数量。",
+			},
+			{
+				label: "即将超时",
+				value: timeoutRiskCount,
+				extraClass: timeoutRiskCount > 0 ? "kpi-risk" : "",
+				helpText: "命令已执行时长超过 80% 超时的 Worker Task 数量。",
+			},
+			{
+				label: "失败",
+				value: failuresCount > 0 ? failuresInboxLink(failuresCount) : failuresCount,
+				extraClass: failuresCount > 0 ? "kpi-danger" : "",
+				helpText: "状态为 failed 的 Worker Task 数量。",
+			},
+		]);
 
-		const workerGroup = el("fieldset", "kpi-group");
-		workerGroup.appendChild(el("legend", "kpi-group-legend", "Worker 执行"));
-		const workerCards = el("div", "kpi-grid");
-		workerCards.appendChild(
-			kpiCard(
-				"活跃 Worker Task",
-				snapshot.health?.activeTasks ?? 0,
-				"",
-				"当前运行或等待执行的 Worker Task Pool 任务数量（来源：.harness/task-pool 的状态、运行记录与事件；不含 .harness/tasks 下的 task.json）。",
-			),
-		);
-		workerCards.appendChild(
-			kpiCard(
-				"无输出",
-				quietCount,
-				quietCount > 0 ? "kpi-muted" : "",
-				"心跳仍正常，但超过无输出判定时长仍没有新输出的 Worker Task 数量。",
-			),
-		);
-		workerCards.appendChild(
-			kpiCard(
-				"心跳失联",
-				staleCount,
-				staleCount > 0 ? "kpi-risk" : "",
-				"超过心跳失联判定时长仍没有新心跳的 Worker Task 数量。",
-			),
-		);
-		workerCards.appendChild(
-			kpiCard(
-				"即将超时",
-				timeoutRiskCount,
-				timeoutRiskCount > 0 ? "kpi-risk" : "",
-				"命令已执行时长超过 80% 超时的 Worker Task 数量。",
-			),
-		);
-		workerCards.appendChild(
-			kpiCard(
-				"失败",
-				failuresCount > 0 ? failuresInboxLink(failuresCount) : failuresCount,
-				failuresCount > 0 ? "kpi-danger" : "",
-				"状态为 failed 的 Worker Task 数量。",
-			),
+		const dagGroup = kpiDagGroup ?? (kpiDagGroup = el("fieldset", "kpi-group"));
+		syncKpiGroup(dagGroup, "DAG 运行", [
+			{
+				label: "活跃 DAG",
+				value: dagActiveRuns,
+				extraClass: "kpi-highlight",
+				helpText:
+					"当前处于运行、静默运行、远端状态未知或等待执行的 DAG 数量（来源：.harness/dag-runs 的有效状态）。",
+			},
+			{
+				label: "执行中节点",
+				value: dagRunningNodes,
+				extraClass: "",
+				helpText:
+					"活跃 DAG 中状态为 running 或 started、正在执行的节点数量；DAG 内执行单元统一称为节点。",
+			},
+			{
+				label: "等待节点",
+				value: dagPendingNodes,
+				extraClass: "",
+				helpText: "活跃 DAG 中状态为 pending 或 queued、尚未开始执行的节点数量。",
+			},
+			{
+				label: "暂停 DAG",
+				value: dagPausedRuns,
+				extraClass: dagPausedRuns > 0 ? "kpi-muted" : "",
+				helpText: "生命周期被暂停的 DAG 运行数量（来源：.harness/dag-runs 下的 lifecycle 目录）。",
+			},
+			{
+				label: "需处理 DAG",
+				value: dagAttentionRuns,
+				extraClass: dagAttentionRuns > 0 ? "kpi-risk" : "",
+				helpText:
+					"未完成且暂停、失联、中断、远端状态未知或状态不一致的 DAG 数量；同一个 DAG 只计一次。",
+			},
+		]);
+
+		reconcileKeyed(
+			kpiEl,
+			[
+				{ key: "worker-group", node: workerGroup },
+				{ key: "dag-group", node: dagGroup },
+			],
+			{
+				getKey: (item) => item.key,
+				scope: "kpi",
+				create: (item) => item.node,
+				update: () => {},
+			},
 		);
-		workerGroup.appendChild(workerCards);
-		kpiEl.appendChild(workerGroup);
-		kpiEl.appendChild(dagGroup);
+		if (workerGroup.parentNode !== kpiEl) kpiEl.appendChild(workerGroup);
+		if (dagGroup.parentNode !== kpiEl) kpiEl.appendChild(dagGroup);
 	}
 
 	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);
-	}
+	reconcileKeyed(activeEl, [{ key: "__heading__" }], {
+		getKey: () => "__heading__",
+		scope: "heading",
+		create: () => el("h3", "section-heading", UI_TEXT.activeDags),
+		update: () => {},
+	});
+	reconcileKeyed(
+		activeEl,
+		activeDags.length === 0
+			? [{ key: "__empty__", text: UI_TEXT.noActiveDags }]
+			: [{ key: "__list__" }],
+		{
+			getKey: (item) => item.key,
+			create: (item) => {
+				if (item.key === "__empty__") return el("p", "empty", item.text);
+				const list = el("div", "active-dag-list");
+				return list;
+			},
+			update: (list) => {
+				reconcileKeyed(
+					list,
+					activeDags
+						.slice()
+						.sort((a, b) => dagSortTime(b).localeCompare(dagSortTime(a))),
+					{
+						getKey: (dag) => dag.dagRunId,
+						create: (dag) => renderActiveDagCard(dag, nowMs),
+			update: (card, dag) =>
+				syncCompatibleNode(card, renderActiveDagCard(dag, nowMs)),
+					},
+				);
+			},
+		},
+	);
 
-	clearNode(riskEl);
 	const dagRiskCount = dagAttentionRuns;
 	const workerRiskCount = failuresCount + staleCount + timeoutRiskCount;
 	riskEl.classList.toggle(
 		"panel-risk-attention",
 		dagRiskCount > 0 || workerRiskCount > 0,
 	);
-	riskEl.appendChild(el("h3", "section-heading", "运行风险"));
-	if (dagRiskCount === 0 && workerRiskCount === 0) {
-		riskEl.appendChild(el("p", "risk-empty", "当前没有需要处理的异常。"));
-	} else {
-		const riskBlocks = el("div", "risk-blocks");
-		if (dagRiskCount > 0) {
-			const dagBlock = el("div", "risk-block risk-block-dag");
-			dagBlock.appendChild(el("div", "risk-block-label", "需处理 DAG"));
-			dagBlock.appendChild(el("div", "risk-total", String(dagRiskCount)));
-			dagBlock.appendChild(
-				el(
-					"p",
-					"risk-summary",
-					`去重运行数 ${dagAttentionRuns} · 中断 ${dagInterruptedRuns} · 失联 ${dagStaleRuns} · 状态不一致 ${dagInconsistentRuns} · 暂停 ${dagPausedRuns}`,
-				),
-			);
-			riskBlocks.appendChild(dagBlock);
-		}
-		if (workerRiskCount > 0) {
-			const workerBlock = el("div", "risk-block risk-block-worker");
-			workerBlock.appendChild(el("div", "risk-block-label", "Worker 风险"));
-			workerBlock.appendChild(el("div", "risk-total", String(workerRiskCount)));
-			workerBlock.appendChild(
-				el(
-					"p",
-					"risk-summary",
-					`失败 ${failuresCount} · 心跳失联 ${staleCount} · 即将超时 ${timeoutRiskCount}`,
-				),
-			);
-			const link = el("a", "risk-link", "查看异常 Task →");
-			link.href = "#/failures";
-			link.addEventListener("click", (event) => {
-				event.preventDefault();
-				navigate("/failures");
-			});
-			workerBlock.appendChild(link);
-			riskBlocks.appendChild(workerBlock);
-		}
-		riskEl.appendChild(riskBlocks);
-	}
+	reconcileKeyed(riskEl, [{ key: "__heading__" }], {
+		getKey: () => "__heading__",
+		scope: "heading",
+		create: () => el("h3", "section-heading", "运行风险"),
+		update: () => {},
+	});
+	reconcileKeyed(
+		riskEl,
+		dagRiskCount === 0 && workerRiskCount === 0
+			? [{ key: "__empty__", text: "当前没有需要处理的异常。" }]
+			: [{ key: "__blocks__", dagRiskCount, workerRiskCount, failuresCount, staleCount, timeoutRiskCount, dagAttentionRuns, dagInterruptedRuns, dagStaleRuns, dagInconsistentRuns, dagPausedRuns }],
+		{
+			getKey: (item) => item.key,
+			create: (item) => {
+				if (item.key === "__empty__") {
+					return el("p", "risk-empty", item.text);
+				}
+				return el("div", "risk-blocks");
+			},
+			update: (riskBlocks, item) => {
+				if (item.key === "__empty__") return;
+				reconcileKeyed(
+					riskBlocks,
+					item.dagRiskCount > 0
+						? [
+								{
+									key: "dag",
+									total: item.dagRiskCount,
+									summary: `去重运行数 ${item.dagAttentionRuns} · 中断 ${item.dagInterruptedRuns} · 失联 ${item.dagStaleRuns} · 状态不一致 ${item.dagInconsistentRuns} · 暂停 ${item.dagPausedRuns}`,
+								},
+							]
+						: [],
+					{
+						getKey: (block) => block.key,
+						scope: "dag",
+						create: (block) => {
+							const dagBlock = el("div", "risk-block risk-block-dag");
+							dagBlock.appendChild(el("div", "risk-block-label", "需处理 DAG"));
+							dagBlock.appendChild(el("div", "risk-total", String(block.total)));
+							dagBlock.appendChild(el("p", "risk-summary", block.summary));
+							return dagBlock;
+						},
+						update: (dagBlock, block) => {
+							const total = dagBlock.querySelector(".risk-total");
+							if (total) total.textContent = String(block.total);
+							const summary = dagBlock.querySelector(".risk-summary");
+							if (summary) summary.textContent = block.summary;
+						},
+					},
+				);
+				reconcileKeyed(
+					riskBlocks,
+					item.workerRiskCount > 0
+						? [
+								{
+									key: "worker",
+									total: item.workerRiskCount,
+									summary: `失败 ${item.failuresCount} · 心跳失联 ${item.staleCount} · 即将超时 ${item.timeoutRiskCount}`,
+								},
+							]
+						: [],
+					{
+						getKey: (block) => block.key,
+						scope: "worker",
+						create: (block) => {
+							const workerBlock = el("div", "risk-block risk-block-worker");
+							workerBlock.appendChild(el("div", "risk-block-label", "Worker 风险"));
+							workerBlock.appendChild(el("div", "risk-total", String(block.total)));
+							workerBlock.appendChild(el("p", "risk-summary", block.summary));
+							const link = el("a", "risk-link", "查看异常 Task →");
+							link.href = "#/failures";
+							link.addEventListener("click", (event) => {
+								event.preventDefault();
+								navigate("/failures");
+							});
+							workerBlock.appendChild(link);
+							return workerBlock;
+						},
+						update: (workerBlock, block) => {
+							const total = workerBlock.querySelector(".risk-total");
+							if (total) total.textContent = String(block.total);
+							const summary = workerBlock.querySelector(".risk-summary");
+							if (summary) summary.textContent = block.summary;
+						},
+					},
+				);
+			},
+		},
+	);
 
-	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 timeline = el("div", "dag-run-timeline");
-		for (const dag of recentDags) {
-			const progress = dagProgress(dag);
-			const item = el("a", "dag-run-timeline-item");
-			item.href = `#/dag/${encodeURIComponent(dag.dagRunId)}`;
-			item.title = dag.title || dag.dagRunId;
-			item.addEventListener("click", (event) => {
-				event.preventDefault();
-				navigate(`/dag/${encodeURIComponent(dag.dagRunId)}`);
-			});
-
-			const rail = el("span", "dag-run-timeline-rail");
-			rail.appendChild(
-				el(
-					"span",
-					`dag-run-timeline-dot status-${badgeClass(dag.effectiveStatus ?? dag.status)}`,
-				),
-			);
-			item.appendChild(rail);
+	reconcileKeyed(dagsEl, [{ key: "__heading__" }], {
+		getKey: () => "__heading__",
+		scope: "heading",
+		create: () => el("h3", "section-heading", UI_TEXT.recentDags),
+		update: () => {},
+	});
+	reconcileKeyed(
+		dagsEl,
+		recentDags.length === 0
+			? activeDags.length === 0
+				? [{ key: "__empty__", text: UI_TEXT.noRecentDags }]
+				: [{ key: "__empty__", text: "暂无历史 DAG 记录" }]
+			: [{ key: "__timeline__" }],
+		{
+			getKey: (item) => item.key,
+			create: (item) => {
+				if (item.key === "__empty__") return el("p", "empty", item.text);
+				return el("div", "dag-run-timeline");
+			},
+			update: (timeline) => {
+				reconcileKeyed(timeline, recentDags, {
+					getKey: (dag) => dag.dagRunId,
+					create: (dag) => buildDagTimelineItem(dag),
+					update: (item, dag) => syncDagTimelineItem(item, dag),
+				});
+			},
+		},
+	);
 
-			const content = el("span", "dag-run-timeline-content");
-			content.appendChild(
-				el("span", "dag-run-timeline-title", dag.title || dag.dagRunId),
-			);
-			content.appendChild(
-				el(
-					"span",
-					"dag-run-timeline-meta",
-					`${formatTs(dag.startedAt)} · ${progress.finished}/${progress.total} · ${formatDuration(dag.durationMs)}`,
-				),
-			);
-			item.appendChild(content);
+	reconcileKeyed(batchesEl, [{ key: "__heading__" }], {
+		getKey: () => "__heading__",
+		scope: "heading",
+		create: () => el("h3", "section-heading", UI_TEXT.batches),
+		update: () => {},
+	});
+	const batches = snapshot.batches ?? [];
+	reconcileKeyed(
+		batchesEl,
+		batches.length === 0 ? [{ key: "__empty__", text: UI_TEXT.noBatches }] : [{ key: "__table__" }],
+		{
+			getKey: (item) => item.key,
+			create: (item) => {
+				if (item.key === "__empty__") return el("p", "empty", item.text);
+				const table = document.createElement("table");
+				const thead = document.createElement("thead");
+				const headRow = document.createElement("tr");
+				for (const h of ["批次 ID", "功能", "状态", "开始时间", "摘要"]) {
+					const th = document.createElement("th");
+					th.textContent = h;
+					headRow.appendChild(th);
+				}
+				thead.appendChild(headRow);
+				table.appendChild(thead);
+				table.appendChild(document.createElement("tbody"));
+				return table;
+			},
+			update: (table) => {
+				let tbody = table.querySelector("tbody");
+				if (!tbody) {
+					tbody = document.createElement("tbody");
+					table.appendChild(tbody);
+				}
+				reconcileKeyed(tbody, batches, {
+					getKey: (batch) => batch.batchRunId,
+					create: (batch) => {
+						const tr = document.createElement("tr");
+						tr.classList.add("clickable");
+						tr.addEventListener("click", () =>
+							navigate(`/batch/${encodeURIComponent(batch.batchRunId)}`),
+						);
+						return tr;
+					},
+					update: (tr, batch) => {
+						const cells = [
+							batch.batchRunId,
+							batch.featureId ?? "—",
+							badge(batch.status),
+							formatTs(batch.startedAt),
+							summaryText(batch.summary),
+						];
+						syncTableRow(tr, cells);
+					},
+				});
+			},
+		},
+	);
 
-			const state = el("span", "dag-run-timeline-status");
-			state.appendChild(dagStatusBadge(dag.effectiveStatus ?? dag.status));
-			item.appendChild(state);
-			timeline.appendChild(item);
-		}
-		dagsEl.appendChild(timeline);
+	if (scrollTo === "dags") {
+		dagsEl.scrollIntoView({ behavior: "smooth" });
 	}
+}
 
-	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),
-		);
+function syncKpiGroup(group, legendText, cards) {
+	let legend = group.querySelector(".kpi-group-legend");
+	if (!legend) legend = el("legend", "kpi-group-legend", legendText);
+	legend.textContent = legendText;
+	let grid = group.querySelector(".kpi-grid");
+	if (!grid) grid = el("div", "kpi-grid");
+	reconcileKeyed(grid, cards, {
+		getKey: (card) => card.label,
+		create: (card) =>
+			kpiCard(card.label, card.value, card.extraClass, card.helpText),
+		update: (node, card) =>
+			syncCompatibleNode(
+				node,
+				kpiCard(card.label, card.value, card.extraClass, card.helpText),
+			),
+	});
+	if (legend.parentNode !== group) group.appendChild(legend);
+	if (grid.parentNode !== group) group.appendChild(grid);
+}
+
+function syncTableRow(row, cells) {
+	const fresh = document.createElement("tr");
+	for (const cell of cells) {
+		const td = document.createElement("td");
+		if (cell instanceof Node) td.appendChild(cell);
+		else td.textContent = cell ?? "—";
+		fresh.appendChild(td);
 	}
+	syncCompatibleNode(row, fresh);
+}
 
-	if (scrollTo === "dags") {
-		dagsEl.scrollIntoView({ behavior: "smooth" });
+function buildDagTimelineItem(dag) {
+	const progress = dagProgress(dag);
+	const item = el("a", "dag-run-timeline-item");
+	item.href = `#/dag/${encodeURIComponent(dag.dagRunId)}`;
+	item.title = dag.title || dag.dagRunId;
+	item.addEventListener("click", (event) => {
+		event.preventDefault();
+		navigate(`/dag/${encodeURIComponent(dag.dagRunId)}`);
+	});
+
+	const rail = el("span", "dag-run-timeline-rail");
+	rail.appendChild(
+		el(
+			"span",
+			`dag-run-timeline-dot status-${badgeClass(dag.effectiveStatus ?? dag.status)}`,
+		),
+	);
+	item.appendChild(rail);
+
+	const content = el("span", "dag-run-timeline-content");
+	content.appendChild(
+		el("span", "dag-run-timeline-title", dag.title || dag.dagRunId),
+	);
+	content.appendChild(
+		el(
+			"span",
+			"dag-run-timeline-meta",
+			`${formatTs(dag.startedAt)} · ${progress.finished}/${progress.total} · ${formatDuration(dag.durationMs)}`,
+		),
+	);
+	item.appendChild(content);
+
+	const state = el("span", "dag-run-timeline-status");
+	state.appendChild(dagStatusBadge(dag.effectiveStatus ?? dag.status));
+	item.appendChild(state);
+	return item;
+}
+
+function syncDagTimelineItem(item, dag) {
+	const progress = dagProgress(dag);
+	item.title = dag.title || dag.dagRunId;
+	const meta = item.querySelector(".dag-run-timeline-meta");
+	if (meta) {
+		meta.textContent = `${formatTs(dag.startedAt)} · ${progress.finished}/${progress.total} · ${formatDuration(dag.durationMs)}`;
 	}
+	const title = item.querySelector(".dag-run-timeline-title");
+	if (title) title.textContent = dag.title || dag.dagRunId;
 }
 
 export function startDashboardPolling(scrollTo) {
@@ -442,4 +700,3 @@ export function startDashboardPolling(scrollTo) {
 	};
 	void poll(scrollTo);
 }
-