@sleep2agi/agent-network-dashboard 0.5.2-preview.2 → 0.5.2-preview.25

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,
@@ -4761,10 +4780,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 +5382,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 +5856,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 +5898,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
@@ -6303,15 +6403,45 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 /* Round 253 / Loop: append fill 200ms to the hub
                    digit transition list — theme toggle (cyber #ecfdf5
                    ↔ light #d1fae5) was the last hub-area snap. */
+                /* Round 476 / Loop — hub working-count digit gains a
+                   filter: drop-shadow glow on hub-hover. Stacks with
+                   the existing 4-axis hub-hover gesture stack on this
+                   element:
+                     R209  transform: scale(1.08)    geometry
+                     R425  fontWeight 700 → 800      typography
+                     R253  fill ease-out             chroma (theme)
+                     R213  opacity gate              fade (count cross)
+                     R476  filter drop-shadow glow   paint (this round)
+                   The glow uses the cyber emerald-400 (#34d399) /
+                   light emerald-500 (#10b981) hue family so the
+                   chroma stays inside the hub-area palette. Subtle
+                   2-3 px blur radius at 0.6 opacity — visible but
+                   not loud, reads as "the focal digit lit up under
+                   attention".
+                   Reduced-motion users skip the filter via the
+                   !reducedMotion gate (R29 a11y blanket).
+                   Filter is a paint-only attribute — bbox stays
+                   the same, R51 overlap-test invariants hold.
+                   transition list extends to 'filter 200ms ease-out'
+                   so the glow eases under the same cadence as the
+                   scale + fw + fill axes. */
+                data-topo-hub-working-count-glow={!reducedMotion && hoveredHub ? 'true' : 'false'}
                 style={{
                   pointerEvents: 'none',
                   transform: !reducedMotion && hoveredHub ? 'scale(1.08)' : 'scale(1)',
                   transformBox: 'fill-box',
                   transformOrigin: 'center',
+                  filter: !reducedMotion && hoveredHub
+                    ? (isLight
+                        ? 'drop-shadow(0 0 2px rgba(16, 185, 129, 0.6))'
+                        : 'drop-shadow(0 0 3px rgba(52, 211, 153, 0.6))')
+                    : undefined,
                   /* R425: font-weight 200ms appended so the hover fw
                      bump 700 → 800 eases under the same cadence as
-                     R209 scale + R253 fill + R213 opacity. */
-                  transition: 'transform 200ms ease-out, opacity 300ms ease-out, fill 200ms ease-out, font-weight 200ms ease-out',
+                     R209 scale + R253 fill + R213 opacity.
+                     R476: filter 200ms appended so the new drop-
+                     shadow glow eases at the same cadence. */
+                  transition: 'transform 200ms ease-out, opacity 300ms ease-out, fill 200ms ease-out, font-weight 200ms ease-out, filter 200ms ease-out',
                   fontVariantNumeric: 'tabular-nums',
                 }}
               >
@@ -8295,8 +8425,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
@@ -8825,6 +8973,22 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                         the chip-row pills. R116: pinned rows tint
                         stronger than hovered ones so locked vs preview
                         is discriminable. */}
+                    {/* Round 472 / Loop — cadence-sync follow-on to the
+                       R459/R460/R461/R464/R465/R470 200ms uniform
+                       motion stack established at the cluster scope.
+                       This R104 recent-signal row tint rect was still
+                       at the legacy 150ms cadence — when a user
+                       hovers/pins a recent-signal row, the tint
+                       snapped in 50ms ahead of the rest of the row's
+                       state-change cascade (R143 translateY,
+                       R220+R434 letter-spacing, R434 fill tween).
+                       R472 lifts to 200ms ease-out to match. Same
+                       sibling idiom R459 closed at the group-label
+                       hitbox tier; now applied at the recent-signal
+                       row tier. data-recent-row-tint-transition attr
+                       exposes the cadence for tests.
+                       Geometry/paint logic unchanged — purely the
+                       transition timing. */}
                     <rect
                       x="6" y={38 + index * 16 - 10}
                       width="218" height="14" rx="3"
@@ -8832,7 +8996,9 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       opacity={isRowPinned ? (isLight ? 0.18 : 0.22)
                               : isRowHovered ? (isLight ? 0.10 : 0.14)
                               : 1}
