Pin the shared frontend style as a repo asset: assets/aura.css (tokens + components), render.rs as first consumer #209

New Issue

2026-07-04T11:02:35+02:00

Brummel commented

2026-07-04 11:02:35 +02:00

Pin the shared frontend style as a single repo asset so every future HTML
surface — runtime-rendered (chart/graph viewer) or ad-hoc generated
(demo/report pages) — uses the same palette and component set instead of
re-deriving it by imitation.

Design (settled in-context, 2026-07-04, user-ratified)

Today the style lives in one-and-a-half places: the shared page shell carries
an inline <style> block as a Rust string literal (SHELL_HEAD,
crates/aura-cli/src/render.rs:17), and the viewer JS assets carry their own
hex values. The palette is de-facto Catppuccin-Mocha-derived but pinned
nowhere; an ad-hoc page author can only copy it by reading generated output.

One asset: crates/aura-cli/assets/aura.css — design tokens as CSS
custom properties (:root { --bg: #16161a; … }) plus the shared component
classes (terminal window, cards, badges, stat tiles, callout, result table,
pipeline band, tooltip), distilled from the milestone demo page. A single
file cannot drift internally, and assets/ is already the repo's home for
embedded frontend artifacts (six include_str! consumers today).
render.rs becomes the first consumer: the SHELL_HEAD inline style is
replaced by include_str!("../assets/aura.css") (via concat!), so the
runtime pages are the pin rather than a copy of it. Pages stay
self-contained (everything inlined, no external requests at view time —
the C9/web-from-disk contract is untouched; only the source of the inlined
bytes moves).
Two stages, two commits: (1) a pure extraction, proven by byte-identical
generated HTML against a pre-change baseline; (2) the additive pin — tokens,
var() migration of the existing rules (incl. CHART_CSS, which stays a
separate chart-only block by design), and the component library.
A project-CLAUDE.md rule binds future page generation to the asset
("HTML surfaces embed crates/aura-cli/assets/aura.css; new components
extend that file, never fork the palette") — without the rule the asset is
just a findable file, not a pin.

Out of scope: the JS renderers (page-specific logic), the vendored uPlot CSS,
and graph-viewer.js's internal hex values (migrating JS to read CSS custom
properties is a possible later refinement, not v1).

depends on: nothing
context: raised after the research-artifacts milestone demo page had to
reverse-engineer the palette from a generated chart page.

Pin the shared frontend style as a single repo asset so every future HTML surface — runtime-rendered (chart/graph viewer) or ad-hoc generated (demo/report pages) — uses the same palette and component set instead of re-deriving it by imitation. ## Design (settled in-context, 2026-07-04, user-ratified) Today the style lives in one-and-a-half places: the shared page shell carries an inline `<style>` block as a Rust string literal (`SHELL_HEAD`, `crates/aura-cli/src/render.rs:17`), and the viewer JS assets carry their own hex values. The palette is de-facto Catppuccin-Mocha-derived but pinned nowhere; an ad-hoc page author can only copy it by reading generated output. - **One asset: `crates/aura-cli/assets/aura.css`** — design tokens as CSS custom properties (`:root { --bg: #16161a; … }`) plus the shared component classes (terminal window, cards, badges, stat tiles, callout, result table, pipeline band, tooltip), distilled from the milestone demo page. A single file cannot drift internally, and `assets/` is already the repo's home for embedded frontend artifacts (six `include_str!` consumers today). - **`render.rs` becomes the first consumer**: the `SHELL_HEAD` inline style is replaced by `include_str!("../assets/aura.css")` (via `concat!`), so the runtime pages *are* the pin rather than a copy of it. Pages stay self-contained (everything inlined, no external requests at view time — the C9/web-from-disk contract is untouched; only the source of the inlined bytes moves). - **Two stages, two commits**: (1) a pure extraction, proven by byte-identical generated HTML against a pre-change baseline; (2) the additive pin — tokens, `var()` migration of the existing rules (incl. `CHART_CSS`, which stays a separate chart-only block by design), and the component library. - **A project-CLAUDE.md rule** binds future page generation to the asset ("HTML surfaces embed `crates/aura-cli/assets/aura.css`; new components extend that file, never fork the palette") — without the rule the asset is just a findable file, not a pin. Out of scope: the JS renderers (page-specific logic), the vendored uPlot CSS, and `graph-viewer.js`'s internal hex values (migrating JS to read CSS custom properties is a possible later refinement, not v1). - depends on: nothing - context: raised after the research-artifacts milestone demo page had to reverse-engineer the palette from a generated chart page.

Brummel added the feature label 2026-07-04 11:02:35 +02:00

Brummel referenced this issue from a commit

2026-07-04 12:04:19 +02:00

refactor(cli): extract the shared shell stylesheet into assets/aura.css

Brummel referenced this issue from a commit

2026-07-04 12:04:19 +02:00

feat(cli): aura.css becomes the style pin — tokens, component library, CLAUDE.md rule

Brummel closed this issue

2026-07-04 12:04:19 +02:00

Brummel referenced this issue

2026-07-09 17:31:52 +02:00

Web frontend that drives the aura CLI binary and renders results (discussion idea) #72