adfb0f9e02
Per mara's screenshot report (agent-terminal icons not aligned in the
first column) — and her explicit follow-up steer on the first version of
this fix: 'dont do it by offsets at all, it should be part of the layout
that they align.'
Root cause traced first, not guessed: .row-glyph relied on inheriting
text-indent: -1.4em from .live .row to paint its glyph in the reserved
prefix slot; details.row > summary separately reset text-indent: 0 for
its own hanging-caret needs, which also zeroed the inherited value for
the icon nested inside it (indent inherits by computed value, not by
rule). Two independently-computed offsets that had to agree by hand,
and silently didn't.
Replaced the whole offset scheme with a real structural fix: every row
is a 2-column CSS grid (icon column, width from one shared
--row-icon-col custom property, then content column), and a details
row grids its own <summary> with the exact same grid-template-columns
value instead of griding itself (so its <pre> body still stacks full
width below, not squeezed into column 2). Icon and content are placed
by explicit grid-column, not auto-placement inference, so an icon-less
row's lone child still lands in the content column. .row-content is a
new wrapper class (Row.tsx, terminal.js's row()/mutableRow()/
placeholder()) giving that content an element the grid can target by
class - a DocumentFragment (what linkify() returns) doesn't persist as
a node once appended, so without an explicit wrapper there was nothing
for the grid to place.
Caught and fixed a second real bug while building this for real (not
just reasoning about the CSS): the first draft's details.row { display:
block } had lower specificity than .live .row's display: grid and never
actually applied, squeezing <summary> into the row's own 1.4em icon
column and wrapping its text one character per line. Needed
.live details.row to out-specify it.
Verified with a headless-chromium render of all 6 row shapes (flat
icon / flat icon-less / flat markdown-body / details icon / details
icon-less / a long-wrapping flat row) - all align and wrap correctly.
Also verified via the earlier Range.getBoundingClientRect() measurement
(glyph paint position, not just the element's own box): diff 0.00 for
both this and the previous fix, but only this one is structural rather
than two numbers that happen to still agree today.
2.9 KiB
Per-agent terminal: row taxonomy (as built)
The per-agent web UI's live pane renders one row per TermMsg
(hive-agent/src/term_msg.rs): {icon?, level: debug|info|warn|error, summary, body?, body_format?: markdown|diff, coalesce_key?}. Classification
(icon, summary text, whether a tool call gets an expandable body) happens
server-side, once — term_msg.rs + stream_enrich.rs — and both
GET /api/events/history and GET /api/events/stream serve it identically
as TermEnvelope { ts, seq?, msgs: TermMsg[] } frames
(hive-agent/src/web_ui/stream.rs).
The frontend renders a TermMsg close to as-is
(frontend/packages/agent/src/components/Row.tsx): level picks the
CSS colour (terminal.css's .live .level-*), an empty summary +
markdown body renders as a flat row with just the body (assistant
text), and any other bodied row is an expandable <details>, opened by
default according to the operator's expand-tool-output preference
(getExpandDetailsPref()) — uniformly, no per-tool override. There's no
separate client-side row model or classification step.
Layout
Every row is its own 2-column grid — icon column (.row-glyph, width
from the --row-icon-col custom property) then content column
(.row-content, or a markdown body's own .md class) — so an icon's
left edge lands in the same place regardless of row kind. A <details>
row grids its <summary> instead of itself (so the <pre> body below
can stack full-width), using the exact same grid-template-columns value,
with the disclosure caret leading the summary text rather than the icon.
One shared column definition, not two independently-computed offsets
kept in sync by hand — see terminal.css's own comment on the incident
that motivated the change.
Levels
| Level | Colour | Roughly |
|---|---|---|
debug |
muted | thinking, coalesced ticks, ambient harness chatter |
info |
default fg | turn start/ok, assistant text, tool calls + results |
warn |
amber, left rule | stderr, an unrecognised event shape, API retries |
error |
red, left rule | turn failed, a tool result with is_error: true |
The settings menu's "hide debug output" toggle (getHideDebugPref(),
@hive/shared/prefs.js) skips debug-level rows entirely rather than
muting them further — client-side only, same live-read-no-reload shape
as the expand-tool-output preference above.
Per-tool icon + summary formatting (what a Read/Edit/send call's row
actually says) lives in stream_enrich.rs's fmt_tool_use() family —
read that when you need the specifics, this doc doesn't duplicate it.
Markdown
frontend/packages/agent/src/lib/markdown.ts's renderMarkdown() runs
marked.parse() through DOMPurify into a <div class="md">. Applied to
any TermMsg with body_format: "markdown".
Dashboard side (not covered here)
The main dashboard's message-flow pane is a different shape: broker
messages render as .msgrow grid lines, not agent-terminal rows.