Commit graph hyperhive/frontend/packages/dashboard/src/common.css
Author SHA1 Message Date
iris
d7bba48176 fix(frontend): stack the warning banner + tab bar in one sticky wrapper (#1587)
Per mara's review: instead of measuring the banner height in JS and
offsetting the chrome's sticky top, put the warning banner and the page
chrome in the same sticky div so they stack naturally.

common.js builds the wrapper: ensureStickyTop() wraps the page's chrome
(.dashboard-chrome / .page-header) in a single .sticky-top container and
injects the warning banner as its first child. The banner and the chrome
are no longer individually sticky — .sticky-top owns the stickiness, so
they pin together in one context instead of two top:0 stickies colliding
(the banner used to overlay the tab bar). Pages without a chrome (the
H0M3 hub) get a banner-only sticky region. No per-page markup needed; no
JS height measurement. Build green.
2026-06-10 01:05:55 +02:00
iris
d14d79ce3b fix(frontend): give the server-warning bar an opaque background (#1572)
The server-warning rows composited their level tint (amber/red) over
`transparent`, so only 16-18% of the colour was opaque. Because the bar
is `position: sticky; top: 0`, page content scrolled up behind it showed
through the see-through background. Composite the tint over the elevated
surface grey (--bg-elev) instead, so the bar reads as a solid grey strip
with the level tint on top — no bleed-through. Affects every page that
shows the banner (the flow page is where it was spotted).
2026-06-09 13:32:50 +02:00
iris
49a0a0d15f refactor(frontend): extract the page-chrome into @hive/shared (#1464 step 3)
The standalone pages (/flow, /logs, /stats, /settings) all share the same
sticky back-link header, but its CSS lived in the dashboard's common.css
under the misnomer `.logs-*` (the comment even noted it was used by more
than logs). Promote it to a first-class shared component.

- new @hive/shared/chrome.css with neutral `.page-header` / `.page-back` /
  `.page-title` (cohering with the `.page-content` gutter wrapper);
  exported from the shared package and @imported into common.css next to
  base/terminal/tabs.css.
- rename the four pages' header markup `.logs-*` → `.page-*`.
- drop the old `.logs-*` chrome block from common.css; refresh the stale
  doc comments in settings.css / stats.css / dashboard.css.

CSS-only, behaviour/visual-neutral (same rules, new names + home). The
dashboard keeps its own richer sticky `.dashboard-chrome`; unifying the
per-agent UI's `.stats-nav` chrome is a larger follow-up, deferred.

Part of #1464 step 3.
2026-06-09 09:13:35 +02:00
iris
293e608ca4 refactor(frontend): invert the dashboard + H0M3 gutter (#1537)
Follow-up from #1532. Previously `body.dashboard-shell` / `body.home-shell`
carried the 1.5em horizontal gutter, and full-width chrome broke out of it
with negative margins (`.dashboard-chrome { margin: 0 -1.5em }`, the
`#server-warnings { margin: 0 -1.5em }` override).

Invert it: `<body>` is now full-bleed, and the padded page content lives in
a single inner `.page-content` wrapper that carries the gutter. The
server-warnings banner, the sticky tab strip, and the footer then span the
full width for free — so the `-1.5em` breakout hacks are gone.

- `.page-content { padding: 0 1.5em }` is a shared primitive in common.css
  (the dashboard + H0M3 both opt in by wrapping their content; FL0W / L0GS /
  ST4TS / S3TT1NGS stay full-bleed with their own `.<page>-main` padding).
- dashboard.html / index.html wrap their content in `.page-content`.
- dashboard.css / home.css: drop the body horizontal gutter (keep
  `padding-bottom` for foot breathing room); `.dashboard-chrome` margin
  `0 -1.5em 1em` → `0 0 1em`.
- common.css: drop the `#server-warnings` breakout override.

Behaviour/visual-neutral by intent (content gutter unchanged; chrome +
banner already rendered full-width via the old breakout). Worth a gui
screenshot-diff to confirm — esp. the now-full-width footer divider.

Last fold-in of #1464 step 2.
2026-06-09 00:18:01 +02:00
iris
09cb705738 refactor(frontend): move ST4TS to its own /stats.html page (#1464 step 2)
Extracts the hive-wide turn-stats rollup out of the dashboard tab strip
into a standalone /stats.html page, reached from the H0M3 hub — same
minimal-chrome pattern as /flow.html and /logs.html. The dashboard tab
strip is now purely operational.

- new stats.{html,css,js}; stats.js holds the moved render JS and
  fetches /api/stats-hive on load + window change.
- migrate the window selector (#hive-stats-windows) from a bespoke
  data-w/.active toggle to the shared createTabStrip — now hash-routed
  (#1h / #24h / …) and deep-linkable, matching the per-agent /stats page.
- drop the ST4TS tab + pane from dashboard.html and the hive-stats render
  block + the stats->refreshHiveStats lazy-load from tabs.js.
- move the shared .hive-stats-table to common.css (the dashboard SYST3M >
  C0NT41N3R L04D table still uses it); the ST4TS-only window/chip/bar
  styles go to stats.css.
- add a Stats tile to the H0M3 hub (and drop the now-stale "stats" from
  the Dashboard tile desc); wire build.mjs + the nix/frontend.nix manifest.

Second slice of #1464 step 2; follows the /settings.html extraction.
2026-06-09 00:11:43 +02:00
iris
e1c276a06e refactor(frontend): add createTabStrip + migrate logs sub-tabs (#1464 step 1)
Adds @hive/shared/tabs.js — createTabStrip(tabbar, {defaultId, onShow}):
a hash-routed tab strip that resolves controls by `[data-tab="<id>"]`
inside the passed container and panels by `[data-tab-pane="<id>"]`,
toggling `.hive-tab--active` + aria-selected + the panel's `hidden`, and
firing onShow(id) for per-tab side-effects. Always hash-routed (deep-
linkable + back/forward), no element-resolver callbacks (convention over
config), per the #1464 design review.

Wires it up: @hive/shared exports `./tabs.js` + `./tabs.css`, and
common.css @imports tabs.css (component structure, not a swap target, so
inlining is fine — unlike theme.css).

Migrates the logs sub-tabs as the first consumer: markup uses
`.hive-tab`/`data-tab`/`data-tab-pane`, logs.css drops the duplicated
base styles (keeps only its `flex:1` layout delta), and logs.js swaps its
activeTab/showTab/hashchange for createTabStrip (onShow lazy-loads the
SYSTEM tab). Behaviour-preserving. aria-selected is now standardised.
2026-06-08 22:13:41 +02:00
iris
62406fc968 fix(dashboard): server-warnings banner spans full page width (#1531)
The banner is prepended as a direct child of <body>, so on pages that
pad the body gutter (the dashboard + H0M3 use a 1.5em horizontal gutter)
it inherited 1.5em gaps left and right. Break out of that padding with
negative margins matching the gutter — the same trick .dashboard-chrome
uses — scoped to the dashboard + home shells. FL0W + L0GS are full-bleed
already (no body padding), so they're unchanged.
2026-06-08 22:08:33 +02:00
iris
742d4a5c6d fix(frontend): var-derive hardcoded palette colours for theme-swap safety
Replace ~92 hardcoded Catppuccin rgba literals across the dashboard,
agent, and shared terminal stylesheets with color-mix() over the theme
:root vars, so a stylix-generated theme.css recolours the whole UI, not
just the elements that already referenced the vars. Pixel-identical
under the default palette (same RGB + alpha; color-mix(in srgb, C N%,
transparent) == rgba(C, N/100)).

Also fixes four var(--mauve, #cba6f7) usages: --mauve is undefined (the
var is --purple), so they were silently falling back to the hardcoded
hex and would not have recoloured on a theme swap. The bare crust hex in
terminal.css and the checkerboard-gradient hexes in common.css are
var-derived too.

Pure black/white drop-shadow/frost scrims are left as literals (not
theme colours). Two off-palette surface tints (dim-purple schedule rows,
warm-amber inline-button hover) are also left, with a comment, pending a
dedicated named var. Correct-var fallbacks like var(--red, #f38ba8) are
left as-is since they already recolour via the var.
2026-06-08 21:24:07 +02:00
iris
5d0f3d060b feat(dashboard): generic server-warnings banner on every page (#1518)
Per operator request: instead of a disk-specific alert, surface a generic
server-warnings banner at the very top of every page, so new system
warnings can be added backend-side with no frontend change.

- hive-c0re `host_stats`: `server_warnings() -> Vec<ServerWarning>`
  (`{ kind, level, message }`). The threshold logic lives server-side; the
  host disk-pressure check (a `statvfs` probe of `/nix`: ≥85% used → warn,
  ≥95% → crit) is the first and only producer today. No new deps (libc).
- `/api/state` carries `server_warnings` (replaces the disk-specific
  field). Empty when all clear.
- frontend: `renderServerWarnings` / `initServerWarnings` in `common.js`
  inject a sticky top-of-<body> banner and render the list, coloured by
  `level`. Wired on every page — dashboard (live, via refreshState),
  FL0W, L0GS, H0M3. No per-warning frontend code; adding a warning kind
  is a pure backend change.

cargo check/clippy/fmt + npm run build green. Closes #1518.
2026-06-08 20:55:15 +02:00
damocles
cf6479b3a9 fix(#1307) add appearance:none to .btn to strip browser UA button chrome 2026-06-04 21:04:45 +02:00
iris
750f64b7f0 feat(#1290): show per-agent loose-end question count in dashboard
Add a ' N' badge to each container row showing the count of pending
questions where the agent is the asker (awaiting an answer) or the
target (owes a reply). Derived live from questionsState — no backend
field needed.

Details:
- New .badge-loose-ends CSS class (purple, matching Q33R1ES section colour)
- Badge tooltip breaks down the count: 'N asked, N to answer'
- renderContainersFromState() called on QuestionAdded/QuestionResolved
  so the badge updates instantly when question state changes
- Existing  reminders badge kept separate (different signal)
2026-06-04 19:06:56 +02:00
iris
ea5115c3a6 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
2026-06-02 11:19:32 +02:00