Made the suggested changes as listed in the fix path provided by
@Kpa-clawbot
Fix path:
`style.css:1244` `.field-table .section-row td` → `color: var(--text)`
(or new `--section-header-fg`).
`style.css:2620-2631` `.copy-link-btn` → `color: var(--text);`
background/border via `--accent-bg` / `--accent-border` tokens with safe
defaults.
`live.css:987` `.vcr-scope-btn.active` → same token swap; ensure text
remains `--text` on the tinted bg.
`nodes.js:212` `.multibyte-badge` → move inline styles to style.css,
`color:var(--text)`, keep `--accent-bg` background.
When creating the defaults for `--accent-bg` and `--accent-border`, I
chose to go with the default style values embedded in nodes.js, as that
was the safest bet.
We should probably extend the custom themes to include these variables
as well as not to confuse users if they see it. This also causes the
delima of, sometimes the `--accent` is use as the background for
objects, and not `--accent-bg`, example:
`btn active` has background set to` --accent` and border set to
`--accent`.
If we don't extend the config to accept accent-bg and accent-border, we
risk users still making accents of light blue that will be drown out
with the defaults we've set.
Also updated the badge above the multi-byte badge that contains X bytes
of the nodes public key, where X is determined by the path byte length.
This was done because it had styles set that were easy to add to the
styles.css file, to clean up coe. The node-type badge above it is
unfortunately driven by javascript in the nodes.js page, and requires
syling.
**Note:** Accidentally added ghost changes into this push for a second
time. They can be ignored as they were previously merged and shouldn't
have been seen as new.
Rename of ghost to inferred hops as described as partial fix for issue
#1505
Update of ghostDesc in live.js, also mentioned as partial fix for issue
#1505
## Summary
Fixes a visual bug on the Live page where the navigation bar layout
would break, causing the right-side icons (search, theme toggle,
hamburger menu) to be pushed into the middle of the screen.
## Cause
The Live page dynamically injects a "📌" button to let users lock the
auto-hiding header. However, `live.js` was appending this button as a
direct child of the outer `.nav-bar` container.
Because `.nav-bar` uses flexbox with `justify-content: space-between` to
separate the left, center, and right sections, adding a 4th top-level
child threw off the distribution of space, squeezing `.nav-right` toward
the center.
## Changes
- **DOM Placement (`live.js`)**: Modified the injection logic to target
`.nav-right` and use `appendChild()` so the pin button is cleanly nested
at the far right of the existing right-side cluster (past the hamburger
menu).
- **CSS Cleanup (`live.css`)**: Removed `margin-left: auto;` from
`.nav-pin-btn` as it is no longer necessary and could cause spacing
issues inside the `.nav-right` flex container.
## Verification
- Verified the pin button renders seamlessly on the far right of the
Live page.
- Confirmed the outer `.nav-bar` layout strictly maintains its
left/center/right alignment.
- Confirmed there are no test regressions (the E2E test
`test-issue-1510-live-nav-pin-e2e.js` selects by ID and continues to
pass flawlessly).
Closes#1522
## Summary
- Call `history.replaceState` in `doTrace()` after the hash is
validated, so the URL becomes `#/tools/trace/<hash>` and can be shared
directly.
## Change
`public/traces.js` — one line added:
```js
history.replaceState(null, '', `#/tools/trace/${encodeURIComponent(hash)}`);
```
The read path (`init()` picks up the hash from the URL on load) already
existed — only the write path was missing.
When the browser backgrounds the tab,drops frames due to DOM bloat, or
user goes to another page; the uncapped delta time (`dt`) in the
`requestAnimationFrame` loop caused the physics engine to simulate
massive time jumps, making packets appear to fast-forward at 8x speed.
This commit:
- Clamps `dt` to a maximum of 32ms in both the path animation and node
pulse loops to ensure graceful slowdowns during lag.
- Restricts the `VCR.speed` multiplier strictly to `REPLAY` mode so live
packets are not accidentally accelerated.
## Problem
In dark mode, `.node-full-card` and `.node-stats-table` (and all other
`var(--card-bg)` consumers) rendered with a background only ~11 RGB
units away from the page background:
- Page bg: `--surface-0` = `#0f0f23` (RGB 15,15,35)
- Card bg: `--surface-1` = `#1a1a2e` (RGB 26,26,46)
- Delta: ~11 units per channel → appears near-white on
OLED/high-contrast LCD screens
## Fix
Align `--card-bg` to `--surface-2` (`#232340`) in dark mode — the same
value already used for `--detail-bg` throughout the app. Delta from page
bg increases to ~35 units per channel, which reads clearly as an
elevated dark surface rather than a washed-out off-white card.
Both dark-mode variable blocks updated in sync (`@media
prefers-color-scheme: dark` + `[data-theme="dark"]`). Light mode is
unchanged.
## Impact
All `var(--card-bg)` consumers in dark mode get the corrected colour:
node full cards, stats tables, analytics cards, packet detail panels,
dropdowns, etc. The value now matches `--detail-bg` so cards and detail
panels use a consistent surface colour.
Closes#1470.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This PR introduces a major performance optimization by migrating the
final DOM-heavy animation (node pulses) into the hardware-accelerated
canvas engine by migrating the concentric "pulse" rings (rendered when a
node receives a packet) from DOM-based Leaflet L.circleMarker elements
into the high-performance HTML5 canvas animation loop (activePulses).
This completely eliminates DOM thrashing when dozens of nodes broadcast
simultaneously, ensuring a buttery-smooth 60 FPS even under extreme
packet volume.
# Canvas-anim cleanup — follow-up to #1490Fixes#1514. Addresses ALL items from the issue checklist (M1, M2,
S1–S10) in 7 logically grouped commits.
## Summary by category
### Must-fix
- **M1** — DPR listener self-rebind in a `try/finally` replaced with a
`{once: true}` MQL pattern. The runtime drops the listener atomically
before our handler runs, so re-binding is race-free; a thrown
`updateAnimCanvas()` no longer leaves a half-bound listener. Comment
documents the strict-match limitation of `matchMedia('(resolution:
Xdppx)')` (S10).
- **M2** — Stale `// Uncomment if you created the custom pane in the
previous step` comments removed. Fading polylines now render on
`animationsPane` (z=625) for consistent stacking with the moving phase:
above markers, below tooltips/popups. **Design choice:** the recommended
option (uncomment) was taken — fades are short-lived and capped at 5
recent paths, so marker-overlap is not a concern.
### Should-fix
- **S1** — 85 lines of whitespace-only churn from #1490 reverted
(`function ()` ↔ `function()`, `'0':0x7E` ↔ `'0': 0x7E`, etc.). Net
behavioral change: zero. Done as its own commit so reviewers can verify
it's purely cosmetic.
- **S2** — `renderAnimations()` per-frame allocations (`fromPt`, `toPt`)
hoisted to module-scoped `_scratchFrom` / `_scratchTo` reused each
frame. Saves ~6000 garbage objects/sec at 50 anims × 60fps.
- **S3** — `destroy()` now drains `onComplete` callbacks BEFORE clearing
`activeAnimations`. Audio `onHop` hooks no longer dropped on navigation.
- **S4** — Duplicate `window._liveTestSeams` definition deleted. Single
source of truth at the earlier exposure block (uses production
`wakeCanvasEngine` which respects pause/empty-queue guards).
- **S5** — E2E synthetic packet count bumped from 5 to 20 so the
`recentPaths.length > 5` prune actually executes.
- **S6** — E2E canvas selector pinned to
`.leaflet-pane.leaflet-animations-pane canvas` so it can't accidentally
match Leaflet's own `preferCanvas:true` renderer on overlayPane.
- **S7** — Z-index architecture comment now documents BOTH
`animationsPane` (z=625) and `liveAnimPane` (z=650) with rationale + a
pointer to the out-of-scope migration of the remaining SVG paths.
- **S8** — `destroy()` consolidated into one ordered teardown (drain →
stop loops → cancel timers → tear down canvas before `map.remove()` →
reset module state). Inline comments explain ordering.
- **S9** — `evenSize()` JSDoc with cross-link to `live.css:~1300`
("Eliminate SVG baseline drift") so the relationship between SVG marker
pixel snapping and even DOM sizes is discoverable from either side.
- **S10** — Subsumed by M1: the new DPR rebind comment explains the
strict-match limitation and the rebind handles transitions.
## Hot-load + visual QA
Hot-loaded via `scp` + `docker cp` to the staging runner's
`corescope-staging-go` container at `/app/public/live.js` and verified
the staging live map at <http://analyzer-stg.00id.net/#/live> with the
local headless chromium tool (CDP):
- Both `animations-pane` (z=625) and `liveAnim-pane` (z=650) present in
the rendered DOM.
- After firing 6 synthetic packets, animations-pane held 2 canvases
(anim canvas + Leaflet's polyline canvas renderer for the fades) and
`overlay-pane` had 0 polyline paths — confirming M2 routes fades to the
correct pane.
- `_liveTestSeams.{getAnimCount,isAnimating,getPathCount,wake}` all
functional via the now-singleton seam (S4).
- After visual QA, staging restored to tip-of-master (auto-deploy on
merge will re-deploy this branch's content).
Screenshot of the live map on staging with the patched `live.js`
hot-loaded was captured locally during QA (sandbox-internal path; cannot
attach to GitHub from worker context).
## E2E runs (sandbox limitation noted)
The sandbox running this work is the same kind of constrained ARM-ish
box that AGENTS.md flags ("Heavy coverage collection scripts may crash —
use CI for those"). On this hardware, the **unmodified master version of
`test-pr-1490-live-map-gpu-animations-e2e.js` failed 0/10** times due to
the 1500ms 2× drain timeout being insufficient for chromium-headless
under sandbox load (page load alone is ~3.7s vs ~700ms on CI). The test
passes on CI runners where #1490 went green.
What I verified locally:
- `node test-live-anims.js` — **9/9 + 5/5 passed, 5 consecutive runs**
(the unit test sniffs source for the canvas engine seams, including
`_liveTestSeams.wake` after S4 dedup).
- Full `bash test-all.sh` shows no NEW failures vs master baseline (30
pre-existing failures around `AreaFilter is not defined` in
`test-frontend-helpers.js` — unrelated).
- `bash ~/.openclaw/skills/pr-preflight/scripts/run-all.sh
origin/master` — **exit 0** (clean).
I did NOT bump the 1500ms drain timeout. Step 5's one-shot `isAnimating
=== false` check was changed to a 200ms `expect.poll` because there is a
single rAF tick between `activeAnimations.length` going to 0 and the
next renderAnimations frame setting `isAnimating = false`; the original
one-shot raced that frame. 200ms is the smallest jitter buffer for one
rAF tick (~16ms × headroom for slow CI), not a generic timeout bump.
CI is the source of truth for the 20× pass requirement. If CI's first
run is flaky on this test, file as a follow-up — the underlying race
(1-frame settle delay between `getAnimCount==0` and
`isAnimating==false`) is what the `expect.poll` change addresses.
## Preflight
```
bash ~/.openclaw/skills/pr-preflight/scripts/run-all.sh origin/master
═══ Preflight clean. ═══
```
Exit code: 0.
## Commits
```
b03f8fca docs(live): document dual animation panes + JSDoc evenSize() (#1514 S7+S9)
e2afc986 test(live): strengthen pr-1490 e2e — exact pane selector + 20 packets (#1514 S5+S6)
a568c361 refactor(live): dedupe _liveTestSeams and consolidate destroy() (#1514 S4+S8)
498a2dcb perf(live): hoist scratch points + drain onComplete on destroy (#1514 S2+S3)
6d5d4394 fix(live): place fading polylines on animationsPane for consistent z-stacking (#1514 M2)
0d32f063 fix(live): replace fragile DPR listener self-rebind with race-free pattern (#1514 M1)
976ccf6d style(live): revert auto-format whitespace churn from #1490 (#1514 S1)
```
---------
Co-authored-by: OpenClaw Bot <bot@openclaw.local>
Co-authored-by: mc-bot <bot@meshcore.local>
Kpa-clawbot