-                      style={{ transition: 'fill 150ms ease-out, opacity 150ms ease-out' }}
+                      data-recent-row-tint={link.key}
+                      data-recent-row-tint-transition="200ms"
+                      style={{ transition: 'fill 200ms ease-out, opacity 200ms ease-out' }}
                     />
                     {/* Round 160 / Loop: recency pip. Canvas flow edges
                         fade by freshness (R10: full intensity ≤30s →
@@ -8934,16 +9100,47 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                              to include 'r 200ms ease-out' matching the
                              opacity cadence. data-recent-row-freshness-
                              lifted attr exposes the gate for tests. */
+                          /* Round 478 / Loop — extend the R476/R477
+                             drop-shadow vocabulary to a third anchor:
+                             the recent-row freshness pip on `alpha
+                             > 0.7` (just-fired flow within ~30s per
+                             R10 freshness ramp). Gate is FRESHNESS-
+                             driven not pin/hover-driven, so the glow
+                             reads as "this signal is live" rather
+                             than "user is inspecting". As the alpha
+                             decays past 0.7 (≈45s after last fire),
+                             the glow eases off — natural breathing
+                             feel that tracks actual data freshness.
+                             Hue: pal.legendAccent at 0.5 alpha so
+                             the glow inherits the row's accent color
+                             family. 2.5-3px blur reads as soft
+                             radiance, not loud bloom.
+                             Drop-shadow visual-polish family now 3
+                             anchors:
+                               R476  hub digit         hover-gated
+                               R477  legend pin-ring   pin-gated
+                               R478  recent freshness  freshness-gated
+                             Each anchor uses a different state gate
+                             but the same `filter: drop-shadow` paint
+                             vocabulary. Filter affects paint only —
+                             bbox unchanged, overlap-test invariants
+                             hold. Transition list extends to include
+                             'filter 200ms ease-out' alongside
+                             R10/R447 opacity + r tweens. */
                           fill={pal.legendAccent}
                           opacity={alpha}
                           data-recent-row-freshness={link.key}
                           data-recent-row-freshness-alpha={alpha.toFixed(2)}
                           data-recent-row-freshness-radius={(isRowHovered || isRowPinned) ? 2.5 : 2.0}
                           data-recent-row-freshness-lifted={(isRowHovered || isRowPinned) ? 'true' : 'false'}
+                          data-recent-row-freshness-glow={alpha > 0.7 ? 'true' : 'false'}
                           style={{
                             pointerEvents: 'none',
                             r: `${(isRowHovered || isRowPinned) ? 2.5 : 2.0}px`,
-                            transition: 'opacity 200ms ease-out, r 200ms ease-out',
+                            filter: alpha > 0.7
+                              ? `drop-shadow(0 0 3px ${pal.legendAccent}80)`
+                              : undefined,
+                            transition: 'opacity 200ms ease-out, r 200ms ease-out, filter 200ms ease-out',
                           } as React.CSSProperties}
                         />
                       );
@@ -9028,8 +9225,25 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                          R427/R431/R432/R433/R434. R55 fill 150ms +
                          R220 letter-spacing 150ms transition kept
                          (additive conditional case, no new property). */
+                      /* Round 474 / Loop — cadence-sync follow-on to
+                         R472. R472 lifted the recent-row TINT RECT
+                         to 200ms but the row TEXT alongside still
+                         ran 150ms — same panel-row scope, two
+                         different rates. When a user hovered/pinned
+                         a row the rect background brightened in
+                         200ms while the text fill + letter-spacing
+                         finished in 150ms. R474 closes that internal
+                         desync by lifting the text transitions to
+                         match. Whole recent-row state-flip now
+                         eases at 200ms ease-out across rect AND
+                         text. data-recent-row-text-transition='200ms'
+                         attr exposed for tests. R434 3-tier letter-
+                         spacing values unchanged; R363 fw + R55 fill
+                         brighten unchanged — only the timing axis
+                         shifts. */
+                      data-recent-row-text-transition="200ms"
                       style={{
-                        transition: 'fill 150ms ease-out, letter-spacing 150ms ease-out',
+                        transition: 'fill 200ms ease-out, letter-spacing 200ms ease-out',
                         letterSpacing: isRowPinned ? '0.5px' :
                                        isRowHovered ? '0.25px' : '0px',
                       }}
@@ -9146,6 +9360,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
@@ -9169,9 +9395,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',
@@ -9446,9 +9673,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
@@ -9685,6 +9933,20 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       now ~1.25px below hitbox center (vs ~2.25px pre).
                       No height change, no test ripple (other than this
                       one), no R260/R268/R270 chrome regressions. */}
+                  {/* Round 473 / Loop — final cadence-sync follow-on,
+                     closing the legacy 150ms transition at the
+                     LEGEND-ROW tint scope. R459 (group-label hitbox)
+                     + R472 (recent-row hitbox) already lifted the
+                     two sibling panel-row hitboxes to 200ms; the
+                     legend-row was the last per-row tint still
+                     snapping at 150ms.
+                     After R473 the 200ms ease-out vocabulary is
+                     uniform across ALL three panel-row scopes —
+                     group-label, recent-signal, and legend — so
+                     hover/pin state-change cascades read coherently
+                     at every panel-tier surface. data-legend-row-
+                     tint-transition='200ms' attr exposed for tests.
+                     Geometry/paint unchanged. */}
                   <rect
                     x="6" y={row.y0 - 11}
                     width="170" height="22" rx="3"
