@sleep2agi/agent-network-dashboard 0.5.1-preview.27 → 0.5.1-preview.29

package/app/components/TopoGraph.tsx

@@ -4776,14 +4776,37 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                           R251 closes the per-edge surface theme-toggle
                           smoothness — every theme-driven property on
                           every edge element now eases under cyber↔light. */}
+                      {/* Round 367 / Loop: edge midpoint badge rest
+                          stroke-width 1 → 1.25. Sibling visual-weight
+                          bump family (7th canvas anchor now):
+                            R287 minimap viewport stroke 1 → 1.5
+                            R295 legend swatch base radius 5.5 → 6
+                            R359 recent-row pip base radius 1.6 → 1.8
+                            R360 hub digit fontSize 11 → 12
+                            R361 edge-badge digit fontSize 10 → 11
+                            R365 hub-highlight base radius 5 → 5.5
+                            R367 edge-badge rest stroke 1 → 1.25 (this round)
+                          Cold edge badges gain ~25 % stroke presence
+                          (1.25/1.0 = 1.25). Stays clear of the R51
+                          overlap-test sentinel values (1.5 / 3 reserved
+                          for node strokes — the test selector is gated
+                          to g[data-node] ancestors so this edge-internal
+                          circle is invisible to that probe anyway, but
+                          1.25 is a safe non-sentinel value regardless).
+                          R188 transition list 'stroke-width 300ms ease-
+                          out' still smoothes the hot/pin flip — now
+                          1.25 → 2 instead of 1 → 2, same ease pace.
+                          data-edge-badge-stroke-width-rest exposes the
+                          new baseline for tests. */}
                       <circle
                         cx={badgeX} cy={badgeY}
                         r={isHoveredEdge || isPinned ? 10.5 : 9}
                         fill={pal.legendBox.fill}
                         stroke={isPinned ? pal.legendHeadline : isHot ? hotStroke : pal.flowEdge}
-                        strokeWidth={isPinned ? 2 : isHot ? 2 : 1}
+                        strokeWidth={isPinned ? 2 : isHot ? 2 : 1.25}
                         opacity={isLight ? 0.95 : 0.82}
                         data-edge-badge-lifted={(isHoveredEdge || isPinned) ? 'true' : 'false'}
+                        data-edge-badge-stroke-width-rest="1.25"
                         style={{ transition: 'r 180ms ease-out, stroke 300ms ease-out, stroke-width 300ms ease-out, fill 200ms ease-out, opacity 200ms ease-out' }}
                       />
                       {/* Round 224 / Loop: edge badge text gains the 4th
@@ -7463,6 +7486,23 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       surface. transition list extends letter-spacing
                       200ms ease-out alongside the existing opacity/
                       fill easings. */}
+                  {/* Round 368 / Loop: `+N more flows` footer text gains
+                      fontWeight=500 (font-medium tier). Sibling small-
+                      text fw lift family with R363 recent-row alias
+                      + R364 legend-row label + R366 group-label count
+                      — all four lifts share the same theory: at small
+                      fontSize (9-11 px) against panel chrome, SVG-
+                      default fw 400 sits at the legibility floor;
+                      fw 500 brings the glyph into the deliberate-data
+                      band. fontStyle=italic + opacity 0.55 rest + R325
+                      letterSpacing 0.2 baseline + R344 hover-spread
+                      0.2 → 0.3 + R195 cyan fill on hover all preserved
+                      — the fw bump just thickens the italic stroke.
+                      Hover-state punch (R195 fill + R325 opacity 0.55
+                      → 0.85 + R344 letter-spacing + R133 underline)
+                      stays as is, so the rest-vs-hover delta still
+                      reads clearly. data-recent-panel-more-font-weight
+                      attr exposes the value for tests. */}
                   <text
                     x="115" y="82"
                     textAnchor="middle"
@@ -7470,11 +7510,13 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     fontSize="9"
                     fontFamily="monospace"
                     fontStyle="italic"
+                    fontWeight="500"
                     letterSpacing={hoveredRecentMore ? '0.3' : '0.2'}
                     opacity={hoveredRecentMore ? 0.85 : 0.55}
                     textDecoration={hoveredRecentMore ? 'underline' : 'none'}
                     data-recent-panel-more={moreCount}
                     data-recent-panel-more-hovered={hoveredRecentMore ? 'true' : 'false'}
