vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Activity

swarm-ui: floating turn-state/model/ctx/cost badges on the agent term preview

Browse source 
Header-bar parity for the swarm-level agent terminal, per mara's ruling
"dont make it a header though - make it floating elements on top of the
terminal". Adds useSwarmAgentStateStream (SSE consumer for
swarm-controller's GET /api/agents/{name}/state/stream) and renders a
small read-only Badge cluster absolutely positioned in
AgentTermPreview's terminal box corner, reusing the same anchor pattern
@hive/shared/terminal.css's .tail-pill already uses.

Shows turn_state always, agent_state only when it isn't the boring "up"
case, model (with resolved-model tooltip), and ctx/cost usage. No badge
renders until the first header event lands - the swarm queue's
agent-state subject is transition-only with no seed/replay, and no
swarm-level endpoint today can seed turn_state/model/ctx/cost
synchronously.

Vocabulary (state tones, token-total/format helpers) ported from
@hive/agent's Root.tsx/lib/format.ts rather than imported, matching the
existing "small helper, not worth a cross-package hop" call
useSwarmTermStream's own appendRow already made.

Verified by rendering the real component tree against a stubbed
EventSource and screenshotting the result - the badge cluster initially
overlapped the terminal's first row of text, fixed by giving this
preview's own .live.terminal extra top padding.
This commit is contained in:
iris 2026-09-18 17:30:10 +02:00
commit d9c8b7ca8f
3 changed files with 211 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

29
frontend/packages/swarm-ui/src/pages/agents/AgentTermPreview.css
View file

@ -29,4 +29,33 @@
.ui-agent-term-preview-wrap .live.terminal {
max-height: 12em;
box-sizing: border-box;
/* Extra top padding (base `.live.terminal` rule: `0.8em 1em 0.4em`) so
the floating badge cluster below has room to sit above the first
row's text instead of overlapping it — found by actually rendering
this: with the base padding, "thinking"/"model sonnet" sat directly
on top of the terminal's first line whenever content started right
at the top (a running preview scrolled to the newest rows almost
always does). */
padding-block-start: 2.4em;
}
/* Floating turn_state/agent_state/model/ctx/cost badge cluster —
positioned by `.terminal-wrap`'s own `position: relative`, same
anchor `@hive/shared/terminal.css`'s `.tail-pill` already uses, rather
than a second positioned ancestor of our own. Top-right corner: the
scroll-to-bottom `.tail-pill` (that same stylesheet) anchors
bottom-right, so the two overlays never compete for the same corner.
`flex-wrap` rather than a fixed width — a badge cluster this narrow
can still overflow the box at small viewport widths, and wrapping
beats clipping or shrinking the terminal underneath. */
.ui-agent-term-preview-header-badges {
position: absolute;
top: 0.4em;
right: 0.4em;
z-index: 1;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.25em;
max-width: calc(100% - 0.8em);
}