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

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

@@ -1,83 +1,83 @@
-const DEFAULTS = {
-	nodeWidth: 216,
-	nodeHeight: 92,
-	rankGap: 104,
-	nodeGap: 28,
-	padding: 32,
-};
-
-export function layoutDag(nodes = [], edges = [], ranks = [], options = {}) {
-	const config = { ...DEFAULTS, ...options };
-	const nodeIds = [...new Set(nodes.map((node) => node.nodeId).filter(Boolean))].sort();
-	if (nodeIds.length === 0) return { width: 320, height: 160, nodes: [], edges: [] };
-	const known = new Set(nodeIds);
-	const validEdges = edges
-		.filter((edge) => known.has(edge.from) && known.has(edge.to) && edge.from !== edge.to)
-		.sort((a, b) => a.from.localeCompare(b.from) || a.to.localeCompare(b.to));
-	const layers = normalizeLayers(nodeIds, validEdges, ranks);
-	const positioned = [];
-	for (let rank = 0; rank < layers.length; rank++) {
-		const ids = layers[rank];
-		for (let index = 0; index < ids.length; index++) {
-			positioned.push({
-				nodeId: ids[index], rank, index,
-				x: config.padding + rank * (config.nodeWidth + config.rankGap),
-				y: config.padding + index * (config.nodeHeight + config.nodeGap),
-				width: config.nodeWidth, height: config.nodeHeight,
-			});
-		}
-	}
-	const byId = new Map(positioned.map((node) => [node.nodeId, node]));
-	const routed = validEdges.map((edge) => {
-		const from = byId.get(edge.from);
-		const to = byId.get(edge.to);
-		const x1 = from.x + from.width;
-		const y1 = from.y + from.height / 2;
-		const x2 = to.x;
-		const y2 = to.y + to.height / 2;
-		const bend = Math.max(36, (x2 - x1) / 2);
-		return { ...edge, path: `M ${x1} ${y1} C ${x1 + bend} ${y1}, ${x2 - bend} ${y2}, ${x2} ${y2}` };
-	});
-	const maxRows = Math.max(...layers.map((layer) => layer.length), 1);
-	return {
-		width: config.padding * 2 + layers.length * config.nodeWidth + (layers.length - 1) * config.rankGap,
-		height: config.padding * 2 + maxRows * config.nodeHeight + (maxRows - 1) * config.nodeGap,
-		nodes: positioned,
-		edges: routed,
-	};
-}
-
-function normalizeLayers(nodeIds, edges, ranks) {
-	const known = new Set(nodeIds);
-	const seen = new Set();
-	const layers = [];
-	if (Array.isArray(ranks)) {
-		for (const rank of ranks) {
-			if (!Array.isArray(rank)) continue;
-			const ids = [...new Set(rank.filter((id) => known.has(id) && !seen.has(id)))].sort();
-			ids.forEach((id) => seen.add(id));
-			if (ids.length > 0) layers.push(ids);
-		}
-	}
-	if (layers.length === 0 && edges.length > 0) {
-		const level = new Map(nodeIds.map((id) => [id, 0]));
-		for (let pass = 0; pass < nodeIds.length; pass++) {
-			let changed = false;
-			for (const edge of edges) {
-				const next = Math.min(nodeIds.length - 1, level.get(edge.from) + 1);
-				if (next > level.get(edge.to)) { level.set(edge.to, next); changed = true; }
-			}
-			if (!changed) break;
-		}
-		for (const id of nodeIds) {
-			const rank = level.get(id);
-			(layers[rank] ??= []).push(id);
-			seen.add(id);
-		}
-		for (const layer of layers) layer?.sort();
-	}
-	for (const id of nodeIds) {
-		if (!seen.has(id)) (layers[0] ??= []).push(id);
-	}
-	return layers.filter(Boolean);
-}
+const DEFAULTS = {
+	nodeWidth: 216,
+	nodeHeight: 92,
+	rankGap: 104,
+	nodeGap: 28,
+	padding: 32,
+};
+
+export function layoutDag(nodes = [], edges = [], ranks = [], options = {}) {
+	const config = { ...DEFAULTS, ...options };
+	const nodeIds = [...new Set(nodes.map((node) => node.nodeId).filter(Boolean))].sort();
+	if (nodeIds.length === 0) return { width: 320, height: 160, nodes: [], edges: [] };
+	const known = new Set(nodeIds);
+	const validEdges = edges
+		.filter((edge) => known.has(edge.from) && known.has(edge.to) && edge.from !== edge.to)
+		.sort((a, b) => a.from.localeCompare(b.from) || a.to.localeCompare(b.to));
+	const layers = normalizeLayers(nodeIds, validEdges, ranks);
+	const positioned = [];
+	for (let rank = 0; rank < layers.length; rank++) {
+		const ids = layers[rank];
+		for (let index = 0; index < ids.length; index++) {
+			positioned.push({
+				nodeId: ids[index], rank, index,
+				x: config.padding + rank * (config.nodeWidth + config.rankGap),
+				y: config.padding + index * (config.nodeHeight + config.nodeGap),
+				width: config.nodeWidth, height: config.nodeHeight,
+			});
+		}
+	}
+	const byId = new Map(positioned.map((node) => [node.nodeId, node]));
+	const routed = validEdges.map((edge) => {
+		const from = byId.get(edge.from);
+		const to = byId.get(edge.to);
+		const x1 = from.x + from.width;
+		const y1 = from.y + from.height / 2;
+		const x2 = to.x;
+		const y2 = to.y + to.height / 2;
+		const bend = Math.max(36, (x2 - x1) / 2);
+		return { ...edge, path: `M ${x1} ${y1} C ${x1 + bend} ${y1}, ${x2 - bend} ${y2}, ${x2} ${y2}` };
+	});
+	const maxRows = Math.max(...layers.map((layer) => layer.length), 1);
+	return {
+		width: config.padding * 2 + layers.length * config.nodeWidth + (layers.length - 1) * config.rankGap,
+		height: config.padding * 2 + maxRows * config.nodeHeight + (maxRows - 1) * config.nodeGap,
+		nodes: positioned,
+		edges: routed,
+	};
+}
+
+function normalizeLayers(nodeIds, edges, ranks) {
+	const known = new Set(nodeIds);
+	const seen = new Set();
+	const layers = [];
+	if (Array.isArray(ranks)) {
+		for (const rank of ranks) {
+			if (!Array.isArray(rank)) continue;
+			const ids = [...new Set(rank.filter((id) => known.has(id) && !seen.has(id)))].sort();
+			ids.forEach((id) => seen.add(id));
+			if (ids.length > 0) layers.push(ids);
+		}
+	}
+	if (layers.length === 0 && edges.length > 0) {
+		const level = new Map(nodeIds.map((id) => [id, 0]));
+		for (let pass = 0; pass < nodeIds.length; pass++) {
+			let changed = false;
+			for (const edge of edges) {
+				const next = Math.min(nodeIds.length - 1, level.get(edge.from) + 1);
+				if (next > level.get(edge.to)) { level.set(edge.to, next); changed = true; }
+			}
+			if (!changed) break;
+		}
+		for (const id of nodeIds) {
+			const rank = level.get(id);
+			(layers[rank] ??= []).push(id);
+			seen.add(id);
+		}
+		for (const layer of layers) layer?.sort();
+	}
+	for (const id of nodeIds) {
+		if (!seen.has(id)) (layers[0] ??= []).push(id);
+	}
+	return layers.filter(Boolean);
+}

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

