@tea-agent/loop-agent 0.30.0 → 0.31.1

package/dist/worker/observe/static/dag-edge-routing.js

@@ -0,0 +1,368 @@
+/**
+ * Deterministic edge routing for Observe DAG logical topology (P1 simple).
+ * Ordinary dependency edges: same stable port-y → explicit straight M...L...;
+ * different port-y → single-segment M...C... cubic. Control-loop edges keep an
+ * independent top-lane rounded-orthogonal path. Pure geometry — no DOM.
+ *
+ * Ordinary ports use a logical-row axis (base nodeHeight / 2 from card top),
+ * not the visual card center, so dynamic history height does not tilt edges.
+ */
+
+const CORNER_RADIUS = 10;
+const CONTROL_LANE_HEIGHT = 36;
+const CONTROL_LANE_TOP = 20;
+const GUTTER_MARGIN = 12;
+/** Port-y equality tolerance for straight ordinary edges (float only; px). */
+const SAME_Y_EPS = 0.5;
+
+/**
+ * Stable ordinary dependency port y for a laid-out node.
+ * Uses baseNodeHeight (logical row axis) when provided; otherwise falls back
+ * to the node's own height (equal-height layouts / direct unit calls).
+ */
+export function dependencyPortY(node, baseNodeHeight) {
+	const base = Number(baseNodeHeight);
+	const axisHeight =
+		Number.isFinite(base) && base > 0 ? base : Number(node?.height) || 0;
+	return (Number(node?.y) || 0) + axisHeight / 2;
+}
+
+/**
+ * Build a smooth cubic SVG path between two ports, or an explicit straight
+ * segment when port-y values match within SAME_Y_EPS.
+ * Control-point x stays strictly inside the rank gutter (source right → target left).
+ */
+export function pointsToSmoothCubicPath(fromPoint, toPoint, options = {}) {
+	if (!fromPoint || !toPoint) return "";
+	const x1 = fromPoint.x;
+	const y1 = fromPoint.y;
+	const x2 = toPoint.x;
+	const y2 = toPoint.y;
+	// AC-001: same port-y → explicit straight M...L...
+	if (Math.abs(y1 - y2) <= SAME_Y_EPS) {
+		return `M ${fmt(x1)} ${fmt(y1)} L ${fmt(x2)} ${fmt(y2)}`;
+	}
+	const spanX = x2 - x1;
+	if (!(spanX > 0)) {
+		// Degenerate / backward: fall back to a straight segment.
+		return `M ${fmt(x1)} ${fmt(y1)} L ${fmt(x2)} ${fmt(y2)}`;
+	}
+	// Keep both control x values inside the open gutter (x1, x2).
+	// channelOffset is intentionally ignored for ordinary P1 edges.
+	void options;
+	const inset = Math.max(GUTTER_MARGIN, spanX / 3);
+	let c1x = x1 + inset;
+	let c2x = x2 - inset;
+	const lo = x1 + 1;
+	const hi = x2 - 1;
+	c1x = clamp(c1x, lo, hi);
+	c2x = clamp(c2x, lo, hi);
+	if (c1x > c2x) {
+		const mid = (c1x + c2x) / 2;
+		c1x = mid;
+		c2x = mid;
+	}
+	return `M ${fmt(x1)} ${fmt(y1)} C ${fmt(c1x)} ${fmt(y1)}, ${fmt(c2x)} ${fmt(y2)}, ${fmt(x2)} ${fmt(y2)}`;
+}
+
+/**
+ * Build a rounded-orthogonal SVG path from structured polyline points.
+ * Used by control-loop edges only under the P1 ordinary-edge rollback.
+ */
+export function pointsToRoundedOrthogonalPath(points = [], radius = CORNER_RADIUS) {
+	if (!Array.isArray(points) || points.length === 0) return "";
+	if (points.length === 1) {
+		const p = points[0];
+		return `M ${fmt(p.x)} ${fmt(p.y)}`;
+	}
+	const cleaned = collapseColinear(points);
+	if (cleaned.length === 1) {
+		return `M ${fmt(cleaned[0].x)} ${fmt(cleaned[0].y)}`;
+	}
+	let d = `M ${fmt(cleaned[0].x)} ${fmt(cleaned[0].y)}`;
+	for (let i = 1; i < cleaned.length; i++) {
+		const prev = cleaned[i - 1];
+		const curr = cleaned[i];
+		const next = cleaned[i + 1];
+		if (!next) {
+			d += ` L ${fmt(curr.x)} ${fmt(curr.y)}`;
+			break;
+		}
+		const dx1 = curr.x - prev.x;
+		const dy1 = curr.y - prev.y;
+		const dx2 = next.x - curr.x;
+		const dy2 = next.y - curr.y;
+		const len1 = Math.hypot(dx1, dy1);
+		const len2 = Math.hypot(dx2, dy2);
+		if (len1 === 0 || len2 === 0) continue;
+		const r = Math.min(radius, len1 / 2, len2 / 2);
+		const x1 = curr.x - (dx1 / len1) * r;
+		const y1 = curr.y - (dy1 / len1) * r;
+		const x2 = curr.x + (dx2 / len2) * r;
+		const y2 = curr.y + (dy2 / len2) * r;
+		d += ` L ${fmt(x1)} ${fmt(y1)} Q ${fmt(curr.x)} ${fmt(curr.y)} ${fmt(x2)} ${fmt(y2)}`;
+	}
+	return d;
+}
+
+/**
+ * Route an ordinary dependency edge with P1 simple geometry.
+ * Stable logical-row ports (baseNodeHeight axis) — no port/channel/bypass hybrid.
+ * Arrow endpoint sits on the target outer left edge.
+ *
+ * - Same port-y: explicit straight M...L... (kind: "line")
+ * - Different port-y: single-segment cubic M...C... (kind: "cubic")
+ * - All forward spans (including long edges) use the same simple path family.
+ * - context.baseNodeHeight: logical row axis; dynamic card height is ignored for ports.
+ * - SAME_Y_EPS stays 0.5 (float equality only; never enlarged to hide true misalign).
+ */
+export function routeDependencyEdge(from, to, context = {}) {
+	const baseNodeHeight = context?.baseNodeHeight;
+	const y1 = dependencyPortY(from, baseNodeHeight);
+	const y2 = dependencyPortY(to, baseNodeHeight);
+	const x1 = from.x + from.width;
+	const x2 = to.x;
+	const start = { x: x1, y: y1 };
+	const end = { x: x2, y: y2 };
+	const sameY = Math.abs(y1 - y2) <= SAME_Y_EPS;
+	const path = pointsToSmoothCubicPath(start, end);
+	return {
+		points: [start, end],
+		path,
+		kind: sameY ? "line" : "cubic",
+	};
+}
+
+/**
+ * Route a control-loop edge on an independent top lane (rounded-orthogonal).
+ * Path leaves the source left edge into its local left gutter, rises into the
+ * lane, travels horizontally above the node canvas, descends in the target
+ * right gutter, and enters the target right edge — never through node rects.
+ */
+export function routeControlEdge(from, to, laneIndex = 0, options = {}) {
+	const laneHeight = options.controlLaneHeight ?? CONTROL_LANE_HEIGHT;
+	const laneTop = options.controlLaneTop ?? CONTROL_LANE_TOP;
+	const laneY = laneTop + laneIndex * laneHeight + laneHeight / 2;
+	const y1 = from.y + from.height / 2;
+	const y2 = to.y + to.height / 2;
+	// Per-lane gutter offsets keep multi-edge paths from fully overlapping.
+	const leftLift = Math.max(28, GUTTER_MARGIN + 8 + laneIndex * 6);
+	const rightLift = Math.max(28, GUTTER_MARGIN + 8 + laneIndex * 6);
+	const xLeave = from.x;
+	const xEnter = to.x + to.width;
+	// Rise only in the source-local left gutter (not across intermediate ranks).
+	const xRise = from.x - leftLift;
+	// Descend only in the target-local right gutter.
+	const xDescend = to.x + to.width + rightLift;
+
+	const points = collapseColinear([
+		{ x: xLeave, y: y1 },
+		{ x: xRise, y: y1 },
+		{ x: xRise, y: laneY },
+		{ x: xDescend, y: laneY },
+		{ x: xDescend, y: y2 },
+		{ x: xEnter, y: y2 },
+	]);
+	// Label anchors on the top horizontal lane segment midpoint (not a corner).
+	const topA = points.find((p, i) => i > 0 && nearlyEqual(p.y, laneY));
+	const topB = [...points]
+		.reverse()
+		.find((p) => nearlyEqual(p.y, laneY));
+	const labelX =
+		topA && topB ? (topA.x + topB.x) / 2 : (from.x + to.x + to.width) / 2;
+	const labelY = laneY - 8;
+	return {
+		points,
+		path: pointsToRoundedOrthogonalPath(points),
+		laneIndex,
+		laneY,
+		labelX,
+		labelY,
+	};
+}
+
+/**
+ * True if any polyline segment intersects a non-endpoint node rectangle.
+ * Endpoint contact at source/target ports is allowed.
+ */
+export function edgeCollidesNonEndpointNodes(points, nodes, fromId, toId) {
+	if (!Array.isArray(points) || points.length < 2) return false;
+	const obstacles = (nodes ?? []).filter(
+		(node) => node.nodeId !== fromId && node.nodeId !== toId,
+	);
+	for (let i = 0; i < points.length - 1; i++) {
+		const a = points[i];
+		const b = points[i + 1];
+		for (const node of obstacles) {
+			if (segmentIntersectsRect(a, b, nodeRect(node))) return true;
+		}
+	}
+	return false;
+}
+
+export function controlLaneMetrics(laneCount = 0, options = {}) {
+	const count = Math.max(0, Number(laneCount) || 0);
+	const laneHeight = options.controlLaneHeight ?? CONTROL_LANE_HEIGHT;
+	const laneTop = options.controlLaneTop ?? CONTROL_LANE_TOP;
+	const controlLaneHeight = count === 0 ? 0 : laneTop + count * laneHeight;
+	return {
+		controlLaneCount: count,
+		controlLaneHeight,
+		controlLaneOffset: controlLaneHeight,
+		laneHeight,
+		laneTop,
+	};
+}
+
+export function assignControlLanes(controlEdges = [], layoutById = new Map()) {
+	const valid = (controlEdges ?? [])
+		.filter((edge) => layoutById.has(edge.from) && layoutById.has(edge.to))
+		.map((edge) => {
+			const from = layoutById.get(edge.from);
+			const to = layoutById.get(edge.to);
+			const span = Math.abs((from?.x ?? 0) - (to?.x ?? 0));
+			return { edge, span, key: `${edge.from}\0${edge.to}` };
+		});
+	// Stable multi-edge assignment: longer span first, then identity.
+	valid.sort(
+		(a, b) => b.span - a.span || a.key.localeCompare(b.key),
+	);
+	return valid.map((entry, laneIndex) => ({
+		...entry.edge,
+		laneIndex,
+		span: entry.span,
+	}));
+}
+
+function nodeRect(node) {
+	return {
+		x: node.x,
+		y: node.y,
+		width: node.width,
+		height: node.height,
+	};
+}
+
+/** Axis-aligned segment vs rect intersection (closed). Degenerate points ok. */
+function segmentIntersectsRect(a, b, rect) {
+	const minX = rect.x;
+	const maxX = rect.x + rect.width;
+	const minY = rect.y;
+	const maxY = rect.y + rect.height;
+	// Both endpoints strictly inside → collision.
+	if (pointInRect(a, rect) && pointInRect(b, rect)) return true;
+	// Liang–Barsky style against four edges.
+	const edges = [
+		[
+			{ x: minX, y: minY },
+			{ x: maxX, y: minY },
+		],
+		[
+			{ x: maxX, y: minY },
+			{ x: maxX, y: maxY },
+		],
+		[
+			{ x: maxX, y: maxY },
+			{ x: minX, y: maxY },
+		],
+		[
+			{ x: minX, y: maxY },
+			{ x: minX, y: minY },
+		],
+	];
+	// Interior open-segment probe: if midpoint is inside, it crosses the body.
+	const mid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+	if (pointStrictlyInside(mid, rect)) return true;
+	for (const [c, d] of edges) {
+		if (segmentsIntersect(a, b, c, d)) {
+			// Touching only at a corner/edge that is not interior still counts
+			// as crossing the obstacle boundary when the other point is beyond.
+			if (pointStrictlyInside(a, rect) || pointStrictlyInside(b, rect)) {
+				return true;
+			}
+			// Segment crosses through the rect (not merely grazing a corner
+			// outside the open interior). Check a slight inset sample.
+			const samples = 4;
+			for (let s = 1; s < samples; s++) {
+				const t = s / samples;
+				const p = { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t };
+				if (pointStrictlyInside(p, rect)) return true;
+			}
+		}
+	}
+	return false;
+}
+
+function pointInRect(p, rect) {
+	return (
+		p.x >= rect.x &&
+		p.x <= rect.x + rect.width &&
+		p.y >= rect.y &&
+		p.y <= rect.y + rect.height
+	);
+}
+
+function pointStrictlyInside(p, rect) {
+	const eps = 0.51;
+	return (
+		p.x > rect.x + eps &&
+		p.x < rect.x + rect.width - eps &&
+		p.y > rect.y + eps &&
+		p.y < rect.y + rect.height - eps
+	);
+}
+
+function segmentsIntersect(p1, p2, p3, p4) {
+	const d1 = direction(p3, p4, p1);
+	const d2 = direction(p3, p4, p2);
+	const d3 = direction(p1, p2, p3);
+	const d4 = direction(p1, p2, p4);
+	if (((d1 > 0 && d2 < 0) || (d1 < 0 && d2 > 0)) &&
+		((d3 > 0 && d4 < 0) || (d3 < 0 && d4 > 0))) {
+		return true;
+	}
+	return false;
+}
+
+function direction(a, b, c) {
+	return (c.x - a.x) * (b.y - a.y) - (c.y - a.y) * (b.x - a.x);
+}
+
+function collapseColinear(points) {
+	if (points.length <= 2) return points.map(clonePoint);
+	const out = [clonePoint(points[0])];
+	for (let i = 1; i < points.length - 1; i++) {
+		const prev = out[out.length - 1];
+		const curr = points[i];
+		const next = points[i + 1];
+		const colinear =
+			(nearlyEqual(prev.x, curr.x) && nearlyEqual(curr.x, next.x)) ||
+			(nearlyEqual(prev.y, curr.y) && nearlyEqual(curr.y, next.y));
+		if (!colinear && !samePoint(prev, curr)) out.push(clonePoint(curr));
+	}
+	const last = points[points.length - 1];
+	if (!samePoint(out[out.length - 1], last)) out.push(clonePoint(last));
+	return out;
+}
+
+function clonePoint(p) {
+	return { x: p.x, y: p.y };
+}
+
+function samePoint(a, b) {
+	return nearlyEqual(a.x, b.x) && nearlyEqual(a.y, b.y);
+}
+
+function nearlyEqual(a, b) {
+	return Math.abs(a - b) < 1e-6;
+}
+
+function clamp(value, lo, hi) {
+	return Math.min(Math.max(value, lo), hi);
+}
+
+function fmt(n) {
+	const v = Number(n);
+	if (!Number.isFinite(v)) return "0";
+	return Number.isInteger(v) ? String(v) : v.toFixed(2).replace(/\.?0+$/, "");
+}

