Command Dashboard Redesign ("Command") — Design Spec¶

Date: 2026-06-17 Status: Approved for planning Author: Louis (via Claude)

Goal¶

A brand-new, phone-first dashboard — "Command" — that reimagines the everyday Home Command Dashboard in the Midnight Glass design language with modern, app-like UX (hero headers, frosted-glass tiles, live rings/sparklines, Bubble-Card slide-up pop-ups for controls). It is a separate dashboard: the existing Home Command Dashboard (storage-mode) is left completely untouched. Content is curated, not mirrored — we keep what Louis actually uses and drop the noise.

Design Direction (decided during brainstorming)¶

• Look: Midnight Glass — radial-gradient(130% 80% at 50% -5%, #1a2440 0%, #0a0e1a 55%) fixed background; glass cards rgba(255,255,255,0.10) fill, 1px solid rgba(255,255,255,0.20) border, backdrop-filter: blur(9px) (+-webkit-), border-radius: 16px; text #e7ecf6 / muted #9fb0d0/#8aa0c8; accent #6ea8ff, status greens #34d399 / amber #fbbf24 / red #ef4444 / media purple #c4b5fd. Matches desk_companion.yaml and plant_dashboard.yaml.
• Direction: Hybrid Hero — keep HA's native top tabs (reliable navigation) but every tab opens with a hero + live status chips, and deep controls live in Bubble-Card pop-ups (tap a tile → slide-up sheet). Chosen over a fully custom Bubble nav (too fragile) and over plain reskinning (not enough UX gain).
• Device: phone-first, responsive.
• Build mode: YAML-mode dashboard, git-tracked, CI-deployed (restart), entity-ref tested — same rigor and pipeline as the Desk and Plant dashboards. Not UI-editable (the [[[ JS ]]] templates require it).

Tabs (5)¶

Media has no tab — whole-house media (Sonos + Apple TV + all AirPlay) is reached via a ♪ chip → media-hub pop-up (below). Dropped entirely: Batteries (available in Grafana), CO₂/VOC, and the Health / Morning / Sleep tabs. Deferred: a Garden/Outside tab until Rachio (irrigation) and the Ecowitt WS90 weather station are integrated into HA (neither exists in HA today).

Shared Design System (built once, reused by every tab)¶

1. Hero card — a glass header: time-of-day greeting (Good morning/afternoon/evening, Louis), weather from weather.forecast_home + sensor.weather_forecast_daily (icon, temp, H/L), and a daylight cue from sun.sun. Implemented as a custom:button-card with [[[ JS ]]] (same pattern as desk_companion.yaml/plant_dashboard.yaml heroes).
2. Status chip row — compact, color-by-state pills. Each chip is tappable where it has a pop-up. The chip set (Overview): Garage · Who's-home · Leaks · Food · Power+TOU · ♪ Media · 🪴 Plants. Chips turn green/amber/red by state (e.g. leak red when wet, power amber during peak).
3. Glass tile — button-card tile with optional conic-gradient ring (temperature/percentage), label, value, sub-line. Reused for thermostats, rooms, power, etc.
4. Bubble-Card pop-up pattern — deep controls open as a slide-up sheet via Bubble-Card's hash-pop-up mechanism (a tile's tap_action: navigate → #popup-id; the pop-up card lives in the same view). Used for: thermostats, garage/doors, the media hub, leak detail list. Consistent grab-handle + dim-scrim styling.
5. Media-hub pop-up — opened from the ♪ chip. Near-fullscreen sheet: the active player(s) with full controls (art, transport, volume; Sonos grouping shown), then all players grouped by type — Sonos · audio, Apple TV · AirPlay, TVs & soundbars · AirPlay — playing devices floated to top with a live dot. Tap a device → control it (transport/volume; group for Sonos, app/source for Apple TV). Built with custom:mini-media-player cards (installed) inside a Bubble-Card pop-up. Echo speakers optional (off by default). Covers all ~19 media_player.* entities.

Per-Tab Specification¶

🏠 Overview¶

• Hero + status chip row (the 7 chips above).
• Climate glance: two thermostat ring tiles (climate.bedroom, climate.office) showing current temp + a one-line state; tap → thermostat pop-up. A small per-floor differential read ("Upstairs +3°").
• Power glance: live sensor.whole_home_power (kW) with a 24h sparkline (apexcharts) + current sensor.tou_period/sensor.tou_rate; tap → jumps to Energy tab.
• Quick actions row: script.good_night, script.all_lights_off, script.movie_mode, and garage (the two cover.*_garage_door via pop-up). Time-aware: the row's prominent action changes by hour (morning vs evening) via [[[ JS ]]] — folding the value of the dropped Morning/Sleep tabs into one place.
• Glance chips deep-link: ♪ → media-hub pop-up; 🪴 → navigates to the dedicated Plant dashboard (/plant-care).
• Food chip → sensor.food_status (template, below): "Food OK" or e.g. "Garage fridge WARM".

🌡️ Climate¶

• Per-room temperature tiles with conic rings, from climate.bedroom/climate.office current_temperature and the Ecobee room sensors (sensor.* temps where available), each with a trend (mini-graph/apexcharts) and an occupancy badge from the binary_sensor.*_occupancy sensors (bedroom_1..4, bedroom, office).
• Differential / "why" insight card: a glass card computing the upstairs↔downstairs delta and annotating with occupancy + HVAC state — e.g. "2nd floor +3° vs setpoint · Office occupied 2h" — built in [[[ JS ]]] from existing climate + occupancy entities. (Observation only — never writes HVAC; Ecobee owns HVAC.)
• Thermostat pop-ups: tap a thermostat tile → Bubble pop-up with mode + setpoint display (read/observe; setpoint control optional and only via the native climate service if Louis wants it — default is observe-only to respect Ecobee ownership).
• Food-temp detail: the garage fridge/freezer temps (full detail; the Overview chip is the summary).
• Removed: all CO₂/VOC cards and the purifier air-quality charts.

⚡ Energy¶

• Kept in full, reskinned to glass. TOU rate/period (sensor.tou_period, sensor.tou_rate, input_boolean.peak_mode), live cost + monthly bill (sensor.energy_cost_today, sensor.energy_cost_this_month, sensor.energy_cost_accumulated), whole-home power (sensor.whole_home_power), per-circuit breakdown (the Refoss sensor.em_power_* / em_channel_* circuits, AC condensers a5/a6/b5 per the panel map), usage graphs (apexcharts), and peak-appliance status. Content mirrors the current Energy tab; only the styling and layout change.

🛡️ Security¶

• Featured: room presence — a presence panel built on the Ecobee occupancy sensors (binary_sensor.bedroom_1..4_occupancy, binary_sensor.bedroom_occupancy, binary_sensor.office_occupancy), designed to scale as Louis adds dedicated presence sensors (mmWave/FP2) for smart lighting — new sensors slot into the same grid.
• Who's home: person.louis, person.lindsay tiles (home/away).
• Doors & garage: cover.left_garage_door_opener_garage_door, cover.right_garage_door_opener_garage_door via pop-up controls; door sensors as available.
• Leak summary: a single tile from sensor.leak_status (template) — "All dry" (green) or "KITCHEN SINK WET" (red); tap → Bubble pop-up listing all ~10 binary_sensor.*_leak_detector/*_leak_sensor with per-room dry/wet state.
• Front-door camera glance (one live thumbnail) linking to the Cameras tab.
• Removed: battery cards.

📹 Cameras¶

• Style C — live grid + recent-motion rail. A 2-up live grid of camera.garage_stickup_cam_1_live_view, camera.personnel_door_live_view, camera.wyze_cam_v3_1, scaling to Tapo cameras as they're added (the Tapo Control integration is installed; cameras not yet configured). Each tile: glass frame, green live dot, tap → fullscreen live.
• Recent-motion rail: a horizontal strip of recent motion-event snapshots with timestamps (Ring exposes event/snapshot data; Wyze/Tapo participate as their integrations allow). Tap an event → review; cameras without event data still appear live in the grid (graceful degradation).

New Backend Artifacts (built as part of this work)¶

1. Quick-action scripts (scripts.yaml):
2. script.all_lights_off — light.turn_off targeting all lights.
3. script.good_night — lights off + a garage-closed check/notify (observe-only on HVAC).
4. script.movie_mode — dim the media-room lights to a low level.
5. (Garage uses existing cover.*_garage_door services — no new script.)
6. Exact light targets are enumerated in the implementation plan against the live registry.
7. Template sensors (added via a config package, e.g. configuration_tou_addition.yaml or a new packaged file):
8. binary_sensor.any_leak — on if any leak detector is wet.
9. sensor.leak_status — "All dry" or a comma-list of wet rooms.
10. sensor.food_status — "Food OK" or names the warm appliance, derived from the existing input_boolean.food_alert_* / food_critical_* flags.
11. No new occupancy/differential helpers — Climate differentials and occupancy badges are computed in card [[[ JS ]]] from existing entities.

Custom Card Dependencies (all already installed)¶

custom:button-card, custom:mushroom-*, custom:apexcharts-card, custom:mini-graph-card, custom:bubble-card, custom:card-mod, custom:layout-card, custom:mini-media-player. No new HACS installs required.

Architecture / Deploy¶

• New file command_dashboard.yaml, registered in configuration.yaml under lovelace.dashboards (path command-center — HA requires a hyphen — title "Command", mode: yaml, sidebar icon mdi:view-dashboard-variant). The old storage-mode dashboard is unchanged.
• Deploy: push to main → CI deploy-ha scps the file and restarts HA (non-automations config). Same as desk_companion.yaml/plant_dashboard.yaml.
• CI/test wiring: add command_dashboard to the ci.yml change-filter regex and HA_FILES; add command_dashboard.yaml (with bare_scan=True, since it uses entity:/states['...'] like the other glass dashboards) to the tests/conftest.py entity-reference scan. New scripts/template sensors create real entities — allowlist any forward-referenced ones until the post-deploy make snapshot.
• Kiosk: include the same kiosk_mode: { kiosk: '{{ is_state("input_boolean.kiosk_mode","on") }}' } block so the dashboard can be used chrome-free if desired (consistent with desk/plant).

Testing & Manual¶

• make test gates deploy (yamllint, JSON/Grafana guards, container check_config, entity-ref). New scripts and template sensors get structural coverage where the suite already checks (unique ids; referenced entities exist/allowlisted).
• Manual: add a household-facing page (docs/command.md or a section of an existing page) describing the new dashboard's tabs, chips, and pop-ups; wire into mkdocs.yml nav; mkdocs build --strict must pass.

Out of Scope / Future¶

• Media tab (decided: pop-up only), Garden/Outside tab (until Rachio + Ecowitt land), Health/Morning/Sleep tabs, battery cards, CO₂/VOC.
• Smart-lock / alarm "Lock Up" action (no locks/alarm panel installed yet) — omitted from quick actions.
• HVAC setpoint control from Climate pop-ups is optional and off by default (Ecobee owns HVAC; dashboard observes).
• Migrating the dropped tabs (Health/Morning/Sleep) — not recreated.

Success Criteria¶

• A new Command dashboard appears in the sidebar at /command-center, renders well on a phone in portrait, in Midnight Glass.
• 5 tabs (Overview, Climate, Energy, Security, Cameras) with native HA tab navigation; each opens with a hero + live status chips.
• Bubble-Card pop-ups work for thermostats, garage/doors, leak detail, and the media hub; the ♪ chip controls Sonos + Apple TV + AirPlay; the 🪴 chip deep-links to the Plant dashboard.
• Curation honored: power data kept in full; CO₂/VOC, batteries, and Health/Morning/Sleep absent; leaks and food shown as summaries with detail on tap; Security features room presence; Cameras is a live grid + motion rail.
• The old Home Command Dashboard is unchanged.
• make test passes; CI deploys; manual page builds; entity snapshot refreshed.

Implementation Phasing (for the plan)¶

Build as working increments so each push is deployable and verifiable on-device: 1. Backend artifacts (scripts + template sensors) + dashboard scaffold (registration, hero/chip shared components, kiosk) → Overview tab. 2. Climate tab. 3. Energy tab. 4. Security tab. 5. Cameras tab. 6. Media-hub pop-up (cross-tab). 7. CI/test wiring + manual + snapshot. Each phase ends green (make test) and is visually checked on-device before the next.