feat: add agent connections graph component to agent page and improve force graph responsiveness

Author: EdSDR

apps/torus-portal/src/app/(pages)/portal/_components/force-graph-2d/force-graph-2d.tsx

@@ -41,6 +41,8 @@ interface ForceGraph2DProps {
   onSelectionChange?: (nodeId: string | null) => void;
   selectedSwarmId?: string | null;
   swarmCenterNodeId?: string | null;
+  /** When true, the graph fits within its parent container instead of being full-screen */
+  contained?: boolean;
 }
 
 export function ForceGraphCanvas2D(props: ForceGraph2DProps) {
@@ -166,7 +168,7 @@ export function ForceGraphCanvas2D(props: ForceGraph2DProps) {
       height,
       resolution: 1,
       antialias: true,
-      resizeTo: window,
+      resizeTo: props.contained ? container : window,
       backgroundColor: 0x111111,
     });
 
@@ -487,7 +489,11 @@ export function ForceGraphCanvas2D(props: ForceGraph2DProps) {
   return (
     <div
       ref={containerRef}
-      className="bg-background animate-fade animate-delay-1000 fixed inset-0 z-0"
+      className={
+        props.contained
+          ? "bg-background h-full w-full"
+          : "bg-background animate-fade animate-delay-1000 fixed inset-0 z-0"
+      }
     />
   );
 }

apps/torus-portal/src/app/(pages)/root-allocator/(expanded-pages)/agent/[slug]/components/agent-connections-graph.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { Loading } from "@torus-ts/ui/components/loading";
+import { ForceGraphCanvas2D } from "~/app/(pages)/portal/_components/force-graph-2d/force-graph-2d";
+import { getConnectedNodesSwarm } from "~/app/(pages)/portal/_components/force-graph-2d/force-graph-2d-utils";
+import { useGraphData } from "~/app/(pages)/portal/_components/force-graph/use-graph-data";
+import { useMemo } from "react";
+
+interface AgentConnectionsGraphProps {
+  agentKey: string;
+}
+
+export function AgentConnectionsGraph({
+  agentKey,
+}: AgentConnectionsGraphProps) {
+  const { graphData, isLoading, allocatorAddress } = useGraphData();
+
+  // Filter graph data to show only nodes connected to this agent
+  const filteredGraphData = useMemo(() => {
+    if (!graphData) return null;
+
+    // Find the agent node
+    const agentNode = graphData.nodes.find((n) => n.id === agentKey);
+    if (!agentNode) return null;
+
+    // Get all connected nodes using the swarm traversal logic
+    const connectedNodeIds = getConnectedNodesSwarm(
+      agentKey,
+      graphData.nodes,
+      graphData.links,
+      allocatorAddress,
+    );
+
+    // Filter nodes (exclude allocator from the filtered view)
+    const filteredNodes = graphData.nodes.filter(
+      (node) => connectedNodeIds.has(node.id) && node.id !== allocatorAddress,
+    );
+
+    // Filter links to only include those between connected nodes (excluding allocator)
+    const filteredLinks = graphData.links.filter((link) => {
+      const sourceId =
+        typeof link.source === "string"
+          ? link.source
+          : (link.source as { id: string }).id;
+      const targetId =
+        typeof link.target === "string"
+          ? link.target
+          : (link.target as { id: string }).id;
+      return (
+        connectedNodeIds.has(sourceId) &&
+        connectedNodeIds.has(targetId) &&
+        sourceId !== allocatorAddress &&
+        targetId !== allocatorAddress
+      );
+    });
+
+    // Only show graph if there are connections (more than just the agent itself)
+    if (filteredNodes.length <= 1) return null;
+
+    return {
+      nodes: filteredNodes,
+      links: filteredLinks,
+    };
+  }, [graphData, agentKey, allocatorAddress]);
+
+  if (isLoading) {
+    return (
+      <div className="flex h-[400px] items-center justify-center rounded-lg border border-zinc-800 bg-zinc-900/50">
+        <div className="flex items-center gap-2 text-sm text-zinc-400">
+          <Loading /> Loading network connections...
+        </div>
+      </div>
+    );
+  }
+
+  if (!filteredGraphData) {
+    return (
+      <div className="flex h-[200px] items-center justify-center rounded-lg border border-zinc-800 bg-zinc-900/50">
+        <p className="text-sm text-zinc-400">No network connections found</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative h-[400px] overflow-hidden rounded-lg border border-zinc-800">
+      <ForceGraphCanvas2D
+        graphData={filteredGraphData}
+        onNodeClick={() => {
+          /* empty */
+        }}
+        allocatorAddress={allocatorAddress}
+        swarmCenterNodeId={agentKey}
+        contained
+      />
+    </div>
+  );
+}

apps/torus-portal/src/app/(pages)/root-allocator/(expanded-pages)/agent/[slug]/page.tsx

@@ -16,6 +16,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { Suspense } from "react";
 import { PenaltyList } from "../../../_components/penalties-list";
+import { AgentConnectionsGraph } from "./components/agent-connections-graph";
 import { AgentInfoCard } from "./components/agent-info-card";
 import { ExpandedViewSocials } from "./components/expanded-view-socials";
 
@@ -160,6 +161,11 @@ export default async function AgentPage({ params }: Readonly<AgentPageProps>) {
             </Card>
 
             <MarkdownView source={metadata.description} />
+
+            <div className="mt-6">
+              <h3 className="mb-4 text-lg font-semibold">Sub-Agents Graph</h3>
+              <AgentConnectionsGraph agentKey={agentKey} />
+            </div>
           </div>
 
           <div className="flex flex-col gap-6 md:w-1/3">

packages/ui/src/components/agent-card/agent-card-header.tsx

@@ -88,11 +88,13 @@ export function AgentCardHeader({
           <div className="flex w-full items-center justify-between gap-1 md:absolute md:inset-x-0 md:top-0">
             <div className="flex items-center gap-1">
               <AgentCardSocialsInfo socials={socialsList} />
-              {isWhitelisted && subagentCount !== undefined && subagentCount > 0 && (
-                <Badge variant="secondary" className="whitespace-nowrap">
-                  {subagentCount} Subagent{subagentCount !== 1 ? "s" : ""}
-                </Badge>
-              )}
+              {isWhitelisted &&
+                subagentCount !== undefined &&
+                subagentCount > 0 && (
+                  <Badge variant="secondary" className="whitespace-nowrap">
+                    {subagentCount} Subagent{subagentCount !== 1 ? "s" : ""}
+                  </Badge>
+                )}
             </div>
             <AgentBadge
               isAgentSelected={isAgentSelected}