swarm UI: fetch linked accounts only for the opened agent

The detail panel makes one request for the agent it shows,
GET /api/hives/{hive}/agents/{agent}/linked-accounts, which returns every
matrix, forge and github account of that agent as names and hosts. The
all-agents route and the table's matrix-column rows are removed, so the
table makes no linked-accounts request. The panel stays keyed by
hive/agent. The bao grant is unchanged.

Refs #4855

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

@@ -1,104 +1,78 @@
 // <LinkedAccounts> — the accounts linked to one agent, one row each: kind,
-// name, host. Renders its slice of `GET /api/agents/linked-accounts`, which
-// `AgentsPage` fetches once for every agent (`useLinkedAccounts`) and which
-// carries names and hosts only, never a credential.
+// name, host. Reads `GET /api/hives/{hive}/agents/{agent}/linked-accounts`,
+// which carries names and hosts only, never a credential.
 //
-// Callers key it by hive and agent, so switching agents remounts it instead
-// of reusing the previous agent's element.
+// Fetched on mount and again whenever `version` changes; `AgentsPage` bumps
+// it when a link dialog closes, so an account linked there shows up without
+// waiting for a reload.
+//
+// Its state belongs to one agent: callers key it by hive and agent, so
+// switching agents remounts it instead of showing the previous agent's rows.
 import { useEffect, useState } from "preact/hooks";
 import { readApiError, type ProblemDetails } from "@hive/shared/api-error.js";
 import { Badge } from "@hive/shared/badge.js";
 import "./LinkedAccounts.css";
 
-export type AccountKind = "matrix" | "forgejo" | "github";
+type AccountKind = "matrix" | "forgejo" | "github";
 
 // Mirrors `linked_accounts::LinkedAccount`.
-export interface LinkedAccount {
+interface LinkedAccount {
   kind: AccountKind;
   name: string;
   host: string | null;
   reserved: boolean;
 }
 
-// Mirrors `linked_accounts::AgentLinkedAccounts`.
-interface AgentLinkedAccounts {
-  hive: string | null;
+export function LinkedAccounts({
+  hive,
+  agent,
+  version,
+}: {
+  hive: string;
   agent: string;
-  accounts: LinkedAccount[];
-}
+  version: number;
+}) {
+  const [accounts, setAccounts] = useState<LinkedAccount[] | null>(null);
+  const [error, setError] = useState<ProblemDetails | null>(null);
 
-// What the page holds: each agent's accounts by agent name (the roster's
-// row key), or the error the one fetch failed with.
-export type LinkedAccountsState =
-  | { status: "loading" }
-  | { status: "loaded"; byAgent: ReadonlyMap<string, LinkedAccount[]> }
-  | { status: "error"; problem: ProblemDetails };
-
-// The one fetch, re-run whenever `version` changes; `AgentsPage` bumps it
-// when a link dialog closes, so an account linked there shows up without a
-// reload. Keeps the previous result on screen while a refetch is in flight.
-export function useLinkedAccounts(version: number): LinkedAccountsState {
-  const [state, setState] = useState<LinkedAccountsState>({
-    status: "loading",
-  });
   useEffect(() => {
     let cancelled = false;
     (async () => {
-      const r = await fetch("/api/agents/linked-accounts");
+      const r = await fetch(
+        `/api/hives/${encodeURIComponent(hive)}/agents/${encodeURIComponent(agent)}/linked-accounts`,
+      );
       if (!r.ok) {
-        const problem = await readApiError(r);
-        if (!cancelled) setState({ status: "error", problem });
+        if (!cancelled) setError(await readApiError(r));
         return;
       }
-      const data = (await r.json()) as AgentLinkedAccounts[];
+      const data = (await r.json()) as LinkedAccount[];
       if (cancelled) return;
-      setState({
-        status: "loaded",
-        byAgent: new Map(data.map((e) => [e.agent, e.accounts])),
-      });
+      setAccounts(data);
+      setError(null);
     })().catch((e: unknown) => {
-      if (!cancelled)
-        setState({ status: "error", problem: { detail: String(e) } });
+      if (!cancelled) setError({ detail: String(e) });
     });
     return () => {
       cancelled = true;
     };
-  }, [version]);
-  return state;
-}
+  }, [hive, agent, version]);
 
-export function LinkedAccounts({
-  state,
-  agent,
-  kinds,
-}: {
-  state: LinkedAccountsState;
-  agent: string;
-  /** Only these kinds; all of them when omitted. */
-  kinds?: AccountKind[];
-}) {
-  if (state.status === "error") {
+  if (error) {
     return (
       <Badge
         tone="negative"
         value="accounts unavailable"
-        title={state.problem.detail ?? "listing linked accounts failed"}
+        title={error.detail ?? "listing linked accounts failed"}
       />
     );
   }
-  if (state.status === "loading") {
-    return <span class="ui-linked-accounts-muted">…</span>;
-  }
-  const accounts = state.byAgent.get(agent) ?? [];
-  const shown = kinds
-    ? accounts.filter((a) => kinds.includes(a.kind))
-    : accounts;
-  if (shown.length === 0) {
+  if (accounts === null) return <span class="ui-linked-accounts-muted">…</span>;
+  if (accounts.length === 0) {
     return <span class="ui-linked-accounts-muted">none linked</span>;
   }
   return (
     <ul class="ui-linked-accounts">
-      {shown.map((a) => (
+      {accounts.map((a) => (
         <li key={`${a.kind}/${a.name}`}>
           <Badge label={a.kind} value={a.name} />
           <span class="ui-linked-accounts-host">{a.host ?? "—"}</span>