66df552f68
The agent terminal tab now takes the whole window except the header bar, full width and height, instead of sitting in the padded content column. The connection badge floats inside the terminal's top-left corner and the toolbar row above it is gone on this route.
120 lines
4.9 KiB
CSS
120 lines
4.9 KiB
CSS
/* <AgentTermPreview> — a *preview*, not the full terminal: a much
|
|
shorter cap than @hive/shared/terminal.css's own 32em default so it
|
|
reads as "peek at what's happening" inside the detail panel rather
|
|
than competing with the panel's own fields for vertical space. */
|
|
@import "@hive/shared/terminal.css";
|
|
|
|
.ui-agent-term-preview {
|
|
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;
|
|
}
|
|
|
|
/* `AgentTerminalPage`'s full-tab mount (`fullHeight` prop → the
|
|
`-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` +
|
|
`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
|
|
`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
|
|
container. `!important`-free — the `max-height: none` overrides
|
|
below already carry one more class in the selector than the
|
|
un-modified rules above (`.ui-agent-term-preview-full` prefixing
|
|
each), so they're strictly more specific and win regardless of
|
|
source order. */
|
|
.ui-agent-term-preview-full {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-block-start: 0;
|
|
}
|
|
.ui-agent-term-preview-full .ui-agent-term-preview-wrap.terminal-wrap {
|
|
max-height: none;
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
.ui-agent-term-preview-full .ui-agent-term-preview-wrap .live.terminal {
|
|
max-height: none;
|
|
height: 100%;
|
|
}
|
|
/* Flush to the header bar and the viewport sides; the input row below
|
|
gets its own padding so it doesn't touch the screen edge. */
|
|
.ui-agent-term-preview-full .ui-agent-term-preview-wrap.terminal-wrap {
|
|
margin: 0;
|
|
}
|
|
.ui-agent-term-preview-full .ui-agent-input {
|
|
padding: 0.4em 0.75em 0.6em;
|
|
}
|
|
|
|
/* `box-sizing: border-box`, not the browser's default `content-box` —
|
|
`.live.terminal`'s own `padding: 0.8em 1em 0.4em` (terminal.css) is
|
|
otherwise added ON TOP of this `max-height`, so the box renders
|
|
~1.2em taller than intended and spills past `.terminal-wrap`'s own
|
|
`max-height` above (which has no padding of its own to inflate it)
|
|
since `.terminal-wrap` has no `overflow: hidden` to catch the excess
|
|
— mara: "the terminal text bleeds out at the bottom of the terminal".
|
|
Confirmed via measured `clientHeight` (194px vs the wrap's 177px, a
|
|
~17px gap matching 1.2em at this font size) before this fix, not
|
|
just reasoning about the CSS. */
|
|
.ui-agent-term-preview-wrap .live.terminal {
|
|
max-height: 12em;
|
|
box-sizing: border-box;
|
|
/* Extra top padding (base `.live.terminal` rule: `0.8em 1em 0.4em`) so
|
|
the floating badge cluster below has room to sit above the first
|
|
row's text instead of overlapping it — found by actually rendering
|
|
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;
|
|
}
|
|
|
|
/* Floating turn_state/agent_state/model/ctx/cost badge cluster —
|
|
positioned by `.terminal-wrap`'s own `position: relative`, same
|
|
anchor `@hive/shared/terminal.css`'s `.tail-pill` already uses, rather
|
|
than a second positioned ancestor of our own. Top-right corner: the
|
|
scroll-to-bottom `.tail-pill` (that same stylesheet) anchors
|
|
bottom-right, so the two overlays never compete for the same corner.
|
|
`flex-wrap` rather than a fixed width — a badge cluster this narrow
|
|
can still overflow the box at small viewport widths, and wrapping
|
|
beats clipping or shrinking the terminal underneath. */
|
|
.ui-agent-term-preview-header-badges {
|
|
position: absolute;
|
|
top: 0.4em;
|
|
right: 0.4em;
|
|
z-index: 1;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
gap: 0.25em;
|
|
max-width: calc(100% - 0.8em);
|
|
}
|
|
|
|
/* Full-tab mount's connection badge — top-left floating twin of
|
|
`.ui-agent-term-preview-header-badges` (top-right), same anchor. */
|
|
.ui-agent-term-preview-live {
|
|
position: absolute;
|
|
top: 0.4em;
|
|
left: 0.4em;
|
|
z-index: 1;
|
|
}
|