Comprehensive WebUI review: 41 UX/feature/CSS improvements

Safety & Correctness:
- Add confirmation dialogs to Stop All, turnOffDevice
- i18n confirm dialog (title, yes, no buttons)
- Fix duplicate tutorial-overlay ID
- Define missing CSS variables (--radius, --text-primary, --hover-bg, --input-bg)
- Fix toast z-index conflict with confirm dialog (2500 → 3000)

UX Consistency:
- Add backdrop-close to test modals
- Add device clone feature (only entity without it)
- Add sync clocks to command palette
- Replace 20+ hardcoded accent colors with CSS vars/color-mix()
- Remove dead .badge duplicate from components.css
- Make calibration elements keyboard-accessible (div → button)
- Add aria-labels to color picker swatches
- Fix pattern canvas mobile horizontal scroll
- Fix graph editor mobile bottom clipping

Polish:
- Add empty-state messages to all CardSection instances
- Convert 21 px font-sizes to rem
- Add scroll-behavior: smooth with reduced-motion override
- Add @media print styles
- Add :focus-visible to 4 missing interactive elements
- Fix settings modal close label (Cancel → Close)
- Fix api-key submit button i18n

New Features:
- Command palette actions: start/stop targets, activate scenes, enable/disable
- Bulk start/stop API endpoints (POST /output-targets/bulk/start|stop)
- OS notification history viewer modal
- Scene "used by" automation reference count on cards
- Clock elapsed time display on Streams tab cards
- Device "last seen" relative timestamp on cards
- Audio device refresh button in edit modal
- Composite layer drag-to-reorder
- MQTT settings panel (broker config with JSON persistence)
- WebSocket log viewer with level filtering and ring buffer
- Runtime log-level adjustment (GET/PUT endpoints + settings UI)
- Animated value source waveform canvas preview
- Gradient custom preset save/delete (localStorage)
- API key read-only display in settings
- Backup metadata (file size, auto/manual badges)
- Server restart button with confirm + overlay
- Partial config export/import per entity type
- Progressive disclosure in target editor (Advanced section)

CSS Architecture:
- Define radius scale tokens (--radius-sm/md/lg/pill)
- Scope .cs-filter selectors to remove 7 !important overrides
- Consolidate duplicate toggle switch (filter-list → settings-toggle)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

TODO.md

@@ -66,3 +66,64 @@ Priority: `P1` quick win · `P2` moderate · `P3` large effort
 - [ ] `P1` **Collapse dashboard running target stats** — Show only FPS chart by default; uptime, errors, and pipeline timings in an expandable section collapsed by default
 - [x] `P1` **Daylight brightness value source** — New value source type that reports a 0–255 brightness level based on daylight cycle time (real-time or simulated), reusing the daylight LUT logic
 - [x] `P1` **Tags input: move under name, remove hint/title** — Move the tags chip input directly below the name field in all entity editor modals; remove the hint toggle and section title for a cleaner layout
+
+## WebUI Review (2026-03-16)
+
+### Critical (Safety & Correctness)
+- [x] `P1` **"Stop All" buttons need confirmation** — dashboard, LED targets, KC targets
+- [x] `P1` **`turnOffDevice()` needs confirmation**
+- [x] `P1` **Confirm dialog i18n** — added data-i18n to title/buttons
+- [x] `P1` **Duplicate `id="tutorial-overlay"`** — renamed to calibration-tutorial-overlay
+- [x] `P1` **Define missing CSS variables** — --radius, --text-primary, --hover-bg, --input-bg
+- [x] `P1` **Toast z-index conflict** — toast now 3000
+
+### UX Consistency
+- [x] `P1` **Test modals backdrop-close** — added setupBackdropClose
+- [x] `P1` **Devices clone** — added cloneDevice with full field prefill
+- [x] `P1` **Sync clocks in command palette** — added to _responseKeys + _buildItems
+- [x] `P2` **Hardcoded accent colors** — 20+ replacements using color-mix() and CSS vars
+- [x] `P2` **Duplicate `.badge` definition** — removed dead code from components.css
+- [x] `P2` **Calibration elements keyboard-accessible** — changed div to button
+- [x] `P2` **Color-picker swatch aria-labels** — added aria-label with hex value
+- [x] `P2` **Pattern canvas mobile scroll** — added min-width: 0 override in mobile.css
+- [x] `P2` **Graph editor mobile bottom clipping** — adjusted height in mobile.css
+
+### Low Priority Polish
+- [x] `P3` **Empty-state illustrations/onboarding** — CardSection emptyKey with per-entity messages
+- [x] `P3` **api-key-modal submit title i18n**
+- [x] `P3` **Settings modal close labeled "Cancel" → "Close"**
+- [x] `P3` **Inconsistent px vs rem font sizes** — 21 conversions across streams/modal/cards CSS
+- [x] `P3` **scroll-behavior: smooth** — added with reduced-motion override
+- [x] `P3` **Reduce !important usage** — scoped .cs-filter selectors
+- [x] `P3` **@media print styles** — theme reset + hide nav
+- [x] `P3` **:focus-visible on interactive elements** — added 4 missing selectors
+- [x] `P3` **iOS Safari modal scroll-position jump** — already implemented in ui.js lockBody/unlockBody
+
+### New Features
+- [x] `P1` **Command palette actions** — start/stop targets, activate scenes, enable/disable automations
+- [x] `P1` **Bulk start/stop API** — POST /output-targets/bulk/start and /bulk/stop
+- [x] `P1` **OS notification history viewer** — modal with app name, timestamp, fired/filtered badges
+- [x] `P1` **Scene "used by" reference count** — badge on card with automation count
+- [x] `P1` **Clock elapsed time on cards** — shows formatted elapsed time
+- [x] `P1` **Device "last seen" timestamp** — relative time with full ISO in title
+- [x] `P2` **Audio device refresh in modal** — refresh button next to device dropdown
+- [x] `P2` **Composite layer reorder** — drag handles with pointer-based reorder
+- [x] `P2` **MQTT settings panel** — config form with enabled/host/port/auth/topic, JSON persistence
+- [x] `P2` **Log viewer** — WebSocket broadcaster with ring buffer, level-filtered UI in settings
+- [x] `P2` **Animated value source waveform preview** — canvas drawing of sine/triangle/sawtooth/square
+- [x] `P2` **Gradient custom preset save** — localStorage-backed custom presets with save/delete
+- [x] `P2` **API key management UI** — read-only display of key labels with masked values
+- [x] `P2` **Backup metadata** — file size, auto/manual badge
+- [x] `P2` **Server restart button** — in settings with confirm dialog + restart overlay
+- [x] `P2` **Partial config export/import** — per-store export/import with merge option
+- [x] `P3` **Audio spectrum visualizer** — already fully implemented
+- [ ] `P3` **Hue bridge pairing flow** — requires physical Hue bridge hardware
+- [x] `P3` **Runtime log-level adjustment** — GET/PUT endpoints + settings dropdown
+- [x] `P3` **Progressive disclosure in target editor** — advanced section collapsed by default
+
+### CSS Architecture
+- [x] `P1` **Define missing CSS variables** — --radius, --text-primary, --hover-bg, --input-bg
+- [x] `P2` **Define radius scale** — --radius-sm/md/lg/pill tokens, migrated key selectors
+- [x] `P2` **Scope generic input selector** — .cs-filter boosted specificity, 7 !important removed
+- [x] `P2` **Consolidate duplicate toggle switch** — filter-list uses settings-toggle
+- [x] `P2` **Replace hardcoded accent colors** — 20+ values → CSS vars with color-mix()