@sleep2agi/agent-network-dashboard 0.4.6-preview.269 → 0.4.6-preview.270

package/.next/trace-build

@@ -1 +1 @@
-[{"name":"run-turbopack","duration":5796564,"timestamp":98311323948,"id":14,"parentId":1,"tags":{},"startTime":1778906283570,"traceId":"8da832511d88b20c"},{"name":"turbopack-build-events","duration":111,"timestamp":98311622565,"id":15,"parentId":1,"tags":{},"startTime":1778906283869,"traceId":"8da832511d88b20c"},{"name":"run-typescript","duration":9104123,"timestamp":98317128755,"id":16,"parentId":1,"tags":{},"startTime":1778906289375,"traceId":"8da832511d88b20c"},{"name":"static-check","duration":842836,"timestamp":98326423494,"id":19,"parentId":1,"tags":{},"startTime":1778906298670,"traceId":"8da832511d88b20c"},{"name":"static-generation","duration":616908,"timestamp":98327278079,"id":105,"parentId":1,"tags":{},"startTime":1778906299524,"traceId":"8da832511d88b20c"},{"name":"telemetry-flush","duration":26612,"timestamp":98327924771,"id":114,"parentId":1,"tags":{},"startTime":1778906300171,"traceId":"8da832511d88b20c"},{"name":"next-build","duration":16854363,"timestamp":98311097051,"id":1,"tags":{"buildMode":"default","version":"16.2.3","bundler":"turbopack","has-custom-webpack-config":"false","use-build-worker":"true"},"startTime":1778906283343,"traceId":"8da832511d88b20c"}]
+[{"name":"run-turbopack","duration":5482839,"timestamp":98567417159,"id":14,"parentId":1,"tags":{},"startTime":1778906539663,"traceId":"ffd68e306572177d"},{"name":"turbopack-build-events","duration":110,"timestamp":98567714465,"id":15,"parentId":1,"tags":{},"startTime":1778906539961,"traceId":"ffd68e306572177d"},{"name":"run-typescript","duration":8764515,"timestamp":98572908942,"id":16,"parentId":1,"tags":{},"startTime":1778906545155,"traceId":"ffd68e306572177d"},{"name":"static-check","duration":691817,"timestamp":98581855064,"id":19,"parentId":1,"tags":{},"startTime":1778906554101,"traceId":"ffd68e306572177d"},{"name":"static-generation","duration":574442,"timestamp":98582558784,"id":105,"parentId":1,"tags":{},"startTime":1778906554805,"traceId":"ffd68e306572177d"},{"name":"telemetry-flush","duration":40436,"timestamp":98583166869,"id":114,"parentId":1,"tags":{},"startTime":1778906555413,"traceId":"ffd68e306572177d"},{"name":"next-build","duration":16009809,"timestamp":98567197521,"id":1,"tags":{"buildMode":"default","version":"16.2.3","bundler":"turbopack","has-custom-webpack-config":"false","use-build-worker":"true"},"startTime":1778906539444,"traceId":"ffd68e306572177d"}]

package/app/components/TopoGraph.tsx

@@ -2484,11 +2484,26 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
            visually anchoring the snap. R253 declared
            "no visible snap remains" prematurely — this wrapper was
            the largest holdout. 200ms ease-out matches the panel
