# Route view v2 redesign
Fixes#1418, Fixes#1419, Fixes#1422
This is the route-view redesign that came out of a long iterative QA
cycle. The first commit (`a3c39636`) landed the v1 sidebar timeline +
multi-path baseline; this PR's second commit (`0e2e913f`) is the v2
polish covering packet context, multi-path picker, mobile bottom-sheet,
CB-preset live colors, and dozens of operator-driven UX fixes.
## The journey, in one line
> "The data is a sequence. Geography is annotation. The packet is the
cargo, the route is the road — show both."
## New surfaces
### 1. Packet context block (sidebar header)
Above the multi-path chip, a per-type fact list explaining **what** is
traveling. Operator was tired of "the route view shows the road but not
the cargo."
| Type | Chip | Facts |
|-------------|-----------------|---------------------------------------------------------|
| ADVERT | 📡 ADVERT | name · role · sig ✓ · self-reported GPS · pubkey
prefix |
| TXT_MSG | ✉ DM | src → dst · 🔒 encrypted |
| REQ/RESPONSE| 🔒/🔓 REQUEST/…| src → dst · 🔒 encrypted |
| GRP_TXT | # CHANNEL MSG | #channel · 🔓 decrypted · "…content preview…"
· sender |
| TRACE | ⌖ TRACE | Official: N hops · Observed: M |
| PATH | 🔀 PATH | src → dst (with "from payload" chip on SRC/DST rows) |
Sources merge `pkt.decoded_json` + `obs.decoded_json` (channel data
often lives at packet level) and fall back to byte-level `raw_hex`
parsing for encrypted DMs and unkeyed channel msgs.
### 2. Multi-path picker
The header lists every unique observer-path with `<count>/<total>` chip
+ hex hop string. Click a path → full-clear and redraw that path only
(Tufte v6's "replace + retain subpath weights"). "All" →
edge-deduplicated UNION view (each unique edge drawn once, stroke =
observer count, single accent color, no seq numbers because there's no
single ordering).
### 3. Deep-link URLs
`#/map?packet=<hash>&obs=<id>` — bookmarkable, shareable, the single
source of truth. sessionStorage flow removed. "Back to packet" preserves
the obs id.
### 4. Hop resolution
Priority: server `resolved_path` → shared `window.HopResolver` (same
resolver as packets page, observer-IATA-aware) → raw prefix. Eliminates
a whole class of "route view named hops differently than packet detail"
bugs.
### 5. Markers (v5/v6/v7)
- All markers same 22 px filled circle, seq number rendered **inside**
- SRC + DST get a 2 px hollow endpoint ring
- SRC = DST loop → **double concentric ring** (ring grammar extended, no
new glyph)
- Spider-fan within 14 px collisions (16 px arc, dashed hairline),
re-runs on `zoomend` only, debounced
### 6. CB preset live colors
- Each preset gets a `routeRamp` (5 stops): default/trit = viridis,
deut/prot = plasma, achromat = pure luminance
- `cb-presets.js` writes `--mc-rt-ramp-0..4` CSS vars; route reads them
via `getComputedStyle`
- `cb-preset-changed` + `theme-changed` listeners hot-recolor without
re-render
### 7. Desktop chrome
- **Resize handle** on right edge of sidebar (drag, persisted to
`localStorage["mc-rt-sidebar-width"]`)
- **Collapse button** = round chevron **centered on the right edge**
(Material/Drive style — not in the top-right corner, doesn't collide
with the close X)
- Collapsed = 36 px strip with rotated "ROUTE" label, expand on click
### 8. Mobile (bottom sheet)
- Anchored above bottom-nav (`bottom: 56px + safe-area-inset`)
- Collapsed = thin summary line `TYPE · N hops · X km · M obs` + hex
preview, tap chevron to expand to ~75 vh
- Drag-grip removed (conflicted with browser pull-to-refresh +
CoreScope's own pull-to-reconnect)
- Desktop collapse / resize affordances hidden on mobile (sheet is the
mobile collapse affordance)
- Map controls toggle floats top-right, panel collapses on route entry,
reachable via toggle click
- All three mobile detail panels (`pktRight`, `.slide-over-panel`,
`#mobileDetailSheet`) explicitly closed when entering route view
### 9. Map fit / centering
- Manual layer-children walk because `L.LayerGroup.getBounds()` doesn't
aggregate (only `FeatureGroup` does)
- Mobile padding: `paddingTopLeft: [30, 70]`, `paddingBottomRight: [30,
190]` to clear top-nav + sheet+nav stack
- Re-fits on: initial render, isolate, All, `window.resize` (iOS URL-bar
collapse)
- Staggered timers 0/200/600/1400 ms (and 2800 ms on initial render) to
survive layout settles
### 10. Hop drill-in refinements
- SNR sparkline suppresses connecting polyline when n < 3 (two points
implies a trend across time it can't represent — dots only)
- "Node details" link properly chip-styled with aria-label including
node name + route count
## Edge weight scales
| View | Range |
|---------------------------------|----------------|
| Single-path | 5 px flat |
| Multi-path interior | 3..9 |
| Origin→hop1 / last-hop→dest | proxy via max adjacent edge count |
| Union overlay | 2..8 |
Boundary edges (SRC→first hop, last hop→DST) used to render thin because
`edgeCounts` only tracks `path_json` transitions. Now they take the
strongest adjacent edge count as proxy (every observer who saw the
packet implicitly transited that boundary edge).
## Files
- **NEW** `public/route-tufte.js` (~1700 lines) — the route renderer +
sidebar
- **NEW** `public/route-tufte.css` (~750 lines) — all styling
- **MOD** `public/map.js` — async draw functions, deep-link loader,
`__mc_nodes` exposure, raw_hex extraction
- **MOD** `public/packets.js` — View Route → deep-link URL only, closes
all mobile panels
- **MOD** `public/cb-presets.js` — `routeRamp` per preset + CSS var
write
- **MOD** `public/index.html` — script + stylesheet tags
## Testing
Manually CDP-validated across desktop and mobile-emulator viewports for
every major change. Fixtures cover:
- ADVERT (4 hops, single-obs)
- DM (TXT_MSG, raw_hex parse)
- GRP_TXT (#test channel, decrypted text)
- PATH (operator's bug case)
- TRACE (3-hop)
- 1-hop edge case
- Multi-path (75-observer 4-hop with 47 unique paths)
- 32-hop stress
- Loop (SRC = DST)
- Bay Area dense cluster (spider-fan)
Per AGENTS.md net-new-UI exemption, no failing-test-first; existing
tests stay green. **TODO**: Playwright E2E follow-up PR.
## What's deferred to v2.1 / follow-ups
- **Glyph overlay on SRC marker** for packet type (e.g. 📡 corner glyph
on ADVERT marker, ⌖ on TRACE)
- **Per-hop SNR sparkline for TRACE packets** (their payload contains
real per-hop SNR contributions, distinct from observer-derived SNR)
- **GRP_TXT full content preview** (currently truncated at 80 chars;
could expand inline)
- **Playwright E2E test** covering the deep-link → isolate → All flow
## Screenshots
(would be useful here — CDP screenshots captured during dev show:
desktop with sidebar + multi-path picker, mobile with bottom sheet +
overlay toggle, isolated-path view, union view, spider-fan on Bay Area
cluster, packet context for each of the 5 main types)
## Operator's frustration patterns (lessons for next time)
1. **Browser-validate every UI change, not just compute state** —
CDP-screenshot before claiming a UI fix is done. Verifying
`display:none` resolves correctly is necessary but not sufficient; the
visual layout matters.
2. **Edge-deduplicated drawing beats per-path overlays** for union views
(Tufte v6) — operator's instinct was correct from the start.
3. **Material/Drive UI conventions exist** because they work — center
collapse handles on borders, don't pile them in corners.
4. **Mobile = different problem than desktop** — bottom-sheet, no
drag-grip near pull-to-refresh zone, asymmetric fitBounds padding,
redundant refits to survive iOS URL-bar collapse.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
---------
Co-authored-by: openclaw-bot <bot@openclaw.local>
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: corescope-bot <bot@corescope.local>
WIP — red commit only. Reproduces #1412.
## TDD red phase
`test-issue-1412-customizer-no-override.js` asserts that after
`MeshCorePresets.applyPreset('deut')` and a server-config push of legacy
`nodeColors`, `window.ROLE_COLORS.repeater === '#FE6100'`. On master
this
fails because `customize-v2.js:553` pushes server-config into the
`_roleOverrides` map, which the live getter prefers over CSS vars.
Green commit (customize-v2.js + customize.js fix) follows.
Refs #1412
---------
Co-authored-by: corescope-bot <bot@corescope.local>
## What
Fix the horizontal overlap between `.nav-more-btn` (in `.nav-left`) and
`.nav-stats` (in `.nav-right`) at viewport widths roughly 1101..1599px.
At vw=1200 the count number in the stats badge rendered on top of the
"More ▾" text.
## Root cause
`.top-nav` uses `display: flex; justify-content: space-between;` but had
**no column gap** between its children, and `.nav-links` had **no
flex-grow**. So `.nav-left` only consumed its content's intrinsic width
and `.nav-right` (with `flex-shrink: 0`) was free to abut it. Worse, the
Priority+ measurement loop in `app.js` (`applyNavPriority` → `fits()`)
compared intrinsic widths against `window.innerWidth` while `.top-nav {
overflow: hidden }` masked the actual collision — so the loop happily
declared "fits" while pixels overlapped.
CDP measurement on master at vw=1200 (`/#/packets`):
- `.nav-more-btn` rect: x=499..557 (w=58)
- `.nav-stats` rect: x=496..962 (w=466)
- Gap: **−60.7px** (overlapping)
Fix candidates tested via Chrome DevTools Protocol (`Runtime.evaluate` +
`Emulation.setDeviceMetricsOverride`) across vw=1101, 1200, 1366, 1440,
1600, 1920 (plus 768, 900, 1024, 1080, 1100, 1300, 1500, 1700, 1800 as a
sanity sweep). Winner:
```css
.top-nav { column-gap: 16px; }
.nav-links { flex: 1 1 auto; min-width: 0; }
```
Per-viewport gap (`stats.left - more.right`) baseline → fix:
| vw | baseline | fix |
|------|----------|----------|
| 1101 | −144.0 | **16.0** |
| 1200 | −60.7 | **16.0** |
| 1300 | 8.4 | **16.0** |
| 1366 | 64.2 | 64.2 |
| 1440 | 0.0 | **44.5** |
| 1600 | 24.2 | 24.2 |
| 1920 | more hidden (no overflow) — n/a | n/a |
Single-candidate variants (`.nav-left { flex: 1 1 auto }` alone,
`.top-nav { justify-content: space-between }` alone — already on, no
effect, `.nav-links { flex: 1 1 auto }` alone, margin/padding hacks on
`.nav-right`/`.nav-stats`) all still produced ≤8px gap at vw=1200. Only
the combo (column-gap on parent + flex-grow on `.nav-links`) cleanly
resolves all six required widths.
## TDD
Red commit: `3d374b4c93319805e89e46d8fdc8a8ea8c6c1479` (CI:
https://github.com/Kpa-clawbot/CoreScope/actions/runs/26482870401)
- `test-issue-1413-nav-overlap-e2e.js` — Playwright at vw 1101, 1200,
1366, 1440, 1600, 1920 on `/#/packets`. Asserts `.nav-more-btn.right + 8
<= .nav-stats.left` (when both visible) and that `.top-nav` does not
horizontally scroll. Wired into `.github/workflows/deploy.yml` alongside
the other `test-nav-*-e2e.js` entries.
- Red commit ships ONLY the test (+workflow line); CI fails on the
assertion at vw=1101..1300 and vw=1440 (gap below 8px threshold).
- Green commit applies the two CSS rules above and turns CI green.
## Manual verification
1. Open `http://analyzer-stg.00id.net/#/packets` in a desktop browser.
2. Resize the viewport to ~1200px wide.
3. Confirm the "More ▾" button and the stats badge are visibly separated
(≥16px gap) and the badge count is not stacked on the button text.
4. Repeat at 1101, 1300, 1440, 1600, 1920px — gap ≥16px at all widths
where stats is visible.
5. At ≤1100px confirm `.nav-stats` is still hidden (display:none,
unchanged).
## Scope guards
- No changes to the Priority+ algorithm (`applyNavPriority` / `fits()`
in `app.js`). #1391, #1311, #1139, #1148, #1102, #1055 logic untouched.
- No changes to the More dropdown (`position: fixed`, #1406).
- No changes to `.nav-left { overflow }` (#1405 stayed dropped).
- Mobile (<768px) hamburger layout unchanged.
Fixes#1413
---------
Co-authored-by: openclaw-bot <bot@openclaw.local>
## What
Delete the unconditional
`localStorage.setItem('channels-show-encrypted', 'true')` call (+
misleading "#1034 PR1: sectioned sidebar" comment) at
`public/channels.js:783-786`. The sectioned-sidebar grouping the comment
referenced was never implemented; in practice the call was
force-flipping the encrypted-visibility gate on every init so an
operator could never turn it off.
## Root cause
`channels.js` init ran:
```js
var showEncrypted = true;
try { localStorage.setItem('channels-show-encrypted', 'true'); } catch (e) {}
```
unconditionally on every load. The `loadChannels()` reader at line ~1563
(`localStorage.getItem('channels-show-encrypted') === 'true'`) then sent
`includeEncrypted=true` on the `/api/channels` call, so the server
returned all 246 encrypted placeholder channels alongside the 19 real
ones — 265 rows flooding the sidebar with no UI control to suppress.
Verified via CDP on staging:
- `localStorage['channels-show-encrypted']` was always `"true"` after
page load.
- `GET /api/channels` → **19** entries (default — encrypted excluded).
- `GET /api/channels?includeEncrypted=true` → **265** entries (246
encrypted).
- Manually `removeItem('channels-show-encrypted')` + reload → list
dropped to 19.
Confirmed the force-set was the only gate driving the flood.
## TDD
- RED commit `a71cecbc` — `test-issue-1409-no-encrypted-flood.js`
source-greps `public/channels.js` for the forbidden literal
`setItem('channels-show-encrypted', 'true')`. Asserts no match. Fails on
master.
- GREEN commit `14281b63` — delete the 2 lines + rewrite comment. Test
passes.
Tests:
```
$ node test-issue-1409-no-encrypted-flood.js
Issue #1409 — no force-enable of channels-show-encrypted
✅ channels.js does NOT unconditionally setItem(channels-show-encrypted, true)
✅ channels.js still reads channels-show-encrypted (toggle gate preserved)
2 passed, 0 failed
```
## Manual verification
- After fix, default `localStorage.getItem('channels-show-encrypted')`
is `null` on first load.
- `loadChannels()` reader returns `false`, so `includeEncrypted` is
omitted from the API call → server returns the 19 real channels only.
- Existing reader is preserved, so a future user-facing toggle that
writes the flag will continue to work.
## Out of scope (follow-ups)
- "Show encrypted" header toggle UI — issue acceptance criteria mentions
it as optional; not added here.
- Sectioned-sidebar grouping of encrypted channels (#1034 PR1 design) —
separate issue.
- Cap/collapse behavior when toggle is ON — separate issue.
Fixes#1409
---------
Co-authored-by: openclaw-bot <bot@openclaw.local>
WIP — RED commit only. Tests demonstrate two bugs from #1407:
1. `window.ROLE_COLORS` is a static literal (legacy April palette), not
synced to `--mc-role-*` CSS vars.
2. Achromat preset pairs `#1a1a1a` text with 3 dark grays → WCAG 1.4.3
fails (1.27 / 2.55 / 4.43).
Expect CI red on `test-issue-1407-cb-preset-propagation.js` assertion
failures (not compile errors). GREEN follows.
Refs #1407
---------
Co-authored-by: openclaw-bot <bot@openclaw.local>
ACTUAL root cause of the recurring nav-vanishing bug, validated live via
Chrome CDP probe on staging at vw=1030.
## What happens
When the More dropdown opens:
- BEFORE: nav_links.y = 2.67, nav_left.scrollHeight = 47, nav visible ✅
- OPEN: nav_links.y = -46.67, nav_left.scrollHeight = 279, nav clipped
offscreen ❌
The .nav-more-menu is position:absolute but its content extents inflate
.nav-more-wrap.scrollHeight. .nav-left { display:flex;
align-items:center } then centers a 279px content line in a 52px
container, putting everything above the visible band.
## Fix
Add contain:layout to .nav-more-wrap — isolates its layout box from the
parent flex calculation. No more bubble-up.
CDP verification with the fix applied: dropdown opens, all 6 items
render at proper y (56, 93, 130, 166, 203, 240), nav_links_y stays at
2.67, nav_left.scrollHeight stays at 47.
## Why prior 22 fixes didn't catch it
Every prior fix treated symptoms — Priority+ algorithm tweaks, overflow
flag toggles, min-height drops, etc. None instrumented the CLOSED→OPEN
state transition that reveals the flex-line bug. Required Chrome
DevTools Protocol on a real broken viewport to see the inflate happen
live.
Fixes#1406 and likely supersedes #1391, #1396, #1400, #1404.
Co-authored-by: openclaw-bot <bot@openclaw.local>
Root cause of the recurring nav-vanishing family of bugs — confirmed
live via operator console probe at vw=1030 on /#/channels (also
reproduces on /#/home, /#/packets, all routes).
## Symptoms
1. All `.nav-links` (Home, Packets, Map, Live, Channels, Nodes) and
brand + More button render OFFSCREEN above the visible top-nav band.
`.nav-left` reports y=0..52 but every child reports y=-47.5.
2. More dropdown when opened shows only ONE item ("Tools") instead of
the 6 expected (Channels, Tools, Observers, Analytics, Perf, Audio Lab).
## Root cause
`.nav-left { overflow: hidden }` at `public/style.css:509`. With flex
children whose effective layout exceeds the container box, Firefox clips
children to negative y. The same `overflow: hidden` ALSO clips the
descendant `.nav-more-menu` dropdown contents.
## Fix
Drop `overflow: hidden` from `.nav-left`. The original
horizontal-overflow guard from #1066 is preserved at the `.top-nav`
level (which still has `overflow: hidden`).
## Verification
Operator console probe after applying the same `overflow: visible`
in-page:
- All 6 visible nav links render at y >= 0 inside the top-nav.
- More dropdown contains all 6 expected items (Channels, Tools,
Observers, Analytics, Perf, Lab).
- Both bugs collapse into ONE root cause.
## Why prior fixes didn't catch this
- #1400 fixed `.nav-link { min-height: 48px }` overflow — reduced
children from 56px to 47px tall. Helped slightly but didn't address the
`.nav-left { overflow: hidden }` interaction.
- #1391, #1394 fixed the active-pill-in-overflow algorithm. Different
layer.
- #1311, #1148, #1106, #1102, #1097, #1067, #1055 — every prior
Priority+ fix treated overflow as an algorithmic question, never as a
CSS clipping bug at the container level.
22nd nav fix in this saga. This one targets the actual cause.
Refs #1391, #1396, #1400. Operator probe transcript available on
request.
Fixes#1403
Co-authored-by: openclaw-bot <bot@openclaw.local>
**RED commit phase** — TDD failing test for #1400. Green fix incoming
next push.
See full PR body on ready-for-review.
Fixes#1400
---------
Co-authored-by: openclaw-bot <bot@openclaw.local>
Reverting PR #1398 — the navdebug banner instrumentation caused pages to
hang on load on operator's device. Will respawn safer diagnostic. Refs
#1396.
Co-authored-by: openclaw-bot <bot@openclaw.local>
## Summary
Temporary diagnostic patch for #1396 (mobile / narrow-desktop nav
priority reports). Adds a single instrumentation block at the END of
`applyNavPriority()` in `public/app.js`, gated on `navdebug=1` appearing
in the URL hash. No nav behavior change; reverted once root cause is
known.
## What it does
When the URL hash contains `navdebug=1` (e.g. `/#/channels?navdebug=1`),
the function:
1. Paints a fixed-position green-on-black banner pinned to the bottom of
the viewport (`z-index:99999`, `pointer-events:none` so it never blocks
interaction) showing:
```
[NAV-DEBUG-1396] vw=<innerWidth> total=N visible=N overflow=N
hidden-by-css=N active=<label>
visible: [Home,Packets,...]
overflow: [Tools,...]
ua: <first 80 chars of UA>
```
2. Emits the same payload via `console.warn('[NAV-DEBUG-1396]', ...)`
for anyone who can pop devtools.
The whole block is wrapped in `try/catch` — diagnostic code never breaks
nav.
## Why a banner (not just console)
Affected reporters are on mobile devices where popping devtools is
annoying or impossible. A screenshot of the banner gives us:
- Viewport width (vs the 768 / 1100 / 1101 breakpoints)
- Device UA (Safari iOS quirks, narrow Android, etc.)
- Actual link counts after `applyNavPriority` ran
- Whether anything is hidden by CSS (`display:none`) despite not being
in the overflow set
- Which labels are inline vs in the More menu
- Active route at time of measurement
## Operator usage
On the affected device, open:
```
https://<staging-host>/#/channels?navdebug=1
```
(or any other route; the gate is hash-wide). Screenshot the
green-on-black banner at the bottom of the page and attach to #1396.
## Hard rules respected
- Banner is gated — never visible without `navdebug=1` in the hash.
- No new dependency.
- No change to nav behavior.
- Diagnostic-only; revert PR will follow once root cause is identified.
## Out of scope
- Root-cause fix for #1396 (this is purely instrumentation).
- E2E test for the banner — code is temporary and scheduled for revert.
Co-authored-by: openclaw-bot <bot@openclaw.local>
Kpa-clawbot