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:
parent
a0b1846006
commit
9064d8fbd2
2 changed files with 24 additions and 46 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue