@sleep2agi/agent-network-dashboard 0.4.6-preview.240 → 0.4.6-preview.241

package/.next/trace-build

@@ -1 +1 @@
-[{"name":"run-turbopack","duration":12521599,"timestamp":86774832121,"id":14,"parentId":1,"tags":{},"startTime":1778894747078,"traceId":"f4846168b12efd2d"},{"name":"turbopack-build-events","duration":114,"timestamp":86775340345,"id":15,"parentId":1,"tags":{},"startTime":1778894747587,"traceId":"f4846168b12efd2d"},{"name":"run-typescript","duration":15838494,"timestamp":86787370203,"id":16,"parentId":1,"tags":{},"startTime":1778894759616,"traceId":"f4846168b12efd2d"},{"name":"static-check","duration":1244768,"timestamp":86803478182,"id":19,"parentId":1,"tags":{},"startTime":1778894775724,"traceId":"f4846168b12efd2d"},{"name":"static-generation","duration":847992,"timestamp":86804754684,"id":105,"parentId":1,"tags":{},"startTime":1778894777001,"traceId":"f4846168b12efd2d"},{"name":"telemetry-flush","duration":28892,"timestamp":86805647765,"id":114,"parentId":1,"tags":{},"startTime":1778894777894,"traceId":"f4846168b12efd2d"},{"name":"next-build","duration":31198890,"timestamp":86774477809,"id":1,"tags":{"buildMode":"default","version":"16.2.3","bundler":"turbopack","has-custom-webpack-config":"false","use-build-worker":"true"},"startTime":1778894746724,"traceId":"f4846168b12efd2d"}]
+[{"name":"run-turbopack","duration":11285314,"timestamp":87198558526,"id":14,"parentId":1,"tags":{},"startTime":1778895170805,"traceId":"663214f164c3f4d7"},{"name":"turbopack-build-events","duration":110,"timestamp":87198985660,"id":15,"parentId":1,"tags":{},"startTime":1778895171232,"traceId":"663214f164c3f4d7"},{"name":"run-typescript","duration":13651873,"timestamp":87209857016,"id":16,"parentId":1,"tags":{},"startTime":1778895182103,"traceId":"663214f164c3f4d7"},{"name":"static-check","duration":1631219,"timestamp":87223738454,"id":19,"parentId":1,"tags":{},"startTime":1778895195985,"traceId":"663214f164c3f4d7"},{"name":"static-generation","duration":1027382,"timestamp":87225388959,"id":105,"parentId":1,"tags":{},"startTime":1778895197635,"traceId":"663214f164c3f4d7"},{"name":"telemetry-flush","duration":10420,"timestamp":87226488404,"id":114,"parentId":1,"tags":{},"startTime":1778895198735,"traceId":"663214f164c3f4d7"},{"name":"next-build","duration":28236152,"timestamp":87198262719,"id":1,"tags":{"buildMode":"default","version":"16.2.3","bundler":"turbopack","has-custom-webpack-config":"false","use-build-worker":"true"},"startTime":1778895170509,"traceId":"663214f164c3f4d7"}]

package/app/components/TopoGraph.tsx

@@ -2145,8 +2145,23 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     role="button"
                     tabIndex={0}
                     aria-pressed={isPinned}
-                    className="inline-flex items-baseline gap-0.5 px-1 rounded anet-topo-chip-focus"
+                    /* Round 234 / Loop: vendor letter chip picks up
+                       tabular-nums to lock the ':N' suffix's digit
+                       width. Each vendor chip renders 'A:3', 'C:2',
+                       etc. inline at gap-0.5 — when one vendor's
+                       count rolls 9→10 the chip widens by the digit
+                       glyph delta and pushes downstream chips right,
+                       making the row visibly jitter. 8th surface
+                       in the info-density tabular-nums sweep,
+                       completing the HTML chip-side coverage after
+                       R232 working/online/active-links chips. The
+                       digit lives in the inner <span> at line 2194,
+                       but font-variant-numeric inherits, so applying
+                       it at the outer chip span reaches every
+                       descendant glyph for free. */
+                    className="tabular-nums inline-flex items-baseline gap-0.5 px-1 rounded anet-topo-chip-focus"
                     data-vendor-letter={v.initial}
+                    data-vendor-letter-count={v.count}
                     data-vendor-pinned={isPinned ? 'true' : 'false'}
                     data-vendor-hovered={hoveredVendor === v.initial ? 'true' : 'false'}
                     data-vendor-aliases={aliases.join(',')}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sleep2agi/agent-network-dashboard",