package/dist/worker/observe/static/dag-history-labels.js

@@ -0,0 +1,95 @@
+/**
+ * DAG 执行轨迹业务文案映射（Observe UI，2026-08-08-observe-trajectory-business-labels）。
+ *
+ * 纯函数表驱动映射：raw 内部 token（attempt failureCategory / occurrence
+ * semanticVerdict / lane nextReason）仅保留在 title 等诊断属性中，主文案
+ * （textContent 与 aria-label）一律使用中文业务术语。未知或缺失分类
+ * fail-closed 为通用中文，不猜测、不新增授权外映射键（AC-001/AC-002/AC-003）。
+ */
+
+/** 表一：attempt 失败分类 → 中文业务术语（未知/缺失 → 其他失败原因）。 */
+const ATTEMPT_FAILURE_LABELS = {
+	"protocol-invalid": "格式校验失败",
+	unavailable: "服务暂不可用",
+	timeout: "执行超时",
+	"nonzero-exit": "命令执行失败",
+	"invalid-output": "输出格式无效",
+	"empty-output": "输出为空",
+	auth: "认证失败",
+	quota: "额度或限流",
+	"rate-limit": "额度或限流",
+	"context-overflow": "上下文超限",
+	"tool-policy": "工具权限受限",
+	"write-guard": "写入边界阻断",
+};
+
+export const ATTEMPT_FAILURE_UNKNOWN_LABEL = "其他失败原因";
+
+/**
+ * 表一映射：attempt 失败分类 → 中文。未知或缺失分类 fail-closed 为
+ * 「其他失败原因」（AC-001）。
+ */
+export function attemptFailureLabel(category) {
+	if (!category) return ATTEMPT_FAILURE_UNKNOWN_LABEL;
+	return ATTEMPT_FAILURE_LABELS[String(category)] ?? ATTEMPT_FAILURE_UNKNOWN_LABEL;
+}
+
+/** 表二：语义 verdict → 中文业务术语（未知 → 状态待确认；纯中文原样透传）。 */
+const SEMANTIC_VERDICT_LABELS = {
+	"request-revision": "要求修订",
+	pass: "审查通过",
+	"auto-approve": "自动批准",
+	"hard-verify-failed": "验证失败",
+	"review-request-revision": "要求修订，进入下一轮",
+	"review-pass": "审查通过",
+	"hard-verify-pass": "验证通过",
+};
+
+export const SEMANTIC_VERDICT_UNKNOWN_LABEL = "状态待确认";
+
+/** 投影层半中文混合串（hard-verify 失败）归入 hard-verify-failed → 验证失败。 */
+const HARD_VERIFY_MIXED_FAILURE = /^hard-verify\s*失败$/;
+const CJK_RE = /[\u4e00-\u9fff]/;
+
+/**
+ * 表二映射：occurrence 语义 verdict → 中文。投影半中文混合串
+ * 「hard-verify 失败」归入「验证失败」；既有纯中文取值（如「失败」）
+ * 原样透传；未知英文 token fail-closed 为「状态待确认」；空值返回空串
+ * 供调用方守卫（AC-002）。
+ */
+export function semanticVerdictLabel(verdict) {
+	if (!verdict) return "";
+	const key = String(verdict);
+	if (SEMANTIC_VERDICT_LABELS[key]) return SEMANTIC_VERDICT_LABELS[key];
+	if (HARD_VERIFY_MIXED_FAILURE.test(key)) {
+		return SEMANTIC_VERDICT_LABELS["hard-verify-failed"];
+	}
+	// 既有投影产出的纯中文取值原样透传，不做猜测。
+	if (CJK_RE.test(key)) return key;
+	return SEMANTIC_VERDICT_UNKNOWN_LABEL;
+}
+
+/** 表三：lane transition 原因 → 中文业务术语（未知 → 状态待确认）。 */
+const TRANSITION_REASON_LABELS = {
+	"review-request-revision": "要求修订，进入下一轮",
+	"hard-verify-failed": "验证失败，进入下一轮",
+	"review-pass": "审查通过",
+	"hard-verify-pass": "验证通过",
+	// 既有生产 token 的中文文案（repository fallback，非本任务新增授权键）。
+	"non-retry-failure": "不可重试失败",
+	"blocked-boundary": "边界阻断",
+	"no-progress": "无进展",
+	regression: "回归",
+	"max-passes": "达到最大轮次",
+};
+
+export const TRANSITION_REASON_UNKNOWN_LABEL = "状态待确认";
+
+/**
+ * 表三映射：lane 间 transition 原因 → 中文。未知 token fail-closed 为
+ * 「状态待确认」；空值返回空串（无 nextReason 时不渲染箭头，既有守卫）。
+ */
+export function transitionReasonLabel(reason) {
+	if (!reason) return "";
+	return TRANSITION_REASON_LABELS[String(reason)] ?? TRANSITION_REASON_UNKNOWN_LABEL;
+}

