From 7f597f5c43f064b116a73adfc73ebf31a416ed97 Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive.local>
Date: Sun, 4 Oct 2026 16:36:38 +0200
Subject: [PATCH] swarm-ui: size every preview badge like the expand trigger,
 make room for two rows

All badges in the floating row take the interactive 2.75em height so the
state badges match live and expand. The embedded preview wraps them onto a
second row in the narrow details panel, so its top padding now fits two
rows (and the preview cap grows to match); the full tab keeps one row.
---
 .../src/pages/agents/AgentTermPreview.css      | 18 ++++++++++--------
 .../src/pages/agents/AgentTermPreview.tsx      |  1 -
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/frontend/packages/swarm-ui/src/pages/agents/AgentTermPreview.css b/frontend/packages/swarm-ui/src/pages/agents/AgentTermPreview.css
index 12a07866..d46e86bc 100644
--- a/frontend/packages/swarm-ui/src/pages/agents/AgentTermPreview.css
+++ b/frontend/packages/swarm-ui/src/pages/agents/AgentTermPreview.css
@@ -9,7 +9,7 @@
 }
 
 .ui-agent-term-preview-wrap.terminal-wrap {
-  max-height: 12em;
+  max-height: 18em;
 }
 
 /* `AgentTerminalPage`'s full-tab mount (`fullHeight` prop → the
@@ -42,6 +42,8 @@
 .ui-agent-term-preview-full .ui-agent-term-preview-wrap .live.terminal {
   max-height: none;
   height: 100%;
+  /* One badge row: the full tab is wide enough that the badges never wrap. */
+  padding-block-start: 3.4em;
 }
 /* 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. */
@@ -63,7 +65,7 @@
    ~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;
+  max-height: 18em;
   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
@@ -71,9 +73,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). Tall enough for the expand trigger too: an interactive
-     badge keeps its 2.75em touch-target floor. */
-  padding-block-start: 3.4em;
+     always does). Sized for two badge rows, since the badges wrap in the
+     narrow details panel; each keeps the 2.75em touch-target floor. */
+  padding-block-start: 7.4em;
 }
 
 /* The floating row over the terminal's top edge: state badges (connection
@@ -108,8 +110,8 @@
   min-width: 0;
 }
 
-/* Same height as the expand trigger beside it, which keeps an interactive
-   badge's 2.75em touch-target floor. */
-.ui-agent-term-preview-live {
+/* Every badge in the row the same height as the expand trigger, which
+   keeps an interactive badge's 2.75em touch-target floor. */
+.ui-agent-term-preview-controls .ui-badge {
   min-height: 2.75em;
 }
diff --git a/frontend/packages/swarm-ui/src/pages/agents/AgentTermPreview.tsx b/frontend/packages/swarm-ui/src/pages/agents/AgentTermPreview.tsx
index 168f140f..0fc95b7f 100644
--- a/frontend/packages/swarm-ui/src/pages/agents/AgentTermPreview.tsx
+++ b/frontend/packages/swarm-ui/src/pages/agents/AgentTermPreview.tsx
@@ -237,7 +237,6 @@ export function AgentTermPreview({
         <div class="ui-agent-term-preview-controls">
           <div class="ui-agent-term-preview-header-badges">
             <Badge
-              class="ui-agent-term-preview-live"
               tone={CONNECTION_TONE[connection]}
               value={CONNECTION_LABEL[connection]}
             />