@@ -1,72 +1,72 @@
-/** DAG / dashboard pure model helpers (Observe UI R5). */
-
-const TERMINAL_DAG_EFFECTIVE_STATUSES = new Set([
-	"finished",
-	"failed",
-	"superseded",
-	"abandoned",
-]);
-
-const TERMINAL_RUN_STATUSES = new Set([
-	"finished",
-	"completed",
-	"succeeded",
-	"failed",
-	"partial_failed",
-	"error",
-	"cancelled",
-]);
-
-export function dagMetaVisibility(dag) {
-	const terminal =
-		(dag?.lifecycle ?? "").toLowerCase() === "completed" ||
-		TERMINAL_DAG_EFFECTIVE_STATUSES.has(dag?.effectiveStatus);
-	return {
-		showExecutorStatus: !terminal,
-		showConsistencyWarning: dag?.stateConsistent === false,
-		showResume: dag?.recoveryEligibility?.canResume === true,
-		showReconcile: dag?.recoveryEligibility?.canReconcile === true,
-	};
-}
-
-function isNodeActive(status) {
-	if (!status) return false;
-	const s = status.toLowerCase();
-	return (
-		s === "running" || s === "started" || s === "pending" || s === "queued"
-	);
-}
-
-export function isDagRunActive(dag) {
-	if (
-		["running", "running-quiet", "remote-unknown", "pending"].includes(
-			dag.effectiveStatus,
-		)
-	)
-		return true;
-	if (dag.effectiveStatus && dag.effectiveStatus !== "unknown") return false;
-	const status = (dag.status ?? "").toLowerCase();
-	if ((dag.lifecycle ?? "").toLowerCase() === "paused") return false;
-	if (["orphaned", "stale"].includes((dag.liveness ?? "").toLowerCase()))
-		return false;
-	if (TERMINAL_RUN_STATUSES.has(status)) return false;
-	if (["running", "pending", "started"].includes(status)) return true;
-	return (dag.nodes ?? []).some((n) => isNodeActive(n.status));
-}
-
-const DASHBOARD_FEATURE_STATUSES = new Set(["running", "needs_action"]);
-
-export function dashboardVisibleFeatures(features) {
-	return (features ?? []).filter((feature) =>
-		DASHBOARD_FEATURE_STATUSES.has(feature?.status),
-	);
-}
-
-export function findDagForRun(snapshot, _workerRunId, task) {
-	const dagRuns = snapshot?.dagRuns ?? [];
-	if (task?.dagRunId) {
-		const byTask = dagRuns.find((d) => d.dagRunId === task.dagRunId);
-		if (byTask) return byTask;
-	}
-	return undefined;
-}
+/** DAG / dashboard pure model helpers (Observe UI R5). */
+
+const TERMINAL_DAG_EFFECTIVE_STATUSES = new Set([
+	"finished",
+	"failed",
+	"superseded",
+	"abandoned",
+]);
+
+const TERMINAL_RUN_STATUSES = new Set([
+	"finished",
+	"completed",
+	"succeeded",
+	"failed",
+	"partial_failed",
+	"error",
+	"cancelled",
+]);
+
+export function dagMetaVisibility(dag) {
+	const terminal =
+		(dag?.lifecycle ?? "").toLowerCase() === "completed" ||
+		TERMINAL_DAG_EFFECTIVE_STATUSES.has(dag?.effectiveStatus);
+	return {
+		showExecutorStatus: !terminal,
+		showConsistencyWarning: dag?.stateConsistent === false,
+		showResume: dag?.recoveryEligibility?.canResume === true,
+		showReconcile: dag?.recoveryEligibility?.canReconcile === true,
+	};
+}
+
+function isNodeActive(status) {
+	if (!status) return false;
+	const s = status.toLowerCase();
+	return (
+		s === "running" || s === "started" || s === "pending" || s === "queued"
+	);
+}
+
+export function isDagRunActive(dag) {
+	if (
+		["running", "running-quiet", "remote-unknown", "pending"].includes(
+			dag.effectiveStatus,
+		)
+	)
+		return true;
+	if (dag.effectiveStatus && dag.effectiveStatus !== "unknown") return false;
+	const status = (dag.status ?? "").toLowerCase();
+	if ((dag.lifecycle ?? "").toLowerCase() === "paused") return false;
+	if (["orphaned", "stale"].includes((dag.liveness ?? "").toLowerCase()))
+		return false;
+	if (TERMINAL_RUN_STATUSES.has(status)) return false;
+	if (["running", "pending", "started"].includes(status)) return true;
+	return (dag.nodes ?? []).some((n) => isNodeActive(n.status));
+}
+
+const DASHBOARD_FEATURE_STATUSES = new Set(["running", "needs_action"]);
+
+export function dashboardVisibleFeatures(features) {
+	return (features ?? []).filter((feature) =>
+		DASHBOARD_FEATURE_STATUSES.has(feature?.status),
+	);
+}
+
+export function findDagForRun(snapshot, _workerRunId, task) {
+	const dagRuns = snapshot?.dagRuns ?? [];
+	if (task?.dagRunId) {
+		const byTask = dagRuns.find((d) => d.dagRunId === task.dagRunId);
+		if (byTask) return byTask;
+	}
+	return undefined;
+}

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

