✨ feat: topology, and improves handling

apps/web/app/bootstrap/page.tsx

@@ -4,16 +4,10 @@ import { Loader2 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { api } from "@/lib/api";
+import { api } from "@/lib/api-client";
 
 export default function BootstrapPage() {
   const router = useRouter();
@@ -29,8 +23,7 @@ export default function BootstrapPage() {
         if (data && !data.needsSetup) {
           router.replace("/login");
         }
-      } catch (err) {
-        console.error("Failed to check bootstrap status:", err);
+      } catch (_err) {
       } finally {
         setCheckingStatus(false);
       }
@@ -77,7 +70,7 @@ export default function BootstrapPage() {
       } else {
         setError("Failed to create admin user");
       }
-    } catch (err) {
+    } catch (_err) {
       setError("Failed to connect to server");
     } finally {
       setLoading(false);
@@ -96,9 +89,7 @@ export default function BootstrapPage() {
     <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 p-4">
       <Card className="w-full max-w-md">
         <CardHeader className="space-y-1">
-          <CardTitle className="text-2xl font-bold text-center">
-            Welcome to Minikura
-          </CardTitle>
+          <CardTitle className="text-2xl font-bold text-center">Welcome to Minikura</CardTitle>
           <CardDescription className="text-center">
             Create your admin account to get started
           </CardDescription>
@@ -107,13 +98,7 @@ export default function BootstrapPage() {
           <form onSubmit={handleSubmit} className="space-y-4">
             <div className="space-y-2">
               <Label htmlFor="name">Full Name</Label>
-              <Input
-                id="name"
-                name="name"
-                placeholder="John Doe"
-                required
-                autoFocus
-              />
+              <Input id="name" name="name" placeholder="John Doe" required autoFocus />
             </div>
             <div className="space-y-2">
               <Label htmlFor="email">Email</Label>
@@ -147,9 +132,7 @@ export default function BootstrapPage() {
                 required
               />
             </div>
-            {error && (
-              <div className="text-sm text-red-600 text-center">{error}</div>
-            )}
+            {error && <div className="text-sm text-red-600 text-center">{error}</div>}
             <Button type="submit" className="w-full" disabled={loading}>
               {loading ? "Creating..." : "Create Admin Account"}
             </Button>

apps/web/app/dashboard/k8s/page.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { AlertCircle, CheckCircle2, XCircle } from "lucide-react";
 import type {
   CustomResourceSummary,
   DeploymentInfo,
@@ -10,6 +9,7 @@ import type {
   PodInfo,
   StatefulSetInfo,
 } from "@minikura/api";
+import { AlertCircle, CheckCircle2, XCircle } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@@ -23,7 +23,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { api } from "@/lib/api";
+import { api } from "@/lib/api-client";
 
 export default function K8sResourcesPage() {
   const [status, setStatus] = useState<K8sStatus | null>(null);
@@ -64,50 +64,34 @@ export default function K8sResourcesPage() {
 
       if (statusRes.status === "fulfilled" && statusRes.value.data) {
         setStatus(statusRes.value.data as K8sStatus);
-      } else if (statusRes.status === "rejected") {
-        console.error("Failed to fetch status:", statusRes.reason);
       }
 
       if (podsRes.status === "fulfilled" && podsRes.value.data) {
         setPods(podsRes.value.data as PodInfo[]);
-      } else if (podsRes.status === "rejected") {
-        console.error("Failed to fetch pods:", podsRes.reason);
       }
 
       if (deploymentsRes.status === "fulfilled" && deploymentsRes.value.data) {
         setDeployments(deploymentsRes.value.data as DeploymentInfo[]);
-      } else if (deploymentsRes.status === "rejected") {
-        console.error("Failed to fetch deployments:", deploymentsRes.reason);
       }
 
       if (statefulSetsRes.status === "fulfilled" && statefulSetsRes.value.data) {
         setStatefulSets(statefulSetsRes.value.data as StatefulSetInfo[]);
-      } else if (statefulSetsRes.status === "rejected") {
-        console.error("Failed to fetch statefulsets:", statefulSetsRes.reason);
       }
 
       if (servicesRes.status === "fulfilled" && servicesRes.value.data) {
         setServices(servicesRes.value.data as K8sServiceSummary[]);
-      } else if (servicesRes.status === "rejected") {
-        console.error("Failed to fetch services:", servicesRes.reason);
       }
 
       if (configMapsRes.status === "fulfilled" && configMapsRes.value.data) {
         setConfigMaps(configMapsRes.value.data as K8sConfigMapSummary[]);
-      } else if (configMapsRes.status === "rejected") {
-        console.error("Failed to fetch configmaps:", configMapsRes.reason);
       }
 
       if (minecraftServersRes.status === "fulfilled" && minecraftServersRes.value.data) {
         setMinecraftServers(minecraftServersRes.value.data as CustomResourceSummary[]);
-      } else if (minecraftServersRes.status === "rejected") {
-        console.error("Failed to fetch minecraft servers:", minecraftServersRes.reason);
       }
 
       if (reverseProxyServersRes.status === "fulfilled" && reverseProxyServersRes.value.data) {
         setReverseProxyServers(reverseProxyServersRes.value.data as CustomResourceSummary[]);
-      } else if (reverseProxyServersRes.status === "rejected") {
-        console.error("Failed to fetch reverse proxy servers:", reverseProxyServersRes.reason);
       }
     } catch (err: unknown) {
       const errorMessage =

apps/web/app/dashboard/servers/create/page.tsx

@@ -6,7 +6,15 @@ import { useRouter } from "next/navigation";
 import { ServerForm, type ServerFormData } from "@/components/server-form";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { api } from "@/lib/api";
+import { api } from "@/lib/api-client";
+
+const toDifficultyUppercase = (value: string): "PEACEFUL" | "EASY" | "NORMAL" | "HARD" => {
+  return value.toUpperCase() as "PEACEFUL" | "EASY" | "NORMAL" | "HARD";
+};
+
+const toModeUppercase = (value: string): "SURVIVAL" | "CREATIVE" | "ADVENTURE" | "SPECTATOR" => {
+  return value.toUpperCase() as "SURVIVAL" | "CREATIVE" | "ADVENTURE" | "SPECTATOR";
+};
 
 export default function CreateServerPage() {
   const router = useRouter();
@@ -121,8 +129,8 @@ export default function CreateServerPage() {
       jvm_opts: data.jvmOpts || undefined,
       use_aikar_flags: data.useAikarFlags || undefined,
       use_meowice_flags: data.useMeowiceFlags || undefined,
-      difficulty: data.difficulty,
-      game_mode: data.mode,
+      difficulty: toDifficultyUppercase(data.difficulty),
+      game_mode: toModeUppercase(data.mode),
       max_players: data.maxPlayers ? Number(data.maxPlayers) : undefined,
       pvp: data.pvp,
       online_mode: data.onlineMode,

apps/web/app/dashboard/servers/edit/[id]/page.tsx

@@ -7,7 +7,7 @@ import { useEffect, useState } from "react";
 import { ServerForm, type ServerFormData, type ServerType } from "@/components/server-form";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { api } from "@/lib/api";
+import { api } from "@/lib/api-client";
 import { getReverseProxyApi } from "@/lib/api-helpers";
 
 export default function EditServerPage() {
@@ -48,8 +48,7 @@ export default function EditServerPage() {
 
         setError("Server not found");
         setLoading(false);
-      } catch (err) {
-        console.error("Failed to fetch server:", err);
+      } catch (_err) {
         setError("Failed to load server data");
         setLoading(false);
       }
@@ -81,11 +80,12 @@ export default function EditServerPage() {
     return "survival";
   };
 
-  const toServerType = (value?: string | null): ServerType => {
-    if (value === "VANILLA" || value === "CUSTOM") {
-      return value;
-    }
-    return "PAPER";
+  const toDifficultyUppercase = (value: string): "PEACEFUL" | "EASY" | "NORMAL" | "HARD" => {
+    return value.toUpperCase() as "PEACEFUL" | "EASY" | "NORMAL" | "HARD";
+  };
+
+  const toModeUppercase = (value: string): "SURVIVAL" | "CREATIVE" | "ADVENTURE" | "SPECTATOR" => {
+    return value.toUpperCase() as "SURVIVAL" | "CREATIVE" | "ADVENTURE" | "SPECTATOR";
   };
 
   const parseEnvVariables = (envVars?: Array<{ key: string; value: string }>) => {
@@ -205,8 +205,8 @@ export default function EditServerPage() {
       jvm_opts: data.jvmOpts || undefined,
       use_aikar_flags: data.useAikarFlags || undefined,
       use_meowice_flags: data.useMeowiceFlags || undefined,
-      difficulty: data.difficulty,
-      game_mode: data.mode,
+      difficulty: toDifficultyUppercase(data.difficulty),
+      game_mode: toModeUppercase(data.mode),
       max_players: data.maxPlayers ? Number(data.maxPlayers) : undefined,
       pvp: data.pvp,
       online_mode: data.onlineMode,

apps/web/app/dashboard/servers/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import type { ConnectionInfo, NormalServer, PodInfo, ReverseProxyServer } from "@minikura/api";
 import {
   AlertCircle,
   Check,
@@ -25,15 +26,6 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import {
   Table,
   TableBody,
@@ -42,14 +34,10 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Textarea } from "@/components/ui/textarea";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-import type { ConnectionInfo, NormalServer, PodInfo, ReverseProxyServer } from "@minikura/api";
+import { api } from "@/lib/api-client";
 import { getReverseProxyApi } from "@/lib/api-helpers";
-import { api } from "@/lib/api";
 
-// Server status component
 function ServerStatusCell({ serverId, type }: { serverId: string; type: "normal" | "proxy" }) {
   const [pods, setPods] = useState<PodInfo[]>([]);
   const [loading, setLoading] = useState(true);
@@ -59,14 +47,13 @@ function ServerStatusCell({ serverId, type }: { serverId: string; type: "normal"
       try {
         const endpoint =
           type === "normal"
-            ? api.api.k8s["servers"]({ serverId }).pods.get
+            ? api.api.k8s.servers({ serverId }).pods.get
             : api.api.k8s["reverse-proxy"]({ serverId }).pods.get;
         const res = await endpoint();
         if (res.data) {
           setPods(res.data as PodInfo[]);
         }
-      } catch (error) {
-        console.error("Failed to fetch pods:", error);
+      } catch (_error) {
       } finally {
         setLoading(false);
       }
@@ -93,9 +80,7 @@ function ServerStatusCell({ serverId, type }: { serverId: string; type: "normal"
   }
 
   const allRunning = pods.every((pod) => pod.status === "Running");
-  const readyCount = pods.filter(
-    (pod) => pod.ready === "1/1" || pod.ready === "1/1" || pod.ready === "1/1"
-  ).length;
+  const readyCount = pods.filter((pod) => pod.ready === "1/1").length;
 
   return (
     <div className="flex items-center gap-2">
@@ -111,7 +96,6 @@ function ServerStatusCell({ serverId, type }: { serverId: string; type: "normal"
   );
 }
 
-// Connection info component
 function ConnectionInfoCell({ serverId, type }: { serverId: string; type: "normal" | "proxy" }) {
   const [connectionInfo, setConnectionInfo] = useState<ConnectionInfo | null>(null);
   const [loading, setLoading] = useState(true);
@@ -129,8 +113,7 @@ function ConnectionInfoCell({ serverId, type }: { serverId: string; type: "norma
         if (res.data) {
           setConnectionInfo(res.data as ConnectionInfo);
         }
-      } catch (error) {
-        console.error("Failed to fetch connection info:", error);
+      } catch (_error) {
       } finally {
         setLoading(false);
       }
@@ -213,8 +196,7 @@ export default function ServersPage() {
       if (proxyRes.data) {
         setReverseProxies(proxyRes.data as unknown as ReverseProxyServer[]);
       }
-    } catch (error) {
-      console.error("Failed to fetch servers:", error);
+    } catch (_error) {
     } finally {
       setLoading(false);
     }
@@ -236,9 +218,7 @@ export default function ServersPage() {
       }
       await fetchServers();
       setDeleteTarget(null);
-    } catch (error) {
-      console.error("Failed to delete server:", error);
-    }
+    } catch (_error) {}
   };
 
   if (loading) {
@@ -270,7 +250,6 @@ export default function ServersPage() {
         </Button>
       </div>
 
-      {/* Normal Servers */}
       <Card>
         <CardHeader>
           <div className="flex items-center gap-2">
@@ -360,7 +339,6 @@ export default function ServersPage() {
         </CardContent>
       </Card>
 
-      {/* Reverse Proxy Servers */}
       <Card>
         <CardHeader>
           <div className="flex items-center gap-2">
@@ -448,7 +426,6 @@ export default function ServersPage() {
         </CardContent>
       </Card>
 
-      {/* Delete Confirmation Dialog */}
       <Dialog open={!!deleteTarget} onOpenChange={() => setDeleteTarget(null)}>
         <DialogContent>
           <DialogHeader>

apps/web/app/dashboard/topology/page.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { Network, RefreshCw } from "lucide-react";
+import { TopologyCanvas } from "@/components/topology/topology-canvas";
+import { useTopologyData } from "@/hooks/use-topology-data";
+
+export default function TopologyPage() {
+  const { graph, loading, error } = useTopologyData();
+
+  if (loading) {
+    return (
+      <div className="space-y-6">
+        <div>
+          <h1 className="text-3xl font-bold">Network Topology</h1>
+          <p className="text-muted-foreground mt-1">
+            Real-time server infrastructure, proxy connections, and Kubernetes nodes
+          </p>
+        </div>
+        <div className="flex items-center justify-center h-[calc(100vh-250px)]">
+          <div className="flex flex-col items-center gap-2">
+            <RefreshCw className="h-8 w-8 animate-spin text-muted-foreground" />
+            <p className="text-muted-foreground">Loading topology...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="space-y-6">
+        <div>
+          <h1 className="text-3xl font-bold">Network Topology</h1>
+          <p className="text-muted-foreground mt-1">
+            Real-time server infrastructure, proxy connections, and Kubernetes nodes
+          </p>
+        </div>
+        <div className="flex items-center justify-center h-[calc(100vh-250px)] border-2 border-dashed rounded-lg">
+          <div className="flex flex-col items-center gap-2 p-6 text-center">
+            <p className="text-destructive font-semibold">Error loading topology</p>
+            <p className="text-muted-foreground text-sm">{error}</p>
+            <p className="text-muted-foreground text-xs mt-2">Auto-retrying...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!graph || graph.nodes.length === 0) {
+    return (
+      <div className="space-y-6">
+        <div>
+          <h1 className="text-3xl font-bold">Network Topology</h1>
+          <p className="text-muted-foreground mt-1">
+            Real-time server infrastructure, proxy connections, and Kubernetes nodes
+          </p>
+        </div>
+        <div className="flex items-center justify-center h-[calc(100vh-250px)] border-2 border-dashed rounded-lg">
+          <div className="flex flex-col items-center gap-2 p-6 text-center">
+            <p className="text-muted-foreground">No servers or infrastructure found</p>
+            <p className="text-sm text-muted-foreground">
+              Create a server to see it appear in the topology
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <div className="flex items-center gap-3">
+          <div className="p-2 bg-primary/10 rounded-lg">
+            <Network className="h-6 w-6 text-primary" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold">Network Topology</h1>
+            <p className="text-muted-foreground mt-1">
+              Real-time server infrastructure, proxy connections, and Kubernetes nodes
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <TopologyCanvas graph={graph} />
+    </div>
+  );
+}

apps/web/app/dashboard/users/page.tsx

@@ -2,7 +2,6 @@
 
 import { Ban, CheckCircle, Edit, Trash2 } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
-import { getUserApi } from "@/lib/api-helpers";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@@ -31,7 +30,8 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { api } from "@/lib/api";
+import { api } from "@/lib/api-client";
+import { getUserApi } from "@/lib/api-helpers";
 import { useSession } from "@/lib/auth-client";
 
 type User = {
@@ -59,8 +59,7 @@ export default function UsersPage() {
       if (data && typeof data === "object" && "users" in data) {
         setUsers(data.users as User[]);
       }
-    } catch (error) {
-      console.error("Failed to fetch users:", error);
+    } catch (_error) {
     } finally {
       setLoading(false);
     }
@@ -88,9 +87,7 @@ export default function UsersPage() {
         await fetchUsers();
         setEditingUser(null);
       }
-    } catch (error) {
-      console.error("Failed to update user:", error);
-    }
+    } catch (_error) {}
   };
 
   const handleSuspend = async (e: React.FormEvent<HTMLFormElement>) => {
@@ -110,9 +107,7 @@ export default function UsersPage() {
         await fetchUsers();
         setSuspendingUser(null);
       }
-    } catch (error) {
-      console.error("Failed to suspend user:", error);
-    }
+    } catch (_error) {}
   };
 
   const handleUnsuspend = async (userId: string) => {
@@ -125,9 +120,7 @@ export default function UsersPage() {
       if (!error) {
         await fetchUsers();
       }
-    } catch (error) {
-      console.error("Failed to unsuspend user:", error);
-    }
+    } catch (_error) {}
   };
 
   const handleDelete = async () => {
@@ -140,9 +133,7 @@ export default function UsersPage() {
         await fetchUsers();
         setDeleteUser(null);
       }
-    } catch (error) {
-      console.error("Failed to delete user:", error);
-    }
+    } catch (_error) {}
   };
 
   const isUserSuspended = (user: User): boolean => {
@@ -252,7 +243,6 @@ export default function UsersPage() {
         </CardContent>
       </Card>
 
-      {/* Edit Dialog */}
       <Dialog open={!!editingUser} onOpenChange={() => setEditingUser(null)}>
         <DialogContent>
           <DialogHeader>
@@ -288,7 +278,6 @@ export default function UsersPage() {
         </DialogContent>
       </Dialog>
 
-      {/* Suspend Dialog */}
       <Dialog open={!!suspendingUser} onOpenChange={() => setSuspendingUser(null)}>
         <DialogContent>
           <DialogHeader>
@@ -324,7 +313,6 @@ export default function UsersPage() {
         </DialogContent>
       </Dialog>
 
-      {/* Delete Dialog */}
       <Dialog open={!!deleteUser} onOpenChange={() => setDeleteUser(null)}>
         <DialogContent>
           <DialogHeader>

apps/web/app/login/page.tsx

@@ -41,7 +41,7 @@ export default function LoginPage() {
       } else {
         router.push("/dashboard");
       }
-    } catch (err) {
+    } catch (_err) {
       setError("Failed to connect to server");
     } finally {
       setLoading(false);

apps/web/components/dashboard-layout.tsx

@@ -1,13 +1,6 @@
 "use client";
 
-import {
-  Loader2,
-  LogOut,
-  Network,
-  Server,
-  Settings,
-  Users,
-} from "lucide-react";
+import { GitGraph, Loader2, LogOut, Network, Server, Settings, Users } from "lucide-react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { useEffect } from "react";
@@ -39,11 +32,10 @@ import { signOut, useSession } from "@/lib/auth-client";
 const menuItems = [
   { href: "/dashboard/users", icon: Users, label: "Users" },
   { href: "/dashboard/servers", icon: Server, label: "Servers" },
+  { href: "/dashboard/topology", icon: GitGraph, label: "Network" },
 ];
 
-const k8sMenuItems = [
-  { href: "/dashboard/k8s", icon: Network, label: "Resources" },
-];
+const k8sMenuItems = [{ href: "/dashboard/k8s", icon: Network, label: "Resources" }];
 
 export function DashboardLayout({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
@@ -96,10 +88,7 @@ export function DashboardLayout({ children }: { children: React.ReactNode }) {
               <SidebarMenu>
                 {menuItems.map((item) => (
                   <SidebarMenuItem key={item.href}>
-                    <SidebarMenuButton
-                      asChild
-                      isActive={pathname === item.href}
-                    >
+                    <SidebarMenuButton asChild isActive={pathname === item.href}>
                       <Link href={item.href}>
                         <item.icon className="h-4 w-4" />
                         <span>{item.label}</span>
@@ -116,10 +105,7 @@ export function DashboardLayout({ children }: { children: React.ReactNode }) {
               <SidebarMenu>
                 {k8sMenuItems.map((item) => (
                   <SidebarMenuItem key={item.href}>
-                    <SidebarMenuButton
-                      asChild
-                      isActive={pathname === item.href}
-                    >
+                    <SidebarMenuButton asChild isActive={pathname === item.href}>
                       <Link href={item.href}>
                         <item.icon className="h-4 w-4" />
                         <span>{item.label}</span>
@@ -134,18 +120,13 @@ export function DashboardLayout({ children }: { children: React.ReactNode }) {
         <div className="border-t p-4">
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button
-                variant="ghost"
-                className="w-full justify-start gap-2 px-2"
-              >
+              <Button variant="ghost" className="w-full justify-start gap-2 px-2">
                 <Avatar className="h-8 w-8">
                   <AvatarFallback>{userInitials}</AvatarFallback>
                 </Avatar>
                 <div className="flex flex-col items-start text-sm">
                   <span className="font-medium">{session?.user?.name}</span>
-                  <span className="text-xs text-muted-foreground">
-                    {session?.user?.email}
-                  </span>
+                  <span className="text-xs text-muted-foreground">{session?.user?.email}</span>
                 </div>
               </Button>
             </DropdownMenuTrigger>

apps/web/components/terminal.tsx

@@ -50,8 +50,7 @@ export function Terminal({
     const term = new XTerm({
       cursorBlink: true,
       fontSize: 14,
-      fontFamily:
-        'JetBrains Mono, Fira Code, Menlo, Monaco, "Courier New", monospace',
+      fontFamily: 'JetBrains Mono, Fira Code, Menlo, Monaco, "Courier New", monospace',
       fontWeight: "normal",
       fontWeightBold: "bold",
       letterSpacing: 0,
@@ -106,9 +105,7 @@ export function Terminal({
     try {
       const ligaturesAddon = new LigaturesAddon();
       term.loadAddon(ligaturesAddon);
-    } catch (e) {
-      console.warn("Ligatures addon not available:", e);
-    }
+    } catch (_e) {}
 
     fitAddon.fit();
 
@@ -120,10 +117,7 @@ export function Terminal({
       try {
         const webglAddon = new WebglAddon();
         term.loadAddon(webglAddon);
-        console.log("WebGL renderer loaded successfully");
-      } catch (e) {
-        console.warn("WebGL renderer not available, using canvas fallback:", e);
-      }
+      } catch (_e) {}
     }, 100);
 
     term.attachCustomKeyEventHandler((event) => {
@@ -141,10 +135,9 @@ export function Terminal({
     wsRef.current = ws;
 
     ws.onopen = () => {
-      console.log("WebSocket connected");
       setConnected(true);
       term.writeln(
-        `\r\n\x1b[1;32mConnecting to ${mode === "attach" ? "container" : "shell"}...\x1b[0m\r\n`,
+        `\r\n\x1b[1;32mConnecting to ${mode === "attach" ? "container" : "shell"}...\x1b[0m\r\n`
       );
 
       const { cols, rows } = term;
@@ -166,20 +159,16 @@ export function Terminal({
           term.writeln(`\r\n\x1b[1;33m${message.data}\x1b[0m\r\n`);
           setConnected(false);
         }
-      } catch (err) {
-        console.error("Error parsing WebSocket message:", err);
-      }
+      } catch (_err) {}
     };
 
-    ws.onerror = (err) => {
-      console.error("WebSocket error:", err);
+    ws.onerror = (_err) => {
       term.writeln("\r\n\x1b[1;31mWebSocket error\x1b[0m\r\n");
       setError("Connection error");
       setConnected(false);
     };
 
     ws.onclose = () => {
-      console.log("WebSocket closed");
       term.writeln("\r\n\x1b[1;33mConnection closed\x1b[0m\r\n");
       setConnected(false);
     };
@@ -220,9 +209,7 @@ export function Terminal({
           </div>
         )}
         {error && (
-          <div className="bg-red-500/20 text-red-500 text-xs px-2 py-1 rounded">
-            {error}
-          </div>
+          <div className="bg-red-500/20 text-red-500 text-xs px-2 py-1 rounded">{error}</div>
         )}
         <button
           type="button"

apps/web/components/topology/controls/node-details-panel.tsx

@@ -0,0 +1,341 @@
+"use client";
+
+import { Box } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import type {
+  K8sNodeMetadata,
+  ProxyMetadata,
+  ServerMetadata,
+  TopologyNodeData,
+} from "@/lib/topology-types";
+
+interface NodeDetailsPanelProps {
+  node: TopologyNodeData | null;
+  open: boolean;
+  onClose: () => void;
+}
+
+export function NodeDetailsPanel({
+  node,
+  open,
+  onClose,
+}: NodeDetailsPanelProps) {
+  if (!node) return null;
+
+  return (
+    <Sheet open={open} onOpenChange={onClose}>
+      <SheetContent className="w-full sm:w-[600px] lg:w-[700px] overflow-y-auto p-6">
+        <SheetHeader className="mb-6">
+          <SheetTitle>{node.label}</SheetTitle>
+        </SheetHeader>
+
+        <div className="space-y-4 pr-2">
+          {/* Type and Status */}
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <Badge variant="outline">
+                {node.type === "server"
+                  ? "Minecraft Server"
+                  : node.type === "proxy"
+                    ? "Reverse Proxy"
+                    : "Kubernetes Node"}
+              </Badge>
+              <Badge
+                variant={
+                  node.status === "healthy"
+                    ? "default"
+                    : node.status === "degraded"
+                      ? "secondary"
+                      : "destructive"
+                }
+              >
+                {node.status}
+              </Badge>
+            </div>
+          </div>
+
+          <Separator />
+
+          {node.type === "server" && (
+            <ServerDetails metadata={node.metadata as ServerMetadata} />
+          )}
+          {node.type === "proxy" && (
+            <ProxyDetails metadata={node.metadata as ProxyMetadata} />
+          )}
+          {node.type === "k8s-node" && (
+            <K8sNodeDetails metadata={node.metadata as K8sNodeMetadata} />
+          )}
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+function ServerDetails({ metadata }: { metadata: ServerMetadata }) {
+  const { server, podCount, readyPods, pods, k8sNodes, connectedProxies } =
+    metadata;
+
+  return (
+    <div className="space-y-4">
+      <DetailSection title="Server Configuration">
+        <DetailItem label="ID" value={server.id} />
+        {server.description && (
+          <DetailItem label="Description" value={server.description} />
+        )}
+        <DetailItem label="Type" value={server.type} />
+        <DetailItem label="Jar Type" value={server.jar_type} />
+        <DetailItem
+          label="Minecraft Version"
+          value={server.minecraft_version}
+        />
+        <DetailItem label="Port" value={server.listen_port.toString()} />
+      </DetailSection>
+
+      <DetailSection title="Kubernetes Info">
+        <DetailItem label="Pods" value={`${readyPods}/${podCount} Ready`} />
+        {k8sNodes.length > 0 && (
+          <div className="space-y-1">
+            <div className="flex items-center gap-2 text-sm mb-2">
+              <Box className="h-4 w-4 text-muted-foreground" />
+              <span className="text-muted-foreground">
+                Running on {k8sNodes.length} K8s node(s):
+              </span>
+            </div>
+            {k8sNodes.map((nodeName) => (
+              <div
+                key={nodeName}
+                className="text-sm p-2 bg-blue-50 border border-blue-200 rounded ml-6"
+              >
+                <span className="font-mono text-xs break-all">{nodeName}</span>
+              </div>
+            ))}
+          </div>
+        )}
+        {pods.map((pod) => (
+          <div key={pod.name} className="text-sm mt-2 p-2 bg-muted rounded">
+            <div className="font-medium font-mono text-xs break-all">
+              {pod.name}
+            </div>
+            <div className="text-xs text-muted-foreground space-y-0.5 mt-1">
+              <div>
+                Status: {pod.status} • {pod.ready}
+              </div>
+              <div>Restarts: {pod.restarts}</div>
+              {pod.nodeName && (
+                <div className="flex items-center gap-1">
+                  <Box className="h-3 w-3 shrink-0" />
+                  <span className="break-all">Node: {pod.nodeName}</span>
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+      </DetailSection>
+
+      {connectedProxies.length > 0 && (
+        <DetailSection title="Proxy Connections">
+          <DetailItem
+            label="Behind Proxies"
+            value={connectedProxies.length.toString()}
+          />
+          <div className="mt-2 space-y-1">
+            {connectedProxies.map((proxyId) => (
+              <div
+                key={proxyId}
+                className="text-sm p-2 bg-blue-50 border border-blue-200 rounded font-mono break-all"
+              >
+                {proxyId}
+              </div>
+            ))}
+          </div>
+        </DetailSection>
+      )}
+
+      <DetailSection title="Resources">
+        <DetailItem
+          label="Memory"
+          value={`${server.memory_request}MB / ${server.memory}MB`}
+        />
+        <DetailItem
+          label="CPU Request"
+          value={server.cpu_request || "Not set"}
+        />
+        <DetailItem label="CPU Limit" value={server.cpu_limit || "Not set"} />
+      </DetailSection>
+    </div>
+  );
+}
+
+function ProxyDetails({ metadata }: { metadata: ProxyMetadata }) {
+  const { proxy, podCount, readyPods, pods, k8sNodes, connectedServers } =
+    metadata;
+
+  return (
+    <div className="space-y-4">
+      <DetailSection title="Proxy Configuration">
+        <DetailItem label="ID" value={proxy.id} />
+        {proxy.description && (
+          <DetailItem label="Description" value={proxy.description} />
+        )}
+        <DetailItem label="Type" value={proxy.type} />
+        <DetailItem
+          label="External Address"
+          value={`${proxy.external_address}:${proxy.external_port}`}
+        />
+        <DetailItem label="Listen Port" value={proxy.listen_port.toString()} />
+      </DetailSection>
+
+      <DetailSection title="Kubernetes Info">
+        <DetailItem label="Pods" value={`${readyPods}/${podCount} Ready`} />
+        {k8sNodes.length > 0 && (
+          <div className="space-y-1">
+            <div className="flex items-center gap-2 text-sm mb-2">
+              <Box className="h-4 w-4 text-muted-foreground" />
+              <span className="text-muted-foreground">
+                Running on {k8sNodes.length} K8s node(s):
+              </span>
+            </div>
+            {k8sNodes.map((nodeName) => (
+              <div
+                key={nodeName}
+                className="text-sm p-2 bg-blue-50 border border-blue-200 rounded ml-6"
+              >
+                <span className="font-mono text-xs break-all">{nodeName}</span>
+              </div>
+            ))}
+          </div>
+        )}
+        {pods.map((pod) => (
+          <div key={pod.name} className="text-sm mt-2 p-2 bg-muted rounded">
+            <div className="font-medium font-mono text-xs break-all">
+              {pod.name}
+            </div>
+            <div className="text-xs text-muted-foreground space-y-0.5 mt-1">
+              <div>
+                Status: {pod.status} • {pod.ready}
+              </div>
+              <div>Restarts: {pod.restarts}</div>
+              {pod.nodeName && (
+                <div className="flex items-center gap-1">
+                  <Box className="h-3 w-3 shrink-0" />
+                  <span className="break-all">Node: {pod.nodeName}</span>
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+      </DetailSection>
+
+      <DetailSection title="Connected Servers">
+        <DetailItem label="Total" value={connectedServers.length.toString()} />
+        {connectedServers.length > 0 && (
+          <div className="mt-2 space-y-1">
+            {connectedServers.map((serverId) => (
+              <div
+                key={serverId}
+                className="text-sm p-2 bg-green-50 border border-green-200 rounded font-mono break-all"
+              >
+                {serverId}
+              </div>
+            ))}
+          </div>
+        )}
+      </DetailSection>
+    </div>
+  );
+}
+
+function K8sNodeDetails({ metadata }: { metadata: K8sNodeMetadata }) {
+  const { node, podCount, serverPods, proxyPods } = metadata;
+
+  return (
+    <div className="space-y-4">
+      <DetailSection title="Node Information">
+        <DetailItem label="Name" value={node.name || "Unknown"} />
+        <DetailItem label="Status" value={node.status} />
+        {node.version && <DetailItem label="Version" value={node.version} />}
+        {node.internalIP && (
+          <DetailItem label="Internal IP" value={node.internalIP} />
+        )}
+        {node.externalIP && (
+          <DetailItem label="External IP" value={node.externalIP} />
+        )}
+      </DetailSection>
+
+      <DetailSection title="Node Details">
+        <DetailItem label="Roles" value={node.roles} />
+        <DetailItem label="Age" value={node.age} />
+        {node.hostname && <DetailItem label="Hostname" value={node.hostname} />}
+      </DetailSection>
+
+      <DetailSection title="Running Pods">
+        <DetailItem label="Total Pods" value={podCount.toString()} />
+        <DetailItem label="Server Pods" value={serverPods.length.toString()} />
+        <DetailItem label="Proxy Pods" value={proxyPods.length.toString()} />
+
+        {serverPods.length > 0 && (
+          <div className="mt-3">
+            <p className="text-sm font-medium mb-2">Server Pods:</p>
+            <div className="space-y-1">
+              {serverPods.map((podName) => (
+                <div
+                  key={podName}
+                  className="text-xs p-2 bg-green-50 border border-green-200 rounded font-mono break-all"
+                >
+                  {podName}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {proxyPods.length > 0 && (
+          <div className="mt-3">
+            <p className="text-sm font-medium mb-2">Proxy Pods:</p>
+            <div className="space-y-1">
+              {proxyPods.map((podName) => (
+                <div
+                  key={podName}
+                  className="text-xs p-2 bg-blue-50 border border-blue-200 rounded font-mono break-all"
+                >
+                  {podName}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </DetailSection>
+    </div>
+  );
+}
+
+function DetailSection({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="space-y-2">
+      <h3 className="font-semibold text-sm">{title}</h3>
+      <div className="space-y-2">{children}</div>
+    </div>
+  );
+}
+
+function DetailItem({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex justify-between items-start text-sm gap-4">
+      <span className="text-muted-foreground shrink-0">{label}:</span>
+      <span className="font-medium text-right break-words">{value}</span>
+    </div>
+  );
+}

apps/web/components/topology/controls/topology-toolbar.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import { Box, Filter, Globe, Search, Server } from "lucide-react";
+import { useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Switch } from "@/components/ui/switch";
+import type { TopologyFilters } from "@/lib/topology-types";
+
+interface TopologyToolbarProps {
+  filters: TopologyFilters;
+  onFiltersChange: (filters: TopologyFilters) => void;
+  metadata: {
+    totalServers: number;
+    totalProxies: number;
+    totalK8sNodes: number;
+    totalConnections: number;
+    healthySystems: number;
+    degradedSystems: number;
+    unhealthySystems: number;
+  };
+}
+
+export function TopologyToolbar({ filters, onFiltersChange, metadata }: TopologyToolbarProps) {
+  const [searchQuery, setSearchQuery] = useState(filters.searchQuery);
+
+  const handleSearchChange = (value: string) => {
+    setSearchQuery(value);
+    onFiltersChange({ ...filters, searchQuery: value });
+  };
+
+  const toggleFilter = (key: keyof TopologyFilters) => {
+    onFiltersChange({ ...filters, [key]: !filters[key] });
+  };
+
+  return (
+    <div className="flex flex-col gap-3 p-4 bg-white/90 backdrop-blur-sm rounded-lg border shadow-lg min-w-[350px]">
+      {/* Stats */}
+      <div className="grid grid-cols-3 gap-2">
+        <div className="flex flex-col items-center p-2 bg-muted/50 rounded">
+          <div className="flex items-center gap-1 text-muted-foreground mb-1">
+            <Server className="h-3 w-3" />
+            <span className="text-xs">Servers</span>
+          </div>
+          <span className="text-lg font-bold">{metadata.totalServers}</span>
+        </div>
+        <div className="flex flex-col items-center p-2 bg-muted/50 rounded">
+          <div className="flex items-center gap-1 text-muted-foreground mb-1">
+            <Globe className="h-3 w-3" />
+            <span className="text-xs">Proxies</span>
+          </div>
+          <span className="text-lg font-bold">{metadata.totalProxies}</span>
+        </div>
+        <div className="flex flex-col items-center p-2 bg-muted/50 rounded">
+          <div className="flex items-center gap-1 text-muted-foreground mb-1">
+            <Box className="h-3 w-3" />
+            <span className="text-xs">Nodes</span>
+          </div>
+          <span className="text-lg font-bold">{metadata.totalK8sNodes}</span>
+        </div>
+      </div>
+
+      {/* Health Status */}
+      <div className="flex gap-2 justify-between text-xs">
+        <Badge variant="outline" className="flex items-center gap-1">
+          <div className="w-2 h-2 rounded-full bg-green-500" />
+          {metadata.healthySystems} Healthy
+        </Badge>
+        <Badge variant="outline" className="flex items-center gap-1">
+          <div className="w-2 h-2 rounded-full bg-yellow-500" />
+          {metadata.degradedSystems} Degraded
+        </Badge>
+        <Badge variant="outline" className="flex items-center gap-1">
+          <div className="w-2 h-2 rounded-full bg-red-500" />
+          {metadata.unhealthySystems} Down
+        </Badge>
+      </div>
+
+      {/* Search */}
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+        <Input
+          placeholder="Search..."
+          value={searchQuery}
+          onChange={(e) => handleSearchChange(e.target.value)}
+          className="pl-9"
+        />
+      </div>
+
+      {/* Filters */}
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="outline" size="sm" className="w-full">
+            <Filter className="h-4 w-4 mr-2" />
+            Filters
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-80" align="start">
+          <div className="space-y-4">
+            <div>
+              <h4 className="font-semibold mb-3">Show/Hide</h4>
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="show-servers" className="flex items-center gap-2 cursor-pointer">
+                    <Server className="h-4 w-4" />
+                    <span>Servers</span>
+                  </Label>
+                  <Switch
+                    id="show-servers"
+                    checked={filters.showServers}
+                    onCheckedChange={() => toggleFilter("showServers")}
+                  />
+                </div>
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="show-proxies" className="flex items-center gap-2 cursor-pointer">
+                    <Globe className="h-4 w-4" />
+                    <span>Reverse Proxies</span>
+                  </Label>
+                  <Switch
+                    id="show-proxies"
+                    checked={filters.showProxies}
+                    onCheckedChange={() => toggleFilter("showProxies")}
+                  />
+                </div>
+                <div className="flex items-center justify-between">
+                  <Label
+                    htmlFor="show-k8s-nodes"
+                    className="flex items-center gap-2 cursor-pointer"
+                  >
+                    <Box className="h-4 w-4" />
+                    <span>K8s Nodes</span>
+                  </Label>
+                  <Switch
+                    id="show-k8s-nodes"
+                    checked={filters.showK8sNodes}
+                    onCheckedChange={() => toggleFilter("showK8sNodes")}
+                  />
+                </div>
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="show-connections" className="cursor-pointer">
+                    Connection Lines
+                  </Label>
+                  <Switch
+                    id="show-connections"
+                    checked={filters.showConnections}
+                    onCheckedChange={() => toggleFilter("showConnections")}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

apps/web/components/topology/layouts/hierarchical-layout.ts

@@ -0,0 +1,83 @@
+import type { TopologyEdge, TopologyNode } from "@/lib/topology-types";
+
+const LAYOUT_CONFIG = {
+  TIER_SPACING: 300, // Vertical spacing between proxy and server tiers
+  NODE_SPACING: 250, // Horizontal spacing between nodes
+  START_X: 150, // Left padding
+  START_Y: 100, // Top padding
+} as const;
+
+export function applyHierarchicalLayout(
+  nodes: TopologyNode[],
+  edges: TopologyEdge[]
+): { nodes: TopologyNode[]; edges: TopologyEdge[] } {
+  const proxyNodes = nodes.filter((n) => n.data.type === "proxy");
+  const serverNodes = nodes.filter((n) => n.data.type === "server");
+
+  const layoutedNodes: TopologyNode[] = [];
+
+  const maxNodesInTier = Math.max(proxyNodes.length, serverNodes.length);
+  const tierWidth = maxNodesInTier * LAYOUT_CONFIG.NODE_SPACING;
+
+  const proxyOffsetX = (tierWidth - proxyNodes.length * LAYOUT_CONFIG.NODE_SPACING) / 2;
+  proxyNodes.forEach((node, index) => {
+    const x = LAYOUT_CONFIG.START_X + proxyOffsetX + index * LAYOUT_CONFIG.NODE_SPACING;
+    const y = LAYOUT_CONFIG.START_Y;
+
+    layoutedNodes.push({
+      ...node,
+      position: { x, y },
+    });
+  });
+
+  const serverOffsetX = (tierWidth - serverNodes.length * LAYOUT_CONFIG.NODE_SPACING) / 2;
+  serverNodes.forEach((node, index) => {
+    const x = LAYOUT_CONFIG.START_X + serverOffsetX + index * LAYOUT_CONFIG.NODE_SPACING;
+    const y = LAYOUT_CONFIG.START_Y + LAYOUT_CONFIG.TIER_SPACING;
+
+    layoutedNodes.push({
+      ...node,
+      position: { x, y },
+    });
+  });
+
+  return {
+    nodes: layoutedNodes,
+    edges,
+  };
+}
+
+export function applyGridLayout(
+  nodes: TopologyNode[],
+  edges: TopologyEdge[]
+): { nodes: TopologyNode[]; edges: TopologyEdge[] } {
+  const columns = Math.ceil(Math.sqrt(nodes.length));
+
+  const layoutedNodes = nodes.map((node, index) => ({
+    ...node,
+    position: {
+      x: LAYOUT_CONFIG.START_X + (index % columns) * LAYOUT_CONFIG.NODE_SPACING,
+      y: LAYOUT_CONFIG.START_Y + Math.floor(index / columns) * LAYOUT_CONFIG.TIER_SPACING,
+    },
+  }));
+
+  return {
+    nodes: layoutedNodes,
+    edges,
+  };
+}
+
+export function layoutTopologyGraph(
+  nodes: TopologyNode[],
+  edges: TopologyEdge[]
+): { nodes: TopologyNode[]; edges: TopologyEdge[] } {
+  if (nodes.length === 0) {
+    return { nodes: [], edges: [] };
+  }
+
+  if (nodes.length < 20) {
+    return applyHierarchicalLayout(nodes, edges);
+  }
+
+  return applyGridLayout(nodes, edges);
+}

apps/web/components/topology/nodes/k8s-node.tsx

@@ -0,0 +1,142 @@
+import type { NodeProps } from "@xyflow/react";
+import { Handle, Position } from "@xyflow/react";
+import { Box, Cpu, HardDrive, Network, Server as ServerIcon } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/cn";
+import type { K8sNodeMetadata, TopologyNodeData } from "@/lib/topology-types";
+
+export function K8sNodeComponent({ data, selected }: NodeProps) {
+  const nodeData = data as TopologyNodeData;
+  const metadata = nodeData.metadata as K8sNodeMetadata;
+  const { node, podCount, serverPods, proxyPods, health, metrics } = metadata;
+
+  const getStatusBadge = () => {
+    switch (health) {
+      case "healthy":
+        return <Badge className="bg-green-500 hover:bg-green-600 text-xs">Healthy</Badge>;
+      case "degraded":
+        return <Badge className="bg-yellow-500 hover:bg-yellow-600 text-xs">Degraded</Badge>;
+      case "unhealthy":
+        return <Badge className="bg-red-500 hover:bg-red-600 text-xs">Unhealthy</Badge>;
+      default:
+        return (
+          <Badge variant="secondary" className="text-xs">
+            Unknown
+          </Badge>
+        );
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        "rounded-lg border bg-card p-3 shadow-md hover:shadow-lg transition-all w-[300px]",
+        selected && "ring-2 ring-primary ring-offset-2 shadow-xl"
+      )}
+    >
+      <Handle type="target" position={Position.Top} className="w-3 h-3 !bg-gray-400" />
+
+      <div className="space-y-2.5">
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex items-center gap-2 flex-1 min-w-0">
+            <div className="rounded-md bg-blue-500/10 p-1.5">
+              <Box className="h-4 w-4 text-blue-600" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="font-bold text-sm truncate">{node.name || "Unknown"}</p>
+              <p className="text-xs text-muted-foreground">Kubernetes Node</p>
+            </div>
+          </div>
+          {getStatusBadge()}
+        </div>
+
+        <div className="flex flex-wrap gap-1">
+          <Badge variant="outline" className="text-[10px] h-5">
+            {node.status}
+          </Badge>
+          {node.version && (
+            <Badge variant="outline" className="text-[10px] h-5">
+              {node.version}
+            </Badge>
+          )}
+          <Badge variant="outline" className="text-[10px] h-5">
+            {node.roles}
+          </Badge>
+        </div>
+
+        <div className="flex items-center justify-between text-xs bg-muted/50 rounded px-2 py-1.5">
+          <span className="text-muted-foreground">Total Pods</span>
+          <span className="font-semibold text-blue-600">{podCount}</span>
+        </div>
+
+        <div className="space-y-1 text-[11px]">
+          <div className="flex items-center justify-between">
+            <span className="text-muted-foreground flex items-center gap-1">
+              <ServerIcon className="h-3 w-3" /> Server Pods
+            </span>
+            <span className="font-medium">{serverPods.length}</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-muted-foreground flex items-center gap-1">
+              <Network className="h-3 w-3" /> Proxy Pods
+            </span>
+            <span className="font-medium">{proxyPods.length}</span>
+          </div>
+        </div>
+
+        {metrics && (metrics.cpuUsage || metrics.memoryUsage) && (
+          <div className="space-y-1 text-[11px] pt-1 border-t">
+            {metrics.cpuUsage && (
+              <div className="flex items-center justify-between">
+                <span className="text-muted-foreground flex items-center gap-1">
+                  <Cpu className="h-3 w-3" /> CPU
+                </span>
+                <span className="font-semibold text-xs text-blue-600">{metrics.cpuUsage}</span>
+              </div>
+            )}
+            {metrics.memoryUsage && (
+              <div className="flex items-center justify-between">
+                <span className="text-muted-foreground flex items-center gap-1">
+                  <HardDrive className="h-3 w-3" /> Memory
+                </span>
+                <span className="font-semibold text-xs text-blue-600">{metrics.memoryUsage}</span>
+              </div>
+            )}
+          </div>
+        )}
+
+        <div className="space-y-1 text-[11px] pt-1 border-t">
+          <div className="flex items-center justify-between">
+            <span className="text-muted-foreground">Age</span>
+            <span className="font-medium">{node.age}</span>
+          </div>
+          {node.hostname && (
+            <div className="flex items-center justify-between">
+              <span className="text-muted-foreground">Hostname</span>
+              <span className="font-medium font-mono text-[10px] truncate">{node.hostname}</span>
+            </div>
+          )}
+        </div>
+
+        {(node.internalIP || node.externalIP) && (
+          <div className="space-y-1 text-[11px] pt-1 border-t">
+            {node.internalIP && (
+              <div className="flex items-center justify-between">
+                <span className="text-muted-foreground">Internal IP</span>
+                <span className="font-mono text-[10px] font-medium">{node.internalIP}</span>
+              </div>
+            )}
+            {node.externalIP && (
+              <div className="flex items-center justify-between">
+                <span className="text-muted-foreground">External IP</span>
+                <span className="font-mono text-[10px] font-medium">{node.externalIP}</span>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      <Handle type="source" position={Position.Bottom} className="w-3 h-3 !bg-gray-400" />
+    </div>
+  );
+}

apps/web/components/topology/nodes/node-types.ts

@@ -0,0 +1,9 @@
+import { K8sNodeComponent } from "./k8s-node";
+import { ProxyNode } from "./proxy-node";
+import { ServerNode } from "./server-node";
+
+export const nodeTypes = {
+  server: ServerNode,
+  proxy: ProxyNode,
+  "k8s-node": K8sNodeComponent,
+};

apps/web/components/topology/nodes/proxy-node.tsx

@@ -0,0 +1,206 @@
+import type { NodeProps } from "@xyflow/react";
+import { Handle, Position } from "@xyflow/react";
+import { Box, Check, Copy, Cpu, Globe, HardDrive, Network } from "lucide-react";
+import { useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/cn";
+import type { ProxyMetadata, TopologyNodeData } from "@/lib/topology-types";
+
+export function ProxyNode({ data, selected }: NodeProps) {
+  const nodeData = data as TopologyNodeData | TopologyNodeData;
+  const metadata = nodeData.metadata as ProxyMetadata | ProxyMetadata;
+  const { proxy, readyPods, podCount, health, connectedServers } = metadata;
+
+  const k8sNodes = "k8sNodes" in metadata ? metadata.k8sNodes : [];
+  const connectionInfo = "connectionInfo" in metadata ? metadata.connectionInfo : null;
+  const metrics = "metrics" in metadata ? metadata.metrics : undefined;
+
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (connectionInfo?.connectionString) {
+      await navigator.clipboard.writeText(connectionInfo.connectionString);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const getStatusBadge = () => {
+    switch (health) {
+      case "healthy":
+        return <Badge className="bg-green-500 hover:bg-green-600 text-xs">Healthy</Badge>;
+      case "degraded":
+        return <Badge className="bg-yellow-500 hover:bg-yellow-600 text-xs">Degraded</Badge>;
+      case "unhealthy":
+        return <Badge className="bg-red-500 hover:bg-red-600 text-xs">Unhealthy</Badge>;
+      default:
+        return (
+          <Badge variant="secondary" className="text-xs">
+            Unknown
+          </Badge>
+        );
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        "rounded-lg border bg-card p-3 shadow-md hover:shadow-lg transition-all w-[300px]",
+        selected && "ring-2 ring-primary ring-offset-2 shadow-xl"
+      )}
+    >
+      <Handle type="target" position={Position.Top} className="w-3 h-3 !bg-gray-400" />
+
+      <div className="space-y-2.5">
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex items-center gap-2 flex-1 min-w-0">
+            <div className="rounded-md bg-blue-500/10 p-1.5">
+              <Globe className="h-4 w-4 text-blue-500" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="font-bold text-sm truncate">{proxy.id}</p>
+              {proxy.description && (
+                <p className="text-xs text-muted-foreground truncate">{proxy.description}</p>
+              )}
+            </div>
+          </div>
+          {getStatusBadge()}
+        </div>
+
+        <div className="flex flex-wrap gap-1">
+          <Badge variant="outline" className="text-[10px] h-5">
+            {proxy.type}
+          </Badge>
+          {connectionInfo && (
+            <Badge variant="outline" className="text-[10px] h-5">
+              {connectionInfo.type}
+            </Badge>
+          )}
+        </div>
+
+        <div className="flex items-center justify-between text-xs bg-muted/50 rounded px-2 py-1.5">
+          <span className="text-muted-foreground">Pods</span>
+          <span
+            className={cn(
+              "font-semibold",
+              readyPods === podCount ? "text-green-600" : "text-yellow-600"
+            )}
+          >
+            {readyPods}/{podCount}
+          </span>
+        </div>
+
+        {proxy.node_port && (
+          <div className="space-y-1 text-[11px]">
+            <div className="flex items-center justify-between">
+              <span className="text-muted-foreground flex items-center gap-1">
+                <Network className="h-3 w-3" /> NodePort
+              </span>
+              <span className="font-medium">{proxy.node_port}</span>
+            </div>
+          </div>
+        )}
+
+        {connectionInfo?.connectionString && (
+          <div className="space-y-1 text-[11px] pt-1 border-t">
+            <div className="flex items-center justify-between">
+              <span className="text-muted-foreground">Address</span>
+            </div>
+            <div className="flex items-center gap-1">
+              <code className="text-[10px] bg-muted px-1.5 py-0.5 rounded font-mono flex-1 truncate">
+                {connectionInfo.connectionString}
+              </code>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-5 w-5 shrink-0"
+                onClick={handleCopy}
+                title={copied ? "Copied!" : "Copy address"}
+              >
+                {copied ? (
+                  <Check className="h-3 w-3 text-green-500" />
+                ) : (
+                  <Copy className="h-3 w-3" />
+                )}
+              </Button>
+            </div>
+            {connectionInfo.note && (
+              <p className="text-[10px] text-muted-foreground italic">{connectionInfo.note}</p>
+            )}
+          </div>
+        )}
+
+        <div className="space-y-1 text-[11px] pt-1 border-t">
+          <div className="flex items-center justify-between">
+            <span className="text-muted-foreground flex items-center gap-1">
+              <HardDrive className="h-3 w-3" /> Memory
+            </span>
+            <span className="font-medium text-xs">
+              {metrics?.memoryUsage && (
+                <span className="text-blue-600">{metrics.memoryUsage} / </span>
+              )}
+              <span className="text-muted-foreground">{proxy.memory}MB</span>
+            </span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-muted-foreground flex items-center gap-1">
+              <Cpu className="h-3 w-3" /> CPU
+            </span>
+            <span className="font-medium text-xs">
+              {metrics?.cpuUsage && <span className="text-blue-600">{metrics.cpuUsage} / </span>}
+              <span className="text-muted-foreground">
+                {proxy.cpu_request || "N/A"}/{proxy.cpu_limit || "N/A"}
+              </span>
+            </span>
+          </div>
+        </div>
+
+        {"pods" in metadata && metadata.pods && metadata.pods.length > 0 && (
+          <div className="space-y-1 text-[11px] pt-1 border-t">
+            <div className="flex items-center justify-between">
+              <span className="text-muted-foreground">Restarts</span>
+              <span
+                className={cn(
+                  "font-medium",
+                  metadata.pods.reduce((sum, p) => sum + (p.restarts || 0), 0) > 0
+                    ? "text-yellow-600"
+                    : "text-green-600"
+                )}
+              >
+                {metadata.pods.reduce((sum, p) => sum + (p.restarts || 0), 0)}
+              </span>
+            </div>
+            {metadata.pods[0]?.age && (
+              <div className="flex items-center justify-between">
+                <span className="text-muted-foreground">Age</span>
+                <span className="font-medium">{metadata.pods[0].age}</span>
+              </div>
+            )}
+            {metadata.pods[0]?.ip && (
+              <div className="flex items-center justify-between">
+                <span className="text-muted-foreground">Pod IP</span>
+                <span className="font-medium font-mono text-[10px]">{metadata.pods[0].ip}</span>
+              </div>
+            )}
+            <div className="flex items-center justify-between">
+              <span className="text-muted-foreground">Routing To</span>
+              <span className="font-semibold text-blue-600">{connectedServers.length} servers</span>
+            </div>
+            {k8sNodes.length > 0 && (
+              <div className="flex items-center justify-between">
+                <span className="text-muted-foreground flex items-center gap-1">
+                  <Box className="h-3 w-3" /> K8s Node
+                </span>
+                <span className="font-medium">{k8sNodes[0]}</span>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      <Handle type="source" position={Position.Bottom} className="w-3 h-3 !bg-gray-400" />
+    </div>
+  );
+}

apps/web/components/topology/nodes/server-node.tsx

@@ -0,0 +1,210 @@
+import type { NodeProps } from "@xyflow/react";
+import { Handle, Position } from "@xyflow/react";
+import { Box, Check, Copy, Cpu, HardDrive, Server } from "lucide-react";
+import { useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/cn";
+import type { ServerMetadata, TopologyNodeData } from "@/lib/topology-types";
+
+export function ServerNode({ data, selected }: NodeProps) {
+  const nodeData = data as TopologyNodeData | TopologyNodeData;
+  const metadata = nodeData.metadata as ServerMetadata | ServerMetadata;
+  const { server, readyPods, podCount, health } = metadata;
+
+  const k8sNodes = "k8sNodes" in metadata ? metadata.k8sNodes : [];
+  const connectedProxies = "connectedProxies" in metadata ? metadata.connectedProxies : [];
+  const connectionInfo = "connectionInfo" in metadata ? metadata.connectionInfo : null;
+  const metrics = "metrics" in metadata ? metadata.metrics : undefined;
+
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (connectionInfo?.connectionString) {
+      await navigator.clipboard.writeText(connectionInfo.connectionString);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const getStatusBadge = () => {
+    switch (health) {
+      case "healthy":
+        return <Badge className="bg-green-500 hover:bg-green-600 text-xs">Healthy</Badge>;
+      case "degraded":
+        return <Badge className="bg-yellow-500 hover:bg-yellow-600 text-xs">Degraded</Badge>;
+      case "unhealthy":
+        return <Badge className="bg-red-500 hover:bg-red-600 text-xs">Unhealthy</Badge>;
+      default:
+        return (
+          <Badge variant="secondary" className="text-xs">
+            Unknown
+          </Badge>
+        );
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        "rounded-lg border bg-card p-3 shadow-md hover:shadow-lg transition-all w-[300px]",
+        selected && "ring-2 ring-primary ring-offset-2 shadow-xl"
+      )}
+    >
+      <Handle type="target" position={Position.Top} className="w-3 h-3 !bg-gray-400" />
+
+      <div className="space-y-2.5">
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex items-center gap-2 flex-1 min-w-0">
+            <div className="rounded-md bg-primary/10 p-1.5">
+              <Server className="h-4 w-4 text-primary" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="font-bold text-sm truncate">{server.id}</p>
+              {server.description && (
+                <p className="text-xs text-muted-foreground truncate">{server.description}</p>
+              )}
+            </div>
+          </div>
+          {getStatusBadge()}
+        </div>
+
+        <div className="flex flex-wrap gap-1">
+          <Badge variant="outline" className="text-[10px] h-5">
+            {server.jar_type}
+          </Badge>
+          <Badge variant="outline" className="text-[10px] h-5">
+            MC {server.minecraft_version}
+          </Badge>
+          <Badge variant="outline" className="text-[10px] h-5">
+            {server.type}
+          </Badge>
+          {connectionInfo && (
+            <Badge variant="outline" className="text-[10px] h-5">
+              {connectionInfo.type}
+            </Badge>
+          )}
+        </div>
+
+        <div className="flex items-center justify-between text-xs bg-muted/50 rounded px-2 py-1.5">
+          <span className="text-muted-foreground">Pods</span>
+          <span
+            className={cn(
+              "font-semibold",
+              readyPods === podCount ? "text-green-600" : "text-yellow-600"
+            )}
+          >
+            {readyPods}/{podCount}
+          </span>
+        </div>
+
+        <div className="space-y-1 text-[11px]">
+          <div className="flex items-center justify-between">
+            <span className="text-muted-foreground flex items-center gap-1">
+              <HardDrive className="h-3 w-3" /> Memory
+            </span>
+            <span className="font-medium text-xs">
+              {metrics?.memoryUsage && (
+                <span className="text-blue-600">{metrics.memoryUsage} / </span>
+              )}
+              <span className="text-muted-foreground">
+                {server.memory_request}/{server.memory}MB
+              </span>
+            </span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-muted-foreground flex items-center gap-1">
+              <Cpu className="h-3 w-3" /> CPU
+            </span>
+            <span className="font-medium text-xs">
+              {metrics?.cpuUsage && <span className="text-blue-600">{metrics.cpuUsage} / </span>}
+              <span className="text-muted-foreground">
+                {server.cpu_request || "N/A"}/{server.cpu_limit || "N/A"}
+              </span>
+            </span>
+          </div>
+        </div>
+
+        {connectionInfo?.connectionString && (
+          <div className="space-y-1 text-[11px] pt-1 border-t">
+            <div className="flex items-center gap-1">
+              <code className="text-[10px] bg-muted px-1.5 py-0.5 rounded font-mono flex-1 truncate">
+                {connectionInfo.connectionString}
+              </code>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-5 w-5 shrink-0"
+                onClick={handleCopy}
+                title={copied ? "Copied!" : "Copy address"}
+              >
+                {copied ? (
+                  <Check className="h-3 w-3 text-green-500" />
+                ) : (
+                  <Copy className="h-3 w-3" />
+                )}
+              </Button>
+            </div>
+            {connectionInfo.note && (
+              <p className="text-[10px] text-muted-foreground italic">{connectionInfo.note}</p>
+            )}
+          </div>
+        )}
+
+        {"pods" in metadata && metadata.pods && metadata.pods.length > 0 && (
+          <div className="space-y-1 text-[11px] pt-1 border-t">
+            <div className="flex items-center justify-between">
+              <span className="text-muted-foreground">Restarts</span>
+              <span
+                className={cn(
+                  "font-medium",
+                  metadata.pods.reduce((sum, p) => sum + (p.restarts || 0), 0) > 0
+                    ? "text-yellow-600"
+                    : "text-green-600"
+                )}
+              >
+                {metadata.pods.reduce((sum, p) => sum + (p.restarts || 0), 0)}
+              </span>
+            </div>
+            {metadata.pods[0]?.age && (
+              <div className="flex items-center justify-between">
+                <span className="text-muted-foreground">Age</span>
+                <span className="font-medium">{metadata.pods[0].age}</span>
+              </div>
+            )}
+            {metadata.pods[0]?.ip && (
+              <div className="flex items-center justify-between">
+                <span className="text-muted-foreground">Pod IP</span>
+                <span className="font-medium font-mono text-[10px]">{metadata.pods[0].ip}</span>
+              </div>
+            )}
+          </div>
+        )}
+
+        {(k8sNodes.length > 0 || connectedProxies.length > 0) && (
+          <div className="space-y-1 text-[11px] pt-1 border-t">
+            {connectedProxies.length > 0 && (
+              <div className="flex items-center justify-between">
+                <span className="text-muted-foreground">Exposed By</span>
+                <span className="font-semibold text-blue-600">
+                  {connectedProxies.length} proxies
+                </span>
+              </div>
+            )}
+            {k8sNodes.length > 0 && (
+              <div className="flex items-center justify-between">
+                <span className="text-muted-foreground flex items-center gap-1">
+                  <Box className="h-3 w-3" /> K8s Node
+                </span>
+                <span className="font-medium">{k8sNodes[0]}</span>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      <Handle type="source" position={Position.Bottom} className="w-3 h-3 !bg-gray-400" />
+    </div>
+  );
+}

apps/web/components/topology/topology-canvas.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { Background, BackgroundVariant, Controls, MiniMap, Panel, ReactFlow } from "@xyflow/react";
+import { useCallback, useMemo, useState } from "react";
+import "@xyflow/react/dist/style.css";
+import { useGraphLayout } from "@/hooks/use-graph-layout";
+import type { TopologyFilters, TopologyGraph, TopologyNodeData } from "@/lib/topology-types";
+import { filterEdges, filterNodes } from "@/lib/topology-utils";
+import { NodeDetailsPanel } from "./controls/node-details-panel";
+import { TopologyToolbar } from "./controls/topology-toolbar";
+import { nodeTypes } from "./nodes/node-types";
+
+interface TopologyCanvasProps {
+  graph: TopologyGraph;
+}
+
+export function TopologyCanvas({ graph }: TopologyCanvasProps) {
+  const [selectedNode, setSelectedNode] = useState<TopologyNodeData | null>(null);
+  const [filters, setFilters] = useState<TopologyFilters>({
+    showServers: true,
+    showProxies: true,
+    showK8sNodes: true,
+    showConnections: true,
+    searchQuery: "",
+  });
+
+  const filteredNodes = useMemo(() => {
+    return filterNodes(graph.nodes, filters);
+  }, [graph.nodes, filters]);
+
+  const filteredEdges = useMemo(() => {
+    if (!filters.showConnections) return [];
+    const visibleNodeIds = new Set(filteredNodes.map((node) => node.id));
+    return filterEdges(graph.edges, visibleNodeIds);
+  }, [graph.edges, filteredNodes, filters.showConnections]);
+
+  const { nodes, edges } = useGraphLayout({
+    nodes: filteredNodes,
+    edges: filteredEdges,
+  });
+
+  const onNodeClick = useCallback((_event: React.MouseEvent, node: any) => {
+    setSelectedNode(node.data as TopologyNodeData);
+  }, []);
+
+  const onPaneClick = useCallback(() => {
+    setSelectedNode(null);
+  }, []);
+
+  const handleCloseDetails = useCallback(() => {
+    setSelectedNode(null);
+  }, []);
+
+  return (
+    <div className="h-[calc(100vh-250px)] w-full rounded-lg border bg-background shadow-xl">
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        nodeTypes={nodeTypes}
+        onNodeClick={onNodeClick}
+        onPaneClick={onPaneClick}
+        fitView
+        fitViewOptions={{
+          padding: 0.2,
+          includeHiddenNodes: false,
+          minZoom: 0.1,
+          maxZoom: 1.5,
+        }}
+        minZoom={0.1}
+        maxZoom={1.5}
+        defaultEdgeOptions={{
+          animated: false,
+          type: "smoothstep",
+          style: {
+            stroke: "#9ca3af",
+            strokeWidth: 2,
+            strokeDasharray: "5 5",
+          },
+          markerEnd: {
+            type: "arrowclosed",
+            color: "#9ca3af",
+            width: 20,
+            height: 20,
+          },
+        }}
+        proOptions={{ hideAttribution: true }}
+      >
+        <Background variant={BackgroundVariant.Dots} color="#cbd5e1" gap={24} size={1} />
+        <Controls
+          showZoom
+          showFitView
+          showInteractive
+          className="bg-white/80 backdrop-blur-sm border shadow-lg"
+        />
+        <MiniMap
+          nodeColor={(node: any) => {
+            const data = node.data as TopologyNodeData;
+            const colors = {
+              healthy: "#22c55e",
+              degraded: "#eab308",
+              unhealthy: "#ef4444",
+              unknown: "#94a3b8",
+            };
+            return colors[data.status] || "#94a3b8";
+          }}
+          maskColor="rgba(0, 0, 0, 0.05)"
+          className="bg-white/80 backdrop-blur-sm border shadow-lg"
+        />
+
+        <Panel position="top-left">
+          <div className="m-2">
+            <TopologyToolbar
+              filters={filters}
+              onFiltersChange={setFilters}
+              metadata={graph.metadata}
+            />
+          </div>
+        </Panel>
+      </ReactFlow>
+
+      <NodeDetailsPanel
+        node={selectedNode}
+        open={selectedNode !== null}
+        onClose={handleCloseDetails}
+      />
+    </div>
+  );
+}

apps/web/components/ui/accordion.tsx

@@ -1,24 +1,20 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDown } from "lucide-react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/cn";
 
-const Accordion = AccordionPrimitive.Root
+const Accordion = AccordionPrimitive.Root;
 
 const AccordionItem = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
 >(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item
-    ref={ref}
-    className={cn("border-b", className)}
-    {...props}
-  />
-))
-AccordionItem.displayName = "AccordionItem"
+  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
+));
+AccordionItem.displayName = "AccordionItem";
 
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
@@ -37,8 +33,8 @@ const AccordionTrigger = React.forwardRef<
       <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 
 const AccordionContent = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Content>,
@@ -51,8 +47,8 @@ const AccordionContent = React.forwardRef<
   >
     <div className={cn("pb-4 pt-0", className)}>{children}</div>
   </AccordionPrimitive.Content>
-))
+));
 
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

apps/web/components/ui/avatar.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import type * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import type * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/cn";
 
 function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
   return (

apps/web/components/ui/badge.tsx

@@ -1,8 +1,8 @@
-import type * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/cn";
 
 const badgeVariants = cva(
   "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",

apps/web/components/ui/button.tsx

@@ -1,8 +1,8 @@
-import type * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/cn";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",

apps/web/components/ui/card.tsx

@@ -1,6 +1,6 @@
 import type * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/cn";
 
 function Card({ className, ...props }: React.ComponentProps<"div">) {
   return (

apps/web/components/ui/checkbox.tsx

@@ -1,10 +1,10 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { Check } from "lucide-react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/cn";
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
@@ -18,13 +18,11 @@ const Checkbox = React.forwardRef<
     )}
     {...props}
   >
-    <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
-    >
+    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
       <Check className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-export { Checkbox }
+export { Checkbox };

apps/web/components/ui/dialog.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import type * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { XIcon } from "lucide-react";
+import type * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/cn";
 
 function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
   return <DialogPrimitive.Root data-slot="dialog" {...props} />;

apps/web/components/ui/dropdown-menu.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import type * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import type * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/cn";
 
 function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
   return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;

apps/web/components/ui/form.tsx

@@ -1,20 +1,19 @@
 "use client";
 
-import * as React from "react";
 import type * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
 import {
   Controller,
-  FormProvider,
-  useFormContext,
-  useFormState,
   type ControllerProps,
   type FieldPath,
   type FieldValues,
+  FormProvider,
+  useFormContext,
+  useFormState,
 } from "react-hook-form";
-
-import { cn } from "@/lib/utils";
 import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/cn";
 
 const Form = FormProvider;
 

apps/web/components/ui/input.tsx

@@ -1,6 +1,6 @@
 import type * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/cn";
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (

apps/web/components/ui/label.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import type * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
+import type * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/cn";
 
 function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
   return (

apps/web/components/ui/popover.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+
+import { cn } from "@/lib/cn";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };

apps/web/components/ui/select.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import type * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import type * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/cn";
 
 function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
   return <SelectPrimitive.Root data-slot="select" {...props} />;

apps/web/components/ui/separator.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import type * as React from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import type * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/cn";
 
 function Separator({
   className,

apps/web/components/ui/sheet.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import type * as React from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { XIcon } from "lucide-react";
+import type * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/cn";
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
   return <SheetPrimitive.Root data-slot="sheet" {...props} />;

apps/web/components/ui/sidebar.tsx

@@ -16,7 +16,7 @@ import {
 } from "@/components/ui/sheet";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/cn";
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
@@ -82,7 +82,7 @@ function SidebarProvider({
     } else {
       setOpen((open) => !open);
     }
-  }, [setOpen, setOpenMobile]);
+  }, [setOpen]);
 
   React.useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -107,7 +107,7 @@ function SidebarProvider({
       setOpenMobile,
       toggleSidebar,
     }),
-    [state, open, setOpen, openMobile, setOpenMobile, toggleSidebar]
+    [state, open, setOpen, openMobile, toggleSidebar]
   );
 
   return (

apps/web/components/ui/skeleton.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/cn";
 
 function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (

apps/web/components/ui/switch.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React from "react";
+
+import { cn } from "@/lib/cn";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

apps/web/components/ui/table.tsx

@@ -2,7 +2,7 @@
 
 import type * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/cn";
 
 function Table({ className, ...props }: React.ComponentProps<"table">) {
   return (

apps/web/components/ui/tabs.tsx

@@ -1,27 +1,21 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import type * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/cn";
 
-function Tabs({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
   return (
     <TabsPrimitive.Root
       data-slot="tabs"
       className={cn("flex flex-col gap-2", className)}
       {...props}
     />
-  )
+  );
 }
 
-function TabsList({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.List>) {
+function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
   return (
     <TabsPrimitive.List
       data-slot="tabs-list"
@@ -31,13 +25,10 @@ function TabsList({
       )}
       {...props}
     />
-  )
+  );
 }
 
-function TabsTrigger({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
   return (
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
@@ -47,20 +38,17 @@ function TabsTrigger({
       )}
       {...props}
     />
-  )
+  );
 }
 
-function TabsContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
   return (
     <TabsPrimitive.Content
       data-slot="tabs-content"
       className={cn("flex-1 outline-none", className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsList, TabsTrigger, TabsContent };

apps/web/components/ui/textarea.tsx

@@ -1,9 +1,8 @@
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/cn";
 
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => {

apps/web/components/ui/tooltip.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import type * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import type * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/cn";
 
 function TooltipProvider({
   delayDuration = 0,

apps/web/hooks/use-graph-layout.ts

@@ -0,0 +1,163 @@
+"use client";
+
+import { Position } from "@xyflow/react";
+import { useMemo } from "react";
+import type {
+  ProxyMetadata,
+  ServerMetadata,
+  TopologyEdge,
+  TopologyNode,
+} from "@/lib/topology-types";
+
+interface LayoutInput {
+  nodes: TopologyNode[];
+  edges: TopologyEdge[];
+}
+
+export function useGraphLayout({ nodes, edges }: LayoutInput) {
+  const layoutedNodes = useMemo(() => {
+    const k8sNodes = nodes.filter((n) => n.data.type === "k8s-node");
+    const serverNodes = nodes.filter((n) => n.data.type === "server");
+    const proxyNodes = nodes.filter((n) => n.data.type === "proxy");
+
+    const nodeSpacing = {
+      x: 350,
+      y: 350,
+    };
+
+    const nodeWidth = 320;
+    const layoutedNodesList: TopologyNode[] = [];
+
+    const k8sNodeGroups = new Map<string, TopologyNode[]>();
+    const orphanedNodes: TopologyNode[] = [];
+
+    const appNodes = [...serverNodes, ...proxyNodes];
+
+    appNodes.forEach((node) => {
+      const metadata = node.data.metadata as ServerMetadata | ProxyMetadata;
+      const k8sNodeNames = metadata.k8sNodes || [];
+
+      if (k8sNodeNames.length === 0) {
+        orphanedNodes.push(node);
+      } else {
+        const k8sNodeName = k8sNodeNames[0];
+        const k8sNodeId = `k8s-node-${k8sNodeName}`;
+        if (!k8sNodeGroups.has(k8sNodeId)) {
+          k8sNodeGroups.set(k8sNodeId, []);
+        }
+        k8sNodeGroups.get(k8sNodeId)?.push(node);
+      }
+    });
+
+    const k8sWithApps = k8sNodes.filter((k8s) => {
+      const group = k8sNodeGroups.get(k8s.id) || [];
+      return group.length > 0;
+    });
+
+    const k8sWithoutApps = k8sNodes.filter((k8s) => {
+      const group = k8sNodeGroups.get(k8s.id) || [];
+      return group.length === 0;
+    });
+
+    const k8sNodeWidths = new Map<string, number>();
+    k8sWithApps.forEach((k8sNode) => {
+      const group = k8sNodeGroups.get(k8sNode.id) || [];
+      const width = Math.max(nodeWidth, group.length * nodeWidth);
+      k8sNodeWidths.set(k8sNode.id, width);
+    });
+
+    let currentX = 0;
+    const k8sNodePositions = new Map<string, { x: number; width: number }>();
+
+    k8sWithApps.forEach((k8sNode) => {
+      const width = k8sNodeWidths.get(k8sNode.id)!;
+      const centerX = currentX + width / 2;
+
+      k8sNodePositions.set(k8sNode.id, { x: centerX, width });
+
+      layoutedNodesList.push({
+        ...k8sNode,
+        position: {
+          x: centerX,
+          y: 0,
+        },
+        targetPosition: Position.Top,
+        sourcePosition: Position.Bottom,
+      });
+
+      currentX += width + nodeSpacing.x;
+    });
+
+    k8sWithoutApps.forEach((k8sNode) => {
+      const centerX = currentX + nodeWidth / 2;
+
+      k8sNodePositions.set(k8sNode.id, { x: centerX, width: nodeWidth });
+
+      layoutedNodesList.push({
+        ...k8sNode,
+        position: {
+          x: centerX,
+          y: 0,
+        },
+        targetPosition: Position.Top,
+        sourcePosition: Position.Bottom,
+      });
+
+      currentX += nodeWidth + nodeSpacing.x;
+    });
+
+    k8sNodeGroups.forEach((group, k8sNodeId) => {
+      const k8sPos = k8sNodePositions.get(k8sNodeId);
+      if (!k8sPos) return;
+
+      const groupWidth = group.length * nodeWidth;
+      const startX = k8sPos.x - groupWidth / 2 + nodeWidth / 2;
+
+      group.forEach((node, index) => {
+        const xPos = startX + index * nodeWidth;
+
+        layoutedNodesList.push({
+          ...node,
+          position: {
+            x: xPos,
+            y: nodeSpacing.y,
+          },
+          targetPosition: Position.Top,
+          sourcePosition: Position.Bottom,
+        });
+      });
+    });
+
+    orphanedNodes.forEach((node, index) => {
+      const xPos = currentX + index * nodeWidth;
+
+      layoutedNodesList.push({
+        ...node,
+        position: {
+          x: xPos,
+          y: nodeSpacing.y,
+        },
+        targetPosition: Position.Top,
+        sourcePosition: Position.Bottom,
+      });
+    });
+
+    if (layoutedNodesList.length > 0) {
+      const minX = Math.min(...layoutedNodesList.map((n) => n.position.x));
+      const maxX = Math.max(...layoutedNodesList.map((n) => n.position.x));
+      const totalWidth = maxX - minX;
+      const offsetX = -totalWidth / 2;
+
+      layoutedNodesList.forEach((node) => {
+        node.position.x += offsetX;
+      });
+    }
+
+    return layoutedNodesList;
+  }, [nodes]);
+
+  return {
+    nodes: layoutedNodes,
+    edges,
+  };
+}

apps/web/hooks/use-k8s-resources.ts

@@ -10,7 +10,7 @@ import type {
 } from "@minikura/api";
 import { LABEL_PREFIX } from "@minikura/api";
 import { useCallback, useEffect, useState } from "react";
-import { api } from "@/lib/api";
+import { api } from "@/lib/api-client";
 
 export function useK8sResources() {
   const [statefulSets, setStatefulSets] = useState<StatefulSetInfo[]>([]);
@@ -19,15 +19,15 @@ export function useK8sResources() {
   const [configMaps, setConfigMaps] = useState<K8sConfigMapSummary[]>([]);
   const [minecraftServers, setMinecraftServers] = useState<CustomResourceSummary[]>([]);
   const [reverseProxyServers, setReverseProxyServers] = useState<CustomResourceSummary[]>([]);
-  const [status, setStatus] = useState<K8sStatus>({ initialized: false });
+  const [status, _setStatus] = useState<K8sStatus>({ initialized: false });
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
   const fetchData = useCallback(async () => {
     try {
       const [
-        statusRes,
-        podsRes,
+        _statusRes,
+        _podsRes,
         deploymentsRes,
         statefulSetsRes,
         servicesRes,
@@ -47,38 +47,26 @@ export function useK8sResources() {
 
       if (statefulSetsRes.status === "fulfilled" && statefulSetsRes.value.data) {
         setStatefulSets(statefulSetsRes.value.data as StatefulSetInfo[]);
-      } else if (statefulSetsRes.status === "rejected") {
-        console.error("Failed to fetch statefulsets:", statefulSetsRes.reason);
       }
 
       if (deploymentsRes.status === "fulfilled" && deploymentsRes.value.data) {
         setDeployments(deploymentsRes.value.data as DeploymentInfo[]);
-      } else if (deploymentsRes.status === "rejected") {
-        console.error("Failed to fetch deployments:", deploymentsRes.reason);
       }
 
       if (servicesRes.status === "fulfilled" && servicesRes.value.data) {
         setServices(servicesRes.value.data as K8sServiceSummary[]);
-      } else if (servicesRes.status === "rejected") {
-        console.error("Failed to fetch services:", servicesRes.reason);
       }
 
       if (configMapsRes.status === "fulfilled" && configMapsRes.value.data) {
         setConfigMaps(configMapsRes.value.data as K8sConfigMapSummary[]);
-      } else if (configMapsRes.status === "rejected") {
-        console.error("Failed to fetch configmaps:", configMapsRes.reason);
       }
 
       if (minecraftServersRes.status === "fulfilled" && minecraftServersRes.value.data) {
         setMinecraftServers(minecraftServersRes.value.data as CustomResourceSummary[]);
-      } else if (minecraftServersRes.status === "rejected") {
-        console.error("Failed to fetch minecraft servers:", minecraftServersRes.reason);
       }
 
       if (reverseProxyServersRes.status === "fulfilled" && reverseProxyServersRes.value.data) {
         setReverseProxyServers(reverseProxyServersRes.value.data as CustomResourceSummary[]);
-      } else if (reverseProxyServersRes.status === "rejected") {
-        console.error("Failed to fetch reverse proxy servers:", reverseProxyServersRes.reason);
       }
     } catch (err: unknown) {
       const errorMessage =

apps/web/hooks/use-server-list.ts

@@ -2,8 +2,8 @@
 
 import type { NormalServer, ReverseProxyServer } from "@minikura/api";
 import { useCallback, useEffect, useState } from "react";
+import { api } from "@/lib/api-client";
 import { getReverseProxyApi } from "@/lib/api-helpers";
-import { api } from "@/lib/api";
 
 export function useServerList() {
   const [normalServers, setNormalServers] = useState<NormalServer[]>([]);
@@ -23,8 +23,7 @@ export function useServerList() {
       if (proxyRes.data) {
         setReverseProxies(proxyRes.data as unknown as ReverseProxyServer[]);
       }
-    } catch (error) {
-      console.error("Failed to fetch servers:", error);
+    } catch (_error) {
     } finally {
       setLoading(false);
     }
@@ -32,17 +31,12 @@ export function useServerList() {
 
   const deleteServer = useCallback(
     async (id: string, type: "normal" | "proxy") => {
-      try {
-        if (type === "normal") {
-          await api.api.servers({ id }).delete();
-        } else {
-          await getReverseProxyApi()({ id }).delete();
-        }
-        await fetchServers();
-      } catch (error) {
-        console.error("Failed to delete server:", error);
-        throw error;
+      if (type === "normal") {
+        await api.api.servers({ id }).delete();
+      } else {
+        await getReverseProxyApi()({ id }).delete();
       }
+      await fetchServers();
     },
     [fetchServers]
   );

apps/web/hooks/use-server-logs.ts

@@ -1,14 +1,9 @@
 "use client";
 
-import type {
-  ConnectionInfo,
-  DeploymentInfo,
-  PodInfo,
-  StatefulSetInfo,
-} from "@minikura/api";
+import type { ConnectionInfo, DeploymentInfo, PodInfo, StatefulSetInfo } from "@minikura/api";
 import { labelKeys } from "@minikura/api";
 import { useCallback, useState } from "react";
-import { api } from "@/lib/api";
+import { api } from "@/lib/api-client";
 
 export function useServerLogs(serverId: string) {
   const [pods, setPods] = useState<PodInfo[]>([]);
@@ -23,8 +18,7 @@ export function useServerLogs(serverId: string) {
       if (response.data) {
         setPods(response.data as PodInfo[]);
       }
-    } catch (error) {
-      console.error("Failed to fetch pods:", error);
+    } catch (_error) {
     } finally {
       setLoading(false);
     }
@@ -42,9 +36,7 @@ export function useServerLogs(serverId: string) {
           setStatefulSetInfo(serverStatefulSet);
         }
       }
-    } catch (error) {
-      console.error("Failed to fetch StatefulSet info:", error);
-    }
+    } catch (_error) {}
   }, [serverId]);
 
   const fetchDeploymentInfo = useCallback(async () => {
@@ -59,9 +51,7 @@ export function useServerLogs(serverId: string) {
           setDeploymentInfo(serverDeployment);
         }
       }
-    } catch (error) {
-      console.error("Failed to fetch Deployment info:", error);
-    }
+    } catch (_error) {}
   }, [serverId]);
 
   const fetchConnectionInfo = useCallback(async () => {
@@ -70,9 +60,7 @@ export function useServerLogs(serverId: string) {
       if (response.data) {
         setConnectionInfo(response.data as ConnectionInfo);
       }
-    } catch (error) {
-      console.error("Failed to fetch connection info:", error);
-    }
+    } catch (_error) {}
   }, [serverId]);
 
   const refreshAll = useCallback(async () => {

apps/web/hooks/use-topology-data.ts

@@ -0,0 +1,170 @@
+"use client";
+
+import type { ConnectionInfo, K8sNodeSummary, PodInfo } from "@minikura/api";
+import { useCallback, useEffect, useState } from "react";
+import { api } from "@/lib/api-client";
+import { getReverseProxyApi } from "@/lib/api-helpers";
+import type { TopologyGraph } from "@/lib/topology-types";
+import { buildTopologyGraph } from "@/lib/topology-utils";
+import { useServerList } from "./use-server-list";
+
+export function useTopologyData() {
+  const { normalServers, reverseProxies, loading: serversLoading } = useServerList();
+
+  const [graph, setGraph] = useState<TopologyGraph | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [isInitialLoad, setIsInitialLoad] = useState(true);
+
+  const fetchTopologyData = useCallback(
+    async (isRefresh = false) => {
+      try {
+        if (!isRefresh) {
+          setLoading(true);
+        }
+        setError(null);
+
+        const nodesResponse = await api.api.k8s.nodes.get();
+        const k8sNodes = (nodesResponse.data as K8sNodeSummary[]) || [];
+
+        const serverPodPromises = normalServers.map(async (server) => {
+          try {
+            const response = await api.api.k8s.servers({ serverId: server.id }).pods.get();
+            return {
+              serverId: server.id,
+              pods: (response.data as PodInfo[]) || [],
+            };
+          } catch (_err) {
+            return { serverId: server.id, pods: [] };
+          }
+        });
+
+        const proxyPodPromises = reverseProxies.map(async (proxy) => {
+          try {
+            const response = await api.api.k8s["reverse-proxy"]({
+              serverId: proxy.id,
+            }).pods.get();
+            return {
+              serverId: proxy.id,
+              pods: (response.data as PodInfo[]) || [],
+            };
+          } catch (_err) {
+            return { serverId: proxy.id, pods: [] };
+          }
+        });
+
+        const [serverPodsResults, proxyPodsResults] = await Promise.all([
+          Promise.all(serverPodPromises),
+          Promise.all(proxyPodPromises),
+        ]);
+
+        const serverPodsMap = new Map<string, PodInfo[]>();
+        for (const result of serverPodsResults) {
+          serverPodsMap.set(result.serverId, result.pods);
+        }
+
+        const proxyPodsMap = new Map<string, PodInfo[]>();
+        for (const result of proxyPodsResults) {
+          proxyPodsMap.set(result.serverId, result.pods);
+        }
+
+        const serverConnectionPromises = normalServers.map(async (server) => {
+          try {
+            const response = await api.api.servers({ id: server.id })["connection-info"].get();
+            return {
+              serverId: server.id,
+              connectionInfo: response.data as ConnectionInfo,
+            };
+          } catch (_err) {
+            return { serverId: server.id, connectionInfo: null };
+          }
+        });
+
+        const reverseProxyApi = getReverseProxyApi();
+        const proxyConnectionPromises = reverseProxies.map(async (proxy) => {
+          try {
+            const response = await reverseProxyApi({ id: proxy.id })["connection-info"].get();
+            return {
+              serverId: proxy.id,
+              connectionInfo: response.data as ConnectionInfo,
+            };
+          } catch (_err) {
+            return { serverId: proxy.id, connectionInfo: null };
+          }
+        });
+
+        const [serverConnectionResults, proxyConnectionResults] = await Promise.all([
+          Promise.all(serverConnectionPromises),
+          Promise.all(proxyConnectionPromises),
+        ]);
+
+        const serverConnectionMap = new Map<string, ConnectionInfo | null>();
+        for (const result of serverConnectionResults) {
+          serverConnectionMap.set(result.serverId, result.connectionInfo);
+        }
+
+        const proxyConnectionMap = new Map<string, ConnectionInfo | null>();
+        for (const result of proxyConnectionResults) {
+          proxyConnectionMap.set(result.serverId, result.connectionInfo);
+        }
+
+        let podMetrics: any = { items: [] };
+        let nodeMetrics: any = { items: [] };
+        try {
+          const [podMetricsRes, nodeMetricsRes] = await Promise.all([
+            api.api.k8s.metrics.pods.get(),
+            api.api.k8s.metrics.nodes.get(),
+          ]);
+          podMetrics = podMetricsRes.data || { items: [] };
+          nodeMetrics = nodeMetricsRes.data || { items: [] };
+        } catch (_err) {}
+
+        const topologyGraph = buildTopologyGraph({
+          servers: normalServers,
+          proxies: reverseProxies,
+          serverPods: serverPodsMap,
+          proxyPods: proxyPodsMap,
+          k8sNodes,
+          serverConnections: serverConnectionMap,
+          proxyConnections: proxyConnectionMap,
+          podMetrics,
+          nodeMetrics,
+        });
+
+        setGraph(topologyGraph);
+        setIsInitialLoad(false);
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : "Failed to fetch topology data";
+        setError(errorMessage);
+      } finally {
+        if (!isRefresh) {
+          setLoading(false);
+        }
+      }
+    },
+    [normalServers, reverseProxies]
+  );
+
+  useEffect(() => {
+    if (!serversLoading) {
+      fetchTopologyData();
+    }
+  }, [serversLoading, fetchTopologyData]);
+
+  useEffect(() => {
+    if (serversLoading || isInitialLoad) return;
+
+    const intervalId = setInterval(() => {
+      fetchTopologyData(true);
+    }, 5000);
+
+    return () => clearInterval(intervalId);
+  }, [serversLoading, isInitialLoad, fetchTopologyData]);
+
+  return {
+    graph,
+    loading: loading || serversLoading,
+    error,
+    refresh: fetchTopologyData,
+  };
+}

apps/web/lib/api-helpers.ts

@@ -1,8 +1,10 @@
-import { api } from "@/lib/api";
+import { api } from "@/lib/api-client";
 
 type ReverseProxyApi = {
   get: () => Promise<{ data?: unknown }>;
-  (params: { id: string }): {
+  (params: {
+    id: string;
+  }): {
     delete: () => Promise<{ data?: unknown; error?: unknown }>;
     "connection-info": { get: () => Promise<{ data?: unknown }> };
   };
@@ -10,7 +12,10 @@ type ReverseProxyApi = {
 
 type UserSuspensionApi = {
   suspension: {
-    patch: (body: { isSuspended: boolean; suspendedUntil: string | null }) => Promise<{ error?: unknown }>;
+    patch: (body: {
+      isSuspended: boolean;
+      suspendedUntil: string | null;
+    }) => Promise<{ error?: unknown }>;
   };
 };
 

apps/web/lib/auth-client.ts

@@ -1,5 +1,5 @@
-import { createAuthClient } from "better-auth/react";
 import { adminClient } from "better-auth/client/plugins";
+import { createAuthClient } from "better-auth/react";
 
 export const authClient = createAuthClient({
   baseURL: process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000",

apps/web/lib/cn.ts

@@ -1,4 +1,4 @@
-import { clsx, type ClassValue } from "clsx";
+import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {

apps/web/lib/k8s-metrics.ts

@@ -0,0 +1,72 @@
+export interface ResourceMetrics {
+  cpuUsage?: string;
+  cpuUsagePercent?: number;
+  memoryUsage?: string;
+  memoryUsagePercent?: number;
+}
+
+/** Convert CPU nanoseconds (e.g. "123456789n") to millicores (e.g. "123m") */
+export function parseCpuUsage(cpuNano: string): string | undefined {
+  const usageNano = Number.parseInt(cpuNano.replace("n", ""), 10);
+  if (Number.isNaN(usageNano)) return undefined;
+
+  const usageMilli = Math.round(usageNano / 1_000_000);
+  return `${usageMilli}m`;
+}
+
+export function calculateCpuPercent(cpuNano: string, capacityNano: string): number | undefined {
+  const usageNano = Number.parseInt(cpuNano.replace("n", ""), 10);
+  const capNano = Number.parseInt(capacityNano.replace("n", ""), 10);
+
+  if (Number.isNaN(usageNano) || Number.isNaN(capNano) || capNano === 0) {
+    return undefined;
+  }
+
+  return Math.round((usageNano / capNano) * 100);
+}
+
+/** Convert memory kibibytes (e.g. "1024Ki") to mebibytes (e.g. "1Mi") */
+export function parseMemoryUsage(memoryKi: string): string | undefined {
+  const usageKi = Number.parseInt(memoryKi.replace("Ki", ""), 10);
+  if (Number.isNaN(usageKi)) return undefined;
+
+  const usageMi = Math.round(usageKi / 1024);
+  return `${usageMi}Mi`;
+}
+
+export function calculateMemoryPercent(memoryKi: string, capacityKi: string): number | undefined {
+  const usageKi = Number.parseInt(memoryKi.replace("Ki", ""), 10);
+  const capKi = Number.parseInt(capacityKi.replace("Ki", ""), 10);
+
+  if (Number.isNaN(usageKi) || Number.isNaN(capKi) || capKi === 0) {
+    return undefined;
+  }
+
+  return Math.round((usageKi / capKi) * 100);
+}
+
+/** Parse raw K8s metrics into a standardized format with optional percentages */
+export function parseK8sMetrics(
+  cpuUsage?: string,
+  memoryUsage?: string,
+  cpuCapacity?: string,
+  memoryCapacity?: string
+): ResourceMetrics {
+  const result: ResourceMetrics = {};
+
+  if (cpuUsage) {
+    result.cpuUsage = parseCpuUsage(cpuUsage);
+    if (cpuCapacity) {
+      result.cpuUsagePercent = calculateCpuPercent(cpuUsage, cpuCapacity);
+    }
+  }
+
+  if (memoryUsage) {
+    result.memoryUsage = parseMemoryUsage(memoryUsage);
+    if (memoryCapacity) {
+      result.memoryUsagePercent = calculateMemoryPercent(memoryUsage, memoryCapacity);
+    }
+  }
+
+  return result;
+}

apps/web/lib/topology-types.ts

@@ -0,0 +1,100 @@
+import type {
+  ConnectionInfo,
+  K8sNodeSummary,
+  NormalServer,
+  PodInfo,
+  ReverseProxyServer,
+} from "@minikura/api";
+import type { Edge, Node } from "@xyflow/react";
+
+export type HealthStatus = "healthy" | "degraded" | "unhealthy" | "unknown";
+
+export type NodeType = "server" | "proxy" | "k8s-node";
+
+export type EdgeType = "proxy-to-server" | "pod-to-node";
+
+export interface ResourceMetrics {
+  cpuUsage?: string;
+  memoryUsage?: string;
+  cpuUsagePercent?: number;
+  memoryUsagePercent?: number;
+}
+
+export interface K8sNodeMetadata {
+  node: K8sNodeSummary;
+  podCount: number;
+  serverPods: string[]; // Pod names of servers
+  proxyPods: string[]; // Pod names of proxies
+  health: HealthStatus;
+  metrics?: ResourceMetrics;
+}
+
+export interface ServerMetadata {
+  server: NormalServer;
+  podCount: number;
+  readyPods: number;
+  pods: PodInfo[];
+  health: HealthStatus;
+  connectedProxies: string[]; // IDs of reverse proxies pointing to this server
+  k8sNodes: string[]; // Names of K8s nodes running this server's pods
+  connectionInfo?: ConnectionInfo | null;
+  metrics?: ResourceMetrics;
+}
+
+export interface ProxyMetadata {
+  proxy: ReverseProxyServer;
+  podCount: number;
+  readyPods: number;
+  pods: PodInfo[];
+  health: HealthStatus;
+  connectedServers: string[]; // IDs of servers this proxy routes to
+  k8sNodes: string[]; // Names of K8s nodes running this proxy's pods
+  connectionInfo?: ConnectionInfo | null;
+  metrics?: ResourceMetrics;
+}
+
+export type NodeMetadata = ServerMetadata | ProxyMetadata | K8sNodeMetadata;
+
+export interface TopologyNodeData extends Record<string, unknown> {
+  id: string;
+  type: NodeType;
+  label: string;
+  status: HealthStatus;
+  metadata: NodeMetadata;
+}
+
+export interface TopologyEdgeData extends Record<string, unknown> {
+  id: string;
+  source: string;
+  target: string;
+  type: EdgeType;
+  label?: string;
+  animated?: boolean;
+}
+
+export type TopologyNode = Node<TopologyNodeData, string>;
+export type TopologyEdge = Edge<TopologyEdgeData, string>;
+
+export interface TopologyGraph {
+  nodes: TopologyNode[];
+  edges: TopologyEdge[];
+  metadata: {
+    totalServers: number;
+    totalProxies: number;
+    totalK8sNodes: number;
+    totalConnections: number;
+    healthySystems: number;
+    degradedSystems: number;
+    unhealthySystems: number;
+  };
+}
+
+export interface TopologyFilters {
+  showServers: boolean;
+  showProxies: boolean;
+  showK8sNodes: boolean;
+  showConnections: boolean;
+  searchQuery: string;
+  filterByStatus?: HealthStatus;
+  filterByType?: string;
+}

apps/web/lib/topology-utils.ts

@@ -0,0 +1,365 @@
+import type {
+  ConnectionInfo,
+  K8sNodeSummary,
+  NormalServer,
+  PodInfo,
+  ReverseProxyServer,
+} from "@minikura/api";
+import { parseK8sMetrics } from "./k8s-metrics";
+import type {
+  HealthStatus,
+  K8sNodeMetadata,
+  ProxyMetadata,
+  ResourceMetrics,
+  ServerMetadata,
+  TopologyEdge,
+  TopologyGraph,
+  TopologyNode,
+} from "./topology-types";
+
+function parsePodReady(ready: string): { ready: number; total: number } {
+  const [readyStr, totalStr] = ready.split("/");
+  return {
+    ready: parseInt(readyStr, 10) || 0,
+    total: parseInt(totalStr, 10) || 0,
+  };
+}
+
+function calculateHealthStatus(readyPods: number, totalPods: number): HealthStatus {
+  if (totalPods === 0) return "unknown";
+  if (readyPods === totalPods) return "healthy";
+  if (readyPods > 0) return "degraded";
+  return "unhealthy";
+}
+
+function getPodMetrics(podName: string, podMetrics: any): ResourceMetrics | undefined {
+  if (!podMetrics?.items) return undefined;
+
+  const metric = podMetrics.items.find((m: any) => m.metadata?.name === podName);
+  if (!metric?.containers?.[0]?.usage) return undefined;
+
+  const usage = metric.containers[0].usage;
+  return parseK8sMetrics(usage.cpu, usage.memory);
+}
+
+function getNodeMetrics(nodeName: string, nodeMetrics: any): ResourceMetrics | undefined {
+  if (!nodeMetrics?.items) return undefined;
+
+  const metric = nodeMetrics.items.find((m: any) => m.metadata?.name === nodeName);
+  if (!metric?.usage) return undefined;
+
+  return parseK8sMetrics(metric.usage.cpu, metric.usage.memory);
+}
+
+interface BuildEnhancedGraphInput {
+  servers: NormalServer[];
+  proxies: ReverseProxyServer[];
+  serverPods: Map<string, PodInfo[]>;
+  proxyPods: Map<string, PodInfo[]>;
+  k8sNodes: K8sNodeSummary[];
+  serverConnections?: Map<string, ConnectionInfo | null>;
+  proxyConnections?: Map<string, ConnectionInfo | null>;
+  podMetrics?: any;
+  nodeMetrics?: any;
+}
+
+function parseProxyServerConnections(
+  _proxy: ReverseProxyServer,
+  allServers: NormalServer[]
+): string[] {
+  return allServers.map((s) => s.id);
+}
+
+export function buildTopologyGraph(input: BuildEnhancedGraphInput): TopologyGraph {
+  const {
+    servers,
+    proxies,
+    serverPods,
+    proxyPods,
+    k8sNodes,
+    serverConnections,
+    proxyConnections,
+    podMetrics,
+    nodeMetrics,
+  } = input;
+
+  const nodes: TopologyNode[] = [];
+  const edges: TopologyEdge[] = [];
+
+  let healthySystems = 0;
+  let degradedSystems = 0;
+  let unhealthySystems = 0;
+
+  const serverToProxies = new Map<string, string[]>();
+  const proxyToServers = new Map<string, string[]>();
+  const serverToK8sNodes = new Map<string, string[]>();
+  const proxyToK8sNodes = new Map<string, string[]>();
+  const k8sNodeToPods = new Map<string, { servers: string[]; proxies: string[] }>();
+
+  for (const node of k8sNodes) {
+    if (node.name) {
+      k8sNodeToPods.set(node.name, { servers: [], proxies: [] });
+    }
+  }
+
+  for (const proxy of proxies) {
+    const connectedServerIds = parseProxyServerConnections(proxy, servers);
+    proxyToServers.set(proxy.id, connectedServerIds);
+
+    for (const serverId of connectedServerIds) {
+      const existing = serverToProxies.get(serverId) || [];
+      existing.push(proxy.id);
+      serverToProxies.set(serverId, existing);
+    }
+  }
+
+  for (const [serverId, pods] of serverPods.entries()) {
+    const nodeNames = new Set<string>();
+    for (const pod of pods) {
+      if (pod.nodeName) {
+        nodeNames.add(pod.nodeName);
+        const nodeData = k8sNodeToPods.get(pod.nodeName);
+        if (nodeData) {
+          nodeData.servers.push(pod.name);
+        }
+      }
+    }
+    serverToK8sNodes.set(serverId, Array.from(nodeNames));
+  }
+
+  for (const [proxyId, pods] of proxyPods.entries()) {
+    const nodeNames = new Set<string>();
+    for (const pod of pods) {
+      if (pod.nodeName) {
+        nodeNames.add(pod.nodeName);
+        const nodeData = k8sNodeToPods.get(pod.nodeName);
+        if (nodeData) {
+          nodeData.proxies.push(pod.name);
+        }
+      }
+    }
+    proxyToK8sNodes.set(proxyId, Array.from(nodeNames));
+  }
+
+  for (const server of servers) {
+    const pods = serverPods.get(server.id) || [];
+    const readyPods = pods.filter((p) => {
+      const { ready, total } = parsePodReady(p.ready);
+      return ready === total && p.status.toLowerCase() === "running";
+    }).length;
+    const health = calculateHealthStatus(readyPods, pods.length);
+
+    if (health === "healthy") healthySystems++;
+    else if (health === "degraded") degradedSystems++;
+    else if (health === "unhealthy") unhealthySystems++;
+
+    const podMetric = pods[0] ? getPodMetrics(pods[0].name, podMetrics) : undefined;
+
+    const metadata: ServerMetadata = {
+      server,
+      podCount: pods.length,
+      readyPods,
+      pods,
+      health,
+      connectedProxies: serverToProxies.get(server.id) || [],
+      k8sNodes: serverToK8sNodes.get(server.id) || [],
+      connectionInfo: serverConnections?.get(server.id) || null,
+      metrics: podMetric,
+    };
+
+    nodes.push({
+      id: `server-${server.id}`,
+      type: "server",
+      position: { x: 0, y: 0 },
+      data: {
+        id: server.id,
+        type: "server",
+        label: server.id,
+        status: health,
+        metadata,
+      },
+    });
+  }
+
+  for (const proxy of proxies) {
+    const pods = proxyPods.get(proxy.id) || [];
+    const readyPods = pods.filter((p) => {
+      const { ready, total } = parsePodReady(p.ready);
+      return ready === total && p.status.toLowerCase() === "running";
+    }).length;
+    const health = calculateHealthStatus(readyPods, pods.length);
+
+    if (health === "healthy") healthySystems++;
+    else if (health === "degraded") degradedSystems++;
+    else if (health === "unhealthy") unhealthySystems++;
+
+    const connectedServers = proxyToServers.get(proxy.id) || [];
+    const proxyPodMetric = pods[0] ? getPodMetrics(pods[0].name, podMetrics) : undefined;
+
+    const metadata: ProxyMetadata = {
+      proxy,
+      podCount: pods.length,
+      readyPods,
+      pods,
+      health,
+      connectedServers,
+      k8sNodes: proxyToK8sNodes.get(proxy.id) || [],
+      connectionInfo: proxyConnections?.get(proxy.id) || null,
+      metrics: proxyPodMetric,
+    };
+
+    nodes.push({
+      id: `proxy-${proxy.id}`,
+      type: "proxy",
+      position: { x: 0, y: 0 },
+      data: {
+        id: proxy.id,
+        type: "proxy",
+        label: proxy.id,
+        status: health,
+        metadata,
+      },
+    });
+
+    for (const serverId of connectedServers) {
+      edges.push({
+        id: `edge-proxy-${proxy.id}-server-${serverId}`,
+        source: `proxy-${proxy.id}`,
+        target: `server-${serverId}`,
+        type: "smoothstep",
+        animated: false,
+        data: {
+          id: `edge-proxy-${proxy.id}-server-${serverId}`,
+          source: `proxy-${proxy.id}`,
+          target: `server-${serverId}`,
+          type: "proxy-to-server",
+          label: "routes to",
+          animated: false,
+        },
+      });
+    }
+  }
+
+  for (const k8sNode of k8sNodes) {
+    if (!k8sNode.name) continue;
+
+    const nodePods = k8sNodeToPods.get(k8sNode.name);
+    const podCount = (nodePods?.servers.length || 0) + (nodePods?.proxies.length || 0);
+
+    let nodeHealth: HealthStatus = "healthy";
+    if (k8sNode.status.toLowerCase() !== "ready") {
+      nodeHealth = "unhealthy";
+    }
+
+    const k8sNodeMetric = getNodeMetrics(k8sNode.name, nodeMetrics);
+
+    const metadata: K8sNodeMetadata = {
+      node: k8sNode,
+      podCount,
+      serverPods: nodePods?.servers || [],
+      proxyPods: nodePods?.proxies || [],
+      health: nodeHealth,
+      metrics: k8sNodeMetric,
+    };
+
+    nodes.push({
+      id: `k8s-node-${k8sNode.name}`,
+      type: "k8s-node",
+      position: { x: 0, y: 0 },
+      data: {
+        id: k8sNode.name,
+        type: "k8s-node",
+        label: k8sNode.name,
+        status: nodeHealth,
+        metadata,
+      },
+    });
+
+    for (const [serverId, k8sNodeNames] of serverToK8sNodes.entries()) {
+      if (k8sNodeNames.includes(k8sNode.name)) {
+        edges.push({
+          id: `edge-k8s-${k8sNode.name}-server-${serverId}`,
+          source: `k8s-node-${k8sNode.name}`,
+          target: `server-${serverId}`,
+          type: "smoothstep",
+          animated: false,
+          data: {
+            id: `edge-k8s-${k8sNode.name}-server-${serverId}`,
+            source: `k8s-node-${k8sNode.name}`,
+            target: `server-${serverId}`,
+            type: "pod-to-node",
+            label: "hosts",
+            animated: false,
+          },
+        });
+      }
+    }
+
+    for (const [proxyId, k8sNodeNames] of proxyToK8sNodes.entries()) {
+      if (k8sNodeNames.includes(k8sNode.name)) {
+        edges.push({
+          id: `edge-k8s-${k8sNode.name}-proxy-${proxyId}`,
+          source: `k8s-node-${k8sNode.name}`,
+          target: `proxy-${proxyId}`,
+          type: "smoothstep",
+          animated: false,
+          data: {
+            id: `edge-k8s-${k8sNode.name}-proxy-${proxyId}`,
+            source: `k8s-node-${k8sNode.name}`,
+            target: `proxy-${proxyId}`,
+            type: "pod-to-node",
+            label: "hosts",
+            animated: false,
+          },
+        });
+      }
+    }
+  }
+
+  return {
+    nodes,
+    edges,
+    metadata: {
+      totalServers: servers.length,
+      totalProxies: proxies.length,
+      totalK8sNodes: k8sNodes.length,
+      totalConnections: edges.length,
+      healthySystems,
+      degradedSystems,
+      unhealthySystems,
+    },
+  };
+}
+
+export function filterNodes(
+  nodes: TopologyNode[],
+  filters: {
+    showServers: boolean;
+    showProxies: boolean;
+    showK8sNodes: boolean;
+    searchQuery: string;
+    filterByStatus?: HealthStatus;
+  }
+): TopologyNode[] {
+  return nodes.filter((node) => {
+    const { type, label, status } = node.data;
+
+    if (type === "server" && !filters.showServers) return false;
+    if (type === "proxy" && !filters.showProxies) return false;
+    if (type === "k8s-node" && !filters.showK8sNodes) return false;
+
+    if (filters.searchQuery && !label.toLowerCase().includes(filters.searchQuery.toLowerCase())) {
+      return false;
+    }
+
+    if (filters.filterByStatus && status !== filters.filterByStatus) {
+      return false;
+    }
+
+    return true;
+  });
+}
+
+export function filterEdges(edges: TopologyEdge[], visibleNodeIds: Set<string>): TopologyEdge[] {
+  return edges.filter((edge) => visibleNodeIds.has(edge.source) && visibleNodeIds.has(edge.target));
+}

apps/web/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/web/package.json

@@ -29,9 +29,11 @@
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tailwindcss/postcss": "^4.1.18",
@@ -44,6 +46,7 @@
     "@xterm/addon-web-links": "^0.12.0",
     "@xterm/addon-webgl": "^0.19.0",
     "@xterm/xterm": "^6.0.0",
+    "@xyflow/react": "^12.0.0",
     "autoprefixer": "^10.4.23",
     "better-auth": "^1.4.13",
     "class-variance-authority": "^0.7.1",