✨ feat: topology, and improves handling

2026-03-30 20:27:39 +00:00 · 2026-02-17 18:12:02 +07:00
parent e8dbefde43
commit d14f043e7c
145 changed files with 4213 additions and 2861 deletions
--- a/apps/web/components/dashboard-layout.tsx
+++ b/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>
--- a/apps/web/components/terminal.tsx
+++ b/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"
--- a/apps/web/components/topology/controls/node-details-panel.tsx
+++ b/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>
+  );
+}
--- a/apps/web/components/topology/controls/topology-toolbar.tsx
+++ b/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>
+  );
+}
--- a/apps/web/components/topology/layouts/hierarchical-layout.ts
+++ b/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);
+}
--- a/apps/web/components/topology/nodes/k8s-node.tsx
+++ b/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>
+  );
+}
--- a/apps/web/components/topology/nodes/node-types.ts
+++ b/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,
+};
--- a/apps/web/components/topology/nodes/proxy-node.tsx
+++ b/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>
+  );
+}
--- a/apps/web/components/topology/nodes/server-node.tsx
+++ b/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>
+  );
+}
--- a/apps/web/components/topology/topology-canvas.tsx
+++ b/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>
+  );
+}
--- a/apps/web/components/ui/accordion.tsx
+++ b/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 };
--- a/apps/web/components/ui/avatar.tsx
+++ b/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 (
--- a/apps/web/components/ui/badge.tsx
+++ b/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",
--- a/apps/web/components/ui/button.tsx
+++ b/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",
--- a/apps/web/components/ui/card.tsx
+++ b/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 (
--- a/apps/web/components/ui/checkbox.tsx
+++ b/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 };
--- a/apps/web/components/ui/dialog.tsx
+++ b/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} />;
--- a/apps/web/components/ui/dropdown-menu.tsx
+++ b/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} />;
--- a/apps/web/components/ui/form.tsx
+++ b/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;

--- a/apps/web/components/ui/input.tsx
+++ b/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 (
--- a/apps/web/components/ui/label.tsx
+++ b/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 (
--- a/apps/web/components/ui/popover.tsx
+++ b/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 };
--- a/apps/web/components/ui/select.tsx
+++ b/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} />;
--- a/apps/web/components/ui/separator.tsx
+++ b/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,
--- a/apps/web/components/ui/sheet.tsx
+++ b/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} />;
--- a/apps/web/components/ui/sidebar.tsx
+++ b/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 (
--- a/apps/web/components/ui/skeleton.tsx
+++ b/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 (
--- a/apps/web/components/ui/switch.tsx
+++ b/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 };
--- a/apps/web/components/ui/table.tsx
+++ b/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 (
--- a/apps/web/components/ui/tabs.tsx
+++ b/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 };
--- a/apps/web/components/ui/textarea.tsx
+++ b/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) => {
--- a/apps/web/components/ui/tooltip.tsx
+++ b/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,