vinzenz/hyperhive
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

frontend: vibec0re terminal overhaul (#360)

Browse source 
Per operator spec at #360#issuecomment-3333:
- full-screen terminal
- frosted-glass header overlaid on top
- inbox + loose-ends → flyout
- no a/b flag, just ship it

## Layout

`frontend/packages/agent/src/index.html` restructured to a three-zone
fixed-overlay shape:

- `<header.agent-header>` — fixed top, frosted glass via
  `backdrop-filter: blur(12px) saturate(140%)`. Holds icon + title +
  nav links + state-row (badges/buttons) + two new pill buttons that
  surface inbox / loose-ends counts (and open the side panel on click).
- `<main.agent-main>` — fills the viewport. Terminal positioned absolute
  inset:0 with padding-top/-bottom + scroll-padding equal to the
  floating header/composer heights so first/last rows stay reachable
  and `↓ N new` pill anchors land in the visible scroll zone.
- `<footer.agent-composer>` — fixed bottom, mirror-frosted. Owns
  `#term-input`; dropped the in-frame dashed separator (border-top
  + box-shadow on the bar already separate it from the terminal).
- `<div.side-panel>` — singleton drawer (copy of the dashboard
  pattern, candidate for extraction into @hive/shared). Inbox +
  loose-ends details render here instead of expanding inline.

Dropped from the page: the pre-banner ASCII shimmer (`<pre.banner>`)
and the in-page `<details>` collapsibles for inbox + loose-ends. The
banner JS path (`setBannerActive`) is now a no-op (early-returns on
missing element); kept as dead code rather than ripped out to keep
the diff focused.

## JS

`frontend/packages/agent/src/app.js`:

- New `Panel` singleton with `open(name, title, content)` +
  `close()` + `refresh(name, title, content)` (no-op if a different
  view owns the panel — lets live updates re-render an open view
  without grabbing focus from a closed one). Mirror of the
  dashboard's Panel module; the duplication is intentional for now.
- `renderInbox` + `renderLooseEnds` refactored: update the header
  pill counts, hide/show the pills, and `Panel.refresh` if the
  matching view is open. The list-building DOM logic moved into
  `buildInboxList` + `buildLooseEndsList` so the pill click handler
  can call them on the latest snapshot kept in `lastInbox` /
  `lastLooseEnds` module state.
- Pill click handlers `Panel.open(...)` with the freshly built list.
- Auto-expand behavior on first appearance dropped (the pill +
  count badge is the discoverable signal; auto-popping the flyout
  would interrupt whatever the operator is doing).
- `setHeader` no longer touches `#banner` (element removed); title +
  dashboard back-link + rebuild button still get appended to `#title`.

## CSS

`frontend/packages/agent/src/agent.css` major additions, scoped
`body.agent-shell` so the sibling `stats.html` (which doesn't apply
the shell class) keeps its normal-document scroll + `.banner` ASCII
header via a `body:not(.agent-shell)` block.

New CSS custom properties on :root: `--agent-header-h`,
`--agent-composer-h`, `--agent-frost-bg`, `--agent-frost-blur`. The
terminal's padding + scroll-padding derive from these so a single
height tweak ripples consistently.

Added `.header-pill` (inbox/loose-ends triggers) +
`.agent-status-overlay` (centred login card when status != online).
Side-panel rules copied from `dashboard.css` with one delta: width
caps at 640px (vs dashboard's 760px) since per-agent inbox / loose-
ends rows are narrower than approval diffs / file previews.

## Validation

- `npm run build` — succeeds both workspaces.
  - agent: `dist/static/{app.js (115kb), stats.js (435kb), agent.css (21kb)}`
  - dashboard unchanged (no shared sources touched).
- Browser smoke test isn't possible from inside iris's container
  (no JS engine) — op-side check on next deploy.

Closes #360.
This commit is contained in:
iris 2026-05-24 03:49:26 +02:00
parent 4d7c767eb0
commit e931c08739
3 changed files with 496 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

338
frontend/packages/agent/src/agent.css
View file

@ -3,10 +3,31 @@
@import "@hive/shared/base.css";
@import "@hive/shared/terminal.css";
body {
/* ─── full-screen vibec0re overhaul (issue #360) ──────────────────
Layout shape: fixed-position frosted-glass header at top, fixed-
position composer at bottom, full-viewport terminal in between.
The terminal scrolls — its text passes BENEATH the floating
header/composer with backdrop-filter blur for the frosted look.
Inbox + loose-ends move into the side-panel flyout; header pills
surface their counts as the only chrome they get. */
:root {
--agent-header-h: 4.6em;
--agent-composer-h: 3.6em;
--agent-frost-bg: rgba(30, 30, 46, 0.72);
--agent-frost-blur: blur(12px) saturate(140%);
}
html, body { height: 100%; margin: 0; }
/* Legacy in-page layout retained for the sibling stats page
(`stats.html`) which doesn't apply `body.agent-shell` and stays
on a normal-document scroll. */
body:not(.agent-shell) {
max-width: 110em;
margin: 1.5em auto;
padding: 0 1.5em;
height: auto;
}
.banner {
text-align: center;
@ -26,30 +47,177 @@ body {
color: transparent;
filter: drop-shadow(0 0 6px rgba(203, 166, 247, 0.45));
}
.banner.active {
animation: banner-shimmer 1.8s linear infinite;
body.agent-shell {
background: var(--bg);
color: var(--fg);
/* Body itself doesn't scroll; the terminal does inside .agent-main. */
overflow: hidden;
/* Subtle radial accent to give the otherwise-flat full-screen
surface some depth and reinforce the vibec0re mood. */
background:
radial-gradient(ellipse 80% 60% at 50% 0%,
rgba(203, 166, 247, 0.06) 0%,
transparent 60%),
var(--bg);
}
@keyframes banner-shimmer {
from { background-position: 200% 0; }
to { background-position: -100% 0; }
.agent-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 30;
min-height: var(--agent-header-h);
display: flex;
align-items: center;
gap: 1em;
padding: 0.55em 1em;
background: var(--agent-frost-bg);
-webkit-backdrop-filter: var(--agent-frost-blur);
backdrop-filter: var(--agent-frost-blur);
border-bottom: 1px solid var(--purple-dim);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
flex-wrap: wrap;
}
.agent-header-title {
display: flex;
flex-direction: column;
gap: 0.1em;
min-width: 0;
flex: 1 1 auto;
}
.agent-header-title h2 {
margin: 0;
line-height: 1;
}
.agent-nav {
/* Slim nav row directly under the title — keeps the operator's
fingers near stats/screen/forge without dominating the header. */
display: flex;
flex-wrap: wrap;
gap: 0.4em 0.8em;
margin: 0;
}
.agent-state-row {
margin: 0;
display: flex;
align-items: center;
gap: 0.5em;
flex-wrap: wrap;
}
h2, h3 {
color: var(--purple);
text-transform: uppercase;
letter-spacing: 0.15em;
text-shadow: 0 0 8px rgba(203, 166, 247, 0.4);
}
.title-row {
display: flex;
align-items: center;
gap: 0.6rem;
}
.title-row h2 { margin: 0; }
.agent-icon {
width: 40px;
height: 40px;
width: 44px;
height: 44px;
border-radius: 6px;
flex-shrink: 0;
box-shadow: 0 0 14px -2px rgba(203, 166, 247, 0.35);
}
/* Header pill — inbox / loose-ends triggers. Compact, count-prominent. */
.header-pill {
background: transparent;
border: 1px solid var(--purple-dim);
color: var(--fg);
font-family: inherit;
font-size: 0.85em;
letter-spacing: 0.04em;
border-radius: 999px;
padding: 0.25em 0.7em;
display: inline-flex;
align-items: center;
gap: 0.4em;
cursor: pointer;
transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.header-pill:hover {
border-color: var(--purple);
color: var(--purple);
box-shadow: 0 0 10px -2px var(--purple);
}
.header-pill-icon { font-size: 1.05em; line-height: 1; }
.header-pill-label { color: var(--muted); }
.header-pill-count {
background: var(--purple-dim);
color: var(--purple);
border-radius: 999px;
padding: 0 0.5em;
min-width: 1.6em;
text-align: center;
font-weight: bold;
font-variant-numeric: tabular-nums;
}
.header-pill-inbox .header-pill-count {
background: rgba(250, 179, 135, 0.18);
color: var(--amber);
}
.header-pill-loose .header-pill-count {
background: rgba(243, 139, 168, 0.18);
color: var(--red);
}
.agent-main {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
/* Login flow overlay: only rendered when status != online. Sits
centred over the (likely-empty) terminal area; doesn't take chrome
space in the normal online flow. */
.agent-status-overlay {
position: absolute;
top: calc(var(--agent-header-h) + 1.5em);
left: 50%;
transform: translateX(-50%);
max-width: 44em;
width: calc(100% - 3em);
z-index: 10;
}
.agent-status-overlay:empty { display: none; }
.agent-status-overlay > * {
background: var(--bg-elev);
border: 1px solid var(--purple-dim);
border-radius: 6px;
padding: 1em 1.2em;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}
.agent-composer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 30;
min-height: var(--agent-composer-h);
background: var(--agent-frost-bg);
-webkit-backdrop-filter: var(--agent-frost-blur);
backdrop-filter: var(--agent-frost-blur);
border-top: 1px solid var(--purple-dim);
box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.35);
}
.agent-composer .term-input {
/* The composer is its own chrome now — drop the in-terminal-wrap
padding the legacy layout assumed. */
padding: 0.45em 1em;
}
.agent-composer .term-input .sendform-term {
/* No dashed top-border in the floating composer — the box-shadow
and frosted border already separate it from the terminal. */
border-top: 0;
padding-top: 0;
}
.meta { color: var(--muted); font-size: 0.85em; }
.status-online { color: var(--green); text-shadow: 0 0 6px rgba(166, 227, 161, 0.55); }
@ -347,14 +515,54 @@ pre.diff {
60% { box-shadow: 0 0 18px -4px currentColor, 0 0 4px 0 currentColor; }
100% { box-shadow: 0 0 0 0 currentColor, 0 0 0 0 currentColor; }
}
/* `.terminal-wrap`, `.live`, `.live.terminal`, row + pill + details
styling all live in hive-fr0nt::TERMINAL_CSS (prepended by serve_css).
What stays here is the composer chrome that sits inside the wrap. */
.term-input { padding: 0.4em 1em 0.8em; }
/* Full-screen overrides for the shared terminal rules. The base
`.terminal-wrap` (in shared/src/terminal.css) ships a crust-on-
black frame for the in-page case; the agent page now owns the
whole viewport so the frame chrome would be redundant noise.
`.live.terminal` similarly drops the in-page max-height cap so
it can fill the main area top-to-bottom; the floating header +
composer overlay it via fixed positioning. */
.agent-main .terminal-wrap {
position: absolute;
inset: 0;
border: 0;
background: transparent;
box-shadow: none;
border-radius: 0;
margin: 0;
padding: 0;
}
.agent-main .live.terminal {
position: absolute;
inset: 0;
height: auto;
max-height: none;
/* Scroll behind the floating header/composer, but keep the first
and last rows reachable with extra padding inside the scroll
area. scroll-padding-* keeps anchor-jumps (the `↓ N new` pill,
focus restore) clear of the floats too. */
padding-top: calc(var(--agent-header-h) + 0.8em);
padding-bottom: calc(var(--agent-composer-h) + 0.8em);
scroll-padding-top: calc(var(--agent-header-h) + 0.8em);
scroll-padding-bottom: calc(var(--agent-composer-h) + 0.8em);
overflow: auto;
}
/* Tail pill (↓ N new): nudged up so it floats clear of the composer
rather than colliding with the frosted bar. */
.agent-main .tail-pill {
bottom: calc(var(--agent-composer-h) + 0.6em);
}
/* 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. */
.term-input .sendform-term {
display: flex;
align-items: flex-start;
gap: 0.5em;
/* The dashed in-frame separator is dropped — see the
.agent-composer .term-input override above for the floating-bar
variant. */
border-top: 1px dashed var(--purple-dim);
padding-top: 0.5em;
}
@ -387,3 +595,97 @@ pre.diff {
.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
(issue #360). Copy of the dashboard's side-panel pattern —
candidate for extraction into @hive/shared once both surfaces
stabilize. */
.side-panel {
position: fixed;
inset: 0;
z-index: 50;
/* Closed: ignore pointer events so the agent page underneath stays
interactive; `.open` flips it back on. */
pointer-events: none;
}
.side-panel-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
opacity: 0;
transition: opacity 0.2s ease;
}
.side-panel-drawer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(640px, 92vw);
display: flex;
flex-direction: column;
background: var(--bg-elev);
border-left: 2px solid var(--purple);
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.45);
transform: translateX(100%);
transition: transform 0.25s ease;
}
.side-panel.open { pointer-events: auto; }
.side-panel.open .side-panel-backdrop { opacity: 1; }
.side-panel.open .side-panel-drawer { transform: translateX(0); }
.side-panel-head {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
padding: 0.7em 1em;
border-bottom: 1px solid var(--border);
}
.side-panel-title {
color: var(--purple);
font-weight: bold;
letter-spacing: 0.05em;
word-break: break-all;
}
.side-panel-close {
flex: 0 0 auto;
background: var(--bg);
color: var(--fg);
border: 1px solid var(--border);
font-family: inherit;
font-size: 1em;
line-height: 1;
padding: 0.25em 0.55em;
cursor: pointer;
}
.side-panel-close:hover { border-color: var(--red); color: var(--red); }
.side-panel-body {
flex: 1 1 auto;
overflow: auto;
padding: 0.8em 1em;
}
/* Inbox / loose-ends lists rendered into the side-panel body. The
legacy <details>-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. */
.side-panel-body .agent-inbox {
margin: 0;
font-size: inherit;
color: var(--fg);
}
.side-panel-body .agent-inbox ul {
background: transparent;
border-left: 0;
padding: 0;
max-height: none;
overflow: visible;
}
/* Empty-state placeholders for the side panel (when count drops to 0
between the click and the render — rare, but possible). */
.side-panel-empty {
color: var(--muted);
font-style: italic;
padding: 1em 0;
}

139
frontend/packages/agent/src/app.js
View file

@ -77,10 +77,69 @@ window.marked = marked;
}
});
// ─── side panel (singleton drawer for inbox + loose-ends flyouts) ──────
// Shared shape with the dashboard's panel. Candidate for extraction
// into @hive/shared in a follow-up — keeping the duplication for
// now to land #360 without simultaneously refactoring the dashboard.
const Panel = (() => {
const root = $('side-panel');
const titleEl = $('side-panel-title');
const bodyEl = $('side-panel-body');
/** Owner key (e.g. 'inbox', 'loose-ends'). Refresh hooks check
* against this so a live event only re-renders the panel when
* the matching view is actually visible. null when closed. */
let owner = null;
function open(name, title, content) {
owner = name;
titleEl.textContent = title;
bodyEl.replaceChildren(...(content ? [content] : []));
root.classList.add('open');
root.setAttribute('aria-hidden', 'false');
}
function close() {
owner = null;
root.classList.remove('open');
root.setAttribute('aria-hidden', 'true');
}
function refresh(name, title, content) {
if (owner !== name) return;
titleEl.textContent = title;
bodyEl.replaceChildren(...(content ? [content] : []));
}
function bind() {
$('side-panel-close').addEventListener('click', close);
$('side-panel-backdrop').addEventListener('click', close);
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && root.classList.contains('open')) close();
});
}
return { open, close, refresh, bind, currentOwner: () => owner };
})();
Panel.bind();
// Wire the header pills to open the side panel. Pre-built (vs
// re-building per-click) so the freshest snapshot already lives
// in `lastInbox` / `lastLooseEnds` when the pill is clicked — even
// if it fires during a turn the render is the same.
(function bindHeaderPills() {
const inboxPill = $('inbox-pill');
if (inboxPill) {
inboxPill.addEventListener('click', () => {
Panel.open('inbox', 'inbox · ' + lastInbox.length,
buildInboxList(lastInbox));
});
}
const loosePill = $('loose-ends-pill');
if (loosePill) {
loosePill.addEventListener('click', () => {
Panel.open('loose-ends', 'loose ends · ' + lastLooseEnds.length,
buildLooseEndsList(lastLooseEnds));
});
}
})();
// ─── state rendering ────────────────────────────────────────────────────
function setHeader(label, dashboardPort) {
$('banner').textContent =
`░▒▓█▓▒░ ${label} ░▒▓█▓▒░ hyperhive ag3nt ░▒▓█▓▒░`;
const title = $('title');
title.textContent = `◆ ${label} ◆ `;
// ↑ DASHB04RD — back-link to the host dashboard. Opens in a new
@ -415,8 +474,7 @@ window.marked = marked;
// Loose-ends section: same data the get_loose_ends MCP tool
// returns. Best-effort fetch on cold load + after every turn_end
// (a turn likely answered or asked something). Silent failure
// keeps the section hidden rather than surfacing an empty banner.
let lastLooseEndsCount = 0;
// keeps the pill count at zero rather than surfacing a stale chrome.
async function refreshLooseEnds() {
try {
const resp = await fetch('/api/loose-ends');
@ -431,24 +489,22 @@ window.marked = marked;
renderLooseEnds([]);
}
}
function renderLooseEnds(threads) {
const root = $('loose-ends-section');
const list = $('loose-ends-list');
const summary = $('loose-ends-summary');
if (!root || !list || !summary) return;
/** Latest snapshot kept in module state so the pill click handler
* has fresh data to render into the panel without re-fetching. */
let lastLooseEnds = [];
let lastInbox = [];
function buildLooseEndsList(threads) {
// Returns the <div> the side panel renders. The structural shape
// mirrors the legacy <details>-collapsible block — same CSS rules
// apply via `.side-panel-body .agent-inbox`.
const wrap = el('div', { class: 'agent-inbox' });
if (!threads.length) {
root.hidden = true;
lastLooseEndsCount = 0;
return;
wrap.append(el('p', { class: 'side-panel-empty' },
'no loose ends — every question, approval and reminder is resolved.'));
return wrap;
}
root.hidden = false;
summary.textContent = 'loose ends · ' + threads.length;
list.innerHTML = '';
// Auto-expand on first appearance of any open thread so the
// operator notices new loose ends; collapse only on operator
// click (sticky after that).
if (lastLooseEndsCount === 0) root.open = true;
lastLooseEndsCount = threads.length;
const list = el('ul');
const fmtAge = (s) => {
if (s < 60) return s + 's';
if (s < 3600) return Math.floor(s / 60) + 'm';
@ -492,6 +548,21 @@ window.marked = marked;
}
list.append(li);
}
wrap.append(list);
return wrap;
}
/** Pill-count + open-panel-refresh wiring for loose-ends. The legacy
* in-page `<details>` block is gone — operator clicks the header
* pill to surface the list in the side panel. */
function renderLooseEnds(threads) {
lastLooseEnds = threads;
const pill = $('loose-ends-pill');
const count = $('loose-ends-count');
if (count) count.textContent = threads.length;
if (pill) pill.hidden = threads.length === 0;
Panel.refresh('loose-ends', 'loose ends · ' + threads.length,
buildLooseEndsList(threads));
}
// Inline "answer as operator" form for a question loose-end. POSTs to
@ -530,18 +601,14 @@ window.marked = marked;
return wrap;
}
function renderInbox(rows) {
const root = $('inbox-section');
const list = $('inbox-list');
const summary = $('inbox-summary');
if (!root || !list || !summary) return;
function buildInboxList(rows) {
const wrap = el('div', { class: 'agent-inbox' });
if (!rows.length) {
root.hidden = true;
return;
wrap.append(el('p', { class: 'side-panel-empty' },
'inbox empty.'));
return wrap;
}
root.hidden = false;
summary.textContent = 'inbox · ' + rows.length;
list.innerHTML = '';
const list = el('ul');
const fmt = (n) => new Date(n * 1000).toISOString().replace('T', ' ').slice(5, 19);
for (const m of rows) {
const li = el('li', m.in_reply_to != null ? { class: 'inbox-reply' } : {});
@ -556,6 +623,18 @@ window.marked = marked;
);
list.append(li);
}
wrap.append(list);
return wrap;
}
/** Pill-count + open-panel-refresh wiring for inbox. */
function renderInbox(rows) {
lastInbox = rows;
const pill = $('inbox-pill');
const count = $('inbox-count');
if (count) count.textContent = rows.length;
if (pill) pill.hidden = rows.length === 0;
Panel.refresh('inbox', 'inbox · ' + rows.length, buildInboxList(rows));
}
// Harness reachability badge: derived from the same `s.status` the
// status block reads. Each status maps to a glyph + label + colour

