@sleep2agi/agent-network-dashboard 0.5.2-preview.9 → 0.5.3-preview.0

package/app/components/TopoGraph.tsx

@@ -759,28 +759,38 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
         else runs.push({ key: gk, members: [s] });
       }
 
-      // Pass 1 — assign each run to a band: a multi-member group owns its
-      // rows (left-aligned, so its bounding box is a tidy rect); contiguous
-      // singletons pack into shared rows (centred). Collect total row count.
-      type Band = { members: Session[]; startRow: number; centred: boolean; isGroup: boolean };
+      // Pass 1 — assign each run to a band.
+      //
+      // v0.10.4 #150 (Vincent /goal 5453): "不是一起的落单的怎么散落在中间了".
+      // Pre-#150 algo interleaved singletons between real groups as
+      // centred bands, so orphan nodes appeared scattered in the middle
+      // between cluster boxes. Vincent screenshot called this out as
+      // "layout 算法一点都不好". Fix: bundle ALL singletons into ONE
+      // band at the bottom of the grid + render an "其他" cluster box
+      // around them. Multi-member prefix groups still go first in
+      // alias order (existing #83/#111 behaviour). Net effect:
+      //   row 0..N-1: real prefix groups (left-aligned, own cluster box)
+      //   row N..M:   single "其他" band collecting all orphans
+      //               (left-aligned, single cluster box at bottom)
+      // No orphans → no orphan band → behaviour identical to pre-#150
+      // for fleets where every node has a prefix-group match.
+      type Band = { members: Session[]; startRow: number; centred: boolean; isGroup: boolean; isOrphan?: boolean };
       const bands: Band[] = [];
       let row = 0;
