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>
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>
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>
Add CSS environment variables for safe-area-inset to prevent content
overlap with notch/home indicator on iOS devices.
Changes:
- expert.css: Add safe area support to body, scene container, and
simple-quick-actions (hamburger menu) navigation
- quick-actions.css: Add safe area support to context menu and
follow-mode-indicator
- panels.css: Add safe area support to toast-container
- troubleshoot.css: Add safe area support to spaxel-dismiss-all
The viewport-fit=cover meta tag was already present in index.html.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Implement transform-based slide-in animation with overlay backdrop for screens < 1024px:
- Hamburger button (44x44px touch target) in header
- Slide-in menu with translateX(0) animation (200ms ease-out)
- Semi-transparent overlay backdrop that closes on tap
- Menu contains: Node List, Link List, Presence Panel, Timeline, Devices
- Active tab opens first (last-used panel persisted to localStorage)
- Close button (X, 44px) in top-right
- Escape key closes menu
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add GET /api/simulator/gdop/heatmap endpoint in both simulator handlers
- Fix viz3d.js to call correct endpoint (GET instead of POST)
- Update response format handling to parse gdop_map and grid_dimensions
- Generate colors from GDOP values using quality thresholds
- Position overlay correctly in 3D scene
The GDOP overlay now visualizes accuracy metrics across the virtual space
with color-coded quality indicators (green=excellent, yellow=good, orange=fair, red=poor).
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
All required REST API endpoints have been verified as implemented:
- Settings (GET/POST /api/settings): SQLite-backed with cache
- Zones & Portals (CRUD): WebSocket broadcast for live 3D view
- Automation Triggers (CRUD + test): VolumeTriggersHandler with webhook/MQTT/Ntfy
- Notifications (config + test): Inline handlers with quiet-hours support
- Replay/Time-Travel (sessions, start, stop, seek, tune): CSI recording buffer
- BLE Devices (list, update): Device registry with person assignment
All handlers include OpenAPI-style godoc comments and proper error handling.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Backend: Add POST /api/auth/change-pin endpoint
- Requires valid session; body: {old_pin, new_pin}
- Verifies old PIN against bcrypt hash; returns 403 on mismatch
- Hashes new PIN with bcrypt cost=12
- Existing sessions remain valid after PIN change
- Returns {ok:true} on success
- Dashboard: Security section in settings panel
- Add "Security" section with Change PIN button
- Modal form: old PIN → new PIN → confirm new PIN → Submit
- Inline error display for incorrect current PIN (403)
- Success toast notification on PIN change
- Validation: 4-8 digits, numeric only, PINs must match, new ≠ old
- Tests: Add comprehensive tests for change PIN endpoint
- Success case: old PIN verified, new PIN works
- Wrong old PIN: returns 403, original PIN still works
- Unauthenticated: returns 401
- Invalid new PIN: validation for length, digits, etc.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Backend (mothership/internal/auth/):
- SQLite auth table with pin_bcrypt and install_secret (singleton row)
- GET /api/auth/status — return {pin_configured: bool}
- POST /api/auth/setup — sets PIN (bcrypt cost 12) on first run only
- POST /api/auth/login — verifies PIN, issues session cookie (7-day expiry)
- POST /api/auth/logout — clears cookie and deletes session from SQLite
- Session middleware: all /api/* and /ws/* require valid session
- Rolling window: extends session by 7 days if within 24h of expiry
- Install secret generation for node token derivation
Dashboard (dashboard/js/auth.js):
- On load: GET /api/auth/status check
- First-run setup page: enter PIN + confirm PIN → POST /api/auth/setup → reload
- Login page: shown on 401; PIN entry → POST /api/auth/login → reload
- Logout button in settings panel → POST /api/auth/logout → redirect
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Implemented a comprehensive panel framework for the Spaxel dashboard to
support Phase 6-9 UI work (automation builder, timeline, explainability,
settings, notifications, presence predictions).
- Panel System (dashboard/js/panels.js):
- Slide-in sidebar (right, 360px) with close button and title
- Modal overlay (centered, 600px wide) for forms and wizards
- Toast notification stack (bottom-right) with type variants
- Panel registry: panels can be opened by name from anywhere
- Route/Mode Navigation (dashboard/js/router.js):
- Hash-based routing: #live (default), #timeline, #automations, #settings
- Mode toggle bar in header with active state styling
- Active mode persisted across page refresh (localStorage)
- State Management (dashboard/js/state.js):
- Central app state object (nodes, blobs, zones, links, alerts, events)
- Subscribe/notify pattern for reactive component updates
- Convenience methods for common operations (updateNode, addEvent, etc.)
- Settings Panel (dashboard/js/settings-panel.js):
- Motion threshold slider (deltaRMS threshold)
- Fusion rate selection (5/10/20 Hz)
- Grid cell size and Fresnel decay rate controls
- Subcarrier count and baseline time constant settings
- Notification channel config (Ntfy URL/token, Pushover keys)
- System info display (version, uptime, detection quality, node count)
- Updated index.html with:
- CSS/JS includes for panel framework
- Settings button in status bar
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
