swarm-ui: open an agent's details in a dialog from its terminal tab

The terminal page gets an agent badge (icon and name) that opens the agent's detail panel in a dialog over the terminal, without the terminal preview. The panel body and the actions on an agent (declare a wanted state, link an account, with their confirm and form dialogs) move out of the agent roster page into AgentDetail and useAgentActions, so the roster and the dialog share them. AgentIcon moves to its own file for the same reason.

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

@@ -0,0 +1,38 @@
+// <AgentIcon> — the agent's icon from swarm-controller's
+// `GET /api/agents/{name}/icon`, the same square and fallback as the hive
+// dashboard's container row: an agent with no icon (404) or an unreachable
+// controller shows the dimmed hyperhive mark instead of a broken image.
+// Always an `<img>`: the body is an agent-authored SVG, and only an image load
+// keeps its script from running.
+import { useState } from "preact/hooks";
+import "./AgentIcon.css";
+
+export function AgentIcon({
+  name,
+  small = false,
+}: {
+  name: string;
+  /** Badge-sized, for beside a line of text, rather than the card's square. */
+  small?: boolean;
+}) {
+  const [fallback, setFallback] = useState(false);
+  return (
+    <div
+      class={
+        "ui-agent-icon" +
+        (small ? " ui-agent-icon-small" : "") +
+        (fallback ? " ui-agent-icon-none" : "")
+      }
+    >
+      <img
+        alt=""
+        src={
+          fallback
+            ? "/favicon.svg"
+            : `/api/agents/${encodeURIComponent(name)}/icon`
+        }
+        onError={() => setFallback(true)}
+      />
+    </div>
+  );
+}