← ClaudeAtlas

unitares-dashboardlisted

Use when adding, editing, or reviewing sections on the unitares dashboard (dashboard/redesign/). Captures the redesign's conventions: the section-module pattern (window.X = { load }), the live-or-snapshot data seam, theme-aware charts via design tokens, and the app.html wiring (nav / pane / lazyLoad / RELOAD / retheme). A repo-specific reference — not general dashboard advice.
cirwel/unitares-governance-plugin · ★ 0 · AI & Automation · score 76
Install: claude install-skill cirwel/unitares-governance-plugin
# Adding a Section to the UNITARES Dashboard (redesign) ## Orientation The live dashboard is **`dashboard/redesign/`** — buildless (raw HTML/CSS/JS, no framework, no bundle). `http_dashboard_redesign` now lives in `src/http_routes/dashboard.py`; `src/http_api.py` is the registration/re-export facade that maps it to `/`, `/dashboard`, and `/dashboard/redesign/**`. The classic dashboard and its allowlist / script-load-chain / `vite` build were **retired** — ignore older guidance about `index.html`, `allowed_files`, `MetricColors`, or `Chart.defaults`. The redesign resolver constrains paths and file types but has no per-asset allowlist, and files are read per request, so a restart is not needed for static edits. Entry HTML is `no-store`; relative assets receive an mtime version query to prevent stale browser bundles. A "section" is one nav tab. Each is a self-contained module that renders into its own mount and is wired in `app.html`. ## The section-module pattern A section is an IIFE that attaches `window.<Name> = { load }` (add `retheme` if it draws charts; add `applyEvent` / `notifyNew` if it's a live surface — see **Live-surface hooks** below). `load()` renders into its mount on first call and updates **in place** on subsequent calls (so the 10s auto-refresh doesn't flicker or reset form state). Worked references: `sections/eisv.js` (charts, retheme, `applyEvent`) and `sections/metrics.js` (charts + a picker that survives auto-refresh). ## Integration checklist (all in