swarm-ui: the state row offers reconnect when its stream closes, and says no report yet

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>
   );
 }