-  "version": "0.4.6-preview.240",
+  "version": "0.4.6-preview.241",
   "description": "Agent Network Dashboard — Web UI for managing AI Agent networks",
   "scripts": {
     "dev": "next dev",

package/scripts/topo-vendor-chip-tabular-test.mjs

@@ -0,0 +1,89 @@
+/* Round 234 verification: vendor letter chip (the inline chips
+ * showing 'A:3', 'C:2', etc. listing per-vendor session counts)
+ * picks up the Tailwind `tabular-nums` utility so its ':N' suffix
+ * digit doesn't reflow the chip row at the 9→10 boundary.
+ *
+ * 8th surface in the info-density tabular-nums sweep, completing
+ * the HTML chip-side after R232's working/online/active-links.
+ *
+ * Scenario: 4 working agents split across two vendors — 3 on
+ * claude-opus-4 (initial 'A') and 1 on gpt-4 (initial 'O') — so
+ * vendorDist.length === 2, which is the condition gating the
+ * chip strip render (line ~2116, `vendorDist.length > 1 && ...`).
+ * Expect two chips: A:3 and O:1.
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const browser = await chromium.launch({ headless: true });
+const ctx = await browser.newContext({ viewport: { width: 1500, height: 1500 } });
+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'); sessionStorage.setItem('anet_v3_auth', '1'); } catch {}
+});
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+await ctx.route('**/api/hub/status*', async (route) => {
+  const r = await route.fetch();
+  const b = await r.json();
+  const nid = (b.sessions || [])[0]?.network_id || 'default';
+  const mk = (alias, model) => ({
+    alias, status: 'working', model, runtime: 'claude-code-cli',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  // Mix 3 claude-opus-4 (vendor 'A') + 1 gpt-4 (vendor 'O') so
+  // vendorDist.length === 2 — chip strip render gate (line ~2116).
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('alpha', 'claude-opus-4'),
+    mk('beta',  'claude-opus-4'),
+    mk('gamma', 'claude-opus-4'),
+    mk('delta', 'gpt-4'),
+  ] } });
+});
+await ctx.route('**/api/hub/messages*', (r2) => r2.fulfill({ json: { messages: [] } }));
+await ctx.route('**/api/hub/tasks*', (r2) => r2.fulfill({ json: { tasks: [] } }));
+
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 4, { timeout: 30000 });
+await page.waitForSelector('[data-vendor-letter]', { timeout: 10000, state: 'attached' });
+await page.waitForTimeout(300);
+
+const out = await page.evaluate(() => {
+  const chips = Array.from(document.querySelectorAll('[data-vendor-letter]'));
+  return chips.map((c) => ({
+    initial:         c.getAttribute('data-vendor-letter'),
+    countAttr:       c.getAttribute('data-vendor-letter-count'),
+    classListHas:    c.className.split(/\s+/).includes('tabular-nums'),
+    fontVarNumeric:  getComputedStyle(c).fontVariantNumeric,
+    text:            (c.textContent || '').trim(),
+    // Inner ':N' suffix span — verify font-variant-numeric inherits
+    innerFvn:        (() => {
+      const inner = c.querySelectorAll('span');
+      // last span is the gray ':N' suffix
+      const last = inner[inner.length - 1];
+      return last ? getComputedStyle(last).fontVariantNumeric : null;
+    })(),
+  }));
+});
+await browser.close();
+
+const hasTab = (s) => /tabular-nums/.test(s || '');
+
+// Build a map of initial → count from the chips we found.
+const countByInitial = Object.fromEntries(out.map(o => [o.initial, o.countAttr]));
+const results = {
+  two_chips:               out.length === 2,
+  all_have_initial:        out.every(o => typeof o.initial === 'string' && o.initial.length === 1),
+  anthropic_count_3:       countByInitial['A'] === '3',
+  openai_count_1:          countByInitial['O'] === '1',
+  all_class_utility:       out.every(o => o.classListHas === true),
+  all_fvn_tabular:         out.every(o => hasTab(o.fontVarNumeric)),
+  all_inner_fvn_inherits:  out.every(o => hasTab(o.innerFvn)),
+  texts_match_counts:      out.every(o => new RegExp(`:${o.countAttr}$`).test(o.text)),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} vendor chip tabular:`, JSON.stringify(results),
+  '\n  chips:', out);
+process.exit(ok ? 0 : 1);