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; 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 { .ui-agent-term-preview-wrap.terminal-wrap {
max-height: 12em; max-height: 12em;
} }
@ -30,11 +16,11 @@
`-full` modifier on the OUTER `.ui-agent-term-preview` root, not the `-full` modifier on the OUTER `.ui-agent-term-preview` root, not the
wrap) — self-contained flex chain, not dependent on the page around wrap) — self-contained flex chain, not dependent on the page around
it doing anything beyond giving this root a real height to fill (see it doing anything beyond giving this root a real height to fill (see
AgentTerminalPage.css). Column flex so the toolbar keeps its natural AgentTerminalPage.css). Column flex so the input row keeps its natural
height and the terminal-wrap below it takes the rest; `flex: 1` + height and the terminal-wrap above it takes the rest; `flex: 1` +
`min-height: 0` on the wrap (not `height: 100%`) is deliberate — a `min-height: 0` on the wrap (not `height: 100%`) is deliberate — a
flex item's `height` percentage doesn't account for a sibling 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 `min-height: 0` is what actually lets the item shrink below its
content's natural height so `.live.terminal`'s own `overflow-y: auto` content's natural height so `.live.terminal`'s own `overflow-y: auto`
(terminal.css) scrolls instead of the whole column growing past its (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 this: with the base padding, "thinking"/"model sonnet" sat directly
on top of the terminal's first line whenever content started right on top of the terminal's first line whenever content started right
at the top (a running preview scrolled to the newest rows almost at the top (a running preview scrolled to the newest rows almost
always does). */ always does). Tall enough for the expand trigger too: an interactive
padding-block-start: 2.4em; badge keeps its 2.75em touch-target floor. */
padding-block-start: 3.4em;
} }
/* Floating turn_state/agent_state/model/ctx/cost badge cluster — /* Floating turn_state/agent_state/model/ctx/cost badge cluster —
@ -110,11 +97,14 @@
max-width: calc(100% - 0.8em); 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-header-badges` (top-right), same anchor. */
.ui-agent-term-preview-live { .ui-agent-term-preview-controls {
position: absolute; position: absolute;
top: 0.4em; top: 0.4em;
left: 0.4em; left: 0.4em;
z-index: 1; 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" : "") (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"> <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 terminal's top-left corner (the other badges own the
top-right), instead of sitting in a toolbar row above it. */} top-right). The full-tab mount is already the destination, so
{fullHeight && ( it has no expand trigger. */}
<div class="ui-agent-term-preview-controls">
<Badge <Badge
class="ui-agent-term-preview-status ui-agent-term-preview-live"
tone={CONNECTION_TONE[connection]} tone={CONNECTION_TONE[connection]}
value={CONNECTION_LABEL[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 && ( {header && showHeaderBadges && (
<div class="ui-agent-term-preview-header-badges"> <div class="ui-agent-term-preview-header-badges">
<Badge <Badge