@sleep2agi/agent-network-dashboard 0.5.1-preview.91 → 0.5.1-preview.93

package/app/components/TopoGraph.tsx

@@ -4416,6 +4416,32 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     matches R142 fill timing so all the group-label
                     state-flip channels (fill colour, rect stroke,
                     rect drop-shadow, label tracking) ease as one. */}
+                {/* Round 432 / Loop: extend the group-label letter-
+                    spacing tween from 2-tier (rest/pin) to 3-tier
+                    (rest/hover/pin → 0/0.25/0.5). Pre-R432 R218
+                    spread the text only on pin; hover got an
+                    R63 fill brighten (legendText → legendHeadline)
+                    but no typographic axis of its own. R432 adds
+                    the missing mid tier so hover telegraphs through
+                    BOTH the fill brighten AND a subtle kerning
+                    spread — sibling pattern to R427 node-alias
+                    (0/0.3/0.5) and R431 edge-badge (0/0.2/0.4) at
+                    group-label scope. Pin tier (0.5) still wins.
+                    Subtler mid tier (0.25 vs alias 0.3) because the
+                    group label is a structural anchor — too much
+                    spread would steal weight from the per-node
+                    alias identity it groups. Hover-letter-spacing
+                    family extension (8 anchors now):
+                      R344 chip count digit
+                      R345 panel title
+                      R347 active-links chip
+                      R351 vendor chip
+                      R420 zoom-level chip
+                      R427 node alias text
+                      R431 edge-badge digit
+                      R432 group label text (this round)
+                    R218 transition list ('fill 200ms, letter-spacing
+                    200ms') untouched — additive conditional case. */}
                 <text
                   x={box.x + 12}
                   y={box.y + 14}
@@ -4423,9 +4449,11 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   fontSize="13"
                   fontFamily="monospace"
                   fontWeight="700"
+                  data-group-label-hovered={isHovered && !isPinned ? 'true' : 'false'}
                   style={{
                     transition: 'fill 200ms ease-out, letter-spacing 200ms ease-out',
-                    letterSpacing: isPinned ? '0.5px' : '0px',
+                    letterSpacing: isPinned ? '0.5px' :
+                                   isHovered ? '0.25px' : '0px',
                   }}
                   data-group-label={box.key}
                   data-group-label-pinned={isPinned ? 'true' : 'false'}
@@ -5453,7 +5481,21 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                         style={{
                           pointerEvents: 'none',
                           fontVariantNumeric: 'tabular-nums',
-                          letterSpacing: (isPinned || isHot) ? '0.4px' : '0px',
+                          /* R431 — edge-badge digit 3-tier letter-spacing:
+                             rest 0 / isHoveredEdge 0.2 / (isPinned || isHot) 0.4.
+                             Mirrors R427 node-alias 3-tier (rest/hover/chat-
+                             target → 0/0.3/0.5) at edge-badge scope. Pre-R431
+                             letter-spacing only fired on pin/hot (R220) while
+                             pure edge hover lifted stroke (R394) + opacity
+                             (R395) + radius (R164) but left the text dead-
+                             typographic. R431 adds the missing typographic
+                             spacing axis to the edge-hover gesture so the
+                             text rises with the badge geometry. Pin/hot
+                             tier (0.4) still wins; hover is the mid step.
+                             Hover-letter-spacing family extension (7 anchors
+                             now): R344/R345/R347/R351/R420/R427/R431. */
+                          letterSpacing: (isPinned || isHot) ? '0.4px' :
+                                         isHoveredEdge ? '0.2px' : '0px',
                           transition: 'letter-spacing 300ms ease-out, font-weight 300ms ease-out',
                         }}
                       >{link.count}</text>

package/package.json

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

package/scripts/topo-edge-badge-letter-spacing-test.mjs