98
frontend/packages/agent/src/index.html
View file

@ -6,43 +6,79 @@
<link rel="icon" type="image/svg+xml" href="/icon">
<link rel="stylesheet" href="/static/agent.css">
</head>
<body>
<pre class="banner" id="banner">░▒▓█▓▒░ … ░▒▓█▓▒░ hyperhive ag3nt ░▒▓█▓▒░</pre>
<div class="title-row">
<body class="agent-shell">
<!-- Fixed-overlay header. 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="">
<h2 id="title">◆ … ◆</h2>
</div>
<p class="meta" id="meta-links"></p>
<div class="agent-header-title">
<h2 id="title">◆ … ◆</h2>
<nav class="meta agent-nav" id="meta-links"></nav>
</div>
<div id="status">
<p class="meta">loading…</p>
</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>
</div>
<div id="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>
</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>
<details id="inbox-section" class="agent-inbox" hidden>
<summary>▸ <span id="inbox-summary">inbox</span></summary>
<ul id="inbox-list"></ul>
</details>
<!-- 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>
<details id="loose-ends-section" class="agent-inbox" hidden>
<summary>▸ <span id="loose-ends-summary">loose ends</span></summary>
<ul id="loose-ends-list"></ul>
</details>
<div class="terminal-wrap">
<div id="live" class="live terminal"><div class="meta">connecting…</div></div>
<!-- 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