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

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

@@ -3,9 +3,15 @@
 export const ACTIVE_DETAIL_POLL_MS = 2000;
 export const HIDDEN_POLL_MS = 30000;
 export const DASHBOARD_POLL_MS = 5000;
-export const DAG_INSPECTOR_DEFAULT_WIDTH = 440;
+/** Optional pool auto-refresh interval (default off; manual refresh preferred). */
+export const POOL_POLL_MS = 20000;
+/** Fallback when viewport is unavailable; open default is half viewport. */
+export const DAG_INSPECTOR_DEFAULT_WIDTH = 720;
+/** Open width as a fraction of the viewport (clamped to min/max). */
+export const DAG_INSPECTOR_DEFAULT_WIDTH_RATIO = 0.5;
 export const DAG_INSPECTOR_MIN_WIDTH = 360;
-export const DAG_INSPECTOR_MAX_WIDTH = 680;
+/** Absolute ceiling; effective max also respects viewport margin. */
+export const DAG_INSPECTOR_MAX_WIDTH = 1200;
 export const DAG_INSPECTOR_RIGHT_OFFSET = 24;
 export const DAG_INSPECTOR_VIEWPORT_MARGIN = 48;
 export const DAG_INSPECTOR_KEYBOARD_STEP = 24;
@@ -37,6 +43,8 @@ export const UI_TEXT = {
 	refreshStatus: "更新",
 	failureInbox: "异常 Task",
 	nearRealtime: "轮询刷新",
+	manualRefresh: "手动刷新",
+	autoRefresh: "自动刷新",
 };
 
 export const STATUS_LABELS = {

package/dist/worker/observe/static/dag-helpers.js

@@ -48,16 +48,45 @@ export function getActiveNodes(dag) {
 	return (dag.nodes ?? []).filter((n) => isNodeActive(n.status));
 }
 
-export function dagSortTime(dag) {
-	return dag.startedAt ?? dag.finishedAt ?? "";
-}
+	export function dagSortTime(dag) {
+		return dag.startedAt ?? dag.finishedAt ?? "";
+	}
+
+	/** Visual urgency for active DAG cards: attention > running > idle. */
+	export function dagCardUrgency(dag) {
+		const status = (dag?.effectiveStatus ?? "").toLowerCase();
+		const liveness = (dag?.liveness ?? "").toLowerCase();
+		const lifecycle = (dag?.lifecycle ?? "").toLowerCase();
+		if (
+			lifecycle === "paused" ||
+			dag?.stateConsistent === false ||
+			["interrupted", "remote-unknown"].includes(status) ||
+			["stale", "orphaned"].includes(liveness)
+		) {
+			return "attention";
+		}
+		if (isNodeActive(dag?.status) || getActiveNodes(dag).length > 0) {
+			return "running";
+		}
+		return "idle";
+	}
 
-export function renderActiveDagCard(dag, nowMs) {
-	const card = el("div", "active-dag-card");
-	if (isNodeActive(dag.status) || getActiveNodes(dag).length > 0) {
-		card.classList.add("active-dag-card-running");
+	export function compareActiveDagUrgency(a, b) {
+		const rank = { attention: 0, running: 1, idle: 2 };
+		const diff = (rank[dagCardUrgency(a)] ?? 2) - (rank[dagCardUrgency(b)] ?? 2);
+		if (diff !== 0) return diff;
+		return dagSortTime(b).localeCompare(dagSortTime(a));
 	}
-	const title = dag.title || dag.dagRunId;
+
+	export function renderActiveDagCard(dag, nowMs) {
+		const card = el("div", "active-dag-card");
+		const urgency = dagCardUrgency(dag);
+		if (urgency === "attention") {
+			card.classList.add("active-dag-card-attention");
+		} else if (urgency === "running") {
+			card.classList.add("active-dag-card-running");
+		}
+		const title = dag.title || dag.dagRunId;
 	const header = el("div", "active-dag-header");
 	header.appendChild(el("span", "active-dag-title", title));
 	header.appendChild(dagStatusBadge(dag.effectiveStatus ?? dag.status));

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

@@ -1,5 +1,164 @@
 /** DOM helpers (Observe UI R5). */
 
+/**
+ * Stable key → node maps, kept per (parent, scope) so reconcileKeyed never
+ * depends on dataset support. A WeakMap keyed by parent holds a map of
+ * scope → Map<key, node>. A stale parent (e.g. after view teardown) releases
+ * its bookkeeping automatically. The default scope "default" is used when a
+ * caller reconciles all keyed children of a parent in a single pass; multiple
+ * reconcilers that share one parent must pass distinct scope strings so they
+ * do not clobber each other's keys.
+ */
+const reconcileMaps = new WeakMap();
+
+/**
+ * Keyed DOM reconciliation: preserve node identity when a stable key recurs
+ * across renders; create a fresh node (with fresh closures) when the key is
+ * new; remove nodes whose key dropped out of the item set.
+ *
+ * Callers drive node construction via `create` and content sync via optional
+ * `update`. The parent is not bulk-cleared, so headings/headers placed outside
+ * this call survive, and scrolling/focus/pointer state on reused nodes is kept.
+ *
+ * @param {Node} parent
+ * @param {Array} items
+ * @param {{ getKey: (item: any, index: number) => string,
+ *           create: (item: any, index: number) => Node,
+ *           update?: (node: any, item: any, index: number) => void,
+ *           scope?: string }} opts
+ * @returns {Array<Node>} the (possibly reused) nodes in item order
+ */
+export function reconcileKeyed(parent, items, opts) {
+	const { getKey, create, update, scope = "default" } = opts;
+	let scopes = reconcileMaps.get(parent);
+	if (!scopes) {
+		scopes = new Map();
+		reconcileMaps.set(parent, scopes);
+	}
+	let map = scopes.get(scope);
+	if (!map) {
+		map = new Map();
+		scopes.set(scope, map);
+	}
+
+	const nextKeys = new Set();
+	const result = [];
+	for (let i = 0; i < items.length; i++) {
+		const item = items[i];
+		const key = String(getKey(item, i));
+		nextKeys.add(key);
+		let node = map.get(key);
+		if (node) {
+			if (update) update(node, item, i);
+		} else {
+			node = create(item, i);
+			map.set(key, node);
+			// Sync freshly created nodes so callers can split structure (create) from
+			// content (update) and still populate the first paint.
+			if (update) update(node, item, i);
+		}
+		result.push(node);
+	}
+
+	// Remove nodes whose key is no longer present in THIS scope.
+	for (const [key, node] of map) {
+		if (!nextKeys.has(key)) {
+			parent.removeChild(node);
+			map.delete(key);
+		}
+	}
+
+	const resultSet = new Set(result);
+	const currentOrder = childNodesOf(parent).filter((node) => resultSet.has(node));
+	const orderChanged =
+		currentOrder.length !== result.length ||
+		currentOrder.some((node, index) => node !== result[index]);
+	if (orderChanged) {
+		for (const node of result) parent.appendChild(node);
+	}
+
+	return result;
+}
+
+function childNodesOf(node) {
+	return Array.from(node.childNodes ?? node.children ?? []);
+}
+
+function nodeKind(node) {
+	if (node.nodeType === 3) return "#text";
+	return node.nodeName ?? node.tagName ?? "";
+}
+
+function syncElementAttributes(current, next) {
+	if (current.getAttributeNames && next.getAttributeNames) {
+		const nextNames = new Set(next.getAttributeNames());
+		for (const name of current.getAttributeNames()) {
+			if (!nextNames.has(name)) current.removeAttribute(name);
+		}
+		for (const name of nextNames) {
+			current.setAttribute(name, next.getAttribute(name));
+		}
+	} else if (current.attrs && next.attrs) {
+		for (const name of Object.keys(current.attrs)) {
+			if (!(name in next.attrs)) delete current.attrs[name];
+		}
+		for (const [name, value] of Object.entries(next.attrs)) {
+			current.setAttribute(name, value);
+		}
+	}
+
+	for (const prop of [
+		"className",
+		"href",
+		"title",
+		"target",
+		"type",
+		"value",
+		"hidden",
+		"tabIndex",
+	]) {
+		if (prop in next) current[prop] = next[prop];
+	}
+}
+
+/**
+ * Recursively sync a structurally compatible node without replacing compatible
+ * descendants. Existing event listeners and focusable node identity survive;
+ * incompatible tag/node kinds are reported to the caller for replacement.
+ */
+export function syncCompatibleNode(current, next) {
+	if (!current || !next || nodeKind(current) !== nodeKind(next)) return false;
+	if (current.nodeType === 3 || nodeKind(current) === "#TEXT") {
+		current.textContent = next.textContent;
+		return true;
+	}
+
+	syncElementAttributes(current, next);
+	const currentChildren = childNodesOf(current);
+	const nextChildren = childNodesOf(next);
+	if (nextChildren.length === 0) {
+		current.textContent = next.textContent;
+		return true;
+	}
+
+	for (let index = 0; index < Math.max(currentChildren.length, nextChildren.length); index++) {
+		const currentChild = currentChildren[index];
+		const nextChild = nextChildren[index];
+		if (!nextChild && currentChild) {
+			current.removeChild(currentChild);
+			continue;
+		}
+		if (nextChild && !currentChild) {
+			current.appendChild(nextChild);
+			continue;
+		}
+		if (!syncCompatibleNode(currentChild, nextChild)) {
+			current.replaceChild(nextChild, currentChild);
+		}
+	}
+	return true;
+}
+
 export function clearNode(node) {
 	while (node.firstChild) node.removeChild(node.firstChild);
 }

package/dist/worker/observe/static/format-pool.d.ts

@@ -0,0 +1,71 @@
+export type PoolTaskLike = {
+	taskId?: string;
+	featureId?: string;
+	status?: string;
+	liveness?: string;
+	updatedAt?: string;
+	finishedAt?: string;
+	startedAt?: string;
+	title?: string;
+	priority?: string;
+	type?: string;
+	reason?: string;
+	recommendedFollowUp?: string;
+	failureCategory?: string;
+	[key: string]: unknown;
+};
+
+export type PoolStatusCounts = {
+	running: number;
+	pending: number;
+	blocked: number;
+	failed: number;
+	succeeded: number;
+	other: number;
+};
+
+export type PlannerReadyItem = {
+	featureId: string;
+	taskId: string;
+	title?: string;
+	priority?: string;
+	type?: string;
+	reason: string;
+};
+
+export type FeaturePlanningLike = {
+	featureId?: string;
+	planning?: {
+		selected?: Array<{
+			featureId?: string;
+			taskId?: string;
+			title?: string;
+			priority?: string;
+			type?: string;
+			reason?: string;
+		}>;
+	};
+};
+
+export function sortPoolTasks(tasks: PoolTaskLike[] | null | undefined): PoolTaskLike[];
+export function matchesPoolStatusFilter(
+	taskStatus: string | null | undefined,
+	filter: string | null | undefined,
+): boolean;
+export function poolStatusCounts(
+	tasks: Array<{ status?: string }> | null | undefined,
+): PoolStatusCounts;
+export function isPoolAttentionTask(
+	task: PoolTaskLike | null | undefined,
+): boolean;
+export function attentionRank(task: PoolTaskLike | null | undefined): number;
+export function sortAttentionTasks(
+	tasks: PoolTaskLike[] | null | undefined,
+): PoolTaskLike[];
+export function collectPlannerReadyTasks(
+	features: FeaturePlanningLike[] | null | undefined,
+): PlannerReadyItem[];
+export function taskIdentityKey(
+	featureId: string | null | undefined,
+	taskId: string | null | undefined,
+): string;

package/dist/worker/observe/static/format-pool.js

@@ -65,3 +65,70 @@ export function poolStatusCounts(tasks) {
 	}
 	return counts;
 }
+
+/** Tasks that need operator attention on the pool ops surface. */
+export function isPoolAttentionTask(task) {
+	const st = (task?.status ?? "").toLowerCase();
+	const live = (task?.liveness ?? "").toLowerCase();
+	if (["failed", "error", "blocked", "stale"].includes(st)) return true;
+	if (["stale", "orphaned", "timeout-risk"].includes(live)) return true;
+	return false;
+}
+
+export function attentionRank(task) {
+	const st = (task?.status ?? "").toLowerCase();
+	const live = (task?.liveness ?? "").toLowerCase();
+	if (st === "failed" || st === "error") return 0;
+	if (live === "timeout-risk") return 1;
+	if (st === "stale" || live === "stale" || live === "orphaned") return 2;
+	if (st === "blocked") return 3;
+	return 9;
+}
+
+export function sortAttentionTasks(tasks) {
+	const list = (tasks ?? []).filter(isPoolAttentionTask);
+	list.sort((a, b) => {
+		const diff = attentionRank(a) - attentionRank(b);
+		if (diff !== 0) return diff;
+		const ta = a.updatedAt || a.finishedAt || a.startedAt || "";
+		const tb = b.updatedAt || b.finishedAt || b.startedAt || "";
+		return tb.localeCompare(ta);
+	});
+	return list;
+}
+
+/**
+ * Collect Ready Planner `selected` across features.
+ * Preserves snapshot feature order and each feature's planner-selected order.
+ * Does not re-rank Ready tasks on the client.
+ */
+export function collectPlannerReadyTasks(features) {
+	const out = [];
+	const seen = new Set();
+	for (const feature of features ?? []) {
+		const featureId = feature?.featureId;
+		const selected = feature?.planning?.selected ?? [];
+		for (const item of selected) {
+			const taskId = item?.taskId;
+			if (!taskId) continue;
+			const fid = item.featureId ?? featureId;
+			if (!fid) continue;
+			const key = `${fid}\0${taskId}`;
+			if (seen.has(key)) continue;
+			seen.add(key);
+			out.push({
+				featureId: fid,
+				taskId,
+				title: item.title,
+				priority: item.priority,
+				type: item.type,
+				reason: item.reason ?? "dependencies-satisfied",
+			});
+		}
+	}
+	return out;
+}
+
+export function taskIdentityKey(featureId, taskId) {
+	return `${featureId ?? ""}\0${taskId ?? ""}`;
+}

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

@@ -16,7 +16,22 @@ export function parseMarkdownBlocks(markdown) {
 	let code = null;
 
 	const flushParagraph = () => {
-		const text = paragraph.join(" ").trim();
+		if (paragraph.length === 0) return;
+		// Preserve Markdown hard breaks (trailing "  " or "\") as \n segments.
+		// Soft-wrapped lines still join with a space.
+		let text = "";
+		let prevHardBreak = false;
+		for (let i = 0; i < paragraph.length; i += 1) {
+			const raw = paragraph[i] ?? "";
+			const hardBreak = / {2}$/.test(raw) || /\\$/.test(raw);
+			const cleaned = raw.replace(/(?: {2}|\\)$/, "").trim();
+			if (!cleaned && !hardBreak) continue;
+			if (i === 0 || text === "") text = cleaned;
+			else if (prevHardBreak) text += `\n${cleaned}`;
+			else text += ` ${cleaned}`;
+			prevHardBreak = hardBreak;
+		}
+		text = text.trim();
 		if (text) blocks.push({ type: "paragraph", text });
 		paragraph = [];
 	};
@@ -114,7 +129,8 @@ export function parseMarkdownBlocks(markdown) {
 			continue;
 		}
 		flushList();
-		paragraph.push(line.trim());
+		// Keep trailing hard-break markers; trim only leading indent.
+		paragraph.push(line.replace(/^\s+/, ""));
 	}
 	if (code)
 		blocks.push({
@@ -290,3 +306,12 @@ export function repoBaseName(repoRoot) {
 	return parts[parts.length - 1] || trimmed || "未绑定仓库";
 }
 
+/** Compact path for header display; full path stays in title/tooltip. */
+export function formatRepoPathDisplay(repoRoot) {
+	if (!repoRoot) return "路径未知";
+	return String(repoRoot)
+		.replace(/\\/g, "/")
+		.replace(/^\/Users\/[^/]+/, "~")
+		.replace(/^\/home\/[^/]+/, "~");
+}
+

package/dist/worker/observe/static/index.html

@@ -51,21 +51,17 @@
           id="view-dashboard"
           class="view view-dashboard"
         >
-          <div class="view-heading">
-            <p class="view-kicker">OBSERVE</p>
-            <h2>运行总览</h2>
-            <p>聚焦正在推进的 DAG、需要处理的风险与近期运行记录。</p>
-          </div>
-          <div
-            id="dashboard-repo"
-            class="repo-banner"
-            aria-label="当前仓库"
-          ></div>
-          <section
-            id="dashboard-features"
-            class="panel panel-features"
-            aria-label="Feature 决策"
-          ></section>
+          <header class="page-header dashboard-page-header">
+            <div class="view-heading page-header-heading">
+              <p class="view-kicker">OBSERVE</p>
+              <h2>运行总览</h2>
+            </div>
+            <div
+              id="dashboard-repo"
+              class="repo-banner repo-banner-inline"
+              aria-label="当前仓库"
+            ></div>
+          </header>
           <section
             id="dashboard-kpi"
             class="panel panel-kpi"
@@ -78,10 +74,15 @@
             ></section>
             <aside
               id="dashboard-risk"
-              class="panel panel-risk"
+              class="panel panel-primary panel-risk"
               aria-label="运行风险"
             ></aside>
           </div>
+          <section
+            id="dashboard-features"
+            class="panel panel-features"
+            aria-label="Feature 决策"
+          ></section>
           <div class="dashboard-secondary">
             <section id="dashboard-dags" class="panel"></section>
             <section id="dashboard-batches" class="panel"></section>
@@ -189,38 +190,79 @@
           <section id="failures-list" class="panel panel-table"></section>
         </section>
 
-        <section data-view="pool" id="view-pool" class="view" hidden>
-          <div class="view-heading">
-            <p class="view-kicker">TASK POOL</p>
-            <h2>资源池总览</h2>
-            <p>
-              盘点当前 Worker Task 状态分布与最新运行，无需翻查
-              .harness/task-pool/。
-            </p>
-          </div>
+        <section data-view="pool" id="view-pool" class="view view-pool" hidden>
+          <header class="page-header pool-page-header">
+            <div class="view-heading page-header-heading">
+              <p class="view-kicker">TASK POOL</p>
+              <h2>资源池总览</h2>
+            </div>
+            <div id="pool-toolbar" class="pool-toolbar" aria-label="刷新控制">
+              <div class="pool-toolbar-actions">
+                <button
+                  type="button"
+                  id="pool-refresh-btn"
+                  class="pool-refresh-btn"
+                >
+                  刷新
+                </button>
+                <label class="pool-auto-refresh-label">
+                  <input type="checkbox" id="pool-auto-refresh" />
+                  自动刷新
+                </label>
+                <span id="pool-refresh-status" class="muted"></span>
+              </div>
+              <span
+                id="pool-updated-at"
+                class="muted pool-updated-at"
+                aria-live="polite"
+              ></span>
+            </div>
+          </header>
           <section
             id="pool-fault"
-            class="panel"
+            class="panel panel-meta"
             aria-label="投影告警"
+            hidden
           ></section>
           <section
             id="pool-kpi"
             class="panel panel-kpi"
-            aria-label="状态分布"
+            aria-label="池健康"
           ></section>
+          <div class="pool-workspace">
+            <section
+              id="pool-attention"
+              class="panel panel-primary"
+              aria-label="需处理"
+            ></section>
+            <section
+              id="pool-ready"
+              class="panel panel-primary"
+              aria-label="Ready"
+            ></section>
+          </div>
           <div id="pool-empty" class="panel empty-state" hidden></div>
+          <div
+            id="pool-filters"
+            class="pool-filters"
+            aria-label="清单筛选"
+          ></div>
           <section
             id="pool-tasks"
             class="panel panel-table"
-            aria-label="当前 Task 列表"
-          ></section>
-          <section
-            id="pool-events"
-            class="panel panel-timeline"
-            aria-label="最近事件"
+            aria-label="全部 Task"
           ></section>
+          <details id="pool-events-details" class="pool-events-details">
+            <summary>最近事件（可选，默认折叠）</summary>
+            <section
+              id="pool-events"
+              class="panel panel-timeline"
+              aria-label="最近事件"
+            ></section>
+          </details>
           <p class="panel muted advisory-note" id="pool-advisory">
-            数据为本地 derived/advisory 投影，仅供运营参考，非权威写路径。
+            数据为本地 derived/advisory 投影，仅供运营参考，非权威写路径。Ready
+            列表与 Ready Planner 同源，前端不重排。
           </p>
         </section>
 

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

@@ -1,12 +1,12 @@
 /** KPI cards, repo banner, projection fault, artifact/inbox links. */
 import { UI_TEXT } from "./constants.js";
 import { clearNode, el } from "./dom.js";
-import { repoBaseName } from "./format.js";
+import { formatRepoPathDisplay, repoBaseName } from "./format.js";
 import { navigate } from "./router.js";
 
 export function failuresInboxLink(count) {
-	const wrap = el("span");
-	wrap.appendChild(document.createTextNode(`${count} `));
+	const wrap = el("span", "kpi-value-with-link");
+	wrap.appendChild(el("span", "kpi-value-num", String(count)));
 	const a = el("a", "inbox-link", `${UI_TEXT.failureInbox} →`);
 	a.href = "#/failures";
 	a.addEventListener("click", (e) => {
@@ -59,13 +59,19 @@ export function renderRepoBanner(repoEl, snapshot) {
 	if (!repoEl) return;
 	clearNode(repoEl);
 	const repoRoot = snapshot.repoRoot ?? "";
+	const iconWrap = el("span", "repo-banner-icon");
 	const icon = el("i", "ri-git-repository-line");
 	icon.setAttribute("aria-hidden", "true");
-	repoEl.appendChild(icon);
+	iconWrap.appendChild(icon);
+	repoEl.appendChild(iconWrap);
 	const text = el("div", "repo-banner-text");
 	text.appendChild(el("span", "repo-banner-name", repoBaseName(repoRoot)));
-	const pathLine = el("span", "repo-banner-path", repoRoot || "路径未知");
-	pathLine.title = repoRoot || "";
+	const pathLine = el(
+		"span",
+		"repo-banner-path",
+		formatRepoPathDisplay(repoRoot),
+	);
+	pathLine.title = repoRoot || "路径未知";
 	text.appendChild(pathLine);
 	repoEl.appendChild(text);
 }