Desk restore + new House-Temperatures dashboard — design spec¶

Date: 2026-06-29 Status: Approved design (Layout A) — pending spec review, then plan Author: Claude (brainstormed with Louis via visual companion)

Problem¶

Two distinct asks bundled together:

1. Restore the Desk dashboard. A redesign attempt (commit 1129eff, 2026-06-27) replaced the original three-column Desk (office-air ring / energy / now-playing) with an 8-temperature grid crammed into the left column. The user wants the original Desk back — the clean office-air-ring / power / music layout from commit 862acee (2026-06-16), which is the last good version "2+ days ago".

2. Build a NEW, separate temperature-centric dashboard. The 8 house temperatures deserve their own first-class display, not a cramped corner of the Desk. It should reuse the Desk's design language — specifically the old "Office Air" tile: a big temperature in a conic-gradient comfort ring with CO₂/VOC/RH in small lettering underneath, on a glass card over the dark radial background.

These are independent: the restore is a clean revert; the new dashboard is net-new.

Goals¶

• Desk dashboard returns to the 862acee three-column layout, byte-for-byte.
• A new sidebar dashboard ("Temps") shows all 8 house temperatures at a glance, using the established glass + conic-ring design language.
• The new dashboard is kiosk-capable (clean tablet display) like the Desk.
• Everything is YAML-mode, deployed via the existing deploy-ha CI path, and passes the Tier-3 entity-reference test (all entities below are confirmed present in tests/fixtures/entities.txt).

Non-goals¶

• No change to the Command or Home Command dashboards.
• No new sensors, automations, or template entities — display only.
• No HVAC control (Ecobee owns HVAC; HA observes only).
• Not touching the Grafana temperature trend (separate, already exists).

The 8 temperatures¶

Confirmed entities (all in entities.txt):

3 air-quality "hero" zones (temp + VOC + CO₂ + RH + occupancy)¶

All three are thermostat zones, so their tiles also open a thermostat pop-up (see "Tile interactions" below) via their climate.* entity. | Zone | Temp | VOC | CO₂ | RH | Occupancy | Climate (popup) | |---|---|---|---|---|---|---| | Office | sensor.office_temperature | sensor.office_volatile_organic_compounds | sensor.office_carbon_dioxide | sensor.office_humidity | binary_sensor.office_occupancy | climate.office | | Bedroom | sensor.bedroom_temperature | sensor.bedroom_volatile_organic_compounds | sensor.bedroom_carbon_dioxide | sensor.bedroom_humidity | binary_sensor.bedroom_occupancy | climate.bedroom | | Dining Room | sensor.dining_room_temperature | sensor.dining_room_volatile_organic_compounds | sensor.dining_room_carbon_dioxide | sensor.dining_room_humidity | binary_sensor.dining_room_occupancy | climate.dining_room |

5 temp-only rooms (temp + occupancy)¶

Kids ordered Henry → Isaac → Vivian → Annie (bedroom_1..4), Kitchen last.

Chosen layout — Layout A ("Heroes on top, kids' strip below")¶

Selected by the user in the visual companion (layout-a-final.html). Top-to-bottom on a type: panel view over the dark radial background:

┌─────────────────────────────────────────────────────────┐
│  🌡 House Temperatures                          2:13 PM   │  header bar (glass)
├──────────────┬──────────────┬──────────────────────────-─┤
│  OFFICE   ●  │  BEDROOM  ●  │  DINING        ●           │  3 hero rings (glass)
│   ◯ 73°      │   ◯ 72°      │   ◯ 77°                     │  big conic ring + temp
│  VOC CO₂ RH  │  VOC CO₂ RH  │  VOC CO₂ RH                 │  stats row under ring
├──────┬───────┼──────┬───────┼────────┬────────┬──────────-┤
│Henry●│Isaac  │Vivian│Annie ●│Kitchen●│         compact     │  5 small ring tiles
│ ◯74°│ ◯74°  │ ◯75° │ ◯74°  │ ◯76°   │       (1 row of 5)   │
└──────┴───────┴──────┴───────┴────────┴────────┴──────────-┘

Design language (carried verbatim from the 862acee Office Air tile)¶

