# Command Dashboard Home UX + Family Handoff

Use when improving the JARVIS/command-dashboard home page or adding operator handoff links to adjacent dashboards such as FamilyDashboard.

## Home page UX pattern

- Treat `/` as an operator briefing, not an admin module directory.
- Put a single **Command Briefing** card first: most important current attention item, count of active hints, green/total traffic lights, pending reviews, and explicit read-only mode.
- Follow with a compact **Ampelstatus** grid sorted by risk/status (`offline`, `attention`, `degraded`, `ok`) before generic module cards.
- Use safe summaries from module snapshots; never surface Finance exact values or Health raw details on the global overview.
- Keep full module cards and activity lower on the page as secondary navigation/detail, not the primary value.
- On mobile, ensure `index.html` contains a real viewport meta tag: `width=device-width, initial-scale=1, viewport-fit=cover`. Without it the page can render as a tiny desktop layout on iPhone.
- Mobile bottom navigation should avoid seven tiny fixed columns with overlapping labels; prefer horizontally scrollable touch targets with `min-width` and extra bottom padding on `<main>`.

## FamilyDashboard handoff pattern

- FamilyDashboard conventionally owns port `5173`; do not let JARVIS/Finance helper scripts steal or auto-reassign that port.
- If adding FamilyDashboard to a multi-dashboard handoff, move Finance/JARVIS defaults away from `5173` (for example Finance frontend `5176`, JARVIS dashboard `5175`) and expose the family URL via runtime env such as `VITE_FAMILY_DASHBOARD_URL`.
- Add the FamilyDashboard link in places where it helps the operator switch context quickly:
  - header quick badge/link;
  - home page dedicated family card;
  - reports/work-context hub;
  - settings/workspace link status as a category only (`configured`), not full internal path dumps.
- Treat FamilyDashboard reachability as optional in a broader JARVIS handoff status check unless the user explicitly asked to start/verify FamilyDashboard itself.

## Frontend/data pitfalls

- If tests stub `global.fetch` after importing a Pinia store, avoid module-level API client singletons that captured the old fetch. Build the API client inside the store action with `createJarvisClient(fetcher ?? fetch)` so tests and runtime overrides work reliably.
- When asserting async Vue/Pinia dashboard loading, prefer `flushPromises()` over a fixed number of `setTimeout(0)` ticks.

## Verification

Run and report real output:

```bash
make dashboard-test
make dashboard-build
make verify
```

For visual/mobile checks, use a browser viewport around `390x844` and confirm:

- no horizontal overflow (`scrollWidth === clientWidth`);
- traffic-light cards render;
- family handoff link is visible;
- no console errors;
- no forbidden strings such as local paths, tokens, raw Health DB/report names, or Finance exact-value fields.