swarm-ui: expand trigger on the right, connection badge as tall as it

The floating row over the terminal now spans its top edge: the state
badges (connection first, then the turn-state ones, which move over from
the top-right corner) on the left, the expand trigger on the right.
The connection badge takes the trigger's height. The row passes pointer
events through its empty middle.

frontend/packages/swarm-ui/src/pages/agents/AgentTermPreview.tsx

@@ -130,6 +130,60 @@ export function termPaths(agentName: string, subagent?: string): TermPaths {
   };
 }
 
+// Turn state, agent state, model, ctx and cost, as the badges beside the
+// connection one. Siblings only, no wrapper: they sit in the caller's row.
+function StateBadges({
+  header,
+  ctx,
+  cost,
+}: {
+  header: NonNullable<ReturnType<typeof useSwarmAgentStateStream>["header"]>;
+  ctx: number | null;
+  cost: number | null;
+}) {
+  return (
+    <>
+      <Badge
+        tone={TURN_STATE_TONE[header.turn_state] ?? "neutral"}
+        value={header.turn_state}
+      />
+      {/* Only the non-boring case gets a badge — a healthy running
+          agent (`agent_state: "up"`) doesn't need one for the
+          obvious default. In practice this only ever fires for
+          "paused": `hive-agent` can only honestly publish "up" or
+          "paused" on this subject (see `AgentStateMsg::agent_state`'s
+          own doc), never "offline"/"destroyed" — a stopped or
+          destroyed agent publishes nothing at all. */}
+      {header.agent_state !== "up" && (
+        <Badge tone="warning" value={header.agent_state} />
+      )}
+      <Badge
+        label="model"
+        value={header.model}
+        title={
+          header.resolved_model
+            ? `resolved to ${header.resolved_model}`
+            : undefined
+        }
+      />
+      {ctx !== null && (
+        <Badge
+          label="ctx"
+          value={fmtTokens(ctx)}
+          title="tokens used in the current context window"
+        />
+      )}
+      {cost !== null && (
+        <Badge
+          label="cost"
+          value={fmtTokens(cost)}
+          title="cumulative tokens billed across the last turn"
+        />
+      )}
+    </>
+  );
+}
+
 export function AgentTermPreview({
   agentName,
   subagent,
@@ -176,15 +230,21 @@ export function AgentTermPreview({
       }
     >
       <div class="terminal-wrap ui-agent-term-preview-wrap">
-        {/* The connection badge and the expand trigger float in the
-            terminal's top-left corner (the other badges own the
-            top-right). The full-tab mount is already the destination, so
+        {/* One floating row over the terminal's top edge: the state
+            badges (connection first) on the left, the expand trigger on
+            the right. The full-tab mount is already the destination, so
             it has no expand trigger. */}
         <div class="ui-agent-term-preview-controls">
-          <Badge
-            tone={CONNECTION_TONE[connection]}
-            value={CONNECTION_LABEL[connection]}
-          />
+          <div class="ui-agent-term-preview-header-badges">
+            <Badge
+              class="ui-agent-term-preview-live"
+              tone={CONNECTION_TONE[connection]}
+              value={CONNECTION_LABEL[connection]}
+            />
+            {header && showHeaderBadges && (
+              <StateBadges header={header} ctx={ctx} cost={cost} />
+            )}
+          </div>
           {!fullHeight && (
             <Badge
               icon={<ExpandIcon />}
@@ -194,47 +254,6 @@ export function AgentTermPreview({
             />
           )}
         </div>
-        {header && showHeaderBadges && (
-          <div class="ui-agent-term-preview-header-badges">
-            <Badge
-              tone={TURN_STATE_TONE[header.turn_state] ?? "neutral"}
-              value={header.turn_state}
-            />
-            {/* Only the non-boring case gets a badge — a healthy running
-                agent (`agent_state: "up"`) doesn't need one for the
-                obvious default. In practice this only ever fires for
-                "paused": `hive-agent` can only honestly publish "up" or
-                "paused" on this subject (see `AgentStateMsg::agent_state`'s
-                own doc), never "offline"/"destroyed" — a stopped or
-                destroyed agent publishes nothing at all. */}
-            {header.agent_state !== "up" && (
-              <Badge tone="warning" value={header.agent_state} />
-            )}
-            <Badge
-              label="model"
-              value={header.model}
-              title={
-                header.resolved_model
-                  ? `resolved to ${header.resolved_model}`
-                  : undefined
-              }
-            />
-            {ctx !== null && (
-              <Badge
-                label="ctx"
-                value={fmtTokens(ctx)}
-                title="tokens used in the current context window"
-              />
-            )}
-            {cost !== null && (
-              <Badge
-                label="cost"
-                value={fmtTokens(cost)}
-                title="cumulative tokens billed across the last turn"
-              />
-            )}
-          </div>
-        )}
         <div class="live terminal" ref={logRef} onScroll={handleScroll}>
           {rows.length === 0 ? (
             <div class="row note">