mirror of
https://github.com/Kpa-clawbot/meshcore-analyzer.git
synced 2026-09-26 17:47:53 +00:00
7cc5aae6ace8efcb92fcbbd4080c080b09454b2f
72
Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
|
4f7bb245d4 |
fix(#1833): pin legend toggle button above VCR bar on Live view (#1834)
## Summary Fixes #1833 — the `.legend-toggle-btn` (palette icon) on the Live view was hardcoded to `bottom: 1rem`, so on typical desktop viewports it sat underneath the VCR playback bar and was unreachable. The reporter had to hide the legend via `localStorage` to work around it. ## Fix `public/live.css:1313` — one-character-class change: ```diff .legend-toggle-btn { position: fixed; - bottom: 1rem; + bottom: calc(var(--vcr-bar-height, 58px) + 10px); right: 1rem; ``` Mirrors the existing pattern already used by every other bottom-pinned Live overlay: - `.live-feed` (live.css:1204) - `.live-overlay[data-position="br"]` (live.css:1372) - `.feed-show-btn` (live.css:903) `--vcr-bar-height` is maintained by the ResizeObserver on `.vcr-bar`, so the button now tracks bar growth (mobile two-row layout, safe-area-inset) instead of overlapping. Same class of regression as #685 / #1206 / #1107 — an overlay that was missed in the prior sweep. ## TDD - Red commit `f6a938b7`: `test-issue-1833-legend-toggle-vcr-offset.js` asserts `.legend-toggle-btn`'s `bottom` declaration references `var(--vcr-bar-height`. Fails on assertion (not build error) against the hardcoded `1rem`. - Green commit `e399092b`: the CSS one-liner above. All 3 assertions pass. Grep-based CSS assertion per AGENTS.md § "E2E-DOM-grep exemption" — there is no existing Playwright test in this area that measures the toggle-button rect against `--vcr-bar-height`, and standing one up would be disproportionate for a single-property fix that mirrors three existing, tested overlay patterns. ## Preflight `bash ~/.openclaw/skills/pr-preflight/scripts/run-all.sh origin/master` — all hard gates pass, no warnings. ## Browser verified Not required per fix-issue skill (CSS-only, mirrors three existing tested patterns). Staging will pick up the change on merge; visual regression will be caught if the mirrored pattern breaks (grep test in this PR + existing E2E tests on the sister overlays). --------- Co-authored-by: corescope-bot <bot@corescope.local> Co-authored-by: openclaw-bot <bot@openclaw.local> |
||
|
|
6dfe589b57 |
fix(#1668): per-route polish — hash cells, badges, /live, modals (M4) (#1681)
Partial fix for #1668 (M4 of 6). After M2 (color tokens, PR #1676, ~85% BLOCKER) and M3 (typography floor, PR #1679, ~87% MAJOR), what's left are route-specific structural issues that token/floor passes can't reach. M4 closes those with surgical carve-outs — no new top-level tokens, no semantic encoding flattened. ## Route × selector × fix | Route | Selector | Before | After | |---|---|---|---| | `/analytics?tab=hashsizes` `/analytics?tab=collisions` | `td.hash-cell` + `-collision/-taken/-possible` (302+ M1 violations) | 11px/400; collision-fg 3.61, taken-fg 2.5, possible-fg 1.9 on respective bg | 12px base, 12px/700 on semantic cells. Bg palette preserved (green/yellow/orange still distinct). Inline style in analytics.js bumped 11→12. | | `/packets` `/live` `/nodes` (everywhere `<span class="badge badge-*">`) | All 14 TYPE_COLORS badges (ADVERT, REQUEST, RESPONSE, …) | `${color}20` translucent wash with `color: ${color}` — ratio **1.0–4.25, all BLOCKER** | `syncBadgeColors` rewritten: pick readable fg by luminance, darken bg in 8% steps until AA (≥4.5:1). All 14 PASS (4.57–7.94). TYPE_COLORS itself unchanged — map dots / live-feed dots keep full hue. | | `/live` | `.vcr-live-btn` ("LIVE") | `rgba(239,68,68,0.2)` + status-red fg = **1.0:1** | Solid `--status-red` + #fff = 5.25:1; 12px/700 | | `/live` | `.vcr-scope-btn.active` (1h/6h/12h/24h selected) | `--accent-bg` wash + `--text` = 2.98:1 BLOCKER | `--accent-strong` + `--text-on-accent` (M2 tokens, AA) | | `/live` | `.vcr-btn` `.vcr-scope-btn` | 0.9rem/400, 0.75rem/400 (thin-small) | 14px/500, 12px/500 desktop; 12px/600 ≤640px | | `/live` | `.live-feed-empty` | 12px/400 (thin-small) | 12px/500 | | `/packets` (path hops) | `.path-hops .hop-named` | font-size inherited (variable) | explicit 12px/600 | ## TDD & gating - **RED** `341f47f1` — 23 assertion failures (9 typography + 14 badge-contrast). New gate `test-issue-1668-m4-per-route.js` executes `syncBadgeColors` in a VM sandbox and asserts each emitted `.badge-*` rule clears WCAG AA; also checks rule-level font-size/font-weight floors. - **GREEN** `6ef17491` — both axes 0/0. - Test wired into `.github/workflows/deploy.yml:144` alongside M3. - Anti-tautology proven locally: `git stash public/roles.js` returns the test to FAIL with the badge assertions; pop restores GREEN. ## Re-scan findings `a11y-audit/m4-rescan.jsonl` — `/live` (timed out in M1) now probes cleanly: 29 dark / 39 light residuals all caught by this PR. Channel-add and customize modals probed clean (M2 tokens already cover; nothing chip-level needed). ## Out of scope M5 (axe CI gate) and M6 (letsmesh side-by-side A/B) are next milestones. --------- Co-authored-by: agent <agent@openclaw.local> Co-authored-by: meshcore-bot <bot@meshcore> Co-authored-by: Kpa-clawbot <bot@kpa-clawbot> Co-authored-by: openclaw-bot <bot@openclaw> |
||
|
|
edc6d5da02 |
fix(#1107): content-drive Live PACKET TYPES legend + dock toggles bottom-right (#1669)
Fixes #1107 Per triage fix path (#1107 comment 4672137236): the Live view PACKET TYPES legend was oversized (>60% whitespace per tufte review) and the activate/hide toggle buttons were scattered and cramped at the bottom of the map. ## Changes `public/live.css`: - `.live-legend` — added `height: max-content` + `max-width: 260px`. Panel now hugs its content instead of dominating the map. - `.legend-toggle-btn` — switched from `position:absolute; bottom:82px; right:12px` to `position:fixed; bottom:1rem; right:1rem` (the conventional map-control corner-dock per mesh-operator review). - `.feed-show-btn` — switched from scattered `position:absolute; bottom:12px; left:12px` to `position:fixed; bottom:1rem; right:1rem` with `margin-bottom:56px` so it stacks above the legend toggle. Activate/hide controls now dock together as one tidy bottom-right cluster. All colors via existing CSS variables (no hex tokens added). `test-issue-1107-live-layout.js` (new) — source-invariant assertions following the `test-issue-1532-live-fullscreen.js` pattern. Wired into the JS unit-test gate in `.github/workflows/deploy.yml`. ## TDD trace - Red commit: `c86073f68e30bb3c1c9f3880b39f4239cb681905` — test added asserting the layout invariants. Verified locally: 8 assertion failures on master CSS (exit 1). - Green commit: `4bd29f9b87ad0a1b214f60ec55ae17d6c9f2d819` — CSS fix. All 14 assertions pass. Reverting `public/live.css` returns 8 failures (test gates behavior, not tautology). ## E2E / browser verification E2E assertion added: `test-issue-1107-live-layout.js:48` (`.live-legend` height/max-width invariants) and `:72-90` (toggle button group pinned bottom-right). This is a CSS-only layout fix; the assertions are source-invariant on `public/live.css` (same pattern the codebase uses for #1532 / #1234 layout fixes — runs in the JS unit-test gate without needing a live server). Browser visual verification of the docked cluster can be done at the staging URL `http://analyzer-stg.00id.net/#/live` once the deploy runs. ## Preflight `bash ~/.openclaw/skills/pr-preflight/scripts/run-all.sh origin/master` — clean (all gates pass, no warnings to ack). --------- Co-authored-by: clawbot <bot@kpa-clawbot.local> Co-authored-by: meshcore-bot <bot@meshcore.dev> |
||
|
Kpa-clawbot
|
f66ff40a54 |
fix(#1619): bump feed-detail-card z-index + make popup draggable (#1620)
Red commit: 7eeeee5d76f385b939d4c49256be6418ca5dfe34 (CI run: pending — first PR-triggered run) Fixes #1619 ## Problem The `feed-detail-card` popup in the Live view (the one with the ↻ Replay button) is undraggable and frequently sits behind the legend (z=1000) in the lower-right, leaving the Replay button unreachable. ## Fix 1. `public/live.css` — bump `.feed-detail-card` z-index from `600` → `1050` (above legend z=1000, below mobile bottom-nav z=1100). Immediate unblock. 2. `public/live.js` — add a `<div class="panel-header">` containing a small title + the existing close button to the card markup; register the card with the existing `DragManager`. The bootstrap-scoped `dragMgr` is exposed on `window._liveDragMgr` so the popup-creation site (outside that scope) can call `dragMgr.register(card)` after appending. Responsive gate (`enabled` flag) is handled inside DragManager — no extra wiring needed. No localStorage persistence: the popup is ephemeral (dismissed on outside-click). Initial position (`right:14px; top:50%`) unchanged — drag is opt-in. ## Test (RED → GREEN) Source-invariant assertions on live.css and live.js: - `.feed-detail-card` z-index === 1050 - card markup contains `.panel-header` - `window._liveDragMgr` is assigned - popup-creation site calls `_liveDragMgr.register(card)` RED commit asserts all four — failed CI as expected. GREEN commit makes them pass. E2E assertion added: test-issue-1619-feed-detail-card-draggable.js:36 Triage: https://github.com/Kpa-clawbot/CoreScope/issues/1619#issuecomment-4641392168 |
||
|
Kpa-clawbotandKpa-clawbot
|
16c7ea4b82 |
fix(#1528): theme-track .vcr-scope-btn.active + .copy-link-btn:hover backgrounds (#1578)
Red commit: b018a752e82723b076316693df3271dbfb5e608b Fixes #1528 ## What Completes the four-surface accent-token migration from the triage on #1528. PR #1530 handled three of the four call-out surfaces (`.field-table .section-row td`, `.copy-link-btn` base rule, `.multibyte-badge`). This PR finishes the remaining two surfaces that still had hardcoded blue `rgba(59,130,246,...)` literals on their tinted backgrounds: - `public/live.css:1045` `.vcr-scope-btn.active` — `background` + `border-color` now go through `var(--accent-bg)` / `var(--accent-border)` with the prior literals retained as safe fallbacks. - `public/style.css:2673` `.copy-link-btn:hover` — `background` now goes through `var(--accent-border)`. ## Why The triage's "CSS-var theming illusion" finding: foreground text on these surfaces was already bound to themable tokens, but the backgrounds were blue-locked. Picking a non-blue accent in the customizer produced surfaces where the foreground tracked the theme but the background stayed blue — failing WCAG-AA on light accents (the bug screenshots in the issue). ## TDD - Red commit (`b018a752`): adds a Playwright E2E assertion that overrides `--accent-bg` / `--accent-border` on `:root` with sentinel colors and asserts `.vcr-scope-btn.active`'s computed `backgroundColor` / `borderColor` reflect them. Verified failing against the unfixed CSS — actual bg was `rgba(59, 130, 246, 0.2)`, sentinel was ignored. - Green commit (`d46055cd`): the two-line token swap. Verified passing after `docker cp` of the patched CSS onto staging — bg followed the override. E2E assertion added: `test-e2e-playwright.js:3318` ## Preflight `bash ~/.openclaw/skills/pr-preflight/scripts/run-all.sh origin/master` — all 9 hard gates pass, no warnings. Critically the "CSS self-fallback" and "CSS-var defined" checks (the gates that exist for exactly this class of bug) both pass. ## Scope Strictly the two remaining surfaces from #1528's fix path. No other `--accent` usage was touched. --------- Co-authored-by: Kpa-clawbot <bot@meshcore-analyzer> |
||
|
|
37a7a92730 |
fix(#1616): detach slide-over panel on close (architectural focus-restore fix) + --repeat-each=20 CI gate (#1617)
Fixes #1616. Supersedes the soften-and-track approach from #1172 (now closed). ## What Architectural fix for the slide-over close path so it no longer transitions through a `focused-but-hidden` state. Chromium-headless cannot deterministically order focus/blur events when `panel.hidden = true` happens in the same microtask as a delegated table re-render — root cause of the flake family that was blocking ~8 unrelated PRs at a time and flipping master CI ~50%. ## How (three changes per #1616 acceptance criteria) 1. **Panel detach on close.** `open()` attaches panel + backdrop to `<body>`; `close()` removes them. `isOpen()` is now a boolean flag (`panelOpen`) instead of `(!panel.hidden)` — the closed panel literally does not exist in the document tree, so there is no focused-but-hidden window. 2. **Focus restore by `data-value` lookup at restore time.** Sync `tr.focus()` BEFORE detach. If `document.activeElement !== tr` after the sync call, attach a one-shot `MutationObserver` on the table's `tbody`; on a matching row re-attach, call `.focus()` once and `disconnect()`. Observer has a 2s timeout fallback so it doesn't leak when the row is genuinely gone. 3. **Permanent CI flake-gate.** New step in `.github/workflows/deploy.yml`: runs `test-slideover-1056-e2e.js` 20 consecutive times. Any single non-zero exit aborts. If this step ever turns red post-merge, the focused-but-hidden state has crept back in. ## Hard-asserted (no more soft-warn) All three deferred assertions are now `assert(...)`: - `focus-restore@800: Escape returns focus to originating row` - `focus-restore@800: X-button click returns focus to originating row` - `resize@800→1440 nodes: cleanup releases panel, backdrop, scroll-lock, focus` (focusRestored portion) ## Commits - `fce39304` — RED: un-skip the two soft-skipped assertions - `cead78df` — GREEN: architectural fix (detach + MutationObserver) - `4f6d5c47` — CI: permanent `--repeat-each=20` flake-gate ## Verification The 20-run gate is the verification. Watch the new `Slide-over E2E flake-gate (#1616, --repeat-each=20)` step on this PR's CI; merge only if it passes. ## Why this is the right fix Five prior patches (`7891b70`, `366af4f`, `36ebecc`, `df5397f`, `d681505`) all targeted the focus call ordering and all flaked in CI Chromium-headless. The unfixable bit is "hidden-but-was-focused" — Chromium reorders blur/focus across that transition non-deterministically. Removing the transition (detach instead of hide) removes the race entirely. Closes #1616. Closes #1172 (already closed). --------- Co-authored-by: openclaw-bot <bot@openclaw> Co-authored-by: CoreScope bot <bot@corescope.local> Co-authored-by: clawbot <bot@clawbot.local> |
||
|
Eldoon Nemar
|
373ee81641 |
fix(UI): Additional fixes for issue #1532 (#1580)
- Eliminated extra space to the right of the map filters. - Made the map filters and mesh live a single line with a divider - Resized the input and dropdowns in the map filters so they meet WCAG 2.5.5 by being at least 44px high, but appearing 30px high - Turned the filters cog and the fullscreen button into native leaflet icons that are large enough to meet WCAV 2.5.5 compliance - Increased the size of the zoom buttons to meet WCAG 2.5.5 compliance on both the live and map pages - If the top nav bar is pinned, it won't disappear during fullscreen but if it isn't pinned, it will disappear with everything else. - The cog and full screen button change color to show they're active Final Outcome in 4k <img width="2878" height="1406" alt="image" src="https://github.com/user-attachments/assets/28db46a2-f1bb-4d9c-9d77-30c444b4ef3d" /> Final Outcome in 1080p <img width="1920" height="1080" alt="image" src="https://github.com/user-attachments/assets/120be8ec-0279-40fc-925a-243e9c0bcc1c" /> |
||
|
|
d7bd9d57b8 |
feat(live): fullscreen toggle + collapse controls by default (closes #1532) (#1572)
Closes #1532.
## What
Implements the triage's 3-step fix path + tufte keyboard shortcut:
1. **`.live-controls` collapsed by default at all viewports** (was
≤768px only). The existing ⚙ pin reveals the toggles row on demand —
parity with the map-controls accordion pattern in `map.js`.
2. **New `#liveFullscreenToggle` button (⛶) next to ⚙.** Click or press
`F` to flip `body.live-fullscreen`. CSS under that class hides:
- `.live-header-body` (title)
- `.live-controls-body` (toggle row contents)
- `.vcr-controls` and `.vcr-bar` (timeline scrubber)
- `.bottom-nav`
- secondary panels (`.live-feed`, `.live-legend`, related show-buttons)
3. **`.live-stats-row` stays pinned top-right** with translucent chip
styling so the 3 KPI pills (nodes / active / pkts·min) earn permanent
residence per the tufte finding.
## Tufte rationale (from triage)
> data-ink ratio is poor — 11 controls + 3 KPIs displayed permanently
steal pixels from THE data (the firework animation). Defaults-on chrome
should collapse behind a pin/cog; only the 3 stat pills earn permanent
residence (sparkline-grade density). … "Fullscreen" is the right
primitive — Tufte's "shrink principle" says strip until unreadable, then
add back.
## Keyboard shortcut
`F` toggles fullscreen. Guards:
- Skips when focus is in `INPUT`/`TEXTAREA`/`SELECT`/contenteditable (no
interference with node-filter / audio sliders typing).
- Skips when modifier keys are held.
- Only fires on the `.live-page` route.
- State persists across reloads via `localStorage('live-fullscreen')`.
## TDD
| Commit | SHA | What |
|--------|-----|------|
| RED | `852a474b` | Source-invariant assertion test
`test-issue-1532-live-fullscreen.js` (17 assertions, all fail against
master). |
| GREEN | `906c6cc0` | Implementation: HTML button, JS click+keydown
wiring, CSS body-class rules + top-level `.is-collapsed` rule. |
Verify the RED commit gates the change:
```
git checkout
|
||
|
Eldoon Nemar
|
d7cd9203ca |
Fixes #1165: add OSM/Stamen tile providers with per-provider Leaflet layer control. (#1533)
List of changes too long to describe, so I'll hit high level. - Config now supports the json map tiles that were suggested by @Kpa-clawbot. - Leaflet map layer button appears in the top right of live.js and map.js (because all the work was already done on live.js... Added bonus) - Allows users to enter creds for OSM and Stamen to get enterprise related perks, in the config file - Added a default light map under customizer. Still suggest removing them all together and relying on the config - You can enable OSM and Stamen in the config without a license, but at your own risk!!! - Config comment explains where to register and the providers for osm, as well as the general limits per X interval - Updated tests (28) to address the changes made to the maps ### TDD Exemption **Reason**: Net-new UI surfaces (per `AGENTS.md`) This PR introduces a net-new UI surface (the multi-provider map tile selector). Under the `AGENTS.md` exemption for net-new UI surfaces, the absence of an initial failing (red) commit is permitted, as the UI was built first. However, the underlying public APIs are fully covered. The following tests serve as the first assertions for these new APIs: - `window.MC_createLayerControl`: Asserted in `MC_createLayerControl handles Auto mode and explicit layers correctly` - `window.MC_setDarkTileProvider` & `window.MC_getDarkTileProvider`: Asserted in `MC_setDarkTileProvider persists to localStorage...` - `window.MC_setLightTileProvider` & `window.MC_getLightTileProvider`: Asserted in `MC_setLightTileProvider persists to localStorage...` - `window.MC_initTileRegistry`: Asserted in `MC_initTileRegistry(true) dispatches mc-tile-provider-changed` - `applyTileFilter`: Asserted in `applyTileFilter sets invert CSS for inverted dark provider...` - Cross-tab synchronization: Asserted in `Cross-tab storage event re-dispatches mc-tile-provider-changed` |
||
|
Eldoon Nemar
|
99cea7bf72 |
fix(ui): Fix area not under cog and let live filters break out of scrolling container and improve metrics layout. Should resolve Issue #1529 (#1531)
### Description This PR addresses several visual and UX issues on the Live page, specifically focusing on mobile viewport constraints and filter accessibility. **Changes:** 1. **Dropdown Clipping Fix**: Previously, the Node, Region, and Area filters were nested inside `.live-toggles`. On narrow screens, `.live-toggles` becomes a horizontally scrolling container (`overflow-x: auto`), which unintentionally clipped the absolute-positioned dropdown menus for these filters. They have been moved to `.live-controls-body` as siblings, allowing their dropdowns to correctly break out and overlay the map. 2. **Cog Positioning**: The settings cog (`#liveControlsToggle`) has been pushed to the far right of the metrics header using `margin-left: auto`, creating a cleaner visual separation. 3. **Filter Spacing**: When the controls panel is expanded, a `12px` top margin is now applied to push the filter buttons further away from the metrics row for better touch targets and readability. 4. **Test Updates**: The E2E Playwright test for the Area dropdown was updated to click the cog menu first, matching the new DOM structure. 5. **Area outside cog**: Resolves the initial issue of the area dropdown being outside of the cog on a mobile display ### Performance Justification This is a pure HTML/CSS structural refactor. There are no additional per-item calculations or API calls introduced. Moving the DOM nodes out of the scrolling container has zero impact on render loop complexity, and no new JavaScript event listeners were added to the hot path. ### Testing - [x] Unit tests pass (`npm test`) - [x] Playwright E2E tests pass (updated to reflect the cog interaction) - [x] Verified visually in browser (Desktop and Mobile viewports) |
||
|
Eldoon Nemar
|
2e70bcb671 |
UI accent partial fix for issue #1528 (#1530)
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. |
||
|
Eldoon Nemar
|
0273f1546e |
fix(live/ui): Fixed a nav-right pin bug (#1526)
## 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).
|
||
|
Eldoon Nemar
|
75a38f0285 |
Additional live map performance optimizations (#1521)
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. |
||
|
Eldoon NemarandKpaBap
|
914f869421 |
Make packet movement on the live map hardware-accelerated using HTML5 (#1490)
Instead of forcing Leaflet to recalculate and paint heavy SVG DOM nodes 60 times a second for every moving packet, we will draw the flying dots and lines directly onto a hardware-accelerated HTML5 <canvas> overlaid on the map. Once the animation finishes, it will drop a static Leaflet line to handle the fading tail effect. --------- Co-authored-by: KpaBap <kpabap@gmail.com> |
||
|
Kpa-clawbotandopenclaw-bot
|
28713fabdb |
feat(map): #1108 hide non-region nodes by default, add 'Show all nodes' toggle (#1501)
Closes #1108 ## What When an operator selects a region on the Live map, default to **hiding** nodes outside that region. The operator picked the region for a reason — far-away markers are visual noise. Operators who want the legacy show-everything behavior can flip the new **Show all nodes** checkbox next to the region dropdown. Default: **off (hide non-region nodes)**. State persists in `localStorage['mc-region-show-all-nodes']`. ## Why Tracks the request in #1108 — region filtering currently scopes packet feeds + metrics but the map keeps every node visible, which defeats the point of selecting a region in the first place. ## How - `public/region-filter.js`: new `RegionShowAll` module (`get` / `set` / `onChange` / `STORAGE_KEY`) plus `RegionFilter.nodesRegionQueryString()` — returns `®ion=…` only when a region is selected **and** showAll is off. Other surfaces (packets, metrics) continue to use the unconditional `regionQueryString()`. - `public/live.js`: `loadNodes()` appends `nodesRegionQueryString()`; region-change and showAll-change handlers reload nodes so markers update immediately. - `public/live.css`: aligns the new toggle with the existing `.live-toggles` rhythm. - `test-1108-region-hide-nodes.js`: 7 unit assertions covering default-off, persistence across reloads, set/get, and the conditional query-string builder. ## TDD trail - `dbf6d6db` — red test commit (assertion failures, helpers do not exist yet) - `eefa1185` — green commit (helpers + wiring) ## CDP validation (staging, after hot-deploy) | state | markers | | --- | --- | | no region | 517 | | region=SJC, showAll=off | **497** (region-scoped) | | region=SJC, showAll=on | 517 (legacy behavior) | Toggle state survives reload (`RegionShowAll.get() === true` after refresh). ## Out of scope - Static `/map` page (`public/map.js`) — its region UI is jump-buttons, not the shared `RegionFilter` selector. A follow-up could wire `nodesRegionQueryString` there too, but it's a separate UX surface. --------- Co-authored-by: openclaw-bot <bot@openclaw.local> |
||
|
Kpa-clawbotandcorescope-bot
|
0f7c03ccaf |
fix(#1293): role-aware marker shapes + outline-ring highlight (#1334)
Fixes #1293 ## What Marker shape now varies per role (WCAG 1.4.1 — colour is no longer the only carrier of role identity), and the live map's selection/highlight no longer stacks same-colour concentric markers. | Role | Shape | Why | |-----------|----------|-----| | repeater | circle | default, most common | | companion | square | flat sides, easy to distinguish from circle | | room | hexagon | tessellation hint = group | | sensor | triangle | "alert-like" silhouette | | observer | diamond | network-infrastructure suggestion | Existing role colours are preserved; the shape is the new differentiator so red/green colourblind operators can still tell roles apart. ## How - `public/roles.js`: new `window.ROLE_SHAPES` map (single source of truth), `ROLE_STYLE.shape` synced, shared `window.makeRoleMarkerSVG(role, color, size)` helper that emits self-contained `<svg>` strings — including a new `hexagon` branch. - `public/map.js`: `makeMarkerIcon` switch picks up the `hexagon` case. - `public/live.js`: `addNodeMarker` now builds an `L.divIcon` via `makeRoleMarkerSVG` (was a flat `L.circleMarker` — colour only). A hidden stroke-only `_highlightRing` is allocated per marker; `pulseNode` grows + fades that ring instead of recolouring the marker fill, so the blue-on-blue concentric stacking the issue called out cannot occur. `rescaleMarkers`, `pruneStaleNodes`, matrix mode toggling now drive the divIcon via small DOM helpers. - `public/live.js` role legend: emits SVG shape + colour swatch (was a bare coloured dot). - `public/live.css`: `.live-shape-swatch` wrapper for the SVG legend swatches. ## TDD Red commit: `7e5e2d95` — `test-issue-1293-marker-shapes.js` asserts the shape map, helper, hexagon branches, divIcon switch in `addNodeMarker`, SVG-based legend, and outline-ring highlight (no same-colour fill overlay). Wired into `deploy.yml` JS unit tests. Green commit: `fb33ca96`. ## Design check Coblis simulator (deuteranopia / protanopia / tritanopia) — reviewer to run on the staging build; shapes carry the signal independent of hue, so all role categories should remain distinguishable. Existing colours are retained per the issue's "keep colours, vary shape" guidance. ## Preflight `bash ~/.openclaw/skills/pr-preflight/scripts/run-all.sh origin/master` — all gates pass. --------- Co-authored-by: corescope-bot <bot@corescope> |
||
|
|
317b59ab10 |
feat: area-based visual node filter — attribute packets by transmitter GPS (#804) (#839)
## Summary - Adds configurable GPS polygon areas to `config.json`; nodes are attributed to an area if their last-known position falls inside the polygon - New `Area: …` dropdown filter (matching the existing region filter style) appears on all analytics, nodes, packets, map, and live screens when areas are configured - Backend resolves area membership with a 30s TTL cache; area filter bypasses the 500-node cap on `/api/bulk-health` so all area nodes are always returned - Includes a polygon builder tool (`/area-map.html`) for drawing and exporting area boundaries ## Changes **Backend** - `AreaEntry` type + `Areas` config field - `GetNodePubkeysInArea` DB query + `resolveAreaNodes` (30s TTL, `areaNodeMu` RWMutex) - `PacketQuery.Area` + `filterPackets` polygon check - `?area=` param propagated through all analytics, topology, clock-health, and bulk-health routes - `/api/config/areas` endpoint **Frontend** - `area-filter.js`: single-select dropdown, persists to localStorage, cleans up stale keys on load - Wired into analytics, nodes, packets, channels, map, and live pages - Live map clears node markers on area change **Docs & tools** - `docs/user-guide/area-filter.md` — configuration and usage guide - `docs/api-spec.md` — updated with new endpoint and `?area=` param table - `tools/area-map.html` — polygon builder for defining area boundaries - Demo areas added to `config.example.json` ## Test plan - [x] No areas configured → filter dropdown does not appear on any page - [x] Areas configured → dropdown appears, "All" selected by default - [x] Selecting an area filters nodes/packets/topology/map correctly - [x] Selecting "All" restores unfiltered view - [x] Selection persists across page reloads (localStorage) - [x] Stale localStorage key (area removed from config) is cleared on load - [x] `/api/bulk-health?area=X` returns all nodes in area (no 500-node cap) - [x] `/api/config/areas` returns correct list 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com> Co-authored-by: Kpa-clawbot <kpaclawbot@outlook.com> Co-authored-by: openclaw-bot <bot@openclaw.local> |
||
|
|
2329639f45 |
feat: scoped/unscoped transport-route statistics (#899) (#915)
@ ## What this PR does Implements region-scoped transport-route packet tracking with two sub-features: ### Feature 1 — Scope statistics (`scope_name`) - At ingest, transport-route packets (route_type 0/3) with Code1 != `0000` are HMAC-matched against configured `hashRegions` keys (mirroring the `hashChannels` pattern). Matched region name (or `""` for unknown) stored in new `transmissions.scope_name` column via migration `scope_name_v1`. - New `GET /api/scope-stats?window=` endpoint (1h/24h/7d, 30s server-side TTL) returning transport totals, scoped/unscoped counts, per-region breakdown, and time-series. - New **Scopes** tab in Analytics with summary cards, per-region table, and two-line SVG chart. Auto-refreshes every 60s. ### Feature 2 — Node default scope (`default_scope`) - Per-node `default_scope` column on `nodes`/`inactive_nodes` (migration `nodes_default_scope_v1`) tracks the most recently matched region for each node, derived from transport-scoped ADVERT packets. - `GET /api/nodes` response includes `default_scope` field when column is present. - Node detail panel displays the default scope badge. - Async startup backfill (`BackfillDefaultScopeAsync`) populates the column for nodes with pre-existing ADVERT data. ### Config Add `hashRegions` to `config.json` (see `config.example.json`). One entry per region name (with or without leading `#`). @ --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com> Co-authored-by: Kpa-clawbot <kpaclawbot@outlook.com> Co-authored-by: openclaw-bot <bot@openclaw.local> |
||
|
efitenandClaude Sonnet 4.6
|
5cc7332583 |
feat(live): clickable path overlay — packet info popup (closes #771 M2) (#923)
After a path animation completes, keeps an invisible clickable polyline on the map for 30s. Clicking it shows a compact Leaflet popup with type badge, hop chain, relative time, and a link to the full packets page. Popup auto-dismisses after 20s. ## Changes - `clickablePathsLayer`: new Leaflet layer for invisible hit-target polylines - `buildClickablePathPopupHtml()`: pure function generating popup HTML (type badge, hop chain, time, hash link) - `pruneClickablePaths()`: TTL (30s) + FIFO eviction (max 50); runs on existing `_pruneInterval` - `registerClickablePath()`: adds invisible polyline with click → popup handler - `animatePath()`: accepts optional `pktMeta` (`hash`, `ts`); calls `registerClickablePath` on completion - Teardown clears `clickablePathsLayer` and `clickablePaths` ## Tests 7 new unit tests; 77 pass, 0 regressions. Closes #771 (M2 of 3) --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com> |
||
|
Kpa-clawbotandcorescope-bot
|
21b6eb0d63 |
fix(live legend): document ACK/RESPONSE/PATH + white-ring repeater convention (#1274) (#1276)
RED commit `ac1fb4c3` (Playwright E2E asserts legend rows for ACK / RESPONSE / PATH text + "ring" + "repeater" — fails on master). CI: https://github.com/Kpa-clawbot/CoreScope/actions?query=branch%3Afix%2Fissue-1274 ## What The Live legend rendered five packet-type rows but the codebase defines eight `TYPE_COLORS`. The three gray-area types (ACK, RESPONSE, PATH) had no swatch in the legend, leaving operators guessing what gray dots meant — they're either ACKs or unknown payload types. Separately, the L.circleMarker styling block uses a brighter white ring to mark repeaters vs. all other roles; that convention was nowhere on screen. ## Changes - `public/live.js` legend HTML — adds rows for RESPONSE, PATH and a combined **Ack / Other** row (covering both ACK and the unknown-type fallback that share `#6b7280`). Adds a new **MARKER STYLES** subsection below NODE ROLES with two entries: bright white ring = repeater, faded ring = other. - `public/live.css` — adds `.live-ring` / `.live-ring--repeater` / `.live-ring--other` swatches. Background uses `var(--text-muted)`; only the white border + opacity differ between the two, matching the actual circleMarker weights (1.5 / 0.5) and opacities (0.6 / 0.3). - `test-issue-1274-legend-coverage-e2e.js` — Playwright E2E (desktop + mobile attached-DOM) asserting all four new pieces. ## Notes - All colors via `TYPE_COLORS` — no hardcoded hex in HTML. - Legend is `display:none` at ≤640px (existing #279 behavior), so no mobile CSS tweak required for the longer list. - Does not touch the legend toggle (#1219), mobile single-row header (#1234), or VCR visibility (#1269). Fixes #1274. --------- Co-authored-by: corescope-bot <bot@meshcore.local> |
||
|
Kpa-clawbotandopenclaw-bot
|
45872c8371 |
fix(#1250): trim mobile VCR bar h-padding 8px→4px to clear 0.83px LCD clip (#1251)
Red: master CI run https://github.com/Kpa-clawbot/CoreScope/actions/runs/25995768081 already fails on `test-e2e-playwright.js` `#1221 LCD clipped on right (right=375.828125, vw=375)`. No new test commit — the existing E2E assertion is the gate. **Root cause.** PR #1222's mobile rule set `.vcr-bar { padding: 4px 8px }`. The flex row holds three `flex-shrink: 0` children (controls + scope-btns + lcd) and one `flex: 1 1 0` absorber (`.vcr-timeline-container`, `min-width: 40px`). At 375px viewport the absorber hits its floor, so the intrinsic widths of the shrink-frozen children spill 0.83px past the padding box. **Fix.** Drop horizontal padding 8px → 4px inside the `@media (max-width: 640px)` block. That's 8px of new slack — order of magnitude above the 0.83px clip — keeping LCD's `getBoundingClientRect().right ≤ 375`. Desktop layout untouched (rule is mobile-scoped). VCR/feed overlap (#1206/#1213) not reintroduced because `--vcr-bar-height` is JS-measured by the ResizeObserver, not pinned in CSS. Fixes #1250 Co-authored-by: openclaw-bot <bot@openclaw.local> |
||
|
Kpa-clawbotandopenclaw-bot
|
e395c471ed |
fix(#1244): live mobile VCR single row + disable orphan gesture-hint pills on /live (#1246)
Red commit:
|
||
|
Kpa-clawbotandcorescope-bot
|
aba20b3eda |
fix(#1234): Live mobile chrome pass 2 — single-row header, hide top-nav, VCR overflow (#1238)
## Summary Live page mobile chrome-reduction pass 2. Three coordinated trims at ≤640px: 1. **`.live-header` → single row, ≤44px.** Drop the MESH LIVE text label and the chart-icon (📊) header toggle. Promote `.live-stats-row` to a direct child of `.live-header` so beacon + pkts + nodes + active + rate + gear all sit on one row. The (now empty) `.live-header-body` collapses to `display:none`. `.live-controls-toggle` shrinks to 36×36 to fit the strip. 2. **Top app navbar hidden on `/live`.** `body:has(.live-page) .top-nav { display:none }` — scoped via `:has()` so other routes are unaffected. The `.live-page` height reclaims the freed 52px. 3. **VCR scope row: >6h collapsed into `More ▾`.** `12h` and `24h` get `.vcr-scope-btn--overflow`; the new `.vcr-scope-more-wrap` dropdown is desktop-hidden, mobile-shown. Dropdown items proxy `.click()` to the underlying scope buttons — single source of truth, existing handler unchanged. ## TDD - **RED** (`b975c828`): `test-issue-1234-live-chrome-pass2-e2e.js` — one E2E asserting all three acceptance items at 375×800 + desktop sanity at 1280×800. Wired into `deploy.yml`. Fails on master (no More button, navbar visible, MESH LIVE label visible). - **GREEN** (`1e529e63`): CSS + JS implementation. Updates `test-live-layout-1178-1179-e2e.js` and `test-issue-1204-live-panel-structure-e2e.js` in-place to match the new single-row contract (chart toggle gone, MESH LIVE label gone on mobile, gear shrunk to 36×36). ## Verification (local) - New E2E: 7/7 ✅ - `test-issue-1178-1179`: 10/10 ✅ - `test-issue-1204`: 10/10 ✅ - `test-issue-1205`: 18/18 ✅ - `test-issue-1206`: 7/7 ✅ - `test-live-mql-leak-1180`: 2/2 ✅ - `#1220` empty-chrome guard (in `test-e2e-playwright.js`): header = 38px collapsed ✅ Desktop (1280×800) layout unchanged — top-nav visible, all 4 VCR scopes inline, header behavior identical. Fixes #1234. --------- Co-authored-by: corescope-bot <bot@corescope.local> |
||
|
Kpa-clawbotandopenclaw-bot
|
30ff45ad34 |
fix(#1220): collapse MESH LIVE mobile header into a single ~50px strip (#1223)
RED commit `c1a8cea` — E2E at 375x800 asserts MESH LIVE header is either ≤60px (collapsed) or ≥60px with a visible body. Fails on master with `height=118, bodyVisible=false, ctrlsVisible=false` — the empty-chrome middle state. CI for red commit: https://github.com/Kpa-clawbot/CoreScope/actions (will populate after push). ## Diagnosis On `(max-width: 768px)`, `#1180` collapses both `.live-header-body` and `.live-controls-body` to `display:none`. But `.live-controls` carries `flex: 0 0 100%` from the wide-viewport rule (introduced for `#1219` so the toggles wrap onto their own row below the title on tablet). On mobile, with the body hidden, that 100% basis still forces the gear button onto a full-width second row inside `#liveHeader`'s flex-wrap, ~60px tall — yielding the `~118-200px` empty panel the bug screenshot shows (the count badge + 📊 toggle on row 1, gear alone on row 2, nothing else). ## Fix — Option C Inside `@media (max-width: 768px)`, when `.live-controls.is-collapsed`: - drop `flex: 0 0 100%` → `flex: 0 0 auto; width: auto` so the gear inlines with the critical strip + 📊 toggle - when the header is also collapsed (`.is-collapsed:has(.live-controls.is-collapsed)`), zero the vertical padding so the strip hugs the 48px tap targets Result: collapsed mobile panel = single ~50px row, three icons inline. Expanded mobile = full toggle list (149px). Desktop unchanged (83px). Why Option C over A/B: a packet-watching mobile user keeps the map dominant and reaches for the gear when they want filters. The compact strip preserves both the WS-down red beacon (always visible) and the pkt count, with one-tap access to expand either body. Does not reintroduce #1204 (counter still attached to header) or #1205 (toggles still children of `#liveHeader`). Fixes #1220 --------- Co-authored-by: openclaw-bot <openclaw-bot@users.noreply.github.com> |
||
|
Kpa-clawbotandopenclaw-bot
|
24f277e5c6 |
fix(#1221): VCR LED clock in-row with controls and unclipped on mobile (#1222)
Red commit:
|
||
|
|
ab34d9fb65 |
fix(#1206): keep VCR bar from occluding the live packet feed (#1213)
Red commit: `bcfc74de` (CI: https://github.com/Kpa-clawbot/CoreScope/actions?query=branch%3Afix%2Fissue-1206) Fixes #1206. ## Problem On Live Map the VCR (timeline/playback) bar overlays the bottom of the viewport. Bottom-pinned overlays — the live packet feed, the legend, any corner panel — used hard-coded `bottom: 58–88px` offsets that are smaller than the real bar height (two-row mobile layout + `env(safe-area-inset-bottom)` push it to ~80px and beyond). The last N packet-feed rows slid under the bar and became unreadable / unclickable. ## Fix Publish the bar's measured height as a CSS variable on the live page and bind every bottom-anchored overlay to it. - `public/live.js` — new `initVCRHeightTracker()` runs after init; uses `ResizeObserver` + `resize` / `visualViewport.resize` to keep `--vcr-bar-height` on `.live-page` in sync with `#vcrBar`. - `public/live.css` — `.live-feed`, `.feed-show-btn`, and the `.live-overlay[data-position="bl"|"br"]` corner slots now use `bottom: calc(var(--vcr-bar-height, 58px) + 10px)`. The feed's `max-height` is also capped against `100dvh - top - vcr - margin` so its scroll container can never extend past the bar. - Stale per-breakpoint overrides (the `@supports(env(safe-area-inset))` hard-coded `78px + safe-area` for feed/legend) are removed in favor of the single tracked variable. ## TDD - Red commit `bcfc74de` adds `test-issue-1206-vcr-overlap-e2e.js`: asserts `#liveFeed.getBoundingClientRect().bottom <= #vcrBar.top` (and same for the last row) at desktop 1280x800 and mid 720x800. Verified locally that reverting the green commit makes the feed-bottom assertions fail (feed bottom 742px > VCR top 721px) — see PR body for exact numbers from the local run. - Green commit `1ad17e7f` makes all 5 assertions pass. ## Browser verified Local Go server with `test-fixtures/e2e-fixture.db`, headless Chromium via the new E2E test — all 5 assertions green. ## E2E assertion added `test-issue-1206-vcr-overlap-e2e.js:84` (bottom-row vs VCR-top) plus container check at `:74`. --------- Co-authored-by: openclaw-bot <bot@openclaw.local> Co-authored-by: clawbot <bot@corescope.local> |
||
|
|
a1f9dca951 |
fix(live #1205): re-anchor settings toggles inside MESH LIVE panel (#1219)
Red commit: f80ce5248a81fb8907081765732ebe0814f4a21a (CI URL appears in the Checks tab once the workflow starts). Supersedes closed PR #1209 with the correct approach (toggles in MESH LIVE panel, not legend). Fixes #1205. ## Problem The Live Map settings toggle row (Heat / Ghosts / Realistic / Color by hash / Matrix / Rain / Audio / Favorites / node filter / region filter — `#liveControls`) rendered as a free-floating sibling `.live-overlay` pinned `position: fixed` at bottom-right with `bottom: calc(78px + var(--bottom-nav-height) + safe-area)`. On many viewports it visually orphaned across the middle of the map, anchored to no panel. ## Regression cause PR **#1180** (commit `127a1927` — "compact header, pin controls bottom-right, narrow toggles") extracted `.live-toggles` from inside `.live-header` (the MESH LIVE panel) into a brand-new sibling `.live-overlay.live-controls` cluster. Before #1180 the toggles lived as a direct child of `.live-header`. ## Fix Restore the pre-#1180 structural pattern: `#liveControls` is re-parented as a child of `#liveHeader`, breaking onto its own row via `flex: 0 0 100%`. No more `position: fixed` overlay, no more free-floating cluster — the toggles share the MESH LIVE panel's chrome (background, blur, border, padding). - `public/live.js`: re-parent the `#liveControls` block inside `#liveHeader`, drop the `.live-overlay` class. - `public/live.css`: - `.live-controls`: `position: static`, transparent (header supplies chrome), `flex: 0 0 100%`. - `.live-header`: `flex-wrap: wrap`, `row-gap: 6px`, `max-width: calc(100vw - 24px)`; drop the `max-height: 40px` cap. Why this beats PR #1209: that PR parked toggles inside `#liveLegend`, inverting the *data → key → controls* hierarchy and pushing the legend to 60vh on mobile. Anchoring back to the MESH LIVE panel keeps controls with the panel that already labels the live surface and inherits its corner / drag affordances. ## Tests - **Red** (`test-issue-1205-live-controls-anchor-e2e.js`): asserts `#liveHeader.contains(#liveControls)` AND not contained in `#liveLegend`, parent is not `<body>` / `.live-page` directly, and the controls rect stays within the viewport. Runs at **1440×900, 640×900, 320×800**. Fails on master. - **Updated** `test-live-layout-1178-1179-e2e.js`: - (a) `.live-header-critical` height ≤ 40px (the critical strip stays compact; header itself now wraps). - (b) `.live-controls` `position: static` AND descendant of `#liveHeader` (new contract replacing the retired "fixed/right ≤24px/bottom>0"). - Wired in `.github/workflows/deploy.yml` next to the other live-layout E2Es. ## Acceptance criteria - [x] Settings toggle row renders inside the MESH LIVE panel (`#liveHeader`) - [x] Not parked in `#liveLegend` (rejected by #1209 review) - [x] Tested at desktop + tablet + narrow phone viewport widths - [x] E2E DOM assertion: parent is the MESH LIVE panel, not body / `.live-page` / `#liveLegend` --------- Co-authored-by: meshcore-bot <bot@meshcore.local> Co-authored-by: clawbot <clawbot@users.noreply.github.com> |
||
|
Kpa-clawbotandcorescope-bot
|
3255395bd0 |
fix(#1204): MESH LIVE panel — header inherited column flex from .live-overlay (#1215)
Red commit:
|
||
|
|
4925770aa4 |
fix(#1207): empty-state placeholder for Live Feed panel (no more orphan chrome) (#1210)
Red commit: `6c28227884a1e79e277653465028365dc0863171` — CI: https://github.com/Kpa-clawbot/CoreScope/actions?query=branch%3Afix%2Fissue-1207 Fixes #1207 ## Diagnosis The Live Map page renders `#liveFeed` (bottom-left panel) with two header buttons — `◫` (panel-corner-btn) and `✕` (feed-hide-btn) — but its `.panel-content` body has zero children on first paint, before any packets have been ingested via WebSocket. The user-reported "X + book icons, no content" is exactly these two header buttons sitting on an empty body. **Verdict:** intended panel, missing content due to a data race — the chrome mounts in HTML before the WS pushes its first packet. Not orphaned, not a leftover from #1186. ## Fix - Always render a persistent `.live-feed-empty` placeholder ("Waiting for packets…") inside `#liveFeed .panel-content`. - CSS hides it via `.live-feed .panel-content:has(.live-feed-item) .live-feed-empty { display: none; }` when real feed items exist. - `rebuildFeedList` re-adds the placeholder defensively after a wipe; eviction loop counts `.live-feed-item` only so the placeholder is never trimmed out. All colors via CSS variables (`var(--text-muted)`). ## Test (RED → GREEN) - **RED** `6c28227884a1e79e277653465028365dc0863171` — `test-e2e-playwright.js` adds a new test ("#1207 Live Feed panel never renders as empty chrome") that wipes `.live-feed-item` children to simulate the empty state and asserts the panel body has visible text or children. Fails on master. - **GREEN** `a5af80960ac42759ec83fd5ca5a72e81856228d4` — adds the placeholder; test now passes. ## Acceptance criteria - [x] No empty panel chrome visible on Live Map page - [x] Panel renders "Waiting for packets…" while feed is empty - [x] CSS auto-hides placeholder when packets arrive - [x] E2E assertion in `test-e2e-playwright.js` enforces non-empty `.panel-content` on `#liveFeed` ## Files - `public/live.js` — HTML markup + `rebuildFeedList` re-add + eviction-loop guard - `public/live.css` — `.live-feed-empty` style + `:has()` hide rule - `test-e2e-playwright.js` — regression test --------- Co-authored-by: clawbot <clawbot@kpabap.local> Co-authored-by: openclaw-bot <bot@openclaw.local> |
||
|
|
9d1f5d2395 |
fix(#1061): bottom navigation for narrow viewports (#1174)
Red commit: a200704d5e27e47c0b29a4745bf1a1772a8876fe (CI URL added once Actions resolves the run) Fixes #1061 ## What Bottom navigation at ≤768px with 5 tabs in spec order: Home, Packets, Live, Map, Channels. Top-nav suppressed at the same breakpoint — no duplicate nav UX. ## Files - NEW `public/bottom-nav.js` — renders 5 tabs, syncs `.active` on `hashchange`, reuses the existing in-app hash router (`<a href="#/...">`). Stable selector `[data-bottom-nav-tab="<route>"]`. Container `[data-bottom-nav]`. - NEW `public/bottom-nav.css` — styles. Tokens reused: `--nav-bg`, `--nav-text`, `--nav-text-muted`, `--nav-active-bg`, `--accent`, `--border` (all global → resolve in BOTH light and dark themes). - `public/index.html` — one `<link>` for the CSS, one `<script>` after `app.js`. The `<nav>` is appended by JS as a sibling of `<main id="app">` at DOMContentLoaded. - `test-bottom-nav-1061-e2e.js` + `.github/workflows/deploy.yml` — Playwright wiring. ## Decisions - **Breakpoint:** `@media (max-width: 768px)`. No `@container` rules exist anywhere in `style.css` today — media query is consistent. - **Top-nav suppression:** `display:none` at ≤768px. Simpler than a hamburger collapse; long-tail routes (Tools/Lab/Perf) remain reachable by URL; "More"-tab/hamburger fallback deferred per issue body. - **Active indicator:** `var(--nav-active-bg)` + 2px accent top-border. No moving pill. - **Safe-area:** `padding-bottom: env(safe-area-inset-bottom)` on nav + reciprocal `body` reservation. `viewport-fit=cover` already in place. - **Reduced motion:** `prefers-reduced-motion: reduce` disables the transition. ## TDD - Red: `a200704` — assertions fail (no bottom-nav). - Green: `53851a1` — component + styles. E2E assertion added: `test-bottom-nav-1061-e2e.js:71` (case (a) — bottom-nav visible at 360x800). --------- Co-authored-by: openclaw-bot <bot@openclaw.local> Co-authored-by: corescope-bot <bot@corescope.local> Co-authored-by: clawbot <clawbot@users.noreply.github.com> Co-authored-by: openclaw-bot <bot@openclaw> |
||
|
|
16c48e73b3 |
fix(live): compact header + pinned controls with narrow-viewport collapse (#1178, #1179) (#1180)
Red commit: 61fcc8c19b96543f1b4bbd6fd2ce54e6265d5e38 (CI run: pending — see Checks tab on this PR) Fixes #1178 Fixes #1179 ## Summary Live page layout polish — both issues touch `public/live.css` + a small `public/live.js` slice, so they ship as one PR per AGENTS rule 34. ### #1178 — Header compactness + narrow-viewport collapse - `.live-header` total height ≤ 40px at desktop widths (smaller padding, gap, title font, and pill sizing; `max-height: 40px` as a belt-and-suspenders gate). - Body wrapped in `.live-header-body` so it can collapse cleanly. - New 32×32 toggle button `[data-live-header-toggle]`, hidden at wide viewports, visible at `≤768px`. ### #1179 — Controls pinned bottom-right + narrow-viewport collapse - New `.live-controls` cluster around the toggles list and audio controls, `position: fixed; right: 12px;` and `bottom: calc(78px + var(--bottom-nav-height, 56px) + env(safe-area-inset-bottom, 0px))`. - That bottom calc reserves space for the VCR bar **and** the bottom nav (#1061, currently in PR #1174). When the bottom-nav exposes `--bottom-nav-height` the cluster tracks it; otherwise the 56px fallback keeps it clear regardless of merge order. - `z-index: 1000` keeps it above map markers but below modals. - New 32×32 toggle button `[data-live-controls-toggle]`, hidden at wide viewports, visible at `≤768px`. ### Breakpoint + selectors - Narrow = `max-width: 768px` (matches #1061 bottom-nav activation). - Stable selectors for E2E: `[data-live-header-toggle]`, `[data-live-header-body]`, `[data-live-controls-toggle]`, `[data-live-controls-body]`. No DOM-order dependence. ### Bottom-nav coexistence The expanded narrow-viewport controls panel uses `max-height: 50vh; overflow-y: auto` on its toggles list, and the cluster's `bottom` reservation guarantees the panel's bottom edge sits above the (possibly absent) bottom-nav region. The E2E test asserts exactly this with `expandedRect.bottom + 8 < innerHeight − navH`, defaulting `navH` to 56 if `.bottom-nav` is not in the DOM yet. ### Theming All new colors via existing CSS tokens (`--surface-1`, `--text`, `--text-muted`, `--border`, `--accent`). check-css-vars passes. ### TDD - Red commit: `61fcc8c` — assertions only (no impl), wired into `.github/workflows/deploy.yml` Playwright matrix. - Green commit: `7d591be` — DOM split + CSS + collapse JS. - E2E assertion added: `test-live-layout-1178-1179-e2e.js:55` (desktop header height) through `:170` (narrow controls bottom-nav coexistence). ### Local verification ``` ./corescope-server -port 13581 -db test-fixtures/e2e-fixture.db & CHROMIUM_PATH=/usr/bin/chromium BASE_URL=http://localhost:13581 \ node test-live-layout-1178-1179-e2e.js # → 8/8 passed ``` --------- Co-authored-by: meshcore-bot <bot@meshcore.local> Co-authored-by: openclaw-bot <bot@openclaw.local> |
||
|
Kpa-clawbotandKpa-clawbot
|
50676d5e65 |
fix(live): #1110 node filter — autocomplete, theming, no reload (#1113)
## Summary Fixes the broken **Filter by node** input on the Live page. The previous implementation used a native `<datalist>` (no consistent styling, no real autocomplete UX), only applied on `change` (Enter), and mutated `location.hash` on commit — which the SPA router treated as a navigation, triggering a full re-init. ## What changed - **Markup** (`public/live.js`): replaces the `<datalist>` with a styled custom `#liveNodeFilterDropdown` and adds combobox/listbox ARIA wiring. - **Styling** (`public/live.css`): new `.live-node-filter-input` rules use `color-mix` on `var(--text)` for the background and `var(--border)` / `var(--text)` for border + foreground — fully theme-aware. Dropdown uses `var(--surface-1)` + `var(--border)`. - **Behavior**: 200 ms debounced `/api/nodes/search` call as the user types. Suggestions render with name + 8-char pubkey prefix. Clicking a suggestion (`mousedown` so it beats blur) sets the filter to the pubkey. - **No reload**: `applyFilterFromInput` and the clear button now use `history.replaceState` instead of mutating `location.hash`, so the SPA router never re-runs and the page never reloads. Enter is `preventDefault`-ed and either selects the highlighted suggestion or commits the typed text. - **Keyboard**: ArrowUp/Down navigate suggestions, Esc closes, Enter selects. ## TDD Per `AGENTS.md`, the failing E2E test landed first (commit `74f3e92`), then the fix made it green (commit `a5c5c65`). The test file `test-1110-live-filter.js` (and an integrated block in `test-e2e-playwright.js`) asserts: 1. The input's computed `background-color` is **not** hardcoded white when `data-theme="dark"` is set. 2. The input is not vastly larger than the surrounding toolbar row. 3. Typing `"te"` shows a visible `#liveNodeFilterDropdown` with at least one `.live-node-filter-option`. 4. Clicking a suggestion sets `_liveGetNodeFilterKeys()` to a non-empty list **without** reloading the page (verified via a `window.__m` marker that survives) and **without** navigating away from `#/live`. 5. Pressing **Enter** in the filter input never reloads or navigates. ### How to run the E2E ``` go build -o /tmp/corescope-server ./cmd/server /tmp/corescope-server -port 13581 -db test-fixtures/e2e-fixture.db -public public & CHROMIUM_PATH=/usr/bin/chromium-browser BASE_URL=http://localhost:13581 \ node test-1110-live-filter.js # 4/4 passed ``` ## Acceptance criteria from #1110 - [x] Filter input visually matches Live page toolbar (theme-aware bg, border, padding) - [x] Typing 1+ characters shows dropdown of matching node names - [x] Selecting a suggestion filters the live feed immediately - [x] Clearing input restores unfiltered view - [x] No page reload on any interaction with the input - [x] E2E test asserts: type → suggestions appear → click suggestion → feed filters → no navigation Fixes #1110 --------- Co-authored-by: Kpa-clawbot <kpa-clawbot@users.noreply.github.com> |
||
|
Kpa-clawbotandmeshcore-bot
|
e9c801b41a |
feat(live): filter incoming packets by IATA region (#1045) (#1080)
Closes #1045. ## What Adds an optional region dropdown to the **Live** page that filters incoming packets by observer IATA. When a user selects one or more regions, only packets observed by repeaters in those regions render in the feed/animation/audio. ## How - New `liveRegionFilter` container in the live header toggles row, initialised via the shared `RegionFilter` component in `dropdown` mode (matches packets/nodes/observers pages). - On page init, fetches `/api/observers` once and builds an `observer_id → IATA` map. - `packetMatchesRegion(packets, obsMap, selected)` (pure helper, OR across observations, case-insensitive) gates `renderPacketTree` next to the existing favorite + node filters. - Selection persists in localStorage via the existing `RegionFilter` machinery — no per-page key needed. - Listener cleanup hooked into the existing live-page teardown. ## TDD - Red commit `55097ce`: `test-live-region-filter.js` asserts `_livePacketMatchesRegion` exists and behaves correctly across 9 cases (no-selection passthrough, single match, no-match, OR across observations, multi-region selection, unknown observer, missing observer_id, case-insensitivity, observer-map override). Fails with `_livePacketMatchesRegion must be exposed` against master. - Green commit `fdec7bf`: implements helper + UI wiring + CSS; test passes. Test wired into `.github/workflows/deploy.yml` JS unit-test step. ## Notes - Server-side WS broadcast is unchanged — filtering is purely client-side, as the issue requests ("something a user can activate themselves, and not something that would be server wide"). - Pre-existing `test-live.js` / `test-live-dedup.js` failures on master are not introduced or affected by this PR (verified by running both on master HEAD). --------- Co-authored-by: meshcore-bot <bot@openclaw.local> |
||
|
efitenandClaude Sonnet 4.6
|
997bf190ce |
fix(mobile): close button accessible + toolbar scrollable (#797) (#805)
## Summary - **Node detail `top: 60px` → `64px`**: aligns with other overlay panels, gives proper clearance from the 52px fixed nav bar - **Mobile bottom sheet `z-index: 1050`**: node detail now renders above the VCR bar (`z-index: 1000`), close button never obscured - **Mobile `max-height: 60vh` → `60dvh`**: respects iOS Safari browser chrome correctly - **`.live-toggles` horizontal scroll**: `overflow-x: auto; flex-wrap: nowrap` — all 8 checkboxes reachable via horizontal swipe Fixes #797 ## Test plan - [x] Mobile portrait (<640px): tap a map node → bottom sheet slides up, close button (✕) visible and tappable above VCR bar - [x] Mobile portrait: scroll the live-header toggles horizontally → all checkboxes reachable - [x] Desktop/tablet (>640px): node detail panel top-right corner fully below the nav bar - [x] Desktop: close button functional, panel hides correctly 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com> |
||
|
Kpa-clawbotandyou
|
bc22dbdb14 |
feat: DragManager — core drag mechanics (#608 M1) (#697)
## Summary Implements M1 of the draggable panels spec from #608: the `DragManager` class with core drag mechanics. Fixes #608 (M1: DragManager core drag mechanics) ## What's New ### `public/drag-manager.js` (~215 lines) - **State machine:** `IDLE → PENDING → DRAGGING → IDLE` - **5px dead zone** on `.panel-header` to disambiguate click vs drag — prevents hijacking corner toggle and close button clicks - **Pointer events** with `setPointerCapture` for reliable tracking - **`transform: translate()`** during drag — zero layout reflow - **Snap-to-edge** on release: 20px threshold snaps to 12px margin - **Z-index management** — dragged panel comes to front (counter from 1000) - **`_detachFromCorner()`** — transitions panel from M0 corner CSS to fixed positioning - **Escape key** cancels drag and reverts to pre-drag position - **`restorePositions()`** — applies saved viewport percentages on init - **`handleResize()`** — clamps dragged panels inside viewport on window resize - **`enable()`/`disable()`** — responsive gate control ### `public/live.js` integration - Instantiates `DragManager` after `initPanelPositions()` - Registers `liveFeed`, `liveLegend`, `liveNodeDetail` panels - **Responsive gate:** `matchMedia('(pointer: fine) and (min-width: 768px)')` — disables drag on touch/small screens, reverts to M0 corner toggle - **Resize clamping** debounced at 200ms ### `public/live.css` additions - `cursor: grab/grabbing` on `.panel-header` (desktop only via `@media (pointer: fine)`) - `.is-dragging` class: opacity 0.92, elevated box-shadow, `will-change: transform`, transitions disabled - `[data-dragged="true"]` disables corner transition animations - `prefers-reduced-motion` support ### Persistence - **Format:** `panel-drag-{id}` → `{ xPct, yPct }` (viewport percentages) - **Survives resize:** positions recalculated from percentages - **Corner toggle still works:** clicking corner button after drag clears drag state (handled by existing M0 code) ## Tests 14 new unit tests in `test-drag-manager.js`: - State machine transitions (IDLE → PENDING → DRAGGING → IDLE) - Dead zone enforcement - Button click guard (no drag on button pointerdown) - Snap-to-edge behavior - Position persistence as viewport percentages - Restore from localStorage - Resize clamping - Disable/enable ## Performance - `transform: translate()` during drag — compositor-only, no layout reflow - `will-change: transform` only during active drag (`.is-dragging`), removed on drop - `localStorage` write only on `pointerup`, never during `pointermove` - Resize handler debounced at 200ms - Single `style.transform` assignment per pointermove frame — negligible cost --------- Co-authored-by: you <you@example.com> |
||
|
Kpa-clawbotandyou
|
a1e1e0bd2f |
fix: bottom-positioned panels overlap VCR bar (#693)
Fixes #685 ## Problem Corner positioning CSS (from PR #608) sets `bottom: 12px` for bottom-positioned panels (`bl`, `br`), but the VCR bar at the bottom of the live page is ~50px tall. This causes the legend (and any bottom-positioned panel) to overlap the VCR controls. ## Fix Changed `bottom: 12px` → `bottom: 58px` for both `.live-overlay[data-position="bl"]` and `.live-overlay[data-position="br"]`, matching the legend's original `bottom: 58px` value that properly clears the VCR bar. The VCR bar height is fixed (`.vcr-bar` class with consistent padding), so a hardcoded value is appropriate here. ## Testing - All existing tests pass (`npm test` — 13/13) - CSS-only change, no logic affected Co-authored-by: you <you@example.com> |
||
|
Kpa-clawbotandyou
|
1373106b50 |
Fix panel corner toggle buttons invisible and scrolling away (#678)
## Summary Panel corner toggle buttons (◫) were invisible due to small size, low opacity, and `position: absolute` causing them to scroll away with panel content. ## Changes ### Panel structure — non-scrolling header All 3 live overlay panels (feed, node detail, legend) now use a flex layout: - **`.panel-header`** — non-scrolling row with corner toggle + close button - **`.panel-content`** — scrollable content area ### CSS updates - `.live-overlay`: `display: flex; flex-direction: column` - `.panel-header`: flex row, `flex-shrink: 0` - `.panel-content`: `flex: 1; overflow-y: auto` - `.panel-corner-btn`: removed `position: absolute`, increased to 28×28px, opacity 0.6, hover background ### JS updates - Feed items now appended to `.panel-content` child instead of panel root - `rebuildFeedList` and `addFeedItem` updated to target `.panel-content` - Resize handle still attaches to panel root (correct behavior) ## Testing - All 490+ frontend helper tests pass - All panel-corner tests pass (14/14) - No test changes needed — tests exercise logic, not DOM structure Fixes #677 --------- Co-authored-by: you <you@example.com> |
||
|
Kpa-clawbotandyou
|
b8e9b04a97 |
feat: panel corner-position toggle (M0) (#657)
## Panel Corner-Position Toggle (M0) Fixes #608 ### What Each overlay panel on the live map page (feed, legend, node detail) gets a small corner-toggle button that cycles through **TL → TR → BR → BL** placement. This solves the panel-blocking-map-data problem with minimal complexity. ### Changes **`public/live.css`** (~60 lines) - CSS classes for 4 corner positions via `data-position` attribute - Smooth transitions with `cubic-bezier` easing - `prefers-reduced-motion` support - Direction-aware hide animations for positioned panels - `.panel-corner-btn` styling (subtle, hover-to-reveal) - Mobile: corner buttons hidden (`<640px` — panels are hidden or bottom-sheet) - `.sr-only` class for screen reader announcements **`public/live.js`** (~90 lines) - `PANEL_DEFAULTS`, `CORNER_CYCLE`, `CORNER_ARROWS` constants - `getPanelPositions()` — reads from localStorage with defaults - `nextAvailableCorner()` — collision avoidance (skips occupied corners) - `applyPanelPosition()` — sets `data-position` + updates button - `onCornerClick()` — cycle logic + persistence + SR announcement - `resetPanelPositions()` — clears saved positions - Corner toggle buttons added to feed, legend, and node detail panel HTML - `initPanelPositions()` called during page init **`test-panel-corner.js`** (14 tests) - `nextAvailableCorner`: available, skip occupied, skip multiple, self-exclusion - `getPanelPositions`: defaults, saved values - `applyPanelPosition`: attribute setting, button update, missing element - `onCornerClick`: cycling, collision avoidance - `resetPanelPositions`: clear + restore defaults - Cycle order and default position validation ### What this does NOT include - Drag-and-drop (M1–M4) - Snap-to-edge - Z-index management - Keyboard repositioning - Any of the full drag system ### Design decisions - **`data-position` + CSS classes** over inline transforms — avoids conflict with existing show/hide `transform` animations - **Cycle (TL→TR→BR→BL)** over toggle-to-opposite — predictable, learnable - **3 panels, 4 corners** — collision avoidance is trivial, always a free corner - **Header/stats panel excluded** — it's contextual chrome, not repositionable --------- Co-authored-by: you <you@example.com> |
||
|
Kpa-clawbotandyou
|
e42477b810 |
feat: collapsible panels + medium breakpoint on live map (#606)
## Summary Adds collapsible/minimizable UI panels on the live map page so overlay panels don't block map content on medium-sized screens. Fixes #279 ## Changes ### Collapsible Legend Panel (all screen sizes) - The legend toggle button (🎨/✕) is now visible at **all** screen sizes, not just mobile - Clicking it smoothly collapses/expands the legend with a CSS transition - Collapsed state persists in `localStorage` (`live-legend-hidden`) - Feed panel already had hide/show with localStorage — no changes needed there ### Medium Breakpoint (768px) New `@media (max-width: 768px)` rules for tablet/small laptop screens: - Feed panel: 360px → 280px wide, max-height 340px → 200px - Node detail panel: 320px → 260px wide - Legend: smaller font (10px) and tighter padding - Header: reduced gap and padding - Stats/toggles: smaller font sizes ### What's NOT changed - Mobile (≤640px): existing behavior preserved (feed/legend hidden entirely) - Desktop (>768px): no changes — panels render at full size as before ## Testing - `test-packet-filter.js`: 62 passed - `test-aging.js`: 29 passed - `test-frontend-helpers.js`: 445 passed --------- Co-authored-by: you <you@example.com> |
||
|
Kpa-clawbotandCopilot
|
447c5d7073 |
fix: mobile responsive — #203 live bottom-sheet, #204 perf layout, #205 nodes col-hide
#203: Live page node detail panel becomes a bottom-sheet on mobile (width:100%, bottom:0, max-height:60vh, rounded top corners). #204: Perf page reduces padding to 12px, perf-cards stack in 2-col grid, tables get smaller font/padding on mobile. #205: Nodes table hides Public Key column on mobile via .col-pubkey class (same pattern as packets page .col-region/.col-rpt). Cache busters bumped in index.html. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> |
||
|
you
|
ab3626935c |
Replace hardcoded status colors with CSS variables and theme-aware helpers
CSS changes: - style.css: .live-dot.connected, .hop-global-fallback, .perf-slow, .perf-warn now use var(--status-green/red/yellow) instead of hardcoded hex - live.css: live recording dot uses var(--status-red), LCD text uses var(--status-green) JS changes (analytics.js): - Added cssVar/statusGreen/statusYellow/statusRed/accentColor/snrColor helpers that read from CSS custom properties with hardcoded fallbacks - Replaced ~20 hardcoded status colors in: SNR histograms, quality zones, zone borders/patterns, SNR timeline, daily SNR bars, collision badges (Local/Regional/Distant), distance classification, subpath map markers, hop distance distribution, network status cards, self-loop bars JS changes (live.js): - Added statusGreen helper for LCD clock color - Legend dots now read from TYPE_COLORS global instead of hardcoded hex All colors now respond to theme customization via the customize panel. |
||
|
you
|
1cb3baf4ab |
fix: replace all hardcoded colors with CSS variables
- Move --status-green/yellow/red from home.css to style.css :root (light+dark) - Replace hardcoded status colors in style.css (.tl-snr, .health-dot, .byop-err, .badge-hash-*, .fav-star.on, .spark-fill) with CSS variable references - Replace hardcoded colors in live.css (VCR mode, stat pills, fdc-link, playhead) - Replace --primary/--bg-secondary/--text-primary/--text-secondary dead vars with canonical --accent/--input-bg/--text/--text-muted in style.css, map.js, live.js, traces.js, packets.js - Fix nodes.js legend colors to use ROLE_COLORS globals instead of hardcoded hex - Replace hardcoded hex in home.js (SNR), perf.js (indicators), map.js (accuracy circles) with CSS variable references via getComputedStyle or var() - Add --detail-bg to customizer (THEME_CSS_MAP, DEFAULTS, ADVANCED_KEYS, labels) - Move font/mono out of ADVANCED_KEYS into separate Fonts section in customizer - Remove debug console.log lines from customize.js - Bump cache busters in index.html |
||
|
you
|
8726026486 | fix: raise feed panel bottom to 68px to clear VCR bar, revert z-index | ||
|
you
|
56b0217c0d | fix: feed detail card z-index above VCR bar (1100 > 1000) | ||
|
you
|
15a93d5ea4 |
feat: clickable nodes on live map with slide-in detail panel
- Click any node marker to see name, role, status, location, stats - Heard By observers and recent packets shown - Links to full node detail and analytics pages - Slide-in panel from right with blur background, matches live page style - Uses shared ROLE_COLORS and HEALTH_THRESHOLDS |
||
|
you
|
435a19057a | fix: mobile VCR bar bottom padding with safe-area + 20px fallback | ||
|
you
|
90abb42904 | fix: bump feed/legend safe-area offsets to account for two-row VCR on mobile | ||
|
you
|
93c7f4c9eb | fix: VCR bar + feed/legend offset by safe-area-inset-bottom with 34px fallback for iOS | ||
|
you
|
175d9269ec | fix: VCR bar respects iOS safe area inset (home indicator) | ||
|
you
|
0be9e8b4fd | mobile VCR: proper two-row layout — controls+scope+LCD row, full-width timeline row, no horizontal scroll |