-      let i = 0;
-      while (i < runs.length) {
-        if (runs[i].members.length >= 2) {
-          bands.push({ members: runs[i].members, startRow: row, centred: false, isGroup: true });
-          row += Math.ceil(runs[i].members.length / cols);
-          i++;
+      const orphanMembers: Session[] = [];
+      for (const run of runs) {
+        if (run.members.length >= 2) {
+          bands.push({ members: run.members, startRow: row, centred: false, isGroup: true });
+          row += Math.ceil(run.members.length / cols);
         } else {
-          const singles: Session[] = [];
-          while (i < runs.length && runs[i].members.length < 2) {
-            singles.push(runs[i].members[0]);
-            i++;
-          }
-          bands.push({ members: singles, startRow: row, centred: true, isGroup: false });
-          row += Math.ceil(singles.length / cols);
+          // single-member run → collect for the bottom orphan band
+          orphanMembers.push(...run.members);
         }
       }
+      if (orphanMembers.length > 0) {
+        bands.push({ members: orphanMembers, startRow: row, centred: false, isGroup: true, isOrphan: true });
+        row += Math.ceil(orphanMembers.length / cols);
+      }
       const totalRows = Math.max(1, row);
       // #112: the group label sits in a band ABOVE the topmost node, so the
       // band must clear the node radius — GROUP_TOP is node-relative, never
@@ -852,8 +862,17 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             else if (isOn) i++;
             else o++;
           }
+          // v0.10.4 #150 — orphan band (singletons bundled at bottom)
+          // renders with a "其他" cluster box; the box-key drives the
+          // R63 label render + R86 hover-pin keying + #99 tooltip
+          // member listing, so all the existing group-box machinery
+          // applies uniformly to the orphan bucket too.
           return {
-            key: band.members.length ? groupKeys[band.members[0].alias] : '',
+            key: band.isOrphan
+              ? '其他'
+              : band.members.length
+                ? groupKeys[band.members[0].alias]
+                : '',
             count: band.members.length,
             statuses: { working: w, idle: i, offline: o },
             x: minX - GROUP_PAD,
@@ -3504,6 +3523,30 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
              state, zero re-render cost. */
           data-topo-layout={layout}
           data-topo-theme={isLight ? 'light' : 'cyber'}
+          /* Round 487 / Loop — extends R469/R471 root-svg state surface
+             with current zoom level (numeric attr, 2 decimals). Pre-
+             R487 the canvas zoom was queryable via `data-topo-minimap-
+             viewport-glow='true'` boolean (R481, gated at > 1.5) but
+             the exact zoom number only lived in the chrome-strip span
+             (`{Math.round(view.zoom * 100)}%`). Tests + external CSS
+             that need the zoom value had to traverse to the chrome
+             strip or read view state via React internals.
+             R487 surfaces it at the canvas root, consistent with
+             R469's fleet-count numeric pattern. Two-decimal precision
+             matches the internal `view.zoom` float without losing
+             info. Composed from existing state — no new state.
+             Root svg attribute set now 10 attrs total:
+               R462 data-dashboard-version    build identity
+               R466 data-topo-any-hover       transient mode
+               R467 data-topo-any-pinned      sticky mode
+               R469 data-topo-online-count    fleet (4 numeric)
+               R469 data-topo-working-count
+               R469 data-topo-offline-count
+               R469 data-topo-flow-count
+               R471 data-topo-layout          canvas mode
+               R471 data-topo-theme           canvas mode
+               R487 data-topo-zoom            canvas zoom (this round) */
+          data-topo-zoom={view.zoom.toFixed(2)}
           /* Round 466 / Loop — aggregate hover signal on the root SVG.
              Exposes a single boolean `data-topo-any-hover` that
              reflects whether ANY hover state in the topology is
@@ -4761,10 +4804,35 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   opacity={isPinned || isHovered ? 1 : 0.55}
                   data-group-label-hovered={isHovered && !isPinned ? 'true' : 'false'}
                   data-group-label-font-weight={isPinned ? '800' : '700'}
+                  /* Round 479 / Loop — extend drop-shadow visual-polish
+                     family to a 4th anchor: group-label parent text
+                     on isPinned. Continues the R476/R477/R478 arc:
+                       R476  hub digit           hover-gated     emerald
+                       R477  legend pin-ring     pin-gated       row.fill
+                       R478  recent-row pip      freshness-gated cyan
+                       R479  group-label text    pin-gated       cyan
+                     Hue: pal.legendAccent at 0x80 alpha (≈50%) — same
+                     accent family R107/R477 use for tint surfaces. 3px
+                     blur reads as a soft cyan halo around the locked
+                     cluster name. Stacks with the R432 letter-spacing
+                     spread + R457 fw lift + R63 fill brighten + R142
+                     drop-shadow on the parent rect — pin signature on
+                     group label scope now spans typography + chroma +
+                     paint + container-lift + text-glow.
+                     Filter is paint-only; bbox unchanged; overlap-test
+                     invariants hold (R51 selector gated to g[data-node]
+                     descendants, this label is invisible to the probe).
+                     transition list extends to include 'filter 200ms
+                     ease-out' alongside the existing fill/ls/fw/opacity
+                     200ms tweens. */
+                  data-group-label-glow={isPinned ? 'true' : 'false'}
                   style={{
-                    transition: 'fill 200ms ease-out, letter-spacing 200ms ease-out, font-weight 200ms ease-out, opacity 200ms ease-out',
+                    transition: 'fill 200ms ease-out, letter-spacing 200ms ease-out, font-weight 200ms ease-out, opacity 200ms ease-out, filter 200ms ease-out',
                     letterSpacing: isPinned ? '0.5px' :
                                    isHovered ? '0.25px' : '0px',
+                    filter: isPinned
+                      ? `drop-shadow(0 0 3px ${pal.legendAccent}80)`
+                      : undefined,
                   }}
                   data-group-label={box.key}
                   data-group-label-pinned={isPinned ? 'true' : 'false'}
@@ -5338,10 +5406,32 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     r={(isHoveredEdge || isEndpointHoveredEdge) ? 5.5 : 4.5}
                     fill={pal.flowParticle}
                     filter={isLight ? undefined : 'url(#topo-glow)'}
-                    opacity={Math.min(1, fresh * edgeOpacityMul)}
+                    /* Round 485 / Loop — extends R484's "inspection
+                       overrides encoding" pattern to a 2nd anchor:
+                       edge particle opacity lifts to 1.0 on
+                       isHoveredEdge OR isEndpointHoveredEdge (user
+                       hovering the edge directly OR hovering one
+                       of its endpoint nodes). Pre-R485 the particle
+                       inherited freshness × edgeOpacityMul decay
+                       so a stale edge's particle painted near the
+                       0.30 floor even when the operator was
+                       inspecting it; R485 lifts to 1.0 on attention.
+                       data-recent-row-ts-alpha-attribute analog —
+                       freshness encoding preserved on rest tier,
+                       opacity override engages only on inspection.
+                       Sibling lift family — inspection-overrides-
+                       encoding pattern, now 2 anchors:
+                         R484 recent-row timestamp   freshness → 1.0
+                         R485 edge particle          freshness → 1.0  (this)
+                       data-edge-particle-opacity-lifted attr exposes
+                       the override gate; data-edge-particle-opacity-
+                       rest preserves the freshness reading. */
+                    opacity={(isHoveredEdge || isEndpointHoveredEdge) ? 1 : Math.min(1, fresh * edgeOpacityMul)}
                     data-edge-particle={link.key}
                     data-edge-particle-radius={(isHoveredEdge || isEndpointHoveredEdge) ? 5.5 : 4.5}
                     data-edge-particle-lifted={(isHoveredEdge || isEndpointHoveredEdge) ? 'true' : 'false'}
+                    data-edge-particle-opacity-rest={Math.min(1, fresh * edgeOpacityMul).toFixed(2)}
+                    data-edge-particle-opacity-lifted={(isHoveredEdge || isEndpointHoveredEdge) ? 'true' : 'false'}
                     style={{ transition: 'fill 200ms ease-out, opacity 200ms ease-out, r 200ms ease-out' }}
                   >
                     <animateMotion
@@ -5790,6 +5880,34 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                           via the new -opacity-active attr; the
                           legacy -opacity-hover attr kept for R395
                           test compatibility. */}
+                      {/* Round 480 / Loop — 5th anchor in the drop-shadow
+                         visual-polish family. Gates on isHot (link.
+                         count >= 10, R129 hot-lane threshold) so the
+                         badge gets a warm-amber halo when its edge
+                         crosses the high-traffic boundary.
+                         Drop-shadow family ledger now:
+                           R476  hub digit       hover-gated      emerald
+                           R477  legend pin-ring pin-gated        row.fill
+                           R478  freshness pip   freshness-gated  cyan
+                           R479  group label     pin-gated        cyan
+                           R480  edge badge      hot-lane-gated   amber  ← this round
+                         5th gate type — traffic volume — joins hover,
+                         pin, freshness, pin. Each polish anchor uses
+                         a distinct semantic gate but the same paint
+                         vocabulary. Hue: hotStroke (amber-tinted
+                         palette member) at 0x80 alpha — picks up the
+                         R126/R188 hot-edge accent colour family so
+                         the glow reads as a chromatic extension of
+                         the existing hot-lane stroke. 3-px blur
+                         radius reads as soft heat rather than
+                         emergency klaxon.
+                         R51 sentinel safety: badge sw=2 only matters
+                         when the overlap probe runs on g[data-node]
+                         descendants, which this edge-internal badge
+                         is not. Filter is paint-only, bbox unchanged.
+                         transition list extends to include 'filter
+                         200ms ease-out' so the heat halo eases on
+                         the count-crosses-threshold flip. */}
                       <circle
                         cx={badgeX} cy={badgeY}
                         r={isHoveredEdge || isPinned ? 10.5 : 9}
@@ -5804,7 +5922,13 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                         data-edge-badge-opacity-rest={isLight ? 0.95 : 0.85}
                         data-edge-badge-opacity-hover="1"
                         data-edge-badge-opacity-active="1"
-                        style={{ transition: 'r 180ms ease-out, stroke 300ms ease-out, stroke-width 300ms ease-out, fill 200ms ease-out, opacity 200ms ease-out' }}
+                        data-edge-badge-glow={isHot ? 'true' : 'false'}
+                        style={{
+                          filter: isHot
+                            ? `drop-shadow(0 0 3px ${hotStroke}80)`
+                            : undefined,
+                          transition: 'r 180ms ease-out, stroke 300ms ease-out, stroke-width 300ms ease-out, fill 200ms ease-out, opacity 200ms ease-out, filter 200ms ease-out',
+                        }}
                       />
                       {/* Round 224 / Loop: edge badge text gains the 4th
                           pin-signature typography. Pre-R224 the digit
@@ -8325,8 +8449,26 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 title scope: hovering the panel chrome spreads the
                 title 0.1 px, signalling "this is a coherent unit
                 you're entering". transition list extends letter-
-                spacing 200ms ease-out alongside existing fill 200ms. */}
-            <text x="13" y="21" fill={pal.legendHeadline} fontSize="12" fontFamily="monospace" fontWeight="700" letterSpacing={hoveredPanel === 'recent' ? '0.4' : '0.3'} style={{ transition: 'fill 200ms ease-out, letter-spacing 200ms ease-out' }} data-recent-panel-title>recent signal</text>
+                spacing 200ms ease-out alongside existing fill 200ms.
+                Round 482 / Loop — add 2nd typographic axis to the
+                title: fontWeight 700 → 800 on activeEdgeKey (any
+                row hover OR pin propagates from hoveredEdgeKey ??
+                pinnedEdgeKey). Pre-R482 the title only responded
+                to panel-chrome hover via R345 ls; when a specific
+                row was hovered/pinned inside the panel, the title
+                stayed flat. R482 closes the gap: when ANY row is
+                active inside the panel, the title tightens
+                typographically alongside the row's own R143 lift +
+                R472 tint + R474 text spread. data tightens under
+                attention pattern extension (panel-scope variant
+                following R416/R424/R425/R426/R444/R445/R446/R457
+                at the chip / panel / hub / edge / count / parent-
+                label tiers).
+                transition list extends to include 'font-weight
+                200ms ease-out' alongside R345's ls + R55's fill
+                200ms. data-recent-panel-title-fw exposes the
+                resolved weight for tests. */}
+            <text x="13" y="21" fill={pal.legendHeadline} fontSize="12" fontFamily="monospace" fontWeight={activeEdgeKey ? '800' : '700'} letterSpacing={hoveredPanel === 'recent' ? '0.4' : '0.3'} style={{ transition: 'fill 200ms ease-out, letter-spacing 200ms ease-out, font-weight 200ms ease-out' }} data-recent-panel-title data-recent-panel-title-fw={activeEdgeKey ? '800' : '700'} data-recent-panel-title-active={activeEdgeKey ? 'true' : 'false'}>recent signal</text>
             {/* R96: header count now matches what the rows show. Pre-R96
                 this read "X msgs" off the raw messages array, but the
                 rows below render DEDUPED flowLinks — so a fleet with 10
@@ -9242,6 +9384,18 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       {' · '}
                       <tspan opacity="0.7" data-recent-row-content-tspan>{truncate(link.content, 8)}</tspan>
                     </text>
+                    {/* Round 484 / Loop — recent-row timestamp opacity
+                       lifts to 1.0 when isRowHovered || isRowPinned,
+                       regardless of freshness alpha. R191 origin
+                       decays tsAlpha along with the row's freshness;
+                       pre-R484 hovering/pinning the row left the
+                       timestamp dim — user inspecting stale data
+                       fought the freshness encoding. R484 lifts to
+                       1.0 on attention. Sibling to R472/R474 in the
+                       recent-row state-flip family. data-recent-row-
+                       ts-lifted attr exposes the gate; original
+                       data-recent-row-ts-alpha preserved as R191
+                       freshness reading. */}
                     {lastAt ? (
                       /* Round 321 / Loop: lastAt freshness timestamp picks
                          up fontVariantNumeric tabular-nums. The string
@@ -9265,9 +9419,10 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                         fill={pal.legendText}
                         fontSize="8"
                         fontFamily="monospace"
-                        opacity={tsAlpha}
+                        opacity={(isRowHovered || isRowPinned) ? 1 : tsAlpha}
                         data-recent-row-ts={link.key}
                         data-recent-row-ts-alpha={tsAlpha.toFixed(2)}
+                        data-recent-row-ts-lifted={(isRowHovered || isRowPinned) ? 'true' : 'false'}
                         style={{
                           pointerEvents: 'none',
                           transition: 'opacity 200ms ease-out',
@@ -9542,9 +9697,30 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 surrounding chrome eased; R266 closes both at once. */}
             {/* R301: sibling to recent-signal panel title above —
                 same letterSpacing 0.3 for editorial parity. */}
+            {/* Round 483 / Loop — sibling to R482 (recent-signal panel
+               title): legend panel title fontWeight 700 → 800 on
+               pinnedStatus (any legend row pinned propagates to the
+               panel title). Pre-R483 the title responded only to
+               panel-chrome hover via R345 ls; the pinnedStatus row
+               highlighted its own swatch + tint via R181/R477 but
+               the title stayed flat — no upstream tightening to
+               signal "panel context = inspecting".
+               R483 closes the symmetry with R482: both panel titles
+               (recent-signal + legend) now tighten typographically
+               when ANY row inside them is in the active filter
+               state. Same idiom, mirrored at the legend-row scope.
+               data tightens family — now 10 anchors:
+                 R416/R424/R425/R426 chip/panel/hub/edge digits
+                 R444/R445/R446      group/recent/legend counts
+                 R457                group-label parent
+                 R482                recent-panel title
+                 R483                legend-panel title  (this round)
+               transition list extends to include 'font-weight 200ms
+               ease-out' alongside R345's ls + R55's fill 200ms.
+               data-legend-panel-title-fw + -active exposed for tests. */}
             {/* R345 sibling — legend panel title same hover letter-
                 spacing tween 0.3 → 0.4 on panel hover. */}
-            <text x="13" y="21" fill={pal.legendHeadline} fontSize="12" fontFamily="monospace" fontWeight="700" letterSpacing={hoveredPanel === 'legend' ? '0.4' : '0.3'} style={{ transition: 'fill 200ms ease-out, letter-spacing 200ms ease-out' }} data-legend-panel-title>legend</text>
+            <text x="13" y="21" fill={pal.legendHeadline} fontSize="12" fontFamily="monospace" fontWeight={pinnedStatus ? '800' : '700'} letterSpacing={hoveredPanel === 'legend' ? '0.4' : '0.3'} style={{ transition: 'fill 200ms ease-out, letter-spacing 200ms ease-out, font-weight 200ms ease-out' }} data-legend-panel-title data-legend-panel-title-fw={pinnedStatus ? '800' : '700'} data-legend-panel-title-active={pinnedStatus ? 'true' : 'false'}>legend</text>
             {/* Round 257 / Loop: legend panel header count picks up the
                 symmetric 13L/13R inner-padding pattern from the recent-
                 signal panel. Pre-R257 the legend header was 13px from
@@ -10440,12 +10616,41 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                          stale ones. data-topo-minimap-dot-opacity
                          attr (R392) reflects the resolved hover-
                          state value for tests. */
+                      /* Round 486 / Loop — 3rd anchor in the
+                         inspection-overrides-encoding pattern. Sibling
+                         to R484 (recent-row timestamp) + R485 (edge
+                         particle). When the operator hovers a node
+                         alias on the main canvas, the matching
+                         minimap dot lifts to opacity=1.0 regardless
+                         of the binary online/offline encoding —
+                         cross-reference cue between canvas focal
+                         and the minimap wayfinding overlay.
+                         Pre-R486 an offline node's minimap dot stayed
+                         at 0.6 even when the operator was inspecting
+                         it via canvas hover; R486 makes the
+                         inspection signal jump the minimap dot to
+                         full presence so the spatial reference is
+                         unambiguous.
+                         Encoding survives: data-topo-minimap-dot-
+                         online preserves the online/offline binary,
+                         data-topo-minimap-dot-opacity-rest preserves
+                         the would-be opacity. Only the LIVE painted
+                         opacity flips on inspection.
+                         inspection-overrides-encoding family — 3
+                         anchors now:
+                           R484 recent-row timestamp
+                           R485 edge particle
+                           R486 minimap dot   ← this round
+                         data-topo-minimap-dot-lifted attr exposes
+                         the override gate. */
                       r={isOn ? 1.9 : 1.2}
                       fill={st.primary}
-                      opacity={isOn ? (hoveredMinimap ? 1 : 0.95) : 0.6}
+                      opacity={hoveredAlias === s.alias ? 1 : (isOn ? (hoveredMinimap ? 1 : 0.95) : 0.6)}
                       data-topo-minimap-dot={s.alias}
                       data-topo-minimap-dot-online={isOn ? 'true' : 'false'}
-                      data-topo-minimap-dot-opacity={isOn ? (hoveredMinimap ? 1 : 0.95) : 0.6}
+                      data-topo-minimap-dot-opacity={hoveredAlias === s.alias ? 1 : (isOn ? (hoveredMinimap ? 1 : 0.95) : 0.6)}
+                      data-topo-minimap-dot-opacity-rest={isOn ? (hoveredMinimap ? 1 : 0.95) : 0.6}
+                      data-topo-minimap-dot-lifted={hoveredAlias === s.alias ? 'true' : 'false'}
                       data-topo-minimap-dot-radius={isOn ? 1.9 : 1.2}
                       style={{
                         transition: 'opacity 200ms ease-out, fill 200ms ease-out, r 200ms ease-out',
@@ -10569,10 +10774,42 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   data-topo-minimap-viewport-smooth={smoothView ? 'true' : 'false'}
                   data-topo-minimap-viewport-hover={hoveredMinimap ? 'true' : 'false'}
                   data-topo-minimap-viewport-linejoin="round"
+                  /* Round 481 / Loop — 6th anchor in the drop-shadow
+                     visual-polish family. New gate type: ZOOM STATE.
+                     When current canvas zoom > 1.5x (50% above the
+                     default 1.0 baseline), the minimap viewport rect
+                     gains a soft cyan halo signaling "you're zoomed
+                     in beyond default". The minimap viewport already
+                     shrinks as you zoom in (rectW = VIEWBOX_W /
+                     view.zoom * sx, so at zoom=2 it halves) — the
+                     glow tells you the wayfinding marker is now
+                     scaled-down rather than at canvas-default size.
+                     Drop-shadow family — 6 gate types covered:
+                       R476  hub digit       hover-gated
+                       R477  legend pin-ring pin-gated
+                       R478  freshness pip   freshness-gated
+                       R479  group label     pin-gated
+                       R480  edge badge      hot-lane-gated
+                       R481  minimap         zoom-gated      ← this round
+                     6 distinct semantic gates (user interaction
+                     transient/sticky × 2, data freshness, data
+                     volume, canvas zoom state). Each anchor uses
+                     hue family appropriate to its semantic context.
+                     Hue: pal.legendAccent at 0x80 alpha — matches
+                     the existing R107 tint family and R478/R479
+                     cyan-tone choices. 2-px blur reads as subtle
+                     (the minimap viewport is small, ~120×82 px).
+                     Filter is paint-only — bbox unchanged. transition
+                     list extends to include 'filter 200ms ease-out'
+                     so the glow eases when zoom crosses 1.5x. */
+                  data-topo-minimap-viewport-glow={view.zoom > 1.5 ? 'true' : 'false'}
                   style={{
+                    filter: view.zoom > 1.5
+                      ? `drop-shadow(0 0 2px ${pal.legendAccent}80)`
+                      : undefined,
                     transition: smoothView
-                      ? 'x 280ms ease-out, y 280ms ease-out, width 280ms ease-out, height 280ms ease-out, stroke-width 200ms ease-out, opacity 200ms ease-out'
-                      : 'stroke-width 200ms ease-out, opacity 200ms ease-out',
+                      ? 'x 280ms ease-out, y 280ms ease-out, width 280ms ease-out, height 280ms ease-out, stroke-width 200ms ease-out, opacity 200ms ease-out, filter 200ms ease-out'
+                      : 'stroke-width 200ms ease-out, opacity 200ms ease-out, filter 200ms ease-out',
                   } as React.CSSProperties}
                 />
               </svg>

package/package.json

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

package/scripts/p150-orphan-layout-screenshot.mjs

@@ -0,0 +1,82 @@
+/* v0.10.4 #150 — orphan layout screenshot evidence.
+ *
+ * Fixture: 3 prefix groups (5+3+4 = 12 grouped) + 5 distinct-prefix
+ * singletons (orphans). Pre-#150 the singletons appeared scattered
+ * in centred bands between cluster boxes. Post-#150 they all bundle
+ * into one "其他" cluster box at the bottom. */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const out = process.argv[2] || 'screenshots/v0.10.4-150-orphans/after';
+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: 1600, height: 1500 }, deviceScaleFactor: 2 });
+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');
+    // Force grid layout so the orphan band is visible
+    localStorage.setItem('anet-topo-layout', 'grid');
+  } catch {}
+});
+const fresh = new Date(Date.now() - 60_000).toISOString();
+const sessions = [];
+// Group 1: ai-insight × 5
+for (let i = 1; i <= 5; i++) sessions.push({
+  alias: `ai-insight-node-${i}`, status: i === 1 ? 'working' : 'idle',
+  model: 'claude-opus-4', runtime: 'claude-code-cli',
+  network_id: 'default', project_dir: null,
+  created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+});
+// Group 2: agent-network-dashboard × 3
+for (let i = 1; i <= 3; i++) sessions.push({
+  alias: `agent-network-dashboard-${i}`, status: i === 1 ? 'working' : 'idle',
+  model: 'gpt-4o', runtime: 'codex-sdk',
+  network_id: 'default', project_dir: null,
+  created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+});
+// Group 3: p-station × 4
+for (let i = 1; i <= 4; i++) sessions.push({
+  alias: `p-station-worker-${i}`, status: i === 1 ? 'working' : 'idle',
+  model: 'minimax/abab6', runtime: 'http-api',
+  network_id: 'default', project_dir: null,
+  created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+});
+// Orphans: 5 distinct-prefix singletons — should bundle into "其他" bottom band
+['monitor-prod', 'dispatcher-bot', 'runner-helper', 'oracle-svc', 'cron-worker'].forEach((alias, idx) => {
+  sessions.push({
+    alias, status: idx % 2 === 0 ? 'working' : 'idle',
+    model: 'claude-sonnet-4', runtime: 'claude-agent-sdk',
+    network_id: 'default', project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+});
+await ctx.route('**/api/hub/status*', async (route) => {
+  const r = await route.fetch();
+  const b = await r.json();
+  await route.fulfill({ response: r, json: { ...b, sessions } });
+});
+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 >= 17, { timeout: 30000 });
+await page.waitForTimeout(800);
+const box = await page.evaluate(() => {
+  const chrome = document.querySelector('[data-topo-chrome]');
+  let card = chrome?.parentElement;
+  while (card && !card.querySelector(':scope > svg')) card = card?.parentElement;
+  if (!card) return null;
+  card.scrollIntoView({ block: 'start' });
+  return new Promise(resolve => requestAnimationFrame(() => {
+    const r = card.getBoundingClientRect();
+    resolve({ x: Math.max(0, r.x), y: Math.max(0, r.y), width: r.width, height: r.height });
+  }));
+});
+await page.waitForTimeout(400);
+if (box && box.width > 100) {
+  await page.screenshot({ path: `${out}.png`, clip: { x: box.x, y: box.y, width: box.width, height: Math.min(box.height, 1200) } });
+}
+console.log(`✅ wrote ${out}.png`);
+await browser.close();

package/scripts/topo-edge-badge-hot-glow-test.mjs

@@ -0,0 +1,101 @@
+/* Round 480 verification: edge badge circle gains filter: drop-
+ * shadow glow on isHot (link.count >= 10). 5th anchor in the
+ * R476/R477/R478/R479 drop-shadow family — first traffic-volume-
+ * gated variant.
+ *
+ * Contract:
+ *   - cold edge (count < 10): data-edge-badge-glow='false' AND
+ *     computed filter === 'none'
+ *   - hot edge (count >= 10): glow='true' AND computed filter
+ *     starts with 'drop-shadow' using hotStroke @ 0x80 alpha
+ *   - source-file conditional wired
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const nowIso = () => new Date().toISOString();
+const sessionFresh = new Date(Date.now() - 60 * 1000).toISOString();
+
+const browser = await chromium.launch({ headless: true });
+const ctx = await browser.newContext({ viewport: { width: 1500, height: 1200 } });
+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.setItem('anet-topo-layout', 'ring');
+    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: sessionFresh, updated_at: sessionFresh, last_seen_at: sessionFresh,
+  });
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('a·1', 'working'), mk('a·2', 'idle'), mk('b·1', 'working'),
+  ] } });
+});
+// Build messages: 12 from a·1 → a·2 (HOT, count=12 >= 10)
+//                  2 from b·1 → a·1 (cold, count=2 < 10)
+const hotMessages = [];
+for (let i = 0; i < 12; i++) {
+  hotMessages.push({
+    id: `hot-${i}`, from_alias: 'a·1', to_alias: 'a·2',
+    content: `m${i}`, created_at: nowIso(),
+  });
+}
+const coldMessages = [
+  { id: 'c1', from_alias: 'b·1', to_alias: 'a·1', content: 'c1', created_at: nowIso() },
+  { id: 'c2', from_alias: 'b·1', to_alias: 'a·1', content: 'c2', created_at: nowIso() },
+];
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: {
+  messages: [...hotMessages, ...coldMessages],
+} }));
+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: 'networkidle' });
+await page.waitForSelector('[data-edge-badge-glow]', { timeout: 15000 });
+await page.waitForTimeout(500);
+
+const probe = await page.evaluate(() => {
+  const badges = [...document.querySelectorAll('[data-edge-badge-glow]')];
+  return badges.map(b => {
+    const cs = getComputedStyle(b);
+    return {
+      glow:   b.getAttribute('data-edge-badge-glow'),
+      filter: cs.filter,
+    };
+  });
+});
+
+const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceGlowAttr   = /data-edge-badge-glow=\{isHot/.test(src);
+const sourceDropShadow = /drop-shadow\(0 0 3px \$\{hotStroke\}80\)/.test(src);
+const sourceFilterTween = /filter 200ms ease-out/.test(src);
+
+await browser.close();
+
+const hot = probe.find(b => b.glow === 'true');
+const cold = probe.find(b => b.glow === 'false');
+
+const results = {
+  badges_count_ge_2:        probe.length >= 2,
+  hot_badge_found:          !!hot,
+  hot_filter_has_drop:      hot && /drop-shadow/.test(hot.filter),
+  cold_badge_found:         !!cold,
+  cold_filter_none:         cold?.filter === 'none',
+  source_glow_attr:         sourceGlowAttr,
+  source_drop_shadow:       sourceDropShadow,
+  source_filter_tween:      sourceFilterTween,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} edge badge hot-lane drop-shadow:`, JSON.stringify(results),
+  '\n  hot badge:', JSON.stringify(hot),
+  '\n  cold badge:', JSON.stringify(cold));
+process.exit(ok ? 0 : 1);