• Glass card: rgba(255,255,255,0.10) fill, 1px solid rgba(255,255,255,0.20) border, 14px radius, backdrop-filter: blur(9px), box-shadow: none, box-sizing: border-box.
• View background: radial-gradient(130% 120% at 8% -10%, #1b2542 0%, #0a0e1a 58%) fixed.
• Comfort ring: conic-gradient, fill % = clamp((temp-55)/(90-55), 0, 1) * 100, ring color tcol = (temp>=68 && temp<=76) ? "#34d399" : (temp>=64 && temp<=80) ? "#fbbf24" : "#ef4444", with an inner hole #101830 holding the temperature number + a small label.
• Hero rings: 194px outer / 154px inner, temp 48px (same as old Office tile).
• Kid rings: ~78px outer / 60px inner, temp ~22px (compact).
• Stat cells (heroes only): VOC / CO₂ / RH, uppercase 9px label + value; thresholds match the old tile — vcol: voc<500 #e7ecf6, <1000 #fbbf24, else #ef4444; ccol: co2<800 #e7ecf6, <1200 #fbbf24, else #ef4444; RH always #e7ecf6, shown as NN%.
• Occupancy dot: top-right of each tile, 10px circle. Occupied (state === "on") → #34d399 with box-shadow:0 0 8px #34d399 glow; vacant → rgba(255,255,255,0.14) (dim, no glow).
• Header bar: same glass card; left = gradient title "🌡 House Temperatures" (linear-gradient(120deg,#fff,#9db4ff) clipped to text), right = live JS clock (h:mm AM/PM), reusing the Desk header's clock renderer.

Card mechanics¶

• All tiles are custom:button-card with [[[ JS ]]] custom_fields (the only way to render conic rings + threshold colors), exactly as the old Office tile.
• Hero row: horizontal-stack of 3 equal cards. Kid row: horizontal-stack of 5 equal cards (or a grid with columns: 5).
• triggers_update: all (or per-tile entity lists) so occupancy dots + values stay live.

Tile interactions (tap → pop-up)¶

The three hero (thermostat) tiles reuse the exact same pop-up cards as the Command dashboard's Overview-tab climate tiles — a custom:bubble-card card_type: pop-up, keyed by hash, containing: 1. a native type: thermostat card (the HA dial) with the climate-hvac-modes feature, card_mod to make ha-card transparent/borderless, and 2. a custom:mini-graph-card showing the zone's current_temperature over 24h (hours_to_show: 24, points_per_hour: 2).

• The Command Overview defines #thermo-bedroom and #thermo-office already; we replicate those two bubble-cards verbatim (same card types/settings, just living inside temps_dashboard.yaml since hashes are per-dashboard) and add a third #thermo-dining instance for climate.dining_room following the identical pattern. The bubble-card pop-up definitions live as top-level cards in the Temps panel view, exactly as they do on the Command Overview.
• The 5 kid/Kitchen tiles have no thermostat, so they keep tap_action: more-info on their temp sensor.

Dashboard registration¶

New YAML-mode dashboard, declared under lovelace.dashboards in configuration.yaml (alongside Command / Desk / Plants):

temps-dashboard:
  mode: yaml
  filename: temps_dashboard.yaml
  title: Temps
  icon: mdi:thermometer
  show_in_sidebar: true

• url_path: temps (sidebar title "Temps").
• Kiosk: same kiosk_mode: block as Desk — kiosk: '{{ is_state("input_boolean.kiosk_mode", "on") }}' so it hides HA chrome on a tablet but shows it elsewhere.
• New repo file temps_dashboard.yaml must be added to the deploy file lists: HA_FILES / the ha_config changed-files matcher in .github/workflows/ci.yml, and to the dashboard list in tests/conftest.py (entity-ref tested) and the CLAUDE.md dashboard table.

Files touched¶

Deploy & test¶

• Adding temps-dashboard to configuration.yaml → CI does a full ha core restart.
• The new dashboard file scps via deploy-ha once added to the file matcher.
• Local gate before push: make test (Tier 0–3). Tier 3 will validate every entity_id referenced in temps_dashboard.yaml against entities.txt — all 29 entities above (26 sensors/binary_sensors + climate.office/bedroom/dining_room) are already present, so no entities_allow.txt additions needed.

Open questions (resolved)¶

• ✅ Occupancy dots — keep them on all 8 tiles.
• ✅ Name/icon/url — Temps / mdi:thermometer / temps, kiosk on.
• ✅ Kid order — Henry → Isaac → Vivian → Annie, Kitchen last.

Risks¶

• custom:button-card, custom:bubble-card, and custom:mini-graph-card must be installed (they are — all three are used by the Command dashboard today, including the very Overview climate tiles + pop-ups we're mirroring).
• A new dashboard in configuration.yaml triggers an HA restart on deploy (brief, expected). The Desk revert alone is just a desk_companion.yaml change (also a restart, since it's a config file other than automations.yaml).
• Conic rings render correctly on the tablet's browser (already proven by the old Desk Office tile on the same hardware).