feat(dashboard): split monolithic CSS into common + per-page bundles

dashboard.css was 2500+ lines covering every page. Split into four
separate esbuild entry points:

- common.css  — @hive/shared imports + shared typography, badges,
                buttons, inbox/compose, side panel, diff panel,
                path linkification, logs-header chrome (shared by
                flow + logs)
- dashboard.css — dashboard-only styles (tabs, container rows,
                  approvals, questions, permissions, schedules, etc.)
- flow.css    — flow page chrome (frosted header, composer, inbox pill)
- logs.css    — log viewer sub-tabs (journal-*, build-logs-*)

Each HTML file now loads common.css + its own page-specific bundle.
build.mjs updated to produce all four CSS outputs. All builds pass.

Closes #1056
This commit is contained in:
iris 2026-06-02 09:49:19 +02:00 committed by mara
commit ea5115c3a6
8 changed files with 949 additions and 1136 deletions

View file

@ -10,8 +10,12 @@
// dist/static/logs.js /logs.html entry — build/agent/system
// log viewer sub-tabs
// dist/static/{tabs,flow,logs}.js.map source map siblings
// dist/static/dashboard.css served at /static/dashboard.css
// (@import resolved from @hive/shared)
// dist/static/common.css loaded by every page (@hive/shared
// imports + shared typography/badges/
// buttons/inbox/side-panel)
// dist/static/dashboard.css /index.html only (dashboard-specific)
// dist/static/flow.css /flow.html only (flow chrome + composer)
// dist/static/logs.css /logs.html only (log viewer sub-tabs)
//
// Both JS entries inline `./common.js` (DOM helpers, Panel singleton,
// NOTIF, path linkification) — esbuild dedupes the shared module
@ -71,15 +75,19 @@ await build({
logLevel: 'info',
});
// Bundle the CSS — esbuild resolves @import including the package
// re-exports from @hive/shared.
await build({
entryPoints: [src('dashboard.css')],
outfile: staticDir('dashboard.css'),
bundle: true,
loader: { '.css': 'css' },
logLevel: 'info',
});
// Bundle CSS — one entry per page. esbuild resolves @import including
// the package re-exports from @hive/shared. Each page loads common.css
// (shared typography, badges, buttons, inbox, side panel) plus its own
// page-specific bundle.
for (const entry of ['common.css', 'dashboard.css', 'flow.css', 'logs.css']) {
await build({
entryPoints: [src(entry)],
outfile: staticDir(entry),
bundle: true,
loader: { '.css': 'css' },
logLevel: 'info',
});
}
for (const html of ['index.html', 'flow.html', 'logs.html']) {
copyFileSync(src(html), dist(html));