From d7e70fd1951dd2f81a7698cf9d51bbf1f2d41901 Mon Sep 17 00:00:00 2001 From: iris Date: Fri, 28 Aug 2026 22:47:49 +0200 Subject: [PATCH] agent: badges join the pills cluster, not the other way around MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit mara, live, correcting the prior round: 'oh i meant move badges to where the dropdowns are not the other way around. this way the height does not change even on widescreen.' Prior commit nested pills INTO a new row inside .agent-header-main (badges + pills sharing a row under the title). Backwards from what she wanted: badges now join .agent-header-pills instead — the same header-level column pills already lived in, which already handles a variable child count via flex-wrap + justify-content: flex-end. .agent-header-main goes back to just the title + hive-label rows, which don't wrap in practice, so its height stays stable regardless of how many badges/pills are showing. The ResizeObserver dynamic-height fix from the prior commit is untouched and still does the real work of keeping .agent-status- overlay's offset correct if anything does wrap — this is a pure layout-preference change on top of that, not a new bugfix. Verified at 500/1024/1400px — badges+pills form one right-aligned cluster next to the title, no overlap, no ResizeObserver console error. tsc --noEmit clean, build clean, both pre-push lints clean. --- frontend/packages/agent/src/agent.css | 22 +++----- .../packages/agent/src/components/Header.tsx | 55 ++++++++++--------- 2 files changed, 36 insertions(+), 41 deletions(-) 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 (`
); }