hermes-skills/smart-home/smart-home-automation/references/ha-dashboard-redesign.md

# HA Dashboard Redesign — Brainstorming & Design

Session: 2026-07-10. User requested a complete dashboard redesign, mobile-first, with Mushroom Cards + Bubble Card navigation.

## Brainstorming Process

Used the `brainstorming` skill. Key decisions via clarifying questions:

1. **Goal**: Komplett-Redesign — alles neu, sauber strukturiert
2. **Primary device**: Handy (mobile-first, desktop is secondary)
3. **Top functions**: Energie (PV/Speicher/Marstek/Strompreis), Rollos, Licht
4. **Structure**: Ein Hauptdashboard + Energie separat (as before)
5. **Card approach**: Mix aus Mushroom + Bubble Navigation

## Entity Inventory (via browser console)

| Domain | Count | Key entities |
|--------|-------|-------------|
| light | 20 | Schlafzimmer, Esszimmer, Bad, Tradfri×7, Kinderzimmer×2, Garten×2, Deckenleuchte |
| cover | 10 | Wohnzimmerfenster×2, Wohnzimmertür, Esszimmertür, Küchenfenster×2, Badrollo, Terrassenrollo, Markise |
| climate | 12 | ViCare heating + 11 room thermostats (Bad, Büro, Esszimmer, FBH-WC, Flur unten, Gang OG, Wohnzimmer, Kinderzimmer Cleo, Schlafzimmer, Schminkzimmer, Windfang) |
| camera | 10 | Terrasse, Einfahrt, 6× robot vacuum maps, thumbnail |
| scene | 9 | Alles aus×2, Fernsehabend, Heizungen an/aus, Raffstore am Tag |
| lock | 5 | Haustür + others |
| media_player | 10 | Wohnzimmer, Harmony Hub + others |
| automation | 35 | Including Marstek Kaskaden-Steuerung |
| switch | 196 | Much chaff among them |
| sensor | 1128 | Heavily overloaded |

## Existing Dashboard State (pre-redesign)

| Dashboard | URL Path | Views | Cards (main) | Status |
|-----------|----------|-------|--------------|--------|
| Übersicht (default) | `lovelace` | 3 | 43+1+1 | ⚠️ Overloaded — cameras, blinds, 11 thermostats, media, energy, lights, sensors, scenes, weather, door contacts all on one view |
| Stromerzeugung/-verbrauch | `stromerzeugung-verbrauch` | 5 | 30 | 3 of 5 views empty (PV Erzeugung, Stromverbrauch, Kindle) |
| IT | `dashboard-it` | 1 | 16 | OK |
| Karte | `map` | 1 | 1 | Minimal |
| Editor | `dashboard-editor` | 1 | 1 | Tool (config-editor-card) |
| Übersicht (test) | `dashboard-test` | 1 | 0 | Empty — delete candidate |
| Haus | `dashboard-haus` | 0 | 0 | Empty — repurpose as new main dashboard |
| Typen | `dashboard-typen` | 0 | 0 | Empty — delete candidate |
| Home_Auto | `home-auto` | 0 | 0 | Empty — delete candidate |
| Moonraker | `dashboard-moonraker` | 0 | 0 | Empty — delete candidate |

## Installed Custom Cards (via HACS)

Already installed:
- `custom:power-flow-card-plus` — power distribution visualization
- `custom:price-timeline-card` — electricity price timeline
- `custom:config-editor-card` — dashboard editor

Needed for redesign:
- `mushroom-cards` — compact, touch-friendly UI elements (HACS)
- `bubble-card` — bottom-bar navigation, swipe between views (HACS)

## Approved Design

### Dashboard 1: "Haus" (Main Dashboard, mobile-first)

**Navigation:** Bubble Card Bottom-Bar with 5 tabs

```
🏠 Home | ☀️ Rollos | 💡 Licht | 🔒 Sicherheit | 🌡️ Klima
```

**Tab 1 — Home (Minimal):**
- Mushroom Title Card "Schön Home"
- Mushroom Template Card: Weather + outside temp
- Power-Flow-Card-Plus (mini energy flow: PV ↔ Battery ↔ House ↔ Grid)
- 2× Mushroom Entity Card: Presence (Dominik, Sarah)
- 1× Mushroom Chips Card: Door open/closed, Marstek SoC, electricity price — quick-info badges

**Tab 2 — Rollos (10 covers, grouped by floor):**
- Mushroom Cover Card per cover (large touch buttons: up/stop/down)
- Ground floor: Wohnzimmer×2, Esszimmer, Küche×2, Terrasse, Markise
- Upper floor: Bad, Schlafzimmer
- Master "Alle Rollos" card at top

**Tab 3 — Licht (20 lights + 9 scenes):**
- Mushroom Light Card per room (group where possible)
- Scenes as Mushroom Action Buttons at bottom: "Alles aus", "Fernsehabend", "Raffstore am Tag"

**Tab 4 — Sicherheit:**
- 2 Camera Cards (Terrasse, Einfahrt) — Picture Glance, compact
- Binary sensors: door/window contacts as Mushroom Entity Cards
- Lock: front door as Mushroom Lock Card

**Tab 5 — Klima (12 thermostats):**
- Mushroom Climate Card per room
- ViCare Heating + hot water at top
- Outside temperature chip

### Dashboard 2: "Energie" (existing, upgraded)

Remains separate. Fill the 3 empty views:
- **PV Erzeugung:** Apexcharts (daily/weekly curves SMA)
- **Stromverbrauch:** Apexcharts (consumer breakdown: heat pump, household, wallbox)
- **Kindle:** Black/white E-Ink optimized dashboard

### Cleanup

| Dashboard | Action |
|-----------|--------|
| dashboard-test (empty) | Delete |
| Haus (empty) | Repurpose → new main dashboard |
| Typen (empty) | Delete |
| Home_Auto (empty) | Delete |
| Moonraker (empty) | Delete |
| Editor | Keep (tool) |
| IT | Keep |
| Karte | Keep |
| Übersicht (lovelace, 43 cards) | Keep as backup after migration, then delete |

## Implementation Notes

- All dashboards use `mode: 'storage'` (UI-managed, not YAML files)
- Dashboard config write-back via WebSocket: `conn.sendMessagePromise({type: 'lovelace/config/save', url_path: '...', config: cfg})`
- Custom cards must be installed via HACS before referencing them in dashboard config
- Bubble Card bottom navigation requires a `bubble-card` config at the view level

## HACS Installation via WebSocket (confirmed working 2026-07-10)

HACS custom cards can be installed programmatically via the WebSocket API — no need to fight the HACS UI iframe:

```javascript
// 1. Find repository ID
const repos = await conn.sendMessagePromise({type: 'hacs/repositories/list'});
const mushroom = repos.find(r => r.full_name === 'piitaya/lovelace-mushroom');
// mushroom.id = '444350375'

// 2. Install
await conn.sendMessagePromise({type: 'hacs/repository/download', repository: mushroom.id});
// Returns {} on success

// 3. Verify resource registration
const resources = await conn.sendMessagePromise({type: 'lovelace/resources'});
// Look for /hacsfiles/lovelace-mushroom/mushroom.js in resources
```

Installed: Mushroom v5.1.1 (repo ID 444350375), Bubble Card v3.2.4 (repo ID 680112919).

## Entity Verification Pitfalls (encountered during implementation)

- **Scene name mismatch:** `scene.alles_aus` does NOT exist — the correct entity is `scene.alles_aus_2`. Always query `ha.hass.states` for scene entities before referencing.
- **Binary sensors lacking `device_class`:** Door/window binary sensors in this homelab do NOT have `device_class: door` or `device_class: window`. Filtering by `device_class` returns zero results. Instead, filter by entity name keywords: `tur`, `fenster`, `door`, `window`.
- **Available binary sensors (as of 2026-07-10):** `binary_sensor.wohnzimmerfenster2`, `binary_sensor.wohnzimmerture`, `binary_sensor.esszimmerture`, `binary_sensor.esszimmerture_2` — only 4, not the full set shown in the old overview dashboard.
- **Locks:** 5 lock entities exist: `lock.voreingestellte_tur` (main door), `lock.turoffner_1`, `lock.free_hometouch_7`, `lock.free_hometouch_7_2`, `lock.free_hometouch_7_3`.

## Post-Implementation Dashboard State (2026-07-10)

| Dashboard | URL Path | Views | Cards/view | Status |
|-----------|----------|-------|------------|--------|
| Haus (NEW) | `dashboard-haus` | 5 | 6/3/5/4/5 | ✅ Mushroom + Bubble, mobile-first |
| Stromerzeugung/-verbrauch | `stromerzeugung-verbrauch` | 5 | 30/1/4/4/1 | ✅ All views filled |
| Übersicht (backup) | `lovelace` | 3 | 43/1/1 | Kept as backup |
| IT | `dashboard-it` | 1 | 16 | Unchanged |
| Karte | `map` | 1 | 1 | Unchanged |
| Editor | `dashboard-editor` | 1 | 1 | Unchanged |

Deleted: dashboard-test, Typen, Home_Auto, Moonraker (4 empty ghost dashboards).

## Haus Dashboard View Structure (final)

| View | Path | Cards | Content |
|------|------|-------|---------|
| Home | `home` | 6 | Bubble popup, weather template, power-flow-card-plus, presence grid, chips (door/Marstek/SMA), bubble nav |
| Rollos | `rollos` | 3 | Bubble popup, 9 mushroom cover cards in 2-col grid, bubble nav |
| Licht | `licht` | 5 | Bubble popup, scene chips (5 scenes), 8 room lights in 2-col grid, 9 tradfri/misc lights in 3-col grid, bubble nav |
| Sicherheit | `sicherheit` | 4 | Bubble popup, 2 camera picture-glance, 2 lock cards + 4 door/window sensors in 2-col grid, bubble nav |
| Klima | `klima` | 5 | Bubble popup, ViCare climate card, WW + outside temp grid, 11 room climate cards in 2-col grid, bubble nav |

## Energie Dashboard Filled Views

| View | Path | Cards | Content |
|------|------|-------|---------|
| PV Erzeugung | `pv-erzeugung` | 4 | 3 apexcharts (PV delivery, SoC, Solcast forecast vs actual), entity stats |
| Stromverbrauch | `stromverbrauch` | 4 | 3 apexcharts (house consumption, battery discharge, sauna power), consumer entity list |
| Kindle | `kindle` | 1 | Vertical stack of 6 mushroom template cards (PV, Haus, SMA SoC, Marstek SoC, Strompreis, PV Einsparung) — black icons for E-Ink |