From 10b8422d9330df247d05692d9ba2059df448b555 Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive.local>
Date: Sun, 25 Oct 2026 15:07:39 +0100
Subject: [PATCH] swarm-ui: the state row offers reconnect when its stream
 closes, and says no report yet

---
 docs/swarm/ui.md                              |  7 +--
 .../src/agent/detail/AgentStateRow.tsx        | 48 ++++++++++++-------
 2 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/docs/swarm/ui.md b/docs/swarm/ui.md
index 5b76da22..7786a906 100644
--- a/docs/swarm/ui.md
+++ b/docs/swarm/ui.md
@@ -52,9 +52,10 @@ The preview carries only the connection badge and **expand**, so it stays clear
 of the text. What the agent is doing shows in the details table above it, in
 the **state** row: the turn state (idle, thinking or compacting), a **paused**
 badge for a paused agent, and the tokens in its context and billed. The row
-reads "waiting for the agent's report…" until the first report arrives, since
-the agent sends one when its state changes and once a minute. The terminal's
-own tab keeps these badges, with the model, beside the connection badge.
+reads "no report yet" until the first report arrives, and for an agent that's
+offline. The agent sends a report when its state changes and once a minute. If
+the browser gives up on the stream, a **reconnect** badge opens it again. The
+terminal's own tab keeps these badges, with the model, beside the connection badge.
 
 On a terminal's own page (`/agents/<name>/terminal`, or a subagent's) the
 header has an **N running subagents** badge. It opens a list of the agent's
diff --git a/frontend/packages/swarm-ui/src/agent/detail/AgentStateRow.tsx b/frontend/packages/swarm-ui/src/agent/detail/AgentStateRow.tsx
index d11fcbf1..f691bc0f 100644
--- a/frontend/packages/swarm-ui/src/agent/detail/AgentStateRow.tsx
+++ b/frontend/packages/swarm-ui/src/agent/detail/AgentStateRow.tsx
@@ -3,7 +3,10 @@
 // terminal preview below the table carries no badges of its own (the full
 // terminal tab does), so this is where the panel says what the agent is doing.
 // Follows the agent's state stream, which announces on a change and once a
-// minute, so the row reads "waiting" until the first report lands.
+// minute: the row reads "no report yet" until the first report lands, and for
+// an agent that is offline and so never reports. When the browser gives up on
+// the stream, a **reconnect** badge opens it again, as the terminal's does.
+import { Badge } from "@hive/shared/badge.js";
 import {
   StateBadges,
   termPaths,
@@ -13,25 +16,34 @@ import { useSwarmAgentStateStream } from "../terminal/useSwarmAgentStateStream.j
 import "./AgentStateRow.css";
 
 export function AgentStateRow({ agent }: { agent: string }) {
-  const { header } = useSwarmAgentStateStream(termPaths(agent).state);
-  if (!header) {
-    return (
-      <span
-        class="ui-agent-state-waiting"
-        title="the agent reports its state when it changes, and once a minute"
-      >
-        waiting for the agent's report…
-      </span>
-    );
-  }
+  const { header, connection, reconnect } = useSwarmAgentStateStream(
+    termPaths(agent).state,
+  );
   return (
     <div class="ui-agent-state-row">
-      <StateBadges
-        header={header}
-        ctx={tokenTotal(header.ctx_usage)}
-        cost={tokenTotal(header.cost_usage)}
-        withModel={false}
-      />
+      {header ? (
+        <StateBadges
+          header={header}
+          ctx={tokenTotal(header.ctx_usage)}
+          cost={tokenTotal(header.cost_usage)}
+          withModel={false}
+        />
+      ) : (
+        <span
+          class="ui-agent-state-waiting"
+          title="the agent reports its state when it changes, and once a minute"
+        >
+          no report yet
+        </span>
+      )}
+      {connection === "closed" && (
+        <Badge
+          variant="quiet"
+          value="reconnect"
+          title={`follow ${agent}'s state again`}
+          onClick={reconnect}
+        />
+      )}
     </div>
   );
 }