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

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

@@ -0,0 +1,163 @@
+import {
+	controlLaneMetrics,
+	routeDependencyEdge,
+} from "./dag-edge-routing.js";
+
+const DEFAULTS = {
+	nodeWidth: 216,
+	// Default card height for 3 text rows (title / executor / status).
+	// History row uses a taller per-node height via options.nodeHeights.
+	nodeHeight: 92,
+	rankGap: 104,
+	nodeGap: 28,
+	padding: 32,
+	/** Presentation-only: reserved top control-lane count (control edges never enter topology). */
+	controlLaneCount: 0,
+};
+
+/**
+ * Layered DAG layout with P1 simple rank order and simple dependency routing
+ * (straight line for same logical-row port-y, single cubic for different-y).
+ * Ordinary dependency ports use the base nodeHeight axis so dynamic card
+ * heights (history rows) expand downward without tilting same-row edges.
+ * Control edges never enter topology; optional controlLaneCount only expands
+ * presentation height/meta.
+ */
+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: [], meta: emptyMeta() };
+	const known = new Set(nodeIds);
+	// Base logical-row axis for ordinary dependency ports (not visual card center).
+	const baseNodeHeight = config.nodeHeight;
+	const heightFor = (nodeId) => {
+		const override = config.nodeHeights?.[nodeId];
+		const n = Number(override);
+		return Number.isFinite(n) && n > 0 ? n : baseNodeHeight;
+	};
+	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));
+
+	// ranks remain the authoritative rank assignment (AC-001).
+	// Within-rank order is stable identity sort only (no barycenter sweeps).
+	const orderedLayers = normalizeLayers(nodeIds, validEdges, ranks);
+
+	const laneMetrics = controlLaneMetrics(config.controlLaneCount, config);
+	const yOffset = laneMetrics.controlLaneOffset;
+
+	const positioned = [];
+	let maxColumnHeight = 0;
+	for (let rank = 0; rank < orderedLayers.length; rank++) {
+		const ids = orderedLayers[rank];
+		let y = config.padding + yOffset;
+		for (let index = 0; index < ids.length; index++) {
+			const nodeId = ids[index];
+			const height = heightFor(nodeId);
+			positioned.push({
+				nodeId,
+				rank,
+				index,
+				x: config.padding + rank * (config.nodeWidth + config.rankGap),
+				y,
+				width: config.nodeWidth,
+				height,
+			});
+			y += height + config.nodeGap;
+		}
+		// Drop the trailing gap after the last node in this column.
+		const columnHeight =
+			ids.length === 0 ? 0 : y - config.padding - yOffset - config.nodeGap;
+		maxColumnHeight = Math.max(maxColumnHeight, columnHeight);
+	}
+	const byId = new Map(positioned.map((node) => [node.nodeId, node]));
+
+	// Ordinary edges: stable logical-row port-y line/cubic (no port/channel/bypass).
+	// baseNodeHeight keeps ports on the default card axis while nodeHeights may grow.
+	const routed = validEdges.map((edge) => {
+		const from = byId.get(edge.from);
+		const to = byId.get(edge.to);
+		const geometry = routeDependencyEdge(from, to, { baseNodeHeight });
+		return {
+			...edge,
+			points: geometry.points,
+			path: geometry.path,
+			kind: geometry.kind,
+		};
+	});
+
+	const width =
+		config.padding * 2 +
+		orderedLayers.length * config.nodeWidth +
+		Math.max(0, orderedLayers.length - 1) * config.rankGap;
+	const height =
+		config.padding * 2 +
+		yOffset +
+		Math.max(maxColumnHeight, config.nodeHeight);
+
+	return {
+		width,
+		height,
+		nodes: positioned,
+		edges: routed,
+		meta: {
+			controlLaneOffset: laneMetrics.controlLaneOffset,
+			controlLaneHeight: laneMetrics.controlLaneHeight,
+			controlLaneCount: laneMetrics.controlLaneCount,
+		},
+	};
+}
+
+function emptyMeta() {
+	return {
+		controlLaneOffset: 0,
+		controlLaneHeight: 0,
+		controlLaneCount: 0,
+	};
+}
+
+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).map((layer) => [...layer].sort());
+}

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

