@tea-agent/loop-agent 0.7.5 → 0.9.0

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

@@ -1,31 +1,31 @@
-export type DagLayoutNodeInput = { nodeId: string };
-export type DagLayoutEdgeInput = { from: string; to: string };
-export type DagLayoutNode = {
-	nodeId: string;
-	rank: number;
-	index: number;
-	x: number;
-	y: number;
-	width: number;
-	height: number;
-};
-export type DagLayoutEdge = DagLayoutEdgeInput & { path: string };
-export type DagLayout = {
-	width: number;
-	height: number;
-	nodes: DagLayoutNode[];
-	edges: DagLayoutEdge[];
-};
-
-export function layoutDag(
-	nodes?: DagLayoutNodeInput[],
-	edges?: DagLayoutEdgeInput[],
-	ranks?: string[][],
-	options?: Partial<{
-		nodeWidth: number;
-		nodeHeight: number;
-		rankGap: number;
-		nodeGap: number;
-		padding: number;
-	}>,
-): DagLayout;
+export type DagLayoutNodeInput = { nodeId: string };
+export type DagLayoutEdgeInput = { from: string; to: string };
+export type DagLayoutNode = {
+	nodeId: string;
+	rank: number;
+	index: number;
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+};
+export type DagLayoutEdge = DagLayoutEdgeInput & { path: string };
+export type DagLayout = {
+	width: number;
+	height: number;
+	nodes: DagLayoutNode[];
+	edges: DagLayoutEdge[];
+};
+
+export function layoutDag(
+	nodes?: DagLayoutNodeInput[],
+	edges?: DagLayoutEdgeInput[],
+	ranks?: string[][],
+	options?: Partial<{
+		nodeWidth: number;
+		nodeHeight: number;
+		rankGap: number;
+		nodeGap: number;
+		padding: number;
+	}>,
+): DagLayout;

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/index.html

