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;
|
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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue