8dd6d05d6c
Per mara's steer on #3053 ("chip/pill/badge is the same if you squint ... theme unification is part of the goal" then "make it common css instead of component, thats fine. but make them look unified (not as much per usage css)"): shared CSS, not a JS component. New @hive/shared/pill.css defines two classes, `.hive-pill` (primary state chips) and `.hive-pill-sm` (secondary meta chips) — border/ border-radius/padding/font-size/letter-spacing (colour stays per-site, the meaningful semantic part). Every render call site across dashboard (swarm.js/core.js/builds.js) and agent (index.html/app.js) now carries one of the two shared classes directly, alongside its own existing semantic-colour modifier class. Second cut of this PR, per argus's approve + mara's follow-up review comment on the first cut: the first version instead enumerated every legacy classname (`.badge`, `.status-badge`, `.header-pill`, etc.) straight into pill.css's own selector groups so no call sites needed touching. Mara's correction: that just relocates the duplication rather than removing it, and the shared CSS shouldn't have to keep naming every consumer. This version does the real rename instead. Most visible consequence, unchanged from the first cut: dashboard's `.badge` family moves off its own shape (2px square corners, uppercase, tighter padding) onto the shared rounded-pill shape + agent's "sm" tier sizing. `npm run build` clean across all three packages; verified the compiled bundles carry the new classnames at every call site (dashboard JS, agent index.html + app.js), not just the source tree. Fixes #3053
105 lines
5.2 KiB
HTML
105 lines
5.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>hyperhive agent</title>
|
|
<link rel="icon" type="image/svg+xml" href="icon">
|
|
<link rel="stylesheet" href="static/colors.css">
|
|
<link rel="stylesheet" href="static/theme.css">
|
|
<link rel="stylesheet" href="static/agent.css">
|
|
</head>
|
|
<body class="agent-shell">
|
|
|
|
<!-- Fixed-overlay header — see docs/web-ui.md::Per-agent page
|
|
for the three-column layout (icon · main · pills). All asset
|
|
/ API hrefs are relative — see docs/web-ui.md::Per-agent
|
|
relative paths for the document-baseURI resolution model. -->
|
|
<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>
|
|
|
|
<!-- Hive identity line: "swarm / hive" label. Hidden until JS
|
|
populates it from /api/state (hive_name + swarm_name). -->
|
|
<div class="agent-header-row agent-hive-row">
|
|
<span class="agent-hive-label" hidden></span>
|
|
</div>
|
|
|
|
<div id="state-row" class="agent-state-row agent-header-row">
|
|
<span id="alive-badge" class="hive-pill status-badge status-loading" title="harness reachability">…</span>
|
|
<span id="state-badge" class="hive-pill state-badge state-loading">… booting</span>
|
|
<span id="model-chip" class="hive-pill-sm model-chip" hidden></span>
|
|
<span id="effort-chip" class="hive-pill-sm effort-chip" hidden></span>
|
|
<span id="ctx-badge" class="hive-pill-sm ctx-badge" hidden title="tokens used in the current context window"></span>
|
|
<span id="cost-badge" class="hive-pill-sm 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 + logout live inside
|
|
it — see docs/web-ui.md::Per-agent page (Overflow button)
|
|
for the rare-destructive-extra-click rationale. -->
|
|
<div class="agent-header-pills">
|
|
<button type="button" id="inbox-pill" class="hive-pill 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="todos-pill" class="hive-pill header-pill header-pill-todos" hidden
|
|
title="open todos flyout">
|
|
<span class="header-pill-icon" aria-hidden="true">📋</span>
|
|
<span class="header-pill-label">todos</span>
|
|
<span class="header-pill-count" id="todos-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 (inbox / todos flyouts) is a <hive-side-panel>
|
|
element (@hive/shared/side-panel.js) — the Panel singleton in
|
|
app.js creates + appends it to <body> lazily on first use, so
|
|
nothing needs to be pre-declared here. -->
|
|
|
|
<!-- 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>
|