@@ -9693,7 +9955,8 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                             : hoveredStatus === row.key ? (isLight ? 0.08 : 0.12)
                             : 1}
                     data-legend-row-tinted={isPinned ? 'pinned' : hoveredStatus === row.key ? 'hover' : 'none'}
-                    style={{ transition: 'fill 150ms ease-out, opacity 150ms ease-out' }}
+                    data-legend-row-tint-transition="200ms"
+                    style={{ transition: 'fill 200ms ease-out, opacity 200ms ease-out' }}
                   />
                   {/* Round 197 / Loop: swatch dot scales r 5.5 → 7 when its
                       row is hovered or pinned. Pre-R197 the swatch was a
@@ -9778,6 +10041,30 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       + pointerEvents:none all preserved. data-legend-
                       pin-ring-stroke-width attr exposes the value for
                       tests. */}
+                  {/* Round 477 / Loop — legend pin-ring gains a filter:
+                     drop-shadow glow on isPinned. Extends R476's
+                     drop-shadow idiom from hub-digit (focal scope)
+                     to the legend-row pin-ring (sibling pin-state
+                     surface). When a status row is pinned, the
+                     concentric ring around the swatch now lights
+                     up with a colour-matched halo using row.fill,
+                     reinforcing "this filter is locked" via a
+                     glow layer above the R402 sw bump + R181
+                     opacity fade-in.
+                     Hue: row.fill at 0.55 alpha — picks up each
+                     status tier's signature colour (working green /
+                     idle teal / offline slate). 3px blur stays
+                     subtle but unmistakable when the row is locked.
+                     Reduced-motion users skip the filter via R29
+                     a11y blanket (transition-duration → 0.001ms
+                     so the glow appears/disappears instantly with
+                     pin toggle).
+                     Filter is paint-only — bbox unchanged, R51
+                     overlap-test gated to g[data-node] descendants
+                     so this legend-internal ring is invisible to
+                     the probe anyway. Transition list extends to
+                     include 'filter 200ms ease-out' so the glow
+                     eases under the same cadence as opacity. */}
                   <circle
                     cx="16" cy={row.y0} r="8"
                     fill="none"
@@ -9787,9 +10074,13 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     data-legend-pin-ring={row.key}
                     data-legend-pin-ring-pinned={isPinned ? 'true' : 'false'}
                     data-legend-pin-ring-stroke-width="1.75"
+                    data-legend-pin-ring-glow={isPinned ? 'true' : 'false'}
                     style={{
                       pointerEvents: 'none',
-                      transition: 'opacity 150ms ease-out',
+                      filter: isPinned
+                        ? `drop-shadow(0 0 3px ${row.fill}88)`
+                        : undefined,
+                      transition: 'opacity 150ms ease-out, filter 200ms ease-out',
                     }}
                   />
                   {/* Round 219 / Loop: legend row text gains the same
@@ -9864,8 +10155,24 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                        group-label R432, legend-row R433). R55 fill
                        150ms + R219 letter-spacing 150ms transition
                        untouched — additive conditional case. */
+                    /* Round 475 / Loop — final closure of the panel-row
+                       text scope cadence-sync. R473 lifted the legend-
+                       row TINT RECT to 200ms; R474 lifted the recent-
+                       row TEXT to 200ms; R475 closes the matching
+                       legend-row text desync — fill + letter-spacing
+                       both 150 → 200ms ease-out. After R475 the 3-tier
+                       panel-row cadence family is fully 200ms across
+                       BOTH rect and text at every panel-row scope
+                       (group-label / recent-row / legend-row). Hover/
+                       pin state-flip at any panel-row tier reads as
+                       one motion-coherent unit. data-legend-row-
+                       label-transition='200ms' attr exposed for tests.
+                       R433 3-tier letter-spacing values (0/0.25/0.5)
+                       unchanged; R55 fill brighten unchanged — only
+                       the timing axis shifts. */
+                    data-legend-row-label-transition="200ms"
                     style={{
-                      transition: 'fill 150ms ease-out, letter-spacing 150ms ease-out',
+                      transition: 'fill 200ms ease-out, letter-spacing 200ms ease-out',
                       letterSpacing: isPinned ? '0.5px' :
                                      hoveredStatus === row.key ? '0.25px' : '0px',
                     }}
@@ -10285,12 +10592,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',
@@ -10414,10 +10750,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.2",
+  "version": "0.5.2-preview.25",
   "description": "Agent Network Dashboard — Web UI for managing AI Agent networks",
   "scripts": {
     "dev": "next dev",