diff --git a/frontend/packages/agent/src/agent.css b/frontend/packages/agent/src/agent.css index bbd0da3c..3e0dbd16 100644 --- a/frontend/packages/agent/src/agent.css +++ b/frontend/packages/agent/src/agent.css @@ -10,9 +10,9 @@ resolved as shared CSS rather than a JS component) — see pill.css itself for the classnames it covers. */ @import "@hive/shared/pill.css"; -/* Themed dialog/toast component CSS (modal.js) now lives in each +/* Themed dialog/toast component CSS (modal.js) lives in each component's own shadow root (adoptedStyleSheets), not a global - stylesheet — nothing to @import here any more. */ + stylesheet — nothing to @import here. */ /* ─── full-screen layout overrides ───────────────────────────────── The agent page mounts a full-viewport terminal under a fixed @@ -587,9 +587,9 @@ pre.diff { z-index: 35; } -/* Composer chrome — used to live inside `.terminal-wrap`; now lives - inside the fixed `.agent-composer` defined further up. The base - rules below stay scoped to whichever ancestor owns it. */ +/* Composer chrome lives inside the fixed `.agent-composer` defined + further up. The base rules below stay scoped to whichever ancestor + owns it. */ .term-input .sendform-term { display: flex; /* mara, live: "bottom input row text not aligned / inconsistent @@ -639,31 +639,29 @@ pre.diff { .term-input .submit-hint { color: var(--muted); font-size: 0.8em; flex: 0 0 auto; } .term-input.disabled .prompt { color: var(--muted); text-shadow: none; } .term-input.disabled textarea { color: var(--muted); } -/* Row + pill + details styling moved to hive-fr0nt::TERMINAL_CSS. */ /* ─── side panel (singleton drawer) ──────────────────────────────── Inbox + loose-ends details open here instead of expanding inline. The drawer chrome itself (backdrop, drawer, resize handle, header, title, - close button) is now the shared `` element - (@hive/shared/side-panel.js — this also picks up drag-to-resize, - which this page didn't have before); what's left here is the drag - cursor-override escape hatch (has to be a global, light-DOM rule — it - reaches every element on the page during a drag, not just the shared - element's own shadow tree) and the styling for the panel's own - content types, which the shared element's shadow tree can never - reach (see @hive/shared/side-panel/hive-side-panel.css's header - comment). The `hive-side-panel .agent-inbox …` rules below use the - element's own tag name as the selector root — no compatibility class - needed, the tag name already uniquely identifies the light-DOM - instance app.js's `sidePanel` creates. */ + close button) is the shared `` element + (@hive/shared/side-panel.js, including drag-to-resize); what's left + here is the drag cursor-override escape hatch (has to be a global, + light-DOM rule — it reaches every element on the page during a + drag, not just the shared element's own shadow tree) and the + styling for the panel's own content types, which the shared + element's shadow tree can never reach (see + @hive/shared/side-panel/hive-side-panel.css's header comment). The + `hive-side-panel .agent-inbox …` rules below use the element's own + tag name as the selector root — no compatibility class needed, the + tag name already uniquely identifies the light-DOM instance app.js's + `sidePanel` creates. */ body.side-panel-resizing { user-select: none; } body.side-panel-resizing * { cursor: ew-resize !important; } -/* Inbox / loose-ends lists rendered into the side-panel body. The - legacy
-collapsible variant of .agent-inbox is gone, so - here we strip the inbox-only chrome (background, border-left) and - let the panel body's own padding own the framing. */ +/* Inbox / loose-ends lists rendered into the side-panel body: strip + the inbox-only chrome (background, border-left) here and let the + panel body's own padding own the framing. */ hive-side-panel .agent-inbox { margin: 0; font-size: inherit; diff --git a/frontend/packages/agent/src/components/Header.tsx b/frontend/packages/agent/src/components/Header.tsx index 0eb80be7..5c9f6dfc 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). 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. +// has no opinion on what badges exist). Three columns: icon, main +// (title + hive-label), pills — see the `pills` prop doc below for why +// the third column is the one that grows. 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 — @@ -42,23 +42,18 @@ export interface HeaderProps { label: string; hiveLabel?: string | null; /** 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. */ + * `.agent-header-pills` cluster 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) — and, since this round, `children` (the status badges) - * too, both in `.agent-header-pills`, the SAME header-level column - * the old markup used for pills alone. First pass of this ask - * nested pills into a row inside `.agent-header-main` instead — - * backwards, mara corrected live: "i meant move badges to where the - * dropdowns are, not the other way around. this way the height does - * not change even on widescreen" — `.agent-header-main` now only - * ever holds the title + hive-label rows, which don't wrap in - * practice, so it stays a stable height; only this pills-cluster - * column (already used to absorbing a variable pill count) grows to - * fit badges+pills together. Meta-nav (``) lives in here - * too, as a fixed-size trigger — not the old markup's inline list in - * the title row (`