fix(#1173): replace #liveDot with packet-driven brand-logo node-pulse

[Kpa-clawbot]

Red commit: PENDING (will update)

Fixes #1173.

Replaces the #liveDot WebSocket-connected indicator with a packet-driven node-pulse animation on the brand logo's two inner circles.

Behavior (locked per issue spec)

• Animation curve: ease-out (default per open-question 1).
• Rate cap: 15/sec (66ms gap; default per open-question 2). Excess triggers are dropped, never queued.
• Direction: alternates A→B / B→A across messages (aesthetic, not semantic).
• Idle ≥10s: logo at full brightness, no animation.
• Disconnected: .logo-disconnected applies filter: grayscale(0.6) opacity(0.7).
• prefers-reduced-motion: reduce: single-step .logo-pulse-blip on destination only.

Implementation

• WS handler hook lives in public/app.js connectWS() (ws.onmessage triggers Logo.pulse(); ws.onopen/ws.onclose toggle Logo.setConnected()).
• Logo is a small IIFE in app.js that exposes window.__corescopeLogo for E2E injection.
• All animation is pure CSS; JS only toggles .logo-pulse-active / .logo-pulse-blip / .logo-disconnected. Colors come exclusively from --logo-accent / --logo-accent-hi tokens.
• Two new classes (.logo-node-a, .logo-node-b) attached to inner circles in both .brand-logo and .brand-mark-only SVGs so the mobile mark animates too.

#liveDot removal proof

$ grep -rn liveDot public/
(no output)

E2E

• E2E assertion added: test-logo-pulse-1173-e2e.js:54 and follows.
• Wired into the Playwright matrix in .github/workflows/deploy.yml (mirrors PR fix(#1056): row-detail slide-over panel at narrow widths (AC #4) #1168 pattern from commit 5442652).
• Test injects synthetic pings via window.__corescopeLogo.pulse({ synthetic: true }); matches the existing harness style (no new WS-mock pattern invented).

Red→green discipline preserved: the test commit lands first and CI fails on assertion; the implementation commit follows.

[Kpa-clawbot]

Independent review — APPROVED, zero must-fix

Reviewed via gh pr diff only (no checkout). Verified against origin/fix/issue-1173-logo-pulse.

Correctness — Logo IIFE

• Rate gate: lastPingTs is updated only after the gap check passes; drops increment stats.dropped. Burst-resistant.
• Alternation: aToB = (flip === 0) captured before flip ^= 1. Strict A,B,A,B sequence.
• Generation counter: bumped in every setConnected() call; checked in both the source-half timer AND inside requestAnimationFrame before destination toggle. Zombie pulse cannot fight .logo-disconnected.
• connected re-check after rAF closes the second race window. Solid.
• try { window.__corescopeLogo = api } guards SSR/jsdom; Object.freeze keeps the seam read-only — correct call.

#liveDot removal — clean

• grep -rn 'liveDot\|live-dot' public/ test*.js against the head ref:
  • Production: zero #liveDot references. Remaining .live-dot hits are in live.js legend bullets and .vcr-live-dot — pre-existing, unrelated, intended (CSS comment in style.css calls this out explicitly so a global no-op rule isn't shipped).
  • test-pull-to-reconnect*.js still call makeEl('liveDot') in their vm sandbox stubs. Now dead (app.js no longer touches getElementById('liveDot')) but harmless — not coverage-weakening.

CSS

• logo-pulse-step keyframes mutate only filter + transform. logo-pulse-blip-step mutates only opacity. .logo-disconnected is filter: grayscale(0.6) opacity(0.7). No hardcoded colors anywhere; circle fills resolve via --logo-accent / --logo-accent-hi tokens (test (h) asserts both fills are non-default).
• transform-box: fill-box; transform-origin: center; is the right idiom for scaling SVG <circle> about its own center.
• Both light + dark themes inherit via the existing --logo-accent* tokens (no theme-specific overrides in this PR — correct, not in scope).

Both SVGs patched

.brand-logo and .brand-mark-only each carry class="logo-node-a" (cx=540) and class="logo-node-b" (cx=660) on the inner circles. E2E step (b) asserts both.

Reduced-motion gated in BOTH layers

• JS: reducedMotion() short-circuits to pulseBlip() (destination opacity blip only).
• CSS: @media (prefers-reduced-motion: reduce) neutralizes .logo-pulse-active animation: none defensively.
• E2E (f) runs in a reducedMotion: 'reduce' context and asserts blip-only path.

Orphan-test patches

• test-e2e-playwright.js (Nodes WS test): replaces #liveDot lookup with .brand-logo + window.__corescopeLogo.setConnected seam assertions. Coverage strengthened (now asserts the public seam exists).
• test-logo-rebrand-e2e.js step 3: replaces dot-right-of-logo geometry with brand-logo visibility + min-size (≥60×16) + seam check. Equivalent regression coverage for SVG layout, plus the seam contract — accepted.
• No coverage weakened.

PR body

• "Red commit: PENDING (will update)" header is stale (the actual red commit 1fa2794 is on the branch ahead of green ba644a3), but accurate red→green ordering is in the commit log. Cosmetic, not blocking.
• All listed behaviors match the diff. No quietly deferred items detected.

Verdict

APPROVED. Ship it.

[Kpa-clawbot]

Carmack Review

REQUEST CHANGES — 2 must-fix

The animation is well-scoped: pure CSS keyframes, class-toggle-only, generation-cancellation on disconnect, rate-gate computed off a single time source. The chained-pulse half/rAF/setTimeout structure is correct, and the reduced-motion path really is cheaper (no scale + no rAF chain). Style invalidation is localized to circle.logo-node-{a,b} — the SVG paths don't get dragged through recalc.

Two real performance issues, both in the code that runs while the user has the tab in another window — i.e., the case nobody tests but the app spends most of its life in.

---

M1 — Hidden-tab pulse storm (public/app.js pulse / pulseChained)

WS messages keep arriving when the tab is hidden. pulse() keeps running synchronously off ws.onmessage, the rate-gate happily passes 15/sec, and each pass schedules a setTimeout(80) → rAF → setTimeout(80) chain.

On a hidden tab Chrome:

• clamps setTimeout to ~1 Hz, and
• does not invoke rAF callbacks at all until the tab becomes visible.

So the chain's middle stage never fires while hidden. Each call captures a closure with gen, srcSel, dstSel, and survives in the pending-rAF queue. Steady state at 15/sec × hidden seconds:

• 60 s hidden → ~900 pending callbacks
• 1 h hidden → ~54 000 pending callbacks

Two costs: GC-rooted closures + object literals while hidden, and a stutter when the tab returns and they all unwind at once (the gen check will discard most of them, but only after they run).

The rate-gate isn't the right gate for this — the rate-gate's purpose is "render <16 frames/sec," and a hidden tab is rendering zero. Gate on document.hidden first.

function pulse(_msg) {
  if (!connected) { stats.dropped++; return false; }
  if (typeof document !== 'undefined' && document.hidden) { stats.dropped++; return false; }
  const now = ...

Place it before lastPingTs is updated so the first ping after returning from a hidden tab fires immediately rather than being gated by a stale 66 ms-ago timestamp captured an hour earlier.

M2 — matchMedia allocated per pulse (public/app.js reducedMotion)

function reducedMotion() {
  try { return window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; }
  catch (_) { return false; }
}

Called inside pulse() after the rate-gate, so up to 15/sec for the lifetime of the tab. window.matchMedia(query) returns a fresh MediaQueryList per call — a real allocation, not a cached lookup. At 15/sec for an hour that's ~54 000 throwaway MQLs. Reduced-motion preference is a user setting; it does not change between WS frames.

Cache once at module load:

const reducedMotionMql = (typeof window !== 'undefined' && window.matchMedia)
  ? window.matchMedia('(prefers-reduced-motion: reduce)')
  : null;
function reducedMotion() { return !!(reducedMotionMql && reducedMotionMql.matches); }

Zero allocations on the post-gate path, same observable behavior (MQL .matches updates live as the OS preference changes — that was already the case here).

---

Out of scope (noting, not blocking)

• Array.prototype.slice.call(qsa(...)) in $all — modern NodeList has .forEach directly; the slice is a per-call array allocation. 4 calls per ping × 15/sec is ~60/sec — measurable on a profiler but not the cliff.
• will-change: filter, transform permanently on the four circles promotes a GPU layer per circle for the entire app lifetime. The circles are 13px radius so the layer cost is small; mention it in case a future change makes the SVG more complex.
• The setTimeout half-1 + rAF half-2 asymmetry is intentional (the rAF gives a pixel-aligned start to half-2) — fine.

Once M1 + M2 land, this is a clean, allocation-discipline-correct hot path.

[Kpa-clawbot]

Carmack must-fix items addressed.

✅ 1. Hidden-tab pulse storm

File: public/app.js:539-547 (early return in pulse()) + public/app.js:584-599 (visibilitychange listener)

pulse() now returns false BEFORE updating lastPingTs and BEFORE the rAF/setTimeout chain when document.hidden === true. A visibilitychange listener bumps the generation counter and calls clearAll() when the tab hides — any half already mid-flight bails before painting (the existing generation guard inside pulseChained() was already there per your note).

Test: test-logo-pulse-1173-e2e.js — new step hidden tab: pulse() returns false and toggles no classes mocks document.hidden = true, fires a synthetic pulse, and asserts:

• pulse() returns false
• neither .logo-pulse-active nor .logo-pulse-blip toggles on either circle
• stats.triggered did not increment

✅ 2. matchMedia per pulse

File: public/app.js:484-491 (module-load cache) + public/app.js:497-499 (read singleton)

_reducedMotionMQL is now allocated once at module load via window.matchMedia('(prefers-reduced-motion: reduce)'). reducedMotion() just reads .matches on the cached MQL. No addEventListener('change', …) subscription — the existing CSS @media rule already handles render-time switching, so we just cache and read.

Test: test-logo-pulse-1173-e2e.js — new step matchMedia: cached singleton — 100 pulses do not call window.matchMedia per pulse wraps window.matchMedia via page.addInitScript (counter installed BEFORE app load), fires 100 pulses, and asserts the counter delta is 0 during the burst.

Commits

• RED: 2c0daaf — test(#1177): RED — hidden-tab gate + matchMedia caching (verified locally: 8 passed, 2 failed, assertion-shaped)
• GREEN: 56d48b9 — fix(#1177): GREEN — hidden-tab pulse gate + cached matchMedia MQL (10/10 pass)

Preflight

bash ~/.openclaw/skills/pr-preflight/scripts/run-all.sh origin/master → clean (all 7 hard gates + 3 warnings pass).

HEAD: 56d48b9