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/AgentTerminalPage.tsx

@@ -9,8 +9,11 @@
 // plain page reload should all re-open the tab instead of landing on a
 // page with no way back into the tab row. `useDynamicTabs().open()` is
 // idempotent (dedupes by href), so this is safe to call every mount.
-import { useEffect } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import type { RouteComponentProps } from "wouter-preact";
+import { Badge } from "@hive/shared/badge.js";
+import { AgentDetailDialog } from "./AgentDetailDialog.js";
+import { AgentIcon } from "./AgentIcon.js";
 import { AgentTermPreview, termPaths } from "./AgentTermPreview.js";
 import { useAgentFavicon } from "../../shell/useAgentFavicon.js";
 import { useDynamicTabs } from "../../shell/useDynamicTabs.js";
@@ -42,6 +45,11 @@ export function AgentTerminalPage({
     // instead of once per terminal `page`.
   }, [page]);
 
+  // The agent's details open in a dialog over the terminal, so reading or
+  // changing them never means leaving it. A subagent's terminal opens its
+  // agent's details: a subagent has none of its own.
+  const [detailOpen, setDetailOpen] = useState(false);
+
   return (
     <div class="ui-agent-terminal-page">
       <AgentTermPreview
@@ -49,6 +57,19 @@ export function AgentTerminalPage({
         subagent={subagent}
         fullHeight
         showHeaderBadges
+        leading={
+          <Badge
+            icon={<AgentIcon name={name} small />}
+            value={name}
+            title={`open ${name}'s details`}
+            onClick={() => setDetailOpen(true)}
+          />
+        }
+      />
+      <AgentDetailDialog
+        agent={name}
+        open={detailOpen}
+        onClose={() => setDetailOpen(false)}
       />
     </div>
   );