Watch
0
0
Fork
You've already forked hyperhive
0

swarm-ui: connection badge and expand trigger float inside the terminal preview

They sat in a toolbar row above the terminal box. They now float in
its top-left corner, next to the turn-state badges in the top-right,
and the toolbar row is gone. The full-tab mount keeps the connection
badge and, being the destination already, has no expand trigger.
This commit is contained in:
iris 2026-10-04 16:26:55 +02:00 • committed by mara
commit 9064d8fbd2
2 changed files with 24 additions and 46 deletions

View file

@ -8,20 +8,6 @@
margin-block-start: 1rem;
}
/* Holds the connection-status badge and the expand-to-fullscreen
trigger (absent from the `fullHeight` mount, which floats the status
badge inside the terminal instead). `margin-left: auto` targets the
expand trigger by its own class rather than `:last-child`, same
split-row intent `Shell.css`'s `.shell-header-actions` uses. */
.ui-agent-term-preview-toolbar {
display: flex;
align-items: center;
margin-block-end: 0.5rem;
}
.ui-agent-term-preview-expand {
margin-left: auto;
}
.ui-agent-term-preview-wrap.terminal-wrap {
max-height: 12em;
}
@ -30,11 +16,11 @@
`-full` modifier on the OUTER `.ui-agent-term-preview` root, not the
wrap) — self-contained flex chain, not dependent on the page around
it doing anything beyond giving this root a real height to fill (see
AgentTerminalPage.css). Column flex so the toolbar keeps its natural
height and the terminal-wrap below it takes the rest; `flex: 1` +
AgentTerminalPage.css). Column flex so the input row keeps its natural
height and the terminal-wrap above it takes the rest; `flex: 1` +
`min-height: 0` on the wrap (not `height: 100%`) is deliberate — a
flex item's `height` percentage doesn't account for a sibling
(the toolbar) already consuming space the way `flex: 1` does, and
(the input row) already consuming space the way `flex: 1` does, and
`min-height: 0` is what actually lets the item shrink below its
content's natural height so `.live.terminal`'s own `overflow-y: auto`
(terminal.css) scrolls instead of the whole column growing past its
@ -85,8 +71,9 @@
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;
always does). Tall enough for the expand trigger too: an interactive
badge keeps its 2.75em touch-target floor. */
padding-block-start: 3.4em;
}
/* Floating turn_state/agent_state/model/ctx/cost badge cluster —
@ -110,11 +97,14 @@
max-width: calc(100% - 0.8em);
}
/* Full-tab mount's connection badge — top-left floating twin of
/* Connection badge and expand trigger — top-left floating twin of
`.ui-agent-term-preview-header-badges` (top-right), same anchor. */
.ui-agent-term-preview-live {
.ui-agent-term-preview-controls {
position: absolute;
top: 0.4em;
left: 0.4em;
z-index: 1;
display: flex;
align-items: center;
gap: 0.25em;
}

View file

@ -175,37 +175,25 @@ export function AgentTermPreview({
(fullHeight ? " ui-agent-term-preview-full" : "")
}
>
{/* The full-tab mount has no toolbar row: the terminal takes the
whole page below the shell header, and the connection badge
floats inside it with the other badges (below). */}
{!fullHeight && (
<div class="ui-agent-term-preview-toolbar">
<Badge
class="ui-agent-term-preview-status"
tone={CONNECTION_TONE[connection]}
value={CONNECTION_LABEL[connection]}
/>
<Badge
class="ui-agent-term-preview-expand"
variant="quiet"
icon={<ExpandIcon />}
value="expand"
title={`open ${paths.label}'s terminal in its own tab`}
onClick={() => openTab({ href: paths.page, label: paths.label })}
/>
</div>
)}
<div class="terminal-wrap ui-agent-term-preview-wrap">
{/* Full-tab mount only: the connection badge floats in the
{/* The connection badge and the expand trigger float in the
terminal's top-left corner (the other badges own the
top-right), instead of sitting in a toolbar row above it. */}
{fullHeight && (
top-right). The full-tab mount is already the destination, so
it has no expand trigger. */}
<div class="ui-agent-term-preview-controls">
<Badge
class="ui-agent-term-preview-status ui-agent-term-preview-live"
tone={CONNECTION_TONE[connection]}
value={CONNECTION_LABEL[connection]}
/>
)}
{!fullHeight && (
<Badge
icon={<ExpandIcon />}
value="expand"
title={`open ${paths.label}'s terminal in its own tab`}
onClick={() => openTab({ href: paths.page, label: paths.label })}
/>
)}
</div>
{header && showHeaderBadges && (
<div class="ui-agent-term-preview-header-badges">
<Badge