-           treatment (R247) so wrapper + panels ease as one unit. */
+           treatment (R247) so wrapper + panels ease as one unit.
+
+           Round 263 / Loop: close R254's holdover gap — the wrapper's
+           shadow-2xl + theme-conditional `shadow-{color}/{opacity}`
+           Tailwind class (cyber `shadow-cyan-950/30` ↔ light
+           `shadow-zinc-900/5`) ALSO changes on theme toggle, but the
+           inline transition list only covered background-color +
+           border-color. Result: every inner element eased through
+           theme, the wrapper bg/border eased, but the wrapper's
+           DROP-SHADOW snapped — a subtle but real holdover from
+           R254's "TRULY complete" claim. Adding `box-shadow 200ms
+           ease-out` to the transition list catches the className-
+           driven box-shadow swap (CSS transition on box-shadow eases
+           the shadow property even when its color comes from a
+           Tailwind class change, because the property itself is
+           transition-eligible regardless of source). */
         style={{
           background: pal.containerBg,
           borderColor: pal.containerBorder,
-          transition: 'background-color 200ms ease-out, border-color 200ms ease-out',
+          transition: 'background-color 200ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out',
         }}
       >
         <div className={`absolute inset-x-0 top-0 h-px bg-gradient-to-r ${pal.topRailGradient}`} />

package/package.json

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

package/scripts/topo-wrapper-shadow-theme-ease-test.mjs

@@ -0,0 +1,89 @@
+/* Round 263 verification: wrapper box-shadow joins the theme-toggle
+ * transition list — closes R254's holdover gap.
+ *
+ * Pre-R263 the wrapper's inline transition was:
+ *   transition: 'background-color 200ms ease-out, border-color 200ms ease-out'
+ *
+ * The Tailwind class `shadow-2xl ${isLight ? 'shadow-zinc-900/5'
+ * : 'shadow-cyan-950/30'}` is THEME-CONDITIONAL — on cyber→light
+ * toggle the className swap changes box-shadow color (cyan-950 30%
+ * ↔ zinc-900 5%) but the transition list didn't include box-shadow,
+ * so the shadow SNAPPED while every other theme-driven element eased.
+ *
+ * R254 claimed "TopoGraph theme-toggle smoothness TRULY complete" but
+ * missed this one surface. R263 closes it:
+ *   transition: '... , box-shadow 200ms ease-out'
+ *
+ * CSS box-shadow transitions interpolate the shadow color smoothly
+ * even when the value is set indirectly via a Tailwind class — the
+ * `transition` property targets the box-shadow CSS property itself,
+ * which is transition-eligible regardless of where the new value
+ * comes from (class change vs inline style change).
+ *
+ * Test scope:
+ *   1. Wrapper present.
+ *   2. Wrapper inline transition includes box-shadow at 200ms (or 0.2s).
+ *   3. R254 invariants intact: still has background-color + border-color
+ *      transitions.
+ *   4. Wrapper has a non-empty box-shadow at rest (regression — confirms
+ *      the shadow class actually applies).
+ */
+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('alpha'), mk('beta'), mk('gamma'), mk('delta'),
+  ] } });
+});
+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.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 4, { timeout: 30000 });
+await page.waitForSelector('[data-topo-wrapper]', { timeout: 10000 });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  const w = document.querySelector('[data-topo-wrapper]');
+  return {
+    transition:  w?.style.transition ?? null,
+    boxShadow:   w ? window.getComputedStyle(w).boxShadow : null,
+  };
+});
+await browser.close();
+
+const has = (s, prop) => new RegExp(`${prop}\\s+(?:200ms|0\\.2s)`).test(s || '');
+
+const results = {
+  wrapper_present:                probe.transition !== null,
+  transition_has_box_shadow_200:  has(probe.transition, 'box-shadow'),
+  // R254 regressions
+  transition_has_bg_color_200:    has(probe.transition, 'background-color'),
+  transition_has_border_color_200: has(probe.transition, 'border-color'),
+  // Wrapper actually carries a box-shadow at rest (else the transition
+  // would have nothing to interpolate). 'none' = no shadow applied.
+  wrapper_has_non_empty_shadow:   probe.boxShadow !== null && probe.boxShadow !== 'none' && probe.boxShadow.length > 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} wrapper shadow theme ease:`, JSON.stringify(results),
+  '\n  transition:', probe.transition,
+  '\n  boxShadow:', probe.boxShadow);
+process.exit(ok ? 0 : 1);