@@ -1,61 +1,220 @@
-/** DOM helpers (Observe UI R5). */
+/** 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);
+		}
+	}
 
-export function clearNode(node) {
-	while (node.firstChild) node.removeChild(node.firstChild);
+	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;
 }
 
-export function el(tag, className, text) {
-	const node = document.createElement(tag);
-	if (className) node.className = className;
-	if (text !== undefined) node.textContent = text;
-	return node;
+function childNodesOf(node) {
+	return Array.from(node.childNodes ?? node.children ?? []);
 }
 
-export function metaGrid(entries) {
-	const dl = el("dl", "meta-grid");
-	for (const [label, value] of entries) {
-		const item = document.createElement("div");
-		item.className = "meta-item";
-		const dt = document.createElement("dt");
-		dt.textContent = label;
-		const dd = document.createElement("dd");
-		if (value instanceof Node) dd.appendChild(value);
-		else dd.textContent = value ?? "—";
-		item.appendChild(dt);
-		item.appendChild(dd);
-		dl.appendChild(item);
-	}
-	return dl;
+function nodeKind(node) {
+	if (node.nodeType === 3) return "#text";
+	return node.nodeName ?? node.tagName ?? "";
 }
 
-export function buildTable(headers, rows) {
-	const 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);
-
-	const tbody = document.createElement("tbody");
-	for (const row of rows) {
-		const tr = document.createElement("tr");
-		if (row.className) tr.className = row.className;
-		if (row.onClick) {
-			tr.classList.add("clickable");
-			tr.addEventListener("click", row.onClick);
-		}
-		for (const cell of row.cells) {
-			const td = document.createElement("td");
-			if (cell instanceof Node) td.appendChild(cell);
-			else td.textContent = cell ?? "—";
-			tr.appendChild(td);
-		}
-		tbody.appendChild(tr);
-	}
-	table.appendChild(tbody);
-	return table;
+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);
+}
+
+export function el(tag, className, text) {
+	const node = document.createElement(tag);
+	if (className) node.className = className;
+	if (text !== undefined) node.textContent = text;
+	return node;
+}
+
+export function metaGrid(entries) {
+	const dl = el("dl", "meta-grid");
+	for (const [label, value] of entries) {
+		const item = document.createElement("div");
+		item.className = "meta-item";
+		const dt = document.createElement("dt");
+		dt.textContent = label;
+		const dd = document.createElement("dd");
+		if (value instanceof Node) dd.appendChild(value);
+		else dd.textContent = value ?? "—";
+		item.appendChild(dt);
+		item.appendChild(dd);
+		dl.appendChild(item);
+	}
+	return dl;
+}
+
+export function buildTable(headers, rows) {
+	const 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);
+
+	const tbody = document.createElement("tbody");
+	for (const row of rows) {
+		const tr = document.createElement("tr");
+		if (row.className) tr.className = row.className;
+		if (row.onClick) {
+			tr.classList.add("clickable");
+			tr.addEventListener("click", row.onClick);
+		}
+		for (const cell of row.cells) {
+			const td = document.createElement("td");
+			if (cell instanceof Node) td.appendChild(cell);
+			else td.textContent = cell ?? "—";
+			tr.appendChild(td);
+		}
+		tbody.appendChild(tr);
+	}
+	table.appendChild(tbody);
+	return table;
+}