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>
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>
Add troubleshooting infrastructure for non-technical users:
- TroubleshootManager: node offline cards with stepped recovery
guidance, factory reset modal, and detection quality banners
- TooltipManager: first-time feature tooltips with localStorage
persistence, auto-dismiss, and sequential tour
- Onboarding failure guidance: human-readable error messages for
browser compatibility, USB connection, WiFi provisioning, and
node detection failures
- Post-calibration reinforcement card with summary and next steps
- Client-side link health check with auto-recovery
- CSS for offline cards, tooltips, quality banners, and modals
- Script tags wired in index.html for troubleshoot.js and tooltips.js
- 30 tests covering all troubleshooting and tooltip functionality
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
