agent: cutover — index.html now serves the Preact rewrite, app.js deleted
mara: 'i merged this without realizing you still did not delete the old code. pls follow up with ripping out the old code.' - index.html: dropped the old static header/main/composer/overflow- menu markup and app.js's <script> tag. Now just <div id=preact-root> + <script src=static/main.js>. main.css's <link> lands after agent.css's — cascade order argus flagged matters for LoginFlow's .login-card / MetaNav's popover to win against agent.css's legacy rules, confirmed explicitly rather than assumed at this exact step. - build.mjs: app.js dropped from the esbuild entryPoints (stats.js keeps its own bundle, unaffected — separate page, separate script). - frontend/packages/agent/src/app.js deleted (1717 lines). screen.html has its own inline <script>, untouched — never depended on app.js. - docs/web-ui/agent.md: rewrote the Header section to describe the real Preact component tree and the badges+pills-together layout (deferred from the earlier commits on this PR specifically so it wouldn't describe a hybrid state — this is that promised follow-up). Touched up the one other app.js-specific mention in the endpoints section. Left the Main/composer/side-panel/live-view/slash-command sections alone — behavior there is unchanged, verified faithfully ported throughout this PR's earlier commits. Verified against the REAL dist/index.html (not the dev-preview harness) — a scratch mock server serving the actual built output end-to-end, screenshotted clean. tsc --noEmit clean, build clean, both pre-push lints clean.
This commit is contained in:
iris
parent
7897b6af7f
commit
fa2b360e74
5 changed files with 124 additions and 1936 deletions
|
|
@ -10,120 +10,98 @@ panel for flyouts and long content.
|
|||
|
||||
## Header
|
||||
|
||||
Preact component tree (`Header.tsx` + `StatusChips.tsx` +
|
||||
`MetaNav.tsx` + `OverflowMenu.tsx` + `HeaderPill.tsx`, wired together
|
||||
in `Root.tsx`) — see `frontend/packages/agent/src/components/`. This
|
||||
section describes the rendered result, not the DOM ids the pre-Preact
|
||||
page used (there are none any more — every element is component
|
||||
output, not something a selector reaches by id).
|
||||
|
||||
**Fixed-overlay header** (`<header class="agent-header">`): frosted
|
||||
glass — `backdrop-filter: blur` lets scrolled terminal rows show
|
||||
through. Three flex columns:
|
||||
through. Measures its own rendered height via `ResizeObserver`
|
||||
(`Header.tsx`) and writes it to a CSS custom property the content
|
||||
below reads for its offset — a fixed `6em` guess used to be baked into
|
||||
`agent.css`, which silently broke (content overlapping the header) the
|
||||
moment any row of badges/pills wrapped onto an extra line at some
|
||||
viewport width; measuring instead of guessing closes that bug class
|
||||
structurally rather than for one specific trigger. Two columns:
|
||||
|
||||
- **Agent icon** (`<img class="agent-icon">`): fixed-size square
|
||||
identity anchor — `width: 5em; height: 5em` with explicit pixel
|
||||
sizing so the `<img>`'s intrinsic (large) dimensions don't push
|
||||
the parent flex container open via `align-items: stretch`-driven
|
||||
height feedback. 5em ≈ header content area (header `min-height: 6em`
|
||||
minus `2 × 0.5em` padding). `align-self: flex-start` keeps the
|
||||
icon stuck to the top so a state-row line-wrap doesn't drag it
|
||||
down with it. Falls back to the dimmed hyperhive mark on load
|
||||
error.
|
||||
- **Main column** (`.agent-header-main`): two rows.
|
||||
- Row 1 (`.agent-header-title-row`): title (`<h2 id="title">`) +
|
||||
meta-nav (`<nav id="meta-links">`). Meta-nav renders
|
||||
backend-supplied `StateSnapshot.links` as icon-only anchors — always
|
||||
`📊 stats` (`kind = Container`); `🖥 screen` when VNC is enabled;
|
||||
`⬡ forge` (profile) + `↳ config` (agent-configs mirror) when the
|
||||
agent has a forge account; any `hyperhive.dashboardLinks` extras
|
||||
(`kind = External`). A `↑ dashboard` link is prepended by the JS
|
||||
so the host dashboard is one click away. Links come from
|
||||
`StateSnapshot.links` (served by `GET /api/state`); the same set
|
||||
also appears in `DashboardState.links` (`GET /api/dashboard-state`)
|
||||
for the dashboard card's icon strip. Both are produced by
|
||||
`agent_links()` in hive-ag3nt — the single source of truth.
|
||||
Each `AgentLink.kind` resolves
|
||||
differently in the frontend: `Container` → same-origin path
|
||||
(the agent page is itself container-local); `Forge` →
|
||||
`state.forge_public_url + url` (sourced from
|
||||
`services.hyperhive.forge.publicUrl`), and the link is omitted
|
||||
entirely when that's unset — never guessed from `<host>:3000`;
|
||||
`External` → already absolute.
|
||||
All anchors are built via `el()` — agent-declared icon /
|
||||
label / url strings never reach `innerHTML` (XSS-safe by
|
||||
construction).
|
||||
- Row 2 (`.agent-state-row`): alive badge + state badge + model chip
|
||||
+ ctx badge + cost badge + last-turn chip + cancel button.
|
||||
- Alive badge: `● alive` (green) / `⊘ rate limited` (red) /
|
||||
`◌ needs login` / `◌ logging in` / `○ offline` / `… connecting`.
|
||||
Driven by `LiveEvent::StatusChanged`.
|
||||
- State badge: `💤 idle` / `🧠 thinking` / `📦 compacting` /
|
||||
`○ offline` / `… booting` + age suffix. Driven by
|
||||
`LiveEvent::TurnStateChanged ({ state, since_unix })`.
|
||||
- Model chip: `model · <name>`. Driven by `LiveEvent::ModelChanged`.
|
||||
- Ctx badge: `ctx · 142k` — last inference's prompt size.
|
||||
Tooltip shows % of window when `context_window_tokens` is known.
|
||||
- Cost badge: `cost · 1.3M` — cumulative tokens billed across every
|
||||
inference in the last turn (tool-heavy turns rebill the cached
|
||||
prefix per call — cost signal, not size signal).
|
||||
- Both driven by `LiveEvent::TokenUsageChanged { ctx, cost }` at
|
||||
turn-end.
|
||||
- `■ cancel turn` (visible while thinking) → `POST /api/cancel`.
|
||||
- **Right cluster** (`.agent-header-pills`): flyout pills + overflow.
|
||||
- **Inbox pill** (`📬 inbox · N`): hidden when empty; click opens
|
||||
the inbox flyout in the side panel.
|
||||
- **Todos pill** (`📋 todos · N`): hidden when empty; click opens
|
||||
the todos flyout — see the todos-flyout paragraph below
|
||||
(`GET /api/todos`, refreshed on cold load + every `turn_end`).
|
||||
- **Overflow button** (`⋯`): always visible. Opens a frosted popover
|
||||
(`#overflow-menu`, positioned outside the header to escape any
|
||||
stacking context) with five management rows followed by a model
|
||||
quick-picker section: `↑ dashboard` (link), `↻ rebuild container`
|
||||
(POST confirm, same action as the dashboard R3BU1LD button),
|
||||
`↻ new claude session` (POST confirm → `POST /api/new-session`;
|
||||
next turn drops `--continue`), `🔓 logout` (POST confirm → `POST
|
||||
/api/logout`; SIGINTs any in-flight turn, wipes OAuth credential
|
||||
files, flips the agent to `needs_login` — session history
|
||||
preserved), and `⏸ pause agent` / `▶ resume agent` (POST confirm →
|
||||
hive-c0re's `/api/pause/<name>` / `/api/resume/<name>` — the same
|
||||
endpoints the dashboard's own `<hive-agent-menu>` uses, since
|
||||
pausing is a hive-c0re-owned write this unprivileged process can't
|
||||
make directly). The label + target endpoint track `state.paused`
|
||||
(this agent's own `/api/state`, a direct stat of the harness's
|
||||
local pause marker — see `docs/persistence.md`), refreshed on every
|
||||
snapshot so a pause/resume triggered from the *dashboard* while
|
||||
this page is open doesn't leave the menu item showing the wrong
|
||||
action. All destructive actions require one extra click to
|
||||
acknowledge — rare ops shouldn't live in the primary state strip.
|
||||
Below a separator, a **model quick-picker** section labelled
|
||||
`model` renders one button per model in the operator-configured
|
||||
list. The list is driven by `state.available_models` (sourced from
|
||||
the `HIVE_AVAILABLE_MODELS` env var, injected by the
|
||||
`services.hyperhive.availableModels` NixOS option; defaults to
|
||||
`["haiku", "sonnet", "opus"]` when unset). Well-known aliases get
|
||||
a parenthetical description (`haiku (fast)`, `sonnet (balanced)`,
|
||||
`opus (powerful)`); operator-declared custom names show as-is.
|
||||
Clicking a button POSTs `/api/model` with the alias (same path as
|
||||
the `/model <name>` slash command). The button for the
|
||||
currently-active model is highlighted via the `active` class;
|
||||
`renderModelChip` keeps the picker state in sync with live
|
||||
`model_changed` events so it stays accurate when the model is
|
||||
changed from another session. Clicking the already-active model
|
||||
closes the menu without an extra POST.
|
||||
A second separator + **effort quick-picker** section labelled
|
||||
`effort` appears when the backend declares effort levels in
|
||||
`state.available_efforts`. One button per level (e.g. `low`,
|
||||
`medium`, `high`, `xhigh`, `max`); clicking POSTs `/api/effort` (same endpoint as
|
||||
the `/effort <level>` slash command). The active level's button is
|
||||
highlighted; `renderEffortChip` keeps the picker in sync with
|
||||
`StateSnapshot.effort` from the cold-load snapshot.
|
||||
The popover's display rules are scoped to `:not([hidden])` so the
|
||||
`[hidden]` HTML attribute's UA `display: none` isn't overridden by
|
||||
the author CSS's `display: flex` — the popover stays hidden until
|
||||
JS removes the attribute.
|
||||
height feedback. Falls back to the dimmed hyperhive mark
|
||||
(`/favicon.svg`) on load error (`/icon` 404s when the agent has no
|
||||
`hyperhive.icon` override — there is no server-side default image).
|
||||
- **Main column** (`.agent-header-main`, `Header.tsx`): two rows —
|
||||
title (`◆ <label> ◆`) and, when set, the "swarm / hive" identity
|
||||
line. Nothing else lives here; both rows are short, fixed-shape text
|
||||
that doesn't wrap in practice, so this column's height stays stable
|
||||
regardless of how many badges or pills are showing (a design
|
||||
correction mid-review — the first pass put the variable-width
|
||||
content here instead, which is exactly the kind of thing the
|
||||
`ResizeObserver` measurement above exists to catch even when a
|
||||
layout choice reintroduces it).
|
||||
- **Pills cluster** (`.agent-header-pills`, right-aligned): status
|
||||
badges (`StatusChips.tsx`) and flyout triggers together in one row —
|
||||
a deliberate choice (not the historical default) so the header reads
|
||||
as one identity zone + one status/actions zone rather than several
|
||||
separate clusters:
|
||||
- **Alive badge**: `● alive` (green) / `⊘ rate limited` (red) /
|
||||
`◌ needs login` / `◌ logging in` / `○ offline` / `… connecting`.
|
||||
- **State badge**: `💤 idle` / `🧠 thinking` / `📦 compacting` /
|
||||
`○ offline` / `… booting` + age suffix.
|
||||
- **Model badge** (`model · <name> ▾`): a real picker — click opens
|
||||
a `Dropdown` of `state.available_models`, selecting one POSTs
|
||||
`/api/model` immediately (same endpoint the `/model <name>` slash
|
||||
command uses). No longer buried in the overflow menu — the design
|
||||
guide's own named anti-example (control disconnected from
|
||||
display) this rewrite exists to fix.
|
||||
- **Effort badge** (`effort · <level> ▾`): same shape, `/api/effort`,
|
||||
shown when `state.available_efforts` is non-empty.
|
||||
- **Ctx / cost badges**: `ctx · 142k` (last inference's prompt size,
|
||||
tooltip shows % of context window) / `cost · 1.3M` (cumulative
|
||||
tokens billed across every inference in the last turn).
|
||||
- **Pause badge** (`⏸ pause` / `▶ resume`): toggles via the same
|
||||
hive-c0re-owned `/api/pause/<name>` / `/api/resume/<name>`
|
||||
endpoints the dashboard uses (pausing needs a write this
|
||||
unprivileged process can't make directly).
|
||||
- **Inbox / todos pills** (`📬 inbox · N` / `📋 todos · N`): hidden
|
||||
when empty; click opens the matching flyout in the side panel.
|
||||
- **Links badge** (`🔗`): opens a popover listing this agent's
|
||||
`agent_links()`-sourced navigation (stats, screen when VNC is
|
||||
enabled, forge profile + config-repo mirror when the agent has a
|
||||
forge account, any `hyperhive.dashboardLinks` extras) as real
|
||||
`<a>` elements — not a `Dropdown`-style command list, so
|
||||
ctrl/middle-click and "copy link address" keep working. Each
|
||||
`AgentLink.kind` resolves differently: `container` → same-origin
|
||||
path; `forge` → `state.forge_public_url + url`, and the link is
|
||||
dropped entirely when that's unset (never guessed from
|
||||
`<host>:3000`); `external` → already absolute. Same source
|
||||
(`GET /api/state`'s `links` field) also feeds
|
||||
`DashboardState.links` for the dashboard card's icon strip —
|
||||
`agent_links()` in hive-agent is the single source of truth for
|
||||
both.
|
||||
- **Overflow badge** (`⋯`): a `Dropdown` with two rows —
|
||||
`↑ dashboard` (link) and `↻ rebuild container` (select-twice
|
||||
confirm, same action as the dashboard R3BU1LD button). Everything
|
||||
else that used to live here (model/effort pickers, new-session,
|
||||
logout) has a better home now: pickers are real badges above, and
|
||||
`/new-session` / `/logout` are typed slash commands with their own
|
||||
type-twice confirm (see below) — a modal doesn't fit a text-input
|
||||
flow, and burying rare-but-important actions in one flat menu was
|
||||
the design guide's own named anti-example.
|
||||
- No header cancel-turn button any more — `/cancel` (slash command,
|
||||
below) is the only path; the turn-loop state badge already shows
|
||||
`thinking` as the discoverability cue.
|
||||
|
||||
`/api/state` is fetched once on cold load (+ while
|
||||
`status === 'needs_login_in_progress'`); all other updates arrive via
|
||||
SSE. Snapshot includes `context_window_tokens` for the ctx badge
|
||||
tooltip, and `qualified_label` — the hive-qualified agent name
|
||||
(`name@domain` form when `HYPERHIVE_HIVE_DOMAIN` is set, otherwise
|
||||
just `name`). The frontend uses `qualified_label` to set the browser
|
||||
tab title so two tabs from different hives are distinguishable; the
|
||||
header `<h2 id="title">` stays short.
|
||||
Values throughout come from `GET /api/state`'s cold-load snapshot,
|
||||
kept in sync afterwards by the SSE stream (see Live view below) —
|
||||
`context_window_tokens` for the ctx badge tooltip, `qualified_label`
|
||||
(the hive-qualified `name@domain` form, used for the browser tab title
|
||||
so two tabs from different hives are distinguishable; the header's own
|
||||
`◆ <label> ◆` stays short).
|
||||
|
||||
## Main content
|
||||
|
||||
|
|
@ -344,8 +322,9 @@ shaped).
|
|||
error. Missing files (already logged out) are treated as
|
||||
idempotent.
|
||||
- `GET /api/state` — cold-load snapshot (`StateSnapshot`) consumed by
|
||||
`app.js` on page load and while `status === 'needs_login_in_progress'`.
|
||||
Includes `turn_state`, `context_window_tokens`, `qualified_label`,
|
||||
the frontend (`useAgentState.ts`) on page load and, on a poll, while
|
||||
`status === 'needs_login_in_progress'`. Includes `turn_state`,
|
||||
`context_window_tokens`, `qualified_label`,
|
||||
`available_models`, `effort`, `available_efforts`, `links`, and
|
||||
other fields described inline throughout this document. All
|
||||
subsequent state updates arrive via SSE.
|
||||
|
|
|
|||
Loading…
Reference in a new issue