- Add hamburger menu for mobile panel navigation
- Create bottom sheet panels that slide from bottom on mobile
- Implement touch-optimized UI with 44x44px minimum tap targets
- Add mobile-specific panel content for Fleet Status, Zones, Triggers, Settings
- Support drag-to-close gesture on bottom sheets
- Maintain existing desktop panel behavior
- Integrate with existing systems (Viz3D, SpaxelPanels, SpatialQuickActions)
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- Add simple.html: mobile-first card-based UI without 3D scene
- Room cards show occupancy count, person names, and status color
- Activity feed displays chronological events from timeline
- Alert banner for fall detection, anomaly alerts, system warnings
- Quick actions: arm/disarm security, re-baseline, silence alerts
- Sleep summary card showing last night's sleep data
- Simple/expert mode toggle button in all views
- Mobile-responsive layout with touch-friendly interface
- Per-user default mode stored in localStorage
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
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>
- Add collapsible filter panel with category checkboxes (Presence, Zones,
Alerts, System, Learning) for client-side event type filtering
- Add person and zone dropdowns populated from /api/people and /api/zones
- Add date range selector (All Time / Today / Last 7 Days / Last 30 Days /
Custom range) with server-side re-fetch on date changes
- Add text search input with fuzzy client-side matching and FTS5 server-side
prefix matching for descriptions
- Add active filter tags with individual remove buttons and Clear All
- Add load-more cursor pagination for 500+ results
- Add virtualized rendering with IntersectionObserver for 1000+ events
- Render event feedback buttons (thumbs up/down) inline on each event
- Add now-replaying chip showing current replay timestamp
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Wire Fresnel zone toggle through Layers module for consistent
state management across toolbar, debug panel, and layer controls.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- Improve link highlighting with Fresnel health color mapping
- Route re-provision through live page via query param for reliability
- Remove simple-mode gating from command palette (now available everywhere except ambient)
- Update Fresnel tests, fleet page unpaired node UX, and help articles
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>
Fix missing colons in CSS declarations across timeline.css and replay.css
that broke gap/padding/margin/bottom properties. Simplify timeline mode
detection to use router callbacks instead of SpaxelSimpleModeDetection.
Add aria-labels to select elements for accessibility.
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 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>
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>
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>
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>
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>
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>
