chore: release v0.6.0

- Move the device refresh button into the label row next to "Audio Device:"
  so it can no longer overflow the Source panel edge; introduces a small
  .label-row-action style alongside .hint-toggle.
- Restore device selection after refresh by matching on (index, loopback)
  value first, with a trimmed name fallback for OS-side reindexing.
- _selectAudioDevice now syncs the EntitySelect trigger so the visible
  label matches the underlying <select> when the modal opens in edit mode.
- Drop unused min-width/overflow on .transport-status.

.gitea/workflows/test.yml

@@ -5,9 +5,15 @@ on:
     branches: [master]
   pull_request:
     branches: [master]
+  # Allow manual runs (e.g. to validate after a release commit was skipped).
+  workflow_dispatch:
 
 jobs:
   test:
+    # Skip release-publishing commits — version bumps don't affect lint/tests
+    # and the release.yml pipeline is already running. PRs and manual dispatch
+    # always run.
+    if: ${{ github.event_name != 'push' || !startsWith(github.event.head_commit.message, 'chore: release') }}
     runs-on: ubuntu-latest
     steps:
       - name: Checkout

.gitignore

@@ -68,6 +68,11 @@ logs/
 # shipped sound assets out of the CI tag checkout.
 /data/
 /server/data/
+# Defensive: if the server is launched from server/src/ (uncommon path),
+# its relative `data/` dir resolves to server/src/data/. Templates now
+# live in SQLite, so any *.json that lands here is stale runtime export
+# and must not be committed.
+/server/src/data/
 *.db
 *.sqlite
 *.json.bak
@@ -90,3 +95,5 @@ tmp/
 # OS
 Thumbs.db
 .DS_Store
+# Added by code-review-graph
+.code-review-graph/

.mcp.json

@@ -0,0 +1,12 @@
+{
+  "mcpServers": {
+    "code-review-graph": {
+      "command": "uvx",
+      "args": [
+        "code-review-graph",
+        "serve"
+      ],
+      "type": "stdio"
+    }
+  }
+}

CLAUDE.md

@@ -104,3 +104,42 @@ Do NOT commit code that fails linting or tests. Fix the issues first.
 - Follow existing code style and patterns
 - Update documentation when changing behavior
 - Never make commits or pushes without explicit user approval
+
+<!-- code-review-graph MCP tools -->
+## MCP Tools: code-review-graph
+
+**IMPORTANT: This project has a knowledge graph. ALWAYS use the
+code-review-graph MCP tools BEFORE using Grep/Glob/Read to explore
+the codebase.** The graph is faster, cheaper (fewer tokens), and gives
+you structural context (callers, dependents, test coverage) that file
+scanning cannot.
+
+### When to use graph tools FIRST
+
+- **Exploring code**: `semantic_search_nodes` or `query_graph` instead of Grep
+- **Understanding impact**: `get_impact_radius` instead of manually tracing imports
+- **Code review**: `detect_changes` + `get_review_context` instead of reading entire files
+- **Finding relationships**: `query_graph` with callers_of/callees_of/imports_of/tests_for
+- **Architecture questions**: `get_architecture_overview` + `list_communities`
+
+Fall back to Grep/Glob/Read **only** when the graph doesn't cover what you need.
+
+### Key Tools
+
+| Tool | Use when |
+|------|----------|
+| `detect_changes` | Reviewing code changes — gives risk-scored analysis |
+| `get_review_context` | Need source snippets for review — token-efficient |
+| `get_impact_radius` | Understanding blast radius of a change |
+| `get_affected_flows` | Finding which execution paths are impacted |
+| `query_graph` | Tracing callers, callees, imports, tests, dependencies |
+| `semantic_search_nodes` | Finding functions/classes by name or keyword |
+| `get_architecture_overview` | Understanding high-level codebase structure |
+| `refactor_tool` | Planning renames, finding dead code |
+
+### Workflow
+
+1. The graph auto-updates on file changes (via hooks).
+2. Use `detect_changes` for code review.
+3. Use `get_affected_flows` to understand impact.
+4. Use `query_graph` pattern="tests_for" to check coverage.

RELEASE_NOTES.md

@@ -1,20 +1,42 @@
-## v0.4.2 (2026-04-22)
+## v0.6.0 (2026-05-01)
 
-### Bug Fixes
-- Ship previously-missing package assets in release artifacts — prebuilt notification sounds (`alert`, `bell`, `chime`, `ping`, `pop`) and game adapter YAMLs (`minecraft`, `rocket_league`, `valorant`). An unanchored `data/` rule in `.gitignore` was matching `server/src/ledgrab/data/`, so these files never reached the tag or CI builds. Also bump the `_FALLBACK_VERSION` literal to `0.4.2` so the Windows installer (which strips `.dist-info`) reports the correct version in the WebUI instead of `0.3.0`. Build scripts now patch this literal automatically to prevent future drift. ([5db6edd](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/5db6edd))
+This release adds **device-event notifications** (snack + Web Notifications), a **daylight/timezone-aware streaming pipeline** with a new camera engine, a **redesigned Targets surface** built on the dashboard's mod-card system, a **tighter LED hot path** with allocation-free per-frame work, and a **revamped Release Notes overlay** with clickable asset downloads. Plus a wide pass of modal, toolbar, and settings polish across the WebUI.
 
 ### Features
-- Restyle the enhanced header locale picker as a LED-accent badge — 2-letter code in Orbitron, collapses to just the badge on narrow screens ([9ce1dc3](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/9ce1dc3))
+- **Device event notifications** — configurable per-event channel matrix (none / snack / OS / both) for target online/offline, new WLED/serial discovery, and devices going missing. Backed by a long-running mDNS browser + 10 s serial poller, a startup-grace / flap-debounce / bulk-coalesce pipeline, and a new Notifications tab in Settings (en/ru/zh). ([8aa3a32](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/8aa3a32))
+- **Daylight + timezone streaming** — new `daylight_settings` module and `daylight-tz` frontend helper expand the daylight stream's behavior; capture path additions land alongside a new **camera engine** test suite. ([fdac26b](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/fdac26b))
+- **Targets cards migrated to the mod-card system** — LED targets and HA Light targets now share the dashboard's instrument-readout vocabulary (mod-head / mod-leds / mod-metrics / mod-foot, kebab menu, badges, chips, patch indicator). LED preview, FPS sparkline, and pipeline metrics preserved via an `extraHtml` escape hatch. ([233b463](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/233b463))
+- **Target pipeline as a compact strip + chip row** — drops the legacy "Pipeline details" collapsible block; an always-visible 4 px segmented timing bar (extract / map / smooth / send for video, read / fft / render / send for audio) sits above an inline chip row showing total ms / frames / keepalives, animating smoothly between samples. ([51eebf2](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/51eebf2))
+- **Targets metrics aligned with the dashboard** — FPS sparkline now lives inside the FPS cell, Uptime gets a clock icon, Errors gets ok/warning by count, FPS readout adopts the dashboard `current/target avg N.N` shape, and the grid sizes so values like `1m 43s` no longer truncate at typical desktop widths. ([9067db2](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/9067db2))
+- **Release Notes overlay v2** — new masthead with display-font title, tag/published/pre-release chip strip, and close/external actions; markdown body fuzzy-matches `<code>` filenames to release assets and renders clickable download links with per-asset descriptions (Windows installer/portable/msi, Linux tarball/AppImage/deb/rpm, macOS dmg/pkg, Android apk/aab, iOS ipa). Checksum/signature side-files are hidden. ([9d4a534](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/9d4a534))
+- **Tutorials expansion** — sub-tab switching, breadcrumb header, and prepare/switchSubTab hooks let tours open/close the dashboard customize panel and resolve targets behind sub-tabs; new steps for integrations, dashboard customize panel (presets / global / sections / perf cells), targets, scenes, and sync-clocks (en/ru/zh). ([797b806](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/797b806))
+- **Cards / settings / modal / toolbar polish** — reworked mod-card colors, sections, channel-stripe styling, hairline borders, and signal-flow animation on running cards; multiselect bulk toolbar gets explicit Select-all / Deselect-all icons with luxury-gradient toolbar styling; Settings tabs are now icon-only (no overflow at any locale); modal exit animation gains symmetric fadeOut + slideDown keyframes with reduced-motion support; locale picker collapses to EN / RU / ZH; snack toast adopts a glass background with per-type accent. ([a56569b](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/a56569b))
+- **Suppress browser auto-open on Windows login** — when "Start with Windows" is enabled, the autostart shortcut now passes `--autostart` so the WebUI tab no longer pops on every login. Manual launches and the installer's "Launch LedGrab" finish-page action are unchanged. ([de13f44](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/de13f44))
+- **Simpler segment payloads** — `SegmentPayload.start` defaults to 0 and `length` defaults to "the rest of the strip from start". A single segment with only `mode` + `color` now fills the entire strip — no more `length: 9999` magic value clients had to pass. ([1c9acc5](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/1c9acc5))
+- About panel now houses the author + contact details that previously lived in a global app footer, freeing up vertical space across every page (en/ru/zh `donation.about_author` key added). ([816a27d](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/816a27d))
+
+### Performance
+- **LED hot path is allocation-free per-frame**: Adalight gets a dedicated single-worker tx executor, pre-allocated wire buffer, uint8 scratch, and a precomputed header struct; DDP gets a pre-built `struct.Struct` and memoryview emit path; calibration precomputes Phase 3 skip-LED resampling so per-frame work is now `np.take` + in-place blend; the WLED target processor gets a matching tightening. ([797b806](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/797b806))
+
+### Bug Fixes
+- **Audio-source modal preserves device on refresh** — refresh button moved into the label row (no more overflow past the Source panel edge); selection is restored by matching on `(index, loopback)` first with a trimmed-name fallback for OS-side reindexing; the EntitySelect trigger now syncs so the visible label matches the underlying `<select>` in edit mode. ([0980cf4](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/0980cf4))
+- **PWA meta tag** — add the standard `mobile-web-app-capable` tag while keeping the Apple variant for iOS Safari, since Chrome deprecated `apple-mobile-web-app-capable`. ([8e109f3](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/8e109f3))
 
 ---
 
 ### Development / Internal
 
 #### CI/Build
-- Publish `.sha256` sidecars alongside release assets for easier integrity verification ([03d2e6b](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/03d2e6b))
+- Add `workflow_dispatch` and skip lint/test on release commits (release.yml already runs in parallel; manual dispatch covers re-runs on demand). ([033c1f6](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/033c1f6))
 
-#### Refactoring
-- Move the Key Colors test out of the lightbox and into the `test-css-source` modal where the rest of the source-render debug tools live ([be2d5e1](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/be2d5e1))
+#### Tests
+- New `test_camera_engine` suite covers the new capture path. ([fdac26b](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/fdac26b))
+- Adalight + DDP tests cover header format, buffer reuse, non-contiguous input, brightness scaling, RGB/RGBW packets, sequence/PUSH semantics, and multi-packet fragmentation. ([797b806](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/797b806))
+- 13 new tests for the device-event notifications backend (full suite still 899 passing). ([8aa3a32](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/8aa3a32))
+- `conftest` pre-creates the test DB so `main.py`'s legacy-data migration no longer shovels the user's production DB into the test temp dir; `test_preferences_notifications` wipes its own setting at the start of the defaults test (was relying on isolation it never enforced). ([9d4a534](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/9d4a534))
+
+#### Tooling
+- `.mcp.json` checked in with code-review-graph MCP server config so the graph tools are available out of the box. ([797b806](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/797b806))
 
 ---
 
@@ -23,9 +45,19 @@
 
 | Hash | Message | Author |
 |------|---------|--------|
-| [be2d5e1](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/be2d5e1) | refactor(color-strips): move Key Colors test from lightbox into test-css-source modal | alexei.dolgolyov |
-| [5db6edd](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/5db6edd) | fix(release): ship prebuilt assets and bump fallback version | alexei.dolgolyov |
-| [9ce1dc3](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/9ce1dc3) | feat(ui): restyle enhanced header locale picker as LED-accent badge | alexei.dolgolyov |
-| [03d2e6b](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/03d2e6b) | ci(release): publish .sha256 sidecars alongside release assets | alexei.dolgolyov |
+| [0980cf4](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/0980cf4) | fix(ui): audio-source modal — preserve device on refresh, relocate refresh action | alexei.dolgolyov |
+| [fdac26b](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/fdac26b) | feat: daylight tz, camera engine, value stream + modal/UI polish | alexei.dolgolyov |
+| [816a27d](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/816a27d) | refactor(ui): drop app footer, move author info to About panel | alexei.dolgolyov |
+| [797b806](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/797b806) | feat: LED hot-path perf, tutorials expansion, modal markup polish | alexei.dolgolyov |
+| [9d4a534](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/9d4a534) | feat(ui): release notes overlay v2 + settings/streams/dashboard polish | alexei.dolgolyov |
+| [51eebf2](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/51eebf2) | feat(ui): redesign target pipeline as compact strip + chip row | alexei.dolgolyov |
+| [9067db2](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/9067db2) | feat(ui): align Targets metric cells with dashboard pattern | alexei.dolgolyov |
+| [233b463](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/233b463) | feat(ui): migrate Targets cards to mod-card system | alexei.dolgolyov |
+| [de13f44](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/de13f44) | feat(autostart): suppress browser auto-open on Windows login | alexei.dolgolyov |
+| [1c9acc5](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/1c9acc5) | feat(api-input): make SegmentPayload start/length optional | alexei.dolgolyov |
+| [a56569b](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/a56569b) | feat(ui): cards redesign + settings, modal, toolbar polish | alexei.dolgolyov |
+| [8aa3a32](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/8aa3a32) | feat(notifications): device event notifications (snack + Web Notifications) | alexei.dolgolyov |
+| [8e109f3](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/8e109f3) | fix(pwa): add mobile-web-app-capable meta tag | alexei.dolgolyov |
+| [033c1f6](https://git.dolgolyov-family.by/alexei.dolgolyov/ledgrab/commit/033c1f6) | ci: add workflow_dispatch and skip lint/test on release commits | alexei.dolgolyov |
 
 </details>

TODO.md

@@ -1,5 +1,319 @@
 # LedGrab TODO
 
+## Device Event Notifications
+
+Notify the user when LED devices come online/go offline (configured targets), and when new
+WLED/serial devices are discovered or disappear from the LAN/USB. Each event class has a
+configurable channel: `none` | `snack` | `os` | `both`. OS channel uses Web Notifications
+(works in any browser tab and in the PWA shell — no platform-specific Python).
+
+Branch: `feat/device-event-notifications`. Default ON.
+
+### Backend
+
+- [x] `core/devices/discovery_watcher.py` — long-running mDNS browser
+      (`AsyncServiceBrowser` kept alive for the process lifetime) + 10 s serial-port
+      poller. Fires `device_discovered`/`device_lost` via `processor_manager.fire_event`,
+      suppresses events for URLs already in `device_store`. Seeded ports do NOT generate
+      startup-time toasts.
+- [x] Wired into `lifespan` (`main.py`). Gated by `notification_preferences.
+      background_discovery_enabled`. Default True. Stops before health monitor stop.
+- [x] `api/schemas/preferences.py` — `NotificationPreferences` Pydantic v2 model with
+      the 4-event channel matrix, `background_discovery_enabled`, `startup_grace_sec`
+      (0..300), `flap_debounce_sec` (0..60).
+- [x] `api/routes/preferences.py` — `GET/PUT /api/v1/preferences/notifications`,
+      persisted under `db.set_setting("notification_preferences", …)`. Corrupt stored
+      values fall back to defaults instead of 500.
+- [x] Reuses existing `device_health_changed` event from `device_health.py` (already
+      fires online/offline transitions on the same event bus).
+- [x] Tests: 7 in `tests/test_preferences_notifications_api.py`, 6 in
+      `tests/test_discovery_watcher.py`. Full pytest suite still 899 passing.
+
+### Frontend
+
+- [x] `js/features/notifications-watcher.ts` — listens to the three `server:*` DOM
+      events. Applies user prefs. Pipeline: startup grace → flap debounce → bulk
+      coalesce (≥3 events / 800 ms collapse to one summary).
+- [x] Web Notification permission requested from the Settings → Notifications panel
+      via a user-gesture button. State chip reflects granted/denied/default.
+- [x] Settings panel — new "Notifications" subtab between Backup and Appearance.
+      4 IconSelects (`none`/`snack`/`os`/`both`) + background-discovery toggle +
+      permission row + Test-notification button.
+- [x] i18n: `settings.notifications.*` and `notifications.*` keys in en/ru/zh.
+
+### Verification
+
+- [x] `npx tsc --noEmit` clean, `npm run build` produces 2.5 MB bundle.
+- [x] `ruff check src/ tests/` clean. 899/899 pytest pass.
+- [x] App import smoke-test (`from ledgrab.main import app`) loads 233 routes
+      without errors.
+- [ ] Real-hardware test pending — verify on user's network:
+      (1) plug a fresh WLED in → snack toast appears, (2) configure it → next
+      offline transition fires both snack + OS toast, (3) Background-discovery
+      toggle off → no more discovered/lost events.
+
+### Out of scope for v1
+
+- Per-device-type granularity (we ship one matrix per event-type, no device-type split)
+- Per-device mute list (deferred — user can globally toggle off if noisy)
+- Native OS toast via Windows winrt API (Web Notifications cover the use case;
+  also avoids the `os_notification_listener` feedback loop)
+- Notification history panel — could land later as the reserved `alerts` dashboard cell
+
+## Server shutdown action
+
+Let user choose what happens to LED targets on server shutdown.
+
+- [x] Backend storage: `shutdown_action` in `db.settings` (`"stop_targets"` default | `"nothing"`)
+- [x] Backend route: `GET/PUT /api/v1/system/shutdown-action` in `system_settings.py`
+- [x] Backend schema: `ShutdownActionResponse/Request` in `schemas/system.py`
+- [x] Backend wiring: lifespan shutdown in `main.py` reads action, passes `restore_devices` flag to `processor_manager.stop_all()`
+- [x] `processor_manager.stop_all(restore_devices: bool = True)` — when False, calls public `proc.cancel_task()` (defined on `TargetProcessor`) which awaits cancellation without restoring device state; skips `_restore_device_idle_state` loop. No reach into private `_task` attribute.
+- [x] Frontend: hidden `<select>` + IconSelect in `settings.html` General tab (icons via `ICON_SQUARE` / `ICON_CIRCLE` from `core/icons.ts`)
+- [x] Frontend: load/save handlers in `features/settings.ts`, wired into `openSettingsModal()`
+- [x] i18n: en / ru / zh keys for label, hint, item descriptions
+- [ ] Real-hardware test pending — verify that "nothing" actually leaves a WLED + a serial device on the last frame after `Ctrl+C`/SIGTERM.
+
+## WebUI Redesign — "Lumenworks" Studio-Console Aesthetic
+
+Full-app UI/UX refresh. Design direction committed to by user 2026-04-24.
+Mockup lives at [server/docs/ui-redesign-mockup.html](server/docs/ui-redesign-mockup.html).
+Phases are independent and CSS-only where possible — backend untouched.
+
+### Phase 1 — Design tokens & font embed
+
+- [x] Embed variable fonts (`server/src/ledgrab/static/fonts/`):
+      Manrope (latin + latin-ext + cyrillic + cyrillic-ext),
+      JetBrains Mono (same 4 subsets),
+      Big Shoulders Display (latin + latin-ext). Total +201 KB gzipped,
+      served via `unicode-range` so only latin paints on first load.
+- [x] `fonts.css` — declare `@font-face` entries for all new families with
+      proper `unicode-range` subsetting; keep DM Sans + Orbitron registered
+      for legacy-token callers during migration.
+- [x] `base.css` — add additive Lumenworks tokens:
+      `--font-display/--font-brand/--font-body`, `--lux-r-*`, `--lux-hairline`,
+      `--lux-rule`. Both `[data-theme="dark"]` and `[data-theme="light"]`
+      define `--lux-bg-0…3`, `--lux-line/-bold`, `--lux-ink/-dim/-mute/-faint`,
+      `--ch-signal/-cyan/-magenta/-amber/-coral/-violet`, `--lux-signal-glow`,
+      `--lux-shadow-rack`. Existing tokens untouched — no visual regression.
+
+### Phase 2 — Shell (header → transport bar + channel-strip sidebar)
+
+- [x] `index.html` — `.tab-bar` moved out of `<header>` into a new
+      `<aside class="sidebar">`; wrapped content in `.app-body` 2-col grid
+      (sidebar | main). `.transport-center` section added between
+      `.header-title` and `.header-toolbar` with a placeholder `.transport-status`
+      chip ("Ready" → "Armed · N live" wired in Phase 3). All tab-button IDs,
+      `data-tab` attributes, and `onclick="switchTab(…)"` handlers preserved.
+- [x] `layout.css` — `<header>` rebuilt as the transport bar: 3-column grid
+      (brand | center | toolbar), 60 px fixed height, sticky, gradient bottom
+      rule with channel-color wash. `.header-title::before/::after` render
+      the glowing LED brand mark; `#server-status` repositioned as the LED
+      core pip. `#server-version` restyled as a mono-type console badge.
+- [x] `sidebar.css` (new) — vertical channel-strip navigation. Active tab
+      gets a glowing left stripe + radial tint. `.sidebar-foot` contains
+      a `.cpu-meter` plate with two live bars (Load, FPS) ready to be
+      JS-bound in Phase 3. Collapses to a 56 px icon rail at ≤1100 px;
+      hides entirely at ≤600 px via `display: contents` so `.tab-bar`
+      falls through to `mobile.css`'s fixed-bottom strip unchanged.
+- [x] `all.css` — new sidebar import after layout.
+- [x] `base.css` — body font-family switched to `var(--font-body)` which
+      resolves to Manrope (with DM Sans + system fallbacks). Added
+      `font-feature-settings` for stylistic set + alternate 1.
+- [x] Locale additions: `sidebar.workspaces`, `sidebar.load`, `sidebar.fps`,
+      `transport.status.ready`, `transport.status.armed` in en/ru/zh.
+- [x] Tutorial + auth selectors (`header .header-title`, `#tab-btn-*`,
+      `.tab-bar` querySelector, `a.header-link[href="/docs"]`, onclick
+      markers on theme/settings/search) all survive the move.
+- [ ] JS: bind `.cpu-meter` + `.transport-status` chip to existing
+      `performance` WebSocket / poller. Done as part of Phase 3.
+- [ ] Tablet-range visual polish pass once other phases render (some tabs
+      currently have their own internal sticky headers that may overlap
+      the transport bar on narrow viewports).
+
+### Phase 3 — Dashboard hero + module redesign
+
+- [x] `cards.css` — `.card` gets rack-module treatment: channel stripe on
+      left edge (color-coded via `data-card-type` + `.ch-*` utility classes),
+      `::after` corner bracket in top-right, mono-typed metric labels
+      planned for Phase 4. Running cards glow the stripe brighter + emit a
+      `signalFlow` keyframe strip along the bottom edge.
+- [x] Removed the `@property --border-angle` rotating conic-gradient border
+      (retired the WebKit mask workaround + light-theme variant + fallback
+      for `@supports not (mask-composite: exclude)`). Replaced with the
+      signal-flow strip — one animated linear-gradient on a 2 px line, no
+      GPU layer compositing per card.
+- [x] `dashboard.css` — `.dashboard-target` rows pick up the same channel
+      stripe + signal-flow treatment. Section headers now use mono caps
+      with a channel-green underline accent. Metric values use mono with
+      tabular numerics; labels use silkscreened micro-caps.
+- [x] Skeleton-card rewritten: left hairline + corner bracket so it reads
+      as "loading module" instead of a generic flashing block.
+      `skeletonShimmer` gradient replaces the old opacity-pulse on
+      `--text-color`.
+- [x] `_updateSidebarMeter` binds CPU% (Load) and app-CPU share (FPS)
+      to the sidebar meter plate on every perf poll.
+- [x] `_updateTransportStatus` updates the transport chip ("Ready" →
+      "Armed · N live") whenever the dashboard's running-target set is
+      recomputed.
+- [ ] `.hero` 4-cell readout row (Active Patches / Throughput / CPU /
+      Latency + inline sparklines) — CSS tokens + layout are ready; HTML
+      render deferred until the dashboard JS is refactored to emit it
+      (Phase 3b, non-blocking).
+
+### Phase 4 — Other tabs adopt module language
+
+- [x] `tree-nav.css` — trigger pill gets a channel stripe on its left edge
+      (glows + widens when open). Trigger title uses mono-uppercase with
+      wide letter-spacing. Dropdown panel has a gradient channel-accent
+      rule across its top edge. Group headers use silkscreened micro-caps
+      with a small square marker instead of the old bold-uppercase. Active
+      leaf has a pulsing LED pip on the left and a channel tint behind it.
+      Count badges switched to mono tabular-nums in 2-px-radius pills.
+- [x] `.subtab-section-header` — channel-green underline accent + mono
+      micro-caps. Consistent with the dashboard-section pattern so the
+      whole app shares one section-header language.
+- [x] `.stream-tab-btn` sub-tabs — mono uppercase with wide tracking,
+      active tab shows channel-green underline + glowing count badge.
+- [x] `.perf-chart-card` — channel stripe on the left (replaces old
+      `border-top` accent). Per-metric accents swapped to channel palette
+      (`--ch-coral` for CPU, `--ch-violet` for RAM, `--ch-signal` for GPU,
+      `--ch-amber` for temp). Corner bracket added. Metric values pick up
+      `tabular-nums` + a soft glow.
+- [x] `cards.css` — channel-color mapping extended to attributes the JS
+      already emits (`data-target-id` → green, `data-stream-id` → cyan,
+      `data-audio-source-id` → magenta, `data-automation-id` /
+      `data-scene-id` → violet). No JS changes required; cards pick up
+      their correct stripe automatically on the Targets/Sources/Automations
+      tabs.
+- [x] Graph editor — toolbar gets a gradient background + hairline +
+      rack shadow + backdrop blur. Canvas and nodes untouched.
+- [x] `.template-card` — Lumenworks treatment (channel stripe on left,
+      corner bracket top-right, hairline border, hover lift + stripe
+      glow). Brings Inputs (streams / capture / pp / cspt / pattern
+      templates) and Integrations (HA / MQTT / weather / value /
+      sync-clock / game-integration cards) up to the same visual
+      language as `.card` and `.dashboard-target`.
+- [x] `cards.css` — channel mapping extended to `.template-card`.
+      Direct attr hooks for `data-stream-id`/`data-template-id`/`data-pp-template-id`
+      (cyan), `data-cspt-id`/`data-pattern-template-id` (signal),
+      `data-audio-template-id`/`data-apt-id` (magenta). Section-scoped
+      hooks via `[data-card-section="…"]` for cards that share a
+      generic `data-id` (HA / MQTT / weather / value → cyan;
+      game-integrations → amber; sync-clocks → violet; HA-light-targets
+      → signal). No JS changes — uses the section markup `CardSection`
+      already emits.
+- [x] Graph editor nodes — body fill `--lux-bg-1` with hairline stroke,
+      hover bold-line, selected/running stroke `--ch-signal` with
+      drop-shadow glow. Title font switched from DM Sans to
+      `--font-display`; subtitle to mono uppercase wide-tracking.
+      Port-drop-target glow recoloured to `--ch-signal`. Port labels
+      adopt the mono caption treatment. Grid dots use `--lux-line`.
+      Running gradient stops switched from `--primary-color`/`--success-color`
+      to channel palette (signal → cyan → signal).
+
+### Phase 5 — Modal restyle
+
+- [x] `modal.css` — backdrop gains a radial dim + 6 px blur for stronger
+      separation. `.modal-content` gets a gradient background + hairline +
+      deep rack shadow. Channel-accent rule across the top edge driven by
+      `--modal-ch` (per-modal override). Corner bracket bottom-right on
+      desktop. `.modal-header` gains a vertical channel-color stripe to
+      the left of the title; `.modal-footer` picks up a hairline divider.
+- [x] Per-modal channel mapping by modal ID:
+      - Target editors → green
+      - Input/Source editors → cyan
+      - Audio editors → magenta
+      - Automation / Scene / Game editors → violet
+      - Settings / API key / Setup / Notifications → amber
+      - Confirm dialog → coral
+- [x] `components.css` — inputs use hairline borders, tabular-nums mono
+      for `input[type="number"]`, channel-green focus ring + glow. Buttons
+      use mono-uppercase type, signal-glow on primary, coral-glow on
+      danger. `<select>` audit deferred (project already enforces via
+      CLAUDE.md rule + IconSelect/EntitySelect wrappers).
+
+### Phase 6 — Mobile dedicated shell
+
+- [x] `mobile.css` (existing file, not forked) — fixed-bottom `.tab-bar`
+      promoted to full Lumenworks treatment: gradient background + hairline
+      divider at top + channel-accent rule matching the transport-bar
+      bottom. Active tab gets an LED pip above the icon and a channel-tint
+      background. Tab labels + badges use mono uppercase to match the
+      rest of the app. Phone (≤600 px): modal corner-bracket hidden
+      (fullscreen modals), modal-header stripe slimmed to 18 px.
+- [x] Phase 2's layout.css already strips the transport-center on phones
+      and collapses the sidebar via `display: contents`, so the mobile
+      shell automatically routes the tab-bar to the bottom without a
+      separate JS hook.
+- [WONTDO] Fork into `mobile-shell.css` — keeping changes in `mobile.css`
+      since the cascade was already organized by viewport. A rename adds
+      churn without improving maintainability.
+
+### Phase 7 — Microcopy + retire legacy
+
+- [x] Locale rename: `targets.title` + `dashboard.section.targets` →
+      "Channels" (en) / "Каналы" (ru) / "通道" (zh);
+      `streams.title` → "Inputs" / "Входы" / "输入".
+      Automations kept as-is (Automations + Scenes is a meaningful
+      distinction; "Patches" would conflate them). Internal tab keys
+      (`dashboard` / `automations` / `targets` / `streams` / `integrations`
+      / `graph`) unchanged so no JS or localStorage migration needed.
+- [x] Ambient WebGL background — default is already `off`; kept the
+      toggle button and localStorage preference so users who want the
+      shader can turn it on. No entry-point change needed: `data-bg-anim`
+      is initialized from localStorage with `off` fallback.
+- [DEFERRED] Delete DM Sans + legacy color tokens — would cascade through
+      every file that reads `--primary-color` / `--text-color` etc. Safer
+      as a separate cleanup PR after the new design has soaked.
+- [WONTDO] Delete `mobile.css` — Phase 6 kept the filename.
+
+## Dashboard Customization
+
+Per-account dashboard layout — slide-in Customize panel lets users
+toggle section / perf-cell visibility, reorder via drag, change density,
+pick presets, and import/export the layout as JSON. Server-synced via
+`db.get_setting('dashboard_layout')` so settings follow the user.
+
+- [x] `js/features/dashboard-layout.ts` — schema (open registry of section
+      / perf-cell keys so v1.1 cards slot in with no migration), defaults,
+      5 built-in presets (Studio/Operator/Showrunner/Diagnostics/TV),
+      localStorage cache + server sync, legacy-key migration from
+      `dashboard_collapsed`, `perfMetricsMode`, `perfChartColor_*`.
+- [x] `api/routes/preferences.py` — `GET/PUT/DELETE
+      /api/v1/preferences/dashboard-layout`. Treats payload as opaque
+      (frontend owns the schema); validates only that body is an object
+      with a numeric `version`. 6 pytest tests in
+      `tests/test_preferences_api.py` cover round-trip, default-empty,
+      validation, delete, and unknown-field passthrough.
+- [x] `js/features/dashboard.ts` — sections rendered into a fragment map,
+      then assembled in layout-driven order; perf section stays pinned
+      top (chart-persistence reasons) but its visibility is layout-
+      driven. Layout-change subscription invalidates the in-place-update
+      optimization so density / order / visibility changes always
+      rebuild section HTML.
+- [x] `js/features/perf-charts.ts` — `renderPerfSection()` iterates
+      `getOrderedPerfCells()`; existing legacy `setPerfMode` writes
+      through to the layout so the global toggle and the customize
+      panel stay in sync.
+- [x] `js/features/dashboard-customize.ts` + `css/dashboard-customize.css`
+      — slide-in panel, hand-rolled HTML5 drag-and-drop reorder, ↑/↓
+      buttons for keyboard / TV remote, debounced (300 ms) autosave,
+      live preview while open. Reset / export / import actions.
+- [x] i18n keys for `dashboard.customize.*` in en/ru/zh.
+- [ ] (v1.1) Audio meters section — peak / RMS / BPM bars per audio
+      source. Schema key `audio-meters` already reserved.
+- [ ] (v1.1) Alerts section — quiet by default, loud on issues.
+      Reserved key `alerts`.
+- [ ] (v1.1) Live LED preview strip per running device. Reserved
+      key `led-preview`.
+- [ ] (v1.1) Source thumbnails grid (1 fps multiviewer). Reserved
+      key `source-thumbs`.
+- [ ] (v1.2) Pinned section (user-curated mix of targets / scenes /
+      devices). Reserved key `pinned`.
+- [ ] (v1.2) Patch/flow map — read-only mini graph of routing.
+      Reserved key `flow`.
+
 ## BLE LED Controller Support (SP110E / Triones / Zengge / Govee)
 
 Add support for Bluetooth Low Energy LED controllers driven by mobile apps like "LED Hue", HappyLighting, iLightsIn. Whole-strip ambient-color output only — these protocols don't support per-pixel streaming.

android/app/build.gradle.kts

@@ -40,7 +40,7 @@ android {
         // in CI).  See ledgrabVersionCode above.  Was stuck at 1 before —
         // sideload updates silently refused to install.
         versionCode = ledgrabVersionCode
-        versionName = "0.4.2"
+        versionName = "0.6.0"
 
         ndk {
             // All three ABIs: arm64-v8a (real TV hardware), x86_64 (modern

build/installer.nsi

@@ -162,8 +162,11 @@ Section "Desktop shortcut" SecDesktop
 SectionEnd
 
 Section "Start with Windows" SecAutostart
+  ; Pass --autostart so the VBS sets LEDGRAB_AUTOSTART=1 and the app suppresses
+  ; the browser auto-open on Windows login. Manual launches (desktop / start
+  ; menu) don't pass the arg, so they keep opening the WebUI tab.
   CreateShortcut "$SMSTARTUP\${APPNAME}.lnk" \
-    "wscript.exe" '"$INSTDIR\scripts\${VBSNAME}"' \
+    "wscript.exe" '"$INSTDIR\scripts\${VBSNAME}" --autostart' \
     "$INSTDIR\app\src\ledgrab\static\icons\icon.ico" 0
 SectionEnd
 

docs/plans/device-typed-configs.md

@@ -1,274 +0,0 @@
-# Refactor Plan: Per-Provider Typed Device Configs
-
-**Status:** Planned, not started.
-**Target branch:** `refactor/device-typed-configs`
-**Intended executor:** Sonnet agent (one phase per invocation; human review between phases).
-
-## Goal
-
-Replace the flat [`DeviceInfo`](../../server/src/ledgrab/core/processing/target_processor.py) dataclass (and the `**kwargs`-based `LEDDeviceProvider.create_client(url, **kwargs)` contract) with a **discriminated union of per-provider config dataclasses**. Each provider owns its config type and reads typed fields instead of guessing kwargs.
-
-## Motivation
-
-Current pain points:
-
-- [server/src/ledgrab/core/processing/wled_target_processor.py](../../server/src/ledgrab/core/processing/wled_target_processor.py) unpacks ~21 fields by hand into `create_led_client(**kwargs)`.
-- Every provider's `create_client` starts with `kwargs.get("x", default)` — no type safety, no IDE hints, no way to know at a glance which fields a provider actually uses.
-- Adding a new per-device-type field requires threading it through `Device` → `DeviceInfo` → `_DEVICE_FIELD_DEFAULTS` → call-site unpacking → kwargs bag → provider.
-- Fields leak across device types (a WLED device carries `ble_govee_key=""` at runtime for no reason).
-
-## Scope guardrails
-
-- **Storage schema (SQLite) unchanged.** Columns stay, dead-for-this-type fields stay, no destructive migration.
-- **Frontend HTML/TS unchanged in phases 1-4.** It already branches on `device_type` with show/hide logic. Frontend changes are deferred to Phase 5.
-- **API schemas are last.** Phase 5 converts `DeviceCreate`/`DeviceUpdate`/`DeviceResponse` to a Pydantic v2 discriminated union. This is the only breaking external change and can be deferred indefinitely if needed.
-
----
-
-## Phase 1 — Config hierarchy (foundation, non-breaking)
-
-### Create
-
-**File:** `server/src/ledgrab/core/devices/device_config.py`
-
-Pattern:
-
-```python
-from dataclasses import dataclass
-from typing import List, Literal, Optional, Union
-
-@dataclass(frozen=True)
-class BaseDeviceConfig:
-    device_id: str
-    device_url: str
-    led_count: int
-    software_brightness: int = 255
-    test_mode_active: bool = False
-    auto_shutdown: bool = False
-    rgbw: bool = False
-
-@dataclass(frozen=True)
-class WLEDConfig(BaseDeviceConfig):
-    device_type: Literal["wled"] = "wled"
-    use_ddp: bool = False
-
-# ... one @dataclass(frozen=True) per provider
-```
-
-### Config field inventory
-
-Base: `device_id`, `device_url`, `led_count`, `software_brightness`, `test_mode_active`, `auto_shutdown`, `rgbw`.
-
-| Config         | Extra fields beyond Base |
-| -------------- | ------------------------ |
-| WLEDConfig     | `use_ddp: bool = False` |
-| AdalightConfig | `baud_rate: Optional[int] = None` |
-| AmbiLEDConfig  | `baud_rate: Optional[int] = None` |
-| DMXConfig      | `dmx_protocol`, `dmx_start_universe`, `dmx_start_channel` |
-| ESPNowConfig   | `baud_rate`, `espnow_peer_mac`, `espnow_channel` |
-| HueConfig      | `hue_username`, `hue_client_key`, `hue_entertainment_group_id` |
-| SPIConfig      | `spi_speed_hz`, `spi_led_type` |
-| ChromaConfig   | `chroma_device_type` |
-| GameSenseConfig| `gamesense_device_type` |
-| BLEConfig      | `ble_family`, `ble_govee_key` |
-| GroupConfig    | `group_mode`, `group_device_ids` (**no `device_store` here** — see Phase 2) |
-| OpenRGBConfig  | `zone_mode` |
-| MockConfig     | `send_latency_ms: int = 0` |
-| DemoConfig     | `send_latency_ms: int = 0` |
-| MQTTConfig     | (none) |
-| WSConfig       | (none) |
-| USBHIDConfig   | (none — `hid_usage_page` is parsed from the URL, not config) |
-
-```python
-DeviceConfig = Union[
-    WLEDConfig, AdalightConfig, AmbiLEDConfig, DMXConfig, ESPNowConfig,
-    HueConfig, SPIConfig, ChromaConfig, GameSenseConfig, BLEConfig,
-    GroupConfig, MQTTConfig, WSConfig, USBHIDConfig, OpenRGBConfig,
-    MockConfig, DemoConfig,
-]
-```
-
-### Add
-
-**`Device.to_config() -> DeviceConfig`** in [server/src/ledgrab/storage/device_store.py](../../server/src/ledgrab/storage/device_store.py) (around lines 14-97 where `Device` lives).
-
-- Dispatches on `self.device_type`.
-- Constructs the right subclass, pulling only relevant columns.
-- Ignores columns that don't apply to the type.
-- This is the **only** place that knows the flat→typed mapping.
-
-### Do NOT touch in Phase 1
-
-- Provider signatures (still `create_client(self, url, **kwargs)`).
-- `create_led_client` factory.
-- Any call site.
-- `DeviceInfo` itself.
-
-### Acceptance
-
-- New unit test `server/tests/core/devices/test_device_config.py`:
-  - For each provider, build a `Device` with that `device_type`, call `to_config()`, assert right subclass and right fields.
-  - Edge case: extra/irrelevant Device fields must not leak into the wrong config type.
-- `cd server && ruff check src/ tests/ --fix` — green.
-- `cd server && py -3.13 -m pytest tests/ --no-cov -q` — green (existing tests untouched, new test passes).
-- `cd server && npx tsc --noEmit` — green (no TS impact this phase, just a sanity check).
-
----
-
-## Phase 2 + Phase 3 — Provider API migration + call-site migration (single PR)
-
-**These must land in one commit** because the provider signature change would otherwise break the 3 call sites immediately.
-
-### Change the abstract base
-
-[server/src/ledgrab/core/devices/led_client.py](../../server/src/ledgrab/core/devices/led_client.py):
-
-```python
-class LEDDeviceProvider(ABC):
-    @abstractmethod
-    def create_client(self, config: DeviceConfig, *, deps: ProviderDeps) -> LEDClient: ...
-```
-
-`ProviderDeps` is a tiny new dataclass:
-
-```python
-@dataclass(frozen=True)
-class ProviderDeps:
-    device_store: "DeviceStore"
-    # Add future cross-cutting runtime deps here (http_client, etc.)
-```
-
-`create_led_client`:
-
-```python
-def create_led_client(config: DeviceConfig, *, deps: ProviderDeps) -> LEDClient:
-    return get_provider(config.device_type).create_client(config, deps=deps)
-```
-
-### Update every provider (17 files)
-
-- Narrow signature per provider: e.g. `WLEDDeviceProvider.create_client(self, config: WLEDConfig, *, deps: ProviderDeps)`.
-- Drop all `kwargs.get("x")` lookups — read typed fields directly.
-- Providers that don't need `deps` just ignore it.
-- **GroupDeviceProvider** is the only current consumer of `deps`: reads `deps.device_store`.
-
-### Call sites (3)
-
-1. [server/src/ledgrab/core/processing/wled_target_processor.py](../../server/src/ledgrab/core/processing/wled_target_processor.py) lines ~120-148 — the 21-field unpacking. Replace with:
-   ```python
-   config = device.to_config()
-   self._led_client = create_led_client(config, deps=self._provider_deps)
-   ```
-   `self._provider_deps` is plumbed in from `ProcessorManager` when the target processor is constructed.
-2. [server/src/ledgrab/core/processing/device_test_mode.py](../../server/src/ledgrab/core/processing/device_test_mode.py) lines 72-78 — minimal test-mode client. Build a synthetic config via a helper `_minimal_config_for_test_mode(device)` (keeps just `device_id`, `device_url`, `led_count`, `baud_rate`) and pass it.
-3. [server/src/ledgrab/core/devices/group_client.py](../../server/src/ledgrab/core/devices/group_client.py) lines 47-70 — child client construction inside the group. Same pattern: `child_config = child_device.to_config()`; pass `deps` through.
-
-### Delete
-
-- `DeviceInfo` dataclass in [server/src/ledgrab/core/processing/target_processor.py](../../server/src/ledgrab/core/processing/target_processor.py) lines 71-109.
-- `ProcessorManager._get_device_info()` and `_DEVICE_FIELD_DEFAULTS` in [server/src/ledgrab/core/processing/processor_manager.py](../../server/src/ledgrab/core/processing/processor_manager.py) lines 230-275 — `Device.to_config()` subsumes this. Verify no other callers via `ast-index usages "_get_device_info"`.
-
-### Acceptance
-
-- `ast-index search "device_info\."` — no hits in non-test code.
-- `ast-index search "DeviceInfo"` — no hits outside archival comments.
-- `cd server && py -3.13 -m pytest tests/ --no-cov -q` — all tests pass.
-- Manual smoke: start server, create a WLED device, start processing, verify LEDs update (or mock output shows frames).
-- `cd server && ruff check src/ tests/ --fix` — green.
-
----
-
-## Phase 4 — Test migration
-
-Update these files:
-
-- `server/tests/storage/test_device_store.py` — add `to_config()` cases per device type.
-- `server/tests/api/routes/test_devices_routes.py` — should be mostly untouched (API schemas still flat until Phase 5).
-- `server/tests/e2e/test_device_flow.py` — update internal assertions only if they touch `DeviceInfo` directly.
-- `server/tests/test_group_device.py` — construct child clients with `GroupConfig`.
-- Any fixture helper that builds a fake `DeviceInfo` — migrate to the right `*Config` subclass.
-
-### Acceptance
-
-- `cd server && py -3.13 -m pytest tests/ --no-cov -q` — all green.
-- Coverage of `device_config.py` and `Device.to_config()` ≥ 90%.
-
----
-
-## Phase 5 — API discriminated union (OPTIONAL, separate PR)
-
-**Do not start until Phases 1-4 are merged and stable.** Flag this to the human before beginning. This is the only phase with an externally breaking change.
-
-### Backend
-
-[server/src/ledgrab/api/schemas/devices.py](../../server/src/ledgrab/api/schemas/devices.py) — replace flat `DeviceCreate`/`DeviceUpdate` with Pydantic v2 tagged unions:
-
-```python
-class WLEDDeviceCreate(BaseModel):
-    device_type: Literal["wled"]
-    name: str
-    url: str
-    led_count: int
-    use_ddp: bool = False
-    # ... base fields only
-
-DeviceCreate = Annotated[
-    Union[WLEDDeviceCreate, AdalightDeviceCreate, ...],
-    Field(discriminator="device_type"),
-]
-```
-
-Add `model_config = ConfigDict(extra="ignore")` on each union member for **one release cycle** so existing clients (frontend, HAOS integration, curl scripts) that send extra fields don't 422 immediately. Add a deprecation note and tighten to `extra="forbid"` in a follow-up.
-
-### Frontend
-
-- [server/src/ledgrab/static/js/features/devices.ts](../../server/src/ledgrab/static/js/features/devices.ts) and related — when building the POST/PATCH body, scope the payload to the selected `device_type` using the show/hide knowledge already in `device-discovery.ts`.
-- **No plain `<select>` elements** — any new pickers use IconSelect or EntitySelect (see root CLAUDE.md UI rules).
-
-### Tests
-
-- Update `test_devices_routes.py` to assert discriminated union rejection of mismatched shapes.
-- Add round-trip tests: create device of each type via API → fetch → compare fields.
-
-### Acceptance
-
-- `cd server && py -3.13 -m pytest tests/ --no-cov -q` — green.
-- `cd server && npx tsc --noEmit && npm run build` — green.
-- Manual smoke for at least 3 device types (WLED, DMX, Hue) — create, edit, delete via UI.
-- HAOS integration still works against the server (spot-check; not automated).
-
----
-
-## Conventions the implementing agent must follow
-
-- **Project task tracker is `TODO.md`** — check the "Refactor: Per-Provider Device Configs" section, tick boxes as phases land. Do **not** use the `TodoWrite` tool.
-- **Auto-restart after Python changes.** See [contexts/server-operations.md](../../contexts/server-operations.md).
-- **No commits without explicit user approval.** Present each phase's diff for review first.
-- **Pre-commit gate every phase:**
-  - `cd server && ruff check src/ tests/ --fix`
-  - `cd server && py -3.13 -m pytest tests/ --no-cov -q`
-  - Phase 5 additionally: `cd server && npx tsc --noEmit && npm run build`
-- **No plain `<select>`** — Phase 5 uses IconSelect / EntitySelect.
-- **Android parity:** if you add any new runtime dep to `server/pyproject.toml`, update `android/app/build.gradle.kts` per the root [CLAUDE.md](../../CLAUDE.md) "Android Dependency Sync" section. This refactor should not need any new deps.
-- **Data migration policy:** storage schema is unchanged, so no JSON-file migration is needed. But if you rename any serialized field during `to_dict`/`from_dict`, add migration logic per the root [CLAUDE.md](../../CLAUDE.md) "Data Migration Policy" section.
-- **Use `ast-index`** for code search (`ast-index search`, `ast-index usages`, `ast-index callers`, `ast-index class`). Fall back to Grep only for regex/string-literal/comment searches.
-- **Never run `cd` in Bash.** Use absolute paths or the project-relative `cd server && <cmd>` idiom (one-shot, same invocation).
-
-## Known risks
-
-1. **Frozen dataclass + inheritance + defaults** — Python's `@dataclass(frozen=True)` with inheritance requires every subclass field to have a default if any parent field does. Base has defaulted fields. Verify in Phase 1. If it breaks, use `kw_only=True` (Python 3.10+).
-2. **`use_ddp` origin** — currently inferred from `self._protocol == "ddp"` at the call site, not from Device storage. Options: add a column (schema change, more work), **or** keep inference logic inside `Device.to_config()` (recommended — no schema change). Prefer the latter.
-3. **Test-mode minimal client** ([device_test_mode.py](../../server/src/ledgrab/core/processing/device_test_mode.py) lines 72-78) may not have all `BaseDeviceConfig` fields available. Build a synthetic config via a named helper; do not leak the hack into `Device.to_config()`.
-4. **Group `device_store` import cycle** — `GroupConfig` must **not** hold `device_store` (would pull storage into the config module). `ProviderDeps` is the deliberate cut.
-5. **BLE optional import** — `BLEDeviceProvider` is conditionally registered (see [led_client.py](../../server/src/ledgrab/core/devices/led_client.py) lines 321-330). Ensure `BLEConfig` still imports cleanly even when `bleak` is absent — put `BLEConfig` in `device_config.py` (not in `ble_provider.py`) so it's always importable.
-
-## Deliverables per phase
-
-1. Branch: `refactor/device-typed-configs`.
-2. One commit per phase, conventional-commit messages:
-   - `refactor(devices): phase 1 — add DeviceConfig hierarchy`
-   - `refactor(devices): phases 2+3 — typed provider signatures + call-site migration`
-   - `refactor(devices): phase 4 — test migration to typed configs`
-   - `refactor(devices): phase 5 — API discriminated union` (separate PR)
-3. Phase-by-phase diffs presented for user review **before** each commit.
-4. Final PR body linking all phases, with manual test plan per device type touched.

server/package-lock.json

@@ -14,6 +14,9 @@
         "marked": "^17.0.5"
       },
       "devDependencies": {
+        "@fontsource-variable/big-shoulders-display": "^5.2.5",
+        "@fontsource-variable/jetbrains-mono": "^5.2.8",
+        "@fontsource-variable/manrope": "^5.2.8",
         "esbuild": "^0.27.4",
         "typescript": "^5.9.3"
       }
@@ -434,6 +437,33 @@
         "node": ">=18"
       }
     },
+    "node_modules/@fontsource-variable/big-shoulders-display": {
+      "version": "5.2.5",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/big-shoulders-display/-/big-shoulders-display-5.2.5.tgz",
+      "integrity": "sha512-ZH2w9u6018xbSf8vPZ42P/KxpQHfIsKnxSnMtLFgwui1zIS05vzlijAWRcaRQoY2pXu4Z3SVa88OANsmq6mkvA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource-variable/jetbrains-mono": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz",
+      "integrity": "sha512-WBA9elru6Jdp5df2mES55wuOO0WIrn3kpXnI4+W2ek5u3ZgLS9XS4gmIlcQhiZOWEKl95meYdvK7xI+ETLCq/Q==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource-variable/manrope": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/manrope/-/manrope-5.2.8.tgz",
+      "integrity": "sha512-nc9lOuCRz73UHnovDE2bwXUdghE2SEOc7Aii0qGe3CLyE03W1a7VnY5Z6euRiapiKbCkGS+eXbY3s/kvWeGeSw==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@kurkle/color": {
       "version": "0.3.4",
       "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
@@ -704,6 +734,24 @@
       "dev": true,
       "optional": true
     },
+    "@fontsource-variable/big-shoulders-display": {
+      "version": "5.2.5",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/big-shoulders-display/-/big-shoulders-display-5.2.5.tgz",
+      "integrity": "sha512-ZH2w9u6018xbSf8vPZ42P/KxpQHfIsKnxSnMtLFgwui1zIS05vzlijAWRcaRQoY2pXu4Z3SVa88OANsmq6mkvA==",
+      "dev": true
+    },
+    "@fontsource-variable/jetbrains-mono": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz",
+      "integrity": "sha512-WBA9elru6Jdp5df2mES55wuOO0WIrn3kpXnI4+W2ek5u3ZgLS9XS4gmIlcQhiZOWEKl95meYdvK7xI+ETLCq/Q==",
+      "dev": true
+    },
+    "@fontsource-variable/manrope": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/manrope/-/manrope-5.2.8.tgz",
+      "integrity": "sha512-nc9lOuCRz73UHnovDE2bwXUdghE2SEOc7Aii0qGe3CLyE03W1a7VnY5Z6euRiapiKbCkGS+eXbY3s/kvWeGeSw==",
+      "dev": true
+    },
     "@kurkle/color": {
       "version": "0.3.4",
       "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",

server/package.json

@@ -16,6 +16,9 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@fontsource-variable/big-shoulders-display": "^5.2.5",
+    "@fontsource-variable/jetbrains-mono": "^5.2.8",
+    "@fontsource-variable/manrope": "^5.2.8",
     "esbuild": "^0.27.4",
     "typescript": "^5.9.3"
   },

server/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "ledgrab"
-version = "0.4.2"
+version = "0.6.0"
 description = "Ambient lighting system that captures screen content and drives LED strips in real time"
 authors = [
     {name = "Alexei Dolgolyov", email = "dolgolyov.alexei@gmail.com"}

server/scripts/start-hidden.vbs

@@ -10,6 +10,15 @@ Set procEnv = WshShell.Environment("Process")
 procEnv("PYTHONPATH") = appRoot & "\app\src"
 procEnv("LEDGRAB_CONFIG_PATH") = appRoot & "\app\config\default_config.yaml"
 
+' If launched as Windows autostart (via the SMSTARTUP shortcut), suppress the
+' browser auto-open. Manual launches (desktop / start menu) pass no args.
+For Each arg In WScript.Arguments
+    If arg = "--autostart" Then
+        procEnv("LEDGRAB_AUTOSTART") = "1"
+        Exit For
+    End If
+Next
+
 ' Use embedded python.exe (NOT pythonw.exe) with WindowStyle=0.
 ' Same pattern as the Media Server sibling app.
 embeddedPython = appRoot & "\python\python.exe"

server/src/ledgrab/__main__.py

@@ -12,6 +12,8 @@ import threading
 import time
 import webbrowser
 from pathlib import Path
+from urllib.error import URLError
+from urllib.request import urlopen
 
 
 def _fix_embedded_tcl_paths() -> None:
@@ -54,9 +56,25 @@ def _run_server(server: uvicorn.Server) -> None:
     loop.run_until_complete(server.serve())
 
 
-def _open_browser(port: int, delay: float = 2.0) -> None:
-    """Open the UI in the default browser after a short delay."""
-    time.sleep(delay)
+def _wait_for_server(port: int, timeout: float = 30.0, interval: float = 0.25) -> bool:
+    """Poll /health until the server responds or *timeout* seconds elapse."""
+    url = f"http://localhost:{port}/health"
+    deadline = time.monotonic() + timeout
+    while time.monotonic() < deadline:
+        try:
+            with urlopen(url, timeout=1) as resp:  # noqa: S310 - localhost only
+                if 200 <= resp.status < 500:
+                    return True
+        except (URLError, ConnectionError, OSError, TimeoutError):
+            pass
+        time.sleep(interval)
+    return False
+
+
+def _open_browser(port: int) -> None:
+    """Open the UI in the default browser once the server is ready."""
+    if not _wait_for_server(port):
+        logger.warning("Server did not become ready in time; opening browser anyway")
     webbrowser.open(f"http://localhost:{port}")
 
 
@@ -65,6 +83,16 @@ def _is_restart() -> bool:
     return os.environ.get("LEDGRAB_RESTART", "") == "1"
 
 
+def _is_autostart() -> bool:
+    """Detect if launched via the Windows autostart shortcut."""
+    return os.environ.get("LEDGRAB_AUTOSTART", "") == "1"
+
+
+def _should_skip_browser() -> bool:
+    """Skip auto-opening the browser on restarts and on Windows login autostart."""
+    return _is_restart() or _is_autostart()
+
+
 def _check_port(host: str, port: int) -> None:
     """Exit with a clear message if the port is already in use."""
     with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as sock:
@@ -102,8 +130,8 @@ def main() -> None:
         )
         server_thread.start()
 
-        # Browser after a short delay (skip on restart — user already has a tab)
-        if not _is_restart():
+        # Browser after a short delay (skip on restart and on Windows login autostart)
+        if not _should_skip_browser():
             threading.Thread(
                 target=_open_browser,
                 args=(config.server.port,),

server/src/ledgrab/api/__init__.py

@@ -31,6 +31,7 @@ from .routes.game_integration import router as game_integration_router
 from .routes.audio_processing_templates import router as audio_processing_templates_router
 from .routes.audio_filters import router as audio_filters_router
 from .routes.pattern_templates import router as pattern_templates_router
+from .routes.preferences import router as preferences_router
 
 router = APIRouter()
 router.include_router(system_router)
@@ -62,5 +63,6 @@ router.include_router(game_integration_router)
 router.include_router(audio_processing_templates_router)
 router.include_router(audio_filters_router)
 router.include_router(pattern_templates_router)
+router.include_router(preferences_router)
 
 __all__ = ["router"]

server/src/ledgrab/api/routes/color_strip_sources/_helpers.py

@@ -4,7 +4,6 @@ from ledgrab.api.schemas.color_strip_sources import (
     ApiInputCSSResponse,
     AudioCSSResponse,
     CandlelightCSSResponse,
-    ColorCycleCSSResponse,
     ColorStop as ColorStopSchema,
     ColorStripSourceResponse,
     CompositeCSSResponse,
@@ -31,7 +30,6 @@ from ledgrab.storage.color_strip_source import (
     ApiInputColorStripSource,
     AudioColorStripSource,
     CandlelightColorStripSource,
-    ColorCycleColorStripSource,
     CompositeColorStripSource,
     DaylightColorStripSource,
     EffectColorStripSource,
@@ -121,10 +119,6 @@ _RESPONSE_MAP: dict = {
         easing=s.easing,
         gradient_id=s.gradient_id,
     ),
-    ColorCycleColorStripSource: lambda s, kw: ColorCycleCSSResponse(
-        **kw,
-        colors=[list(c) for c in s.colors],
-    ),
     EffectColorStripSource: lambda s, kw: EffectCSSResponse(
         **kw,
         effect_type=s.effect_type,

server/src/ledgrab/api/routes/color_strip_sources/ws_stream.py

@@ -31,7 +31,6 @@ router = APIRouter()
 _PREVIEW_ALLOWED_TYPES = {
     "static",
     "gradient",
-    "color_cycle",
     "effect",
     "daylight",
     "candlelight",
@@ -476,13 +475,16 @@ async def test_color_strip_ws(
             meta["layer_infos"] = layer_infos
         await websocket.send_text(_json.dumps(meta))
 
-        # For api_input: send the current buffer immediately so the client
-        # gets a frame right away (fallback color if inactive) rather than
-        # leaving the canvas blank/stale until external data arrives.
+        # For api_input: only send an initial frame if a client has actually
+        # pushed data (push_generation > 0). Without prior data, the preview
+        # stays blank instead of showing the fallback buffer as a stray frame.
         if is_api_input:
-            initial_colors = stream.get_latest_colors()
-            if initial_colors is not None:
-                await websocket.send_bytes(initial_colors.tobytes())
+            initial_gen = stream.push_generation
+            if initial_gen > 0:
+                _last_push_gen = initial_gen
+                initial_colors = stream.get_latest_colors()
+                if initial_colors is not None:
+                    await websocket.send_bytes(initial_colors.tobytes())
 
         # For picture sources, grab the live stream for frame preview
         _frame_live = None

server/src/ledgrab/api/routes/home_assistant.py

@@ -316,6 +316,7 @@ async def get_ha_status(
                 name=source.name,
                 connected=connected,
                 entity_count=status["entity_count"] if status else 0,
+                host=source.host or "",
             )
         )
 

server/src/ledgrab/api/routes/picture_sources.py

@@ -12,6 +12,7 @@ from fastapi.responses import Response
 from ledgrab.api.auth import AuthRequired
 from ledgrab.api.dependencies import (
     fire_entity_event,
+    get_color_strip_store,
     get_picture_source_store,
     get_output_target_store,
     get_pp_template_store,
@@ -37,6 +38,7 @@ from ledgrab.api.schemas.picture_sources import (
 )
 from ledgrab.core.capture_engines import EngineRegistry
 from ledgrab.core.filters import FilterRegistry, ImagePool
+from ledgrab.storage.color_strip_store import ColorStripStore
 from ledgrab.storage.output_target_store import OutputTargetStore
 from ledgrab.storage.template_store import TemplateStore
 from ledgrab.storage.postprocessing_template_store import PostprocessingTemplateStore
@@ -361,11 +363,12 @@ async def delete_picture_source(
     _auth: AuthRequired,
     store: PictureSourceStore = Depends(get_picture_source_store),
     target_store: OutputTargetStore = Depends(get_output_target_store),
+    css_store: ColorStripStore = Depends(get_color_strip_store),
 ):
     """Delete a picture source."""
     try:
-        # Check if any target references this stream
-        target_names = store.get_targets_referencing(stream_id, target_store)
+        # Check if any target transitively references this stream via a CSS
+        target_names = store.get_targets_referencing(stream_id, target_store, css_store)
         if target_names:
             names = ", ".join(target_names)
             raise HTTPException(
@@ -373,6 +376,16 @@ async def delete_picture_source(
                 detail=f"Cannot delete picture source: it is assigned to target(s): {names}. "
                 "Please reassign those targets before deleting.",
             )
+        # Block when any CSS still references this picture source, even if no
+        # target depends on it — deletion would leave the CSS broken.
+        css_refs = css_store.get_referencing_picture_source(stream_id)
+        if css_refs:
+            css_names = ", ".join(css.name for css in css_refs)
+            raise HTTPException(
+                status_code=409,
+                detail=f"Cannot delete picture source: it is used by color strip source(s): "
+                f"{css_names}. Please reassign or delete those first.",
+            )
         store.delete_stream(stream_id)
         fire_entity_event("picture_source", "deleted", stream_id)
     except HTTPException:

server/src/ledgrab/api/routes/preferences.py

@@ -0,0 +1,203 @@
+"""User preferences routes — dashboard layout + notification settings + daylight tz.
+
+The dashboard layout schema is owned by the frontend (open registry of
+section/cell keys); the backend treats the value as an opaque JSON blob,
+validates it's a dict with a `version` field, and persists it under the
+`dashboard_layout` settings key.
+
+Notification preferences are validated server-side via Pydantic so the
+backend can read them when deciding whether to start the background
+discovery watcher.
+
+Daylight timezone is a single global IANA tz name shared by every
+daylight value-source / color-strip-source. Stored as
+``{"value": "Europe/Berlin"}`` under the ``daylight_timezone`` key, with
+empty/missing meaning "use system local time".
+"""
+
+from typing import Any
+
+from fastapi import APIRouter, Body, Depends, HTTPException
+from pydantic import BaseModel, Field
+
+from ledgrab.api.auth import AuthRequired
+from ledgrab.api.dependencies import get_database
+from ledgrab.api.schemas.preferences import NotificationPreferences
+from ledgrab.core.processing.daylight_settings import (
+    DAYLIGHT_TIMEZONE_KEY,
+    get_daylight_timezone,
+    set_daylight_timezone,
+)
+from ledgrab.storage.database import Database
+from ledgrab.utils import get_logger
+
+logger = get_logger(__name__)
+
+router = APIRouter()
+
+_DASHBOARD_LAYOUT_KEY = "dashboard_layout"
+_NOTIFICATION_PREFS_KEY = "notification_preferences"
+
+
+class DaylightTimezonePreference(BaseModel):
+    """Global IANA timezone applied to every daylight cycle source."""
+
+    timezone: str = Field("", description="IANA timezone name; empty = system local")
+
+
+def load_notification_preferences(db: Database | None = None) -> NotificationPreferences:
+    """Read notification prefs, returning defaults when unset or corrupt.
+
+    Used by both the route handler and `main.lifespan` (so the discovery
+    watcher can decide whether to start without going through HTTP).
+    """
+    if db is None:
+        from ledgrab.api.dependencies import get_database as _get_db
+
+        db = _get_db()
+    raw = db.get_setting(_NOTIFICATION_PREFS_KEY)
+    if not raw:
+        return NotificationPreferences()
+    try:
+        return NotificationPreferences.model_validate(raw)
+    except Exception as e:
+        logger.warning("Stored notification preferences invalid (%s); using defaults", e)
+        return NotificationPreferences()
+
+
+@router.get(
+    "/api/v1/preferences/dashboard-layout",
+    tags=["Preferences"],
+)
+async def get_dashboard_layout(
+    _: AuthRequired,
+    db: Database = Depends(get_database),
+) -> dict[str, Any]:
+    """Read the saved dashboard layout. Returns an empty object when no
+    layout has been saved yet — the frontend falls back to its built-in
+    default in that case."""
+    value = db.get_setting(_DASHBOARD_LAYOUT_KEY)
+    return value if value is not None else {}
+
+
+@router.put(
+    "/api/v1/preferences/dashboard-layout",
+    tags=["Preferences"],
+)
+async def put_dashboard_layout(
+    _: AuthRequired,
+    body: dict[str, Any] = Body(...),
+    db: Database = Depends(get_database),
+) -> dict[str, bool]:
+    """Save the dashboard layout. The body must be a JSON object with a
+    numeric `version` field; everything else is treated as opaque payload
+    that the frontend will validate on read."""
+    if not isinstance(body, dict):
+        raise HTTPException(status_code=422, detail="Body must be a JSON object")
+    if not isinstance(body.get("version"), int):
+        raise HTTPException(
+            status_code=422,
+            detail="Layout must include a numeric 'version' field",
+        )
+    db.set_setting(_DASHBOARD_LAYOUT_KEY, body)
+    return {"ok": True}
+
+
+@router.delete(
+    "/api/v1/preferences/dashboard-layout",
+    tags=["Preferences"],
+)
+async def delete_dashboard_layout(
+    _: AuthRequired,
+    db: Database = Depends(get_database),
+) -> dict[str, bool]:
+    """Delete the saved layout — frontend will revert to the default
+    on next load. Used by the 'Reset' button when the user wants
+    to clear the server-side override entirely."""
+    db.set_setting(_DASHBOARD_LAYOUT_KEY, {})
+    return {"ok": True}
+
+
+# ---------------------------------------------------------------------------
+# Notification preferences
+# ---------------------------------------------------------------------------
+
+
+@router.get(
+    "/api/v1/preferences/notifications",
+    response_model=NotificationPreferences,
+    tags=["Preferences"],
+)
+async def get_notification_preferences(
+    _: AuthRequired,
+    db: Database = Depends(get_database),
+) -> NotificationPreferences:
+    """Read notification prefs, returning defaults when unset.
+
+    Defaults: device_offline=both, device_online/discovered=snack,
+    device_lost=none, background discovery on, 10 s startup grace,
+    5 s flap debounce.
+    """
+    return load_notification_preferences(db)
+
+
+@router.put(
+    "/api/v1/preferences/notifications",
+    response_model=NotificationPreferences,
+    tags=["Preferences"],
+)
+async def put_notification_preferences(
+    _: AuthRequired,
+    body: NotificationPreferences,
+    db: Database = Depends(get_database),
+) -> NotificationPreferences:
+    """Persist the notification prefs. Pydantic enforces channel
+    enum + grace/debounce ranges so a bad client cannot poison
+    the stored value."""
+    db.set_setting(_NOTIFICATION_PREFS_KEY, body.model_dump())
+    logger.info(
+        "Notification preferences updated (background_discovery=%s, " "channels=%s)",
+        body.background_discovery_enabled,
+        body.channels.model_dump(),
+    )
+    return body
+
+
+# ---------------------------------------------------------------------------
+# Daylight timezone (global)
+# ---------------------------------------------------------------------------
+
+
+@router.get(
+    "/api/v1/preferences/daylight-timezone",
+    response_model=DaylightTimezonePreference,
+    tags=["Preferences"],
+)
+async def get_daylight_timezone_preference(
+    _: AuthRequired,
+) -> DaylightTimezonePreference:
+    """Return the global daylight cycle timezone (empty = system local)."""
+    return DaylightTimezonePreference(timezone=get_daylight_timezone())
+
+
+@router.put(
+    "/api/v1/preferences/daylight-timezone",
+    response_model=DaylightTimezonePreference,
+    tags=["Preferences"],
+)
+async def put_daylight_timezone_preference(
+    _: AuthRequired,
+    body: DaylightTimezonePreference,
+) -> DaylightTimezonePreference:
+    """Persist the global daylight cycle timezone.
+
+    The string is stored verbatim — clients should send a valid IANA name
+    (e.g. ``Europe/Berlin``) or an empty string for "use server local".
+    Daylight streams pick up the new value within ~1 second.
+    """
+    saved = set_daylight_timezone(body.timezone)
+    logger.info("Daylight timezone updated: %r", saved or "<system local>")
+    return DaylightTimezonePreference(timezone=saved)
+
+
+__all__ = ["router", "DAYLIGHT_TIMEZONE_KEY"]

server/src/ledgrab/api/routes/sync_clocks.py

@@ -8,6 +8,7 @@ from ledgrab.api.dependencies import (
     get_color_strip_store,
     get_sync_clock_manager,
     get_sync_clock_store,
+    get_value_source_store,
 )
 from ledgrab.api.schemas.sync_clocks import (
     SyncClockCreate,
@@ -18,6 +19,7 @@ from ledgrab.api.schemas.sync_clocks import (
 from ledgrab.storage.sync_clock import SyncClock
 from ledgrab.storage.sync_clock_store import SyncClockStore
 from ledgrab.storage.color_strip_store import ColorStripStore
+from ledgrab.storage.value_source_store import ValueSourceStore
 from ledgrab.core.processing.sync_clock_manager import SyncClockManager
 from ledgrab.utils import get_logger
 from ledgrab.storage.base_store import EntityNotFoundError
@@ -137,14 +139,18 @@ async def delete_sync_clock(
     _auth: AuthRequired,
     store: SyncClockStore = Depends(get_sync_clock_store),
     css_store: ColorStripStore = Depends(get_color_strip_store),
+    vs_store: ValueSourceStore = Depends(get_value_source_store),
     manager: SyncClockManager = Depends(get_sync_clock_manager),
 ):
-    """Delete a synchronization clock (fails if referenced by CSS sources)."""
+    """Delete a synchronization clock (fails if referenced by CSS or value sources)."""
     try:
         # Check references
         for source in css_store.get_all_sources():
             if getattr(source, "clock_id", None) == clock_id:
                 raise ValueError(f"Cannot delete: referenced by color strip source '{source.name}'")
+        for vs in vs_store.get_all_sources():
+            if getattr(vs, "clock_id", None) == clock_id:
+                raise ValueError(f"Cannot delete: referenced by value source '{vs.name}'")
         manager.release_all_for(clock_id)
         store.delete_clock(clock_id)
         fire_entity_event("sync_clock", "deleted", clock_id)

server/src/ledgrab/api/routes/system.py

@@ -7,6 +7,7 @@ import asyncio
 import platform
 import subprocess
 import sys
+import time
 from datetime import datetime, timezone
 from typing import Optional
 
@@ -92,6 +93,13 @@ def _get_cpu_name() -> str | None:
 
 _cpu_name: str | None = _get_cpu_name()
 
+# Captured at first import of this module. Process-wide elapsed time is
+# the closest the server has to "app start" without instrumenting main.py;
+# the system module is imported during router setup, before the server
+# accepts requests, so the drift is negligible. Used by /health to expose
+# uptime_seconds for the transport-bar ticker.
+_APP_START_MONOTONIC: float = time.monotonic()
+
 router = APIRouter()
 
 
@@ -122,6 +130,7 @@ async def health_check(request: Request):
         setup_required=setup_required,
         repo_url=REPO_URL,
         donate_url=DONATE_URL,
+        uptime_seconds=time.monotonic() - _APP_START_MONOTONIC,
     )
 
 
@@ -316,6 +325,15 @@ def get_system_performance(_: AuthRequired):
         except Exception as e:
             logger.debug("NVML query failed: %s", e)
 
+    # Windows has no user-space CPU die temperature source without a kernel
+    # driver. We rely on LibreHardwareMonitor / OpenHardwareMonitor publishing
+    # WMI sensors when the user runs them. When no reading arrives, surface
+    # that explicitly so the dashboard can show a "here's how to enable it"
+    # hint instead of silently hiding the card.
+    cpu_temp_hint_key: str | None = None
+    if thermals.cpu_temp_c is None and platform.system() == "Windows":
+        cpu_temp_hint_key = "dashboard.perf.temp.install_lhm"
+
     return PerformanceResponse(
         cpu_name=_cpu_name,
         cpu_percent=metrics.cpu_percent(),
@@ -328,6 +346,7 @@ def get_system_performance(_: AuthRequired):
         battery_percent=thermals.battery_percent,
         battery_temp_c=thermals.battery_temp_c,
         cpu_temp_c=thermals.cpu_temp_c,
+        cpu_temp_hint_key=cpu_temp_hint_key,
         timestamp=datetime.now(timezone.utc),
     )
 

server/src/ledgrab/api/routes/system_settings.py

@@ -19,6 +19,9 @@ from ledgrab.api.schemas.system import (
     LogLevelResponse,
     MQTTSettingsRequest,
     MQTTSettingsResponse,
+    ShutdownAction,
+    ShutdownActionRequest,
+    ShutdownActionResponse,
 )
 from ledgrab.config import get_config
 from ledgrab.storage.database import Database
@@ -150,6 +153,55 @@ async def update_external_url(
     return ExternalUrlResponse(external_url=url)
 
 
+# ---------------------------------------------------------------------------
+# Shutdown action setting
+# ---------------------------------------------------------------------------
+
+_VALID_SHUTDOWN_ACTIONS: tuple[str, ...] = ("stop_targets", "nothing")
+_DEFAULT_SHUTDOWN_ACTION: ShutdownAction = "stop_targets"
+
+
+def load_shutdown_action(db: Database | None = None) -> ShutdownAction:
+    """Load the configured shutdown action. Returns the default if unset or corrupt."""
+    if db is None:
+        from ledgrab.api.dependencies import get_database
+
+        db = get_database()
+    data = db.get_setting("shutdown_action")
+    if not data:
+        return _DEFAULT_SHUTDOWN_ACTION
+    value = data.get("action")
+    if value in _VALID_SHUTDOWN_ACTIONS:
+        return value  # type: ignore[return-value]
+    return _DEFAULT_SHUTDOWN_ACTION
+
+
+@router.get(
+    "/api/v1/system/shutdown-action",
+    response_model=ShutdownActionResponse,
+    tags=["System"],
+)
+async def get_shutdown_action(_: AuthRequired, db: Database = Depends(get_database)):
+    """Get the configured server shutdown action."""
+    return ShutdownActionResponse(action=load_shutdown_action(db))
+
+
+@router.put(
+    "/api/v1/system/shutdown-action",
+    response_model=ShutdownActionResponse,
+    tags=["System"],
+)
+async def update_shutdown_action(
+    _: AuthRequired,
+    body: ShutdownActionRequest,
+    db: Database = Depends(get_database),
+):
+    """Set what happens to LED targets when the server shuts down."""
+    db.set_setting("shutdown_action", {"action": body.action})
+    logger.info("Shutdown action updated: %s", body.action)
+    return ShutdownActionResponse(action=body.action)
+
+
 # ---------------------------------------------------------------------------
 # Live log viewer WebSocket
 # ---------------------------------------------------------------------------

server/src/ledgrab/api/routes/templates.py

@@ -255,6 +255,7 @@ async def list_engines(_auth: AuthRequired):
                     type=engine_type,
                     name=engine_type.upper(),
                     default_config=engine_class.get_default_config(),
+                    config_choices=engine_class.get_config_choices(),
                     available=(engine_type in available_set),
                     has_own_displays=getattr(engine_class, "HAS_OWN_DISPLAYS", False),
                 )

server/src/ledgrab/api/routes/value_sources.py

@@ -105,6 +105,7 @@ _RESPONSE_MAP = {
         speed=s.speed,
         use_real_time=s.use_real_time,
         latitude=s.latitude,
+        longitude=s.longitude,
         min_value=s.min_value,
         max_value=s.max_value,
     ),
@@ -127,6 +128,7 @@ _RESPONSE_MAP = {
         colors=[list(c) for c in s.colors],
         speed=s.speed,
         easing=s.easing,
+        clock_id=s.clock_id,
     ),
     AdaptiveTimeColorValueSource: lambda s: AdaptiveTimeColorValueSourceResponse(
         id=s.id,

server/src/ledgrab/api/schemas/color_strip_sources.py

@@ -28,7 +28,7 @@ class AnimationConfig(BaseModel):
     """Procedural animation configuration for static/gradient color strip sources."""
 
     enabled: bool = True
-    type: str = "breathing"  # breathing | color_cycle | gradient_shift | wave
+    type: str = "breathing"  # breathing | gradient_shift | wave
     speed: float = Field(1.0, ge=0.1, le=10.0, description="Speed multiplier (0.1-10.0)")
 
 
@@ -126,11 +126,6 @@ class GradientCSSResponse(_CSSResponseBase):
     gradient_id: Optional[str] = Field(None, description="Gradient entity ID")
 
 
-class ColorCycleCSSResponse(_CSSResponseBase):
-    source_type: Literal["color_cycle"] = "color_cycle"
-    colors: List[List[int]] = Field(description="List of [R,G,B] colors to cycle")
-
-
 class EffectCSSResponse(_CSSResponseBase):
     source_type: Literal["effect"] = "effect"
     effect_type: str = Field(description="Effect algorithm")
@@ -241,7 +236,6 @@ ColorStripSourceResponse = Annotated[
         Annotated[PictureAdvancedCSSResponse, Tag("picture_advanced")],
         Annotated[StaticCSSResponse, Tag("static")],
         Annotated[GradientCSSResponse, Tag("gradient")],
-        Annotated[ColorCycleCSSResponse, Tag("color_cycle")],
         Annotated[EffectCSSResponse, Tag("effect")],
         Annotated[CompositeCSSResponse, Tag("composite")],
         Annotated[MappedCSSResponse, Tag("mapped")],
@@ -303,11 +297,6 @@ class GradientCSSCreate(_CSSCreateBase):
     gradient_id: Optional[str] = Field(None, description="Gradient entity ID")
 
 
-class ColorCycleCSSCreate(_CSSCreateBase):
-    source_type: Literal["color_cycle"] = "color_cycle"
-    colors: Optional[List[List[int]]] = Field(None, description="List of [R,G,B] colors to cycle")
-
-
 class EffectCSSCreate(_CSSCreateBase):
     source_type: Literal["effect"] = "effect"
     effect_type: Optional[str] = Field(None, description="Effect algorithm")
@@ -431,7 +420,6 @@ ColorStripSourceCreate = Annotated[
         Annotated[PictureAdvancedCSSCreate, Tag("picture_advanced")],
         Annotated[StaticCSSCreate, Tag("static")],
         Annotated[GradientCSSCreate, Tag("gradient")],
-        Annotated[ColorCycleCSSCreate, Tag("color_cycle")],
         Annotated[EffectCSSCreate, Tag("effect")],
         Annotated[CompositeCSSCreate, Tag("composite")],
         Annotated[MappedCSSCreate, Tag("mapped")],
@@ -493,11 +481,6 @@ class GradientCSSUpdate(_CSSUpdateBase):
     gradient_id: Optional[str] = Field(None, description="Gradient entity ID")
 
 
-class ColorCycleCSSUpdate(_CSSUpdateBase):
-    source_type: Literal["color_cycle"] = "color_cycle"
-    colors: Optional[List[List[int]]] = Field(None, description="List of [R,G,B] colors to cycle")
-
-
 class EffectCSSUpdate(_CSSUpdateBase):
     source_type: Literal["effect"] = "effect"
     effect_type: Optional[str] = Field(None, description="Effect algorithm")
@@ -619,7 +602,6 @@ ColorStripSourceUpdate = Annotated[
         Annotated[PictureAdvancedCSSUpdate, Tag("picture_advanced")],
         Annotated[StaticCSSUpdate, Tag("static")],
         Annotated[GradientCSSUpdate, Tag("gradient")],
-        Annotated[ColorCycleCSSUpdate, Tag("color_cycle")],
         Annotated[EffectCSSUpdate, Tag("effect")],
         Annotated[CompositeCSSUpdate, Tag("composite")],
         Annotated[MappedCSSUpdate, Tag("mapped")],
@@ -655,10 +637,22 @@ class ColorStripSourceListResponse(BaseModel):
 
 
 class SegmentPayload(BaseModel):
-    """A single segment for segment-based LED color updates."""
+    """A single segment for segment-based LED color updates.
 
-    start: int = Field(ge=0, description="Starting LED index")
-    length: int = Field(ge=1, description="Number of LEDs in segment")
+    ``start`` and ``length`` are optional: when omitted, the segment defaults
+    to ``start=0`` and ``length=led_count - start`` (i.e. the rest of the
+    strip from ``start``). Sending a single segment with only ``mode`` and
+    ``color`` therefore fills the entire strip.
+    """
+
+    start: Optional[int] = Field(
+        None, ge=0, description="Starting LED index (default 0 = beginning of strip)"
+    )
+    length: Optional[int] = Field(
+        None,
+        ge=1,
+        description="Number of LEDs in segment (default = led_count - start)",
+    )
     mode: Literal["solid", "per_pixel", "gradient"] = Field(description="Fill mode")
     color: Optional[List[int]] = Field(None, description="RGB for solid mode [R,G,B]")
     colors: Optional[List[List[int]]] = Field(

server/src/ledgrab/api/schemas/home_assistant.py

@@ -94,6 +94,7 @@ class HomeAssistantConnectionStatus(BaseModel):
     name: str
     connected: bool
     entity_count: int
+    host: str = ""
 
 
 class HomeAssistantStatusResponse(BaseModel):

server/src/ledgrab/api/schemas/output_targets.py

@@ -280,6 +280,9 @@ class TargetProcessingState(BaseModel):
         None, description="Potential FPS (processing speed without throttle)"
     )
     fps_target: Optional[int] = Field(None, description="Target FPS")
+    fps_capture: Optional[int] = Field(
+        None, description="Configured capture-side FPS for the underlying color strip stream"
+    )
     frames_skipped: Optional[int] = Field(None, description="Frames skipped (no screen change)")
     frames_keepalive: Optional[int] = Field(
         None, description="Keepalive frames sent during standby"

server/src/ledgrab/api/schemas/preferences.py

@@ -0,0 +1,66 @@
+"""User-preference schemas (notifications, future per-user settings)."""
+
+from typing import Literal
+
+from pydantic import BaseModel, Field
+
+NotificationChannel = Literal["none", "snack", "os", "both"]
+
+
+class NotificationChannelMatrix(BaseModel):
+    """Channel selection per device-event type."""
+
+    device_online: NotificationChannel = Field(
+        default="snack",
+        description="Configured device transitioned from offline to online",
+    )
+    device_offline: NotificationChannel = Field(
+        default="both",
+        description="Configured device went offline (urgent — likely user wants OS toast)",
+    )
+    device_discovered: NotificationChannel = Field(
+        default="snack",
+        description="A new WLED/serial device appeared on the LAN/USB",
+    )
+    device_lost: NotificationChannel = Field(
+        default="none",
+        description=(
+            "Previously discovered (but never configured) device disappeared. "
+            "Default off — usually noise unless the user is actively pairing."
+        ),
+    )
+
+
+class NotificationPreferences(BaseModel):
+    """User-level notification preferences."""
+
+    channels: NotificationChannelMatrix = Field(
+        default_factory=NotificationChannelMatrix,
+        description="Per-event-type channel selection",
+    )
+    background_discovery_enabled: bool = Field(
+        default=True,
+        description=(
+            "Run the continuous mDNS browser + serial-port poller while the server "
+            "is up. Required for device_discovered/device_lost notifications. "
+            "Disable to silence all discovery-driven events at the source."
+        ),
+    )
+    startup_grace_sec: int = Field(
+        default=10,
+        ge=0,
+        le=300,
+        description=(
+            "Seconds after each event-WS connect during which device_offline "
+            "notifications are suppressed (devices boot at different speeds)."
+        ),
+    )
+    flap_debounce_sec: int = Field(
+        default=5,
+        ge=0,
+        le=60,
+        description=(
+            "A device must hold a new state for at least this many seconds before "
+            "the corresponding notification is fired. Filters out single-packet drops."
+        ),
+    )

server/src/ledgrab/api/schemas/system.py

@@ -26,6 +26,10 @@ class HealthResponse(BaseModel):
     )
     repo_url: str = Field(default="", description="Source code repository URL")
     donate_url: str = Field(default="", description="Donation page URL")
+    uptime_seconds: float = Field(
+        default=0.0,
+        description="Process uptime in seconds since the server started.",
+    )
 
 
 class VersionResponse(BaseModel):
@@ -98,6 +102,15 @@ class PerformanceResponse(BaseModel):
         default=None,
         description="Hottest CPU/SoC thermal zone in °C (null if unsupported)",
     )
+    cpu_temp_hint_key: str | None = Field(
+        default=None,
+        description=(
+            "i18n key for an explainer shown in the Temperature card when "
+            "cpu_temp_c is null and the platform has a known workaround "
+            "(e.g. install LibreHardwareMonitor on Windows). Null on "
+            "platforms where unavailable simply means 'not reported'."
+        ),
+    )
     timestamp: datetime = Field(description="Measurement timestamp")
 
 
@@ -191,6 +204,32 @@ class ExternalUrlRequest(BaseModel):
     external_url: str = Field(default="", description="External base URL. Empty string to clear.")
 
 
+# ─── Shutdown action schemas ───────────────────────────────────
+
+
+ShutdownAction = Literal["stop_targets", "nothing"]
+
+
+class ShutdownActionResponse(BaseModel):
+    """Current server shutdown action setting."""
+
+    action: ShutdownAction = Field(
+        description=(
+            "What happens to LED targets when the server shuts down. "
+            "`stop_targets` runs the normal stop sequence (per-device "
+            "auto_shutdown decides whether prior state is restored). "
+            "`nothing` skips device-touching teardown — lights freeze on "
+            "their last frame regardless of per-device auto_shutdown."
+        ),
+    )
+
+
+class ShutdownActionRequest(BaseModel):
+    """Update the server shutdown action setting."""
+
+    action: ShutdownAction = Field(description="New shutdown action.")
+
+
 # ─── Log level schemas ─────────────────────────────────────────
 
 

server/src/ledgrab/api/schemas/templates.py

@@ -52,6 +52,10 @@ class EngineInfo(BaseModel):
     type: str = Field(description="Engine type identifier (e.g., 'mss', 'dxcam')")
     name: str = Field(description="Human-readable engine name")
     default_config: Dict = Field(description="Default configuration for this engine")
+    config_choices: Dict[str, List[str]] = Field(
+        default_factory=dict,
+        description="Allowed values for enum-like config keys on this platform",
+    )
     available: bool = Field(description="Whether engine is available on this system")
     has_own_displays: bool = Field(
         default=False, description="Engine has its own device list (not desktop monitors)"

server/src/ledgrab/api/schemas/update.py

@@ -3,6 +3,14 @@
 from pydantic import BaseModel, Field
 
 
+class UpdateAssetInfo(BaseModel):
+    """A downloadable asset attached to a release (e.g. an installer)."""
+
+    name: str
+    size: int
+    download_url: str
+
+
 class UpdateReleaseInfo(BaseModel):
     version: str
     tag: str
@@ -10,6 +18,7 @@ class UpdateReleaseInfo(BaseModel):
     body: str
     prerelease: bool
     published_at: str
+    assets: list[UpdateAssetInfo] = Field(default_factory=list)
 
 
 class UpdateStatusResponse(BaseModel):

server/src/ledgrab/api/schemas/value_sources.py

@@ -73,6 +73,7 @@ class DaylightValueSourceResponse(_ValueSourceResponseBase):
     speed: float = Field(description="Simulation speed multiplier")
     use_real_time: bool = Field(description="Use wall-clock time")
     latitude: float = Field(description="Geographic latitude")
+    longitude: float = Field(description="Geographic longitude")
     min_value: float = Field(description="Minimum output")
     max_value: float = Field(description="Maximum output")
 
@@ -87,8 +88,11 @@ class AnimatedColorValueSourceResponse(_ValueSourceResponseBase):
     source_type: Literal["animated_color"] = "animated_color"
     return_type: Literal["color"] = "color"
     colors: List[List[int]] = Field(description="Color list [[R,G,B], ...]")
-    speed: float = Field(description="Cycles per minute")
-    easing: str = Field(description="Color easing: linear|step")
+    speed: float = Field(description="Cycles per minute (ignored when clock_id is set)")
+    easing: str = Field(description="Color easing: linear|step|ease_in|ease_out|ease_in_out|sine")
+    clock_id: Optional[str] = Field(
+        None, description="Optional sync clock ID for shared timing (overrides speed)"
+    )
 
 
 class AdaptiveTimeColorValueSourceResponse(_ValueSourceResponseBase):
@@ -215,6 +219,9 @@ class DaylightValueSourceCreate(_ValueSourceCreateBase):
     speed: float = Field(1.0, description="Simulation speed multiplier", ge=0.1, le=120.0)
     use_real_time: bool = Field(False, description="Use wall-clock time instead of simulation")
     latitude: float = Field(50.0, description="Geographic latitude (-90 to 90)", ge=-90.0, le=90.0)
+    longitude: float = Field(
+        0.0, description="Geographic longitude (-180 to 180)", ge=-180.0, le=180.0
+    )
     min_value: float = Field(0.0, description="Minimum output (0.0-1.0)", ge=0.0, le=1.0)
     max_value: float = Field(1.0, description="Maximum output (0.0-1.0)", ge=0.0, le=1.0)
 
@@ -234,7 +241,12 @@ class AnimatedColorValueSourceCreate(_ValueSourceCreateBase):
         description="Color list [[R,G,B], ...]",
     )
     speed: float = Field(10.0, description="Cycles per minute", ge=0.1, le=120.0)
-    easing: str = Field("linear", description="Color easing: linear|step")
+    easing: str = Field(
+        "linear", description="Color easing: linear|step|ease_in|ease_out|ease_in_out|sine"
+    )
+    clock_id: Optional[str] = Field(
+        None, description="Optional sync clock ID (overrides speed when set)"
+    )
 
 
 class AdaptiveTimeColorValueSourceCreate(_ValueSourceCreateBase):
@@ -356,6 +368,9 @@ class DaylightValueSourceUpdate(_ValueSourceUpdateBase):
     speed: Optional[float] = Field(None, description="Simulation speed", ge=0.1, le=120.0)
     use_real_time: Optional[bool] = Field(None, description="Use wall-clock time")
     latitude: Optional[float] = Field(None, description="Geographic latitude", ge=-90.0, le=90.0)
+    longitude: Optional[float] = Field(
+        None, description="Geographic longitude", ge=-180.0, le=180.0
+    )
     min_value: Optional[float] = Field(None, description="Minimum output", ge=0.0, le=1.0)
     max_value: Optional[float] = Field(None, description="Maximum output", ge=0.0, le=1.0)
 
@@ -369,7 +384,12 @@ class AnimatedColorValueSourceUpdate(_ValueSourceUpdateBase):
     source_type: Literal["animated_color"] = "animated_color"
     colors: Optional[List[List[int]]] = Field(None, description="Color list [[R,G,B], ...]")
     speed: Optional[float] = Field(None, description="Cycles per minute", ge=0.1, le=120.0)
-    easing: Optional[str] = Field(None, description="Color easing: linear|step")
+    easing: Optional[str] = Field(
+        None, description="Color easing: linear|step|ease_in|ease_out|ease_in_out|sine"
+    )
+    clock_id: Optional[str] = Field(
+        None, description="Optional sync clock ID (empty string clears, null leaves unchanged)"
+    )
 
 
 class AdaptiveTimeColorValueSourceUpdate(_ValueSourceUpdateBase):

server/src/ledgrab/core/capture/calibration.py

@@ -233,6 +233,90 @@ class CalibrationConfig:
         return None
 
 
+def _build_skip_buffers(mapper, calibration: CalibrationConfig, total_leds: int) -> None:
+    """Pre-compute Phase 3 skip-LED resampling indices and scratch buffers.
+
+    Phase 3 takes the full ``total_leds`` strip and resamples it into
+    ``active_count = total_leds - skip_start - skip_end`` LEDs using linear
+    interpolation. We precompute floor/ceil source indices and fractional
+    weights once so per-frame work becomes a couple of ``np.take`` +
+    in-place arithmetic ops with no allocations.
+
+    Attaches all skip-related state to ``mapper`` directly to keep the
+    storage layout consistent between PixelMapper and AdvancedPixelMapper.
+    """
+    skip_start = calibration.skip_leds_start
+    skip_end = calibration.skip_leds_end
+    mapper._skip_start = skip_start
+    mapper._skip_end = skip_end
+    active_count = max(0, total_leds - skip_start - skip_end)
+    mapper._active_count = active_count
+
+    if not (0 < active_count < total_leds):
+        # No skip needed (full strip used) or no active LEDs.
+        mapper._skip_floor_idx = None
+        mapper._skip_ceil_idx = None
+        mapper._skip_frac = None
+        mapper._skip_left_u8 = None
+        mapper._skip_right_u8 = None
+        mapper._skip_blend_f32 = None
+        mapper._skip_resampled = None
+        return
+
+    # Floor/ceil source indices and fractional weights for each
+    # destination LED.  ``t = src_x[k] = k * (total_leds - 1) / (active_count - 1)``
+    # — equivalent to ``np.linspace(0, total_leds - 1, active_count)``.
+    if active_count > 1:
+        t = np.arange(active_count, dtype=np.float64) * ((total_leds - 1) / (active_count - 1))
+    else:
+        t = np.zeros(active_count, dtype=np.float64)
+    floor_idx = np.floor(t).astype(np.int64)
+    np.clip(floor_idx, 0, total_leds - 1, out=floor_idx)
+    ceil_idx = np.minimum(floor_idx + 1, total_leds - 1)
+    frac = (t - floor_idx).astype(np.float32)[:, None]  # (active_count, 1)
+
+    mapper._skip_floor_idx = floor_idx
+    mapper._skip_ceil_idx = ceil_idx
+    mapper._skip_frac = frac
+    # uint8 take destinations + float32 blend scratch — all reused per frame
+    mapper._skip_left_u8 = np.empty((active_count, 3), dtype=np.uint8)
+    mapper._skip_right_u8 = np.empty((active_count, 3), dtype=np.uint8)
+    mapper._skip_blend_f32 = np.empty((active_count, 3), dtype=np.float32)
+    mapper._skip_resampled = np.empty((active_count, 3), dtype=np.uint8)
+
+
+def _apply_skip_resample(mapper, led_array: np.ndarray) -> None:
+    """Phase 3 in-place resample of ``led_array`` (no allocations).
+
+    Applies linear interpolation precomputed in ``_build_skip_buffers`` and
+    writes the result back into ``led_array`` with the configured skip
+    leading/trailing zeros.
+    """
+    floor_idx = mapper._skip_floor_idx
+    if floor_idx is None:
+        if mapper._active_count <= 0:
+            led_array[:] = 0
+        return
+
+    left_u8 = mapper._skip_left_u8
+    right_u8 = mapper._skip_right_u8
+    blend = mapper._skip_blend_f32
+    resampled = mapper._skip_resampled
+
+    np.take(led_array, floor_idx, axis=0, out=left_u8)
+    np.take(led_array, mapper._skip_ceil_idx, axis=0, out=right_u8)
+    np.copyto(blend, right_u8, casting="unsafe")  # uint8 → float32
+    blend -= left_u8  # right - left
+    blend *= mapper._skip_frac  # frac * (right - left)
+    blend += left_u8  # left + frac*(right - left)
+    np.clip(blend, 0, 255, out=blend)
+    np.copyto(resampled, blend, casting="unsafe")  # float32 → uint8
+
+    led_array[:] = 0
+    end_idx = mapper._total_leds - mapper._skip_end
+    led_array[mapper._skip_start : end_idx] = resampled
+
+
 class PixelMapper:
     """Maps screen border pixels to LED colors based on calibration."""
 
@@ -280,19 +364,10 @@ class PixelMapper:
                 indices = (indices + offset) % total_leds
             self._segment_indices.append(indices)
 
-        # Pre-compute Phase 3 skip arrays (static geometry)
-        skip_start = calibration.skip_leds_start
-        skip_end = calibration.skip_leds_end
-        self._skip_start = skip_start
-        self._skip_end = skip_end
-        self._active_count = max(0, total_leds - skip_start - skip_end)
-        if 0 < self._active_count < total_leds:
-            self._skip_src = np.linspace(0, total_leds - 1, self._active_count)
-            self._skip_x = np.arange(total_leds, dtype=np.float64)
-            self._skip_float = np.empty((total_leds, 3), dtype=np.float64)
-            self._skip_resampled = np.empty((self._active_count, 3), dtype=np.uint8)
-        else:
-            self._skip_src = self._skip_x = self._skip_float = self._skip_resampled = None
+        # Pre-compute Phase 3 skip — linear interpolation by precomputed
+        # floor/ceil indices and fractional weights.  Per-frame work is
+        # entirely write-in-place into pre-allocated scratch buffers.
+        _build_skip_buffers(self, calibration, total_leds)
 
         # Per-edge average computation cache (lazy-initialized on first frame)
         self._edge_cache: Dict[str, tuple] = {}
@@ -357,8 +432,9 @@ class PixelMapper:
     ) -> np.ndarray:
         """Vectorized average-color mapping for one edge. Returns (led_count, 3) uint8.
 
-        Uses pre-allocated cumsum/mean buffers (lazy-initialized per edge) to
-        avoid per-frame allocations that cause GC-induced timing spikes.
+        Uses pre-allocated cumsum/mean buffers AND pre-allocated output
+        buffers (lazy-initialized per edge).  All per-frame numpy ops write
+        in-place — zero allocations on the hot path.
         """
         if edge_name in ("top", "bottom"):
             axis = 0
@@ -369,7 +445,7 @@ class PixelMapper:
 
         # Lazy-init / resize per-edge scratch buffers
         cache = self._edge_cache.get(edge_name)
-        if cache is None or cache[0] != edge_len:
+        if cache is None or cache[0] != edge_len or cache[1] != led_count:
             step = edge_len / led_count
             boundaries = (np.arange(led_count + 1, dtype=np.float64) * step).astype(np.int64)
             boundaries[1:] = np.maximum(boundaries[1:], boundaries[:-1] + 1)
@@ -379,20 +455,53 @@ class PixelMapper:
             lengths = (ends - starts).reshape(-1, 1).astype(np.float64)
             cumsum_buf = np.empty((edge_len + 1, 3), dtype=np.float64)
             edge_1d_buf = np.empty((edge_len, 3), dtype=np.float64)
-            cache = (edge_len, starts, ends, lengths, cumsum_buf, edge_1d_buf)
+            sums_buf = np.empty((led_count, 3), dtype=np.float64)
+            starts_buf = np.empty((led_count, 3), dtype=np.float64)
+            out_uint8 = np.empty((led_count, 3), dtype=np.uint8)
+            cache = (
+                edge_len,
+                led_count,
+                starts,
+                ends,
+                lengths,
+                cumsum_buf,
+                edge_1d_buf,
+                sums_buf,
+                starts_buf,
+                out_uint8,
+            )
             self._edge_cache[edge_name] = cache
 
-        _, starts, ends, lengths, cumsum_buf, edge_1d_buf = cache
+        (
+            _,
+            _,
+            starts,
+            ends,
+            lengths,
+            cumsum_buf,
+            edge_1d_buf,
+            sums_buf,
+            starts_buf,
+            out_uint8,
+        ) = cache
 
         # Mean into pre-allocated buffer (no intermediate float64 array)
         np.mean(edge_pixels, axis=axis, out=edge_1d_buf)
 
-        # Cumsum into pre-allocated buffer
+        # Cumsum into pre-allocated buffer (cumsum_buf[0] left at 0 from init)
         cumsum_buf[0] = 0
         np.cumsum(edge_1d_buf, axis=0, out=cumsum_buf[1:])
 
-        segment_sums = cumsum_buf[ends] - cumsum_buf[starts]
-        return np.clip(segment_sums / lengths, 0, 255).astype(np.uint8)
+        # segment_sums = cumsum_buf[ends] - cumsum_buf[starts] — but each
+        # fancy-index expression allocates.  np.take with ``out=`` writes
+        # directly into our pre-allocated scratch.
+        np.take(cumsum_buf, ends, axis=0, out=sums_buf)
+        np.take(cumsum_buf, starts, axis=0, out=starts_buf)
+        np.subtract(sums_buf, starts_buf, out=sums_buf)
+        np.divide(sums_buf, lengths, out=sums_buf)
+        np.clip(sums_buf, 0, 255, out=sums_buf)
+        np.copyto(out_uint8, sums_buf, casting="unsafe")
+        return out_uint8
 
     def map_border_to_leds(self, border_pixels: BorderPixels) -> np.ndarray:
         """Map screen border pixels to LED colors.
@@ -423,18 +532,9 @@ class PixelMapper:
 
             led_array[self._segment_indices[i]] = colors
 
-        # Phase 3: Physical skip — resample full perimeter to active LEDs
-        if self._skip_src is not None:
-            np.copyto(self._skip_float, led_array, casting="unsafe")
-            for ch in range(3):
-                self._skip_resampled[:, ch] = np.round(
-                    np.interp(self._skip_src, self._skip_x, self._skip_float[:, ch])
-                ).astype(np.uint8)
-            led_array[:] = 0
-            end_idx = self._total_leds - self._skip_end
-            led_array[self._skip_start : end_idx] = self._skip_resampled
-        elif self._active_count <= 0:
-            led_array[:] = 0
+        # Phase 3: physical skip — resample full perimeter into active LEDs
+        # using precomputed weights, all in-place.
+        _apply_skip_resample(self, led_array)
 
         return led_array
 
@@ -514,19 +614,8 @@ class AdvancedPixelMapper:
             self._line_indices.append(indices)
             led_start += line.led_count
 
-        # Skip arrays (same logic as PixelMapper)
-        skip_start = calibration.skip_leds_start
-        skip_end = calibration.skip_leds_end
-        self._skip_start = skip_start
-        self._skip_end = skip_end
-        self._active_count = max(0, total_leds - skip_start - skip_end)
-        if 0 < self._active_count < total_leds:
-            self._skip_src = np.linspace(0, total_leds - 1, self._active_count)
-            self._skip_x = np.arange(total_leds, dtype=np.float64)
-            self._skip_float = np.empty((total_leds, 3), dtype=np.float64)
-            self._skip_resampled = np.empty((self._active_count, 3), dtype=np.uint8)
-        else:
-            self._skip_src = self._skip_x = self._skip_float = self._skip_resampled = None
+        # Skip arrays — share the same buffer layout as PixelMapper
+        _build_skip_buffers(self, calibration, total_leds)
 
         # Per-line edge cache (keyed by line index to avoid collision)
         self._edge_cache: Dict[int, tuple] = {}
@@ -586,7 +675,7 @@ class AdvancedPixelMapper:
             edge_len = edge_pixels.shape[0]
 
         cache = self._edge_cache.get(cache_key)
-        if cache is None or cache[0] != edge_len:
+        if cache is None or cache[0] != edge_len or cache[1] != led_count:
             step = edge_len / led_count
             boundaries = (np.arange(led_count + 1, dtype=np.float64) * step).astype(np.int64)
             boundaries[1:] = np.maximum(boundaries[1:], boundaries[:-1] + 1)
@@ -596,15 +685,45 @@ class AdvancedPixelMapper:
             lengths = (ends - starts).reshape(-1, 1).astype(np.float64)
             cumsum_buf = np.empty((edge_len + 1, 3), dtype=np.float64)
             edge_1d_buf = np.empty((edge_len, 3), dtype=np.float64)
-            cache = (edge_len, starts, ends, lengths, cumsum_buf, edge_1d_buf)
+            sums_buf = np.empty((led_count, 3), dtype=np.float64)
+            starts_buf = np.empty((led_count, 3), dtype=np.float64)
+            out_uint8 = np.empty((led_count, 3), dtype=np.uint8)
+            cache = (
+                edge_len,
+                led_count,
+                starts,
+                ends,
+                lengths,
+                cumsum_buf,
+                edge_1d_buf,
+                sums_buf,
+                starts_buf,
+                out_uint8,
+            )
             self._edge_cache[cache_key] = cache
 
-        _, starts, ends, lengths, cumsum_buf, edge_1d_buf = cache
+        (
+            _,
+            _,
+            starts,
+            ends,
+            lengths,
+            cumsum_buf,
+            edge_1d_buf,
+            sums_buf,
+            starts_buf,
+            out_uint8,
+        ) = cache
         np.mean(edge_pixels, axis=axis, out=edge_1d_buf)
         cumsum_buf[0] = 0
         np.cumsum(edge_1d_buf, axis=0, out=cumsum_buf[1:])
-        segment_sums = cumsum_buf[ends] - cumsum_buf[starts]
-        return np.clip(segment_sums / lengths, 0, 255).astype(np.uint8)
+        np.take(cumsum_buf, ends, axis=0, out=sums_buf)
+        np.take(cumsum_buf, starts, axis=0, out=starts_buf)
+        np.subtract(sums_buf, starts_buf, out=sums_buf)
+        np.divide(sums_buf, lengths, out=sums_buf)
+        np.clip(sums_buf, 0, 255, out=sums_buf)
+        np.copyto(out_uint8, sums_buf, casting="unsafe")
+        return out_uint8
 
     def _map_edge_fallback(
         self,
@@ -672,18 +791,8 @@ class AdvancedPixelMapper:
 
             led_array[self._line_indices[i]] = colors
 
-        # Phase 3: Physical skip (same as PixelMapper)
-        if self._skip_src is not None:
-            np.copyto(self._skip_float, led_array, casting="unsafe")
-            for ch in range(3):
-                self._skip_resampled[:, ch] = np.round(
-                    np.interp(self._skip_src, self._skip_x, self._skip_float[:, ch])
-                ).astype(np.uint8)
-            led_array[:] = 0
-            end_idx = self._total_leds - self._skip_end
-            led_array[self._skip_start : end_idx] = self._skip_resampled
-        elif self._active_count <= 0:
-            led_array[:] = 0
+        # Phase 3: physical skip — same precomputed-weight resample as PixelMapper
+        _apply_skip_resample(self, led_array)
 
         return led_array
 

server/src/ledgrab/core/capture_engines/base.py

@@ -117,6 +117,16 @@ class CaptureEngine(ABC):
         """Get default configuration for this engine."""
         pass
 
+    @classmethod
+    def get_config_choices(cls) -> Dict[str, List[str]]:
+        """Return allowed values for enum-like config keys on this platform.
+
+        Keys returned here narrow the values the UI offers for the
+        corresponding config field. Engines that have no platform-specific
+        constraints can leave this empty (default).
+        """
+        return {}
+
     @classmethod
     @abstractmethod
     def get_available_displays(cls) -> List[DisplayInfo]:

server/src/ledgrab/core/capture_engines/camera_engine.py

@@ -8,12 +8,19 @@ Prerequisites (optional dependency):
     pip install opencv-python-headless>=4.8.0
 """
 
+import os
 import platform
 import sys
 import threading
 import time
 from typing import Any, Dict, List, Optional, Set
 
+# OpenCV's MSMF backend on Windows often fails to open the device
+# ("cap.isOpened() == False" right after VideoCapture returns) when
+# hardware MFTs are enabled. Disabling them is the documented mitigation.
+# Set before any cv2 import so the MSMF backend picks it up on first use.
+os.environ.setdefault("OPENCV_VIDEOIO_MSMF_ENABLE_HW_TRANSFORMS", "0")
+
 
 from ledgrab.core.capture_engines.base import (
     CaptureEngine,
@@ -27,6 +34,41 @@ logger = get_logger(__name__)
 
 _MAX_CAMERA_INDEX = 10  # probe indices 0..9
 
+# Sentinel used to ask DShow/MSMF/V4L2 for the highest mode the device supports.
+# OpenCV will clamp the requested width/height down to the nearest supported mode.
+_PROBE_MAX_DIM = 9999
+
+# Resolution presets shown in the UI. "auto" means: open at the camera's max
+# (probed via _PROBE_MAX_DIM); the other entries are explicit overrides.
+_RESOLUTION_CHOICES: List[str] = [
+    "auto",
+    "640x480",
+    "1280x720",
+    "1920x1080",
+    "2560x1440",
+    "3840x2160",
+]
+
+
+def _parse_resolution(value: Any) -> Optional[tuple[int, int]]:
+    """Parse a 'WxH' string into (width, height). Returns None for 'auto' or invalid."""
+    if not isinstance(value, str):
+        return None
+    s = value.strip().lower()
+    if s in ("", "auto"):
+        return None
+    parts = s.replace("×", "x").split("x")
+    if len(parts) != 2:
+        return None
+    try:
+        w, h = int(parts[0]), int(parts[1])
+    except ValueError:
+        return None
+    if w <= 0 or h <= 0:
+        return None
+    return w, h
+
+
 # Process-wide registry of cv2 camera indices currently held open.
 # Prevents _enumerate_cameras from probing an in-use camera (which can
 # crash the DSHOW backend on Windows) and prevents two CameraCaptureStreams
@@ -48,6 +90,85 @@ def _get_default_backend():
     return "auto"
 
 
+# Maps our backend ids to the label cv2.getBuildInformation() prints in the
+# Video I/O section. Entries missing or marked "NO" mean the installed
+# opencv wheel was compiled without that backend — even if cv2's registry
+# still lists it, attempts to open will fail with isOpened()==False.
+_BUILDINFO_LABELS: Dict[str, str] = {
+    "dshow": "DirectShow",
+    "msmf": "Media Foundation",
+    "v4l2": "v4l/v4l2",
+    "avfoundation": "AVFoundation",
+}
+
+_compiled_backends_cache: Optional[Set[str]] = None
+
+
+def _get_compiled_backends() -> Set[str]:
+    """Return the set of backend ids the installed cv2 was compiled with.
+
+    Parses ``cv2.getBuildInformation()`` because cv2's videoio registry can
+    advertise backends that aren't actually functional (e.g. wheels that
+    omit Media Foundation still list MSMF in the registry).
+    """
+    global _compiled_backends_cache
+    if _compiled_backends_cache is not None:
+        return _compiled_backends_cache
+
+    try:
+        import cv2
+    except ImportError:
+        _compiled_backends_cache = set()
+        return _compiled_backends_cache
+
+    info = cv2.getBuildInformation()
+    # Restrict the search to the "Video I/O" section so labels like
+    # "Media Foundation" don't pick up unrelated mentions elsewhere.
+    start = info.find("Video I/O:")
+    section = info[start:] if start != -1 else info
+    end_markers = ("Parallel framework", "Trace:", "Other third-party libraries")
+    for marker in end_markers:
+        idx = section.find(marker)
+        if idx != -1:
+            section = section[:idx]
+            break
+
+    found: Set[str] = set()
+    for backend, label in _BUILDINFO_LABELS.items():
+        # Match "<label>: <whitespace>YES" anywhere in the section.
+        needle = label + ":"
+        pos = section.find(needle)
+        if pos == -1:
+            continue
+        line_end = section.find("\n", pos)
+        line = section[pos : line_end if line_end != -1 else len(section)]
+        if "YES" in line.upper():
+            found.add(backend)
+
+    _compiled_backends_cache = found
+    return found
+
+
+def _get_supported_backends() -> List[str]:
+    """Return the list of cv2 backends that make sense on this platform.
+
+    Only advertises backends that are both (a) appropriate for the host OS
+    and (b) actually compiled into the installed opencv wheel. ``auto`` is
+    always offered as a safe default.
+    """
+    if sys.platform == "win32":
+        candidates = ["dshow", "msmf"]
+    elif sys.platform.startswith("linux"):
+        candidates = ["v4l2"]
+    elif sys.platform == "darwin":
+        candidates = ["avfoundation"]
+    else:
+        candidates = []
+
+    compiled = _get_compiled_backends()
+    return ["auto", *(b for b in candidates if b in compiled)]
+
+
 def _cv2_backend_id(backend_name: str) -> Optional[int]:
     """Convert a backend name string to cv2 API preference constant."""
     return _CV2_BACKENDS.get(backend_name)
@@ -256,8 +377,20 @@ def _enumerate_cameras(backend_name: str = "auto") -> List[Dict[str, Any]]:
             cap.release()
             continue
 
-        width = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
-        height = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))
+        # Probe the camera's max supported mode by asking for an absurdly large
+        # frame size — DShow/MSMF/V4L2 clamp down to the highest available mode.
+        # If the probe is rejected (rare driver issue), fall back to the default
+        # mode that the camera reports immediately after open.
+        default_width = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
+        default_height = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))
+        try:
+            cap.set(cv2.CAP_PROP_FRAME_WIDTH, _PROBE_MAX_DIM)
+            cap.set(cv2.CAP_PROP_FRAME_HEIGHT, _PROBE_MAX_DIM)
+            width = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH)) or default_width
+            height = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT)) or default_height
+        except Exception as e:
+            logger.debug(f"Camera {i} max-resolution probe failed: {e}")
+            width, height = default_width, default_height
         fps = cap.get(cv2.CAP_PROP_FPS) or 30.0
 
         name = friendly_names.get(sequential_idx, f"Camera {sequential_idx}")
@@ -328,16 +461,28 @@ class CameraCaptureStream(CaptureStream):
             _active_cv2_indices.add(cv2_index)
 
         try:
-            # Open the camera
+            # Open the camera. MSMF's first open after a DShow session (or its
+            # very first cold open in the process) is timing-sensitive on
+            # Windows, so retry briefly before giving up.
             backend_id = _cv2_backend_id(backend_name)
-            if backend_id is not None:
-                self._cap = cv2.VideoCapture(cv2_index, backend_id)
-            else:
-                self._cap = cv2.VideoCapture(cv2_index)
+            attempts = 3 if backend_name == "msmf" else 1
+            self._cap = None
+            for attempt in range(attempts):
+                if backend_id is not None:
+                    cap = cv2.VideoCapture(cv2_index, backend_id)
+                else:
+                    cap = cv2.VideoCapture(cv2_index)
+                if cap.isOpened():
+                    self._cap = cap
+                    break
+                cap.release()
+                if attempt + 1 < attempts:
+                    time.sleep(0.5)
 
-            if not self._cap.isOpened():
+            if self._cap is None or not self._cap.isOpened():
                 raise RuntimeError(
-                    f"Failed to open camera {self.display_index} " f"(cv2 index {cv2_index})"
+                    f"Failed to open camera {self.display_index} "
+                    f"(cv2 index {cv2_index}, backend={backend_name})"
                 )
         except Exception:
             with _camera_lock:
@@ -346,12 +491,28 @@ class CameraCaptureStream(CaptureStream):
 
         self._cv2_index = cv2_index
 
-        # Apply optional resolution override
-        res_w = self.config.get("resolution_width", 0)
-        res_h = self.config.get("resolution_height", 0)
-        if res_w > 0 and res_h > 0:
-            self._cap.set(cv2.CAP_PROP_FRAME_WIDTH, res_w)
-            self._cap.set(cv2.CAP_PROP_FRAME_HEIGHT, res_h)
+        # Resolve effective resolution.
+        # Priority: legacy `resolution_width`/`resolution_height` (if both > 0)
+        #         → new `resolution` enum string (e.g. "1920x1080" or "auto")
+        #         → "auto" (open at the camera's max).
+        # On Windows DShow/MSMF the default opening mode is typically 640x480
+        # regardless of the camera's hardware ceiling, so when no explicit
+        # override is given we ask for the highest mode the device supports
+        # by setting an absurdly large frame size — drivers clamp down to the
+        # nearest supported mode.
+        legacy_w = self.config.get("resolution_width", 0) or 0
+        legacy_h = self.config.get("resolution_height", 0) or 0
+        if legacy_w > 0 and legacy_h > 0:
+            target_w, target_h = legacy_w, legacy_h
+        else:
+            parsed = _parse_resolution(self.config.get("resolution", "auto"))
+            if parsed is not None:
+                target_w, target_h = parsed
+            else:
+                target_w, target_h = _PROBE_MAX_DIM, _PROBE_MAX_DIM
+
+        self._cap.set(cv2.CAP_PROP_FRAME_WIDTH, target_w)
+        self._cap.set(cv2.CAP_PROP_FRAME_HEIGHT, target_h)
 
         # Test read
         ret, frame = self._cap.read()
@@ -434,10 +595,20 @@ class CameraEngine(CaptureEngine):
 
     @classmethod
     def get_default_config(cls) -> Dict[str, Any]:
+        # `resolution` is the user-facing control. Legacy numeric overrides
+        # `resolution_width`/`resolution_height` are still honored if present
+        # in stored configs (see CameraCaptureStream.initialize), but are no
+        # longer surfaced in the default config — the dropdown replaces them.
         return {
             "camera_backend": _get_default_backend(),
-            "resolution_width": 0,
-            "resolution_height": 0,
+            "resolution": "auto",
+        }
+
+    @classmethod
+    def get_config_choices(cls) -> Dict[str, List[str]]:
+        return {
+            "camera_backend": _get_supported_backends(),
+            "resolution": list(_RESOLUTION_CHOICES),
         }
 
     @classmethod

server/src/ledgrab/core/demo_seed.py

@@ -32,7 +32,6 @@ _PS_IDS = {
 
 _CSS_IDS = {
     "gradient": "css_demo0001",
-    "cycle": "css_demo0002",
     "picture": "css_demo0003",
     "audio": "css_demo0004",
 }
@@ -267,22 +266,6 @@ def _build_color_strip_sources() -> dict:
             "created_at": _NOW,
             "updated_at": _NOW,
         },
-        _CSS_IDS["cycle"]: {
-            "id": _CSS_IDS["cycle"],
-            "name": "Warm Color Cycle",
-            "source_type": "color_cycle",
-            "description": "Smoothly cycles through warm colors",
-            "clock_id": None,
-            "tags": ["demo"],
-            "colors": [
-                [255, 60, 0],
-                [255, 140, 0],
-                [255, 200, 50],
-                [255, 100, 20],
-            ],
-            "created_at": _NOW,
-            "updated_at": _NOW,
-        },
         _CSS_IDS["picture"]: {
             "id": _CSS_IDS["picture"],
             "name": "Screen Capture — Main Display",

server/src/ledgrab/core/devices/adalight_client.py

@@ -1,6 +1,7 @@
 """Adalight serial LED client — sends pixel data over serial using the Adalight protocol."""
 
 import asyncio
+import concurrent.futures
 from datetime import datetime, timezone
 from typing import Optional, Tuple
 
@@ -56,15 +57,38 @@ class AdalightClient(LEDClient):
 
         # Pre-compute Adalight header if led_count is known
         self._header = _build_adalight_header(led_count) if led_count > 0 else b""
+        self._header_len = len(self._header)
 
-        # Pre-allocate numpy buffer for brightness scaling
-        self._pixel_buf = None
+        # Pre-allocated wire buffer (header + RGB payload).  Resized on the
+        # first frame and reused thereafter so the hot path performs no
+        # allocations — only a single memcpy of the pixel bytes.
+        self._frame_buf: Optional[bytearray] = None
+        self._frame_buf_n: int = 0
+        # Scratch uint8 array used to coerce non-uint8 / non-contiguous input
+        # without allocating a fresh array per frame.
+        self._u8_scratch: Optional[np.ndarray] = None
+        self._u8_scratch_n: int = 0
+        # Dedicated single-worker executor for serial writes.  Using
+        # ``loop.run_in_executor`` against this avoids the per-call
+        # ``contextvars.copy_context()`` and ``functools.partial`` overhead
+        # that ``asyncio.to_thread`` incurs (~5–10 µs per call), and
+        # guarantees FIFO ordering of writes from this client even when
+        # other tasks are using the default executor.
+        self._tx_executor: Optional[concurrent.futures.ThreadPoolExecutor] = None
 
     async def connect(self) -> bool:
         """Open serial port and wait for Arduino reset."""
         try:
             self._serial = open_transport(self._port, baud_rate=self._baud_rate, timeout=1)
-            await asyncio.to_thread(self._serial.open)
+            # Single-worker executor — created here so the thread is bound
+            # to this client's lifecycle (started on connect, shut down on
+            # close).  ``thread_name_prefix`` makes it identifiable in
+            # diagnostics.
+            self._tx_executor = concurrent.futures.ThreadPoolExecutor(
+                max_workers=1,
+                thread_name_prefix=f"adalight-tx-{self._port}",
+            )
+            await asyncio.get_running_loop().run_in_executor(self._tx_executor, self._serial.open)
             # Wait for Arduino to finish bootloader reset (non-blocking).
             # USB-to-TTL adapters without DTR don't reset, but the delay
             # is harmless on those — keeps the path uniform.
@@ -77,11 +101,22 @@ class AdalightClient(LEDClient):
             return True
         except Exception as e:
             logger.error(f"Failed to open serial port {self._port}: {e}")
+            if self._tx_executor is not None:
+                self._tx_executor.shutdown(wait=False)
+                self._tx_executor = None
             raise RuntimeError(f"Failed to open serial port {self._port}: {e}")
 
     async def close(self) -> None:
         """Send black frame and close the serial port."""
-        if self._connected and self._serial and self._serial.is_open and self._led_count > 0:
+        loop = asyncio.get_running_loop()
+        executor = self._tx_executor
+        if (
+            self._connected
+            and self._serial
+            and self._serial.is_open
+            and self._led_count > 0
+            and executor is not None
+        ):
             try:
                 black = np.zeros((self._led_count, 3), dtype=np.uint8)
                 frame = self._build_frame(black, brightness=255)
@@ -89,8 +124,8 @@ class AdalightClient(LEDClient):
                     f"Adalight sending black frame: {self._port} "
                     f"({self._led_count} LEDs, {len(frame)} bytes)"
                 )
-                await asyncio.to_thread(self._serial.write, frame)
-                await asyncio.to_thread(self._serial.flush)
+                await loop.run_in_executor(executor, self._serial.write, frame)
+                await loop.run_in_executor(executor, self._serial.flush)
                 logger.info(f"Adalight black frame sent and flushed: {self._port}")
             except Exception as e:
                 logger.warning(f"Failed to send black frame on close: {e}")
@@ -108,6 +143,9 @@ class AdalightClient(LEDClient):
             except Exception as e:
                 logger.warning(f"Error closing serial port: {e}")
         self._serial = None
+        if self._tx_executor is not None:
+            self._tx_executor.shutdown(wait=False)
+            self._tx_executor = None
         logger.info(f"Adalight disconnected: {self._port}")
 
     @property
@@ -125,12 +163,15 @@ class AdalightClient(LEDClient):
             pixels: numpy array (N, 3) uint8 or list of (R, G, B) tuples
             brightness: Global brightness (0-255)
         """
-        if not self.is_connected:
+        executor = self._tx_executor
+        if not self.is_connected or executor is None:
             return False
 
         try:
             frame = self._build_frame(pixels, brightness)
-            await asyncio.to_thread(self._serial.write, frame)
+            # ``run_in_executor`` skips the per-call ``contextvars.copy_context``
+            # / ``functools.partial`` overhead that ``asyncio.to_thread`` does.
+            await asyncio.get_running_loop().run_in_executor(executor, self._serial.write, frame)
             return True
         except Exception as e:
             logger.error(f"Adalight send_pixels error: {e}")
@@ -141,17 +182,63 @@ class AdalightClient(LEDClient):
         # Serial write is blocking — use async send_pixels path instead
         return False
 
-    def _build_frame(self, pixels, brightness: int) -> bytes:
-        """Build a complete Adalight frame: header + brightness-scaled RGB data."""
-        if isinstance(pixels, np.ndarray):
-            arr = pixels.astype(np.uint16)
-        else:
-            arr = np.array(pixels, dtype=np.uint16)
+    def _ensure_frame_buf(self, n_leds: int) -> None:
+        """Lazily allocate / resize the wire-format frame buffer.
 
-        # Note: brightness already applied by processor loop (_cached_brightness)
-        np.clip(arr, 0, 255, out=arr)
-        rgb_bytes = arr.astype(np.uint8).tobytes()
-        return self._header + rgb_bytes
+        Header bytes are written once at the front; subsequent calls only
+        memcpy the pixel payload into the trailing slot.
+        """
+        needed = self._header_len + n_leds * 3
+        if self._frame_buf is None or len(self._frame_buf) != needed:
+            buf = bytearray(needed)
+            buf[: self._header_len] = self._header
+            self._frame_buf = buf
+            self._frame_buf_n = n_leds
+
+    def _ensure_u8_scratch(self, n_leds: int) -> np.ndarray:
+        """Pre-allocated (N, 3) uint8 scratch for non-conforming inputs."""
+        if self._u8_scratch is None or self._u8_scratch_n != n_leds:
+            self._u8_scratch = np.empty((n_leds, 3), dtype=np.uint8)
+            self._u8_scratch_n = n_leds
+        return self._u8_scratch
+
+    def _build_frame(self, pixels, brightness: int) -> bytes:
+        """Build a complete Adalight frame in the pre-allocated wire buffer.
+
+        The processor loop hands us a contiguous (N, 3) uint8 array with
+        brightness already applied (see ``_cached_brightness``), so the hot
+        path is one memcpy from the pixel buffer into the trailing slot of
+        ``_frame_buf``.  All other input shapes (lists of tuples, wrong
+        dtype, non-contiguous views) coerce into a pre-allocated uint8
+        scratch before the memcpy — still allocation-free in steady state.
+        """
+        if isinstance(pixels, np.ndarray):
+            n_leds = pixels.shape[0]
+            if pixels.dtype == np.uint8 and pixels.flags["C_CONTIGUOUS"]:
+                # Hot path: input matches wire format exactly.
+                arr = pixels
+            else:
+                # Slow path: dtype mismatch or non-contiguous view.  Coerce
+                # into a pre-allocated uint8 scratch.  Wider integer dtypes
+                # are clamped to [0, 255] to match historical behaviour.
+                arr = self._ensure_u8_scratch(n_leds)
+                if pixels.dtype != np.uint8:
+                    # Clamp wider integer dtypes to [0, 255] before the
+                    # uint8 narrowing copy.  This is the rare slow path —
+                    # one extra allocation here is fine.
+                    np.copyto(arr, np.clip(pixels, 0, 255), casting="unsafe")
+                else:
+                    np.copyto(arr, pixels)
+        else:
+            # List/tuple input — rare path, only hit by tests/legacy callers.
+            arr = np.array(pixels, dtype=np.uint8)
+            n_leds = arr.shape[0]
+
+        self._ensure_frame_buf(n_leds)
+        # memcpy pixel bytes into the trailing slot of the pre-built buffer
+        view = memoryview(self._frame_buf)
+        view[self._header_len :] = memoryview(arr).cast("B")
+        return self._frame_buf
 
     @classmethod
     async def check_health(

server/src/ledgrab/core/devices/ddp_client.py

@@ -39,6 +39,9 @@ class DDPClient:
     DDP_FLAGS_PUSH = 0x01  # PUSH flag (set on last packet of a frame)
     DDP_TYPE_RGB = 0x01
 
+    # Pre-built struct.Struct for the 10-byte DDP header (avoids per-call format parsing)
+    _HEADER_STRUCT = struct.Struct("!BBB B I H")
+
     def __init__(self, host: str, port: int = DDP_PORT, rgbw: bool = False):
         """Initialize DDP client.
 
@@ -57,6 +60,10 @@ class DDPClient:
         # Pre-allocated RGBW buffer (resized on demand)
         self._rgbw_buf: Optional[np.ndarray] = None
         self._rgbw_buf_n: int = 0
+        # Pre-allocated send buffer (header + payload). Sized lazily on first
+        # send so we never allocate fresh bytes per frame on the hot path.
+        self._send_buf: Optional[bytearray] = None
+        self._send_view: Optional[memoryview] = None
 
     async def connect(self):
         """Establish UDP connection."""
@@ -93,52 +100,52 @@ class DDPClient:
                 f"color order={order_name.get(bus.color_order, '?')} ({bus.color_order})"
             )
 
-    def _build_ddp_packet(
-        self,
-        rgb_data: bytes,
-        offset: int = 0,
-        sequence: int = 1,
-        push: bool = False,
-    ) -> bytes:
-        """Build a DDP packet.
+    def _ensure_send_buf(self, capacity: int) -> None:
+        """Lazily allocate / grow the per-instance send buffer.
 
-        DDP packet format (10-byte header + data):
-        - Byte 0: Flags (VER1 | PUSH on last packet)
-        - Byte 1: Sequence number
-        - Byte 2: Data type (0x01 = RGB)
-        - Byte 3: Source/Destination ID
-        - Bytes 4-7: Data offset (4 bytes, big-endian)
-        - Bytes 8-9: Data length (2 bytes, big-endian)
-        - Bytes 10+: Pixel data
-
-        Args:
-            rgb_data: RGB pixel data as bytes
-            offset: Byte offset (pixel_index * 3)
-            sequence: Sequence number (0-255)
-            push: True for the last packet of a frame
-
-        Returns:
-            Complete DDP packet as bytes
+        ``capacity`` is the largest packet we may emit (header + payload).
+        Once sized, the buffer is reused for every subsequent send so the
+        hot path stays allocation-free.
         """
-        flags = self.DDP_FLAGS_VER1
-        if push:
-            flags |= self.DDP_FLAGS_PUSH
-        data_type = self.DDP_TYPE_RGB
-        source_id = 0x01
-        data_len = len(rgb_data)
+        buf = self._send_buf
+        if buf is None or len(buf) < capacity:
+            self._send_buf = bytearray(capacity)
+            self._send_view = memoryview(self._send_buf)
 
-        # Build header (10 bytes)
-        header = struct.pack(
-            "!BBB B I H",  # Network byte order (big-endian)
-            flags,  # Flags
-            sequence,  # Sequence
-            data_type,  # Data type
-            source_id,  # Source/Destination
-            offset,  # Data offset (4 bytes)
-            data_len,  # Data length (2 bytes)
+    def _emit_packet(
+        self,
+        payload: memoryview,
+        offset: int,
+        sequence: int,
+        push: bool,
+    ) -> None:
+        """Pack header + payload into the pre-allocated send buffer and emit.
+
+        DDP packet layout (10-byte header):
+            [0]   Flags (VER1 | PUSH on last)
+            [1]   Sequence
+            [2]   Data type (0x01 = RGB)
+            [3]   Source/Destination ID
+            [4-7] Data offset (big-endian)
+            [8-9] Data length (big-endian)
+            [10+] Pixel data
+        """
+        flags = self.DDP_FLAGS_VER1 | (self.DDP_FLAGS_PUSH if push else 0)
+        data_len = len(payload)
+        self._ensure_send_buf(10 + data_len)
+        buf = self._send_buf
+        view = self._send_view
+        # Fill header into pre-allocated buffer (no allocation)
+        self._HEADER_STRUCT.pack_into(
+            buf, 0, flags, sequence, self.DDP_TYPE_RGB, 0x01, offset, data_len
         )
-
-        return header + rgb_data
+        # Copy payload bytes into buffer (single memcpy)
+        view[10 : 10 + data_len] = payload
+        # asyncio's selector_datagram_transport.sendto fast-path calls
+        # socket.sendto(data) which accepts a buffer-like; it only copies to
+        # bytes when the OS send buffer is full and the datagram must be
+        # queued. So passing a memoryview is safe and avoids `bytes(...)`.
+        self._transport.sendto(view[: 10 + data_len])
 
     def _reorder_pixels_numpy(self, pixel_array: np.ndarray) -> np.ndarray:
         """Apply per-bus color order reordering using numpy fancy indexing.
@@ -168,13 +175,39 @@ class DDPClient:
 
         return result
 
+    def _send_buffer(self, payload_view: memoryview, bpp: int, max_packet_size: int) -> int:
+        """Chunk and emit a contiguous payload via DDP. Returns packet count.
+
+        ``payload_view`` is a 1-D bytes-like view; the caller guarantees its
+        length is a multiple of ``bpp``.  Each emitted packet is sized to a
+        whole number of pixels so RGB channels never split across packets.
+        """
+        total_bytes = len(payload_view)
+        max_payload = max_packet_size - 10  # 10-byte header
+        bytes_per_packet = (max_payload // bpp) * bpp
+        if bytes_per_packet <= 0:
+            bytes_per_packet = bpp  # degenerate guard
+
+        num_packets = (total_bytes + bytes_per_packet - 1) // bytes_per_packet
+        for i in range(num_packets):
+            start = i * bytes_per_packet
+            end = total_bytes if (i == num_packets - 1) else (start + bytes_per_packet)
+            self._sequence = (self._sequence + 1) % 256
+            self._emit_packet(
+                payload_view[start:end],
+                offset=start,
+                sequence=self._sequence,
+                push=(i == num_packets - 1),
+            )
+        return num_packets
+
     async def send_pixels(
         self, pixels: List[Tuple[int, int, int]], max_packet_size: int = 1400
     ) -> bool:
         """Send pixel data via DDP.
 
         Args:
-            pixels: List of (R, G, B) tuples
+            pixels: List of (R, G, B) tuples or an (N, 3) uint8 numpy array
             max_packet_size: Maximum UDP packet size (default 1400 bytes for safety)
 
         Returns:
@@ -187,65 +220,17 @@ class DDPClient:
             raise RuntimeError("DDP client not connected")
 
         try:
-            # Send plain RGB — WLED handles per-bus color order conversion
-            # internally when outputting to hardware.
             # Accept numpy arrays directly to avoid per-pixel Python loop
-            bpp = 4 if self.rgbw else 3  # bytes per pixel
             if isinstance(pixels, np.ndarray):
                 pixel_array = pixels
             else:
                 pixel_array = np.array(pixels, dtype=np.uint8)
-            if self.rgbw:
-                n = pixel_array.shape[0]
-                if n != self._rgbw_buf_n:
-                    self._rgbw_buf = np.zeros((n, 4), dtype=np.uint8)
-                    self._rgbw_buf_n = n
-                self._rgbw_buf[:, :3] = pixel_array
-                pixel_array = self._rgbw_buf
-            pixel_bytes = pixel_array.tobytes()
-
-            total_bytes = len(pixel_bytes)
-            # Align payload to full pixels (multiple of bpp) to avoid splitting
-            # a pixel's channels across packets
-            max_payload = max_packet_size - 10  # 10-byte header
-            bytes_per_packet = (max_payload // bpp) * bpp
-
-            # Split into multiple packets if needed
-            num_packets = (total_bytes + bytes_per_packet - 1) // bytes_per_packet
-
-            logger.debug(
-                f"DDP: Sending {len(pixels)} pixels ({total_bytes} bytes) "
-                f"in {num_packets} packet(s) to {self.host}:{self.port}"
-            )
-
-            for i in range(num_packets):
-                start = i * bytes_per_packet
-                end = min(start + bytes_per_packet, total_bytes)
-                chunk = pixel_bytes[start:end]
-                is_last = i == num_packets - 1
-
-                # Increment sequence number
-                self._sequence = (self._sequence + 1) % 256
-
-                # Set PUSH flag on the last packet to signal frame completion
-                packet = self._build_ddp_packet(
-                    chunk,
-                    offset=start,
-                    sequence=self._sequence,
-                    push=is_last,
-                )
-                self._transport.sendto(packet)
-
-                logger.debug(
-                    f"Sent DDP packet {i+1}/{num_packets}: "
-                    f"{len(chunk)} bytes at offset {start}"
-                    f"{' [PUSH]' if is_last else ''}"
-                )
 
+            self.send_pixels_numpy(pixel_array, max_packet_size=max_packet_size)
             return True
 
         except Exception as e:
-            logger.error(f"Failed to send DDP pixels: {e}")
+            logger.error("Failed to send DDP pixels: %s", e)
             raise RuntimeError(f"DDP send failed: {e}")
 
     def send_pixels_numpy(self, pixel_array: np.ndarray, max_packet_size: int = 1400) -> bool:
@@ -270,28 +255,15 @@ class DDPClient:
             self._rgbw_buf[:, :3] = pixel_array
             pixel_array = self._rgbw_buf
 
-        pixel_bytes = pixel_array.tobytes()
-
         bpp = 4 if self.rgbw else 3
-        total_bytes = len(pixel_bytes)
-        max_payload = max_packet_size - 10  # 10-byte header
-        bytes_per_packet = (max_payload // bpp) * bpp
-        num_packets = (total_bytes + bytes_per_packet - 1) // bytes_per_packet
-
-        for i in range(num_packets):
-            start = i * bytes_per_packet
-            end = min(start + bytes_per_packet, total_bytes)
-            chunk = pixel_bytes[start:end]
-            is_last = i == num_packets - 1
-            self._sequence = (self._sequence + 1) % 256
-            packet = self._build_ddp_packet(
-                chunk,
-                offset=start,
-                sequence=self._sequence,
-                push=is_last,
-            )
-            self._transport.sendto(packet)
-
+        # Get a 1-D bytes view of the pixel buffer with no allocation when
+        # the array is already C-contiguous (the common case).
+        if not pixel_array.flags["C_CONTIGUOUS"]:
+            pixel_array = np.ascontiguousarray(pixel_array)
+        # ``cast('B')`` on a memoryview of a numpy array returns a 1-D byte
+        # view; total length == nbytes.
+        payload_view = memoryview(pixel_array).cast("B")
+        self._send_buffer(payload_view, bpp, max_packet_size)
         return True
 
     async def __aenter__(self):

server/src/ledgrab/core/devices/discovery_watcher.py

@@ -0,0 +1,273 @@
+"""Background discovery watcher — long-running mDNS browser + serial port poller.
+
+Existing per-target health monitoring (``DeviceHealthMixin``) already fires
+``device_health_changed`` events when *configured* devices flip online/offline.
+This module is the complementary half: it watches for *new* devices appearing
+on the LAN/USB (and old discovered-but-never-configured ones disappearing) and
+emits ``device_discovered`` / ``device_lost`` events on the same event bus.
+
+Design notes
+------------
+- The mDNS browser is kept alive for the process lifetime (one ``AsyncZeroconf``
+  + ``AsyncServiceBrowser``), which is the entire point of "background discovery".
+  The on-demand scan in ``WLEDDeviceProvider.discover`` is unchanged — that one
+  spins up its own short-lived browser for the Add Device modal.
+- Serial-port hotplug has no equivalent of mDNS push, so we poll
+  :func:`list_serial_ports` every 10 s. Cheap on desktop (one Windows API call),
+  no-op on Android (handled separately by Kotlin USB receivers).
+- Already-configured devices (matched by URL or MAC against ``device_store``)
+  are intentionally suppressed from the discovery stream — those are covered by
+  the health-monitor's online/offline events and would otherwise notify twice
+  per device on startup.
+
+The watcher is purely an event source; pref-driven snack/OS-toast routing
+happens client-side in ``features/notifications-watcher.ts``.
+"""
+
+from __future__ import annotations
+
+import asyncio
+import time
+from dataclasses import dataclass
+from typing import TYPE_CHECKING, Callable, Dict, Optional
+
+from zeroconf import ServiceStateChange
+from zeroconf.asyncio import AsyncServiceBrowser, AsyncServiceInfo, AsyncZeroconf
+
+from ledgrab.core.devices.serial_transport import list_serial_ports
+from ledgrab.core.devices.wled_provider import WLED_MDNS_TYPE
+from ledgrab.utils import get_logger
+from ledgrab.utils.platform import is_android
+
+if TYPE_CHECKING:
+    from ledgrab.storage.device_store import DeviceStore
+
+logger = get_logger(__name__)
+
+# Poll interval for serial-port enumeration. Cheap on desktop; skipped on Android.
+_SERIAL_POLL_INTERVAL_SEC = 10.0
+
+
+@dataclass(frozen=True)
+class _DiscoveredEntry:
+    """A device the watcher has seen at least once.
+
+    Two snapshots are compared each cycle (mDNS by service name, serial by
+    device path) to detect appearances vs. disappearances; the URL is what
+    we cross-reference against ``device_store`` to know if the device is
+    already configured.
+    """
+
+    key: str
+    url: str
+    name: str
+    device_type: str  # "wled" | "serial"
+
+
+FireEvent = Callable[[dict], None]
+
+
+class DiscoveryWatcher:
+    """Continuously scan for new WLED/serial devices and emit events."""
+
+    def __init__(self, device_store: "DeviceStore", fire_event: FireEvent) -> None:
+        self._device_store = device_store
+        self._fire_event = fire_event
+
+        self._aiozc: Optional[AsyncZeroconf] = None
+        self._browser: Optional[AsyncServiceBrowser] = None
+        self._serial_task: Optional[asyncio.Task] = None
+        self._running = False
+        self._started_at: float = 0.0
+
+        # service-name -> entry. mDNS state-change callback runs on the
+        # asyncio thread so no lock is needed; Python attr writes are atomic.
+        self._wled_seen: Dict[str, _DiscoveredEntry] = {}
+        # device-path -> entry. Only the serial poller mutates this.
+        self._serial_seen: Dict[str, _DiscoveredEntry] = {}
+
+    # --- lifecycle --------------------------------------------------------
+
+    async def start(self) -> None:
+        if self._running:
+            return
+        self._running = True
+        self._started_at = time.monotonic()
+
+        # mDNS browser — kept alive for the whole process. The handler is sync
+        # (zeroconf calls it via call_soon on our loop), but resolves run in a
+        # short-lived task to avoid blocking the dispatcher.
+        try:
+            self._aiozc = AsyncZeroconf()
+            self._browser = AsyncServiceBrowser(
+                self._aiozc.zeroconf,
+                WLED_MDNS_TYPE,
+                handlers=[self._on_wled_state_change],
+            )
+            logger.info("Discovery watcher: mDNS browser started for %s", WLED_MDNS_TYPE)
+        except Exception as e:
+            # Don't let a zeroconf failure (firewall, multiple-host, etc.)
+            # prevent the rest of the server from coming up.
+            logger.error("Discovery watcher: failed to start mDNS browser: %s", e)
+            self._aiozc = None
+            self._browser = None
+
+        # Serial poller — only on desktop. On Android, USB hotplug is delivered
+        # through Kotlin receivers, not by polling pyserial.
+        if not is_android():
+            self._serial_task = asyncio.create_task(self._serial_poll_loop())
+
+    async def stop(self) -> None:
+        self._running = False
+
+        if self._serial_task is not None:
+            self._serial_task.cancel()
+            try:
+                await self._serial_task
+            except (asyncio.CancelledError, Exception):
+                pass
+            self._serial_task = None
+
+        if self._browser is not None:
+            try:
+                await self._browser.async_cancel()
+            except Exception as e:
+                logger.debug("Discovery watcher: browser cancel error: %s", e)
+            self._browser = None
+
+        if self._aiozc is not None:
+            try:
+                await self._aiozc.async_close()
+            except Exception as e:
+                logger.debug("Discovery watcher: zeroconf close error: %s", e)
+            self._aiozc = None
+
+        logger.info("Discovery watcher stopped")
+
+    # --- mDNS -------------------------------------------------------------
+
+    def _on_wled_state_change(self, **kwargs) -> None:
+        """zeroconf state-change handler. Runs on the asyncio thread."""
+        state_change = kwargs.get("state_change")
+        service_type = kwargs.get("service_type", "")
+        name = kwargs.get("name", "")
+
+        if state_change in (ServiceStateChange.Added, ServiceStateChange.Updated):
+            # Resolve in a task — async_request blocks the handler if awaited
+            # synchronously and we don't want to stall mDNS dispatch.
+            asyncio.create_task(self._resolve_wled(service_type, name))
+        elif state_change == ServiceStateChange.Removed:
+            entry = self._wled_seen.pop(name, None)
+            if entry is not None and not self._is_configured(entry.url):
+                self._emit("device_lost", entry)
+
+    async def _resolve_wled(self, service_type: str, name: str) -> None:
+        if self._aiozc is None:
+            return
+        info = AsyncServiceInfo(service_type, name)
+        try:
+            await info.async_request(self._aiozc.zeroconf, timeout=2000)
+        except Exception as e:
+            logger.debug("Discovery watcher: resolve failed for %s: %s", name, e)
+            return
+
+        addrs = info.parsed_addresses()
+        if not addrs:
+            return
+        ip = addrs[0]
+        port = info.port or 80
+        url = f"http://{ip}" if port == 80 else f"http://{ip}:{port}"
+        service_name = name.replace(f".{service_type}", "")
+
+        entry = _DiscoveredEntry(
+            key=name,
+            url=url,
+            name=service_name,
+            device_type="wled",
+        )
+
+        first_sight = name not in self._wled_seen
+        self._wled_seen[name] = entry
+
+        if first_sight and not self._is_configured(url):
+            self._emit("device_discovered", entry)
+
+    # --- serial -----------------------------------------------------------
+
+    async def _serial_poll_loop(self) -> None:
+        """Detect serial-port appearances/disappearances on a fixed interval."""
+        try:
+            # Seed without notifying — ports already plugged in when the server
+            # starts shouldn't generate "new device" toasts on every boot.
+            for port in list_serial_ports():
+                url = port.device
+                self._serial_seen[url] = _DiscoveredEntry(
+                    key=url,
+                    url=url,
+                    name=port.description,
+                    device_type="serial",
+                )
+
+            while self._running:
+                await asyncio.sleep(_SERIAL_POLL_INTERVAL_SEC)
+                if not self._running:
+                    break
+                self._poll_serial_once()
+        except asyncio.CancelledError:
+            pass
+        except Exception as e:
+            logger.error("Discovery watcher: serial loop crashed: %s", e)
+
+    def _poll_serial_once(self) -> None:
+        try:
+            current = {p.device: p for p in list_serial_ports()}
+        except Exception as e:
+            logger.debug("Discovery watcher: serial enumeration failed: %s", e)
+            return
+
+        # Appeared
+        for device, port in current.items():
+            if device in self._serial_seen:
+                continue
+            entry = _DiscoveredEntry(
+                key=device,
+                url=device,
+                name=port.description,
+                device_type="serial",
+            )
+            self._serial_seen[device] = entry
+            if not self._is_configured(device):
+                self._emit("device_discovered", entry)
+
+        # Disappeared
+        for device in list(self._serial_seen.keys()):
+            if device in current:
+                continue
+            entry = self._serial_seen.pop(device)
+            if not self._is_configured(entry.url):
+                self._emit("device_lost", entry)
+
+    # --- helpers ----------------------------------------------------------
+
+    def _is_configured(self, url: str) -> bool:
+        """True when the URL matches a device already in the user's store."""
+        try:
+            for device in self._device_store.get_all_devices():
+                if device.url and device.url.rstrip("/") == url.rstrip("/"):
+                    return True
+        except Exception as e:
+            logger.debug("Discovery watcher: device store lookup failed: %s", e)
+        return False
+
+    def _emit(self, event_type: str, entry: _DiscoveredEntry) -> None:
+        try:
+            self._fire_event(
+                {
+                    "type": event_type,
+                    "device_type": entry.device_type,
+                    "url": entry.url,
+                    "name": entry.name,
+                }
+            )
+        except Exception as e:
+            logger.debug("Discovery watcher: fire_event failed: %s", e)

server/src/ledgrab/core/processing/api_input_stream.py

@@ -148,23 +148,37 @@ class ApiInputColorStripStream(ColorStripStream):
         """Apply segment-based color updates to the buffer.
 
         Each segment defines a range and fill mode. Segments are applied in
-        order (last wins on overlap). The buffer is auto-grown if needed.
+        order (last wins on overlap).
+
+        ``start`` and ``length`` are optional: ``start`` defaults to 0,
+        ``length`` defaults to ``led_count - start`` (i.e. the remainder of
+        the strip). The buffer is only auto-grown for segments that supply
+        an explicit ``length`` extending past the current end — implicit
+        "to the end" segments adapt to whatever the current strip size is.
 
         Args:
             segments: list of dicts with keys:
-                start  (int)  – starting LED index
-                length (int)  – number of LEDs in segment
-                mode   (str)  – "solid" | "per_pixel" | "gradient"
-                color  (list) – [R,G,B] for solid mode
-                colors (list) – [[R,G,B], ...] for per_pixel/gradient
+                start  (int, optional) – starting LED index (default 0)
+                length (int, optional) – number of LEDs in segment
+                                         (default = led_count - start)
+                mode   (str)           – "solid" | "per_pixel" | "gradient"
+                color  (list)          – [R,G,B] for solid mode
+                colors (list)          – [[R,G,B], ...] for per_pixel/gradient
         """
-        # Compute required buffer size from all segments
-        max_index = max(seg["start"] + seg["length"] for seg in segments)
+        # Compute required buffer size from segments that supply an explicit
+        # length. Segments without a length take the strip as-is and so do
+        # not trigger growth.
+        explicit_max = 0
+        for seg in segments:
+            seg_start = seg.get("start") or 0
+            seg_len = seg.get("length")
+            if seg_len is not None:
+                explicit_max = max(explicit_max, seg_start + seg_len)
 
         with self._lock:
-            # Auto-grow buffer if needed
-            if max_index > self._led_count:
-                self._ensure_capacity(max_index)
+            # Auto-grow buffer if any explicit segment extends past current end
+            if explicit_max > self._led_count:
+                self._ensure_capacity(explicit_max)
 
             # Start from current buffer (or fallback if timed out)
             if self._timed_out:
@@ -173,8 +187,12 @@ class ApiInputColorStripStream(ColorStripStream):
                 buf = self._colors.copy()
 
             for seg in segments:
-                start = seg["start"]
-                length = seg["length"]
+                seg_start = seg.get("start")
+                start = 0 if seg_start is None else seg_start
+                seg_len = seg.get("length")
+                length = max(0, self._led_count - start) if seg_len is None else seg_len
+                if length <= 0:
+                    continue
                 mode = seg["mode"]
                 end = start + length
 

server/src/ledgrab/core/processing/color_strip/__init__.py

@@ -6,7 +6,6 @@ via the shim module ``color_strip_stream.py``.
 """
 
 from .base import ColorStripStream, _SimpleNoise1D, _gradient_noise
-from .cycle import ColorCycleColorStripStream
 from .gradient import GradientColorStripStream
 from .helpers import _compute_gradient_colors
 from .picture import PictureColorStripStream
@@ -16,7 +15,6 @@ __all__ = [
     "ColorStripStream",
     "PictureColorStripStream",
     "StaticColorStripStream",
-    "ColorCycleColorStripStream",
     "GradientColorStripStream",
     "_compute_gradient_colors",
     "_SimpleNoise1D",

server/src/ledgrab/core/processing/color_strip/base.py

@@ -45,6 +45,19 @@ class ColorStripStream(ABC):
     def target_fps(self) -> int:
         """Target processing rate."""
 
+    @property
+    def actual_fps(self) -> Optional[float]:
+        """Measured rate of *new* frames the stream is delivering, or ``None``.
+
+        Only streams backed by an external capture (screen, audio device, API
+        push) implement this — the value answers "is the upstream actually
+        keeping up?". Synthetic streams (gradient/static/cycle/effect/...)
+        always tick at their `target_fps` by construction, so reporting an
+        actual rate would just duplicate `target_fps` without diagnostic
+        value; they keep the default ``None``.
+        """
+        return None
+
     @property
     @abstractmethod
     def led_count(self) -> int:

server/src/ledgrab/core/processing/color_strip/cycle.py

@@ -1,185 +0,0 @@
-"""Color cycle stream — smoothly cycles through user-defined colors."""
-
-import threading
-import time
-from typing import Optional
-
-import numpy as np
-
-from ledgrab.utils import get_logger
-from ledgrab.utils.frame_limiter import FrameLimiter
-from ledgrab.utils.timer import high_resolution_timer
-
-from .base import ColorStripStream
-
-logger = get_logger(__name__)
-
-
-class ColorCycleColorStripStream(ColorStripStream):
-    """Color strip stream that smoothly cycles through a user-defined color list.
-
-    All LEDs receive the same solid color at any moment, continuously interpolating
-    between the configured colors in a loop.
-
-    LED count auto-sizes from the connected device when led_count == 0 in
-    the source config; configure(device_led_count) is called by
-    WledTargetProcessor on start.
-    """
-
-    def __init__(self, source):
-        self._colors_lock = threading.Lock()
-        self._running = False
-        self._thread: Optional[threading.Thread] = None
-        self._fps = 30
-        self._frame_time = 1.0 / 30
-        self._clock = None  # optional SyncClockRuntime
-        self._update_from_source(source)
-
-    def _update_from_source(self, source) -> None:
-        raw = source.colors if isinstance(source.colors, list) else []
-        default = [
-            [255, 0, 0],
-            [255, 255, 0],
-            [0, 255, 0],
-            [0, 255, 255],
-            [0, 0, 255],
-            [255, 0, 255],
-        ]
-        self._color_list = [c for c in raw if isinstance(c, list) and len(c) == 3] or default
-        _lc = getattr(source, "led_count", 0)
-        self._auto_size = not _lc
-        self._led_count = _lc if _lc > 0 else 1
-        self._rebuild_colors()
-
-    def _rebuild_colors(self) -> None:
-        pixel = np.array(self._color_list[0], dtype=np.uint8)
-        colors = np.tile(pixel, (self._led_count, 1))
-        with self._colors_lock:
-            self._colors = colors
-
-    def configure(self, device_led_count: int) -> None:
-        """Size to device LED count when led_count was 0 (auto-size)."""
-        if self._auto_size and device_led_count > 0 and device_led_count != self._led_count:
-            self._led_count = device_led_count
-            self._rebuild_colors()
-            logger.debug(f"ColorCycleColorStripStream auto-sized to {device_led_count} LEDs")
-
-    @property
-    def target_fps(self) -> int:
-        return self._fps
-
-    @property
-    def led_count(self) -> int:
-        return self._led_count
-
-    def set_capture_fps(self, fps: int) -> None:
-        """Update animation loop rate. Thread-safe (read atomically by the loop)."""
-        fps = max(1, min(90, fps))
-        self._fps = fps
-        self._frame_time = 1.0 / fps
-
-    def start(self) -> None:
-        if self._running:
-            return
-        self._running = True
-        self._thread = threading.Thread(
-            target=self._animate_loop,
-            name="css-color-cycle",
-            daemon=True,
-        )
-        self._thread.start()
-        logger.info(
-            f"ColorCycleColorStripStream started (leds={self._led_count}, colors={len(self._color_list)})"
-        )
-
-    def stop(self) -> None:
-        self._running = False
-        if self._thread:
-            self._thread.join(timeout=5.0)
-            if self._thread.is_alive():
-                logger.warning(
-                    "ColorCycleColorStripStream animate thread did not terminate within 5s"
-                )
-            self._thread = None
-        logger.info("ColorCycleColorStripStream stopped")
-
-    def get_latest_colors(self) -> Optional[np.ndarray]:
-        with self._colors_lock:
-            return self._colors
-
-    def update_source(self, source) -> None:
-        from ledgrab.storage.color_strip_source import ColorCycleColorStripSource
-
-        if isinstance(source, ColorCycleColorStripSource):
-            prev_led_count = self._led_count if self._auto_size else None
-            self._update_from_source(source)
-            if prev_led_count and self._auto_size:
-                self._led_count = prev_led_count
-                self._rebuild_colors()
-            logger.info("ColorCycleColorStripStream params updated in-place")
-
-    def set_clock(self, clock) -> None:
-        """Set or clear the sync clock runtime. Thread-safe (read atomically by loop)."""
-        self._clock = clock
-
-    def _animate_loop(self) -> None:
-        """Background thread: interpolate between colors at target fps.
-
-        Uses double-buffered output arrays to avoid per-frame allocations.
-        """
-        _pool_n = 0
-        _buf_a = _buf_b = None
-        _use_a = True
-
-        limiter = FrameLimiter(self._fps)
-
-        try:
-            with high_resolution_timer():
-                while self._running:
-                    limiter.begin()
-                    wall_start = time.perf_counter()
-                    frame_time = self._frame_time
-                    try:
-                        color_list = self._color_list
-                        clock = self._clock
-                        if clock:
-                            if not clock.is_running:
-                                time.sleep(0.1)
-                                continue
-                            speed = clock.speed
-                            t = clock.get_time()
-                        else:
-                            speed = 1.0
-                            t = wall_start
-                        n = self._led_count
-                        num = len(color_list)
-                        if num >= 2:
-                            if n != _pool_n:
-                                _pool_n = n
-                                _buf_a = np.empty((n, 3), dtype=np.uint8)
-                                _buf_b = np.empty((n, 3), dtype=np.uint8)
-
-                            buf = _buf_a if _use_a else _buf_b
-                            _use_a = not _use_a
-
-                            # 0.05 factor → one full cycle every 20s at speed=1.0
-                            cycle_pos = (speed * t * 0.05) % 1.0
-                            seg = cycle_pos * num
-                            idx = int(seg) % num
-                            t_i = seg - int(seg)
-                            c1 = color_list[idx]
-                            c2 = color_list[(idx + 1) % num]
-                            buf[:] = (
-                                min(255, int(c1[0] + (c2[0] - c1[0]) * t_i)),
-                                min(255, int(c1[1] + (c2[1] - c1[1]) * t_i)),
-                                min(255, int(c1[2] + (c2[2] - c1[2]) * t_i)),
-                            )
-                            with self._colors_lock:
-                                self._colors = buf
-                    except Exception as e:
-                        logger.error(f"ColorCycleColorStripStream animation error: {e}")
-                    limiter.wait(frame_time)
-        except Exception as e:
-            logger.error(f"Fatal ColorCycleColorStripStream loop error: {e}", exc_info=True)
-        finally:
-            self._running = False

server/src/ledgrab/core/processing/color_strip/picture.py

@@ -2,6 +2,7 @@
 
 import threading
 import time
+from collections import deque
 from typing import Optional
 
 import numpy as np
@@ -72,6 +73,15 @@ class PictureColorStripStream(ColorStripStream):
         self._thread: Optional[threading.Thread] = None
         self._last_timing: dict = {}
 
+        # Rolling 1s window of timestamps for *new* frames received from
+        # the live stream. `len(...)` is the per-second frame rate the
+        # picture pipeline is actually consuming — diverges from
+        # `target_fps` when the underlying screen capture stalls (heavy
+        # GPU load, occluded window, DXGI desktop switch, etc.). Reads
+        # from another thread see a stale length at worst; deque ops are
+        # atomic under the GIL so no lock is needed.
+        self._new_frame_timestamps: deque[float] = deque(maxlen=180)
+
     @property
     def live_stream(self):
         """Public accessor for the underlying LiveStream (used by preview WebSocket)."""
@@ -81,6 +91,31 @@ class PictureColorStripStream(ColorStripStream):
     def target_fps(self) -> int:
         return self._fps
 
+    @property
+    def actual_fps(self) -> Optional[float]:
+        """Measured new-frame rate over the last 1 second.
+
+        Returns the count of distinct frames the picture loop accepted in
+        the trailing 1s window. ``None`` until the loop has run (no
+        meaningful number to report yet).
+        """
+        ts_dq = self._new_frame_timestamps
+        if not ts_dq:
+            return None
+        # Stale-tolerant read: producer may pop while we iterate, but we
+        # only look at the snapshot length and the leftmost timestamp.
+        now = time.perf_counter()
+        # If the stream has gone idle (no new frames for >1s) the deque
+        # still holds samples until the loop next ticks; report 0 so the
+        # spark drops to the floor instead of pinning at the last rate.
+        try:
+            oldest = ts_dq[0]
+        except IndexError:
+            return None
+        if now - oldest > 1.5:
+            return 0.0
+        return float(len(ts_dq))
+
     @property
     def led_count(self) -> int:
         return self._led_count
@@ -116,6 +151,7 @@ class PictureColorStripStream(ColorStripStream):
             self._thread = None
         self._latest_colors = None
         self._previous_colors = None
+        self._new_frame_timestamps.clear()
         logger.info("PictureColorStripStream stopped")
 
     def get_latest_colors(self) -> Optional[np.ndarray]:
@@ -206,6 +242,14 @@ class PictureColorStripStream(ColorStripStream):
                         cached_frame = frame
 
                         t0 = time.perf_counter()
+                        # Record the new frame in the rolling 1s window
+                        # used by `actual_fps`. Pop entries older than
+                        # 1s so `len()` reads as frames-per-second.
+                        ts_dq = self._new_frame_timestamps
+                        ts_dq.append(t0)
+                        cutoff = t0 - 1.0
+                        while ts_dq and ts_dq[0] < cutoff:
+                            ts_dq.popleft()
 
                         calibration = self._calibration
                         mapper = self._pixel_mapper

server/src/ledgrab/core/processing/color_strip/static.py

@@ -73,7 +73,14 @@ class StaticColorStripStream(ColorStripStream):
     @property
     def is_animated(self) -> bool:
         anim = self._animation
-        return bool(anim and anim.get("enabled"))
+        if anim and anim.get("enabled"):
+            return True
+        return self._is_color_bound()
+
+    def _is_color_bound(self) -> bool:
+        """True when the `color` property is driven by a ValueStream."""
+        vs = self._value_streams
+        return bool(vs and vs.get("color"))
 
     @property
     def led_count(self) -> int:
@@ -243,10 +250,28 @@ class StaticColorStripStream(ColorStripStream):
                             if colors is not None:
                                 with self._colors_lock:
                                     self._colors = colors
+                        elif self._is_color_bound():
+                            # No animation, but color is driven by a ValueStream —
+                            # poll and forward live color updates so the bound
+                            # source is honoured (otherwise LEDs stay stuck on
+                            # the static fallback).
+                            n = self._led_count
+                            if n != _pool_n:
+                                _pool_n = n
+                                _buf_a = np.empty((n, 3), dtype=np.uint8)
+                                _buf_b = np.empty((n, 3), dtype=np.uint8)
+                            buf = _buf_a if _use_a else _buf_b
+                            _use_a = not _use_a
+                            buf[:] = self.resolve_color("color", self._source_color)
+                            with self._colors_lock:
+                                self._colors = buf
                     except Exception as e:
                         logger.error(f"StaticColorStripStream animation error: {e}")
 
-                    sleep_target = frame_time if anim and anim.get("enabled") else 0.25
+                    if (anim and anim.get("enabled")) or self._is_color_bound():
+                        sleep_target = frame_time
+                    else:
+                        sleep_target = 0.25
                     limiter.wait(sleep_target)
         except Exception as e:
             logger.error(f"Fatal StaticColorStripStream loop error: {e}", exc_info=True)

server/src/ledgrab/core/processing/color_strip_stream.py

@@ -6,7 +6,6 @@ import path ``from ledgrab.core.processing.color_strip_stream import X``.
 """
 
 from ledgrab.core.processing.color_strip import (  # noqa: F401
-    ColorCycleColorStripStream,
     ColorStripStream,
     GradientColorStripStream,
     PictureColorStripStream,
@@ -20,7 +19,6 @@ __all__ = [
     "ColorStripStream",
     "PictureColorStripStream",
     "StaticColorStripStream",
-    "ColorCycleColorStripStream",
     "GradientColorStripStream",
     "_compute_gradient_colors",
     "_SimpleNoise1D",

server/src/ledgrab/core/processing/color_strip_stream_manager.py

@@ -3,7 +3,7 @@
 PictureColorStripStreams (expensive screen capture) are shared across multiple
 consumers via reference counting — processing runs once, not once per target.
 
-Count-dependent streams (static, gradient, color cycle, effect) are NOT shared.
+Count-dependent streams (static, gradient, effect) are NOT shared.
 Each consumer gets its own instance so it can configure an independent LED count
 without interfering with other targets.
 """
@@ -12,7 +12,6 @@ from dataclasses import dataclass
 from typing import Dict, Optional
 
 from ledgrab.core.processing.color_strip_stream import (
-    ColorCycleColorStripStream,
     ColorStripStream,
     GradientColorStripStream,
     PictureColorStripStream,
@@ -34,7 +33,6 @@ logger = get_logger(__name__)
 _SIMPLE_STREAM_MAP = {
     "static": StaticColorStripStream,
     "gradient": GradientColorStripStream,
-    "color_cycle": ColorCycleColorStripStream,
     "effect": EffectColorStripStream,
     "api_input": ApiInputColorStripStream,
     "notification": NotificationColorStripStream,

server/src/ledgrab/core/processing/composite_stream.py

@@ -97,6 +97,30 @@ class CompositeColorStripStream(ColorStripStream):
     def target_fps(self) -> int:
         return self._fps
 
+    @property
+    def actual_fps(self) -> Optional[float]:
+        """Aggregate measured capture rate across capture-backed sub-streams.
+
+        Sums `actual_fps` from each sub-stream that reports one (i.e.
+        capture-backed layers like screen/audio captures). Returns
+        ``None`` when no sub-stream measures capture — keeps synthetic-
+        only composites out of the "Total Capture FPS" cell instead of
+        contributing a 0.
+        """
+        with self._sub_lock:
+            subs = list(self._sub_streams.values())
+        total = 0.0
+        any_reporting = False
+        for _src_id, _consumer_id, stream in subs:
+            try:
+                v = getattr(stream, "actual_fps", None)
+            except Exception:
+                v = None
+            if isinstance(v, (int, float)):
+                total += float(v)
+                any_reporting = True
+        return total if any_reporting else None
+
     def set_capture_fps(self, fps: int) -> None:
         self._fps = max(1, min(90, fps))
         self._frame_time = 1.0 / self._fps

server/src/ledgrab/core/processing/daylight_settings.py

@@ -0,0 +1,87 @@
+"""Global daylight cycle preferences.
+
+A single timezone applies to every daylight value source / color strip
+source on the server, so it lives in the key/value settings table rather
+than on each entity. The daylight streams read it on every wall-clock
+sample (cheap dict lookup with a short cache window) so changing it in
+the UI takes effect within ~1 second.
+"""
+
+from __future__ import annotations
+
+import threading
+import time
+from typing import Optional
+
+from ledgrab.utils import get_logger
+
+logger = get_logger(__name__)
+
+DAYLIGHT_TIMEZONE_KEY = "daylight_timezone"
+_CACHE_TTL_SECONDS = 1.0
+
+_lock = threading.Lock()
+_cached_tz: str = ""
+_cached_at: float = 0.0
+
+
+def _read_from_db() -> str:
+    """Read the persisted timezone from the settings table.
+
+    Returns an empty string when unset, the table is unavailable, or
+    the stored value is corrupt — empty means "use system local time".
+    """
+    try:
+        from ledgrab.api.dependencies import get_database
+
+        raw = get_database().get_setting(DAYLIGHT_TIMEZONE_KEY)
+    except Exception as e:  # pragma: no cover — DB not initialised yet, e.g. in tests
+        logger.debug("daylight timezone DB read failed: %s", e)
+        return ""
+    if not isinstance(raw, dict):
+        return ""
+    value = raw.get("value")
+    return str(value) if isinstance(value, str) else ""
+
+
+def get_daylight_timezone() -> str:
+    """Return the configured global daylight timezone (cached briefly)."""
+    global _cached_tz, _cached_at
+
+    now = time.monotonic()
+    with _lock:
+        if now - _cached_at < _CACHE_TTL_SECONDS:
+            return _cached_tz
+
+    fresh = _read_from_db()
+    with _lock:
+        _cached_tz = fresh
+        _cached_at = now
+    return fresh
+
+
+def set_daylight_timezone(tz: Optional[str]) -> str:
+    """Persist the global daylight timezone and refresh the cache.
+
+    Returns the canonicalised stored value (empty string for None / blank).
+    """
+    canonical = str(tz or "").strip()
+    try:
+        from ledgrab.api.dependencies import get_database
+
+        get_database().set_setting(DAYLIGHT_TIMEZONE_KEY, {"value": canonical})
+    except Exception as e:
+        logger.warning("Failed to persist daylight timezone: %s", e)
+
+    global _cached_tz, _cached_at
+    with _lock:
+        _cached_tz = canonical
+        _cached_at = time.monotonic()
+    return canonical
+
+
+def invalidate_cache() -> None:
+    """Force the next ``get_daylight_timezone`` call to re-read from DB."""
+    global _cached_at
+    with _lock:
+        _cached_at = 0.0

server/src/ledgrab/core/processing/daylight_stream.py

@@ -22,8 +22,33 @@ from ledgrab.utils import get_logger
 from ledgrab.utils.frame_limiter import FrameLimiter
 from ledgrab.utils.timer import high_resolution_timer
 
+try:
+    from zoneinfo import ZoneInfo, ZoneInfoNotFoundError
+except ImportError:  # pragma: no cover — pre-3.9 fallback, not expected in target envs
+    ZoneInfo = None  # type: ignore[assignment]
+
+    class ZoneInfoNotFoundError(Exception):  # type: ignore[no-redef]
+        pass
+
+
 logger = get_logger(__name__)
 
+
+def _now_in_tz(tz_name: str) -> datetime.datetime:
+    """Return current wall-clock time in the named IANA timezone.
+
+    Empty string means "use system local time". Unknown timezones fall
+    back to local time and log a warning once per unknown name.
+    """
+    if not tz_name or ZoneInfo is None:
+        return datetime.datetime.now()
+    try:
+        return datetime.datetime.now(ZoneInfo(tz_name))
+    except ZoneInfoNotFoundError:
+        logger.warning(f"Unknown daylight timezone '{tz_name}' — falling back to system local")
+        return datetime.datetime.now()
+
+
 # ── Daylight color table ────────────────────────────────────────────────
 #
 # Canonical hour control points (0–24) → RGB.  Designed for a default
@@ -62,13 +87,19 @@ _daylight_lut: Optional[np.ndarray] = None
 # ── Solar position helpers ──────────────────────────────────────────────
 
 
-def _compute_solar_times(latitude: float, longitude: float, day_of_year: int) -> tuple:
-    """Return (sunrise_hour, sunset_hour) in local solar time.
+def _compute_solar_times(
+    latitude: float,
+    longitude: float,
+    day_of_year: int,
+    utc_offset_hours: float = 0.0,
+) -> tuple:
+    """Return (sunrise_hour, sunset_hour) in the user's wall-clock time.
 
     Uses simplified NOAA solar equations:
       - declination: decl = 23.45 * sin(2π * (284 + doy) / 365)
       - hour angle:  cos(ha) = -tan(lat) * tan(decl)
-      - sunrise/sunset: 12 ∓ ha/15, shifted by longitude
+      - solar noon (UTC): 12 - longitude/15
+      - wall-clock sunrise/sunset: solar_noon_utc + utc_offset ∓ ha/15
 
     Polar day and polar night are clamped to visible ranges.
     """
@@ -79,28 +110,48 @@ def _compute_solar_times(latitude: float, longitude: float, day_of_year: int) ->
     lat_rad = latitude * deg2rad
 
     cos_ha = -math.tan(lat_rad) * math.tan(decl_rad)
+    solar_noon_utc = 12.0 - longitude / 15.0
+    solar_noon_local = solar_noon_utc + utc_offset_hours
 
     if cos_ha <= -1.0:
-        # Polar day — sun never sets
-        sunrise = 3.0
-        sunset = 21.0
+        # Polar day — sun never sets; fake a long visible window
+        sunrise = solar_noon_local - 9.0
+        sunset = solar_noon_local + 9.0
     elif cos_ha >= 1.0:
-        # Polar night — sun never rises
-        sunrise = 12.0
-        sunset = 12.0
+        # Polar night — sun never rises; collapse to noon
+        sunrise = solar_noon_local
+        sunset = solar_noon_local
     else:
         ha_hours = math.acos(cos_ha) / (deg2rad * 15.0)
-        lon_offset = longitude / 15.0
-        solar_noon = 12.0 - lon_offset
-        sunrise = solar_noon - ha_hours
-        sunset = solar_noon + ha_hours
+        sunrise = solar_noon_local - ha_hours
+        sunset = solar_noon_local + ha_hours
 
-    # Clamp to sane ranges
-    sunrise = max(3.0, min(10.0, sunrise))
-    sunset = max(14.0, min(21.0, sunset))
+    # Clamp to a safe range the LUT builder can render. With reasonable
+    # tz/longitude pairs sunrise lands in (3..10) and sunset in (14..21);
+    # we widen the clamp so weird tz/lon combinations still produce a
+    # usable curve instead of dividing by zero.
+    sunrise = max(0.5, min(11.5, sunrise))
+    sunset = max(12.5, min(23.5, sunset))
     return sunrise, sunset
 
 
+def _utc_offset_hours_for(tz_name: str, when: Optional[datetime.datetime] = None) -> float:
+    """Return the UTC offset (in hours) for the given IANA timezone.
+
+    Empty/unknown tz falls back to the system local offset for ``when``.
+    """
+    when = when or datetime.datetime.now()
+    if tz_name and ZoneInfo is not None:
+        try:
+            offset = when.replace(tzinfo=None).astimezone(ZoneInfo(tz_name)).utcoffset()
+            if offset is not None:
+                return offset.total_seconds() / 3600.0
+        except ZoneInfoNotFoundError:
+            pass
+    local_offset = when.astimezone().utcoffset()
+    return local_offset.total_seconds() / 3600.0 if local_offset else 0.0
+
+
 def _build_lut_for_solar_times(sunrise: float, sunset: float) -> np.ndarray:
     """Build a 1440-entry uint8 RGB LUT scaled to the given sunrise/sunset hours.
 
@@ -198,9 +249,11 @@ class DaylightColorStripStream(ColorStripStream):
         with self._colors_lock:
             self._colors: Optional[np.ndarray] = None
 
-    def _get_lut_for_day(self, day_of_year: int) -> np.ndarray:
+    def _get_lut_for_day(self, day_of_year: int, utc_offset_hours: float = 0.0) -> np.ndarray:
         """Return a solar-time-aware LUT for the given day (cached)."""
-        sunrise, sunset = _compute_solar_times(self._latitude, self._longitude, day_of_year)
+        sunrise, sunset = _compute_solar_times(
+            self._latitude, self._longitude, day_of_year, utc_offset_hours
+        )
         sr_key = int(round(sunrise * 60))
         ss_key = int(round(sunset * 60))
         cache_key = (sr_key, ss_key)
@@ -304,10 +357,16 @@ class DaylightColorStripStream(ColorStripStream):
                         buf = _buf_a if _use_a else _buf_b
                         _use_a = not _use_a
 
+                        from ledgrab.core.processing.daylight_settings import (
+                            get_daylight_timezone,
+                        )
+
+                        tz_name = get_daylight_timezone()
                         if self._use_real_time:
-                            now = datetime.datetime.now()
+                            now = _now_in_tz(tz_name)
                             day_of_year = now.timetuple().tm_yday
                             minute_of_day = now.hour * 60 + now.minute + now.second / 60.0
+                            utc_offset_hours = _utc_offset_hours_for(tz_name, now)
                         else:
                             # Simulated: speed=1.0 → full 24h in 240s.
                             # Use summer solstice (day 172) for maximum day length.
@@ -315,8 +374,9 @@ class DaylightColorStripStream(ColorStripStream):
                             cycle_seconds = 240.0 / max(speed, 0.01)
                             phase = (t % cycle_seconds) / cycle_seconds
                             minute_of_day = phase * 1440.0
+                            utc_offset_hours = _utc_offset_hours_for(tz_name)
 
-                        lut = self._get_lut_for_day(day_of_year)
+                        lut = self._get_lut_for_day(day_of_year, utc_offset_hours)
                         idx = int(minute_of_day) % 1440
                         color = lut[idx]
                         buf[:] = color

server/src/ledgrab/core/processing/ha_light_target_processor.py

@@ -224,6 +224,7 @@ class HALightTargetProcessor(TargetProcessor):
             "update_rate": self._update_rate,
             "fps_actual": self._update_rate if self._is_running else None,
             "fps_target": self._update_rate,
+            "fps_capture": self._update_rate if self._is_running else None,
             "uptime_seconds": uptime,
             "entity_colors": entity_colors,
         }

server/src/ledgrab/core/processing/metrics_history.py

@@ -75,6 +75,16 @@ class MetricsHistory:
         self._system: deque = deque(maxlen=MAX_SAMPLES)
         self._targets: Dict[str, deque] = {}
         self._task: Optional[asyncio.Task] = None
+        # Baselines for converting cumulative `errors_count` /
+        # `frames_skipped` into per-second rates inside the system ring
+        # buffer. None until the first sample arrives so we don't
+        # synthesize a fake initial spike from "0 → live count".
+        self._prev_total_errors: Optional[int] = None
+        self._prev_total_skipped: Optional[int] = None
+        # Same shape, but for the network throughput counter. Reset to
+        # None when the cumulative sum drops (target stopped, counter
+        # reset) so we never emit a negative rate.
+        self._prev_total_bytes_sent: Optional[int] = None
 
     async def start(self):
         """Start the background sampling loop."""
@@ -110,7 +120,6 @@ class MetricsHistory:
         """Collect one snapshot of system and target metrics."""
         # System metrics (blocking psutil/nvml calls in thread pool)
         sys_snap = await asyncio.to_thread(_collect_system_snapshot)
-        self._system.append(sys_snap)
 
         # Per-target metrics from processor states
         try:
@@ -121,22 +130,151 @@ class MetricsHistory:
 
         now = datetime.now(timezone.utc).isoformat()
         active_ids = set()
+
+        # Aggregates across running targets — mirrors the dashboard's
+        # frontend computation so the FPS / Capture FPS / Errors cells
+        # can seed their sparklines from this ring buffer and survive
+        # a page reload, the same way CPU / RAM already do.
+        total_fps = 0.0
+        total_capture_fps = 0.0
+        total_capture_fps_actual = 0.0
+        capture_actual_count = 0
+        total_fps_target = 0.0
+        total_errors_count = 0
+        total_frames_skipped = 0
+        running_count = 0
+        # Network / send-timing aggregates across running targets.
+        # `send_timing_*` reads "is the LED transport keeping up?" — a
+        # leading indicator of network congestion that fires before
+        # frames actually start dropping.
+        total_bytes_sent = 0
+        send_timing_max_ms = 0.0
+        send_timing_sum_ms = 0.0
+        send_timing_count = 0
+
         for target_id, state in all_states.items():
             active_ids.add(target_id)
             if target_id not in self._targets:
                 self._targets[target_id] = deque(maxlen=MAX_SAMPLES)
             if state.get("processing"):
+                running_count += 1
+                fps_actual = state.get("fps_actual")
+                if isinstance(fps_actual, (int, float)) and fps_actual > 0:
+                    total_fps += float(fps_actual)
+                fps_capture = state.get("fps_capture")
+                if isinstance(fps_capture, (int, float)) and fps_capture > 0:
+                    total_capture_fps += float(fps_capture)
+                fps_capture_actual = state.get("fps_capture_actual")
+                # `None` means the stream type doesn't measure capture
+                # (synthetic streams). Counted separately so the cell
+                # can read "0 of 0" vs "0 of N stalled".
+                if isinstance(fps_capture_actual, (int, float)):
+                    total_capture_fps_actual += float(fps_capture_actual)
+                    capture_actual_count += 1
+                fps_target = state.get("fps_target")
+                if isinstance(fps_target, (int, float)) and fps_target > 0:
+                    total_fps_target += float(fps_target)
+                errors_count = state.get("errors_count")
+                if isinstance(errors_count, (int, float)) and errors_count > 0:
+                    total_errors_count += int(errors_count)
+                frames_skipped = state.get("frames_skipped")
+                if isinstance(frames_skipped, (int, float)) and frames_skipped > 0:
+                    total_frames_skipped += int(frames_skipped)
+                bytes_sent = state.get("bytes_sent")
+                if isinstance(bytes_sent, (int, float)) and bytes_sent > 0:
+                    total_bytes_sent += int(bytes_sent)
+                send_timing = state.get("timing_send_ms")
+                if isinstance(send_timing, (int, float)) and send_timing >= 0:
+                    send_timing_sum_ms += float(send_timing)
+                    send_timing_count += 1
+                    if send_timing > send_timing_max_ms:
+                        send_timing_max_ms = float(send_timing)
+
                 self._targets[target_id].append(
                     {
                         "t": now,
-                        "fps": state.get("fps_actual"),
+                        "fps": fps_actual,
                         "fps_current": state.get("fps_current"),
-                        "fps_target": state.get("fps_target"),
+                        "fps_target": fps_target,
                         "timing": state.get("timing_total_ms"),
                         "errors": state.get("errors_count", 0),
                     }
                 )
 
+        # Convert the cumulative error/skipped totals into per-second
+        # rates. Guard against the first sample (no previous baseline)
+        # and against counter resets when a target stops or restarts
+        # (delta < 0 → treat as 0).
+        errors_per_sec = 0.0
+        skipped_per_sec = 0.0
+        bytes_per_sec = 0.0
+        if self._prev_total_errors is not None:
+            delta = max(0, total_errors_count - self._prev_total_errors)
+            errors_per_sec = delta / SAMPLE_INTERVAL
+        if self._prev_total_skipped is not None:
+            delta = max(0, total_frames_skipped - self._prev_total_skipped)
+            skipped_per_sec = delta / SAMPLE_INTERVAL
+        if self._prev_total_bytes_sent is not None:
+            delta_b = max(0, total_bytes_sent - self._prev_total_bytes_sent)
+            bytes_per_sec = delta_b / SAMPLE_INTERVAL
+        self._prev_total_errors = total_errors_count
+        self._prev_total_skipped = total_frames_skipped
+        self._prev_total_bytes_sent = total_bytes_sent
+
+        # Device latency aggregates — pulled from the manager's
+        # device-health view rather than re-deriving from per-target
+        # state, so devices that are shared by multiple targets only
+        # count once.
+        device_latency_avg_ms: Optional[float] = None
+        device_latency_max_ms: Optional[float] = None
+        device_online_count = 0
+        device_total_count = 0
+        try:
+            health_dicts = self._manager.get_all_device_health_dicts()
+        except Exception as e:
+            logger.error("Failed to get device health: %s", e)
+            health_dicts = {}
+        latency_sum = 0.0
+        latency_n = 0
+        latency_max = 0.0
+        for _did, h in health_dicts.items():
+            device_total_count += 1
+            if h.get("device_online"):
+                device_online_count += 1
+            lat = h.get("device_latency_ms")
+            if isinstance(lat, (int, float)) and lat >= 0:
+                latency_sum += float(lat)
+                latency_n += 1
+                if lat > latency_max:
+                    latency_max = float(lat)
+        if latency_n > 0:
+            device_latency_avg_ms = round(latency_sum / latency_n, 1)
+            device_latency_max_ms = round(latency_max, 1)
+
+        sys_snap["total_fps"] = round(total_fps, 1)
+        sys_snap["total_capture_fps"] = round(total_capture_fps, 1)
+        sys_snap["total_capture_fps_actual"] = round(total_capture_fps_actual, 1)
+        sys_snap["capture_actual_count"] = capture_actual_count
+        sys_snap["total_fps_target"] = round(total_fps_target, 1)
+        sys_snap["total_errors_count"] = total_errors_count
+        sys_snap["total_frames_skipped"] = total_frames_skipped
+        sys_snap["errors_per_sec"] = round(errors_per_sec, 3)
+        sys_snap["skipped_per_sec"] = round(skipped_per_sec, 3)
+        sys_snap["running_count"] = running_count
+        sys_snap["total_bytes_sent"] = total_bytes_sent
+        sys_snap["bytes_per_sec"] = round(bytes_per_sec, 1)
+        sys_snap["send_timing_avg_ms"] = (
+            round(send_timing_sum_ms / send_timing_count, 2) if send_timing_count > 0 else 0.0
+        )
+        sys_snap["send_timing_max_ms"] = round(send_timing_max_ms, 2)
+        sys_snap["send_timing_count"] = send_timing_count
+        sys_snap["device_latency_avg_ms"] = device_latency_avg_ms
+        sys_snap["device_latency_max_ms"] = device_latency_max_ms
+        sys_snap["device_online_count"] = device_online_count
+        sys_snap["device_total_count"] = device_total_count
+
+        self._system.append(sys_snap)
+
         # Prune deques for targets no longer registered
         for tid in list(self._targets.keys()):
             if tid not in active_ids:

server/src/ledgrab/core/processing/processor_manager.py

@@ -167,6 +167,7 @@ class ProcessorManager(AutoRestartMixin, DeviceHealthMixin, DeviceTestModeMixin)
                 gradient_store=deps.gradient_store,
                 event_bus=deps.game_event_bus,
                 audio_processing_template_store=deps.audio_processing_template_store,
+                sync_clock_manager=deps.sync_clock_manager,
             )
             if deps.value_source_store
             else None
@@ -770,8 +771,16 @@ class ProcessorManager(AutoRestartMixin, DeviceHealthMixin, DeviceTestModeMixin)
 
     # ===== LIFECYCLE =====
 
-    async def stop_all(self):
-        """Stop processing and health monitoring for all targets and devices."""
+    async def stop_all(self, restore_devices: bool = True):
+        """Stop processing and health monitoring for all targets and devices.
+
+        When ``restore_devices`` is False, processor tasks are cancelled
+        directly instead of going through ``proc.stop()`` (which sends
+        per-device auto_shutdown restore frames), and the global
+        idle-state restore loop is skipped. Used by the "Nothing"
+        shutdown action so lights freeze on their last frame regardless
+        of per-device auto_shutdown.
+        """
         await self._metrics_history.stop()
         await self.stop_health_monitoring()
 
@@ -781,18 +790,35 @@ class ProcessorManager(AutoRestartMixin, DeviceHealthMixin, DeviceTestModeMixin)
             if rs.restart_task and not rs.restart_task.done():
                 rs.restart_task.cancel()
 
-        # Stop all processors
-        for target_id, proc in list(self._processors.items()):
-            if proc.is_running:
-                try:
-                    await proc.stop()
-                except Exception as e:
-                    logger.error(f"Error stopping target {target_id}: {e}")
+        if restore_devices:
+            # Stop all processors (per-device auto_shutdown decides whether
+            # the prior device state is restored).
+            for target_id, proc in list(self._processors.items()):
+                if proc.is_running:
+                    try:
+                        await proc.stop()
+                    except Exception as e:
+                        logger.error(f"Error stopping target {target_id}: {e}")
 
-        # Restore idle state for devices that have auto-restore enabled
-        # (serial devices already dark from processor close; WLED restored by snapshot)
-        for device_id in self._devices:
-            await self._restore_device_idle_state(device_id)
+            # Restore idle state for devices that have auto-restore enabled
+            # (serial devices already dark from processor close; WLED restored by snapshot)
+            for device_id in self._devices:
+                await self._restore_device_idle_state(device_id)
+        else:
+            # "Nothing" mode: cancel processor capture tasks without sending
+            # restore frames so the LEDs keep displaying the last frame.
+            # ``cancel_task`` (defined on ``TargetProcessor``) awaits the
+            # cancellation so the loop's current iteration completes — no
+            # half-written frame on the wire when the process exits.
+            for target_id, proc in list(self._processors.items()):
+                try:
+                    await proc.cancel_task()
+                except Exception as e:
+                    logger.error(f"Error cancelling task for target {target_id}: {e}")
+            logger.info(
+                "Shutdown action 'nothing': skipped device restore for %d target(s)",
+                len(self._processors),
+            )
 
         # Close any cached idle LED clients (WLED only; serial has no cached clients)
         for did in list(self._idle_clients):

server/src/ledgrab/core/processing/target_processor.py

@@ -16,6 +16,10 @@ from dataclasses import dataclass
 from datetime import datetime
 from typing import TYPE_CHECKING, Any, Callable, Dict, Optional, Tuple
 
+from ledgrab.utils import get_logger
+
+logger = get_logger(__name__)
+
 if TYPE_CHECKING:
     from ledgrab.core.processing.color_strip_stream_manager import ColorStripStreamManager
     from ledgrab.core.processing.live_stream_manager import LiveStreamManager
@@ -65,6 +69,13 @@ class ProcessingMetrics:
     # Streaming liveness (HTTP probe during DDP)
     device_streaming_reachable: Optional[bool] = None
     fps_effective: int = 0
+    # Cumulative LED-payload bytes sent to the device. Aggregated across
+    # all running targets in MetricsHistory to derive a per-second
+    # network throughput sparkline. Counts the color-array payload only;
+    # protocol overhead (DDP/UDP/IP headers) is sub-5 % for any
+    # non-trivial LED count and is intentionally ignored to keep the
+    # counter cheap (`np.ndarray.nbytes`, no per-frame allocation).
+    bytes_sent: int = 0
 
 
 @dataclass
@@ -145,6 +156,32 @@ class TargetProcessor(ABC):
         """
         ...
 
+    async def cancel_task(self) -> None:
+        """Cancel the processing task without restoring device state.
+
+        Used by ``ProcessorManager.stop_all(restore_devices=False)`` at
+        server shutdown when the user has chosen "Nothing" — LEDs should
+        keep displaying their last frame, so we skip the per-device
+        ``stop()`` path that sends restore frames. We still flip
+        ``_is_running`` and await the cancellation so the loop's current
+        iteration completes (no half-written frame on the wire).
+
+        Subclasses with extra non-device cleanup (e.g. live-stream
+        release) may override this; the default just stops the task.
+        """
+        self._is_running = False
+        task = self._task
+        if task is not None and not task.done():
+            task.cancel()
+            try:
+                await task
+            except asyncio.CancelledError:
+                pass
+            except Exception:
+                # Log but don't propagate — caller is shutting down.
+                logger.debug("Task raised during cancel_task", exc_info=True)
+        self._task = None
+
     # ----- Settings -----
 
     @abstractmethod

server/src/ledgrab/core/processing/value_stream.py

@@ -37,6 +37,7 @@ if TYPE_CHECKING:
     from ledgrab.core.home_assistant.ha_manager import HomeAssistantManager
     from ledgrab.core.processing.color_strip_stream_manager import ColorStripStreamManager
     from ledgrab.core.processing.live_stream_manager import LiveStreamManager
+    from ledgrab.core.processing.sync_clock_manager import SyncClockManager
     from ledgrab.storage.audio_source_store import AudioSourceStore
     from ledgrab.storage.value_source import ValueSource
     from ledgrab.storage.value_source_store import ValueSourceStore
@@ -599,31 +600,61 @@ class DaylightValueStream(ValueStream):
         speed: float = 1.0,
         use_real_time: bool = False,
         latitude: float = 50.0,
+        longitude: float = 0.0,
         min_value: float = 0.0,
         max_value: float = 1.0,
     ):
         from ledgrab.core.processing.daylight_stream import _get_daylight_lut
 
-        self._lut = _get_daylight_lut()
+        self._default_lut = _get_daylight_lut()
         self._speed = speed
         self._use_real_time = use_real_time
         self._latitude = latitude
+        self._longitude = longitude
         self._min = min_value
         self._max = max_value
         self._start_time = time.perf_counter()
+        # Cache: (sr_min, ss_min) → LUT, mirroring DaylightColorStripStream
+        self._lut_cache: Dict[Tuple[int, int], np.ndarray] = {}
+
+    def _resolve_lut(self, day_of_year: Optional[int], utc_offset_hours: float) -> np.ndarray:
+        if day_of_year is None:
+            return self._default_lut
+        from ledgrab.core.processing.daylight_stream import (
+            _build_lut_for_solar_times,
+            _compute_solar_times,
+        )
+
+        sr, ss = _compute_solar_times(
+            self._latitude, self._longitude, day_of_year, utc_offset_hours
+        )
+        key = (int(round(sr * 60)), int(round(ss * 60)))
+        lut = self._lut_cache.get(key)
+        if lut is None:
+            lut = _build_lut_for_solar_times(sr, ss)
+            if len(self._lut_cache) > 8:
+                self._lut_cache.clear()
+            self._lut_cache[key] = lut
+        return lut
 
     def get_value(self) -> float:
+        from ledgrab.core.processing.daylight_settings import get_daylight_timezone
+        from ledgrab.core.processing.daylight_stream import _now_in_tz, _utc_offset_hours_for
+
+        tz_name = get_daylight_timezone()
         if self._use_real_time:
-            now = datetime.now()
+            now = _now_in_tz(tz_name)
             minute_of_day = now.hour * 60 + now.minute + now.second / 60.0
+            lut = self._resolve_lut(now.timetuple().tm_yday, _utc_offset_hours_for(tz_name, now))
         else:
             t_elapsed = time.perf_counter() - self._start_time
             cycle_seconds = 240.0 / max(self._speed, 0.01)
             phase = (t_elapsed % cycle_seconds) / cycle_seconds
             minute_of_day = phase * 1440.0
+            lut = self._default_lut
 
         idx = int(minute_of_day) % 1440
-        r, g, b = self._lut[idx]
+        r, g, b = lut[idx]
 
         # BT.601 luminance → 0..1
         luminance = (0.299 * float(r) + 0.587 * float(g) + 0.114 * float(b)) / 255.0
@@ -637,8 +668,10 @@ class DaylightValueStream(ValueStream):
             self._speed = source.speed
             self._use_real_time = source.use_real_time
             self._latitude = source.latitude
+            self._longitude = source.longitude
             self._min = source.min_value
             self._max = source.max_value
+            self._lut_cache.clear()
 
 
 # ---------------------------------------------------------------------------
@@ -669,10 +702,34 @@ class StaticColorValueStream(ValueStream):
         )
 
 
-class AnimatedColorValueStream(ValueStream):
-    """Cycles through a list of colors over time."""
+def _ease_color_frac(t: float, easing: str) -> float:
+    """Remap a 0..1 segment fraction through a named easing curve.
 
-    def __init__(self, colors, speed=10.0, easing="linear"):
+    Unknown names fall back to linear so older configs and forward-compat
+    payloads keep working.
+    """
+    if easing == "ease_in":
+        return t * t * t
+    if easing == "ease_out":
+        u = 1.0 - t
+        return 1.0 - u * u * u
+    if easing == "ease_in_out":
+        return t * t * (3.0 - 2.0 * t)
+    if easing == "sine":
+        return 0.5 - 0.5 * math.cos(math.pi * t)
+    return t
+
+
+class AnimatedColorValueStream(ValueStream):
+    """Cycles through a list of colors over time.
+
+    When a ``clock`` runtime is provided, animation is driven by the
+    clock's pause-aware elapsed time and speed multiplier so multiple
+    streams sharing the same clock stay in lockstep. When no clock is
+    set, falls back to wall-clock time scaled by ``speed`` (cycles/min).
+    """
+
+    def __init__(self, colors, speed=10.0, easing="linear", clock=None):
         self._colors = [
             (int(c[0]), int(c[1]), int(c[2]))
             for c in (colors or [[255, 0, 0], [0, 255, 0], [0, 0, 255]])
@@ -681,24 +738,47 @@ class AnimatedColorValueStream(ValueStream):
         self._speed = max(0.01, float(speed))
         self._easing = easing
         self._start_time = 0.0
+        self._clock = clock
+        # Last frame state — held while the clock is paused so get_color()
+        # returns a stable color instead of jumping.
+        self._last_phase = 0.0
 
     def start(self) -> None:
         self._start_time = time.monotonic()
 
+    def set_clock(self, clock) -> None:
+        """Set or clear the sync clock runtime. Thread-safe (atomic ref swap)."""
+        self._clock = clock
+
     def get_value(self) -> float:
         r, g, b = self.get_color()
         return (0.299 * r + 0.587 * g + 0.114 * b) / 255.0
 
     def get_color(self) -> tuple:
-        elapsed = time.monotonic() - self._start_time
-        cycle_time = 60.0 / self._speed
+        clock = self._clock
         n = len(self._colors)
+        if clock is not None:
+            # Clock provides real elapsed seconds (pause-aware) and a speed
+            # multiplier. We treat self._speed as the base cpm and apply the
+            # clock's speed on top, matching the convention used by CSS
+            # animation streams.
+            cycle_time = 60.0 / max(0.01, self._speed * float(clock.speed))
+            if not clock.is_running:
+                phase = self._last_phase
+            else:
+                elapsed = clock.get_time()
+                phase = (elapsed / cycle_time * n) % n
+                self._last_phase = phase
+        else:
+            elapsed = time.monotonic() - self._start_time
+            cycle_time = 60.0 / self._speed
+            phase = (elapsed / cycle_time * n) % n
+            self._last_phase = phase
+
         if self._easing == "step":
-            idx = int((elapsed / cycle_time * n) % n)
-            return self._colors[idx]
-        phase = (elapsed / cycle_time * n) % n
+            return self._colors[int(phase) % n]
         idx = int(phase)
-        frac = phase - idx
+        frac = _ease_color_frac(phase - idx, self._easing)
         c1 = self._colors[idx % n]
         c2 = self._colors[(idx + 1) % n]
         return (
@@ -1466,6 +1546,7 @@ class ValueStreamManager:
         gradient_store: Optional[Any] = None,
         event_bus: Optional["GameEventBus"] = None,
         audio_processing_template_store=None,
+        sync_clock_manager: Optional["SyncClockManager"] = None,
     ):
         self._value_source_store = value_source_store
         self._audio_capture_manager = audio_capture_manager
@@ -1477,8 +1558,12 @@ class ValueStreamManager:
         self._gradient_store = gradient_store
         self._event_bus = event_bus
         self._audio_processing_template_store = audio_processing_template_store
+        self._sync_clock_manager = sync_clock_manager
         self._streams: Dict[str, ValueStream] = {}  # vs_id → stream
         self._ref_counts: Dict[str, int] = {}  # vs_id → ref count
+        # Tracks which clock_id (if any) was acquired for each stream so we
+        # can release/swap it without re-querying the store at teardown time.
+        self._stream_clock_ids: Dict[str, str] = {}  # vs_id → clock_id
 
     def acquire(self, vs_id: str) -> ValueStream:
         """Get or create a shared ValueStream for the given ValueSource.
@@ -1492,7 +1577,7 @@ class ValueStreamManager:
             return self._streams[vs_id]
 
         source = self._value_source_store.get_source(vs_id)
-        stream = self._create_stream(source)
+        stream = self._create_stream(source, vs_id)
         stream.start()
         self._streams[vs_id] = stream
         self._ref_counts[vs_id] = 1
@@ -1512,6 +1597,7 @@ class ValueStreamManager:
             if stream:
                 stream.stop()
             del self._ref_counts[vs_id]
+            self._release_clock_for(vs_id)
             logger.info(f"Released value stream {vs_id} (last ref)")
         else:
             logger.info(f"Released ref for value stream {vs_id} (refs={refs})")
@@ -1527,8 +1613,53 @@ class ValueStreamManager:
         stream = self._streams.get(vs_id)
         if stream:
             stream.update_source(source)
+            self._sync_clock_binding(vs_id, source, stream)
             logger.debug(f"Updated value stream {vs_id}")
 
+    def _sync_clock_binding(self, vs_id: str, source: "ValueSource", stream: ValueStream) -> None:
+        """Hot-swap the sync-clock runtime attached to *stream* if needed."""
+        if not self._sync_clock_manager or not hasattr(stream, "set_clock"):
+            return
+        new_clock_id = getattr(source, "clock_id", None) or None
+        old_clock_id = self._stream_clock_ids.get(vs_id)
+        if new_clock_id == old_clock_id:
+            return
+        new_runtime = None
+        if new_clock_id:
+            try:
+                new_runtime = self._sync_clock_manager.acquire(new_clock_id)
+            except Exception as e:
+                logger.warning(
+                    "Could not acquire sync clock %s for value stream %s: %s",
+                    new_clock_id,
+                    vs_id,
+                    e,
+                )
+                new_runtime = None
+                new_clock_id = None
+        try:
+            stream.set_clock(new_runtime)
+        except Exception as e:
+            logger.warning("set_clock failed on value stream %s: %s", vs_id, e)
+        if new_clock_id:
+            self._stream_clock_ids[vs_id] = new_clock_id
+        else:
+            self._stream_clock_ids.pop(vs_id, None)
+        if old_clock_id:
+            try:
+                self._sync_clock_manager.release(old_clock_id)
+            except Exception as e:
+                logger.debug("Sync clock release for %s: %s", old_clock_id, e)
+
+    def _release_clock_for(self, vs_id: str) -> None:
+        """Release the sync clock acquired for *vs_id* (if any)."""
+        clock_id = self._stream_clock_ids.pop(vs_id, None)
+        if clock_id and self._sync_clock_manager:
+            try:
+                self._sync_clock_manager.release(clock_id)
+            except Exception as e:
+                logger.debug("Sync clock release for %s: %s", clock_id, e)
+
     def refresh_audio_filter_pipelines(self, template_id: str) -> None:
         """Rebuild audio filter pipelines for any running AudioValueStream
         that references the given audio processing template ID.
@@ -1555,11 +1686,19 @@ class ValueStreamManager:
                 stream.stop()
             except Exception as e:
                 logger.error(f"Error stopping value stream {vs_id}: {e}")
+        # Release any sync clocks held by streams.
+        if self._sync_clock_manager:
+            for vs_id, clock_id in self._stream_clock_ids.items():
+                try:
+                    self._sync_clock_manager.release(clock_id)
+                except Exception as e:
+                    logger.debug("Sync clock release for %s during shutdown: %s", clock_id, e)
+        self._stream_clock_ids.clear()
         self._streams.clear()
         self._ref_counts.clear()
         logger.info("Released all value streams")
 
-    def _create_stream(self, source: "ValueSource") -> ValueStream:
+    def _create_stream(self, source: "ValueSource", vs_id: Optional[str] = None) -> ValueStream:
         """Factory: create the appropriate ValueStream for a ValueSource."""
         from ledgrab.storage.value_source import (
             AdaptiveValueSource,
@@ -1608,6 +1747,7 @@ class ValueStreamManager:
                 speed=source.speed,
                 use_real_time=source.use_real_time,
                 latitude=source.latitude,
+                longitude=source.longitude,
                 min_value=source.min_value,
                 max_value=source.max_value,
             )
@@ -1634,10 +1774,24 @@ class ValueStreamManager:
             return StaticColorValueStream(color=source.color)
 
         if isinstance(source, AnimatedColorValueSource):
+            clock_runtime = None
+            if source.clock_id and self._sync_clock_manager:
+                try:
+                    clock_runtime = self._sync_clock_manager.acquire(source.clock_id)
+                    if vs_id is not None:
+                        self._stream_clock_ids[vs_id] = source.clock_id
+                except Exception as e:
+                    logger.warning(
+                        "Could not acquire sync clock %s for value source %s: %s",
+                        source.clock_id,
+                        source.id,
+                        e,
+                    )
             return AnimatedColorValueStream(
                 colors=source.colors,
                 speed=source.speed,
                 easing=source.easing,
+                clock=clock_runtime,
             )
 
         if isinstance(source, AdaptiveTimeColorValueSource):

server/src/ledgrab/core/processing/wled_target_processor.py

@@ -82,10 +82,17 @@ class WledTargetProcessor(TargetProcessor):
         self._resolved_display_index: Optional[int] = None
         self._device_config = None  # populated on start(), typed DeviceConfig
 
-        # Fit-to-device linspace cache (per-instance to avoid cross-target thrash)
+        # Fit-to-device cache (per-instance to avoid cross-target thrash).
+        # Holds precomputed floor/ceil source indices, fractional weights,
+        # and reusable scratch buffers so the per-frame interpolation runs
+        # entirely with in-place numpy ops — no allocations.
         self._fit_cache_key: tuple = (0, 0)
-        self._fit_cache_src: Optional[np.ndarray] = None
-        self._fit_cache_dst: Optional[np.ndarray] = None
+        self._fit_floor_idx: Optional[np.ndarray] = None
+        self._fit_ceil_idx: Optional[np.ndarray] = None
+        self._fit_frac: Optional[np.ndarray] = None
+        self._fit_left_u8: Optional[np.ndarray] = None
+        self._fit_right_u8: Optional[np.ndarray] = None
+        self._fit_blend_f32: Optional[np.ndarray] = None
         self._fit_result_buf: Optional[np.ndarray] = None
 
         # LED preview WebSocket clients
@@ -384,6 +391,69 @@ class WledTargetProcessor(TargetProcessor):
             logger.debug("Device probe failed for %s: %s", device_url, e)
             return False
 
+    async def _run_liveness_probe_loop(self, device_url: str, probe_interval: float = 10.0) -> None:
+        """Background loop that probes the device and updates adaptive state.
+
+        Runs independently from the per-frame processing loop so the hot
+        path doesn't pay for `_probe_task.done()` / scheduling checks every
+        iteration.  Updates ``self._device_reachable``,
+        ``self._metrics.device_streaming_reachable`` and (when adaptive FPS
+        is enabled) ``self._effective_fps`` directly.
+        """
+        async with httpx.AsyncClient(timeout=httpx.Timeout(2.0)) as client:
+            while self._is_running:
+                try:
+                    reachable = await self._probe_device(device_url, client)
+                except asyncio.CancelledError:
+                    raise
+                except Exception:
+                    reachable = False
+
+                prev_reachable = self._device_reachable
+                self._device_reachable = reachable
+                self._metrics.device_streaming_reachable = reachable
+
+                if self._adaptive_fps:
+                    target_fps = self._target_fps if self._target_fps > 0 else 30
+                    if not reachable:
+                        old_eff = self._effective_fps
+                        new_eff = max(1, self._effective_fps // 2)
+                        if old_eff != new_eff:
+                            self._effective_fps = new_eff
+                            logger.warning(
+                                "[ADAPTIVE] %s device unreachable, FPS %d → %d",
+                                self._target_id,
+                                old_eff,
+                                new_eff,
+                            )
+                    elif self._effective_fps < target_fps:
+                        step = max(1, target_fps // 8)
+                        old_eff = self._effective_fps
+                        new_eff = min(target_fps, self._effective_fps + step)
+                        if old_eff != new_eff:
+                            self._effective_fps = new_eff
+                            logger.info(
+                                "[ADAPTIVE] %s device reachable, FPS %d → %d",
+                                self._target_id,
+                                old_eff,
+                                new_eff,
+                            )
+
+                if prev_reachable != reachable:
+                    logger.info(
+                        "[PROBE] %s device %s",
+                        self._target_id,
+                        "reachable" if reachable else "UNREACHABLE",
+                    )
+
+                # Cooperative sleep that promptly notices stop().
+                # Sleep in 0.5s chunks so cancellation latency stays < 0.5s.
+                slept = 0.0
+                while slept < probe_interval and self._is_running:
+                    chunk = min(0.5, probe_interval - slept)
+                    await asyncio.sleep(chunk)
+                    slept += chunk
+
     def get_display_index(self) -> Optional[int]:
         """Display index being captured, from the active stream."""
         if self._resolved_display_index is not None:
@@ -399,8 +469,14 @@ class WledTargetProcessor(TargetProcessor):
         fps_target = self._target_fps
 
         css_timing: dict = {}
+        css_capture_fps: Optional[int] = None
+        css_capture_fps_actual: Optional[float] = None
         if self._is_running and self._css_stream is not None:
             css_timing = self._css_stream.get_last_timing()
+            css_capture_fps = getattr(self._css_stream, "target_fps", None)
+            # `actual_fps` is None for synthetic streams (gradient/static/...)
+            # — only picture/audio/api-input style streams measure it.
+            css_capture_fps_actual = getattr(self._css_stream, "actual_fps", None)
 
         send_ms = round(metrics.timing_send_ms, 1) if self._is_running else None
         # Picture source timing
@@ -444,6 +520,9 @@ class WledTargetProcessor(TargetProcessor):
             "fps_actual": metrics.fps_actual if self._is_running else None,
             "fps_potential": metrics.fps_potential if self._is_running else None,
             "fps_target": fps_target,
+            "fps_capture": css_capture_fps,
+            "fps_capture_actual": css_capture_fps_actual,
+            "bytes_sent": metrics.bytes_sent if self._is_running else None,
             "frames_skipped": metrics.frames_skipped if self._is_running else None,
             "frames_keepalive": metrics.frames_keepalive if self._is_running else None,
             "fps_current": metrics.fps_current if self._is_running else None,
@@ -637,24 +716,57 @@ class WledTargetProcessor(TargetProcessor):
     # ----- Private: processing loop -----
 
     def _fit_to_device(self, colors: np.ndarray, device_led_count: int) -> np.ndarray:
-        """Resample colors to match the target LED count."""
+        """Resample colors to match the target LED count.
+
+        Linear interpolation using floor/ceil source indices and fractional
+        weights — all precomputed when ``(n, device_led_count)`` changes.
+        Per-frame work is two ``np.take`` calls and a few in-place ops on
+        pre-allocated scratch buffers.  No per-frame allocations.
+        """
         n = len(colors)
         if n == device_led_count or device_led_count <= 0:
             return colors
+
         key = (n, device_led_count)
         if self._fit_cache_key != key:
-            self._fit_cache_src = np.linspace(0, 1, n)
-            self._fit_cache_dst = np.linspace(0, 1, device_led_count)
-            self._fit_cache_key = key
+            if device_led_count > 1 and n > 1:
+                t = np.arange(device_led_count, dtype=np.float64) * (
+                    (n - 1) / (device_led_count - 1)
+                )
+            else:
+                t = np.zeros(device_led_count, dtype=np.float64)
+            floor_idx = np.floor(t).astype(np.int64)
+            np.clip(floor_idx, 0, n - 1, out=floor_idx)
+            ceil_idx = np.minimum(floor_idx + 1, n - 1)
+            frac = (t - floor_idx).astype(np.float32)[:, None]  # (M, 1) for channel broadcast
+            self._fit_floor_idx = floor_idx
+            self._fit_ceil_idx = ceil_idx
+            self._fit_frac = frac
+            self._fit_left_u8 = np.empty((device_led_count, 3), dtype=np.uint8)
+            self._fit_right_u8 = np.empty((device_led_count, 3), dtype=np.uint8)
+            self._fit_blend_f32 = np.empty((device_led_count, 3), dtype=np.float32)
             self._fit_result_buf = np.empty((device_led_count, 3), dtype=np.uint8)
-        buf = self._fit_result_buf
-        for ch in range(min(colors.shape[1], 3)):
-            np.copyto(
-                buf[:, ch],
-                np.interp(self._fit_cache_dst, self._fit_cache_src, colors[:, ch]),
-                casting="unsafe",
-            )
-        return buf
+            self._fit_cache_key = key
+
+        # Source slice: ColorStripStreams produce (N, 3); guard against (N, 4) RGBA.
+        rgb = colors[:, :3] if colors.ndim == 2 and colors.shape[1] > 3 else colors
+
+        left_u8 = self._fit_left_u8
+        right_u8 = self._fit_right_u8
+        blend = self._fit_blend_f32
+        out = self._fit_result_buf
+
+        # uint8 → uint8 take with `out=` — no allocation
+        np.take(rgb, self._fit_floor_idx, axis=0, out=left_u8)
+        np.take(rgb, self._fit_ceil_idx, axis=0, out=right_u8)
+        # Promote right to float32 in pre-allocated scratch
+        np.copyto(blend, right_u8, casting="unsafe")  # blend = right (float32)
+        blend -= left_u8  # blend = right - left
+        blend *= self._fit_frac  # blend = frac * (right - left)
+        blend += left_u8  # blend = left + frac * (right - left)
+        np.clip(blend, 0, 255, out=blend)
+        np.copyto(out, blend, casting="unsafe")  # float32 → uint8
+        return out
 
     async def _send_to_device(self, send_colors: np.ndarray) -> float:
         """Send colors to LED device and return send time in ms."""
@@ -663,6 +775,8 @@ class WledTargetProcessor(TargetProcessor):
             self._led_client.send_pixels_fast(send_colors)
         else:
             await self._led_client.send_pixels(send_colors)
+        # Approximate network throughput counter (LED-payload bytes only).
+        self._metrics.bytes_sent += int(send_colors.nbytes)
         return (time.perf_counter() - t_start) * 1000
 
     @staticmethod
@@ -774,14 +888,16 @@ class WledTargetProcessor(TargetProcessor):
         _diag_slow_iters: collections.deque = collections.deque(maxlen=50)
         _diag_iter_times: collections.deque = collections.deque(maxlen=300)
         # --- Liveness probe + adaptive FPS ---
+        # The probe runs as an independent task so the hot loop doesn't
+        # pay for per-iteration probe-state checks.
         _device_url = self._device_config.device_url if self._device_config else ""
         _probe_enabled = _device_url.startswith("http")
-        _probe_interval = 10.0  # seconds between probes
-        _last_probe_time = 0.0  # force first probe soon (after 10s)
         _probe_task: Optional[asyncio.Task] = None
-        _probe_client: Optional[httpx.AsyncClient] = None
         if _probe_enabled:
-            _probe_client = httpx.AsyncClient(timeout=httpx.Timeout(2.0))
+            _probe_task = asyncio.create_task(
+                self._run_liveness_probe_loop(_device_url),
+                name=f"liveness-probe-{self._target_id}",
+            )
         self._effective_fps = self._target_fps
         self._device_reachable = None
 
@@ -805,63 +921,8 @@ class WledTargetProcessor(TargetProcessor):
                     loop_start = now = time.perf_counter()
                     target_fps = self._target_fps if self._target_fps > 0 else 30
 
-                    # --- Liveness probe ---
-                    # Collect result as soon as it's done (every iteration)
-                    if _probe_task is not None and _probe_task.done():
-                        try:
-                            reachable = _probe_task.result()
-                        except Exception:
-                            reachable = False
-                        prev_reachable = self._device_reachable
-                        self._device_reachable = reachable
-                        self._metrics.device_streaming_reachable = reachable
-                        _probe_task = None
-
-                        if self._adaptive_fps:
-                            if not reachable:
-                                # Backoff: halve effective FPS
-                                old_eff = self._effective_fps
-                                self._effective_fps = max(1, self._effective_fps // 2)
-                                if old_eff != self._effective_fps:
-                                    logger.warning(
-                                        f"[ADAPTIVE] {self._target_id} device unreachable, "
-                                        f"FPS {old_eff} → {self._effective_fps}"
-                                    )
-                                    next_frame_time = time.perf_counter()
-                            else:
-                                # Recovery: gradually increase
-                                if self._effective_fps < target_fps:
-                                    step = max(1, target_fps // 8)
-                                    old_eff = self._effective_fps
-                                    self._effective_fps = min(
-                                        target_fps, self._effective_fps + step
-                                    )
-                                    if old_eff != self._effective_fps:
-                                        logger.info(
-                                            f"[ADAPTIVE] {self._target_id} device reachable, "
-                                            f"FPS {old_eff} → {self._effective_fps}"
-                                        )
-                                        next_frame_time = time.perf_counter()
-
-                        if prev_reachable != reachable:
-                            logger.info(
-                                f"[PROBE] {self._target_id} device "
-                                f"{'reachable' if reachable else 'UNREACHABLE'}"
-                            )
-
-                    # Fire new probe every _probe_interval seconds
-                    if (
-                        _probe_enabled
-                        and _probe_task is None
-                        and (now - _last_probe_time) >= _probe_interval
-                    ):
-                        if _probe_client is not None:
-                            _last_probe_time = now
-                            _probe_task = asyncio.create_task(
-                                self._probe_device(_device_url, _probe_client)
-                            )
-
-                    # Use effective FPS for frame timing
+                    # Use effective FPS for frame timing.  ``self._effective_fps``
+                    # is mutated by the liveness probe task — read once.
                     effective_fps = self._effective_fps if self._adaptive_fps else target_fps
                     self._metrics.fps_effective = effective_fps
                     frame_time = 1.0 / effective_fps
@@ -981,8 +1042,8 @@ class WledTargetProcessor(TargetProcessor):
                                     await self._broadcast_led_preview(send_colors, cur_brightness)
                                     _last_preview_broadcast = now
                             self._metrics.frames_skipped += 1
-                            self._metrics.fps_current = _fps_current_from_timestamps()
                             await asyncio.sleep(SKIP_REPOLL)
+                            self._metrics.fps_current = _fps_current_from_timestamps()
                             continue
 
                         # Force-send preview when a new client just connected
@@ -1024,10 +1085,10 @@ class WledTargetProcessor(TargetProcessor):
                                     await self._broadcast_led_preview(send_colors, cur_brightness)
                                     _last_preview_broadcast = now
                             self._metrics.frames_skipped += 1
-                            self._metrics.fps_current = _fps_current_from_timestamps()
                             is_animated = stream.is_animated
                             repoll = SKIP_REPOLL if is_animated else frame_time
                             await asyncio.sleep(repoll)
+                            self._metrics.fps_current = _fps_current_from_timestamps()
                             continue
 
                         prev_frame_ref = frame
@@ -1150,9 +1211,9 @@ class WledTargetProcessor(TargetProcessor):
             )
             raise
         finally:
-            # Clean up probe client
-            if _probe_client is not None:
-                await _probe_client.aclose()
+            # Stop the liveness probe task.  ``_run_liveness_probe_loop``
+            # owns its own httpx.AsyncClient via ``async with`` so cancelling
+            # the task closes the client cleanly.
             if _probe_task is not None and not _probe_task.done():
                 _probe_task.cancel()
                 try:

server/src/ledgrab/core/update/update_service.py

@@ -588,6 +588,14 @@ class UpdateService:
                     "body": rel.body,
                     "prerelease": rel.prerelease,
                     "published_at": rel.published_at,
+                    "assets": [
+                        {
+                            "name": a.name,
+                            "size": a.size,
+                            "download_url": a.download_url,
+                        }
+                        for a in rel.assets
+                    ],
                 }
                 if rel
                 else None

server/src/ledgrab/main.py

@@ -57,6 +57,7 @@ import ledgrab.core.audio.filters  # noqa: F401 — trigger audio filter auto-re
 from ledgrab.core.devices.mqtt_client import set_mqtt_service
 from ledgrab.core.backup.auto_backup import AutoBackupEngine
 from ledgrab.core.processing.os_notification_listener import OsNotificationListener
+from ledgrab.core.devices.discovery_watcher import DiscoveryWatcher
 from ledgrab.core.update.update_service import UpdateService
 from ledgrab.core.update.gitea_provider import GiteaReleaseProvider
 from ledgrab.storage.database import Database
@@ -365,6 +366,24 @@ async def lifespan(app: FastAPI):
     )
     os_notif_listener.start()
 
+    # Start background discovery watcher (mDNS + serial polling).
+    # Gated by user pref; default is on. The watcher emits
+    # device_discovered/device_lost events through the same fire_event
+    # bus that the health monitor uses for device_health_changed.
+    from ledgrab.api.routes.preferences import load_notification_preferences
+
+    discovery_watcher: DiscoveryWatcher | None = None
+    try:
+        notif_prefs = load_notification_preferences(db)
+        if notif_prefs.background_discovery_enabled:
+            discovery_watcher = DiscoveryWatcher(
+                device_store=device_store,
+                fire_event=processor_manager.fire_event,
+            )
+            await discovery_watcher.start()
+    except Exception as e:
+        logger.error(f"Failed to start discovery watcher: {e}")
+
     yield
 
     # Shutdown
@@ -406,15 +425,35 @@ async def lifespan(app: FastAPI):
     except Exception as e:
         logger.error(f"Error stopping automation engine: {e}")
 
+    # Stop discovery watcher (before health monitor stop so events still flow)
+    if discovery_watcher is not None:
+        try:
+            await discovery_watcher.stop()
+        except Exception as e:
+            logger.error(f"Error stopping discovery watcher: {e}")
+
     # Stop OS notification listener
     try:
         os_notif_listener.stop()
     except Exception as e:
         logger.error(f"Error stopping OS notification listener: {e}")
 
-    # Stop all processing
+    # Stop all processing.
+    # The shutdown action setting controls whether per-device restore
+    # frames are sent: "stop_targets" (default) runs the normal stop
+    # sequence; "nothing" cancels capture tasks so the LEDs freeze on
+    # their last frame.
     try:
-        await processor_manager.stop_all()
+        from ledgrab.api.routes.system_settings import load_shutdown_action
+
+        action = load_shutdown_action(db)
+    except Exception as e:
+        logger.error(f"Error reading shutdown action setting, defaulting to stop_targets: {e}")
+        action = "stop_targets"
+
+    logger.info("Shutdown action: %s", action)
+    try:
+        await processor_manager.stop_all(restore_devices=action != "nothing")
         logger.info("Stopped all processors")
     except Exception as e:
         logger.error(f"Error stopping processors: {e}")

server/src/ledgrab/static/css/all.css

@@ -2,12 +2,14 @@
 @import './fonts.css';
 @import './base.css';
 @import './layout.css';
+@import './sidebar.css';
 @import './components.css';
 @import './cards.css';
 @import './modal.css';
 @import './calibration.css';
 @import './advanced-calibration.css';
 @import './dashboard.css';
+@import './dashboard-customize.css';
 @import './streams.css';
 @import './patterns.css';
 @import './automations.css';

server/src/ledgrab/static/css/appearance.css

@@ -18,88 +18,95 @@ h1 {
     margin-bottom: 0.75rem;
 }
 
+/* Responsive preset grid — matches the mockup's tight 4-up rhythm
+   on desktop and gracefully reflows on narrow viewports. */
 .ap-grid {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 10px;
+    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+    gap: 6px;
+    margin-top: 6px;
 }
 
 /* ─── Preset card (shared) ─── */
 
 .ap-card {
+    --ap-ch: var(--ch-magenta, #ff4ade);
     position: relative;
     display: flex;
     flex-direction: column;
-    align-items: center;
-    gap: 6px;
-    padding: 6px;
-    border: 2px solid var(--border-color);
-    border-radius: var(--radius-md);
-    background: var(--card-bg);
+    align-items: stretch;
+    gap: 4px;
+    padding: 4px 4px 3px;
+    border: 1px solid var(--lux-line, var(--border-color));
+    border-radius: var(--lux-r-md, 8px);
+    background: var(--lux-bg-1, var(--card-bg));
     cursor: pointer;
     transition: border-color var(--duration-normal) var(--ease-out),
                 box-shadow var(--duration-normal) var(--ease-out),
                 transform var(--duration-fast) var(--ease-out);
 }
+.ap-card.ap-card-bg { --ap-ch: var(--ch-cyan, #00d8ff); }
 
 .ap-card:hover {
-    border-color: var(--text-muted);
+    border-color: color-mix(in srgb, var(--ap-ch) 50%, var(--lux-line, var(--border-color)));
     transform: translateY(-1px);
 }
 
 .ap-card.active {
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 1px var(--primary-color),
-                0 0 12px -2px color-mix(in srgb, var(--primary-color) 40%, transparent);
+    border: 2px solid var(--ap-ch);
+    padding: 3px 3px 2px;
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ap-ch) 40%, transparent),
+                0 0 16px -4px color-mix(in srgb, var(--ap-ch) 50%, transparent);
 }
 
 .ap-card.active::after {
     content: '\2713';
     position: absolute;
-    top: 4px;
-    right: 6px;
-    font-size: 0.65rem;
+    top: 3px;
+    right: 4px;
+    font-size: 0.55rem;
     font-weight: 700;
-    color: var(--primary-color);
+    color: var(--ap-ch);
 }
 
 .ap-card-label {
-    font-size: 0.72rem;
+    font-size: 0.62rem;
     font-weight: 600;
-    color: var(--text-secondary);
+    color: var(--lux-ink-dim, var(--text-secondary));
     text-align: center;
-    line-height: 1.2;
+    line-height: 1.15;
+    letter-spacing: 0.02em;
 }
 
 .ap-card.active .ap-card-label {
-    color: var(--primary-color);
+    color: var(--ap-ch);
 }
 
 /* ─── Style preset preview ─── */
 
 .ap-card-preview {
     width: 100%;
-    aspect-ratio: 4 / 3;
-    border-radius: var(--radius-sm);
+    aspect-ratio: 1 / 1;
+    border-radius: var(--lux-r-sm, 4px);
     border: 1px solid;
-    padding: 8px 7px 6px;
+    padding: 5px 5px 4px;
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: 3px;
     overflow: hidden;
 }
 
 .ap-card-accent {
-    width: 24px;
-    height: 4px;
+    width: 18px;
+    height: 3px;
     border-radius: 2px;
-    margin-bottom: 2px;
+    margin-bottom: 1px;
 }
 
 .ap-card-lines {
     display: flex;
     flex-direction: column;
-    gap: 3px;
+    gap: 2px;
 }
 
 .ap-card-lines span {
@@ -113,12 +120,12 @@ h1 {
 
 .ap-bg-preview {
     width: 100%;
-    aspect-ratio: 4 / 3;
-    border-radius: var(--radius-sm);
+    aspect-ratio: 1 / 1;
+    border-radius: var(--lux-r-sm, 4px);
     overflow: hidden;
     position: relative;
     background: var(--bg-color);
-    border: 1px solid var(--border-color);
+    border: 1px solid var(--lux-line, var(--border-color));
 }
 
 .ap-bg-preview-inner {

server/src/ledgrab/static/css/automations.css

@@ -1,44 +1,23 @@
 /* ===== AUTOMATIONS ===== */
 
-.badge-automation-active {
-    background: var(--success-color);
-    color: #fff;
-}
-
-.badge-automation-inactive {
-    background: var(--border-color);
-    color: var(--text-color);
-}
-
-.badge-automation-disabled {
-    background: var(--border-color);
-    color: var(--text-muted);
-    opacity: 0.7;
-}
-
 .automation-status-disabled {
     opacity: 0.6;
 }
 
-.automation-logic-label {
-    font-size: 0.7rem;
+/* Chain-arrow separator — slips between chips on the AUTO card to
+   render the rule flow visually (rule + rule → scene ↩ revert).
+   Used inside .mod-chips, channel-tinted via the parent's --ch. */
+.mod-card .chain-arrow {
+    display: inline-flex;
+    align-items: center;
+    color: var(--ch);
+    opacity: 0.65;
+    font-family: var(--font-mono, monospace);
+    font-size: 0.72rem;
     font-weight: 600;
-    color: var(--text-muted);
-    padding: 0 4px;
-}
-
-/* Automation rule pills — constrain to card width */
-[data-automation-id] .card-meta {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 4px;
-    min-width: 0;
-}
-[data-automation-id] .stream-card-prop {
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    letter-spacing: 0.04em;
+    user-select: none;
+    flex-shrink: 0;
 }
 
 /* Automation rule editor rows */

server/src/ledgrab/static/css/base.css

@@ -16,7 +16,25 @@
     --danger-color: #f44336;
     --warning-color: #ff9800;
     --info-color: #2196F3;
-    --font-mono: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
+    --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
+
+    /* ── Lumenworks design tokens (additive; active alongside legacy tokens
+           during phased migration). Typography + spatial system for the
+           studio-console redesign. Channel colors defined in the theme
+           blocks below so they can shift with light/dark mode. ──────── */
+    --font-display: 'Big Shoulders Display', 'Orbitron', 'Manrope', sans-serif;
+    --font-brand:   'Orbitron', sans-serif;
+    --font-body:    'Manrope', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+
+    --lux-r-sm: 3px;
+    --lux-r-md: 6px;
+    --lux-r-lg: 10px;
+    --lux-r-xl: 14px;
+
+    /* Hairline + bold dividers — thinner than the legacy 1px --border-color
+       to get the "silkscreened panel" feel. */
+    --lux-hairline: 1px;
+    --lux-rule:     2px;
 
     /* Spacing scale */
     --space-xs: 4px;
@@ -81,9 +99,9 @@
 
 /* Dark theme (default) */
 [data-theme="dark"] {
-    --bg-color: #1a1a1a;
-    --bg-secondary: #242424;
-    --card-bg: #2d2d2d;
+    --bg-color: #000000;
+    --bg-secondary: #0a0b0d;
+    --card-bg: #000000;
     --text-color: #e0e0e0;
     --text-primary: #e0e0e0;
     --text-secondary: #999;
@@ -96,12 +114,40 @@
     --hover-bg: rgba(255, 255, 255, 0.05);
     --input-bg: #1a1a2e;
     color-scheme: dark;
+
+    /* ── Lumenworks dark palette — page is pure black, cards elevate ── */
+    --lux-bg-0:     #000000;
+    --lux-bg-1:     #0e1014;
+    --lux-bg-2:     #15181d;
+    --lux-bg-3:     #1c2027;
+    --lux-line:     #232831;
+    --lux-line-bold:#2e3440;
+    --lux-ink:      #e6ebf2;
+    --lux-ink-dim:  #8b95a5;
+    --lux-ink-mute: #5b6473;
+    --lux-ink-faint:#3a414c;
+
+    /* Channel palette — consistent across tabs for entity types.
+       --ch-signal tracks --primary-color so the accent color picker
+       propagates through the brand mark, running stripes, transport
+       chip, active tabs, etc. Other channels are fixed hues used for
+       non-primary entity types. */
+    --ch-signal:  var(--primary-color);
+    --ch-signal-dim: var(--primary-text-color, var(--primary-color));
+    --ch-cyan:    #00d8ff;  /* data / sources / screen */
+    --ch-magenta: #ff4ade;  /* audio / FFT */
+    --ch-amber:   #ffb800;  /* autostart / pending */
+    --ch-coral:   #ff5e5e;  /* offline / error / alarm */
+    --ch-violet:  #8b7eff;  /* graph / scenes / automations */
+
+    --lux-signal-glow: 0 0 14px color-mix(in srgb, var(--ch-signal) 40%, transparent);
+    --lux-shadow-rack: 0 1px 0 rgba(255, 255, 255, 0.03), 0 8px 24px rgba(0, 0, 0, 0.5);
 }
 
 /* Light theme */
 [data-theme="light"] {
-    --bg-color: #f5f5f5;
-    --bg-secondary: #eee;
+    --bg-color: #ffffff;
+    --bg-secondary: #fafbfc;
     --card-bg: #ffffff;
     --text-color: #333333;
     --text-primary: #333333;
@@ -120,6 +166,32 @@
     --primary-color-on-light-bg: #2e7d32;
     --primary-text: #2e7d32;
     color-scheme: light;
+
+    /* ── Lumenworks light palette — page is pure white, cards slightly
+         off-white so the stripe + hairline border still read against
+         the page. WCAG AA tuned. ── */
+    --lux-bg-0:     #ffffff;
+    --lux-bg-1:     #f6f8fb;
+    --lux-bg-2:     #eef1f5;
+    --lux-bg-3:     #e4e8ee;
+    --lux-line:     #dee3ea;
+    --lux-line-bold:#c4ccd6;
+    --lux-ink:      #0f1419;
+    --lux-ink-dim:  #4c5866;
+    --lux-ink-mute: #6b7684;
+    --lux-ink-faint:#a5afbc;
+
+    /* --ch-signal tracks --primary-color so the accent picker propagates. */
+    --ch-signal:  var(--primary-color);
+    --ch-signal-dim: var(--primary-text-color, var(--primary-color));
+    --ch-cyan:    #006b88;
+    --ch-magenta: #b01a99;
+    --ch-amber:   #a56a00;
+    --ch-coral:   #d8392e;
+    --ch-violet:  #5b4fd0;
+
+    --lux-signal-glow: 0 0 12px color-mix(in srgb, var(--ch-signal) 28%, transparent);
+    --lux-shadow-rack: 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 18px rgba(0, 0, 0, 0.08);
 }
 
 /* Default to dark theme */
@@ -137,10 +209,12 @@ html {
 }
 
 body {
-    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    font-family: var(--font-body, 'Manrope', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
     background: var(--bg-color);
     color: var(--text-color);
-    line-height: 1.6;
+    line-height: 1.55;
+    font-feature-settings: "ss01", "cv11";
+    -webkit-font-smoothing: antialiased;
 }
 
 html.modal-open {
@@ -167,21 +241,11 @@ html.modal-open {
     background: transparent;
 }
 
-/* When bg-anim is active, make entity cards slightly translucent
-   so the shader bleeds through. Only target cards — NOT modals,
-   pickers, tab bars, headers, or other chrome. */
-[data-bg-anim="on"][data-theme="dark"] .card,
-[data-bg-anim="on"][data-theme="dark"] .template-card,
-[data-bg-anim="on"][data-theme="dark"] .add-device-card,
-[data-bg-anim="on"][data-theme="dark"] .dashboard-target {
-    background: rgba(45, 45, 45, 0.88);
-}
-[data-bg-anim="on"][data-theme="light"] .card,
-[data-bg-anim="on"][data-theme="light"] .template-card,
-[data-bg-anim="on"][data-theme="light"] .add-device-card,
-[data-bg-anim="on"][data-theme="light"] .dashboard-target {
-    background: rgba(255, 255, 255, 0.85);
-}
+/* Card backgrounds are intentionally stable across the dynamic-bg
+   toggle — the shader bleeds through the page background only.
+   (Previously a translucent override let the shader show through
+   cards too, but it made the same card look different depending on
+   whether the user had the WebGL background enabled.) */
 /* Blur behind header via pseudo-element — applying backdrop-filter directly
    to header would create a containing block and break position:fixed on
    the .tab-bar nested inside it (mobile bottom nav). */

server/src/ledgrab/static/css/components.css

@@ -23,32 +23,40 @@
 
 .card-actions {
     display: flex;
-    gap: 8px;
+    gap: 6px;
     margin-top: auto;
     padding-top: 12px;
-    border-top: 1px solid var(--border-color);
+    border-top: var(--lux-hairline, 1px) solid var(--lux-line, var(--border-color));
     align-items: center;
 }
 
 .card-actions .btn-icon {
-    padding: 6px 8px;
-    font-size: 1.1rem;
+    padding: 7px 10px;
+    min-width: 36px;
+    font-size: 0.95rem;
 }
 
 .btn {
-    padding: 8px 16px;
-    border: none;
-    border-radius: var(--radius-sm);
+    padding: 9px 18px;
+    border: var(--lux-hairline, 1px) solid transparent;
+    border-radius: var(--lux-r-sm, var(--radius-sm));
     cursor: pointer;
-    font-size: 0.9rem;
+    font-family: var(--font-mono, inherit);
+    font-size: 0.78rem;
     font-weight: 600;
-    transition: opacity 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    transition: opacity 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, filter 0.15s ease;
     flex: 1 1 auto;
     min-width: 100px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
 }
 
 .btn:hover {
-    opacity: 0.9;
+    filter: brightness(1.08);
 }
 
 .btn:active:not(:disabled) {
@@ -62,30 +70,90 @@
 }
 
 .btn-primary {
-    background: var(--primary-color);
-    color: var(--primary-contrast);
+    background: var(--ch-signal, var(--primary-color));
+    color: var(--lux-bg-0, var(--primary-contrast));
+    border-color: var(--ch-signal, var(--primary-color));
+    box-shadow: 0 0 14px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 30%, transparent);
 }
 
 .btn-danger {
-    background: var(--danger-color);
-    color: white;
+    background: var(--ch-coral, var(--danger-color));
+    color: #fff;
+    border-color: var(--ch-coral, var(--danger-color));
+    box-shadow: 0 0 14px color-mix(in srgb, var(--ch-coral, var(--danger-color)) 30%, transparent);
 }
 
 .btn-secondary {
-    background: var(--border-color);
-    color: var(--text-color);
+    background: var(--lux-bg-2, var(--border-color));
+    color: var(--lux-ink-dim, var(--text-color));
+    border-color: var(--lux-line-bold, var(--border-color));
+}
+
+.btn-secondary:hover {
+    color: var(--lux-ink, var(--text-color));
+    background: var(--lux-bg-3, var(--border-color));
+}
+
+/* Transparent hairline variant — used for low-emphasis actions like
+   "Revert" inside the per-section save bar. */
+.btn-ghost {
+    background: transparent;
+    color: var(--lux-ink-dim, var(--text-color));
+    border-color: var(--lux-line, var(--border-color));
+}
+.btn-ghost:hover {
+    background: var(--hover-bg, rgba(255, 255, 255, 0.05));
+    color: var(--lux-ink, var(--text-color));
+    border-color: var(--lux-line-bold, var(--border-color));
 }
 
 .btn-icon {
     min-width: auto;
-    padding: 8px 12px;
-    font-size: 1.2rem;
+    padding: 7px 10px;
+    font-size: 1rem;
     flex: 0 0 auto;
+    border: var(--lux-hairline, 1px) solid var(--lux-line, var(--border-color));
+    background: transparent;
+    color: var(--lux-ink-dim, var(--text-color));
+    transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
 }
 
 .btn-icon:hover {
-    transform: scale(1.1);
+    transform: none;
     opacity: 1;
+    color: var(--lux-ink, var(--text-color));
+    background: var(--lux-bg-2, var(--bg-secondary));
+    border-color: color-mix(in srgb, var(--ch-signal, var(--primary-color)) 35%, var(--lux-line-bold, var(--border-color)));
+    filter: none;
+    box-shadow: 0 0 8px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 18%, transparent);
+}
+
+/* Variant: warning / success for enable/disable action buttons. Keep
+   flat hairline borders; just shift the color + hover glow. */
+.btn-icon.btn-warning {
+    color: var(--ch-amber, var(--warning-color));
+    border-color: color-mix(in srgb, var(--ch-amber, var(--warning-color)) 35%, transparent);
+    background: transparent;
+    box-shadow: none;
+}
+.btn-icon.btn-warning:hover {
+    background: color-mix(in srgb, var(--ch-amber, var(--warning-color)) 12%, transparent);
+    color: var(--ch-amber, var(--warning-color));
+    border-color: color-mix(in srgb, var(--ch-amber, var(--warning-color)) 50%, transparent);
+    box-shadow: 0 0 10px color-mix(in srgb, var(--ch-amber, var(--warning-color)) 25%, transparent);
+}
+
+.btn-icon.btn-success {
+    color: var(--ch-signal, var(--primary-color));
+    border-color: color-mix(in srgb, var(--ch-signal, var(--primary-color)) 40%, transparent);
+    background: transparent;
+    box-shadow: none;
+}
+.btn-icon.btn-success:hover {
+    background: color-mix(in srgb, var(--ch-signal, var(--primary-color)) 14%, transparent);
+    color: var(--ch-signal, var(--primary-color));
+    border-color: color-mix(in srgb, var(--ch-signal, var(--primary-color)) 55%, transparent);
+    box-shadow: 0 0 12px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 30%, transparent);
 }
 
 .btn-icon:active:not(:disabled) {
@@ -161,14 +229,29 @@ input[type="number"],
 input[type="password"],
 select {
     width: 100%;
-    padding: 10px;
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-sm);
-    background: var(--bg-color);
-    color: var(--text-color);
-    font-size: 1rem;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-    transition: border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.2s ease;
+    padding: 9px 12px;
+    border: var(--lux-hairline, 1px) solid var(--lux-line, var(--border-color));
+    border-radius: var(--lux-r-sm, var(--radius-sm));
+    background: var(--lux-bg-0, var(--bg-color));
+    color: var(--lux-ink, var(--text-color));
+    font-size: 0.95rem;
+    font-family: var(--font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, opacity 0.2s ease;
+}
+
+/* Numeric fields use mono for alignment */
+input[type="number"] {
+    font-family: var(--font-mono, monospace);
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.02em;
+}
+
+input[type="text"]:hover,
+input[type="url"]:hover,
+input[type="number"]:hover,
+input[type="password"]:hover,
+select:hover {
+    border-color: var(--lux-line-bold, var(--border-color));
 }
 
 input[type="number"]:disabled,
@@ -190,10 +273,14 @@ input[type="password"] {
 }
 
 input:focus,
-select:focus {
+select:focus,
+textarea:focus {
     outline: none;
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15);
+    border-color: var(--ch-signal, var(--primary-color));
+    box-shadow:
+        0 0 0 3px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 18%, transparent),
+        0 0 16px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 20%, transparent);
+    background: var(--lux-bg-1, var(--bg-color));
 }
 
 /* Inline validation states */
@@ -360,21 +447,52 @@ input:-webkit-autofill:focus {
 }
 
 .toast {
+    --toast-ch: var(--primary-color);
     position: fixed;
     bottom: 40px;
     left: 50%;
     transform: translateX(-50%) translateY(100px);
-    padding: 16px 24px;
-    border-radius: var(--radius-md);
-    color: white;
+    padding: 14px 22px;
+    border-radius: var(--lux-r-lg, var(--radius-md, 10px));
+    color: var(--lux-ink, #fff);
     font-weight: 600;
-    font-size: 15px;
+    font-size: 14.5px;
+    letter-spacing: 0.01em;
     opacity: 0;
-    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
+                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
     z-index: var(--z-toast);
-    box-shadow: 0 4px 20px var(--shadow-color);
+    background: linear-gradient(180deg,
+        var(--lux-bg-1, var(--card-bg)) 0%,
+        var(--lux-bg-2, var(--card-bg)) 100%);
+    border: var(--lux-hairline, 1px) solid color-mix(in srgb,
+        var(--toast-ch) 35%, var(--lux-line-bold, var(--border-color)));
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    box-shadow:
+        0 0 0 1px rgba(255, 255, 255, 0.02),
+        0 14px 40px rgba(0, 0, 0, 0.5),
+        0 0 26px color-mix(in srgb, var(--toast-ch) 22%, transparent);
     min-width: 300px;
+    max-width: min(560px, calc(100vw - 32px));
     text-align: center;
+    overflow: hidden;
+}
+
+/* Top accent stripe — matches modals/bulk-toolbar so the channel language
+   is consistent across every floating surface. */
+.toast::before {
+    content: '';
+    position: absolute;
+    left: 0; right: 0; top: 0;
+    height: 1.5px;
+    background: linear-gradient(90deg,
+        transparent 0%,
+        var(--toast-ch) 20%,
+        var(--toast-ch) 80%,
+        transparent 100%);
+    box-shadow: 0 0 12px color-mix(in srgb, var(--toast-ch) 55%, transparent);
+    pointer-events: none;
 }
 
 .toast.show {
@@ -384,23 +502,15 @@ input:-webkit-autofill:focus {
 }
 
 @keyframes toastBounceIn {
-    0% { transform: translateX(-50%) translateY(60px); opacity: 0; }
-    50% { transform: translateX(-50%) translateY(-4px); opacity: 1; }
-    70% { transform: translateX(-50%) translateY(2px); }
+    0%   { transform: translateX(-50%) translateY(60px); opacity: 0; }
+    50%  { transform: translateX(-50%) translateY(-4px); opacity: 1; }
+    70%  { transform: translateX(-50%) translateY(2px); }
     100% { transform: translateX(-50%) translateY(0); }
 }
 
-.toast.success {
-    background: var(--primary-color);
-}
-
-.toast.error {
-    background: var(--danger-color);
-}
-
-.toast.info {
-    background: var(--info-color);
-}
+.toast.success { --toast-ch: var(--primary-color); }
+.toast.error   { --toast-ch: var(--danger-color); }
+.toast.info    { --toast-ch: var(--info-color); }
 
 /* Toast with undo action */
 .toast-with-action {
@@ -414,31 +524,38 @@ input:-webkit-autofill:focus {
 }
 
 .toast-undo-btn {
-    background: rgba(255, 255, 255, 0.25);
-    border: 1px solid rgba(255, 255, 255, 0.4);
-    color: white;
-    padding: 4px 12px;
-    border-radius: var(--radius-sm);
+    background: color-mix(in srgb, var(--toast-ch) 18%, transparent);
+    border: 1px solid color-mix(in srgb, var(--toast-ch) 50%, transparent);
+    color: var(--lux-ink, #fff);
+    padding: 5px 14px;
+    border-radius: var(--lux-r-sm, var(--radius-sm));
     font-weight: var(--weight-semibold, 600);
     font-size: 0.85rem;
+    letter-spacing: 0.04em;
     cursor: pointer;
-    transition: background var(--duration-fast, 0.15s);
+    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
     white-space: nowrap;
     flex-shrink: 0;
 }
 
 .toast-undo-btn:hover {
-    background: rgba(255, 255, 255, 0.4);
+    background: color-mix(in srgb, var(--toast-ch) 32%, transparent);
+    border-color: var(--toast-ch);
+    box-shadow: 0 0 14px color-mix(in srgb, var(--toast-ch) 35%, transparent);
 }
 
 .toast-timer {
     width: 100%;
-    height: 3px;
+    height: 2px;
     position: absolute;
     bottom: 0;
     left: 0;
-    border-radius: 0 0 var(--radius-md) var(--radius-md);
-    background: rgba(255, 255, 255, 0.3);
+    border-radius: 0 0 var(--lux-r-lg, var(--radius-md)) var(--lux-r-lg, var(--radius-md));
+    background: linear-gradient(90deg,
+        color-mix(in srgb, var(--toast-ch) 70%, transparent) 0%,
+        var(--toast-ch) 50%,
+        color-mix(in srgb, var(--toast-ch) 70%, transparent) 100%);
+    box-shadow: 0 0 8px color-mix(in srgb, var(--toast-ch) 60%, transparent);
     transform-origin: left;
     animation: toastTimer var(--toast-duration, 5s) linear forwards;
 }
@@ -675,6 +792,15 @@ textarea:focus-visible {
     margin-left: auto;
 }
 
+/* Hide empty icon/label slots so flex gaps don't reserve unused space.
+   Used by minimal items like the locale picker (2-letter code only). */
+.icon-select-trigger-icon:empty,
+.icon-select-trigger-label:empty,
+.icon-select-cell-icon:empty,
+.icon-select-cell-label:empty {
+    display: none;
+}
+
 .icon-select-popup {
     position: fixed;
     z-index: var(--z-lightbox);
@@ -1033,6 +1159,116 @@ textarea:focus-visible {
     font-size: 0.9rem;
 }
 
+/* ── Timezone picker (Settings modal) ──────────────────────
+   Refined "instrument readout" trigger that matches the lux
+   sectional design language used in the rest of the modal:
+   - hairline border, deeper bg, monospaced offset chip
+   - region icon stenciled in --ch-cyan to echo section dots
+   - subtle hover glow on the channel hue, not the primary green */
+
+.tz-picker-wrap {
+    position: relative;
+    display: block;
+    isolation: isolate;
+}
+
+.tz-picker-wrap .entity-select-trigger {
+    --tz-ch: var(--ch-cyan, var(--primary-color));
+    background: var(--lux-bg-1, var(--bg-color));
+    border: var(--lux-hairline, 1px) solid var(--lux-line, var(--border-color));
+    border-radius: var(--lux-r-md, 6px);
+    padding: 10px 12px;
+    gap: 12px;
+    font-feature-settings: "ss01", "tnum";
+    font-variant-numeric: tabular-nums;
+    color: var(--lux-ink, var(--text-color));
+    transition:
+        border-color 180ms var(--ease-out, ease-out),
+        background 180ms var(--ease-out, ease-out),
+        box-shadow 220ms var(--ease-out, ease-out);
+}
+
+.tz-picker-wrap .entity-select-trigger::before {
+    content: "";
+    position: absolute;
+    inset: 0 auto 0 0;
+    width: 2px;
+    background: linear-gradient(
+        to bottom,
+        color-mix(in srgb, var(--tz-ch) 80%, transparent),
+        color-mix(in srgb, var(--tz-ch) 0%, transparent) 70%
+    );
+    border-radius: var(--lux-r-md, 6px) 0 0 var(--lux-r-md, 6px);
+    opacity: 0.75;
+    pointer-events: none;
+    transition: opacity 220ms var(--ease-out, ease-out);
+}
+
+.tz-picker-wrap .entity-select-trigger:hover {
+    border-color: color-mix(in srgb, var(--tz-ch) 55%, var(--lux-line-bold, var(--border-color)));
+    background: var(--lux-bg-2, var(--bg-secondary));
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--tz-ch) 18%, transparent),
+                0 8px 24px -10px color-mix(in srgb, var(--tz-ch) 30%, transparent);
+}
+
+.tz-picker-wrap .entity-select-trigger:hover::before {
+    opacity: 1;
+}
+
+.tz-picker-wrap .entity-select-trigger:focus-visible {
+    outline: none;
+    border-color: var(--tz-ch);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tz-ch) 25%, transparent);
+}
+
+.tz-picker-wrap .es-trigger-icon {
+    width: 28px;
+    height: 28px;
+    border-radius: var(--lux-r-sm, 3px);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: color-mix(in srgb, var(--tz-ch) 12%, transparent);
+    border: var(--lux-hairline, 1px) solid color-mix(in srgb, var(--tz-ch) 25%, transparent);
+    color: var(--tz-ch);
+}
+
+.tz-picker-wrap .es-trigger-icon .icon {
+    width: 14px;
+    height: 14px;
+}
+
+.tz-picker-wrap .es-trigger-label {
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    color: var(--lux-ink, var(--text-color));
+}
+
+/* Render the offset segment after the city in monospaced "panel-meter" type */
+.tz-picker-wrap .es-trigger-label {
+    /* Allow ellipsis to keep the trigger compact in narrow layouts. */
+    min-width: 0;
+}
+
+.tz-picker-wrap .es-trigger-arrow {
+    color: var(--lux-ink-mute, var(--text-secondary));
+    opacity: 0.7;
+    transform: translateY(-1px);
+    transition: transform 220ms var(--ease-out, ease-out), color 180ms ease;
+}
+
+.tz-picker-wrap:hover .es-trigger-arrow {
+    color: var(--tz-ch);
+    opacity: 1;
+    transform: translateY(0);
+}
+
+/* When the value is the system default (empty string), dim the label slightly
+   so users can see it is in the "no override" state at a glance. */
+.tz-picker-wrap .entity-select-trigger:has(.es-trigger-none) {
+    border-style: dashed;
+}
+
 /* ── Scroll-to-top button ── */
 
 .scroll-to-top {

server/src/ledgrab/static/css/dashboard-customize.css

@@ -0,0 +1,517 @@
+/* ── Dashboard Customize Panel ──
+ * Slide-in panel on the right edge. Doesn't cover the full viewport so
+ * users see live previews of changes as they toggle settings.
+ */
+
+.dash-cust-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.18);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    z-index: calc(var(--z-modal, 1000) - 5);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 200ms ease;
+}
+
+.dash-cust-backdrop.is-open {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.dash-cust-panel {
+    position: fixed;
+    top: 60px; /* below transport bar */
+    right: 0;
+    bottom: 0;
+    width: min(440px, 92vw);
+    background: var(--lux-bg-1, var(--card-bg));
+    border-left: var(--lux-rule, 1px) solid var(--lux-line, var(--border-color));
+    box-shadow: var(--lux-shadow-rack, -8px 0 32px rgba(0, 0, 0, 0.35));
+    z-index: var(--z-modal, 1000);
+    transform: translateX(100%);
+    transition: transform 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.dash-cust-panel.is-open {
+    transform: translateX(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .dash-cust-panel { transition: none; }
+    .dash-cust-backdrop { transition: none; }
+}
+
+.dash-cust-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px 18px;
+    border-bottom: var(--lux-hairline, 1px) solid var(--lux-line, var(--border-color));
+    flex: 0 0 auto;
+}
+
+.dash-cust-header h2 {
+    margin: 0;
+    font-family: var(--font-display, var(--font-mono, monospace));
+    font-size: 0.78rem;
+    font-weight: 700;
+    letter-spacing: 0.28em;
+    text-transform: uppercase;
+    color: var(--lux-ink, var(--text-color));
+    position: relative;
+}
+
+.dash-cust-header h2::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: -8px;
+    width: 32px;
+    height: 1px;
+    background: var(--ch-signal, var(--primary-color));
+    box-shadow: 0 0 6px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 50%, transparent);
+}
+
+.dash-cust-close {
+    background: transparent;
+    border: var(--lux-hairline, 1px) solid var(--lux-line, var(--border-color));
+    color: var(--lux-ink-dim, var(--text-secondary));
+    width: 28px;
+    height: 28px;
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
+}
+
+.dash-cust-close:hover {
+    color: var(--lux-ink, var(--text-color));
+    border-color: var(--ch-signal, var(--primary-color));
+    background: color-mix(in srgb, var(--ch-signal, var(--primary-color)) 12%, transparent);
+}
+
+.dash-cust-body {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    padding: 14px 16px 18px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    /* Prevent scroll chaining: when the panel's scroll reaches its top
+     * or bottom, the wheel/touch scroll should NOT propagate to the
+     * underlying dashboard page. */
+    overscroll-behavior: contain;
+}
+
+/* Section blocks */
+.dash-cust-section {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.dash-cust-section + .dash-cust-section {
+    margin-top: 4px;
+}
+
+.dash-cust-h3 {
+    margin: 0 0 2px;
+    font-family: var(--font-mono, monospace);
+    font-size: 0.66rem;
+    font-weight: 700;
+    letter-spacing: 0.24em;
+    text-transform: uppercase;
+    color: var(--lux-ink-dim, var(--text-secondary));
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding-bottom: 4px;
+    border-bottom: var(--lux-hairline, 1px) solid var(--lux-line, var(--border-color));
+}
+
+.dash-cust-modified {
+    font-size: 0.55rem;
+    letter-spacing: 0.18em;
+    color: var(--ch-amber, var(--warning-color));
+    margin-left: auto;
+    font-weight: 600;
+    padding: 1px 6px;
+    border: 1px solid color-mix(in srgb, var(--ch-amber, var(--warning-color)) 50%, transparent);
+    border-radius: 2px;
+}
+
+/* Preset chips */
+.dash-cust-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.dash-cust-chip {
+    background: var(--lux-bg-2, var(--bg-secondary));
+    color: var(--lux-ink-dim, var(--text-secondary));
+    border: var(--lux-hairline, 1px) solid var(--lux-line, var(--border-color));
+    padding: 6px 12px;
+    border-radius: 3px;
+    font-family: var(--font-mono, monospace);
+    font-size: 0.7rem;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    cursor: pointer;
+    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
+}
+
+.dash-cust-chip:hover {
+    color: var(--lux-ink, var(--text-color));
+    border-color: var(--lux-line-bold, var(--text-secondary));
+}
+
+.dash-cust-chip.is-active {
+    background: color-mix(in srgb, var(--ch-signal, var(--primary-color)) 14%, transparent);
+    color: var(--lux-ink, var(--text-color));
+    border-color: var(--ch-signal, var(--primary-color));
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 25%, transparent),
+                0 0 12px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 30%, transparent);
+}
+
+/* Rows + lists */
+.dash-cust-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.dash-cust-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 8px;
+    background: var(--lux-bg-2, var(--bg-secondary));
+    border: var(--lux-hairline, 1px) solid var(--lux-line, var(--border-color));
+    border-radius: 3px;
+    transition: background 150ms ease, border-color 150ms ease, transform 100ms ease;
+}
+
+.dash-cust-row.is-dragging {
+    opacity: 0.55;
+    transform: scale(0.98);
+}
+
+.dash-cust-row.is-drop-target {
+    border-color: var(--ch-signal, var(--primary-color));
+    background: color-mix(in srgb, var(--ch-signal, var(--primary-color)) 8%, transparent);
+}
+
+.dash-cust-row-fixed {
+    background: color-mix(in srgb, var(--lux-line, var(--border-color)) 30%, transparent);
+}
+
+.dash-cust-row-drag {
+    cursor: grab;
+}
+
+.dash-cust-row-drag:active {
+    cursor: grabbing;
+}
+
+.dash-cust-row-label {
+    flex: 1 1 auto;
+    font-family: var(--font-body, inherit);
+    font-size: 0.78rem;
+    color: var(--lux-ink, var(--text-color));
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.dash-cust-row-label .dash-cust-pin {
+    display: inline-flex;
+    align-items: center;
+    margin-right: 6px;
+    color: var(--lux-ink-mute, var(--text-muted));
+}
+
+.dash-cust-grip {
+    color: var(--lux-ink-mute, var(--text-muted));
+    width: 14px;
+    height: 14px;
+    flex: 0 0 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.dash-cust-row-drag:hover .dash-cust-grip {
+    color: var(--lux-ink, var(--text-color));
+}
+
+/* Density buttons */
+.dash-cust-density-group {
+    display: inline-flex;
+    border: var(--lux-hairline, 1px) solid var(--lux-line, var(--border-color));
+    border-radius: 3px;
+    overflow: hidden;
+}
+
+.dash-cust-density {
+    background: transparent;
+    border: 0;
+    padding: 2px 6px;
+    color: var(--lux-ink-dim, var(--text-secondary));
+    font-family: var(--font-mono, monospace);
+    font-size: 0.6rem;
+    font-weight: 700;
+    cursor: pointer;
+    transition: background 150ms ease, color 150ms ease;
+}
+
+.dash-cust-density:not(:last-child) {
+    border-right: var(--lux-hairline, 1px) solid var(--lux-line, var(--border-color));
+}
+
+.dash-cust-density:hover {
+    color: var(--lux-ink, var(--text-color));
+}
+
+.dash-cust-density.is-active {
+    background: color-mix(in srgb, var(--ch-signal, var(--primary-color)) 18%, transparent);
+    color: var(--lux-ink, var(--text-color));
+}
+
+/* Eye / toggle button */
+.dash-cust-eye, .dash-cust-arrow {
+    background: transparent;
+    border: var(--lux-hairline, 1px) solid var(--lux-line, var(--border-color));
+    color: var(--lux-ink-mute, var(--text-muted));
+    width: 26px;
+    height: 26px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 3px;
+    cursor: pointer;
+    flex: 0 0 26px;
+    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
+}
+
+.dash-cust-eye:hover, .dash-cust-arrow:hover {
+    color: var(--lux-ink, var(--text-color));
+    border-color: var(--lux-line-bold, var(--text-secondary));
+}
+
+.dash-cust-eye.is-on {
+    color: var(--ch-signal, var(--primary-color));
+    border-color: color-mix(in srgb, var(--ch-signal, var(--primary-color)) 50%, var(--lux-line, var(--border-color)));
+}
+
+.dash-cust-arrow.is-active {
+    color: var(--ch-amber, var(--warning-color));
+    border-color: color-mix(in srgb, var(--ch-amber, var(--warning-color)) 50%, var(--lux-line, var(--border-color)));
+}
+
+.dash-cust-arrow {
+    font-family: var(--font-mono, monospace);
+    font-size: 0.85rem;
+    font-weight: 700;
+}
+
+/* Segmented controls (global options) */
+.dash-cust-row .dash-cust-label {
+    flex: 0 0 auto;
+    font-family: var(--font-mono, monospace);
+    font-size: 0.66rem;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--lux-ink-dim, var(--text-secondary));
+    min-width: 80px;
+}
+
+.dash-cust-seg {
+    display: inline-flex;
+    border: var(--lux-hairline, 1px) solid var(--lux-line, var(--border-color));
+    border-radius: 3px;
+    overflow: hidden;
+    flex: 1 1 auto;
+}
+
+.dash-cust-seg-btn {
+    flex: 1 1 auto;
+    background: transparent;
+    border: 0;
+    padding: 5px 8px;
+    color: var(--lux-ink-dim, var(--text-secondary));
+    font-family: var(--font-mono, monospace);
+    font-size: 0.65rem;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: background 150ms ease, color 150ms ease;
+}
+
+.dash-cust-seg-btn:not(:last-child) {
+    border-right: var(--lux-hairline, 1px) solid var(--lux-line, var(--border-color));
+}
+
+.dash-cust-seg-btn:hover {
+    color: var(--lux-ink, var(--text-color));
+}
+
+.dash-cust-seg-btn.is-active {
+    background: color-mix(in srgb, var(--ch-signal, var(--primary-color)) 18%, transparent);
+    color: var(--lux-ink, var(--text-color));
+}
+
+/* Mini selects (perf cell options).
+ * The project's components.css applies `select { width: 100%; padding: 9px 12px }`
+ * globally — we override both with higher specificity so the selects size to
+ * their content rather than blowing the row out past the panel edge. */
+.dash-cust-panel select.dash-cust-mini-select {
+    width: auto;
+    background: var(--lux-bg-1, var(--card-bg));
+    border: var(--lux-hairline, 1px) solid var(--lux-line, var(--border-color));
+    color: var(--lux-ink, var(--text-color));
+    font-family: var(--font-mono, monospace);
+    font-size: 0.66rem;
+    padding: 3px 18px 3px 6px;
+    border-radius: 3px;
+    cursor: pointer;
+    flex: 1 1 auto;
+    min-width: 0;
+    height: 24px;
+    line-height: 1;
+}
+
+.dash-cust-panel select.dash-cust-mini-select:focus {
+    outline: none;
+    border-color: var(--ch-signal, var(--primary-color));
+}
+
+/* Two-line perf-cell row.
+ * Top line carries the label + reorder + visibility controls so the cell
+ * name is *always* readable. Bottom line carries the per-cell options
+ * (mode / window / scale) labelled with tiny mono captions. */
+.dash-cust-cell-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 6px;
+    padding: 8px 10px;
+}
+
+.dash-cust-cell-top {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.dash-cust-cell-opts {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 6px;
+}
+
+.dash-cust-cell-opt {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+}
+
+.dash-cust-cell-opt-k {
+    font-family: var(--font-mono, monospace);
+    font-size: 0.55rem;
+    font-weight: 700;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--lux-ink-mute, var(--text-muted));
+    flex: 0 0 auto;
+}
+
+/* Help / actions */
+.dash-cust-help {
+    margin: 0;
+    font-size: 0.65rem;
+    color: var(--lux-ink-mute, var(--text-muted));
+    font-style: italic;
+}
+
+.dash-cust-actions {
+    border-top: var(--lux-hairline, 1px) solid var(--lux-line, var(--border-color));
+    padding-top: 14px;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.dash-cust-actions .btn {
+    font-size: 0.7rem;
+    padding: 6px 12px;
+}
+
+/* Width-mode hooks: applied to dashboard-content, not the panel */
+#dashboard-content[data-layout-width="centered"] {
+    max-width: 1280px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#dashboard-content[data-layout-width="narrow"] {
+    max-width: 960px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#dashboard-content[data-layout-anim="off"] *,
+#dashboard-content[data-layout-anim="off"] *::before,
+#dashboard-content[data-layout-anim="off"] *::after {
+    animation-duration: 0ms !important;
+    transition-duration: 0ms !important;
+}
+
+#dashboard-content[data-layout-anim="reduced"] *,
+#dashboard-content[data-layout-anim="reduced"] *::before,
+#dashboard-content[data-layout-anim="reduced"] *::after {
+    animation-duration: 60ms !important;
+    transition-duration: 80ms !important;
+}
+
+/* Density variants per section */
+.dashboard-section[data-density="compact"] .dashboard-section-content {
+    gap: 10px;
+}
+
+.dashboard-section[data-density="compact"] .dashboard-section-header {
+    margin-bottom: 10px;
+    padding-bottom: 6px;
+}
+
+.dashboard-section[data-density="dense"] .dashboard-section-content {
+    gap: 6px;
+}
+
+.dashboard-section[data-density="dense"] .dashboard-section-header {
+    margin-bottom: 6px;
+    padding-bottom: 4px;
+    font-size: 0.72rem;
+}
+
+.dashboard-section[data-density="dense"] .dashboard-target {
+    padding: 8px 10px;
+}
+
+/* Mobile collapse */
+@media (max-width: 720px) {
+    .dash-cust-panel {
+        top: 56px;
+        width: 100vw;
+        max-width: 100vw;
+    }
+}

server/src/ledgrab/static/css/fonts.css

@@ -1,6 +1,7 @@
 /* Local font faces — no external CDN dependency */
 
-/* DM Sans — latin-ext */
+/* ── DM Sans (legacy body font — kept during redesign transition) ── */
+
 @font-face {
     font-family: 'DM Sans';
     font-style: normal;
@@ -10,7 +11,6 @@
     unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
-/* DM Sans — latin */
 @font-face {
     font-family: 'DM Sans';
     font-style: normal;
@@ -20,7 +20,8 @@
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
-/* Orbitron 700 — latin */
+/* ── Orbitron (brand mark only) ── */
+
 @font-face {
     font-family: 'Orbitron';
     font-style: normal;
@@ -29,3 +30,99 @@
     src: url('../fonts/orbitron-700-latin.woff2') format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
+/* ── Manrope — new primary body font (variable, 200..800) ──
+   Covers Latin, Latin-ext, Cyrillic, Cyrillic-ext. CJK falls through to
+   system stack via the body font-family cascade. */
+
+@font-face {
+    font-family: 'Manrope';
+    font-style: normal;
+    font-weight: 200 800;
+    font-display: swap;
+    src: url('../fonts/manrope-cyrillic-ext.woff2') format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+@font-face {
+    font-family: 'Manrope';
+    font-style: normal;
+    font-weight: 200 800;
+    font-display: swap;
+    src: url('../fonts/manrope-cyrillic.woff2') format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+@font-face {
+    font-family: 'Manrope';
+    font-style: normal;
+    font-weight: 200 800;
+    font-display: swap;
+    src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+    font-family: 'Manrope';
+    font-style: normal;
+    font-weight: 200 800;
+    font-display: swap;
+    src: url('../fonts/manrope-latin.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* ── JetBrains Mono — new monospace (variable, 100..800) ──
+   Used for technical labels, badges, metrics, code. Cyrillic-capable so
+   badge text (`CH·01 · WLED`) reads in RU locale. */
+
+@font-face {
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 100 800;
+    font-display: swap;
+    src: url('../fonts/jetbrains-mono-cyrillic-ext.woff2') format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+@font-face {
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 100 800;
+    font-display: swap;
+    src: url('../fonts/jetbrains-mono-cyrillic.woff2') format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+@font-face {
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 100 800;
+    font-display: swap;
+    src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 100 800;
+    font-display: swap;
+    src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* ── Big Shoulders Display — new display font (variable, 100..900) ──
+   Reserved for huge numeric readouts on the dashboard hero + module metric
+   cells. Latin + Latin-ext only; Cyrillic numerics would rarely occur in
+   that position so the system stack is an acceptable fallback. */
+
+@font-face {
+    font-family: 'Big Shoulders Display';
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url('../fonts/big-shoulders-display-latin-ext.woff2') format('woff2');
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+    font-family: 'Big Shoulders Display';
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url('../fonts/big-shoulders-display-latin.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

server/src/ledgrab/static/css/graph-editor.css

@@ -31,11 +31,15 @@ html:has(#tab-graph.active) {
     display: flex;
     gap: 4px;
     z-index: 20;
-    background: var(--card-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
+    background: linear-gradient(180deg,
+        var(--lux-bg-1, var(--card-bg)) 0%,
+        var(--lux-bg-2, var(--card-bg)) 100%);
+    border: var(--lux-hairline, 1px) solid var(--lux-line-bold, var(--border-color));
+    border-radius: var(--lux-r-md, 6px);
     padding: 4px;
-    box-shadow: 0 2px 8px var(--shadow-color);
+    box-shadow: var(--lux-shadow-rack, 0 2px 8px var(--shadow-color));
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
 }
 
 .graph-toolbar-drag {
@@ -406,8 +410,8 @@ html:has(#tab-graph.active) {
 /* ── Grid background ── */
 
 .graph-grid-dot {
-    fill: var(--border-color);
-    opacity: 0.3;
+    fill: var(--lux-line, var(--border-color));
+    opacity: 0.32;
 }
 
 /* ── Node styles ── */
@@ -426,21 +430,24 @@ html:has(#tab-graph.active) {
 }
 
 .graph-node-body {
-    fill: var(--card-bg);
-    stroke: none;
-    rx: 8;
-    ry: 8;
-    transition: stroke 0.15s;
+    fill: var(--lux-bg-1, var(--card-bg));
+    stroke: var(--lux-line, var(--border-color));
+    stroke-width: 1;
+    rx: 6;
+    ry: 6;
+    transition: stroke 0.15s, stroke-width 0.15s, filter 0.2s ease;
 }
 
 .graph-node:hover .graph-node-body {
-    stroke: var(--text-secondary);
+    stroke: var(--lux-line-bold, var(--text-secondary));
     stroke-width: 1;
+    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.25));
 }
 
 .graph-node.selected .graph-node-body {
-    stroke: var(--primary-color);
+    stroke: var(--ch-signal, var(--primary-color));
     stroke-width: 2;
+    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 50%, transparent));
 }
 
 .graph-node-color-bar {
@@ -455,37 +462,45 @@ html:has(#tab-graph.active) {
 }
 
 .graph-node-title {
-    fill: var(--text-color);
+    fill: var(--lux-ink, var(--text-color));
     font-size: 12px;
     font-weight: 600;
-    font-family: 'DM Sans', sans-serif;
+    /* Body font, not display — Big Shoulders is condensed and reads as
+     * "stretched" at 12 px in a node label. Display font is for hero
+     * headers only. */
+    font-family: var(--font-body, 'Manrope', 'DM Sans', sans-serif);
+    letter-spacing: 0;
 }
 
 .graph-node-subtitle {
-    fill: var(--text-secondary);
-    font-size: 10px;
-    font-family: 'DM Sans', sans-serif;
+    fill: var(--lux-ink-dim, var(--text-secondary));
+    font-size: 9.5px;
+    font-weight: 600;
+    font-family: var(--font-mono, monospace);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
 }
 
 .graph-node-icon {
-    stroke: var(--text-muted);
+    stroke: var(--lux-ink-mute, var(--text-muted));
     fill: none;
-    stroke-width: 2;
+    stroke-width: 1.5;
     stroke-linecap: round;
     stroke-linejoin: round;
-    opacity: 0.5;
+    opacity: 0.55;
 }
 
 .graph-node.running .graph-node-icon {
-    stroke: var(--primary-color);
-    opacity: 0.85;
+    stroke: var(--ch-signal, var(--primary-color));
+    opacity: 0.95;
 }
 
-/* ── Running indicator (animated gradient border) ── */
+/* ── Running indicator (animated gradient border + signal-flow glow) ── */
 
 .graph-node.running .graph-node-body {
     stroke: url(#running-gradient);
     stroke-width: 2;
+    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 50%, transparent));
 }
 
 @keyframes graph-running-rotate {
@@ -530,13 +545,16 @@ html:has(#tab-graph.active) {
 /* Port labels — hidden by default, shown on node hover, positioned outside node */
 .graph-port-label {
     font-size: 9px;
-    font-weight: 600;
-    fill: var(--text-color);
+    font-weight: 700;
+    font-family: var(--font-mono, monospace);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    fill: var(--lux-ink-dim, var(--text-color));
     pointer-events: none;
     opacity: 0;
     transition: opacity 0.15s;
     paint-order: stroke fill;
-    stroke: var(--bg-color);
+    stroke: var(--lux-bg-0, var(--bg-color));
     stroke-width: 3px;
     stroke-linejoin: round;
 }
@@ -565,9 +583,9 @@ html:has(#tab-graph.active) {
 
 .graph-port-drop-target {
     r: 7 !important;
-    stroke: var(--primary-color) !important;
+    stroke: var(--ch-signal, var(--primary-color)) !important;
     stroke-width: 3 !important;
-    filter: drop-shadow(0 0 6px var(--primary-color));
+    filter: drop-shadow(0 0 6px var(--ch-signal, var(--primary-color)));
 }
 
 /* ── Edges ── */
@@ -705,7 +723,7 @@ html:has(#tab-graph.active) {
 }
 
 .graph-node-overlay-bg {
-    fill: var(--card-bg);
+    fill: var(--lux-bg-1, var(--card-bg));
     stroke: var(--border-color);
     stroke-width: 1;
     rx: 6;

server/src/ledgrab/static/css/layout.css

@@ -1,47 +1,269 @@
+:root {
+    --transport-height: 60px;
+}
+
 header {
-    display: flex;
-    justify-content: space-between;
+    display: grid;
+    grid-template-columns: var(--sidebar-width, 248px) 1fr auto auto;
     align-items: center;
-    padding: 8px 20px;
+    height: var(--transport-height, 60px);
+    padding: 0 16px 0 0;
     position: sticky;
     top: 0;
     z-index: var(--z-sticky);
-    background: var(--bg-color);
-    border-bottom: 2px solid var(--border-color);
+    background: linear-gradient(180deg,
+        var(--lux-bg-1, var(--bg-color)) 0%,
+        var(--lux-bg-0, var(--bg-color)) 100%);
+    border-bottom: var(--lux-hairline, 1px) solid var(--lux-line-bold, var(--border-color));
+}
+
+/* Accent rule — subtle bottom glow under the transport bar.
+   Uses ::before because ::after is reserved by base.css for the
+   ambient-background blur overlay. */
+header::before {
+    content: '';
+    position: absolute;
+    left: 0; right: 0; bottom: -1px;
+    height: 1px;
+    background: linear-gradient(90deg,
+        transparent 0%,
+        color-mix(in srgb, var(--ch-signal, var(--primary-color)) 30%, transparent) 15%,
+        color-mix(in srgb, var(--ch-cyan, var(--primary-color)) 25%, transparent) 50%,
+        color-mix(in srgb, var(--ch-magenta, var(--primary-color)) 20%, transparent) 85%,
+        transparent 100%);
+    opacity: 0.8;
+    pointer-events: none;
+    z-index: 1;
 }
 
 .header-title {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 10px;
+    padding: 0 18px;
+    height: 100%;
+    border-right: var(--lux-hairline, 1px) solid var(--lux-line-bold, var(--border-color));
+    position: relative;
+}
+
+/* Glowing LED brand mark. Rendered as a ::before on .header-title so no
+   HTML change is required. The existing #server-status pulse dot sits
+   inside as the "core" of the mark (see status-badge rule below). */
+/* LED brand mark — 28 px glowing square with inset dark core.
+   Glow intensity pulses subtly to reinforce the "live instrument" feel. */
+.header-title::before {
+    content: '';
+    width: 28px;
+    height: 28px;
+    flex-shrink: 0;
+    border-radius: 4px;
+    background: var(--ch-signal, var(--primary-color));
+    box-shadow:
+        0 0 22px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 55%, transparent),
+        0 0 8px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 90%, transparent),
+        inset 0 0 0 1px rgba(0, 0, 0, 0.35);
+    position: relative;
+    animation: brandPulse 4s ease-in-out infinite;
+}
+.header-title::after {
+    content: '';
+    position: absolute;
+    left: calc(18px + 8px);
+    top: 50%;
+    transform: translateY(-50%);
+    width: 12px;
+    height: 12px;
+    background: var(--lux-bg-0, var(--bg-color));
+    border-radius: 2px;
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 40%, transparent);
+    pointer-events: none;
+}
+
+@keyframes brandPulse {
+    0%, 100% {
+        box-shadow:
+            0 0 22px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 55%, transparent),
+            0 0 8px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 90%, transparent),
+            inset 0 0 0 1px rgba(0, 0, 0, 0.35);
+    }
+    50% {
+        box-shadow:
+            0 0 30px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 70%, transparent),
+            0 0 12px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 95%, transparent),
+            inset 0 0 0 1px rgba(0, 0, 0, 0.35);
+    }
+}
+
+/* Brand stack — title on one line, version under it, no wrap. */
+.brand-stack {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 3px;
+    line-height: 1;
+    min-width: 0;
 }
 
 h1 {
     font-family: 'Orbitron', sans-serif;
-    font-size: 1.15rem;
-    font-weight: 700;
-    letter-spacing: 0.06em;
+    font-size: 1.25rem;
+    font-weight: 900;
+    letter-spacing: 0.18em;
     text-transform: uppercase;
-    -webkit-text-stroke: 0.5px var(--primary-color);
+    white-space: nowrap;
+    -webkit-text-stroke: 0.4px color-mix(in srgb, var(--primary-color) 60%, transparent);
     paint-order: stroke fill;
     background: linear-gradient(
-        120deg,
-        var(--primary-color) 0%,
-        var(--primary-text-color) 35%,
-        var(--primary-color) 50%,
-        var(--primary-text-color) 65%,
-        var(--primary-color) 100%
+        90deg,
+        var(--lux-ink, #e6ebf2) 0%,
+        var(--ch-signal, var(--primary-color)) 50%,
+        var(--lux-ink, #e6ebf2) 100%
     );
-    background-size: 250% 100%;
+    background-size: 220% 100%;
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
-    animation: titleShimmer 6s ease-in-out infinite;
+    animation: titleShimmer 8s linear infinite;
+    line-height: 1;
+    margin: 0;
+    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 25%, transparent));
+}
+
+.brand-stack #server-version {
+    font-size: 0.6rem;
+    padding: 2px 7px;
+    letter-spacing: 0.25em;
+    align-self: flex-start;
 }
 
 @keyframes titleShimmer {
-    0%, 100% { background-position: 100% 50%; }
-    50%      { background-position: 0% 50%; }
+    to { background-position: -220% 50%; }
+}
+
+/* ── Transport center: reserved area for armed-status / master-stop /
+       quick-search shortcut. Populated by JS in Phase 3; empty for now. ── */
+.transport-center {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 18px;
+    font-family: var(--font-mono, monospace);
+    font-size: 0.7rem;
+    color: var(--lux-ink-dim, var(--text-secondary));
+}
+
+.transport-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    padding: 9px 18px;
+    background: var(--lux-bg-2, var(--bg-secondary));
+    border: var(--lux-hairline, 1px) solid var(--lux-line, var(--border-color));
+    border-radius: var(--lux-r-sm, 3px);
+    color: var(--lux-ink-dim, var(--text-secondary));
+    font-family: var(--font-mono, inherit);
+    font-size: 0.8rem;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    white-space: nowrap;
+    transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
+}
+
+.transport-status.is-armed {
+    color: var(--ch-signal, var(--primary-color));
+    border-color: color-mix(in srgb, var(--ch-signal, var(--primary-color)) 45%, transparent);
+    background: color-mix(in srgb, var(--ch-signal, var(--primary-color)) 10%, transparent);
+    box-shadow:
+        inset 0 0 14px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 12%, transparent),
+        0 0 18px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 20%, transparent);
+    text-shadow: 0 0 10px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 40%, transparent);
+}
+
+.transport-status .dot {
+    width: 7px; height: 7px;
+    border-radius: 50%;
+    background: currentColor;
+    box-shadow: 0 0 8px currentColor, 0 0 3px currentColor;
+    animation: pulse 1.4s ease-in-out infinite;
+    flex-shrink: 0;
+}
+.transport-status:not(.is-armed) .dot {
+    background: var(--lux-ink-faint, var(--text-muted));
+    box-shadow: none;
+    animation: none;
+}
+
+/* Transport meta — Uptime / CPU / Mem readouts as vertical KEY/VALUE stacks */
+.transport-meta {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 0 6px 0 16px;
+    font-family: var(--font-mono, monospace);
+}
+
+.meta-cell {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 3px;
+    line-height: 1;
+    min-width: 0;
+}
+
+.meta-cell .k {
+    font-size: 0.6rem;
+    font-weight: 600;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+    color: var(--lux-ink-faint, var(--text-muted));
+}
+
+.meta-cell .v {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--lux-ink, var(--text-color));
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.02em;
+    white-space: nowrap;
+}
+
+/* Interactive meta-cell — clickable variant used by the Poll control.
+   Lightweight hover + focus states so it reads as actionable without
+   looking like a button. */
+.meta-cell-interactive {
+    cursor: pointer;
+    padding: 4px 8px;
+    margin: 0 -2px;
+    border-radius: var(--lux-r-sm, 3px);
+    border: var(--lux-hairline, 1px) solid transparent;
+    outline: none;
+    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+    user-select: none;
+}
+.meta-cell-interactive:hover {
+    background: var(--lux-bg-2, var(--bg-secondary));
+    border-color: var(--lux-line, var(--border-color));
+}
+.meta-cell-interactive:focus-visible {
+    border-color: color-mix(in srgb, var(--ch-signal, var(--primary-color)) 50%, transparent);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 20%, transparent);
+}
+.meta-cell-interactive:active {
+    transform: translateY(0.5px);
+}
+.meta-cell-interactive .v {
+    color: var(--ch-signal, var(--primary-color));
+    text-shadow: 0 0 10px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 25%, transparent);
+}
+
+.meta-sep {
+    width: 1px;
+    height: 24px;
+    background: var(--lux-line, var(--border-color));
+    flex-shrink: 0;
 }
 
 h2 {
@@ -53,18 +275,17 @@ h2 {
 .header-toolbar {
     display: flex;
     align-items: center;
-    gap: 2px;
-    background: var(--card-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    padding: 3px 4px;
+    gap: 4px;
+    background: transparent;
+    border: none;
+    padding: 0;
 }
 
 .header-toolbar-sep {
     width: 1px;
-    height: 18px;
-    background: var(--border-color);
-    margin: 0 3px;
+    height: 20px;
+    background: var(--lux-line, var(--border-color));
+    margin: 0 6px;
     flex-shrink: 0;
 }
 
@@ -156,27 +377,30 @@ h2 {
 }
 
 #server-version {
-    font-family: 'Orbitron', sans-serif;
-    font-size: 0.65rem;
-    font-weight: 700;
-    color: var(--text-secondary);
-    background: var(--border-color);
-    padding: 2px 8px;
-    border-radius: 10px;
-    letter-spacing: 0.03em;
-    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
+    font-family: var(--font-mono, 'Orbitron', sans-serif);
+    font-size: 0.55rem;
+    font-weight: 600;
+    color: var(--ch-signal, var(--primary-color));
+    background: transparent;
+    border: var(--lux-hairline, 1px) solid color-mix(in srgb, var(--ch-signal, var(--primary-color)) 45%, transparent);
+    padding: 2px 6px;
+    border-radius: 2px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
 }
 
 #server-version.has-update {
-    background: var(--warning-color);
+    background: var(--ch-signal, var(--primary-color));
+    border-color: var(--ch-signal, var(--primary-color));
     color: #fff;
     cursor: pointer;
     animation: updatePulse 2s ease-in-out infinite;
 }
 
 @keyframes updatePulse {
-    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.4); }
-    50% { box-shadow: 0 0 0 4px rgba(255, 152, 0, 0); }
+    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ch-signal, var(--primary-color)) 40%, transparent); }
+    50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 0%, transparent); }
 }
 
 /* ── Update banner ── */
@@ -270,17 +494,27 @@ h2 {
     to { transform: translateY(0); opacity: 1; }
 }
 
+/* #server-status visual hidden — the brand mark itself carries the
+   connection state. When JS adds `.offline`, the mark shifts to coral
+   via the :has() modifier on .header-title below. */
 .status-badge {
-    font-size: 1rem;
-    animation: pulse 2s infinite;
+    display: none;
 }
 
-.status-badge.online {
-    color: var(--primary-color);
+/* Brand mark reflects connection state. Default is the running-color
+   (tracks --ch-signal / --primary-color). When the server-status element
+   has `.offline`, override to coral so the header reads "disconnected"
+   without needing a separate pip. */
+.header-title:has(#server-status.offline)::before {
+    background: var(--ch-coral, var(--danger-color));
+    box-shadow:
+        0 0 22px color-mix(in srgb, var(--ch-coral, var(--danger-color)) 55%, transparent),
+        0 0 8px color-mix(in srgb, var(--ch-coral, var(--danger-color)) 90%, transparent),
+        inset 0 0 0 1px rgba(0, 0, 0, 0.35);
+    animation: none;
 }
-
-.status-badge.offline {
-    color: var(--danger-color);
+.header-title:has(#server-status.offline)::after {
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ch-coral, var(--danger-color)) 40%, transparent);
 }
 
 @keyframes pulse {
@@ -441,7 +675,8 @@ h2 {
     color: var(--danger-color);
 }
 
-/* Tabs */
+/* ── Tabs (base styles; sidebar.css re-specializes for vertical rail;
+       mobile.css reverts to a fixed bottom bar on phones) ── */
 .tab-bar {
     display: flex;
     align-items: center;
@@ -458,7 +693,10 @@ h2 {
     cursor: pointer;
     border-bottom: 2px solid transparent;
     margin-bottom: -2px;
-    transition: color 0.2s ease, border-color 0.25s ease;
+    transition: color 0.2s ease, border-color 0.25s ease, background 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
 }
 
 .tab-btn:hover {
@@ -524,23 +762,34 @@ h2 {
 }
 
 /* Header toolbar buttons */
+/* Header icon buttons — hairline-bordered squares with channel glow
+   on hover. Mirrors the mockup's `.icon-btn` treatment. */
 .header-btn {
+    width: 30px;
+    height: 30px;
+    padding: 0;
     background: transparent;
     border: none;
-    padding: 4px 6px;
-    border-radius: 5px;
+    border-radius: var(--lux-r-sm, 3px);
     cursor: pointer;
     font-size: 0.9rem;
-    color: var(--text-secondary);
-    transition: color 0.2s, background 0.2s;
-    display: inline-flex;
-    align-items: center;
+    color: var(--lux-ink-dim, var(--text-secondary));
+    transition: color 0.2s, background 0.2s, box-shadow 0.2s;
+    display: inline-grid;
+    place-items: center;
     line-height: 1;
+    flex-shrink: 0;
 }
 
 .header-btn:hover {
-    color: var(--text-color);
-    background: var(--bg-secondary);
+    color: var(--lux-ink, var(--text-color));
+    background: var(--lux-bg-2, var(--bg-secondary));
+    box-shadow: 0 0 12px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 18%, transparent);
+}
+
+.header-btn .icon {
+    width: 15px;
+    height: 15px;
 }
 
 /* Reusable color picker popover */
@@ -637,38 +886,6 @@ h2 {
     flex-shrink: 0;
 }
 
-/* Footer */
-.app-footer {
-    margin-top: 12px;
-    padding: 6px 0;
-    text-align: center;
-}
-
-.footer-content {
-    color: var(--text-secondary);
-    font-size: 0.75rem;
-}
-
-.footer-content p {
-    margin: 0;
-}
-
-
-.footer-content strong {
-    color: var(--text-color);
-}
-
-.footer-content a {
-    color: var(--primary-text-color);
-    text-decoration: none;
-    transition: opacity 0.2s;
-}
-
-.footer-content a:hover {
-    opacity: 0.8;
-    text-decoration: underline;
-}
-
 /* Command Palette */
 #command-palette {
     position: fixed;
@@ -682,8 +899,11 @@ h2 {
 .cp-backdrop {
     position: absolute;
     inset: 0;
-    background: rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(2px);
+    background: radial-gradient(1000px 600px at 50% 30%,
+        rgba(0, 0, 0, 0.55) 0%,
+        rgba(0, 0, 0, 0.8) 100%);
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
     animation: fadeIn 0.15s ease-out;
 }
 
@@ -692,10 +912,13 @@ h2 {
     width: 520px;
     max-width: 90vw;
     max-height: 60vh;
-    background: var(--card-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 12px;
-    box-shadow: 0 16px 48px var(--shadow-color);
+    background: var(--lux-bg-1, var(--card-bg));
+    border: var(--lux-hairline, 1px) solid var(--lux-line-bold, var(--border-color));
+    border-radius: var(--lux-r-md, 12px);
+    box-shadow:
+        0 0 0 1px rgba(255, 255, 255, 0.02),
+        0 20px 60px rgba(0, 0, 0, 0.5),
+        0 8px 32px var(--shadow-color);
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -703,6 +926,24 @@ h2 {
     animation: cpSlideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+/* Channel-accent rule across the top edge (matches modals) */
+.cp-dialog::before {
+    content: '';
+    position: absolute;
+    left: 0; right: 0; top: 0;
+    height: 2px;
+    background: linear-gradient(90deg,
+        transparent 0%,
+        var(--ch-signal, var(--primary-color)) 20%,
+        var(--ch-cyan, var(--primary-color)) 50%,
+        var(--ch-magenta, var(--primary-color)) 80%,
+        transparent 100%);
+    opacity: 0.9;
+    box-shadow: 0 0 12px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 40%, transparent);
+    pointer-events: none;
+    z-index: 2;
+}
+
 @keyframes cpSlideDown {
     from { opacity: 0; transform: translateY(-12px) scale(0.98); }
     to { opacity: 1; transform: translateY(0) scale(1); }
@@ -710,18 +951,23 @@ h2 {
 
 .cp-input {
     width: 100%;
-    padding: 14px 16px;
+    padding: 16px 18px 14px 18px;
     border: none;
-    border-bottom: 1px solid var(--border-color);
+    border-bottom: var(--lux-hairline, 1px) solid var(--lux-line, var(--border-color));
     background: transparent;
-    color: var(--text-color);
+    color: var(--lux-ink, var(--text-color));
+    font-family: var(--font-body, inherit);
     font-size: 1rem;
     outline: none;
     box-sizing: border-box;
+    letter-spacing: -0.005em;
 }
 
 .cp-input::placeholder {
-    color: var(--text-secondary);
+    color: var(--lux-ink-mute, var(--text-secondary));
+    font-family: var(--font-mono, inherit);
+    font-size: 0.9rem;
+    letter-spacing: 0.04em;
 }
 
 .cp-results {
@@ -731,32 +977,38 @@ h2 {
 }
 
 .cp-group-header {
-    font-size: 0.7rem;
+    font-family: var(--font-mono, inherit);
+    font-size: 0.58rem;
     font-weight: 700;
     text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--text-secondary);
-    padding: 8px 16px 4px;
+    letter-spacing: 0.22em;
+    color: var(--lux-ink-mute, var(--text-secondary));
+    padding: 10px 18px 4px;
 }
 
 .cp-result {
     display: flex;
     align-items: center;
-    gap: 8px;
-    padding: 8px 16px;
+    gap: 10px;
+    padding: 9px 18px;
     cursor: pointer;
     transition: background 0.1s;
     position: relative;
     z-index: 1;
+    color: var(--lux-ink-dim, var(--text-color));
 }
 
 .cp-result:hover {
-    background: var(--bg-secondary);
+    background: var(--lux-bg-3, var(--bg-secondary));
+    color: var(--lux-ink, var(--text-color));
 }
 
 .cp-result.cp-active {
-    background: var(--primary-color);
-    color: var(--primary-contrast);
+    background: linear-gradient(90deg,
+        color-mix(in srgb, var(--ch-signal, var(--primary-color)) 18%, transparent) 0%,
+        transparent 100%);
+    color: var(--lux-ink, var(--text-color));
+    box-shadow: inset 2px 0 0 var(--ch-signal, var(--primary-color));
 }
 
 .cp-result.cp-active .cp-detail {
@@ -782,8 +1034,10 @@ h2 {
 
 .cp-detail {
     flex-shrink: 0;
-    font-size: 0.75rem;
-    color: var(--text-secondary);
+    font-family: var(--font-mono, inherit);
+    font-size: 0.66rem;
+    letter-spacing: 0.04em;
+    color: var(--lux-ink-mute, var(--text-secondary));
 }
 
 .cp-running {
@@ -818,36 +1072,100 @@ h2 {
 }
 
 .cp-footer {
-    padding: 6px 16px;
-    border-top: 1px solid var(--border-color);
-    font-size: 0.7rem;
-    color: var(--text-secondary);
+    padding: 8px 18px;
+    border-top: var(--lux-hairline, 1px) solid var(--lux-line, var(--border-color));
+    font-family: var(--font-mono, inherit);
+    font-size: 0.62rem;
+    letter-spacing: 0.08em;
+    color: var(--lux-ink-mute, var(--text-secondary));
     text-align: center;
+    background: color-mix(in srgb, var(--lux-bg-0, transparent) 40%, transparent);
 }
 
+/* On narrow screens the brand column shrinks to just the mark; on phones
+   the sidebar hides entirely and mobile.css reverts .tab-bar to a fixed
+   bottom strip. */
 @media (max-width: 1100px) {
-    .tab-btn {
-        padding: 10px 10px;
+    /* Keep all four header children (title | center | meta | toolbar) on one
+       row. Without an explicit 4th track they wrap, doubling the header. */
+    header {
+        grid-template-columns: var(--sidebar-width, 56px) auto 1fr auto;
     }
-
-    .tab-btn > span[data-i18n] {
+    .header-title {
+        padding: 0 10px;
+        justify-content: center;
+        gap: 0;
+    }
+    .header-title h1,
+    #server-version,
+    .header-title::after {
+        display: none;
+    }
+    .transport-center {
+        padding: 0 10px;
+    }
+    /* Tighter meta cluster — drop the trailing separator and shrink gaps */
+    .transport-meta {
+        gap: 10px;
+        padding: 0 4px 0 8px;
+        justify-content: flex-end;
+    }
+    .transport-meta .meta-sep:last-child {
+        display: none;
+    }
+    /* Tighter toolbar so it fits beside the meta cluster */
+    .header-toolbar {
+        gap: 2px;
+    }
+    .header-toolbar-sep {
+        margin: 0 2px;
+    }
+    /* Hide secondary header items at narrow widths to free room */
+    .header-link,
+    #tour-restart-btn {
         display: none;
     }
 
-    .tab-btn .icon {
-        width: 20px;
-        height: 20px;
-    }
-}
-
-@media (max-width: 900px) {
-    header {
-        flex-direction: column;
-        gap: 8px;
-        text-align: center;
-    }
-
     .container {
-        padding: 12px;
+        padding: 16px;
+    }
+}
+
+/* Tablet/phone shoulder: the meta cluster still wants ~280px which collides
+   with the toolbar below 900px. Drop CPU + Mem cells (Uptime + Poll stay,
+   they're the most useful at-a-glance signals). */
+@media (max-width: 900px) {
+    #transport-cpu,
+    #transport-mem {
+        display: none;
+    }
+    .transport-meta .meta-cell:has(#transport-cpu),
+    .transport-meta .meta-cell:has(#transport-mem) {
+        display: none;
+    }
+    .transport-meta > .meta-sep:nth-of-type(1) {
+        display: none;
+    }
+}
+
+@media (max-width: 600px) {
+    header {
+        grid-template-columns: auto 1fr auto;
+        padding: 0 8px 0 0;
+    }
+    .header-title {
+        padding: 0 10px;
+        border-right: none;
+    }
+    .transport-center {
+        display: none;
+    }
+    /* Below the phone breakpoint the sidebar vanishes and the bottom tab
+       bar takes over, so most of the meta cluster goes too. */
+    .transport-meta {
+        display: none;
+    }
+    .container {
+        padding: 10px;
     }
 }

server/src/ledgrab/static/css/mobile.css

@@ -158,53 +158,122 @@
         display: none;
     }
 
-    /* ── Bottom Tab Bar ── */
+    /* ── Bottom Tab Bar — Lumenworks mobile shell ── */
+    .sidebar .tab-bar,
     .tab-bar {
         position: fixed;
         bottom: 0;
         left: 0;
         right: 0;
         z-index: var(--z-sticky);
-        background: var(--card-bg);
+        background: linear-gradient(180deg,
+            var(--lux-bg-1, var(--card-bg)) 0%,
+            var(--lux-bg-0, var(--card-bg)) 100%);
         border-bottom: none;
-        border-top: 1px solid var(--border-color);
+        border-top: var(--lux-hairline, 1px) solid var(--lux-line-bold, var(--border-color));
         margin-bottom: 0;
         display: flex;
+        flex-direction: row;
         flex-wrap: nowrap;
         justify-content: space-around;
         padding: 0;
         padding-bottom: env(safe-area-inset-bottom, 0px);
-        box-shadow: 0 -2px 8px var(--shadow-color);
+        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3);
         gap: 0;
+        width: auto;
+        height: auto;
+        overflow: visible;
+        backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: blur(8px);
     }
 
+    /* Top channel-accent rule — matches the transport bar bottom rule so
+       the two bars feel like bookends of the mobile layout. */
+    .sidebar .tab-bar::before,
+    .tab-bar::before {
+        content: '';
+        position: absolute;
+        left: 0; right: 0; top: 0;
+        height: 1px;
+        background: linear-gradient(90deg,
+            transparent 0%,
+            color-mix(in srgb, var(--ch-signal, var(--primary-color)) 28%, transparent) 15%,
+            color-mix(in srgb, var(--ch-cyan, var(--info-color)) 24%, transparent) 50%,
+            color-mix(in srgb, var(--ch-magenta, #ff4ade) 20%, transparent) 85%,
+            transparent 100%);
+        opacity: 0.8;
+        pointer-events: none;
+    }
+
+    .sidebar .tab-btn,
     .tab-btn {
         flex: 1;
         display: flex;
         flex-direction: column;
         align-items: center;
-        gap: 2px;
-        padding: 8px 4px 6px;
-        font-size: 0.65rem;
+        justify-content: center;
+        gap: 3px;
+        padding: 7px 4px 6px;
+        font-family: var(--font-mono, inherit);
+        font-size: 0.55rem;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: var(--lux-ink-mute, var(--text-secondary));
         border-bottom: none;
         border-top: 2px solid transparent;
+        border-radius: 0;
+        background: transparent;
         margin-bottom: 0;
         position: relative;
+        grid-template-columns: none;
+        box-shadow: none;
     }
 
+    .sidebar .tab-btn.active,
     .tab-btn.active {
+        color: var(--ch-signal, var(--primary-color));
         border-bottom-color: transparent;
-        border-top-color: var(--primary-color);
+        border-top-color: var(--ch-signal, var(--primary-color));
+        background: linear-gradient(180deg,
+            color-mix(in srgb, var(--ch-signal, var(--primary-color)) 14%, transparent) 0%,
+            transparent 60%);
+        box-shadow: none;
     }
 
+    /* LED pip above the icon on the active tab (replaces the left-stripe
+       since the sidebar's box-shadow doesn't carry here). */
+    .sidebar .tab-btn.active::before,
+    .tab-btn.active::before {
+        content: '';
+        position: absolute;
+        top: 4px; left: 50%;
+        transform: translateX(-50%);
+        width: 4px;
+        height: 4px;
+        border-radius: 50%;
+        background: var(--ch-signal, var(--primary-color));
+        box-shadow: 0 0 6px var(--ch-signal, var(--primary-color));
+    }
+
+    .sidebar .tab-btn .icon,
     .tab-btn .icon {
         width: 20px;
         height: 20px;
         display: block;
+        color: inherit;
     }
 
+    .sidebar .tab-btn.active .icon,
+    .tab-btn.active .icon {
+        color: var(--ch-signal, var(--primary-color));
+    }
+
+    .sidebar .tab-btn > span[data-i18n],
     .tab-btn > span[data-i18n] {
-        font-size: 0.6rem;
+        font-family: var(--font-mono, inherit);
+        font-size: 0.55rem;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
         line-height: 1.2;
         max-width: 100%;
         overflow: hidden;
@@ -215,13 +284,19 @@
     /* Tab badge repositioned to top-right of icon */
     .tab-badge {
         position: absolute;
-        top: 2px;
-        right: calc(50% - 18px);
-        font-size: 0.55rem;
+        top: 6px;
+        right: calc(50% - 20px);
+        font-family: var(--font-mono, monospace);
+        font-size: 0.48rem;
+        font-weight: 700;
         padding: 0 4px;
-        min-width: 14px;
-        line-height: 1.2;
+        min-width: 12px;
+        line-height: 1.3;
         margin-left: 0;
+        background: var(--ch-signal, var(--primary-color));
+        color: var(--lux-bg-0, var(--primary-contrast));
+        border-radius: 2px;
+        letter-spacing: 0.02em;
     }
 
     /* Body padding for fixed bottom bar */
@@ -276,6 +351,12 @@
         margin: 0;
     }
 
+    /* Hide the bottom-right corner bracket on fullscreen mobile modals —
+       there's no "panel" to decorate. Top channel rule stays. */
+    .modal-content::after {
+        display: none;
+    }
+
     .modal-content-wide {
         min-width: 0;
         width: 100%;
@@ -284,11 +365,16 @@
     }
 
     .modal-header {
-        padding: 12px 14px 10px;
+        padding: 14px 14px 12px 20px;
+    }
+
+    .modal-header::before {
+        left: 8px;
+        height: 18px;
     }
 
     .modal-header h2 {
-        font-size: 1.15rem;
+        font-size: 1.05rem;
     }
 
     .modal-body {
@@ -395,11 +481,6 @@
         margin-bottom: 10px;
     }
 
-    /* Footer */
-    .app-footer {
-        margin-bottom: 50px;
-    }
-
     /* Command palette */
     #command-palette {
         padding-top: 5vh;

server/src/ledgrab/static/css/patterns.css

@@ -42,21 +42,30 @@
 }
 
 .stream-card-prop {
-    display: inline-block;
-    font-size: 0.75rem;
-    color: var(--text-secondary);
-    background: var(--border-color);
-    padding: 2px 8px;
-    border-radius: 10px;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    font-family: var(--font-mono, monospace);
+    font-size: 0.68rem;
+    color: var(--lux-ink-dim, var(--text-secondary));
+    background: var(--lux-bg-0, var(--border-color));
+    border: var(--lux-hairline, 1px) solid var(--lux-line, var(--border-color));
+    padding: 3px 8px;
+    border-radius: 2px;
+    letter-spacing: 0.04em;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    max-width: 180px;
+    max-width: 220px;
     vertical-align: middle;
+    line-height: 1.3;
 }
 
 .stream-card-prop .icon {
-    color: var(--primary-text-color);
+    color: var(--ch-signal, var(--primary-color));
+    width: 11px;
+    height: 11px;
+    flex-shrink: 0;
 }
 
 .stream-card-prop-full {
@@ -65,18 +74,19 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    font-size: 0.7rem;
+    font-size: 0.66rem;
 }
 
 .stream-card-link {
     cursor: pointer;
     text-decoration: none;
-    transition: background 0.2s, color 0.2s;
+    transition: background 0.2s, color 0.2s, border-color 0.2s;
 }
 
 .stream-card-link:hover {
-    background: var(--primary-color);
-    color: var(--primary-contrast);
+    background: color-mix(in srgb, var(--ch-signal, var(--primary-color)) 15%, transparent);
+    color: var(--lux-ink, var(--text-color));
+    border-color: color-mix(in srgb, var(--ch-signal, var(--primary-color)) 40%, var(--lux-line, var(--border-color)));
 }
 
 .stream-card-link:hover .icon {
@@ -84,15 +94,31 @@
 }
 
 @keyframes cardHighlight {
-    0%, 100% { box-shadow: none; }
-    25%, 75% { box-shadow: 0 0 0 3px var(--primary-color), 0 0 20px rgba(var(--primary-rgb, 59, 130, 246), 0.3); }
+    0%, 100% {
+        box-shadow:
+            0 0 0 0 color-mix(in srgb, var(--ch-signal, var(--primary-color)) 0%, transparent),
+            0 0 0 0 transparent;
+    }
+    25%, 75% {
+        box-shadow:
+            0 0 0 2px var(--ch-signal, var(--primary-color)),
+            0 0 32px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 55%, transparent),
+            0 0 10px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 80%, transparent);
+    }
 }
 
 .card-highlight,
-.template-card.card-highlight {
-    animation: cardHighlight 2s ease-in-out;
+.template-card.card-highlight,
+.dashboard-target.card-highlight {
+    animation: cardHighlight 2.2s ease-in-out;
     position: relative;
     z-index: 11;
+    /* Nudge the card forward during the highlight so the outer glow
+       isn't clipped by a containing overflow: hidden (strip cells,
+       tree-nav panels). Box-shadow is never clipped by the element's
+       own overflow but *is* clipped by parent overflow in stacking
+       contexts where the card doesn't escape. */
+    isolation: isolate;
 }
 
 /* Dim overlay behind highlighted card */

server/src/ledgrab/static/css/sidebar.css

@@ -0,0 +1,314 @@
+/* ── Lumenworks sidebar (channel-strip nav) ─────────────────────
+   Primary navigation for desktop/tablet. Contains the 6 top-level
+   tabs (.tab-bar kept for JS compatibility with switchTab), a live
+   meter plate at the bottom, and collapses to a 56px icon rail
+   between 1100px and 600px. On phones (<=600px) the sidebar hides
+   entirely and mobile.css reverts .tab-bar to a fixed bottom strip.
+   ──────────────────────────────────────────────────────────────── */
+
+/* ── App shell: header on top, 2-column body below ── */
+
+.app-body {
+    display: grid;
+    grid-template-columns: var(--sidebar-width, 248px) 1fr;
+    gap: 0;
+    align-items: stretch;
+    min-height: calc(100vh - var(--transport-height, 64px));
+}
+
+.app-main {
+    min-width: 0;        /* allow children to shrink instead of overflow */
+    position: relative;
+}
+
+/* ── Sidebar container ── */
+
+.sidebar {
+    position: sticky;
+    top: var(--transport-height, 64px);
+    height: calc(100vh - var(--transport-height, 64px));
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: thin;
+    border-right: var(--lux-hairline) solid var(--lux-line-bold, var(--border-color));
+    background: linear-gradient(180deg, var(--lux-bg-1, var(--bg-secondary)) 0%, var(--lux-bg-0, var(--bg-color)) 100%);
+    padding: 16px 0 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    z-index: calc(var(--z-sticky) - 1);
+}
+
+.sidebar-section {
+    padding: 0 12px;
+}
+
+.sidebar-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-family: var(--font-mono, monospace);
+    font-size: 0.55rem;
+    letter-spacing: 0.25em;
+    text-transform: uppercase;
+    color: var(--lux-ink-mute, var(--text-secondary));
+    padding: 0 8px 8px;
+    border-bottom: 1px dashed var(--lux-line, var(--border-color));
+    margin-bottom: 8px;
+    font-weight: 500;
+}
+.sidebar-label::before { content: '['; color: var(--lux-ink-faint, var(--text-muted)); }
+.sidebar-label::after { content: ']'; color: var(--lux-ink-faint, var(--text-muted)); margin-left: auto; }
+
+/* ── Tab-bar (kept as vertical nav inside sidebar on desktop) ── */
+
+.sidebar .tab-bar {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 1px;
+    width: 100%;
+}
+
+.sidebar .tab-btn {
+    display: grid;
+    grid-template-columns: 18px 1fr auto;
+    gap: 12px;
+    align-items: center;
+    padding: 9px 10px;
+    margin: 0;
+    background: transparent;
+    border: none;
+    border-radius: var(--lux-r-sm, 3px);
+    font-family: var(--font-mono, monospace);
+    font-size: 0.82rem;
+    font-weight: 500;
+    letter-spacing: 0.04em;
+    color: var(--lux-ink-dim, var(--text-secondary));
+    cursor: pointer;
+    position: relative;
+    text-align: left;
+    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
+}
+
+.sidebar .tab-btn:hover {
+    color: var(--lux-ink, var(--text-color));
+    background: var(--lux-bg-2, var(--bg-secondary));
+    border-bottom-color: transparent;
+}
+
+.sidebar .tab-btn.active {
+    color: var(--lux-ink, var(--text-color));
+    background: linear-gradient(90deg,
+        color-mix(in srgb, var(--ch-signal, var(--primary-color)) 14%, transparent) 0%,
+        transparent 80%);
+    box-shadow: inset 2px 0 0 var(--ch-signal, var(--primary-color));
+    border-bottom-color: transparent;
+}
+
+.sidebar .tab-btn.active::before {
+    content: '';
+    position: absolute;
+    left: 0; top: 50%;
+    transform: translateY(-50%);
+    width: 2px;
+    height: 60%;
+    background: var(--ch-signal, var(--primary-color));
+    box-shadow: var(--lux-signal-glow, 0 0 6px currentColor);
+    border-radius: 2px;
+}
+
+.sidebar .tab-btn .icon {
+    width: 16px;
+    height: 16px;
+    color: inherit;
+    flex-shrink: 0;
+}
+.sidebar .tab-btn.active .icon {
+    color: var(--ch-signal, var(--primary-color));
+}
+
+.sidebar .tab-btn > span[data-i18n] {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.sidebar .tab-btn .tab-badge {
+    background: var(--lux-bg-3, var(--border-color));
+    color: var(--lux-ink-mute, var(--text-secondary));
+    font-family: var(--font-mono, monospace);
+    font-size: 0.62rem;
+    font-weight: 600;
+    padding: 1px 7px;
+    border-radius: 10px;
+    min-width: 20px;
+    line-height: 1.4;
+    text-align: center;
+}
+.sidebar .tab-btn.active .tab-badge {
+    background: var(--ch-signal, var(--primary-color));
+    color: var(--lux-bg-0, #000);
+}
+
+/* ── Sidebar footer: live CPU/FPS meter plate ── */
+
+.sidebar-foot {
+    margin-top: auto;
+    padding: 14px 20px 8px;
+    border-top: 1px dashed var(--lux-line, var(--border-color));
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.cpu-meter {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    font-family: var(--font-mono, monospace);
+}
+
+.cpu-meter-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    font-size: 0.58rem;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    color: var(--lux-ink-mute, var(--text-secondary));
+}
+
+.cpu-meter-row b {
+    color: var(--lux-ink, var(--text-color));
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+    font-size: 0.7rem;
+    letter-spacing: 0;
+}
+
+.cpu-bar {
+    height: 3px;
+    background: var(--lux-bg-3, var(--border-color));
+    border-radius: 2px;
+    overflow: hidden;
+    position: relative;
+}
+
+.cpu-bar > i {
+    display: block;
+    height: 100%;
+    background: linear-gradient(90deg, var(--ch-signal, var(--primary-color)), var(--ch-cyan, var(--info-color)));
+    box-shadow: 0 0 6px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 50%, transparent);
+    transition: width 0.4s ease;
+    width: 0;
+}
+
+.cpu-bar-fps > i {
+    background: linear-gradient(90deg, var(--ch-cyan, var(--info-color)), var(--ch-magenta, #ff4ade));
+    box-shadow: 0 0 6px color-mix(in srgb, var(--ch-cyan, var(--info-color)) 50%, transparent);
+}
+
+.sidebar-version {
+    font-family: var(--font-mono, monospace);
+    font-size: 0.55rem;
+    letter-spacing: 0.2em;
+    text-transform: uppercase;
+    color: var(--lux-ink-faint, var(--text-muted));
+    text-align: center;
+    padding-top: 6px;
+    border-top: 1px dashed var(--lux-line, var(--border-color));
+}
+
+/* ── Responsive: icon rail at tablet-desktop, hidden at phone ── */
+
+@media (max-width: 1100px) {
+    :root { --sidebar-width: 56px; }
+
+    .sidebar {
+        padding: 14px 0 20px;
+        gap: 16px;
+    }
+    .sidebar-section {
+        padding: 0 6px;
+    }
+    .sidebar-label,
+    .sidebar-version {
+        display: none;
+    }
+    .sidebar-foot {
+        padding: 10px 6px;
+    }
+
+    .sidebar .tab-btn {
+        grid-template-columns: 1fr;
+        padding: 10px 2px;
+        justify-content: center;
+        justify-items: center;
+        gap: 3px;
+    }
+    /* Two-line caption with tight tracking — single-line ellipsis truncates
+       longer labels like "Automations"/"Integrations" to "AUTOMA…" which
+       isn't recoverable; two short lines are uglier per word but legible. */
+    .sidebar .tab-btn > span[data-i18n] {
+        font-size: 0.46rem;
+        letter-spacing: 0.02em;
+        line-height: 1.1;
+        text-transform: uppercase;
+        color: inherit;
+        max-width: 100%;
+        white-space: normal;
+        overflow-wrap: anywhere;
+        text-align: center;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+    }
+    .sidebar .tab-btn .icon {
+        width: 20px;
+        height: 20px;
+    }
+    .sidebar .tab-btn .tab-badge {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        font-size: 0.55rem;
+        min-width: 14px;
+        padding: 0 4px;
+    }
+
+    .cpu-meter-row {
+        font-size: 0.48rem;
+        letter-spacing: 0.08em;
+    }
+    .cpu-meter-row b {
+        font-size: 0.6rem;
+    }
+}
+
+@media (max-width: 600px) {
+    /* On phones, sidebar disappears and mobile.css reverts .tab-bar to
+       a fixed bottom strip. The .app-body grid becomes a single column.  */
+    :root { --sidebar-width: 0px; }
+
+    .app-body {
+        grid-template-columns: 1fr;
+    }
+    .sidebar {
+        /* Hide sidebar chrome; .tab-bar inside still gets fixed-bottom
+           styling from mobile.css regardless of its container. */
+        position: static;
+        height: auto;
+        border-right: none;
+        padding: 0;
+        background: transparent;
+        overflow: visible;
+        display: contents;
+    }
+    .sidebar-foot,
+    .sidebar-label {
+        display: none !important;
+    }
+}

server/src/ledgrab/static/css/streams.css

@@ -9,19 +9,63 @@
 }
 
 .template-card {
-    background: var(--card-bg);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-md);
-    padding: 16px;
-    transition: box-shadow 0.2s ease, transform 0.2s ease;
+    --ch: var(--ch-cyan, var(--info-color));   /* default channel — overridden per data-attr below */
+    background: var(--lux-bg-1, var(--card-bg));
+    border: var(--lux-hairline, 1px) solid var(--lux-line, var(--border-color));
+    border-radius: var(--lux-r-md, var(--radius-md));
+    padding: 18px 20px 16px;
+    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
     display: flex;
     flex-direction: column;
     position: relative;
+    overflow: hidden;
+}
+
+/* Channel stripe on left edge — opt-in only (mirrors .card::before in
+ * cards.css). Idle template-cards without a custom color stay clean.
+ * The Add card never gets a stripe (it's not an entity). */
+.template-card::before {
+    content: '';
+    position: absolute;
+    left: 0; top: 0; bottom: 0;
+    width: 3px;
+    background: var(--ch);
+    box-shadow: 0 0 10px color-mix(in srgb, var(--ch) 40%, transparent);
+    pointer-events: none;
+    z-index: 1;
+    transition: width 0.2s ease, box-shadow 0.2s ease;
+    display: none;
+}
+
+.template-card[data-has-color="1"]::before,
+.template-card.card-running::before {
+    display: block;
+}
+
+.add-template-card::before { display: none !important; }
+
+/* Corner bracket — silkscreened panel feel in the top-right */
+.template-card::after {
+    content: '';
+    position: absolute;
+    top: 8px; right: 8px;
+    width: 12px; height: 12px;
+    border-top: var(--lux-hairline, 1px) solid var(--lux-line-bold, var(--border-color));
+    border-right: var(--lux-hairline, 1px) solid var(--lux-line-bold, var(--border-color));
+    pointer-events: none;
+    opacity: 0.7;
+    z-index: 1;
 }
 
 .template-card:hover {
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--lux-shadow-rack, 0 8px 24px var(--shadow-color));
     transform: translateY(-2px);
+    border-color: var(--lux-line-bold, var(--border-color));
+}
+
+.template-card:hover::before {
+    width: 4px;
+    box-shadow: 0 0 14px color-mix(in srgb, var(--ch) 70%, transparent);
 }
 
 .add-template-card {
@@ -93,13 +137,19 @@
 }
 
 .badge {
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 0.75rem;
-    font-weight: bold;
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 8px;
+    border-radius: 2px;
+    border: var(--lux-hairline, 1px) solid transparent;
+    font-family: var(--font-mono, inherit);
+    font-size: 0.62rem;
+    font-weight: 700;
+    letter-spacing: 0.12em;
     text-transform: uppercase;
     white-space: nowrap;
     flex-shrink: 0;
+    line-height: 1.4;
 }
 
 .template-description {
@@ -606,36 +656,44 @@ body.pp-filter-dragging .pp-filter-drag-handle {
     background: none;
     border: none;
     padding: 8px 14px;
-    font-size: 0.9rem;
-    font-weight: 500;
-    color: var(--text-secondary);
+    font-family: var(--font-mono, inherit);
+    font-size: 0.72rem;
+    font-weight: 600;
+    color: var(--lux-ink-mute, var(--text-secondary));
     cursor: pointer;
     border-bottom: 2px solid transparent;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
     transition: color 0.2s ease, border-color 0.25s ease;
 }
 
 .stream-tab-btn:hover {
-    color: var(--text-color);
+    color: var(--lux-ink, var(--text-color));
 }
 
 .stream-tab-btn.active {
-    color: var(--primary-text-color);
-    border-bottom-color: var(--primary-color);
+    color: var(--ch-signal, var(--primary-color));
+    border-bottom-color: var(--ch-signal, var(--primary-color));
+    text-shadow: 0 0 12px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 30%, transparent);
 }
 
 .stream-tab-count {
-    background: var(--border-color);
-    color: var(--text-secondary);
-    font-size: 0.7rem;
-    font-weight: 600;
+    background: var(--lux-bg-3, var(--border-color));
+    color: var(--lux-ink-dim, var(--text-secondary));
+    font-family: var(--font-mono, monospace);
+    font-size: 0.56rem;
+    font-weight: 700;
     padding: 1px 6px;
-    border-radius: 8px;
+    border-radius: 2px;
     margin-left: 4px;
+    letter-spacing: 0.04em;
+    font-variant-numeric: tabular-nums;
 }
 
 .stream-tab-btn.active .stream-tab-count {
-    background: var(--primary-color);
-    color: var(--primary-contrast);
+    background: var(--ch-signal, var(--primary-color));
+    color: var(--lux-bg-0, var(--primary-contrast));
+    box-shadow: 0 0 6px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 40%, transparent);
 }
 
 .cs-expand-collapse-group {
@@ -685,11 +743,26 @@ body.pp-filter-dragging .pp-filter-drag-handle {
 }
 
 .subtab-section-header {
-    font-size: 1rem;
-    font-weight: 600;
-    color: var(--text-secondary);
-    margin: 0 0 12px 0;
-    padding-bottom: 8px;
+    font-family: var(--font-mono, monospace);
+    font-size: 0.82rem;
+    font-weight: 700;
+    color: var(--lux-ink-dim, var(--text-secondary));
+    margin: 0 0 16px 0;
+    padding-bottom: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.25em;
+    border-bottom: var(--lux-hairline, 1px) solid var(--lux-line, var(--border-color));
+    position: relative;
+}
+
+.subtab-section-header::before {
+    content: '';
+    position: absolute;
+    left: 0; bottom: -1px;
+    width: 48px;
+    height: 1px;
+    background: var(--ch-signal, var(--primary-color));
+    box-shadow: 0 0 6px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 50%, transparent);
 }
 
 .subtab-section-header.cs-header {
@@ -731,13 +804,16 @@ body.pp-filter-dragging .pp-filter-drag-handle {
 }
 
 .cs-count {
-    background: var(--border-color);
-    color: var(--text-secondary);
-    border-radius: 10px;
-    padding: 0 7px;
-    font-size: 0.75rem;
+    background: var(--lux-bg-3, var(--border-color));
+    color: var(--lux-ink-dim, var(--text-secondary));
+    border-radius: 2px;
+    padding: 2px 7px;
+    font-family: var(--font-mono, monospace);
+    font-size: 0.6rem;
     font-weight: 600;
     flex-shrink: 0;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.04em;
 }
 
 .cs-collapsed .cs-filter-wrap,
@@ -758,55 +834,89 @@ body.pp-filter-dragging .pp-filter-drag-handle {
 
 .cs-filter-wrap {
     position: relative;
-    width: 180px;
-    max-width: 40%;
+    width: 220px;
+    max-width: 45%;
     flex-shrink: 0;
 }
 
+/* Search input with embedded magnifier icon (data URI keeps the HTML
+   untouched), neon focus glow, monospace placeholder for the technical
+   look used elsewhere in the dashboard. */
 .cs-filter-wrap .cs-filter {
     width: 100%;
-    padding: 4px 26px 4px 10px;
-    font-size: 0.78rem;
-    border: 1px solid var(--border-color);
-    border-radius: 14px;
-    background: var(--bg-secondary);
-    color: var(--text-color);
+    padding: 7px 32px 7px 32px;
+    font-family: var(--font-mono, monospace);
+    font-size: 0.76rem;
+    letter-spacing: 0.04em;
+    border: var(--lux-hairline, 1px) solid var(--lux-line, var(--border-color));
+    border-radius: var(--lux-r-md, 6px);
+    background-color: var(--lux-bg-0, var(--bg-secondary));
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.35-4.35'/></svg>");
+    background-repeat: no-repeat;
+    background-position: 10px center;
+    background-size: 14px 14px;
+    color: var(--lux-ink, var(--text-color));
     outline: none;
-    box-shadow: none;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
     box-sizing: border-box;
-    transition: border-color 0.2s, background 0.2s, width 0.2s;
+    transition:
+        border-color 0.15s ease,
+        background-color 0.15s ease,
+        box-shadow 0.2s ease;
+}
+
+.cs-filter-wrap .cs-filter:hover {
+    border-color: var(--lux-line-bold, var(--border-color));
 }
 
 .cs-filter-wrap .cs-filter:focus {
     border-color: var(--primary-color);
-    background: var(--bg-color);
+    background-color: var(--lux-bg-1, var(--bg-color));
+    box-shadow:
+        inset 0 1px 2px rgba(0, 0, 0, 0.3),
+        0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent),
+        0 0 18px color-mix(in srgb, var(--primary-color) 22%, transparent);
 }
 
 .cs-filter::placeholder {
-    color: var(--text-secondary);
-    font-size: 0.75rem;
+    color: var(--lux-ink-faint, var(--text-secondary));
+    font-size: 0.72rem;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    opacity: 0.85;
 }
 
 .cs-filter-reset {
     position: absolute;
-    right: 2px;
+    right: 4px;
     top: 50%;
     transform: translateY(-50%);
-    background: none;
+    width: 22px;
+    height: 22px;
+    background: transparent;
     border: none;
-    color: var(--text-secondary);
-    font-size: 1rem;
+    color: var(--lux-ink-mute, var(--text-secondary));
+    font-size: 0.95rem;
     cursor: pointer;
-    padding: 0 5px;
+    padding: 0;
     line-height: 1;
-    border-radius: 50%;
-    transition: color 0.15s, background 0.15s;
+    border-radius: var(--lux-r-sm, 3px);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
+}
+
+/* Hide the clear button when the input is empty — CSS-only so the visual
+   state stays correct regardless of any JS-set inline display value. */
+.cs-filter-wrap .cs-filter:placeholder-shown + .cs-filter-reset {
     display: none;
 }
 
 .cs-filter-reset:hover {
-    color: var(--text-color);
-    background: var(--border-color);
+    color: var(--lux-ink, var(--text-color));
+    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-color) 30%, transparent);
 }
 
 /* Empty state for CardSection */

server/src/ledgrab/static/css/tree-nav.css

@@ -22,30 +22,53 @@
     min-width: 0;
 }
 
-/* ── Trigger bar ── */
+/* ── Trigger bar — module selector pill ── */
 
 .tree-dd-trigger {
     display: inline-flex;
     align-items: center;
-    gap: 6px;
-    padding: 5px 10px;
+    gap: 8px;
+    padding: 7px 12px;
     cursor: pointer;
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    background: var(--bg-secondary);
+    border: var(--lux-hairline, 1px) solid var(--lux-line, var(--border-color));
+    border-radius: var(--lux-r-sm, 3px);
+    background: var(--lux-bg-1, var(--bg-secondary));
     user-select: none;
-    font-size: 0.82rem;
-    color: var(--text-color);
-    transition: border-color 0.15s, background 0.15s;
+    font-family: var(--font-mono, monospace);
+    font-size: 0.72rem;
+    font-weight: 500;
+    letter-spacing: 0.06em;
+    color: var(--lux-ink, var(--text-color));
+    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
+    position: relative;
+    overflow: hidden;
+}
+
+/* Channel stripe on the left edge of the trigger */
+.tree-dd-trigger::before {
+    content: '';
+    position: absolute;
+    left: 0; top: 0; bottom: 0;
+    width: 2px;
+    background: var(--ch-signal, var(--primary-color));
+    opacity: 0.4;
+    transition: opacity 0.15s, box-shadow 0.15s;
 }
 
 .tree-dd-trigger:hover {
-    border-color: var(--primary-color);
-    background: color-mix(in srgb, var(--primary-color) 6%, var(--bg-secondary));
+    border-color: var(--lux-line-bold, var(--border-color));
+    background: var(--lux-bg-2, var(--bg-secondary));
+}
+
+.tree-dd-trigger:hover::before,
+.tree-dd-trigger.open::before {
+    opacity: 1;
+    box-shadow: 0 0 8px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 60%, transparent);
 }
 
 .tree-dd-trigger.open {
-    border-color: var(--primary-color);
+    border-color: color-mix(in srgb, var(--ch-signal, var(--primary-color)) 35%, var(--lux-line, var(--border-color)));
+    background: var(--lux-bg-2, var(--bg-secondary));
 }
 
 .tree-dd-trigger-icon {
@@ -60,18 +83,24 @@
 
 .tree-dd-trigger-title {
     font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
     white-space: nowrap;
+    color: var(--lux-ink, var(--text-color));
 }
 
 .tree-dd-trigger-count {
-    background: var(--primary-color);
-    color: var(--primary-contrast);
-    font-size: 0.6rem;
-    font-weight: 600;
-    padding: 0 5px;
-    border-radius: 8px;
-    min-width: 16px;
+    background: var(--ch-signal, var(--primary-color));
+    color: var(--lux-bg-0, var(--primary-contrast));
+    font-family: var(--font-mono, monospace);
+    font-size: 0.55rem;
+    font-weight: 700;
+    padding: 1px 6px;
+    border-radius: 2px;
+    min-width: 18px;
     text-align: center;
+    letter-spacing: 0.04em;
+    box-shadow: 0 0 6px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 40%, transparent);
 }
 
 .tree-dd-chevron {
@@ -94,24 +123,43 @@
     padding-left: 8px;
 }
 
-/* ── Dropdown panel ── */
+/* ── Dropdown panel — rack-selector popover ── */
 
 .tree-dd-panel {
     display: none;
     position: absolute;
     top: 100%;
     left: 0;
-    min-width: 240px;
-    max-width: 340px;
+    min-width: 260px;
+    max-width: 360px;
     max-height: 70vh;
     overflow-y: auto;
-    background: var(--bg-color);
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+    background: linear-gradient(180deg,
+        var(--lux-bg-1, var(--bg-color)) 0%,
+        var(--lux-bg-2, var(--bg-color)) 100%);
+    border: var(--lux-hairline, 1px) solid var(--lux-line-bold, var(--border-color));
+    border-radius: var(--lux-r-md, 6px);
+    box-shadow: var(--lux-shadow-rack, 0 8px 24px rgba(0, 0, 0, 0.25));
     z-index: 100;
-    padding: 4px 0;
-    margin-top: 4px;
+    padding: 6px 0;
+    margin-top: 6px;
+    scrollbar-width: thin;
+}
+
+/* Channel accent rule at the top of the panel */
+.tree-dd-panel::before {
+    content: '';
+    position: absolute;
+    left: 0; right: 0; top: 0;
+    height: 1px;
+    background: linear-gradient(90deg,
+        transparent 0%,
+        var(--ch-signal, var(--primary-color)) 20%,
+        var(--ch-cyan, var(--primary-color)) 50%,
+        var(--ch-magenta, var(--primary-color)) 80%,
+        transparent 100%);
+    opacity: 0.5;
+    pointer-events: none;
 }
 
 .tree-dd-panel.open {
@@ -123,14 +171,26 @@
 .tree-dd-group-header {
     display: flex;
     align-items: center;
-    gap: 6px;
-    padding: 6px 12px 3px;
-    font-size: 0.68rem;
-    font-weight: 700;
-    color: var(--text-muted);
+    gap: 8px;
+    padding: 8px 14px 4px;
+    font-family: var(--font-mono, monospace);
+    font-size: 0.56rem;
+    font-weight: 600;
+    color: var(--lux-ink-mute, var(--text-muted));
     text-transform: uppercase;
-    letter-spacing: 0.04em;
+    letter-spacing: 0.22em;
     user-select: none;
+    position: relative;
+}
+
+/* Small square dot prefix — reads like a silkscreened section marker. */
+.tree-dd-group-header::before {
+    content: '';
+    width: 4px;
+    height: 4px;
+    background: var(--lux-ink-faint, var(--text-muted));
+    border-radius: 1px;
+    flex-shrink: 0;
 }
 
 .tree-dd-group-header.tree-dd-depth-1 {
@@ -184,12 +244,15 @@
 .tree-dd-leaf {
     display: flex;
     align-items: center;
-    gap: 6px;
-    padding: 5px 12px 5px 20px;
+    gap: 8px;
+    padding: 7px 14px 7px 22px;
     cursor: pointer;
-    font-size: 0.8rem;
-    color: var(--text-secondary);
-    transition: color 0.1s, background 0.1s;
+    font-family: var(--font-body, inherit);
+    font-size: 0.82rem;
+    font-weight: 500;
+    color: var(--lux-ink-dim, var(--text-secondary));
+    transition: color 0.1s, background 0.1s, box-shadow 0.1s;
+    position: relative;
 }
 
 /* Indent leaves inside nested groups */
@@ -203,19 +266,38 @@
 }
 
 .tree-dd-leaf:hover {
-    color: var(--text-color);
-    background: var(--bg-secondary);
+    color: var(--lux-ink, var(--text-color));
+    background: var(--lux-bg-3, var(--bg-secondary));
 }
 
+/* Active leaf: LED pip on the left + channel glow + brighter text */
 .tree-dd-leaf.active {
-    color: var(--primary-text-color);
-    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
+    color: var(--lux-ink, var(--text-color));
+    background: linear-gradient(90deg,
+        color-mix(in srgb, var(--ch-signal, var(--primary-color)) 14%, transparent) 0%,
+        transparent 80%);
     font-weight: 600;
+    box-shadow: inset 2px 0 0 var(--ch-signal, var(--primary-color));
+}
+
+.tree-dd-leaf.active::before {
+    content: '';
+    position: absolute;
+    left: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: var(--ch-signal, var(--primary-color));
+    box-shadow: 0 0 6px var(--ch-signal, var(--primary-color));
+    animation: pulse 2s ease-in-out infinite;
 }
 
 .tree-dd-leaf.active .tree-count {
-    background: var(--primary-color);
-    color: var(--primary-contrast);
+    background: var(--ch-signal, var(--primary-color));
+    color: var(--lux-bg-0, var(--primary-contrast));
+    box-shadow: 0 0 6px color-mix(in srgb, var(--ch-signal, var(--primary-color)) 50%, transparent);
 }
 
 .tree-dd-leaf .tree-node-icon {
@@ -238,22 +320,26 @@
 
 /* ── Count badge (shared) ── */
 
-.tree-count {
-    background: var(--border-color);
-    color: var(--text-secondary);
-    font-size: 0.6rem;
+.tree-count,
+.tree-dd-group-count {
+    background: var(--lux-bg-3, var(--border-color));
+    color: var(--lux-ink-dim, var(--text-secondary));
+    font-family: var(--font-mono, monospace);
+    font-size: 0.56rem;
     font-weight: 600;
-    padding: 0 5px;
-    border-radius: 8px;
+    padding: 1px 6px;
+    border-radius: 2px;
     flex-shrink: 0;
-    min-width: 16px;
+    min-width: 18px;
     text-align: center;
+    letter-spacing: 0.04em;
+    font-variant-numeric: tabular-nums;
 }
 
-/* ── Group separator ── */
+/* ── Group separator — hairline-dashed between top-level groups ── */
 
 .tree-dd-group + .tree-dd-group {
-    border-top: 1px solid var(--border-color);
-    margin-top: 2px;
-    padding-top: 2px;
+    border-top: 1px dashed var(--lux-line, var(--border-color));
+    margin-top: 4px;
+    padding-top: 4px;
 }

server/src/ledgrab/static/css/tutorials.css

@@ -195,3 +195,346 @@
 }
 
 /* target z-index for fixed overlay is set inline via JS (target is outside overlay DOM) */
+
+
+/* ──────────────────────────────────────────────────────────────────────
+   v2 "Signal Bench" — opt-in via .tutorial-v2 on the overlay root.
+   Keeps the legacy ring+tooltip CSS untouched so unmigrated tours keep
+   working. Aligns with the lux/instrument language used elsewhere in
+   the UI (hairlines, JetBrains Mono labels, --ch-signal accent).
+   ────────────────────────────────────────────────────────────────────── */
+
+/* Backdrop: dimmer page + a hint of grain so the cutout reads as an
+   instrument viewfinder instead of a flat hole-punch. */
+.tutorial-overlay.tutorial-v2 .tutorial-backdrop {
+    background:
+        repeating-linear-gradient(
+            0deg,
+            rgba(255, 255, 255, 0.018) 0px,
+            rgba(255, 255, 255, 0.018) 1px,
+            transparent 1px,
+            transparent 3px
+        ),
+        radial-gradient(
+            1400px 900px at 50% 35%,
+            rgba(0, 0, 0, 0.78) 0%,
+            rgba(0, 0, 0, 0.92) 100%
+        );
+    transition: clip-path 0.32s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+[data-theme="light"] .tutorial-overlay.tutorial-v2 .tutorial-backdrop {
+    background:
+        repeating-linear-gradient(
+            0deg,
+            rgba(0, 0, 0, 0.02) 0px,
+            rgba(0, 0, 0, 0.02) 1px,
+            transparent 1px,
+            transparent 3px
+        ),
+        radial-gradient(
+            1400px 900px at 50% 35%,
+            rgba(20, 24, 30, 0.55) 0%,
+            rgba(20, 24, 30, 0.72) 100%
+        );
+}
+
+/* Ring becomes a hairline + signal-glow frame; the prominent visual is
+   the 4 corner brackets layered on top. */
+.tutorial-overlay.tutorial-v2 .tutorial-ring {
+    border: 1px dashed color-mix(in srgb, var(--ch-signal) 38%, transparent);
+    border-radius: 2px;
+    animation: none;
+    box-shadow:
+        0 0 0 1px color-mix(in srgb, var(--ch-signal) 14%, transparent),
+        0 0 22px color-mix(in srgb, var(--ch-signal) 28%, transparent),
+        inset 0 0 0 1px color-mix(in srgb, var(--ch-signal) 6%, transparent);
+    transition:
+        left 0.28s cubic-bezier(0.22, 1, 0.36, 1),
+        top 0.28s cubic-bezier(0.22, 1, 0.36, 1),
+        width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
+        height 0.28s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.tutorial-overlay.tutorial-v2 .tutorial-reticle-corner {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    border: 2px solid var(--ch-signal);
+    pointer-events: none;
+    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ch-signal) 55%, transparent));
+}
+.tutorial-overlay.tutorial-v2 .tutorial-reticle-corner.tl {
+    top: -2px; left: -2px;
+    border-right: none; border-bottom: none;
+}
+.tutorial-overlay.tutorial-v2 .tutorial-reticle-corner.tr {
+    top: -2px; right: -2px;
+    border-left: none; border-bottom: none;
+}
+.tutorial-overlay.tutorial-v2 .tutorial-reticle-corner.bl {
+    bottom: -2px; left: -2px;
+    border-right: none; border-top: none;
+}
+.tutorial-overlay.tutorial-v2 .tutorial-reticle-corner.br {
+    bottom: -2px; right: -2px;
+    border-left: none; border-top: none;
+}
+
+/* Animate corner draw-in on each step change (ring already eases its
+   bounds; this adds a snappy "lock" on top). */
+.tutorial-overlay.tutorial-v2.step-changed .tutorial-reticle-corner {
+    animation: tutorial-corner-lock 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+@keyframes tutorial-corner-lock {
+    0%   { opacity: 0; transform: scale(2.4); }
+    60%  { opacity: 1; transform: scale(0.85); }
+    100% { opacity: 1; transform: scale(1); }
+}
+
+/* Patch cable — connects reticle to tooltip. Animated dash-offset reads
+   as transmission flowing toward the tooltip. Absolute by default for
+   modal-mode overlays; viewport-fixed for tour overlays via the
+   .tutorial-overlay-fixed class. */
+.tutorial-overlay.tutorial-v2 .tutorial-cable {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 101;
+    overflow: visible;
+}
+.tutorial-overlay-fixed.tutorial-v2 .tutorial-cable {
+    position: fixed;
+}
+.tutorial-overlay.tutorial-v2 .tutorial-cable line {
+    stroke: var(--ch-signal);
+    stroke-width: 1.25;
+    stroke-dasharray: 4 5;
+    stroke-linecap: round;
+    fill: none;
+    opacity: 0.7;
+    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ch-signal) 50%, transparent));
+    animation: tutorial-cable-flow 1.4s linear infinite;
+    transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1);
+}
+@keyframes tutorial-cable-flow {
+    from { stroke-dashoffset: 0; }
+    to   { stroke-dashoffset: -18; }
+}
+
+/* Tooltip — instrument readout: square corners, hairline border,
+   inner ring, lux shadow. */
+.tutorial-overlay.tutorial-v2 .tutorial-tooltip {
+    width: 296px;
+    background: var(--card-bg);
+    border: 1px solid var(--lux-line-bold);
+    border-radius: 2px;
+    box-shadow:
+        0 0 0 1px var(--lux-bg-2),
+        var(--lux-shadow-rack, 0 8px 24px rgba(0, 0, 0, 0.5)),
+        0 0 32px color-mix(in srgb, var(--ch-signal) 12%, transparent);
+    animation: tutorial-tooltip-v2-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
+    overflow: hidden;
+    position: relative;
+}
+.tutorial-overlay.tutorial-v2 .tutorial-tooltip::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: 2px;
+    background: linear-gradient(
+        90deg,
+        transparent 0%,
+        var(--ch-signal) 20%,
+        var(--ch-signal) 80%,
+        transparent 100%
+    );
+    opacity: 0.85;
+}
+@keyframes tutorial-tooltip-v2-in {
+    from { opacity: 0; transform: translateY(6px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+.tutorial-overlay.tutorial-v2 .tutorial-tooltip-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 12px 8px;
+    border-bottom: 1px solid var(--lux-line);
+}
+.tutorial-overlay.tutorial-v2 .tutorial-tooltip-eyebrow {
+    flex: 1;
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 0.14em;
+    color: var(--ch-signal);
+    text-transform: uppercase;
+}
+.tutorial-overlay.tutorial-v2 .tutorial-step-counter {
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    font-size: 11px;
+    font-weight: 500;
+    letter-spacing: 0.06em;
+    color: var(--lux-ink-dim);
+    font-variant-numeric: tabular-nums;
+}
+.tutorial-tooltip-breadcrumb {
+    display: none;
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--lux-ink-mute, var(--text-muted));
+    max-width: 140px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.tutorial-tooltip-breadcrumb.is-visible {
+    display: inline-block;
+}
+.tutorial-tooltip-breadcrumb.is-visible + .tutorial-step-counter::before {
+    content: '· ';
+    color: var(--lux-ink-mute, var(--text-muted));
+    margin-right: 4px;
+}
+.tutorial-overlay.tutorial-v2 .tutorial-close-btn {
+    color: var(--lux-ink-mute);
+    border-radius: 2px;
+}
+.tutorial-overlay.tutorial-v2 .tutorial-close-btn:hover {
+    color: var(--lux-ink);
+    background: var(--lux-bg-2);
+}
+
+/* Segmented progress pips — one slot per step. */
+.tutorial-overlay.tutorial-v2 .tutorial-pips {
+    display: flex;
+    gap: 3px;
+    padding: 10px 12px 4px;
+}
+.tutorial-overlay.tutorial-v2 .tutorial-pip {
+    flex: 1;
+    height: 3px;
+    background: var(--lux-line);
+    border-radius: 1px;
+    transition: background 0.2s ease, box-shadow 0.2s ease;
+}
+.tutorial-overlay.tutorial-v2 .tutorial-pip.done {
+    background: color-mix(in srgb, var(--ch-signal) 60%, var(--lux-line));
+}
+.tutorial-overlay.tutorial-v2 .tutorial-pip.active {
+    background: var(--ch-signal);
+    box-shadow: 0 0 8px color-mix(in srgb, var(--ch-signal) 60%, transparent);
+}
+
+.tutorial-overlay.tutorial-v2 .tutorial-tooltip-text {
+    margin: 0;
+    padding: 8px 14px 14px;
+    line-height: 1.55;
+    color: var(--lux-ink);
+    font-size: 13.5px;
+    font-weight: 400;
+    letter-spacing: 0.005em;
+}
+
+.tutorial-overlay.tutorial-v2 .tutorial-tooltip-nav {
+    display: flex;
+    gap: 8px;
+    padding: 10px 12px;
+    border-top: 1px solid var(--lux-line);
+}
+.tutorial-overlay.tutorial-v2 .tutorial-prev-btn,
+.tutorial-overlay.tutorial-v2 .tutorial-next-btn {
+    flex: 1;
+    padding: 7px 10px;
+    border: 1px solid var(--lux-line-bold);
+    border-radius: 2px;
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    font-size: 10.5px;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.tutorial-overlay.tutorial-v2 .tutorial-prev-btn {
+    background: transparent;
+    color: var(--lux-ink-dim);
+}
+.tutorial-overlay.tutorial-v2 .tutorial-prev-btn:hover:not(:disabled) {
+    color: var(--lux-ink);
+    border-color: var(--lux-ink-mute);
+    background: var(--lux-bg-2);
+}
+.tutorial-overlay.tutorial-v2 .tutorial-next-btn {
+    background: var(--ch-signal);
+    color: var(--primary-contrast, #000);
+    border-color: var(--ch-signal);
+}
+.tutorial-overlay.tutorial-v2 .tutorial-next-btn:hover:not(:disabled) {
+    box-shadow: 0 0 16px color-mix(in srgb, var(--ch-signal) 50%, transparent);
+    filter: brightness(1.06);
+}
+.tutorial-overlay.tutorial-v2 .tutorial-prev-btn:disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+}
+
+/* Keyboard hint chip — surfaces existing arrow/Esc bindings. */
+.tutorial-overlay.tutorial-v2 .tutorial-keyhint {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 12px 10px;
+    border-top: 1px solid var(--lux-line);
+    background: var(--lux-bg-1);
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    font-size: 9.5px;
+    font-weight: 500;
+    letter-spacing: 0.1em;
+    color: var(--lux-ink-mute);
+    text-transform: uppercase;
+}
+.tutorial-overlay.tutorial-v2 .tutorial-keyhint kbd {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 4px;
+    background: var(--lux-bg-3);
+    border: 1px solid var(--lux-line-bold);
+    border-radius: 2px;
+    font: inherit;
+    font-size: 10px;
+    color: var(--lux-ink-dim);
+}
+.tutorial-overlay.tutorial-v2 .tutorial-keyhint span {
+    margin-right: 6px;
+}
+.tutorial-overlay.tutorial-v2 .tutorial-keyhint span:last-child {
+    margin-right: 0;
+}
+
+/* Mobile — collapse cable, dock tooltip to bottom of viewport. */
+@media (max-width: 640px) {
+    .tutorial-overlay.tutorial-v2 .tutorial-cable { display: none; }
+    .tutorial-overlay.tutorial-v2 .tutorial-tooltip {
+        width: calc(100vw - 24px);
+        max-width: 360px;
+    }
+    .tutorial-overlay.tutorial-v2 .tutorial-keyhint { display: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .tutorial-overlay.tutorial-v2 .tutorial-cable line { animation: none; }
+    .tutorial-overlay.tutorial-v2 .tutorial-tooltip { animation: none; }
+    .tutorial-overlay.tutorial-v2.step-changed .tutorial-reticle-corner { animation: none; }
+    .tutorial-overlay.tutorial-v2 .tutorial-ring { transition: none; }
+}

server/src/ledgrab/static/js/app.ts

@@ -16,6 +16,8 @@ import { initCardGlare } from './core/card-glare.ts';
 import { initBgAnim, updateBgAnimAccent, updateBgAnimTheme } from './core/bg-anim.ts';
 import { initBgShaders } from './core/bg-shaders.ts';
 import { initTabIndicator, updateTabIndicator } from './core/tab-indicator.ts';
+import { initModMenu } from './core/mod-menu.ts';
+import { toggleCardHidden } from './core/card-sections.ts';
 
 // Layer 2: ui
 import {
@@ -32,6 +34,7 @@ import {
 import {
     startCalibrationTutorial, startDeviceTutorial, startGettingStartedTutorial,
     startDashboardTutorial, startTargetsTutorial, startSourcesTutorial, startAutomationsTutorial,
+    startIntegrationsTutorial,
     closeTutorial, tutorialNext, tutorialPrev,
 } from './features/tutorials.ts';
 
@@ -48,7 +51,14 @@ import {
     dashboardPauseClock, dashboardResumeClock, dashboardResetClock,
     toggleDashboardSection, changeDashboardPollInterval,
 } from './features/dashboard.ts';
+import {
+    hydrateDashboardLayoutFromCache, syncDashboardLayoutFromServer,
+} from './features/dashboard-layout.ts';
+import {
+    openDashboardCustomize, closeDashboardCustomize,
+} from './features/dashboard-customize.ts';
 import { startEventsWS, stopEventsWS } from './core/events-ws.ts';
+import { startNotificationsWatcher } from './features/notifications-watcher.ts';
 import { startEntityEventListeners } from './core/entity-events.ts';
 import {
     startPerfPolling, stopPerfPolling, setPerfMode,
@@ -56,7 +66,7 @@ import {
 import {
     loadPictureSources, switchStreamTab,
     showAddTemplateModal, editTemplate, closeTemplateModal, saveTemplate, deleteTemplate,
-    showTestTemplateModal, closeTestTemplateModal, onEngineChange, runTemplateTest,
+    showTestTemplateModal, closeTestTemplateModal, onEngineChange, runTemplateTest, openTestDisplayPicker,
     showAddAudioTemplateModal, editAudioTemplate, closeAudioTemplateModal, saveAudioTemplate, deleteAudioTemplate,
     cloneAudioTemplate, onAudioEngineChange,
     showTestAudioTemplateModal, closeTestAudioTemplateModal, startAudioTemplateTest,
@@ -97,7 +107,7 @@ import {
 } from './features/integrations.ts';
 import {
     openScenePresetCapture, editScenePreset, saveScenePreset, closeScenePresetEditor,
-    activateScenePreset, cloneScenePreset, deleteScenePreset,
+    activateScenePreset, cloneScenePreset, deleteScenePreset, recaptureScenePreset,
     addSceneTarget,
 } from './features/scene-presets.ts';
 
@@ -121,7 +131,6 @@ import {
 import {
     showCSSEditor, closeCSSEditorModal, forceCSSEditorClose, saveCSSEditor, deleteColorStrip,
     onCSSTypeChange, onEffectTypeChange, onEffectPaletteChange, onAnimationTypeChange, onCSSClockChange, onDaylightRealTimeChange,
-    colorCycleAddColor, colorCycleRemoveColor,
     compositeAddLayer, compositeRemoveLayer,
     mappedAddZone, mappedRemoveZone,
     onAudioVizChange,
@@ -213,7 +222,10 @@ import {
     connectLogViewer, disconnectLogViewer, clearLogViewer, applyLogFilter,
     openLogOverlay, closeLogOverlay,
     loadLogLevel, setLogLevel,
-    saveExternalUrl, getBaseOrigin, loadExternalUrl,
+    loadShutdownAction, setShutdownAction,
+    loadDaylightTimezone, saveDaylightTimezone,
+    requestNotifPermissionFromSettings, testNotifFromSettings,
+    saveExternalUrl, revertExternalUrl, getBaseOrigin, loadExternalUrl,
 } from './features/settings.ts';
 import {
     loadUpdateStatus, initUpdateListener, checkForUpdates,
@@ -231,6 +243,11 @@ Object.assign(window, {
     // core / state (for inline script)
     setApiKey,
 
+    // mod-card menu — referenced by inline onclick on .mod-menu__item
+    // for the "Hide card" entry. The handler uses the registered
+    // CardSection's section key (e.g. 'led-devices') + the card id.
+    toggleCardHidden,
+
     // visual effects (called from inline <script>)
     _updateBgAnimAccent: updateBgAnimAccent,
     _updateBgAnimTheme: updateBgAnimTheme,
@@ -273,6 +290,7 @@ Object.assign(window, {
     startTargetsTutorial,
     startSourcesTutorial,
     startAutomationsTutorial,
+    startIntegrationsTutorial,
     closeTutorial,
     tutorialNext,
     tutorialPrev,
@@ -294,6 +312,8 @@ Object.assign(window, {
 
     // dashboard
     loadDashboard,
+    openDashboardCustomize,
+    closeDashboardCustomize,
     dashboardToggleAutomation,
     dashboardStartTarget,
     dashboardStopTarget,
@@ -320,6 +340,7 @@ Object.assign(window, {
     closeTestTemplateModal,
     onEngineChange,
     runTemplateTest,
+    openTestDisplayPicker,
     updateCaptureDuration,
     showAddStreamModal,
     editStream,
@@ -398,7 +419,7 @@ Object.assign(window, {
     deleteAutomation,
     copyWebhookUrl,
 
-    // scene presets (modal buttons stay on window; card actions migrated to event delegation)
+    // scene presets — modal buttons + mod-card inline handlers
     openScenePresetCapture,
     editScenePreset,
     saveScenePreset,
@@ -406,6 +427,7 @@ Object.assign(window, {
     activateScenePreset,
     cloneScenePreset,
     deleteScenePreset,
+    recaptureScenePreset,
     addSceneTarget,
 
     // integrations
@@ -467,8 +489,6 @@ Object.assign(window, {
     onCSSClockChange,
     onAnimationTypeChange,
     onDaylightRealTimeChange,
-    colorCycleAddColor,
-    colorCycleRemoveColor,
     compositeAddLayer,
     compositeRemoveLayer,
     mappedAddZone,
@@ -607,7 +627,14 @@ Object.assign(window, {
     closeLogOverlay,
     loadLogLevel,
     setLogLevel,
+    loadShutdownAction,
+    setShutdownAction,
+    loadDaylightTimezone,
+    saveDaylightTimezone,
+    requestNotifPermissionFromSettings,
+    testNotifFromSettings,
     saveExternalUrl,
+    revertExternalUrl,
     getBaseOrigin,
 
     // update
@@ -692,6 +719,11 @@ document.addEventListener('DOMContentLoaded', async () => {
     // Load API key from localStorage before anything that triggers API calls
     setApiKey(localStorage.getItem('ledgrab_api_key'));
 
+    // Hydrate dashboard layout from localStorage cache so the first paint
+    // already reflects the user's saved customizations (no flash of
+    // default-then-custom). Server sync runs after auth.
+    hydrateDashboardLayoutFromCache();
+
     // Initialize locale (dispatches languageChanged which may trigger API calls)
     await initLocale();
 
@@ -717,6 +749,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 
     // Initialize visual effects
     initCardGlare();
+    initModMenu();
     initBgAnim();
     initBgShaders();
     initAppearance();
@@ -786,6 +819,11 @@ document.addEventListener('DOMContentLoaded', async () => {
     loadDisplays();
     loadTargetsTab();
 
+    // Pull the server-side dashboard layout (per-account, follows user
+    // across browsers). Fire-and-forget — the cached layout is already
+    // active; this overwrites it if the server has a newer copy.
+    syncDashboardLayoutFromServer();
+
     // Trigger the active tab's loader — initTabs() ran before authRequired
     // was known, so its conditional loader call may have been skipped.
     const activeTab = localStorage.getItem('activeTab') || 'dashboard';
@@ -796,7 +834,15 @@ document.addEventListener('DOMContentLoaded', async () => {
     // Start global events WebSocket and auto-refresh
     startEventsWS();
     startEntityEventListeners();
+    // Device-event notifications (snack/Web Notification per user prefs).
+    // Must start *after* startEventsWS so its DOM listeners catch the
+    // first events fired during the startup grace window.
+    startNotificationsWatcher().catch(() => {});
     startAutoRefresh();
+    // Perf poll starts globally so the transport-bar CPU / Mem cells stay
+    // live regardless of which tab is active. Tab-hidden pauses it via the
+    // visibilitychange handler in perf-charts.ts.
+    startPerfPolling();
 
     // Initialize update checker (banner + WS listener)
     initUpdateListener();

server/src/ledgrab/static/js/core/api.ts

@@ -305,6 +305,19 @@ export async function loadServerInfo() {
         if (data.repo_url) serverRepoUrl = data.repo_url;
         if (data.donate_url) serverDonateUrl = data.donate_url;
 
+        // Seed the transport-bar uptime ticker with the server's actual
+        // uptime. Survives page reloads and tracks the *server* process,
+        // not this browser session. The inline ticker reads this from
+        // ``window.__serverUptime`` and falls back to "—" if absent.
+        // ``recordedAtPerf`` uses ``performance.now()`` so wall-clock
+        // changes (NTP step, DST) don't make the counter jump.
+        if (typeof data.uptime_seconds === 'number') {
+            window.__serverUptime = {
+                uptimeSec: data.uptime_seconds,
+                recordedAtPerf: performance.now(),
+            };
+        }
+
         // Demo mode detection
         if (data.demo_mode && !demoMode) {
             demoMode = true;

server/src/ledgrab/static/js/core/bg-anim.ts

@@ -114,7 +114,10 @@ let _particleBuf: Float32Array | null = null; // pre-allocated Float32Array for
 let _raf: number | null = null;
 let _startTime = 0;
 let _accent = [76 / 255, 175 / 255, 80 / 255];
-let _bgColor = [26 / 255, 26 / 255, 26 / 255];
+// Base canvas colour — must match `--bg-color` (pure black / white in the
+// Lumenworks theme). Using mid-greys here washes the additive glow with a
+// constant tint that doesn't exist on the surrounding page background.
+let _bgColor = [0, 0, 0];
 let _isLight = 0.0;
 
 // Particle state (CPU-side, positions in 0..1 UV space)
@@ -262,7 +265,9 @@ export function updateBgAnimAccent(hex: string): void {
 }
 
 export function updateBgAnimTheme(isDark: boolean): void {
-    _bgColor = isDark ? [26 / 255, 26 / 255, 26 / 255] : [245 / 255, 245 / 255, 245 / 255];
+    // Match the page's `--bg-color` (pure black/white) — see comment on
+    // the `_bgColor` declaration above.
+    _bgColor = isDark ? [0, 0, 0] : [1, 1, 1];
     _isLight = isDark ? 0.0 : 1.0;
 }
 

server/src/ledgrab/static/js/core/bg-shaders.ts

@@ -320,7 +320,10 @@ let _uBg: WebGLUniformLocation | null = null;
 let _uLight: WebGLUniformLocation | null = null;
 
 let _accent = [76 / 255, 175 / 255, 80 / 255];
-let _bgColor = [26 / 255, 26 / 255, 26 / 255];
+// Base canvas colour — must match `--bg-color` (pure black / white in
+// the Lumenworks theme). Using mid-greys here washes the additive glow
+// with a constant tint that doesn't exist on the surrounding page bg.
+let _bgColor = [0, 0, 0];
 let _isLight = 0.0;
 
 // ─── GL helpers ──────────────────────────────────────────────
@@ -471,7 +474,8 @@ export function updateShaderAccent(hex: string): void {
 
 /** Update theme brightness (called on theme toggle). */
 export function updateShaderTheme(isDark: boolean): void {
-    _bgColor = isDark ? [26 / 255, 26 / 255, 26 / 255] : [245 / 255, 245 / 255, 245 / 255];
+    // Match the page's `--bg-color` token (pure black/white).
+    _bgColor = isDark ? [0, 0, 0] : [1, 1, 1];
     _isLight = isDark ? 0.0 : 1.0;
 }
 

server/src/ledgrab/static/js/core/bulk-toolbar.ts

@@ -11,6 +11,7 @@
 
 import { t } from './i18n.ts';
 import { showConfirm } from './ui.ts';
+import { ICON_LIST_CHECKS, ICON_CIRCLE_OFF, ICON_X } from './icons.ts';
 import type { CardSection } from './card-sections.ts';
 
 let _activeSection: CardSection | null = null;   // CardSection currently in bulk mode
@@ -53,28 +54,40 @@ function _render() {
     if (!section) { el.classList.remove('visible'); return; }
 
     const count = section._selected.size;
+    const total = section._visibleCardCount();
     const actions = section.bulkActions || [];
+    const allSelected = count > 0 && count === total;
+    const noneSelected = count === 0;
 
     const actionBtns = actions.map(a => {
         const cls = a.style === 'danger' ? 'btn btn-icon btn-danger bulk-action-btn' : 'btn btn-icon btn-secondary bulk-action-btn';
         const label = t(a.labelKey);
         const inner = a.icon || label;
-        return `<button class="${cls}" data-bulk-action="${a.key}" title="${label}">${inner}</button>`;
+        const disabled = noneSelected ? ' disabled aria-disabled="true"' : '';
+        return `<button class="${cls}"${disabled} data-bulk-action="${a.key}" title="${label}">${inner}</button>`;
     }).join('');
 
+    // Two distinct icon buttons replace the previous tri-state checkbox so
+    // the affordance is unambiguous: pick everything, or clear the picks.
+    const selectAllDisabled = allSelected ? ' disabled aria-disabled="true"' : '';
+    const deselectAllDisabled = noneSelected ? ' disabled aria-disabled="true"' : '';
+
     el.innerHTML = `
-        <label class="bulk-select-all-wrap" title="${t('bulk.select_all')}">
-            <input type="checkbox" class="bulk-select-all-cb"${count > 0 && count === section._visibleCardCount() ? ' checked' : ''}>
-        </label>
-        <span class="bulk-count">${t('bulk.selected_count', { count })}</span>
+        <div class="bulk-pick">
+            <button class="bulk-pick-btn" data-bulk-pick="all"${selectAllDisabled} title="${t('bulk.select_all')}" aria-label="${t('bulk.select_all')}">${ICON_LIST_CHECKS}</button>
+            <button class="bulk-pick-btn" data-bulk-pick="none"${deselectAllDisabled} title="${t('bulk.deselect_all')}" aria-label="${t('bulk.deselect_all')}">${ICON_CIRCLE_OFF}</button>
+        </div>
+        <span class="bulk-count" aria-live="polite">${t('bulk.selected_count', { count })}<small class="bulk-count-total"> / ${total}</small></span>
         <div class="bulk-actions">${actionBtns}</div>
-        <button class="bulk-close" title="${t('bulk.cancel')}">&#x2715;</button>
+        <button class="bulk-close" title="${t('bulk.cancel')}" aria-label="${t('bulk.cancel')}">${ICON_X}</button>
     `;
 
-    // Select All checkbox
-    el.querySelector('.bulk-select-all-cb')!.addEventListener('change', (e) => {
-        if ((e.target as HTMLInputElement).checked) section.selectAll();
-        else section.deselectAll();
+    // Pick buttons
+    el.querySelector('[data-bulk-pick="all"]')!.addEventListener('click', () => {
+        section.selectAll();
+    });
+    el.querySelector('[data-bulk-pick="none"]')!.addEventListener('click', () => {
+        section.deselectAll();
     });
 
     // Action buttons

server/src/ledgrab/static/js/core/card-colors.ts

@@ -21,10 +21,24 @@
 
 import { createColorPicker, registerColorPicker } from './color-picker.ts';
 import { ICON_TRASH } from './icons.ts';
+import { renderModCardInner } from './mod-card.ts';
+import type { ModCardOpts } from './mod-card.ts';
 
 const STORAGE_KEY = 'cardColors';
 const DEFAULT_SWATCH = '#808080';
 
+/** Data attributes used as the entity-id key on card elements across the
+ *  app. setCardColor() walks all of these so a single picker click updates
+ *  every card representing the same entity (e.g. the targets-tab card AND
+ *  its dashboard mirror), not just the one that owns the picker. */
+const CARD_ID_ATTRS: readonly string[] = [
+    'data-target-id', 'data-device-id', 'data-automation-id',
+    'data-sync-clock-id', 'data-stream-id', 'data-template-id',
+    'data-pattern-template-id', 'data-pp-template-id', 'data-cspt-id',
+    'data-audio-template-id', 'data-audio-source-id', 'data-gi-id',
+    'data-scene-id', 'data-id',
+];
+
 function _getAll(): Record<string, string> {
     try { return JSON.parse(localStorage.getItem(STORAGE_KEY) ?? '{}') || {}; }
     catch { return {}; }
@@ -38,15 +52,49 @@ export function setCardColor(id: string, hex: string): void {
     const m = _getAll();
     if (hex) m[id] = hex; else delete m[id];
     localStorage.setItem(STORAGE_KEY, JSON.stringify(m));
+
+    // Live-update every card representing this entity. The card stripe is
+    // the ::before pseudo-element backed by --ch (see cards.css), so we
+    // override --ch inline rather than setting border-left — that avoids
+    // the double-stripe (custom border + primary --ch) the old approach
+    // produced, and reaches dashboard mirrors that the picker callback's
+    // .closest() lookup couldn't.
+    const escaped = CSS.escape(id);
+    const selector = CARD_ID_ATTRS.map(a => `[${a}="${escaped}"]`).join(',');
+    document.querySelectorAll(selector).forEach(el => {
+        const card = el as HTMLElement;
+        if (hex) card.style.setProperty('--ch', hex);
+        else card.style.removeProperty('--ch');
+
+        // Mod-card variant: also sync the leading colour-dot inside
+        // .mod-badge. The picker's `_cpPick` already inlined a
+        // background:hex on the swatch — clear it so the dot reverts
+        // to its channel-color default when the user resets.
+        const dot = card.querySelector(`#cp-swatch-cc-${escaped}`) as HTMLElement | null;
+        if (dot && dot.classList.contains('mod-badge__color')) {
+            if (hex) {
+                dot.dataset.custom = '1';
+                dot.style.setProperty('--user-color', hex);
+                // Clear any inline `background:hex` set by _cpPick so the
+                // CSS [data-custom] rule wins (background = var(--user-color)).
+                dot.style.removeProperty('background');
+            } else {
+                delete dot.dataset.custom;
+                dot.style.removeProperty('--user-color');
+                dot.style.removeProperty('background');
+            }
+        }
+    });
 }
 
 /**
- * Returns inline style string for card border-left.
- * Empty string when no color is set.
+ * Returns the inline style fragment for a card's accent override.
+ * Sets the --ch CSS variable so the existing ::before channel stripe
+ * picks up the user's color. Empty string when no color is set.
  */
 export function cardColorStyle(entityId: string): string {
     const c = getCardColor(entityId);
-    return c ? `border-left: 3px solid ${c}` : '';
+    return c ? `--ch: ${c}` : '';
 }
 
 /**
@@ -59,47 +107,105 @@ export function cardColorButton(entityId: string, cardAttr: string): string {
     const pickerId = `cc-${entityId}`;
 
     registerColorPicker(pickerId, (hex) => {
+        // setCardColor handles the DOM update on every card representing
+        // this entity (including dashboard mirrors). Nothing else to do.
         setCardColor(entityId, hex);
-        // Find the card that contains this picker (not a global querySelector
-        // which could match a dashboard compact card first)
-        const wrapper = document.getElementById(`cp-wrap-${pickerId}`);
-        const card = wrapper?.closest(`[${cardAttr}]`) as HTMLElement | null;
-        if (card) card.style.borderLeft = hex ? `3px solid ${hex}` : '';
     });
 
     return createColorPicker({ id: pickerId, currentColor: color, onPick: undefined, anchor: 'left', showReset: true, resetColor: DEFAULT_SWATCH });
 }
 
+/**
+ * Mod-card variant of `cardColorButton` — emits the leading
+ * `.mod-badge__color` dot inside a `.mod-badge`. The dot IS the
+ * picker swatch (same id as the legacy swatch so `_cpToggle()` finds
+ * it). The popover is appended as a sibling of the badge so it can
+ * detach to <body> with fixed positioning when needed (the existing
+ * picker logic in color-picker.ts handles that automatically).
+ *
+ * Returns inline HTML to be injected as the first child of
+ * `.mod-badge`. No surrounding span — the dot is the badge's leading
+ * element directly.
+ */
+export function cardColorDot(entityId: string, cardAttr: string): string {
+    const color = getCardColor(entityId);
+    const pickerId = `cc-${entityId}`;
+
+    registerColorPicker(pickerId, (hex) => {
+        setCardColor(entityId, hex);
+    });
+
+    // The dot doubles as the picker swatch. Inline `--user-color` is
+    // applied only when the user has picked a personal hue; absent it,
+    // the dot inherits the channel colour from the parent badge via
+    // the `.mod-badge__color` rule in cards.css.
+    const customAttr = color ? ` data-custom="1" style="--user-color:${color}"` : '';
+    const dataAttr = ` data-card-attr="${cardAttr}"`;
+
+    return `<span class="color-picker-wrapper mod-badge__color-wrap" id="cp-wrap-${entityId}">` +
+        `<span class="mod-badge__color color-picker-swatch" id="cp-swatch-${pickerId}" tabindex="0" role="button" aria-label="${getCardColorAriaLabel()}" onclick="event.stopPropagation(); window._cpToggle('${pickerId}')"${customAttr}${dataAttr}></span>` +
+        _colorPopoverHtml(pickerId, color || DEFAULT_SWATCH) +
+    `</span>`;
+}
+
+/** Build just the popover portion (the swatch is rendered separately
+ *  by `cardColorDot`). Mirrors `createColorPicker`'s popover output. */
+function _colorPopoverHtml(pickerId: string, currentColor: string): string {
+    // Reuse createColorPicker's full output but strip the wrapping
+    // .color-picker-wrapper and the legacy round swatch — we only need
+    // the popover. Easier: render the full widget into a temporary
+    // string and extract the popover. But that adds complexity. Since
+    // the popover markup is stable, inline it here.
+    const PRESETS = ['#4CAF50', '#7C4DFF', '#FF6D00', '#E91E63', '#00BCD4', '#FF5252', '#26A69A', '#2196F3', '#FFC107'];
+    const dots = PRESETS.map(c => {
+        const active = c.toLowerCase() === currentColor.toLowerCase() ? ' active' : '';
+        return `<button class="color-picker-dot${active}" style="background:${c}" aria-label="${c}" onclick="event.stopPropagation(); window._cpPick('${pickerId}','${c}')"></button>`;
+    }).join('');
+
+    return `<div class="color-picker-popover anchor-left" id="cp-pop-${pickerId}" style="display:none" onclick="event.stopPropagation()">` +
+        `<div class="color-picker-grid">${dots}</div>` +
+        `<div class="color-picker-custom" onclick="this.querySelector('input').click()">` +
+            `<input type="color" id="cp-native-${pickerId}" value="${currentColor}" ` +
+                `oninput="event.stopPropagation(); window._cpPick('${pickerId}',this.value)" ` +
+                `onchange="event.stopPropagation(); window._cpPick('${pickerId}',this.value)">` +
+            `<span>Custom</span>` +
+        `</div>` +
+        `<div class="color-picker-reset" onclick="event.stopPropagation(); window._cpReset('${pickerId}','${DEFAULT_SWATCH}')"><span>Reset</span></div>` +
+    `</div>`;
+}
+
+function getCardColorAriaLabel(): string {
+    // i18n is not always loaded when this module evaluates (renders
+    // happen during early page boot). Fall back to English.
+    return (window as any).__t?.('common.card_color') || 'Card color';
+}
+
 /**
  * Build a standard card shell with color support.
  *
- * Provides consistent structure across all card types:
- *   - .card-top-actions: remove button + optional extra top buttons
- *   - Bottom actions: action buttons + color picker (always last)
- *   - Automatic border-left color from localStorage
+ * Two rendering paths:
  *
- * @param {object} opts
- * @param {'card'|'template-card'} [opts.type='card']  Card CSS class
- * @param {string} opts.dataAttr   Data attribute name, e.g. 'data-device-id'
- * @param {string} opts.id         Entity ID value
- * @param {string} [opts.classes]  Extra CSS classes on root element
- * @param {string} [opts.topButtons]  HTML for extra top-right buttons (power, autostart)
- * @param {string} opts.removeOnclick  onclick handler string for remove button
- * @param {string} opts.removeTitle    title attribute for remove button
- * @param {string} opts.content    Inner HTML (header, props, metrics, etc.)
- * @param {string} opts.actions    Action button HTML (without wrapper div)
+ *   1. Legacy (content/actions) — emits `.card-top-actions` with the
+ *      remove button and a bottom `.card-actions` row with action
+ *      buttons + colour picker. Used by all cards that haven't been
+ *      migrated to the modular system yet.
+ *
+ *   2. Modular (`mod`) — emits the dashboard's `.mod-head / .mod-body /
+ *      .mod-foot` markup with a kebab overflow menu housing duplicate /
+ *      hide / delete. Card-color picker is integrated into the
+ *      `.mod-badge` as a leading dot. Use this for any new card and
+ *      when migrating existing card builders.
+ *
+ * Old callers keep working unchanged. New callers pass `mod`.
  */
-export function wrapCard({
-    type = 'card',
-    dataAttr,
-    id,
-    classes = '',
-    topButtons = '',
-    removeOnclick,
-    removeTitle,
-    content,
-    actions,
-}: {
+export function wrapCard(opts: WrapCardLegacyOpts | WrapCardModOpts): string {
+    if ('mod' in opts && opts.mod) {
+        return _renderModCard(opts as WrapCardModOpts);
+    }
+    return _renderLegacyCard(opts as WrapCardLegacyOpts);
+}
+
+export interface WrapCardLegacyOpts {
     type?: 'card' | 'template-card';
     dataAttr: string;
     id: string;
@@ -109,7 +215,28 @@ export function wrapCard({
     removeTitle: string;
     content: string;
     actions: string;
-}): string {
+    mod?: undefined;
+}
+
+export interface WrapCardModOpts {
+    type?: 'card' | 'template-card';
+    dataAttr: string;
+    id: string;
+    classes?: string;
+    mod: ModCardOpts;
+}
+
+function _renderLegacyCard({
+    type = 'card',
+    dataAttr,
+    id,
+    classes = '',
+    topButtons = '',
+    removeOnclick,
+    removeTitle,
+    content,
+    actions,
+}: WrapCardLegacyOpts): string {
     const actionsClass = type === 'template-card' ? 'template-card-actions' : 'card-actions';
     const colorStyle = cardColorStyle(id);
     return `
@@ -125,3 +252,39 @@ export function wrapCard({
             </div>
         </div>`;
 }
+
+function _renderModCard({
+    type = 'card',
+    dataAttr,
+    id,
+    classes = '',
+    mod,
+}: WrapCardModOpts): string {
+    // mod-card.ts and card-colors.ts have a cyclic import (mod-card uses
+    // cardColorDot, card-colors uses renderModCardInner). The cycle is
+    // safe because both modules only call each other inside function
+    // bodies — never during module initialization. ESM live bindings
+    // resolve correctly by the time these functions actually run.
+    const inner = renderModCardInner(_withColorBindings(mod, id, dataAttr));
+    const colorStyle = cardColorStyle(id);
+    const runningCls = mod.running ? ' card-running is-running' : '';
+    const colorAttr = colorStyle ? ` style="${colorStyle}" data-has-color="1"` : '';
+    return `
+        <div class="${type} mod-card${classes ? ' ' + classes : ''}${runningCls}" ${dataAttr}="${id}"${colorAttr}>
+            ${inner}
+        </div>`;
+}
+
+/** Inject entityId/cardAttr into the head opts so the badge dot can
+ *  register its picker without callers needing to pass the same id
+ *  twice. */
+function _withColorBindings(mod: ModCardOpts, id: string, dataAttr: string): ModCardOpts {
+    return {
+        ...mod,
+        head: {
+            ...mod.head,
+            entityId: mod.head.entityId ?? id,
+            cardAttr: mod.head.cardAttr ?? dataAttr,
+        },
+    };
+}

server/src/ledgrab/static/js/core/card-sections.ts

@@ -23,7 +23,7 @@
 
 import { t } from './i18n.ts';
 import { showBulkToolbar, hideBulkToolbar, updateBulkToolbar } from './bulk-toolbar.ts';
-import { ICON_LIST_CHECKS, ICON_EYE, ICON_EYE_OFF } from './icons.ts';
+import { ICON_LIST_CHECKS, ICON_EYE, ICON_EYE_OFF, ICON_CHECK } from './icons.ts';
 
 export interface BulkAction {
     key: string;
@@ -316,30 +316,46 @@ export class CardSection {
                 });
             }
 
-            // Card click delegation for selection
-            // Ctrl+Click on a card auto-enters bulk mode if not already selecting
+            // Card click delegation for selection.
+            //
+            // When in selection mode, the entire card becomes the click
+            // target — clicking anywhere on it toggles selection. Inner
+            // controls (buttons, sliders, kebab, color dot) are visually
+            // disabled via `.cs-selecting *` pointer-events:none in CSS,
+            // so events pass through to the card root.
+            //
+            // Outside selection mode, Ctrl/Cmd+Click on the card body
+            // (not on a button/input) auto-enters bulk mode and selects
+            // that card.
             content.addEventListener('click', (e: MouseEvent) => {
                 if (!this.keyAttr) return;
                 const card = (e.target as HTMLElement).closest(`[${this.keyAttr}]`);
                 if (!card) return;
-                // Don't hijack clicks on buttons, links, inputs inside cards
-                if ((e.target as HTMLElement).closest('button, a, input, select, textarea, .card-actions, .template-card-actions, .color-picker-wrapper')) return;
 
-                // Auto-enter selection mode on Ctrl/Cmd+Click
-                if (!this._selecting && (e.ctrlKey || e.metaKey)) {
+                if (this._selecting) {
+                    // pointer-events:none on descendants means events
+                    // already bypass inner controls; just toggle.
+                    const key = card.getAttribute(this.keyAttr);
+                    if (!key) return;
+                    if (e.shiftKey && this._lastClickedKey) {
+                        this._selectRange(content, this._lastClickedKey, key);
+                    } else {
+                        this._toggleSelect(key);
+                    }
+                    this._lastClickedKey = key;
+                    return;
+                }
+
+                // Not selecting — only auto-enter on Ctrl/Cmd+Click
+                // outside any interactive control.
+                if ((e.target as HTMLElement).closest('button, a, input, select, textarea, .card-actions, .template-card-actions, .color-picker-wrapper, .mod-menu-wrap, .mod-fader')) return;
+                if (e.ctrlKey || e.metaKey) {
                     this.enterSelectionMode();
-                }
-                if (!this._selecting) return;
-
-                const key = card.getAttribute(this.keyAttr);
-                if (!key) return;
-
-                if (e.shiftKey && this._lastClickedKey) {
-                    this._selectRange(content, this._lastClickedKey, key);
-                } else {
+                    const key = card.getAttribute(this.keyAttr);
+                    if (!key) return;
                     this._toggleSelect(key);
+                    this._lastClickedKey = key;
                 }
-                this._lastClickedKey = key;
             });
 
             // Escape to exit selection mode
@@ -358,6 +374,7 @@ export class CardSection {
         if (this.keyAttr) {
             this._injectHideButtons(content);
             this._injectDragHandles(content);
+            this._injectBulkTicks(content);
             this._initDrag(content);
         }
 
@@ -463,10 +480,11 @@ export class CardSection {
             }
         }
 
-        // Re-inject hide buttons and drag handles on new/replaced cards
+        // Re-inject hide buttons, drag handles, bulk ticks on new/replaced cards
         if (this.keyAttr && (added.size > 0 || replaced.size > 0)) {
             this._injectHideButtons(content);
             this._injectDragHandles(content);
+            this._injectBulkTicks(content);
         }
 
         // Re-cache searchable text for new/replaced cards
@@ -638,28 +656,31 @@ export class CardSection {
         });
     }
 
-    _injectCheckboxes(content: HTMLElement) {
+    _injectCheckboxes(_content: HTMLElement) {
+        // Selection mode now uses the card root as the click target —
+        // no per-card checkbox is injected. The visual indicator is the
+        // `.card-selected` border + box-shadow defined in CSS, plus
+        // pointer-events:none on descendants so the entire card behaves
+        // as one big toggle. Kept as a no-op so existing callsites in
+        // bind() / reconcile() don't need changes.
+    }
+
+    /** Inject a single .mod-bulk-tick element per card. Hidden by CSS
+     *  unless the card is `.card-selected` AND the section is
+     *  `.cs-selecting` — so it costs nothing visually outside bulk mode
+     *  and renders a corner checkmark when both flags are on. */
+    _injectBulkTicks(content: HTMLElement) {
         if (!this.keyAttr) return;
         content.querySelectorAll(`[${this.keyAttr}]`).forEach(card => {
-            if (card.querySelector('.card-bulk-check')) return;
-            const cb = document.createElement('input');
-            cb.type = 'checkbox';
-            cb.className = 'card-bulk-check';
-            cb.checked = this._selected.has(card.getAttribute(this.keyAttr)!);
-            cb.addEventListener('click', (e: MouseEvent) => {
-                e.stopPropagation();
-                const key = card.getAttribute(this.keyAttr)!;
-                if (e.shiftKey && this._lastClickedKey) {
-                    this._selectRange(content, this._lastClickedKey, key);
-                } else {
-                    this._toggleSelect(key);
-                }
-                this._lastClickedKey = key;
-            });
-            // Insert as first child of .card-top-actions, or prepend to card
-            const topActions = card.querySelector('.card-top-actions');
-            if (topActions) topActions.prepend(cb);
-            else card.prepend(cb);
+            // Strip any legacy injected checkboxes from older deploys
+            const stale = card.querySelector('.card-bulk-check');
+            if (stale) stale.remove();
+            if (card.querySelector('.mod-bulk-tick')) return;
+            const tick = document.createElement('span');
+            tick.className = 'mod-bulk-tick';
+            tick.setAttribute('aria-hidden', 'true');
+            tick.innerHTML = ICON_CHECK;
+            card.appendChild(tick);
         });
     }
 

server/src/ledgrab/static/js/core/chart-utils.ts

@@ -3,11 +3,14 @@
  *
  * Both dashboard.js and targets.js need nearly identical Chart.js line charts
  * for FPS visualization. This module provides a single factory so the config
- * lives in one place.
- *
- * Requires Chart.js to be registered globally (done by perf-charts.js).
+ * lives in one place and owns the global Chart.js registration.
  */
 
+import { Chart, registerables } from 'chart.js';
+Chart.register(...registerables);
+// Expose globally for legacy code paths that still reference window.Chart.
+window.Chart = Chart;
+
 const DEFAULT_MAX_SAMPLES = 120;
 
 /** Left-pad an array with nulls so it always has `maxSamples` entries. */
@@ -28,7 +31,7 @@ function _padLeft(arr: number[], maxSamples: number): (number | null)[] {
  * @returns {Chart|null}
  */
 export function createFpsSparkline(canvasId: string, actualHistory: number[], currentHistory: number[], fpsTarget: number, opts: any = {}) {
-    const canvas = document.getElementById(canvasId);
+    const canvas = document.getElementById(canvasId) as HTMLCanvasElement | null;
     if (!canvas) return null;
 
     const maxSamples = opts.maxSamples || DEFAULT_MAX_SAMPLES;

server/src/ledgrab/static/js/core/color-picker.ts

@@ -69,6 +69,25 @@ function _rgbToHex(rgb: string) {
     return '#' + m.slice(0, 3).map(n => parseInt(n).toString(16).padStart(2, '0')).join('');
 }
 
+/** True if any ancestor between `el` and <body> has overflow:hidden / clip
+ *  / auto on x or y. Used by the picker toggle to decide whether it must
+ *  detach the popover to <body> with fixed positioning so it isn't
+ *  clipped. */
+function _hasOverflowClipAncestor(el: Element): boolean {
+    let cur: Element | null = el.parentElement;
+    while (cur && cur !== document.body) {
+        const cs = getComputedStyle(cur);
+        const ox = cs.overflowX;
+        const oy = cs.overflowY;
+        if (ox === 'hidden' || ox === 'clip' || ox === 'auto' ||
+            oy === 'hidden' || oy === 'clip' || oy === 'auto') {
+            return true;
+        }
+        cur = cur.parentElement;
+    }
+    return false;
+}
+
 window._cpToggle = function (id) {
     // Close all other pickers first (and drop their card elevation)
     document.querySelectorAll('.color-picker-popover').forEach((p: Element) => {
@@ -108,6 +127,32 @@ window._cpToggle = function (id) {
         pop.style.animation = 'none';
         pop.style.zIndex = '10000';
         pop.classList.add('cp-fixed');
+    } else {
+        // Desktop: detach to body with fixed positioning when the swatch sits
+        // inside an overflow:hidden ancestor (e.g. the perf-chart strip,
+        // modal body, tree-dd panel). Otherwise the popover is clipped.
+        const swatchEl = document.getElementById(`cp-swatch-${id}`);
+        const hasClippingAncestor = swatchEl && _hasOverflowClipAncestor(swatchEl);
+        if (hasClippingAncestor && pop.parentElement !== document.body) {
+            (pop as any)._cpOrigParent = pop.parentElement;
+            (pop as any)._cpOrigNext = pop.nextSibling;
+            document.body.appendChild(pop);
+            const swRect = swatchEl!.getBoundingClientRect();
+            pop.style.position = 'fixed';
+            pop.style.top = `${swRect.bottom + 8}px`;
+            // Anchor on the left edge of the swatch, but clamp so the
+            // popover doesn't run off the right edge of the viewport.
+            const popWidth = 240;  // approx; refined after first paint
+            let left = swRect.left;
+            if (left + popWidth > window.innerWidth - 12) {
+                left = Math.max(12, window.innerWidth - popWidth - 12);
+            }
+            pop.style.left = `${left}px`;
+            pop.style.right = 'auto';
+            pop.style.margin = '0';
+            pop.style.zIndex = '10000';
+            pop.classList.add('cp-fixed');
+        }
     }
 
     // Mark active dot