✨ feat: topology, and improves handling

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>
+  );
+}