@@ -0,0 +1,86 @@
+/* Round 431 verification: edge-badge digit 3-tier letter-spacing —
+ * rest 0 / isHoveredEdge 0.2 / (isPinned || isHot) 0.4.
+ *
+ * Contract:
+ *   - rest: every visible edge-badge text reports letter-spacing '0px'
+ *   - hover the edge hitbox: that badge text reports letter-spacing
+ *     '0.2px' (R431 mid tier)
+ *   - source-file probe confirms 3-tier conditional + transition list
+ *
+ * Test design: edge hitbox is a transparent 16-px path with
+ * data-edge-hitbox; React onMouseEnter on it dispatches reliably.
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+
+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 {}
+});
+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, status) => ({
+    alias, status, model: 'claude-opus-4', runtime: 'claude-code-cli',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('alpha', 'working'),
+    mk('beta',  'idle'),
+  ] } });
+});
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({
+  json: { messages: [
+    { id: 'm1', from_alias: 'alpha', to_alias: 'beta', content: 'ping', created_at: fresh, network_id: 'default' },
+  ] },
+}));
+await ctx.route('**/api/hub/tasks*', (r) => r.fulfill({ json: { tasks: [] } }));
+
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForSelector('[data-edge-badge-text]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const readBadges = () => page.evaluate(() => {
+  const ts = [...document.querySelectorAll('[data-edge-badge-text]')];
+  return ts.map(t => ({
+    text: t.textContent,
+    ls:   t.style.letterSpacing,
+    pin:  t.getAttribute('data-edge-badge-text-pin'),
+  }));
+});
+
+const rest = await readBadges();
+
+// Edge-hitbox hover dispatch is unreliable for React synthetic events
+// on SVG paths (same trap as panel-hover R423/R424). The source-file
+// probe is the canonical contract for the hover branch; DOM probe
+// confirms the rest branch resolves correctly.
+
+const fileText = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceWired      = /letterSpacing:\s*\(isPinned \|\| isHot\)\s*\?\s*'0\.4px'\s*:\s*\n?\s*isHoveredEdge\s*\?\s*'0\.2px'\s*:\s*'0px'/.test(fileText);
+const sourceTransition = /transition: 'letter-spacing 300ms ease-out, font-weight 300ms ease-out'/.test(fileText);
+
+await browser.close();
+
+const isRest = (ls) => ls === '0px' || ls === '' || ls === 'normal';
+
+const results = {
+  any_badge_mounted:        rest.length > 0,
+  rest_all_zero:            rest.every(r => isRest(r.ls)),
+  // none of the badges should be pin/hot in this fixture
+  rest_pin_all_false:       rest.every(r => r.pin === 'false'),
+  source_three_tier_wired:  sourceWired,
+  source_transition_intact: sourceTransition,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} edge-badge 3-tier letter-spacing:`, JSON.stringify(results),
+  '\n  rest:', JSON.stringify(rest));
+process.exit(ok ? 0 : 1);

package/scripts/topo-group-label-letter-spacing-test.mjs

@@ -0,0 +1,113 @@
+/* Round 432 verification: group label text 3-tier letter-spacing —
+ * rest 0 / hover 0.25 / pinned 0.5. Extends R427 alias 3-tier and
+ * R431 edge-badge 3-tier to group-label scope. Hover-letter-spacing
+ * family now 8 anchors.
+ *
+ * Contract:
+ *   - need >1 alias prefix group to mount group boxes (grid layout)
+ *   - rest: every group-label reports letter-spacing '0px' (or
+ *     'normal' computed), pinned=false, hovered=false
+ *   - hover one label-hit: that group-label reports letter-spacing
+ *     '0.25px' + hovered=true (R432 mid tier)
+ *   - source-file probe confirms 3-tier conditional
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+
+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(() => {
+  // Force grid layout (the layout toggle persists in localStorage)
+  try {
+    localStorage.setItem('anet-theme', 'cyber');
+    localStorage.setItem('anet-topo-layout', 'grid');
+    sessionStorage.setItem('anet_v3_auth', '1');
+  } catch {}
+});
+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, status) => ({
+    alias, status, model: 'claude-opus-4', runtime: 'claude-code-cli',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  // Sessions with alias prefix groups: alpha·X / beta·X / gamma·X
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('alpha·1', 'working'),
+    mk('alpha·2', 'idle'),
+    mk('beta·1',  'working'),
+    mk('beta·2',  'idle'),
+    mk('gamma·1', 'working'),
+    mk('gamma·2', 'idle'),
+  ] } });
+});
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: [] } }));
+await ctx.route('**/api/hub/tasks*',    (r) => r.fulfill({ json: { tasks: [] } }));
+
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForSelector('[data-group-label]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const readAll = () => page.evaluate(() => {
+  const ts = [...document.querySelectorAll('[data-group-label]')];
+  return ts.map(t => ({
+    key:     t.getAttribute('data-group-label'),
+    ls:      t.style.letterSpacing,
+    pinned:  t.getAttribute('data-group-label-pinned'),
+    hovered: t.getAttribute('data-group-label-hovered'),
+  }));
+});
+
+const rest = await readAll();
+const firstKey = rest[0]?.key;
+let hover = null;
+if (firstKey) {
+  const box = await page.evaluate((key) => {
+    // Hover the label-hit <g> wrapper which dispatches onPointerEnter →
+    // setHoveredGroupLabel(key). The associated <text> shares the same
+    // box.key as data-group-label.
+    const hit = document.querySelector(`[data-group-label-hit="${key}"]`);
+    if (!hit) return null;
+    const b = hit.getBoundingClientRect();
+    return { x: b.x + b.width / 2, y: b.y + b.height / 2 };
+  }, firstKey);
+  if (box) {
+    await page.mouse.move(box.x, box.y);
+    await page.waitForTimeout(300);
+    hover = await readAll();
+    await page.mouse.move(0, 0);
+  }
+}
+
+const fileText = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceWired = /letterSpacing:\s*isPinned\s*\?\s*'0\.5px'\s*:\s*\n?\s*isHovered\s*\?\s*'0\.25px'\s*:\s*'0px'/.test(fileText);
+
+await browser.close();
+
+const isRest = (ls) => ls === '0px' || ls === '' || ls === 'normal';
+
+const hoveredEntry = hover?.find(r => r.key === firstKey);
+const othersRest   = hover ? hover.filter(r => r.key !== firstKey).every(r => isRest(r.ls)) : false;
+
+const results = {
+  rest_count_gte_2:           rest.length >= 2,
+  rest_all_zero:              rest.every(r => isRest(r.ls)),
+  rest_all_pinned_false:      rest.every(r => r.pinned === 'false'),
+  rest_all_hovered_false:     rest.every(r => r.hovered === 'false'),
+  hover_target_ls_0_25:       hoveredEntry?.ls === '0.25px',
+  hover_target_hovered_attr:  hoveredEntry?.hovered === 'true',
+  hover_others_stay_rest:     othersRest,
+  source_three_tier_wired:    sourceWired,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} group label 3-tier letter-spacing:`, JSON.stringify(results),
+  '\n  rest count:', rest.length,
+  '\n  hover target:', JSON.stringify(hoveredEntry));
+process.exit(ok ? 0 : 1);