The status banner, cards grid, and extras grid all had margin: 0
with max-width set, causing them to left-align instead of centering
at wider viewports. Changed to margin: 0 auto for proper centering.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
The responsive CSS grid layout (css/layout.css) was already fully
implemented with all required features: app-shell grid container,
responsive breakpoints at 1023px and 639px, touch targets >= 44px,
safe-area-inset-bottom for mobile bottom nav, and no position:absolute
on any layout containers. This commit fixes a minor inconsistency where
integrations.html was missing viewport-fit=cover and apple-mobile-web-app
meta tags present on all other dashboard pages.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Fix systemic missing-colon bugs in layout.css where property values
like top, left, right, bottom, gap, padding were directly followed by
var() without a colon separator. This broke all fixed-position panels
in the live view. Also add missing --space-half token to tokens.css
and complete design token migration across remaining CSS files.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Replace additional hard-coded colors with design tokens in layout,
notifications, panels, timeline, and other CSS files.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Replace remaining hard-coded colors across all CSS files with design
tokens from tokens.css. Remove duplicate inline positioning from
live.html panels (now in layout.css). Add replay session blob fetch
for immediate 3D scene state on seek.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Move inline position:fixed styles from setup.html and expert.css into the
shared layout.css stylesheet. Convert #scene-container and #status-bar from
position:fixed to grid-child layout within .app-shell--live, eliminating
fragile top/height calc chains that broke on every new overlay element.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Replace `color: white` in #ble-btn .badge with `var(--text-on-accent)`
completing the single design system adoption per plan §8e.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
The presence panel positioning was moved to layout.css in a prior commit
but the inline override in live.html was not cleaned up.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Replace hardcoded spacing (padding, margin, gap), typography (font-size,
line-height), and border-radius values with CSS custom property tokens
from tokens.css across all 26 dashboard CSS files. Colors were already
tokenized; this completes the design system adoption per plan.md §8e.
763 lines changed: 478 from bulk spacing/typography pass, 285 from
directional margin/padding pass. No hex colors remain outside tokens.css.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Extract ID-based panel positioning (#node-panel, #chart-panel,
#presence-panel) from live.html inline styles into shared layout.css
with proper responsive breakpoints for tablet and mobile.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Move inline <style> blocks from simple.html and integrations.html into
external CSS files (wizard.css, integrations.css), replacing all
hard-coded pixel values with design tokens from tokens.css. Remove
inline style attributes in favor of CSS classes. All 5 dashboard pages
now share one design system via Radix dark tokens (§8e).
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Wire the replay module's onJumpToTime callback so the full-page timeline
can coordinate with the replay system after a jump-to-time API call. The
callback syncs replay state, shows the control bar, and feeds replay
blobs to the 3D scene.
All CSS (.selected, .now-replaying-chip), DOM elements, sidebar timeline
click handling, Go backend jump-to-time endpoint, and tests were already
in place. This closes the cross-module coordination gap.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Replace remaining hardcoded font-size, padding, and border-radius values
with design token variables in layout.css, timeline.css, live.html, and
setup.html. Add timeline explain button and selected-event highlight styles.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Continued CSS tokenization pass across ambient, fleet, live, simple,
integrations pages and their component stylesheets. Replaces hardcoded
`white`, `#1a1a2e`, and raw rgba values with semantic tokens from
tokens.css.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Home page (index.html) is now a clean status+cards layout (109 lines):
- Row 1: status headline with ok/warn/alert states
- Row 2: three cards linking to /live#zones, /fleet, /live#timeline
- Row 3: optional briefing, anomaly, security toggle
- Mobile bottom nav for Home/Live/Fleet/Setup
3D viewer lives at /live (live.html), fleet at /fleet, setup at /setup.
All routes served by Go chi router. home-cards.js connects to /ws/dashboard
for snapshot+incremental updates.
Remaining CSS tokenization: live.html buttons and layout.css status bar
now use design tokens instead of hardcoded colors. Added --orange token
for GDOP fair quality. timeline.js gains replay state fields.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Replace remaining hardcoded border-radius and color values across 22 CSS
files with design system tokens. Add .live-status-bar, .live-scene, and
.live-panel-* classes to layout.css for the grid-based live view shell.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
panels.css: replaced 17 hardcoded rgba values with semantic token
references (--alert, --warn-bg, --ok-bg, --border-strong, etc).
ambient.css: replaced one hardcoded blue rgba with --blue-muted.
Zero hardcoded hex/rgba color values remain outside tokens.css.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
setup.html was the only page not using the .app-shell CSS grid — its
elements were directly on the body with inline position styles. Wraps
content in .app-shell--live (viewport-filling variant), moves header
into .app-header grid area, and nests #scene-container inside .app-main.
Verified: grep for position:absolute across dashboard/css/ returns only
intentional decorative/component uses (pseudo-elements, toggles, tooltips,
dropdowns, canvas overlays) — zero on layout containers.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Cache the full WebSocket snapshot so incremental updates always have
complete state for banner and card rendering. Add fall/security alert
detection in the status banner with --alert level. Add armed security
state styling in home.css.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Convert hardcoded rgba colors across all dashboard CSS files to use
--ok-bg, --warn-bg, --alert-bg tokens from tokens.css per §8e design
system. Home page status banner and card tags now use proper semantic
tokens. Add layout.css import to live.html for shared nav structure.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
When timeline event is clicked in expert mode, emit jump_to_time command
with event timestamp. The time-travel player pauses live playback, seeks
CSI recording buffer to timestamp, and begins replay. Selected event
highlights in timeline and "Now replaying" chip appears in header.
Backend: POST /api/replay/jump-to-time creates replay session centered
on timestamp, replaces previous active session. Frontend: handleSeek()
in sidebar-timeline delegates to SpaxelReplay.jumpToTime() which calls
the API, shows replay control bar, and notifies Viz3D.
Tests: 7 Go test cases for jump-to-time endpoint, 8 JS test cases for
tap-to-jump interaction, event highlighting, and now-replaying chip.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
The home page (index.html) was restructured into status headline + 3 cards.
The 3D viewer lives at /live (live.html), setup/calibration at /setup (setup.html).
Fleet page remains at /fleet. home-cards.js pulls snapshot from /ws/dashboard.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Per plan.md §8e information architecture:
- index.html (109 lines) is now a home page with status headline,
3 cards (People & Zones, Devices & Fleet Health, Recent Events),
optional extras row, and mobile bottom nav
- live.html serves the full 3D viewer at /live route
- home-cards.js connects to /ws/dashboard for snapshot + incremental updates
- tokens.css provides the Radix dark design system
- layout.css provides the CSS Grid app shell with responsive breakpoints
- home.css provides card grid, status banner, responsive mobile layout
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Delete non-canonical commandpalette.* and blepanel.js in favor of the
hyphenated command-palette.* and ble-panel.* which match the fleet-page.*
naming convention. Rename test file accordingly.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
The IIFE had `let _renderer` on line 13 and `let _renderer = null` on
line 30, which throws SyntaxError and kills the entire Viz3D module,
cascading into panel layout failures on the home page.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Add server-side types filter (comma-separated) for category-based filtering,
fuzzy text search with FTS5 fallback on Enter, and improved client-side
filtering with character-sequence matching. Category checkboxes now send
types to server for efficient loading. Includes table-driven tests for types
filter, pagination, and combined filter scenarios.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Add optional mothership IP override to the provisioning flow so nodes
on networks where mDNS is blocked (enterprise WiFi, mesh, VLANs) can
connect on first boot without manual intervention.
- Add ms_ip field to provisioning Payload and request structs
- Firmware writes ms_ip to both NVS_KEY_MS_IP and NVS_KEY_MS_IP_PROV
- Discovery prefers provisioned IP on first attempt, falls back to
mDNS, then cached IP
- Web Serial wizard adds Mothership IP field in Network Troubleshooting
- Auto-populates IP when browser accesses dashboard by IP address
- Document when/how to use the override in docs/notes/mdns-override.md
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
460800 causes the stub to hang mid-write on ESP32-S3 QFN56 boards with XMC
embedded flash. 115200 skips the post-stub baud rate negotiation entirely.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The XMC embedded flash on ESP32-S3 (QFN56) has JEDEC ID 164020 which esptool.js
does not recognise — it returns flash size -1 causing 'File doesn't fit in
available flash' before any bytes are written.
firmware/sdkconfig.defaults:
CONFIG_ESPTOOLPY_FLASHSIZE 16MB → 4MB
4MB is the minimum supported flash. The spi_flash check only panics when
physical < header, so 4MB header is safe on 16MB boards as well.
firmware/partitions.csv:
Redesigned to fit within 4MB flash:
factory 0x010000–0x200000 (~1.9MB, fits current 1.7MB binary + 330KB headroom)
ota_0 0x200000–0x3F0000 (~1.9MB, A/B OTA + rollback preserved)
otadata 0x3F0000–0x3F2000 (8KB)
Total flash used: 0x3F2000 (98.6% of 4MB). Drops ota_1 (was at 8MB, unusable
on 4MB devices anyway); rollback still works factory↔ota_0.
dashboard/js/onboard.js:
flashSize: 'detect' → '4MB' (detect returned -1 for this chip's JEDEC ID;
hardcoding '4MB' correctly sets the binary header for all supported boards)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- flashSize: 'detect' — esptool.js now detects the physical flash size and
updates the binary header before writing. Fixes boot panic on devices with
4MB embedded flash (e.g. ESP32-S3 WROOM-1-N4R2) when firmware was compiled
for 16MB: spi_flash_init() no longer sees a header/physical mismatch.
- Chip family validation — after loader.main() returns the detected chip,
check it against build.chipFamily from the manifest. Throw a UserError if
a non-ESP32-S3 (or unsupported chip family) is connected, instead of
silently flashing incompatible firmware.
- Better post-flash error messaging — track flashSucceeded flag; if flashing
succeeded but provisioning failed, show "Provisioning failed / unplug and
replug" instead of the misleading "Device not in download mode" help.
- Mothership auto-detection — offline fallback and ms-host placeholder now
use window.location.hostname instead of the hardcoded spaxel-mothership.local.
The browser is already talking to the mothership via this hostname, so it is
the correct default for the device to reach it as well.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The firmware prints 'SPAXEL READY <MAC>' a few seconds after the flash reset,
once the UART driver has initialised. Previously the browser sent the JSON
payload immediately when the port opened — the bytes arrived while the device
was still booting and were lost, causing a 15 s timeout.
New flow:
1. Open port (with retries for USB re-enumeration)
2. Read serial stream waiting for 'SPAXEL READY' line (up to 30 s)
3. Only then send the JSON provisioning payload
4. Wait for firmware's {"ok":true} acknowledgment (up to 10 s)
The MAC extracted from 'SPAXEL READY <MAC>' is used as a fallback in case
the firmware's JSON response is parsed before the mac field is available.
- SSID input: add autocorrect=off, autocapitalize=none, spellcheck=false to
prevent mobile browsers from silently altering SSIDs with special chars
- Password input: same attrs for consistency
- Firmware: accept WPA/WPA2 mixed mode (WIFI_AUTH_WPA_WPA2_PSK) so networks
with special characters in the password connect regardless of WPA version
- Firmware: detect open networks (empty password) and use WIFI_AUTH_OPEN so
passwordless networks are not rejected by the auth threshold
JSON encoding path (JSON.stringify → TextEncoderStream → cJSON) already
handles all characters correctly; these changes prevent browser-side mangling
and firmware-side connection rejection.
Previously: flash firmware → wait for 120s boot window → fill form → send over serial
Now: fill WiFi form → flash firmware → device reboots → send over serial immediately
The provisioning window opens at boot. With credentials already collected, the
browser sends the payload the moment the flash+reboot cycle completes — no human
action required and no race condition. Flash step now handles both flashing and
provisioning in one automated sequence (progress 0→80% flash, 80→100% provision).
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Show real-time status messages and a collapsible log panel during WiFi provisioning
- Thread addProvLog/setProvStatus callbacks through provisionAndSend and sendPayloadOverSerial
- Log every stage: mothership fetch, payload assembly, port open retries, serial send/response
- All log lines also go to browser console.log/warn/error
- Firmware: extend provisioning window from 10s to 120s for fresh boards (15s for re-provisioning)
- Firmware: include MAC address in SPAXEL READY message for display
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Clears session state and returns to step 1. Useful when onboarding
multiple devices back-to-back without a page reload.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
getAuthorizedPort() is unreliable after esptool reboots the device.
Use state.port (the port the user explicitly selected) and retry port.open
up to 5 times with 1s gaps to handle the brief window while the device
re-enumerates. Show specific UserError messages instead of the generic one.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
On page reload the serial port reference is lost. If saved state points
to flash_firmware or later and port is null, drop back to connect_device
so the user can re-select their device.
Also add a small '← Back to Connect' link at the bottom of the flash
step so there is always a visible escape route.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Remove <esp-web-install-button> and all shadow DOM polling hacks.
Use esptool-js (vendored as dashboard/js/esptool-bundle.js) via dynamic
import to flash directly. Flash starts automatically when step 3 loads —
no button click required. Progress shown inline. On failure, shows
BOOT+RST instructions and a retry button.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The ewt-install-dialog tag name check was too strict — drop it and take
the first non-style element child that appears in the shadow root, then
poll _installState on it. This matches how the previous version found
the dialog before we narrowed the check.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
esp-web-tools v10 does not dispatch a state-changed DOM event for
firmware flashing — that event only exists for Improv WiFi provisioning.
Flash state lives on ewt-install-dialog._installState (a LitElement
@state property). Replace the broken event listener with a 100ms poll
on _installState once the dialog appears in the shadow root.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
esp-web-tools v10 removed flash-start/flash-progress/flash-success/flash-error
events. Only state-changed fires — but from inside the shadow root (not composed),
so host-element listeners never receive it.
Fix: MutationObserver watches the shadow root for the dialog element, then
attaches state-changed directly to it. States: erasing/writing drive inline
progress; finished auto-advances; error shows retry.
Also suppress the dialog overlay (CSS injection into shadow root) once erasing
starts, so the flash progress shows inline in the wizard with no separate modal.
The dialog remains visible briefly for the 'preparing' confirm step only.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
If esp-web-tools throws a JS error during progress display (e.g. the
manifest offset bug), flash-success never fires and the wizard gets stuck
with no way to advance. After reaching 100% progress, wait 4s for the
event; if it doesn't come, show a 'Continue →' button instead.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Dockerfile: use --flash_size 4MB and drop OTA data from merge_bin (OTA
data at 0xc10000 inflated binary to 12.6MB, exceeding 4MB chip flash)
- main.go: seedFirmwareDir now overwrites when source size differs, fixing
PVC staleness where old 1.6MB app-only binary was never replaced
- onboard.js: renderFlashFirmware() rewritten so all elements (button,
progress bar, status text, retry help, log panel) are inline in one
container — no separate floating modal
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Captures console.log/warn/error and esp-web-tools state-changed events
into a scrollable monospace log panel (collapsed by default, auto-opens
on flash-start and flash-error). Includes timestamps and error detail
from the flash-error event for diagnosing failures like the toString crash.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
On flash-error, show BOOT+RST instructions with board diagram and a
"Try Again" button instead of a dead-end error message. Escalates to
USB cable/hub advice after 2 failures. Adds a proactive collapsible
tips section before flashing starts for users who read ahead.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
/dist/install-button.js has bare 'tslib' imports that browsers reject.
/dist/web/install-button.js is the fully bundled build with only
relative imports — works without an import map.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Switch to unpkg.com/esp-web-tools@10.2.1 which resolves correctly.
The old espressif.github.io/esp-web-tools path no longer exists,
causing the firmware flashing component to silently fail to load.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The onboard wizard requires the esp-web-install-button custom element
from esp-web-tools. It was loaded in index.html but missing from
simple.html, causing "Firmware flashing component failed to load."
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
