Fix touch event propagation from panels to canvas, resolve iOS Safari
passive event listener warnings, prevent double-tap zoom conflicts,
improve pinch gesture accuracy, and enable three-finger pan.
Changes:
- Add maximum-scale=1.0, user-scalable=no to viewport meta tag (live.html)
- Add touch-action: none to canvas elements (expert.css)
- Change panel touch listeners from passive:false to passive:true with
stopPropagation() to prevent iOS warnings (panels.js)
- Enhance controls.js module with comprehensive panel class coverage
and auto-apply functionality
Acceptance Criteria Met:
✓ Touch events on sidebar panels do not propagate to the canvas
✓ No iOS Safari passive event listener warnings
✓ Double-tap to zoom is disabled (user-scalable=no in meta viewport)
✓ Pinch gesture is accurate on actual devices (zoomSpeed=1.0)
✓ Three-finger pan is enabled in OrbitControls
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Rename expert.css → scene.css (file contained WCAG touch targets and
3D scene layout, nothing mode-specific). Remove dead dashboardMode !==
'expert' guard in timeline seek handler. Simple/expert toggle and
localStorage key were already removed in prior commits.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Implements the full explainability overlay for understanding why a blob was detected:
- ExplainabilitySnapshot generation with per-link contribution tracking and zone decay
- Fresnel zone ellipsoid geometry computation and 3D wireframe rendering
- WebSocket request_explain / blob_explain flow for on-demand snapshots
- Right-click, long-press, click, and hover tooltip activation paths
- X-ray overlay dims non-contributing elements, highlights contributing links
- Sidebar panel with confidence gauge, links table, sparklines, BLE match card
- Escape key and backdrop click to exit, restoring scene state
Also includes: simple mode removal, CSS cleanup, fleet page enhancements, sidebar timeline fixes.
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 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>
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>
- Cap devicePixelRatio at 2.0 on screens < 1024px width
- Disable MSAA antialiasing on mobile devices
- Disable shadow maps on mobile devices
- Add frame rate capping at 30fps for struggling mobile devices
- Auto-detect low FPS and adjust frame rate accordingly
- Panel close buttons: expanded from 32x32px to 44x44px
- Slider controls: expanded drag targets to 44px height with 32px thumb
- Toggle switches: expanded to 44px minimum height
- Checkboxes: expanded touch area with pseudo-element to 44x44px
- Context menu items: minimum 44px height
- Link list entries: minimum 44px height
- All buttons: minimum 44x44px touch targets
- Small buttons use expanded padding to maintain appearance while meeting 44px requirement
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add expert.css for expert mode specific styles
- Improve mobile orientation change handling with visualViewport API support
- Add iOS Safari visual viewport resize handling for better mobile experience
- Add getViewportDimensions() function preferring visualViewport API
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
