prosa-panel-renderinglisted
Install: claude install-skill c3-oss/prosa
# Prosa Panel Rendering
Use this skill before changing the panel's HTML, templates, or
client-side behavior.
## Stack
- **Go + `html/template` + `embed.FS`** — server-rendered, single binary,
no build step.
- **HTMX** — partial swaps for the sidepanel and raw transcript
pagination today; chart filter swaps as the panel grows.
- **Alpine.js (~15 KB)** — local UI state only: toggles, modals, hover,
filter pill open/close, command palette. Not for data fetching.
- **Inline SVG charts generated in Go** (`internal/panel/charts/`) —
sparkline, bar row, donut, heatmap, trend. Deterministic; tested
against golden SVGs.
- **CSS in modules** under `internal/panel/templates/assets/css/`,
imported via native `@import`. No bundler.
- **SSE** at `/events` — live badge of new sessions; future live KPI
ticks.
The full surface is documented in `docs/architecture/panel.md`. The
design contract is in `docs/panel/screens.md` and
`docs/panel/components.md`.
## Rules
- **No build step.** No esbuild, no vite, no `npm install`. Everything
ships via `embed.FS`.
- **No SPA patterns.** No client-side router. No global store. No
hydration.
- **Server-first state.** Data state lives on the server; UI state lives
on the client. The dividing line is HTMX (server data) versus Alpine
(UI toggles).
- **Charts in Go, not JS.** Reach for `internal/panel/charts/` helpers,
not Chart.js / D3 / similar.
- **Design tokens are the only colors.** `tokens.css` defines `--bg`,
`--text-*`,