heimdall-dashboardlisted

# Heimdall Dashboard Use this skill for dashboard work in `src/ui/`. ## Design constraints - Follow the industrial design system already documented for Heimdall. - Prefer monochrome hierarchy, dense but readable tables, and red only for urgent or destructive states. - Preserve dark and light mode parity. - Use `esc()` for dynamic text that reaches HTML-producing helpers. ## Source of truth - Edit `src/ui/app.tsx`, `src/ui/components/*.tsx`, `src/ui/lib/*.ts`, and `src/ui/state/*.ts`. - Never hand-edit `src/ui/app.js` or `src/ui/style.css`. ## Required workflow 1. Make the TSX/CSS changes. 2. Rebuild UI artifacts with `npm run build:ui`. 3. If the change is type-sensitive, run `./node_modules/.bin/tsc --noEmit`. 4. Commit the generated `src/ui/app.js` and `src/ui/style.css` alongside the source change. ## UI guardrails - Keep pricing and business logic in Rust, not in the dashboard. - Reuse existing chart and table abstractions before adding new ones. - Prefer inline status treatments over toast-like feedback. - Keep provider-aware filtering intact when introducing new panels or metrics. ## Preact signals guardrails - **`useSignal(prop)` goes stale** — `useSignal` only captures the argument on first call; subsequent parent re-renders with a new prop value leave the signal holding the original value. Never pass a component prop directly as the `useSignal` argument. Use `useComputed(() => props.value)` to derive a reactive value from a prop, or pass the signal object