From 9064d8fbd23afad92c3ebb5be06938306533f1c8 Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive.local>
Date: Sun, 4 Oct 2026 16:26:55 +0200
Subject: [PATCH] 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.
---
 .../src/pages/agents/AgentTermPreview.css     | 32 ++++++----------
 .../src/pages/agents/AgentTermPreview.tsx     | 38 +++++++------------
 2 files changed, 24 insertions(+), 46 deletions(-)

diff --git a/frontend/packages/swarm-ui/src/pages/agents/AgentTermPreview.css b/frontend/packages/swarm-ui/src/pages/agents/AgentTermPreview.css
index 396efc59..9fe8b1ae 100644
--- a/frontend/packages/swarm-ui/src/pages/agents/AgentTermPreview.css
+++ b/frontend/packages/swarm-ui/src/pages/agents/AgentTermPreview.css
@@ -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;
 }
diff --git a/frontend/packages/swarm-ui/src/pages/agents/AgentTermPreview.tsx b/frontend/packages/swarm-ui/src/pages/agents/AgentTermPreview.tsx
index 49c02c7d..38937363 100644
--- a/frontend/packages/swarm-ui/src/pages/agents/AgentTermPreview.tsx
+++ b/frontend/packages/swarm-ui/src/pages/agents/AgentTermPreview.tsx
@@ -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