package/dist/worker/observe/static/dag-layout.d.ts

@@ -17,15 +17,20 @@ export type DagLayout = {
 	edges: DagLayoutEdge[];
 };
 
+export type DagLayoutOptions = Partial<{
+	nodeWidth: number;
+	nodeHeight: number;
+	rankGap: number;
+	nodeGap: number;
+	padding: number;
+	controlLaneCount: number;
+	/** Per-node visual card height overrides; ordinary ports still use nodeHeight axis. */
+	nodeHeights: Record<string, number>;
+}>;
+
 export function layoutDag(
 	nodes?: DagLayoutNodeInput[],
 	edges?: DagLayoutEdgeInput[],
 	ranks?: string[][],
-	options?: Partial<{
-		nodeWidth: number;
-		nodeHeight: number;
-		rankGap: number;
-		nodeGap: number;
-		padding: number;
-	}>,
+	options?: DagLayoutOptions,
 ): DagLayout;

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

@@ -1,49 +1,124 @@
+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: [] };
+	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)
+		.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);
+
+	// 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 = [];
-	for (let rank = 0; rank < layers.length; rank++) {
-		const ids = layers[rank];
+	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: ids[index], rank, index,
+				nodeId,
+				rank,
+				index,
 				x: config.padding + rank * (config.nodeWidth + config.rankGap),
-				y: config.padding + index * (config.nodeHeight + config.nodeGap),
-				width: config.nodeWidth, height: config.nodeHeight,
+				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 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 geometry = routeDependencyEdge(from, to, { baseNodeHeight });
+		return {
+			...edge,
+			points: geometry.points,
+			path: geometry.path,
+			kind: geometry.kind,
+		};
 	});
-	const maxRows = Math.max(...layers.map((layer) => layer.length), 1);
+
+	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: config.padding * 2 + layers.length * config.nodeWidth + (layers.length - 1) * config.rankGap,
-		height: config.padding * 2 + maxRows * config.nodeHeight + (maxRows - 1) * config.nodeGap,
+		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,
 	};
 }
 
@@ -54,7 +129,9 @@ function normalizeLayers(nodeIds, edges, ranks) {
 	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();
+			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);
 		}
@@ -65,7 +142,10 @@ function normalizeLayers(nodeIds, edges, ranks) {
 			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 (next > level.get(edge.to)) {
+					level.set(edge.to, next);
+					changed = true;
+				}
 			}
 			if (!changed) break;
 		}
@@ -79,5 +159,5 @@ function normalizeLayers(nodeIds, edges, ranks) {
 	for (const id of nodeIds) {
 		if (!seen.has(id)) (layers[0] ??= []).push(id);
 	}
-	return layers.filter(Boolean);
+	return layers.filter(Boolean).map((layer) => [...layer].sort());
 }

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>