@@ -0,0 +1,145 @@
+/** DAG / dashboard pure model helpers (Observe UI R5). */
+
+const TERMINAL_DAG_EFFECTIVE_STATUSES = new Set([
+	"finished",
+	"partial_failed",
+	"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,
+	};
+}
+
+const NON_EXECUTION_MODES = new Set(["dry-run", "init-only"]);
+const SHELL_NODE_STATUSES = new Set(["pending", "queued"]);
+const ACTIVE_EFFECTIVE_STATUSES = new Set([
+	"running",
+	"running-quiet",
+	"running-suspected-stall",
+	"needs-attention",
+	"remote-unknown",
+	"pending",
+	"paused",
+]);
+const TERMINAL_EFFECTIVE_STATUSES = new Set([
+	"finished",
+	"partial_failed",
+	"failed",
+	"superseded",
+	"abandoned",
+]);
+
+function isNodeActive(status) {
+	if (!status) return false;
+	const s = status.toLowerCase();
+	// pending/queued alone do not prove overview activity without mode/evidence.
+	return s === "running" || s === "started";
+}
+
+function hasDagExecutionEvidence(dag) {
+	const status = (dag?.status ?? "").toLowerCase();
+	if (status === "running" || status === "started" || status === "paused") {
+		return true;
+	}
+	return (dag?.nodes ?? []).some((n) => {
+		const s = (n?.status ?? "").toLowerCase();
+		return s && !SHELL_NODE_STATUSES.has(s);
+	});
+}
+
+/**
+ * Unified overview-active matrix (isOverviewActive).
+ * Default dashboard only lists real execution (incl. paused execute).
+ */
+export function isDagRunActive(dag) {
+	const executionMode = (dag?.executionMode ?? "").toLowerCase();
+	if (NON_EXECUTION_MODES.has(executionMode)) return false;
+
+	const lifecycle = (dag?.lifecycle ?? "").toLowerCase();
+	if (NON_EXECUTION_MODES.has(lifecycle)) return false;
+	if (lifecycle === "completed") return false;
+
+	if (
+		dag?.effectiveStatus &&
+		TERMINAL_EFFECTIVE_STATUSES.has(dag.effectiveStatus)
+	) {
+		return false;
+	}
+
+	// Real execute pause remains overview-visible (AC-003).
+	if (lifecycle === "paused" || dag?.effectiveStatus === "paused") {
+		return true;
+	}
+
+	if (["orphaned", "stale"].includes((dag?.liveness ?? "").toLowerCase()))
+		return false;
+
+	if (
+		dag?.effectiveStatus &&
+		ACTIVE_EFFECTIVE_STATUSES.has(dag.effectiveStatus)
+	) {
+		if (
+			!executionMode &&
+			dag.effectiveStatus === "pending" &&
+			!hasDagExecutionEvidence(dag)
+		) {
+			return false;
+		}
+		return true;
+	}
+
+	if (dag?.effectiveStatus && dag.effectiveStatus !== "unknown") return false;
+
+	const status = (dag?.status ?? "").toLowerCase();
+	if (TERMINAL_RUN_STATUSES.has(status)) return false;
+
+	if (executionMode === "execute") {
+		if (["running", "pending", "started", "paused"].includes(status))
+			return true;
+		return (dag?.nodes ?? []).some((n) => isNodeActive(n.status));
+	}
+
+	// Historical runs without executionMode: require real execution evidence.
+	if (status === "running" || status === "started") return true;
+	if (status === "pending" || status === "") {
+		return hasDagExecutionEvidence(dag);
+	}
+	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

@@ -0,0 +1,220 @@
+/** 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);
+}
+
+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;
+}

package/dist/worker/observe/static/favicon.svg

@@ -0,0 +1,37 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="64" viewBox="4 0 88 64">
+  <title>Loop Agent Horizontal Mobius</title>
+  <style>
+    .loop-ink { stroke: #26251e; }
+    @media (prefers-color-scheme: dark) {
+      .loop-ink { stroke: #f7f7f4; }
+    }
+  </style>
+  <defs>
+    <mask id="horizontal-handoff" maskUnits="userSpaceOnUse" x="4" y="0" width="88" height="64">
+      <rect x="4" width="88" height="64" fill="#ffffff" />
+      <path
+        d="m46 32 6 6.5"
+        fill="none"
+        stroke="#000000"
+        stroke-linecap="round"
+        stroke-width="13.5"
+      />
+    </mask>
+  </defs>
+  <path
+    class="loop-ink"
+    d="M12 32c0-16 16-20 28-6l17 18c11 11 27 5 27-12S68 9 57 20L39 39C28 51 12 48 12 32Z"
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="11"
+    mask="url(#horizontal-handoff)"
+  />
+  <path
+    d="m46.5 32.5 5 5.5"
+    fill="none"
+    stroke="#f54e00"
+    stroke-linecap="round"
+    stroke-width="9.5"
+  />
+</svg>

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;