@@ -1,63 +1,88 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>loop-agent 可观测</title>
-  <link rel="stylesheet" href="/styles.css">
-</head>
-<body>
-  <div id="app">
-    <header class="site-header">
-      <a href="#/" class="logo">loop-agent 可观测</a>
-      <nav class="top-nav">
-        <a href="#/" class="nav-link">总览</a>
-        <a href="#/dags" class="nav-link">DAG</a>
-        <a href="#/failures" class="nav-link">失败箱</a>
-      </nav>
-      <span id="header-refresh" class="header-refresh"></span>
-      <nav id="breadcrumb" class="breadcrumb"></nav>
-    </header>
-
-    <section data-view="dashboard" id="view-dashboard">
-      <h2>总览</h2>
-      <div id="dashboard-kpi" class="kpi-grid panel"></div>
-      <div id="dashboard-active-dags" class="panel"></div>
-      <div id="dashboard-dags" class="panel"></div>
-      <div id="dashboard-batches" class="panel"></div>
-    </section>
-
-    <section data-view="batch" id="view-batch" hidden>
-      <h2>批次详情</h2>
-      <div id="batch-meta" class="panel"></div>
-      <div id="batch-tasks" class="panel"></div>
-    </section>
-
-    <section data-view="run" id="view-run" hidden>
-      <h2>运行详情</h2>
-      <div id="run-meta" class="panel"></div>
-      <div id="run-dag-progress" class="panel"></div>
-      <div id="run-steps" class="panel"></div>
-      <div id="run-command" class="panel"></div>
-      <div id="run-output" class="panel"></div>
-      <div id="run-artifacts" class="panel"></div>
-    </section>
-
-    <section data-view="dag" id="view-dag" hidden>
-      <h2>DAG 详情</h2>
-      <div id="dag-meta" class="panel"></div>
-      <div id="dag-ranks" class="panel"></div>
-      <div id="dag-nodes" class="panel"></div>
-      <div id="dag-timeline" class="panel"></div>
-      <div id="dag-output" class="panel"></div>
-    </section>
-
-    <section data-view="failures" id="view-failures" hidden>
-      <h2>失败箱</h2>
-      <div id="failures-empty" class="panel" hidden>暂无失败或阻塞的任务。</div>
-      <div id="failures-list" class="panel"></div>
-    </section>
-  </div>
-  <script type="module" src="/app.js"></script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Loop Agent</title>
+  <link rel="icon" href="data:,">
+  <link rel="preconnect" href="https://cdn.jsdelivr.net">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.6.0/fonts/remixicon.css">
+  <link rel="stylesheet" href="/styles.css">
+</head>
+<body data-shell="observe-console">
+  <a class="skip-link" href="#main-content">跳到主内容</a>
+  <div id="app">
+    <header class="site-header">
+      <a href="#/" class="logo" aria-label="Loop Agent 运行看板首页">
+        <i class="ri-radar-line" aria-hidden="true"></i>
+        <span>Loop Agent</span>
+      </a>
+      <nav class="top-nav" aria-label="主导航">
+        <a href="#/" class="nav-link"><i class="ri-dashboard-3-line" aria-hidden="true"></i><span>总览</span></a>
+        <a href="#/failures" class="nav-link"><i class="ri-alarm-warning-line" aria-hidden="true"></i><span>异常 Task</span></a>
+      </nav>
+      <div class="header-meta">
+        <i class="ri-live-line" aria-hidden="true"></i>
+        <span id="header-refresh" class="header-refresh" aria-live="polite"></span>
+      </div>
+      <nav id="breadcrumb" class="breadcrumb" aria-label="面包屑"></nav>
+    </header>
+
+    <main id="main-content" class="dashboard-main" tabindex="-1">
+      <section data-view="dashboard" id="view-dashboard" class="view view-dashboard">
+        <div class="view-heading">
+          <p class="view-kicker">OBSERVE</p>
+          <h2>运行总览</h2>
+          <p>聚焦正在推进的 DAG、需要处理的风险与近期运行记录。</p>
+        </div>
+        <section id="dashboard-kpi" class="kpi-grid panel panel-kpi" aria-label="运行摘要"></section>
+        <div class="dashboard-workspace">
+          <section id="dashboard-active-dags" class="panel panel-primary"></section>
+          <aside id="dashboard-risk" class="panel panel-risk" aria-label="运行风险"></aside>
+        </div>
+        <div class="dashboard-secondary">
+          <section id="dashboard-dags" class="panel"></section>
+          <section id="dashboard-batches" class="panel"></section>
+        </div>
+      </section>
+
+      <section data-view="batch" id="view-batch" class="view" hidden>
+        <div class="view-heading"><p class="view-kicker">BATCH</p><h2>批次详情</h2></div>
+        <section id="batch-meta" class="panel panel-meta"></section>
+        <section id="batch-tasks" class="panel panel-table"></section>
+      </section>
+
+      <section data-view="run" id="view-run" class="view" hidden>
+        <div class="view-heading"><p class="view-kicker">WORKER RUN</p><h2>运行详情</h2></div>
+        <section id="run-meta" class="panel panel-meta"></section>
+        <section id="run-dag-progress" class="panel panel-progress"></section>
+        <div class="run-detail-workspace">
+          <aside id="run-steps" class="panel panel-rail"></aside>
+          <div class="run-evidence">
+            <section id="run-command" class="panel"></section>
+            <section id="run-output" class="panel panel-output"></section>
+          </div>
+          <aside id="run-artifacts" class="panel panel-artifacts"></aside>
+        </div>
+      </section>
+
+      <section data-view="dag" id="view-dag" class="view" hidden>
+        <div class="view-heading"><p class="view-kicker">AGENT DAG</p><h2>DAG 详情</h2></div>
+        <section id="dag-meta" class="panel panel-meta"></section>
+        <div class="dag-detail-workspace">
+          <section id="dag-ranks" class="panel panel-graph"></section>
+        </div>
+        <section id="dag-nodes" class="panel panel-table"></section>
+        <aside id="dag-inspector" class="panel dag-inspector" aria-label="选中节点检查器" aria-hidden="true"></aside>
+      </section>
+
+      <section data-view="failures" id="view-failures" class="view" hidden>
+        <div class="view-heading"><p class="view-kicker">ATTENTION QUEUE</p><h2>异常 Task</h2><p>按运行状态和建议跟进项集中处理需要人工介入的 Task。</p></div>
+        <div id="failures-empty" class="panel empty-state" hidden>当前没有异常 Task</div>
+        <section id="failures-list" class="panel panel-table"></section>
+      </section>
+    </main>
+  </div>
+  <script type="module" src="/app.js"></script>
+</body>
+</html>