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

@@ -0,0 +1,125 @@
+// <AgentDetail> — one agent's details: its status, wanted state, hive, config
+// PR, inference settings and linked accounts, plus the actions on them. The
+// body of the detail panel on `/agents` (where `withTerminal` adds the live
+// terminal and subagents below it) and of the detail dialog on a terminal
+// page (which is already beside the terminal, so omits it).
+//
+// Takes the agent's *live* row and the shared `AgentActions`, so a state
+// change or a link made here shows wherever else the same row is drawn.
+import { Badge } from "@hive/shared/badge.js";
+import { RelativeTime } from "../../ui/relative-time/RelativeTime.js";
+import type { AgentActions } from "./AgentActions.js";
+import { AgentInference } from "./AgentInference.js";
+import { AgentTermPreview } from "./AgentTermPreview.js";
+import { FRESHNESS, type AgentRow } from "./AgentTypes.js";
+import { LinkAccountMenu } from "./LinkAccountMenu.js";
+import { LinkedAccounts } from "./LinkedAccounts.js";
+import { SubagentTerms } from "./SubagentTerms.js";
+import { WantedMenu } from "./WantedMenu.js";
+import "./AgentDetail.css";
+
+export function AgentDetail({
+  row,
+  actions,
+  withTerminal = false,
+}: {
+  row: AgentRow;
+  actions: AgentActions;
+  withTerminal?: boolean;
+}) {
+  const { tone, label } = FRESHNESS[row.freshness];
+  return (
+    <div class="ui-agent-detail">
+      <dl class="ui-agent-detail-fields">
+        <dt>status</dt>
+        <dd>
+          <Badge
+            tone={tone}
+            value={
+              <>
+                {label}
+                {row.last_seen_unix !== null ? (
+                  <>
+                    {" "}
+                    (<RelativeTime epochMs={row.last_seen_unix * 1000} />)
+                  </>
+                ) : null}
+              </>
+            }
+          />
+        </dd>
+        <dt>message</dt>
+        <dd>{row.snapshot?.status_text ?? "—"}</dd>
+        <dt>wanted</dt>
+        <dd>
+          {/* Full menu (destroy included) — mara: "destroy is already
+              available via wanted state", no separate button needed. */}
+          <WantedMenu
+            row={row}
+            pending={actions.pendingAgents.has(row.name)}
+            onSelectUp={actions.selectUp}
+            onSelectOffline={actions.selectOffline}
+            onSelectPaused={actions.selectPaused}
+            onDestroy={actions.requestDestroy}
+          />
+        </dd>
+        <dt>hive</dt>
+        <dd>{row.hive ?? "—"}</dd>
+        <dt>config PR</dt>
+        <dd>
+          {row.config_pr ? (
+            <Badge
+              tone="warning"
+              value={
+                row.config_pr.html_url ? (
+                  <a
+                    href={row.config_pr.html_url}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    #{row.config_pr.pr_number}
+                  </a>
+                ) : (
+                  `#${row.config_pr.pr_number}`
+                )
+              }
+            />
+          ) : (
+            "—"
+          )}
+        </dd>
+        <dt>inference</dt>
+        <dd>
+          <AgentInference key={row.name} agent={row.name} />
+        </dd>
+        <dt>accounts</dt>
+        <dd>
+          {row.hive ? (
+            <LinkedAccounts
+              key={`${row.hive}/${row.name}`}
+              hive={row.hive}
+              agent={row.name}
+              version={actions.linkVersion}
+            />
+          ) : (
+            "—"
+          )}
+        </dd>
+      </dl>
+      <div class="ui-agent-detail-actions">
+        <LinkAccountMenu
+          agent={row.name}
+          hasHive={row.hive !== null}
+          onSelect={(kind) => actions.openLink(row, kind)}
+        />
+      </div>
+      {withTerminal ? (
+        <>
+          {/* The agent's live terminal and its input box. */}
+          <AgentTermPreview agentName={row.name} />
+          <SubagentTerms key={row.name} agentName={row.name} />
+        </>
+      ) : null}
+    </div>
+  );
+}