@sleep2agi/agent-network-dashboard 0.5.3-preview.263 → 0.5.3-preview.266

package/app/components/TopoGraph.tsx

@@ -72,6 +72,19 @@ interface MessageFlow {
   created_at: string;
 }
 
+interface TaskFlow {
+  from_name?: string | null;
+  from_alias?: string | null;
+  to_name?: string | null;
+  to_alias?: string | null;
+  content?: string | null;
+  status?: string | null;
+  created_at?: string | null;
+  delivered_at?: string | null;
+  started_at?: string | null;
+  completed_at?: string | null;
+}
+
 interface TopoGraphProps {
   sessions: Session[];
   sseSessions: Record<string, number>;
@@ -508,11 +521,21 @@ function commonPrefix(a: string, b: string): string {
   return a.slice(0, i);
 }
 
-/** #83 + #111: group nodes that share a ≥2-char alias prefix OR a project_dir
- *  ("either criterion → same group", Vincent 4724). Union-find over the
- *  sessions; the component label prefers the shared project_dir's basename,
- *  else the common alias prefix. Returns alias → groupKey. */
-function computeGroups(sessions: { alias: string; project_dir?: string | null }[]): Record<string, string> {
+/** #83 + #111: group nodes by shared ≥2-char alias prefix. Union-find over
+ *  the sessions; the component label is the common alias prefix. Returns
+ *  alias → groupKey.
+ *
+ *  #172/#174 short-term fix: grouping is alias-prefix ONLY. The earlier
+ *  project_dir co-union (Vincent 4724) was dropped — live /api/status
+ *  data showed it actively wrong: 视频测试马 reported project_dir
+ *  `/Users/vansin/intern-aip`, the same dir as the unrelated standalone
+ *  nodes 知识马 / 群星马, so union-find transitively bridged 知识马 /
+ *  群星马 into the 视频 team. project_dir data quality is also poor
+ *  (corrupted nested paths like `VideoNode/~/code/VideoNode/~/…`).
+ *  alias prefix is the reliable signal; prefix-less nodes correctly
+ *  fall out as singletons → the 未分组 bucket. The real fix is a
+ *  first-class node.team field — tracked as #175. */
+function computeGroups(sessions: { alias: string }[]): Record<string, string> {
   const n = sessions.length;
   const parent = sessions.map((_, i) => i);
   const find = (i: number): number => {
@@ -524,16 +547,6 @@ function computeGroups(sessions: { alias: string; project_dir?: string | null }[
     if (ra !== rb) parent[ra] = rb;
   };
 
-  // union by shared project_dir
-  const byDir: Record<string, number[]> = {};
-  sessions.forEach((s, i) => {
-    const d = s.project_dir?.trim();
-    if (d) (byDir[d] ||= []).push(i);
-  });
-  for (const idxs of Object.values(byDir)) {
-    for (let k = 1; k < idxs.length; k++) union(idxs[0], idxs[k]);
-  }
-
   // union by shared ≥2-char alias prefix — sort, link adjacent pairs
   const order = sessions.map((_, i) => i).sort((a, b) => sessions[a].alias.localeCompare(sessions[b].alias));
   for (let k = 0; k + 1 < order.length; k++) {
@@ -542,7 +555,7 @@ function computeGroups(sessions: { alias: string; project_dir?: string | null }[
     }
   }
 
-  // label each connected component
+  // label each connected component with the common alias prefix
   const comps: Record<number, number[]> = {};
   for (let i = 0; i < n; i++) (comps[find(i)] ||= []).push(i);
   const keys: Record<string, string> = {};
@@ -551,53 +564,71 @@ function computeGroups(sessions: { alias: string; project_dir?: string | null }[
     if (members.length === 1) {
       label = sessions[members[0]].alias;
     } else {
-      const dirs = new Set(members.map(i => sessions[i].project_dir?.trim()).filter(Boolean) as string[]);
-      if (dirs.size === 1) {
-        const d = [...dirs][0];
-        label = d.split('/').filter(Boolean).pop() || d;
-      } else {
-        label = members.map(i => sessions[i].alias).reduce((a, b) => commonPrefix(a, b));
-        if (label.length < 2) label = sessions[members[0]].alias;
-      }
+      label = members.map(i => sessions[i].alias).reduce((a, b) => commonPrefix(a, b));
+      if (label.length < 2) label = sessions[members[0]].alias;
     }
     for (const i of members) keys[sessions[i].alias] = label;
   }
   return keys;
 }
 
-function buildFlowLinks(messages: MessageFlow[], positions: Record<string, Point>) {
+function buildFlowLinks(messages: MessageFlow[], tasks: TaskFlow[], positions: Record<string, Point>) {
   const links = new Map<string, FlowLink>();
 
-  messages.forEach(message => {
-    if (
-      !positions[message.from_alias] ||
-      !positions[message.to_alias] ||
-      message.from_alias === message.to_alias
-    ) {
+  const commandAlias = Object.keys(positions).find(a => a.includes('副指挥'))
+    ?? Object.keys(positions).find(a => a.includes('总指挥'))
+    ?? null;
+
+  const resolveAlias = (alias: string | null | undefined) => {
+    const clean = (alias || '').trim();
+    if (!clean) return null;
+    if (positions[clean]) return clean;
+    if ((clean === 'api' || clean === 'admin') && commandAlias) return commandAlias;
+    return clean;
+  };
+
+  const addLink = (fromRaw: string | null | undefined, toRaw: string | null | undefined, content: string, createdAt: string) => {
+    const from = resolveAlias(fromRaw);
+    const to = resolveAlias(toRaw);
+    if (!from || !to || !positions[from] || !positions[to] || from === to) {
       return;
     }
 
-    const key = `${message.from_alias}->${message.to_alias}`;
+    const key = `${from}->${to}`;
     const current = links.get(key);
 
     // Keep the most-recent timestamp per pair so the render can fade
     // dormant edges (Round 10 freshness fade).
-    const incoming = message.created_at || '';
+    const incoming = createdAt || '';
     const last_at = !current
       ? incoming
       : (incoming > current.last_at ? incoming : current.last_at);
 
     links.set(key, {
       key,
-      from: message.from_alias,
-      to: message.to_alias,
+      from,
+      to,
       count: (current?.count || 0) + 1,
-      content: current?.content || message.content,
+      content: current?.content || content,
       last_at,
     });
+  };
+
+  messages.forEach(message => {
+    addLink(message.from_alias, message.to_alias, message.content, message.created_at);
   });
 
-  return [...links.values()].slice(0, 18);
+  tasks.forEach(task => {
+    const from = task.from_alias ?? task.from_name;
+    const to = task.to_alias ?? task.to_name;
+    const when = task.completed_at || task.started_at || task.delivered_at || task.created_at || '';
+    const label = task.content || (task.status ? `task:${task.status}` : 'task');
+    addLink(from, to, label, when);
+  });
+
+  return [...links.values()]
+    .sort((a, b) => (b.last_at || '').localeCompare(a.last_at || ''))
+    .slice(0, 18);
 }
 
 export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProps) {
@@ -620,6 +651,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
   // wants to leave: "show me the rest of the flows" → /messages.
   const router = useRouter();
   const [messages, setMessages] = useState<MessageFlow[]>([]);
+  const [tasks, setTasks] = useState<TaskFlow[]>([]);
   // Issue #87: ring | grid layout toggle. Ring is the tiered-radial default;
   // grid arranges nodes in an N×M grid (better for 30+ nodes). Persisted to
   // localStorage like the zoom/pan view state. Declared above nodePositions
@@ -724,20 +756,24 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
   };
 
   useEffect(() => {
-    const fetchMessages = async () => {
+    const fetchFlows = async () => {
       try {
-        const res = await fetch('/api/hub/messages?limit=50');
-        if (res.status === 401) {
+        const [messageRes, taskRes] = await Promise.all([
+          fetch('/api/hub/messages?limit=50'),
+          fetch('/api/hub/tasks?limit=100'),
+        ]);
+        if (messageRes.status === 401 || taskRes.status === 401) {
           window.location.assign('/login');
           return;
         }
 
-        const data = await res.json();
-        setMessages(data.messages || []);
+        const [messageData, taskData] = await Promise.all([messageRes.json(), taskRes.json()]);
+        setMessages(messageData.messages || []);
+        setTasks(taskData.tasks || []);
       } catch {}
     };
-    fetchMessages();
-    const interval = setInterval(fetchMessages, 5000);
+    fetchFlows();
+    const interval = setInterval(fetchFlows, 5000);
     return () => clearInterval(interval);
   }, []);
 
@@ -886,7 +922,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
         });
       }
 
-      const links = buildFlowLinks(messages, positions);
+      const links = buildFlowLinks(messages, tasks, positions);
       const active = new Set<string>();
       links.forEach(link => { active.add(link.from); active.add(link.to); });
       // #111: one bounding box per multi-member group (Vincent 4722). Each
@@ -1063,6 +1099,39 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
       // secondary sort by key keeps equal-length lanes from jittering
       // between renders.
       lanes.sort((a, b) => b.members.length - a.members.length || a.key.localeCompare(b.key));
+      // Vincent 5923 (#181): keep related team lanes adjacent. Two teams
+      // are "related" when one's key is a substring of the other's
+      // (设计 ⊂ 海报设计师). Union-find over lane keys → substring-relation
+      // components; each component is emitted contiguously, anchored at its
+      // largest lane's size-sorted slot (lanes within a component stay
+      // size-desc). Unrelated teams keep their size order — this only stops
+      // a related pair from being split apart by an unrelated team.
+      {
+        const lp = lanes.map((_, i) => i);
+        const lfind = (i: number): number => {
+          while (lp[i] !== i) { lp[i] = lp[lp[i]]; i = lp[i]; }
+          return i;
+        };
+        for (let i = 0; i < lanes.length; i++) {
+          for (let j = i + 1; j < lanes.length; j++) {
+            const a = lanes[i].key, b = lanes[j].key;
+            if (a.length >= 2 && b.length >= 2 && (a.includes(b) || b.includes(a))) {
+              lp[lfind(i)] = lfind(j);
+            }
+          }
+        }
+        const seenRoot = new Set<number>();
+        const clustered: Lane[] = [];
+        for (let i = 0; i < lanes.length; i++) {
+          const root = lfind(i);
+          if (seenRoot.has(root)) continue;
+          seenRoot.add(root);
+          for (let j = i; j < lanes.length; j++) {
+            if (lfind(j) === root) clustered.push(lanes[j]);
+          }
+        }
+        lanes.splice(0, lanes.length, ...clustered);
+      }
 
       // each lane = a wide box; its members in a single row inside it.
       const laneStep = LANE_H + LANE_GAP;
@@ -1167,7 +1236,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
       // tree/swimlane. iter4 (a6689b6) suppressed them as "杂线"; Vincent
       // now explicitly wants them back — same buildFlowLinks the ring/grid
       // layouts use, drawn against the swimlane node positions.
-      const links = buildFlowLinks(messages, positions);
+      const links = buildFlowLinks(messages, tasks, positions);
       const active = new Set<string>();
       links.forEach(link => { active.add(link.from); active.add(link.to); });
 
@@ -1244,7 +1313,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
       positions[s.alias] = polarPoint(index, Math.max(offline.length, 1), offlineR, offlineRotation);
     });
 
-    const links = buildFlowLinks(messages, positions);
+    const links = buildFlowLinks(messages, tasks, positions);
     const active = new Set<string>();
     links.forEach(link => {
       active.add(link.from);
@@ -1269,7 +1338,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
       treeConnectors: { lines: [], synthLabels: [], synthRoot: false } as TreeLayout,
       treeContentBox: null as { x: number; y: number; w: number; h: number } | null,
     };
-  }, [messages, sessions, sseSessions, layout, nodeScale]);
+  }, [messages, tasks, sessions, sseSessions, layout, nodeScale]);
 
   const workingCount = onlineNodes.filter(s => s.status === 'working').length;
   // Round 744 / Loop: legend header node-count. The legend panel's header

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sleep2agi/agent-network-dashboard",
-  "version": "0.5.3-preview.263",
+  "version": "0.5.3-preview.266",
   "description": "Agent Network Dashboard \u2014 Web UI for managing AI Agent networks",
   "scripts": {
     "dev": "next dev",
@@ -44,4 +44,4 @@
     "tailwindcss": "^4",
     "typescript": "^5"
   }
-}
+}

package/scripts/topo-live-lanes.mjs

@@ -0,0 +1,48 @@
+/* #181 verify: load the LIVE dashboard (real ~99 sessions), tree/swimlane
+ * layout, dump team-lane order top→bottom + screenshot. Confirms 设计 lane
+ * sits adjacent to 海报设计师 (substring-related cluster). */
+import { chromium } from 'playwright';
+import { readFileSync, mkdirSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+mkdirSync('/tmp/anet-181', { recursive: true });
+const browser = await chromium.launch({ headless: true });
+const ctx = await browser.newContext({ viewport: { width: 1280, height: 920 } });
+await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+await ctx.addInitScript(() => {
+  try {
+    localStorage.setItem('anet-theme', 'cyber');
+    localStorage.removeItem('anet-brand');
+    localStorage.removeItem('anet-topo-view');
+    localStorage.setItem('anet-topo-layout', 'tree');
+    sessionStorage.setItem('anet_v3_auth', '1');
+  } catch {}
+});
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForFunction(() => {
+  const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+  return !!svg && svg.querySelectorAll('g[data-group]').length > 3;
+}, { timeout: 30000 }).catch(() => {});
+await page.waitForTimeout(1200);
+await page.evaluate(() => document.querySelector('svg[viewBox="0 0 1000 680"]')
+  ?.scrollIntoView({ behavior: 'instant', block: 'center' }));
+await page.waitForTimeout(400);
+
+const lanes = await page.evaluate(() => {
+  const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+  return [...svg.querySelectorAll('g[data-group]')]
+    .map(g => {
+      const r = g.querySelector('rect');
+      return { key: g.getAttribute('data-group'), y: +r.getAttribute('y'), x: +r.getAttribute('x') };
+    })
+    .sort((a, b) => a.y - b.y);
+});
+console.log('lane order (top → bottom):');
+lanes.forEach((l, i) => console.log(`  ${String(i + 1).padStart(2)}. ${l.key}  (y=${l.y.toFixed(0)}, x=${l.x.toFixed(0)})`));
+
+const svgEl = await page.$('svg[viewBox="0 0 1000 680"]');
+await svgEl.screenshot({ path: '/tmp/anet-181/swimlane-live.png', animations: 'disabled' });
+await ctx.close();
+await browser.close();
+console.log('screenshot: /tmp/anet-181/swimlane-live.png');