+                    data-recent-panel-more-font-weight="500"
                     style={{ transition: 'opacity 150ms ease-out, fill 200ms ease-out, letter-spacing 200ms ease-out' }}
                   >
                     {`+ ${moreCount}`}

package/package.json

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

package/scripts/topo-edge-badge-stroke-test.mjs

@@ -0,0 +1,92 @@
+/* Round 367 verification: edge midpoint badge rest stroke-width
+ * 1 → 1.25. Sibling visual-weight bump (7th canvas anchor in the
+ * R287/R295/R359/R360/R361/R365/R367 family).
+ *
+ * Cold edge badges gain ~25 % stroke presence. Stays clear of the
+ * R51 overlap-test sentinel values (1.5 / 3 reserved for node
+ * strokes — the test selector is gated to g[data-node] ancestors
+ * so this edge-internal circle is invisible to that probe anyway).
+ * R188 transition list 'stroke-width 300ms ease-out' still smoothes
+ * the hot/pin flip — now 1.25 → 2 instead of 1 → 2.
+ *
+ * Contract (cyber, fixture with cold flow):
+ *   - Edge badge circle stroke-width attr === '1.25'.
+ *   - data-edge-badge-stroke-width-rest === '1.25'.
+ *   - data-edge-badge-lifted === 'false' (rest, not hovered/pinned).
+ *   - data-edge-badge-text-pin === 'false' (cold flow, link.count<10).
+ *   - Inline transition contains 'stroke-width' (R188 preserved).
+ *   - Pre-R367 invariants: r=9 (cold, R164), fill=pal.legendBox.fill,
+ *     stroke=pal.flowEdge (cold), opacity 0.82 (cyber).
+ */
+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) => ({
+    alias, status: 'working', 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('a'), mk('b') ] } });
+});
+// 1 message → 1 cold flow (count=1, well below R129 isHot=10).
+const now = Date.now();
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: [
+  { id: 'm1', from_alias: 'a', to_alias: 'b', content: 'ping',
+    network_id: 'default', created_at: new Date(now - 5000).toISOString() },
+] } }));
+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-stroke-width-rest]', { timeout: 15000 });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  // Probe the cold/rest edge badge circle (the parent of data-edge-badge-text
+  // is the <g> wrapping circle + text; we want the circle sibling).
+  const circle = document.querySelector('[data-edge-badge-stroke-width-rest]');
+  const cs = circle ? getComputedStyle(circle) : null;
+  // Find the text in the same group to check pin state.
+  const grp = circle?.parentElement;
+  const text = grp?.querySelector('[data-edge-badge-text]');
+  return {
+    strokeWidthAttr: circle?.getAttribute('stroke-width') ?? null,
+    strokeWidthData: circle?.getAttribute('data-edge-badge-stroke-width-rest') ?? null,
+    liftedAttr:      circle?.getAttribute('data-edge-badge-lifted') ?? null,
+    rAttr:           circle?.getAttribute('r') ?? null,
+    opacityAttr:     circle?.getAttribute('opacity') ?? null,
+    transition:      cs?.transition ?? null,
+    pinAttr:         text?.getAttribute('data-edge-badge-text-pin') ?? null,
+  };
+});
+
+await browser.close();
+
+const hasTrans = (s, prop) =>
+  new RegExp(`${prop}\\s+\\d*\\.?\\d*s|${prop}\\s+\\d+ms`, 'i').test(s || '');
+
+const results = {
+  stroke_width_1_25:    probe.strokeWidthAttr === '1.25',
+  data_stroke_1_25:     probe.strokeWidthData === '1.25',
+  lifted_false_rest:    probe.liftedAttr === 'false',
+  r_9_cold:             probe.rAttr === '9',                   // R164 cold
+  opacity_0_82_cyber:   probe.opacityAttr === '0.82',          // R251 cyber theme
+  trans_has_strokew:    hasTrans(probe.transition, 'stroke-width'),  // R188
+  cold_flow_not_hot:    probe.pinAttr === 'false',             // R220 isHot/isPinned both false
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} edge badge stroke 1 → 1.25:`, JSON.stringify(results),
+  '\n  probe:', probe);
+process.exit(ok ? 0 : 1);

package/scripts/topo-more-flows-fontweight-test.mjs

@@ -0,0 +1,103 @@
+/* Round 368 verification: recent-panel '+N more flows' footer text
+ * fontWeight 400 → 500. Sibling small-text fw lift family with R363
+ * recent-row alias + R364 legend-row label + R366 group-label count
+ * — all four lifts thicken small-fontSize text (9-11 px) against
+ * panel chrome from SVG-default 400 to the font-medium tier (500).
+ *
+ * The footer only renders when flowLinks.length > 3 (the panel shows
+ * the 3 most recent + a footer link to /messages for the overflow).
+ *
+ * Contract (cyber, 5+ flow links so the footer mounts):
+ *   - data-recent-panel-more text element font-weight === '500'.
+ *   - data-recent-panel-more-font-weight === '500'.
+ *   - Pre-R368 invariants on the same element:
+ *     * fontSize='9' + fontFamily='monospace' + fontStyle='italic'
+ *     * letter-spacing='0.2' (R325 rest baseline)
+ *     * opacity='0.55' (rest, R325 era)
+ *     * inline transition lists opacity + letter-spacing + fill
+ *     * data-recent-panel-more attr surfaces the count
+ *     * data-recent-panel-more-unit tspan with opacity 0.7 (R340)
+ */
+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) => ({
+    alias, status: 'working', 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('a'), mk('b'), mk('c'), mk('d'), mk('e'),
+  ] } });
+});
+// 5 distinct flow links → panel shows 3 + footer "+ 2 more flows".
+const now = Date.now();
+const pairs = [['a','b'], ['c','d'], ['a','c'], ['b','d'], ['e','a']];
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages:
+  pairs.map(([from, to], idx) => ({
+    id: `m${idx}`, from_alias: from, to_alias: to, content: `ping ${idx}`,
+    network_id: 'default',
+    created_at: new Date(now - (5000 + idx * 1000)).toISOString(),
+  }))
+} }));
+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-recent-panel-more]', { timeout: 15000 });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  const t = document.querySelector('[data-recent-panel-more]');
+  const unit = document.querySelector('[data-recent-panel-more-unit]');
+  const cs = t ? getComputedStyle(t) : null;
+  return {
+    fontWeightAttr:  t?.getAttribute('font-weight') ?? null,
+    fontWeightData:  t?.getAttribute('data-recent-panel-more-font-weight') ?? null,
+    fontSizeAttr:    t?.getAttribute('font-size') ?? null,
+    fontFamily:      t?.getAttribute('font-family') ?? null,
+    fontStyle:       t?.getAttribute('font-style') ?? null,
+    letterSpacing:   t?.getAttribute('letter-spacing') ?? null,
+    opacityAttr:     t?.getAttribute('opacity') ?? null,
+    moreCount:       t?.getAttribute('data-recent-panel-more') ?? null,
+    hoveredAttr:     t?.getAttribute('data-recent-panel-more-hovered') ?? null,
+    transition:      cs?.transition ?? null,
+    unitOpacity:     unit?.getAttribute('opacity') ?? null,
+  };
+});
+
+await browser.close();
+
+const hasTrans = (s, prop) =>
+  new RegExp(`${prop}\\s+\\d*\\.?\\d*s|${prop}\\s+\\d+ms`, 'i').test(s || '');
+
+const results = {
+  font_weight_500:        probe.fontWeightAttr === '500',
+  data_fw_500:            probe.fontWeightData === '500',
+  font_size_9:            probe.fontSizeAttr === '9',
+  font_family_mono:       /monospace/i.test(probe.fontFamily || ''),
+  font_style_italic:      probe.fontStyle === 'italic',     // pre-R368
+  letter_spacing_0_2:     probe.letterSpacing === '0.2',    // R325 rest
+  opacity_0_55_rest:      probe.opacityAttr === '0.55',     // R325 era rest
+  more_count_2:           probe.moreCount === '2',          // 5 links - 3 shown
+  hovered_false_rest:     probe.hoveredAttr === 'false',
+  trans_has_letterspacing: hasTrans(probe.transition, 'letter-spacing'),
+  trans_has_fill:         hasTrans(probe.transition, 'fill'),
+  unit_opacity_0_7:       probe.unitOpacity === '0.7',      // R340 unit split
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} more-flows footer fw 400 → 500:`, JSON.stringify(results),
+  '\n  probe:', probe);
+process.exit(ok ? 0 : 1);