diff --git a/frontend/packages/agent/src/agent.css b/frontend/packages/agent/src/agent.css index c3377703..4a089fda 100644 --- a/frontend/packages/agent/src/agent.css +++ b/frontend/packages/agent/src/agent.css @@ -128,24 +128,18 @@ body.agent-shell { margin: 0; gap: 0.5em; } -/* New Preact page only: `Header.tsx` nests `.agent-header-pills` - INSIDE `.agent-state-row` (badges + pills sharing one row — mara, - live: "can we put the badges on the same row as the links button - etc? then the header would be more compact"), unlike the old - app.js markup where `.agent-header-pills` is a separate header- - level column (index.html line ~54). Scoped as a descendant - selector so it only fires for that nesting — app.js's own - still-live 3-column layout below is untouched. Pushes the pills - cluster to the row's right edge; badges (`children`, rendered - first) fill the space to its left. */ -.agent-state-row .agent-header-pills { - margin-left: auto; -} /* Right cluster — flyout pills stacked / inline with the overflow trigger. Vertically centred against the full-height icon, no wrap; pills can drop to a row of their own under crowding via - the flex-wrap of `.agent-header-pills` itself. */ + the flex-wrap of `.agent-header-pills` itself. New Preact page also + puts the status badges (`StatusChips`) in here now, alongside the + flyout pills — mara, live: "move badges to where the dropdowns + are" — this same rule already handles a variable child count + gracefully (flex-wrap + flex-end), no changes needed to absorb + them; `.agent-header-main` (agent.css, `.agent-header-title-row`/ + `.agent-hive-row`) only ever holds the title + hive-label rows now, + which don't wrap in practice, so it stays a stable height. */ .agent-header-pills { display: flex; align-items: center; diff --git a/frontend/packages/agent/src/components/Header.tsx b/frontend/packages/agent/src/components/Header.tsx index f4685227..0eb80be7 100644 --- a/frontend/packages/agent/src/components/Header.tsx +++ b/frontend/packages/agent/src/components/Header.tsx @@ -1,12 +1,12 @@ //
— the agent page's identity strip: icon, glyphic title, the // "swarm / hive" label row, and a slot for the status row // (`` — ../status-chips/, kept separate so this component -// has no opinion on what badges exist). Two columns (icon · main), -// NOT the old `#agent-header` markup's three (icon · main · pills) — -// see the `pills` prop doc below for why. Reuses `agent.css`'s -// existing `.agent-header*`/`.agent-icon` rules (loaded globally by -// index.html) rather than a component-scoped stylesheet — no new -// visual language needed for the chrome itself. +// has no opinion on what badges exist). Same three-column shape as the +// old `#agent-header` markup (icon · main · pills) — see the `pills` +// prop doc below for what moved into that third column and why. +// Reuses `agent.css`'s existing `.agent-header*`/`.agent-icon` rules +// (loaded globally by index.html) rather than a component-scoped +// stylesheet — no new visual language needed for the chrome itself. // Measures its own rendered height via ResizeObserver, writes it to // `--agent-header-real-h` (agent.css's downstream consumers — @@ -41,25 +41,24 @@ function handleIconError(e: Event) { export interface HeaderProps { label: string; hiveLabel?: string | null; - /** The status/badge row (``) — shares its row with - * `pills` now (see below), not stacked in a row of its own. */ + /** The status/badge row (``) — lives in the + * `.agent-header-pills` cluster now, alongside `pills` (see below), + * not stacked as its own row under the title. */ children?: ComponentChildren; /** Flyout triggers (inbox/todos/links pills, the overflow menu - * button). Old markup's `.agent-header-pills` was its own header- - * level column, self-centered against the full header height — the - * new page instead nests it inside the same row as `children` - * (`.agent-state-row`), pushed to the row's right edge via - * `margin-left: auto` (scoped to that nesting in agent.css so - * app.js's still-live separate-column usage is untouched). mara, - * live: "can we put the badges on the same row as the links button - * etc? then the header would be more compact" — one shared row - * instead of two disconnected clusters reads as one unit, and (as a - * side effect) is one less row that could ever grow the header past - * the fixed `--agent-header-h` the rest of the page is offset - * against (see the overlap-bug history on this same PR). Meta-nav - * (``) lives in here too, as a fixed-size trigger — NOT in - * the title row the old markup put it in (`
); }