agent: redesign terminal header — full-height icon, two-row main, overflow menu (#394)

Operator brief (#394): the header had thirteen distinct visual
elements in one flex row with three different border-radius
languages, four colour treatments, three label styles. Mara's
direction:

- agent icon bigger (full header height) as the identity anchor
- title glow stays
- nav links lose their default-anchor underline
- overflow `⋯` absorbs `↻ R3BU1LD` + `↻ new session` (rare,
  destructive — both worth one extra click; rebuild is normally
  done from the dashboard)
- accent stacking in the state strip stays — that's the vibe

## Layout shape

Three flex columns in `.agent-header`:

  [icon · full height] [main column · 2 rows] [pills + ⋯]

The main column carries row 1 (`◆ AGENT ◆` title + meta-nav) on
top and row 2 (alive · state · model · ctx · cost · last-turn ·
cancel-turn) below.

## Changes

### `index.html`
- Wrap title + nav in `.agent-header-row .agent-header-title-row`;
  wrap state-row siblings in `.agent-header-row .agent-state-row`;
  both go inside a new `.agent-header-main` column.
- Right cluster `.agent-header-pills` contains the inbox + loose
  pills + a new `<button id="overflow-btn">⋯</button>` trigger.
- Drop static `#new-session-btn` from `#state-row` — moved into the
  overflow menu, populated dynamically.
- Add `<div id="overflow-menu" role="menu" hidden>` as a sibling
  of `<header>` (lives outside the header so its `position: fixed`
  popover isn't trapped by any header stacking context).

### `agent.css`
- `--agent-header-h: 4.6em → 6em` so the icon can be square + full
  height without crowding the two-row main column. Terminal
  padding-top + status overlay top + tail-pill all derive from
  this variable, so they follow automatically.
- `.agent-header { align-items: stretch }` lets the icon stretch
  to full height; `.agent-icon { height: 100%; aspect-ratio: 1 }`
  sizes it as a square off the stretched height.
- `.agent-nav-link` rule added — `text-decoration: none`, cyan +
  soft glow, hover lights brighter (mara's spec).
- `.overflow-btn` (round trigger) + `.overflow-menu` (frosted
  popover, fixed-position) + `.overflow-item` (rows with an icon
  column + label, hover ink matches per-action accent — cyan for
  dashboard, amber for rebuild/new-session).
- Remove the old `#state-row` selector (layout now provided by
  `.agent-state-row` + `.agent-header-row`).

### `app.js`
- `setHeader` no longer appends DASHB04RD / R3BU1LD chips into the
  title — title is just the identity glyph now. Both actions get
  rendered into the overflow menu by `populateOverflowMenu()`.
- `populateOverflowMenu(label, dashUrl)` builds three rows:
  `↑ dashboard` (anchor), `↻ rebuild container` (button — same
  POST-form action as before), `↻ new claude session` (button —
  same `/api/new-session` call as the legacy header button).
- Overflow toggle / outside-click / Escape dismissal — same
  pattern as the side-panel flyout (`Panel`).
- Drop the static `new-session-btn` IIFE binder; the dynamically-
  rendered menu item owns its handler now.
- Drop the per-nav-link inline `marginLeft` (layout gap comes from
  the new `.agent-nav { gap }` rule).

## Validation

- `npm run build` clean.
- Build deltas: agent.css 21.0kb → 23.6kb (overflow + nav rules
  + comments), app.js 117.4kb → 118.9kb (menu builder + toggle).
- Browser smoke test isn't possible from inside iris's container.
  Worth eyeballing post-deploy:
    - Icon fills the full header height as a square
    - Title glow + uppercase styling preserved
    - Nav links render without underline; hover lights brighter
    - `⋯` opens a frosted popover with `↑ dashboard`, `↻ rebuild
      container`, `↻ new claude session`
    - Rebuild confirm + POST works the same as the legacy chip
    - New-session confirm + POST works the same as the legacy button
    - State strip still wraps when crowded (model/ctx/cost
      multi-line on narrow viewports)
    - Cancel-turn button still appears while thinking and clears
      on turn end
    - Terminal padding-top adjusts to the new 6em header height
      (no row hidden under the chrome)

frontend/packages/agent/src/index.html

@@ -8,45 +8,66 @@
 </head>
 <body class="agent-shell">
 
-  <!-- Fixed-overlay header. Frosted glass over the terminal —
-       backdrop-filter blur shows the scrolled terminal text behind. -->
+  <!-- Fixed-overlay header (#394 redesign): two-row layout in the
+       main column — row 1 carries the title + meta-nav, row 2 carries
+       the live state strip. The agent icon eats the full header
+       height on the left as the identity anchor; flyout pills + an
+       overflow menu trigger sit on the right. Frosted glass over the
+       terminal — backdrop-filter blur shows the scrolled terminal
+       text behind. -->
   <header class="agent-header" id="agent-header">
     <img class="agent-icon" src="/icon" alt="">
-    <div class="agent-header-title">
-      <h2 id="title">◆ … ◆</h2>
-      <nav class="meta agent-nav" id="meta-links"></nav>
+
+    <div class="agent-header-main">
+      <div class="agent-header-row agent-header-title-row">
+        <h2 id="title">◆ … ◆</h2>
+        <!-- Meta-nav: backend-supplied links (stats / screen / forge /
+             …) plus a client-injected `↑ dashboard` link prepended in
+             setHeader so the host dashboard stays one click away
+             without a separate button styled differently. -->
+        <nav class="meta agent-nav" id="meta-links"></nav>
+      </div>
+
+      <div id="state-row" class="agent-state-row agent-header-row">
+        <span id="alive-badge" class="status-badge status-loading" title="harness reachability">…</span>
+        <span id="state-badge" class="state-badge state-loading">… booting</span>
+        <span id="model-chip" class="model-chip" hidden></span>
+        <span id="ctx-badge" class="ctx-badge" hidden title="tokens used in the current context window"></span>
+        <span id="cost-badge" class="ctx-badge" hidden title="cumulative tokens billed across the last turn (sum across every inference; tool-heavy turns rebill the cached prompt per call)"></span>
+        <span id="last-turn" class="last-turn" hidden></span>
+        <button type="button" id="cancel-btn" class="btn-cancel-turn" hidden>■ cancel turn</button>
+      </div>
     </div>
 
-    <div id="state-row" class="agent-state-row">
-      <span id="alive-badge" class="status-badge status-loading" title="harness reachability">…</span>
-      <span id="state-badge" class="state-badge state-loading">… booting</span>
-      <span id="model-chip" class="model-chip" hidden></span>
-      <span id="ctx-badge" class="ctx-badge" hidden title="tokens used in the current context window"></span>
-      <span id="cost-badge" class="ctx-badge" hidden title="cumulative tokens billed across the last turn (sum across every inference; tool-heavy turns rebill the cached prompt per call)"></span>
-      <span id="last-turn" class="last-turn" hidden></span>
-      <button type="button" id="cancel-btn" class="btn-cancel-turn" hidden>■ cancel turn</button>
-      <button type="button" id="new-session-btn" class="btn-new-session"
-              title="next turn runs without --continue, starting a fresh claude session">↻ new session</button>
+    <!-- Right cluster: flyout triggers + overflow menu. Pills stay
+         hidden until their list is non-empty; the overflow `⋯` is
+         always visible (rebuild + new-session live inside it per
+         #394 — both rare, both destructive, both deserve one extra
+         click). -->
+    <div class="agent-header-pills">
+      <button type="button" id="inbox-pill" class="header-pill header-pill-inbox" hidden
+              title="open inbox flyout">
+        <span class="header-pill-icon" aria-hidden="true">📬</span>
+        <span class="header-pill-label">inbox</span>
+        <span class="header-pill-count" id="inbox-count">0</span>
+      </button>
+      <button type="button" id="loose-ends-pill" class="header-pill header-pill-loose" hidden
+              title="open loose-ends flyout">
+        <span class="header-pill-icon" aria-hidden="true">🪢</span>
+        <span class="header-pill-label">loose ends</span>
+        <span class="header-pill-count" id="loose-ends-count">0</span>
+      </button>
+      <button type="button" id="overflow-btn" class="overflow-btn"
+              aria-haspopup="menu" aria-expanded="false"
+              title="more actions">⋯</button>
     </div>
-
-    <!-- Flyout triggers. The inbox + loose-ends lists live in the
-         side panel now; these pills surface the count and act as the
-         single click target. The pill stays hidden until there's at
-         least one item to show. -->
-    <button type="button" id="inbox-pill" class="header-pill header-pill-inbox" hidden
-            title="open inbox flyout">
-      <span class="header-pill-icon" aria-hidden="true">📬</span>
-      <span class="header-pill-label">inbox</span>
-      <span class="header-pill-count" id="inbox-count">0</span>
-    </button>
-    <button type="button" id="loose-ends-pill" class="header-pill header-pill-loose" hidden
-            title="open loose-ends flyout">
-      <span class="header-pill-icon" aria-hidden="true">🪢</span>
-      <span class="header-pill-label">loose ends</span>
-      <span class="header-pill-count" id="loose-ends-count">0</span>
-    </button>
   </header>
 
+  <!-- Overflow popover. Sits outside the header so the header's
+       `overflow: hidden`-adjacent ancestors don't clip it; positioned
+       in JS relative to the overflow button (top-right anchor). -->
+  <div id="overflow-menu" class="overflow-menu" role="menu" hidden></div>
+
   <!-- Main content area. The terminal fills it edge-to-edge and
        scrolls behind the floating header + composer. The `#status`
        overlay renders only when login is required (transient first-