69312b8553
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)
109 lines
5.3 KiB
HTML
109 lines
5.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>hyperhive agent</title>
|
|
<link rel="icon" type="image/svg+xml" href="/icon">
|
|
<link rel="stylesheet" href="/static/agent.css">
|
|
</head>
|
|
<body class="agent-shell">
|
|
|
|
<!-- 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-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>
|
|
|
|
<!-- 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>
|
|
</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-
|
|
time-setup state); otherwise the terminal owns the screen. -->
|
|
<main class="agent-main" id="agent-main">
|
|
<div id="status" class="agent-status-overlay"></div>
|
|
<div class="terminal-wrap">
|
|
<div id="live" class="live terminal"><div class="meta">connecting…</div></div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Fixed-overlay composer. Same frosted-glass treatment as the
|
|
header for symmetric framing. Empty until the harness sets up
|
|
the textarea via `renderTermInput`. -->
|
|
<footer class="agent-composer" id="agent-composer">
|
|
<div id="term-input" class="term-input"></div>
|
|
</footer>
|
|
|
|
<!-- Slide-in side panel. Singleton — JS swaps the title + body
|
|
and toggles `.open`. Shared shape with the dashboard's panel
|
|
(candidate for extraction into @hive/shared in a follow-up). -->
|
|
<div id="side-panel" class="side-panel" aria-hidden="true">
|
|
<div class="side-panel-backdrop" id="side-panel-backdrop"></div>
|
|
<aside class="side-panel-drawer" role="dialog" aria-modal="true"
|
|
aria-labelledby="side-panel-title">
|
|
<header class="side-panel-head">
|
|
<span class="side-panel-title" id="side-panel-title"></span>
|
|
<button type="button" class="side-panel-close" id="side-panel-close"
|
|
title="close (esc)">✕</button>
|
|
</header>
|
|
<div class="side-panel-body" id="side-panel-body"></div>
|
|
</aside>
|
|
</div>
|
|
|
|
<!-- Single bundled entry. esbuild folds @hive/shared/terminal.js and
|
|
the marked npm package into app.js. -->
|
|
<script type="module" src="/static/app.js" defer></script>
|
|
</body>
|
|
</html>
|