feat(ui): add type filter toggles

src/components/Graph/TopologyGraph.tsx

@@ -0,0 +1,230 @@
+import { useCallback, useEffect, useState } from 'react';
+import {
+  ReactFlow,
+  Background,
+  Controls,
+  MiniMap,
+  Node,
+  Edge,
+  NodeProps,
+  Handle,
+  Position,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import dagre from 'dagre';
+import { useTopologyStore } from '../../store/topologyStore';
+import { getNodeColor, getStatusColor } from '../../utils/colors';
+import { Server, Network, Wifi, Box, Database, Folder } from 'lucide-react';
+import { NodeType, ServiceCategory } from '../../types';
+
+const nodeIcons: Record<NodeType, React.ReactNode> = {
+  gateway: <Network className="w-5 h-5" />,
+  vlan: <Network className="w-4 h-4" />,
+  wifi: <Wifi className="w-4 h-4" />,
+  host_physical: <Server className="w-5 h-5" />,
+  host_vm: <Server className="w-5 h-5" />,
+  host_container: <Server className="w-5 h-5" />,
+  service: <Box className="w-4 h-4" />,
+  volume: <Database className="w-4 h-4" />,
+  mount: <Database className="w-4 h-4" />,
+  path: <Folder className="w-4 h-4" />,
+};
+
+function CustomNode({ data, selected }: NodeProps) {
+  const nodeData = data as { type?: NodeType; category?: ServiceCategory; status?: 'running' | 'stopped' | 'unknown'; label?: string; ip?: string };
+  const nodeColor = getNodeColor(nodeData.type || 'service', nodeData.category);
+  const statusColor = getStatusColor(nodeData.status || 'unknown');
+
+  return (
+    <div
+      className={`px-4 py-3 rounded-xl border-2 transition-all ${
+        selected 
+          ? 'border-sky-400 shadow-lg shadow-sky-400/20' 
+          : 'border-slate-600 hover:border-slate-500'
+      }`}
+      style={{ 
+        backgroundColor: '#1E293B',
+        minWidth: '140px'
+      }}
+    >
+      <Handle type="target" position={Position.Left} className="!bg-slate-400" />
+      
+      <div className="flex items-center gap-3">
+        <div 
+          className="w-10 h-10 rounded-lg flex items-center justify-center"
+          style={{ backgroundColor: `${nodeColor}20` }}
+        >
+          <div style={{ color: nodeColor }}>
+            {nodeIcons[nodeData.type || 'service']}
+          </div>
+        </div>
+        
+        <div className="flex-1 min-w-0">
+          <div className="text-sm font-medium text-white truncate">
+            {nodeData.label}
+          </div>
+          {nodeData.ip && (
+            <div className="text-xs text-slate-500 font-mono">
+              {nodeData.ip}
+            </div>
+          )}
+        </div>
+        
+        <div 
+          className="w-2.5 h-2.5 rounded-full"
+          style={{ backgroundColor: statusColor }}
+        />
+      </div>
+      
+      <Handle type="source" position={Position.Right} className="!bg-slate-400" />
+    </div>
+  );
+}
+
+const nodeTypes = {
+  custom: CustomNode,
+};
+
+const nodeWidth = 180;
+const nodeHeight = 70;
+
+function getLayoutedElements(nodes: Node[], edges: Edge[], direction: 'LR' | 'TB') {
+  if (nodes.length === 0) return { nodes: [], edges: [] };
+  
+  const dagreGraph = new dagre.graphlib.Graph();
+  dagreGraph.setDefaultEdgeLabel(() => ({}));
+  dagreGraph.setGraph({ rankdir: direction, nodesep: 50, ranksep: 100 });
+
+  nodes.forEach((node) => {
+    dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
+  });
+
+  edges.forEach((edge) => {
+    dagreGraph.setEdge(edge.source, edge.target);
+  });
+
+  dagre.layout(dagreGraph);
+
+  const layoutedNodes = nodes.map((node) => {
+    const nodeWithPosition = dagreGraph.node(node.id);
+    if (!nodeWithPosition) return node;
+    return {
+      ...node,
+      position: {
+        x: nodeWithPosition.x - nodeWidth / 2,
+        y: nodeWithPosition.y - nodeHeight / 2,
+      },
+    };
+  });
+
+  return { nodes: layoutedNodes, edges };
+}
+
+export default function TopologyGraph() {
+  const { 
+    edges: storeEdges, 
+    selectedNodeId, 
+    setSelectedNode,
+    getFilteredNodes,
+    orientation,
+    viewMode 
+  } = useTopologyStore();
+
+  const [nodes, setNodes] = useState<Node[]>([]);
+  const [edges, setEdges] = useState<Edge[]>([]);
+
+  useEffect(() => {
+    const filteredNodes = getFilteredNodes();
+    
+    if (filteredNodes.length === 0) {
+      setNodes([]);
+      setEdges([]);
+      return;
+    }
+
+    const nodeIds = new Set(filteredNodes.map(n => n.id));
+    
+    const newNodes: Node[] = filteredNodes.map(node => ({
+      id: node.id,
+      type: 'custom',
+      position: { x: 0, y: 0 },
+      data: {
+        label: node.name,
+        type: node.type,
+        status: node.data.status,
+        category: node.data.category,
+        ip: node.data.ip,
+      },
+      selected: node.id === selectedNodeId,
+    }));
+
+    const newEdges: Edge[] = storeEdges
+      .filter(e => nodeIds.has(e.source) && nodeIds.has(e.target))
+      .map(edge => ({
+        id: edge.id,
+        source: edge.source,
+        target: edge.target,
+        type: 'smoothstep',
+        animated: edge.source === selectedNodeId || edge.target === selectedNodeId,
+        style: { 
+          stroke: edge.source === selectedNodeId || edge.target === selectedNodeId 
+            ? '#38BDF8' 
+            : '#475569',
+          strokeWidth: edge.source === selectedNodeId || edge.target === selectedNodeId 
+            ? 2 
+            : 1,
+        },
+        markerEnd: {
+          type: 'arrowclosed' as const,
+          color: edge.source === selectedNodeId || edge.target === selectedNodeId 
+            ? '#38BDF8' 
+            : '#475569',
+        },
+      }));
+
+    const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(
+      newNodes,
+      newEdges,
+      orientation
+    );
+
+    setNodes(layoutedNodes);
+    setEdges(layoutedEdges);
+  }, [getFilteredNodes, storeEdges, selectedNodeId, orientation, viewMode]);
+
+  const onNodeClick = useCallback((_: React.MouseEvent, node: Node) => {
+    setSelectedNode(node.id);
+  }, [setSelectedNode]);
+
+  const onPaneClick = useCallback(() => {
+    setSelectedNode(null);
+  }, [setSelectedNode]);
+
+  return (
+    <div className="w-full h-full">
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodeClick={onNodeClick}
+        onPaneClick={onPaneClick}
+        nodeTypes={nodeTypes}
+        fitView
+        fitViewOptions={{ padding: 0.2 }}
+        minZoom={0.1}
+        maxZoom={2}
+        defaultEdgeOptions={{
+          type: 'smoothstep',
+        }}
+        proOptions={{ hideAttribution: true }}
+      >
+        <Background color="#334155" gap={20} size={1} />
+        <Controls className="!bg-slate-700 !border-slate-600 !rounded-lg !shadow-lg" />
+        <MiniMap
+          className="!bg-slate-800 !border-slate-700"
+          nodeColor={(node) => getNodeColor(node.data?.type as NodeType || 'service', (node.data?.category as ServiceCategory) || undefined)}
+          maskColor="rgba(15, 23, 42, 0.8)"
+        />
+      </ReactFlow>
+    </div>
+  );
+}

src/components/Header.tsx

@@ -0,0 +1,197 @@
+import { Search, Loader2, Network, HardDrive, Box, Database, Link, ArrowLeftRight, ArrowUpDown, Router, Wifi, Monitor, Container, FolderTree, Folder } from 'lucide-react';
+import { useTopologyStore, Orientation, StatusFilter } from '../store/topologyStore';
+import { ViewMode, NodeType } from '../types';
+import { getNodeColor } from '../utils/colors';
+
+interface HeaderProps {
+  onRefresh?: () => Promise<void>;
+  isLoading?: boolean;
+}
+
+const viewModes: { mode: ViewMode; label: string; icon: React.ReactNode }[] = [
+  { mode: 'full', label: 'Full', icon: <Link className="w-4 h-4" /> },
+  { mode: 'network', label: 'Network', icon: <Network className="w-4 h-4" /> },
+  { mode: 'host', label: 'Hosts', icon: <HardDrive className="w-4 h-4" /> },
+  { mode: 'service', label: 'Services', icon: <Box className="w-4 h-4" /> },
+  { mode: 'filesystem', label: 'Files', icon: <Database className="w-4 h-4" /> },
+];
+
+const orientations: { value: Orientation; label: string; icon: React.ReactNode }[] = [
+  { value: 'LR', label: 'Left to Right', icon: <ArrowLeftRight className="w-4 h-4" /> },
+  { value: 'TB', label: 'Top to Bottom', icon: <ArrowUpDown className="w-4 h-4" /> },
+];
+
+const nodeTypeFilters: { type: NodeType; icon: React.ReactNode }[] = [
+  { type: 'gateway', icon: <Router className="w-4 h-4" /> },
+  { type: 'vlan', icon: <Network className="w-4 h-4" /> },
+  { type: 'wifi', icon: <Wifi className="w-4 h-4" /> },
+  { type: 'host_physical', icon: <HardDrive className="w-4 h-4" /> },
+  { type: 'host_vm', icon: <Monitor className="w-4 h-4" /> },
+  { type: 'host_container', icon: <Container className="w-4 h-4" /> },
+  { type: 'service', icon: <Box className="w-4 h-4" /> },
+  { type: 'volume', icon: <Database className="w-4 h-4" /> },
+  { type: 'mount', icon: <FolderTree className="w-4 h-4" /> },
+  { type: 'path', icon: <Folder className="w-4 h-4" /> },
+];
+
+export default function Header({ onRefresh, isLoading: externalLoading }: HeaderProps) {
+  const { 
+    viewMode, 
+    setViewMode, 
+    orientation,
+    setOrientation,
+    searchQuery, 
+    setSearchQuery,
+    typeFilters,
+    toggleTypeFilter,
+    statusFilter,
+    setStatusFilter,
+    toggleLeftPanel,
+    toggleRightPanel,
+    leftPanelOpen,
+    rightPanelOpen,
+    isLoading: storeLoading
+  } = useTopologyStore();
+
+  const loading = externalLoading ?? storeLoading;
+
+  const handleRefresh = async () => {
+    if (onRefresh) {
+      await onRefresh();
+    }
+  };
+
+  return (
+    <div className="h-14 bg-slate-800 border-b border-slate-700 px-4 flex items-center justify-between">
+      <div className="flex items-center gap-4">
+        <div className="flex items-center gap-2">
+          <div className="w-8 h-8 bg-indigo-500 rounded-lg flex items-center justify-center">
+            <Network className="w-5 h-5 text-white" />
+          </div>
+          <h1 className="text-lg font-semibold text-white">Homelab Topology</h1>
+        </div>
+        
+        <div className="h-6 w-px bg-slate-600" />
+        
+        <div className="flex items-center gap-1">
+          {viewModes.map(({ mode, label, icon }) => (
+            <button
+              key={mode}
+              onClick={() => setViewMode(mode)}
+              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm transition-colors ${
+                viewMode === mode 
+                  ? 'bg-indigo-500/20 text-indigo-400 border border-indigo-500/50' 
+                  : 'text-slate-400 hover:text-white hover:bg-slate-700'
+              }`}
+            >
+              {icon}
+              {label}
+            </button>
+          ))}
+        </div>
+
+        <div className="h-6 w-px bg-slate-600" />
+
+        <div className="flex items-center gap-2">
+          <select
+            value={orientation}
+            onChange={(e) => setOrientation(e.target.value as Orientation)}
+            className="h-9 px-3 bg-slate-700 border border-slate-600 rounded-lg text-sm text-slate-300 focus:outline-none focus:border-indigo-500 cursor-pointer"
+          >
+            {orientations.map(({ value, label }) => (
+              <option key={value} value={value}>
+                {label}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div className="h-6 w-px bg-slate-600" />
+
+        <div className="flex items-center gap-1">
+          {nodeTypeFilters.map(({ type, icon }) => {
+            const isActive = typeFilters.includes(type);
+            const color = getNodeColor(type);
+            return (
+              <button
+                key={type}
+                onClick={() => toggleTypeFilter(type)}
+                className={`p-2 rounded-md transition-colors ${
+                  isActive 
+                    ? 'border' 
+                    : 'text-slate-500 hover:text-slate-300 hover:bg-slate-700'
+                }`}
+                style={isActive ? { 
+                  backgroundColor: `${color}20`, 
+                  borderColor: `${color}50`,
+                  color: color
+                } : undefined}
+                title={type}
+              >
+                {icon}
+              </button>
+            );
+          })}
+        </div>
+
+        <div className="h-6 w-px bg-slate-600" />
+
+        <div className="flex items-center gap-2">
+          <select
+            value={statusFilter}
+            onChange={(e) => setStatusFilter(e.target.value as StatusFilter)}
+            className="h-9 px-3 bg-slate-700 border border-slate-600 rounded-lg text-sm text-slate-300 focus:outline-none focus:border-indigo-500 cursor-pointer"
+          >
+            <option value="all">All Status</option>
+            <option value="running">Running</option>
+            <option value="stopped">Stopped</option>
+          </select>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+          <input
+            type="text"
+            placeholder="Search nodes..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-64 h-9 pl-9 pr-4 bg-slate-700 border border-slate-600 rounded-lg text-sm text-white placeholder-slate-400 focus:outline-none focus:border-indigo-500"
+          />
+        </div>
+
+        <button
+          onClick={handleRefresh}
+          disabled={loading}
+          className="h-9 px-3 flex items-center gap-2 bg-slate-700 hover:bg-slate-600 border border-slate-600 rounded-lg text-sm text-slate-300 transition-colors disabled:opacity-50"
+        >
+          <Loader2 className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
+          {loading ? 'Loading...' : 'Refresh'}
+        </button>
+
+        <div className="h-6 w-px bg-slate-600" />
+
+        <button
+          onClick={toggleLeftPanel}
+          className={`p-2 rounded-lg transition-colors ${
+            leftPanelOpen ? 'bg-indigo-500/20 text-indigo-400' : 'text-slate-400 hover:text-white hover:bg-slate-700'
+          }`}
+          title="Toggle left panel"
+        >
+          <Box className="w-5 h-5" />
+        </button>
+
+        <button
+          onClick={toggleRightPanel}
+          className={`p-2 rounded-lg transition-colors ${
+            rightPanelOpen ? 'bg-indigo-500/20 text-indigo-400' : 'text-slate-400 hover:text-white hover:bg-slate-700'
+          }`}
+          title="Toggle right panel"
+        >
+          <Database className="w-5 h-5" />
+        </button>
+      </div>
+    </div>
+  );
+}

src/components/LeftPanel.tsx

@@ -0,0 +1,107 @@
+import { ChevronRight, Server, Network, Wifi, Box, Database, Folder } from 'lucide-react';
+import { useTopologyStore } from '../store/topologyStore';
+import { getNodeColor } from '../utils/colors';
+import { TopologyNode, NodeType } from '../types';
+
+const typeIcons: Record<NodeType, React.ReactNode> = {
+  gateway: <Network className="w-4 h-4" />,
+  vlan: <Network className="w-4 h-4" />,
+  wifi: <Wifi className="w-4 h-4" />,
+  host_physical: <Server className="w-4 h-4" />,
+  host_vm: <Server className="w-4 h-4" />,
+  host_container: <Server className="w-4 h-4" />,
+  service: <Box className="w-4 h-4" />,
+  volume: <Database className="w-4 h-4" />,
+  mount: <Database className="w-4 h-4" />,
+  path: <Folder className="w-4 h-4" />,
+};
+
+const typeLabels: Record<NodeType, string> = {
+  gateway: 'Gateway',
+  vlan: 'VLAN',
+  wifi: 'WiFi',
+  host_physical: 'Physical',
+  host_vm: 'VM',
+  host_container: 'Container',
+  service: 'Service',
+  volume: 'Volume',
+  mount: 'Mount',
+  path: 'Path',
+};
+
+export default function LeftPanel() {
+  const { nodes, selectedNodeId, setSelectedNode } = useTopologyStore();
+  
+  const selectedNode = nodes.find(n => n.id === selectedNodeId);
+  const childNodes = nodes.filter(n => n.data.parentId === selectedNodeId);
+
+  const groupedChildren = childNodes.reduce((acc, node) => {
+    if (!acc[node.type]) acc[node.type] = [];
+    acc[node.type].push(node);
+    return acc;
+  }, {} as Record<NodeType, TopologyNode[]>);
+
+  return (
+    <div className="w-72 bg-slate-800 border-r border-slate-700 flex flex-col">
+      <div className="h-12 px-4 flex items-center border-b border-slate-700">
+        <h2 className="text-sm font-semibold text-white uppercase tracking-wide">
+          {selectedNode ? 'Child Nodes' : 'Select a Node'}
+        </h2>
+        {childNodes.length > 0 && (
+          <span className="ml-2 px-2 py-0.5 bg-slate-700 text-slate-300 text-xs rounded-full">
+            {childNodes.length}
+          </span>
+        )}
+      </div>
+
+      <div className="flex-1 overflow-y-auto">
+        {!selectedNode ? (
+          <div className="p-4 text-center text-slate-500 text-sm">
+            Click on a node to view its child nodes
+          </div>
+        ) : childNodes.length === 0 ? (
+          <div className="p-4 text-center text-slate-500 text-sm">
+            No child nodes
+          </div>
+        ) : (
+          <div className="p-2">
+            {Object.entries(groupedChildren).map(([type, typeNodes]) => (
+              <div key={type} className="mb-3">
+                <div className="px-2 py-1 text-xs font-medium text-slate-500 uppercase tracking-wide">
+                  {typeLabels[type as NodeType]}s ({typeNodes.length})
+                </div>
+                {typeNodes.map(node => (
+                  <button
+                    key={node.id}
+                    onClick={() => setSelectedNode(node.id)}
+                    className={`w-full px-3 py-2 flex items-center gap-3 rounded-lg transition-colors text-left ${
+                      selectedNodeId === node.id 
+                        ? 'bg-indigo-500/20 text-indigo-300' 
+                        : 'text-slate-300 hover:bg-slate-700'
+                    }`}
+                  >
+                    <div 
+                      className="w-8 h-8 rounded-lg flex items-center justify-center"
+                      style={{ backgroundColor: `${getNodeColor(node.type, node.data.category)}20` }}
+                    >
+                      <div style={{ color: getNodeColor(node.type, node.data.category) }}>
+                        {typeIcons[node.type]}
+                      </div>
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <div className="text-sm font-medium truncate">{node.name}</div>
+                      {node.data.ip && (
+                        <div className="text-xs text-slate-500">{node.data.ip}</div>
+                      )}
+                    </div>
+                    <ChevronRight className="w-4 h-4 text-slate-500" />
+                  </button>
+                ))}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/RightPanel.tsx

@@ -0,0 +1,256 @@
+import { useState } from 'react';
+import { Info, FileCode, FolderOpen, BarChart3, Star, X } from 'lucide-react';
+import { useTopologyStore } from '../store/topologyStore';
+import { getNodeColor, getStatusColor, getImportanceLabel, getImportanceColor } from '../utils/colors';
+
+type TabId = 'details' | 'config' | 'files' | 'usage' | 'importance';
+
+const tabs: { id: TabId; label: string; icon: React.ReactNode }[] = [
+  { id: 'details', label: 'Details', icon: <Info className="w-4 h-4" /> },
+  { id: 'config', label: 'Config', icon: <FileCode className="w-4 h-4" /> },
+  { id: 'files', label: 'Files', icon: <FolderOpen className="w-4 h-4" /> },
+  { id: 'usage', label: 'Usage', icon: <BarChart3 className="w-4 h-4" /> },
+  { id: 'importance', label: 'Importance', icon: <Star className="w-4 h-4" /> },
+];
+
+export default function RightPanel() {
+  const { nodes, selectedNodeId, setSelectedNode } = useTopologyStore();
+  const [activeTab, setActiveTab] = useState<TabId>('details');
+  
+  const selectedNode = nodes.find(n => n.id === selectedNodeId);
+
+  if (!selectedNode) {
+    return (
+      <div className="w-80 bg-slate-800 border-l border-slate-700 flex flex-col items-center justify-center p-4">
+        <div className="text-slate-500 text-sm text-center">
+          Select a node to view its details
+        </div>
+      </div>
+    );
+  }
+
+  const nodeColor = getNodeColor(selectedNode.type, selectedNode.data.category);
+  const statusColor = getStatusColor(selectedNode.data.status);
+
+  return (
+    <div className="w-80 bg-slate-800 border-l border-slate-700 flex flex-col">
+      <div className="h-12 px-4 flex items-center justify-between border-b border-slate-700">
+        <h2 className="text-sm font-semibold text-white truncate">{selectedNode.name}</h2>
+        <button
+          onClick={() => setSelectedNode(null)}
+          className="p-1 hover:bg-slate-700 rounded transition-colors"
+        >
+          <X className="w-4 h-4 text-slate-400" />
+        </button>
+      </div>
+
+      <div className="flex border-b border-slate-700">
+        {tabs.map(tab => (
+          <button
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)}
+            className={`flex-1 flex items-center justify-center gap-1 py-3 text-xs transition-colors ${
+              activeTab === tab.id 
+                ? 'text-indigo-400 border-b-2 border-indigo-400 bg-indigo-500/10' 
+                : 'text-slate-400 hover:text-white'
+            }`}
+          >
+            {tab.icon}
+          </button>
+        ))}
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-4">
+        {activeTab === 'details' && <DetailsTab node={selectedNode} nodeColor={nodeColor} statusColor={statusColor} />}
+        {activeTab === 'config' && <ConfigTab node={selectedNode} />}
+        {activeTab === 'files' && <FilesTab node={selectedNode} />}
+        {activeTab === 'usage' && <UsageTab node={selectedNode} />}
+        {activeTab === 'importance' && <ImportanceTab node={selectedNode} />}
+      </div>
+    </div>
+  );
+}
+
+function DetailsTab({ node, nodeColor, statusColor }: { node: any; nodeColor: string; statusColor: string }) {
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-3">
+        <div 
+          className="w-12 h-12 rounded-xl flex items-center justify-center"
+          style={{ backgroundColor: `${nodeColor}20` }}
+        >
+          <div style={{ color: nodeColor }} className="text-lg font-bold">
+            {node.name.charAt(0).toUpperCase()}
+          </div>
+        </div>
+        <div>
+          <div className="text-white font-medium">{node.type.replace(/_/g, ' ')}</div>
+          <div className="flex items-center gap-2 text-sm">
+            <div 
+              className="w-2 h-2 rounded-full"
+              style={{ backgroundColor: statusColor }}
+            />
+            <span className="text-slate-400 capitalize">{node.data.status}</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-3">
+        <div>
+          <div className="text-xs text-slate-500 uppercase tracking-wide mb-1">IP Address</div>
+          <div className="font-mono text-sm text-white">{node.data.ip || 'N/A'}</div>
+        </div>
+        
+        {node.data.description && (
+          <div>
+            <div className="text-xs text-slate-500 uppercase tracking-wide mb-1">Description</div>
+            <div className="text-sm text-slate-300">{node.data.description}</div>
+          </div>
+        )}
+
+        <div>
+          <div className="text-xs text-slate-500 uppercase tracking-wide mb-1">Metadata</div>
+          <div className="bg-slate-900 rounded-lg p-3 font-mono text-xs text-slate-300 overflow-x-auto">
+            {JSON.stringify(node.data.metadata, null, 2)}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ConfigTab({ node }: { node: any }) {
+  const hasConfig = node.data.config;
+
+  if (!hasConfig) {
+    return (
+      <div className="text-center text-slate-500 py-8">
+        <FileCode className="w-8 h-8 mx-auto mb-2 opacity-50" />
+        <div className="text-sm">No configuration available</div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <pre className="bg-slate-900 rounded-lg p-3 font-mono text-xs text-slate-300 overflow-x-auto">
+        {node.data.config}
+      </pre>
+    </div>
+  );
+}
+
+function FilesTab({ node }: { node: any }) {
+  const files = node.data.files || [
+    '/etc/docker-compose.yml',
+    '/etc/traefik/dynamic.yml',
+    '/var/log/container.log'
+  ];
+
+  return (
+    <div className="space-y-1">
+      {files.map((file: string, idx: number) => (
+        <button
+          key={idx}
+          className="w-full px-3 py-2 flex items-center gap-2 bg-slate-700/50 hover:bg-slate-700 rounded-lg text-left transition-colors"
+        >
+          <FolderOpen className="w-4 h-4 text-slate-400" />
+          <span className="font-mono text-xs text-slate-300 truncate">{file}</span>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+function UsageTab({ node }: { node: any }) {
+  const isService = node.type === 'service';
+  
+  if (!isService) {
+    return (
+      <div className="text-center text-slate-500 py-8">
+        <BarChart3 className="w-8 h-8 mx-auto mb-2 opacity-50" />
+        <div className="text-sm">Usage data available for services only</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <div className="flex justify-between text-sm mb-1">
+          <span className="text-slate-400">CPU</span>
+          <span className="text-white">12.4%</span>
+        </div>
+        <div className="h-2 bg-slate-700 rounded-full overflow-hidden">
+          <div className="h-full w-[12.4%] bg-indigo-500 rounded-full" />
+        </div>
+      </div>
+
+      <div>
+        <div className="flex justify-between text-sm mb-1">
+          <span className="text-slate-400">Memory</span>
+          <span className="text-white">256 MB / 1 GB</span>
+        </div>
+        <div className="h-2 bg-slate-700 rounded-full overflow-hidden">
+          <div className="h-full w-[25.6%] bg-purple-500 rounded-full" />
+        </div>
+      </div>
+
+      <div>
+        <div className="flex justify-between text-sm mb-1">
+          <span className="text-slate-400">Network I/O</span>
+          <span className="text-white">1.2 MB/s ↓ 0.8 MB/s ↑</span>
+        </div>
+        <div className="h-2 bg-slate-700 rounded-full overflow-hidden">
+          <div className="h-full w-[40%] bg-cyan-500 rounded-full" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ImportanceTab({ node }: { node: any }) {
+  const importance = node.data.importance || 3;
+  const importanceLabel = getImportanceLabel(importance);
+  const importanceColor = getImportanceColor(importance);
+
+  const reasons = {
+    5: ['Critical infrastructure', 'Single point of failure', 'Required for other services'],
+    4: ['Important service', 'Used frequently', 'Difficult to replace'],
+    3: ['Standard service', 'Can be rebuilt', 'Not critical'],
+    2: ['Optional service', 'Rarely used', 'Easy to recreate'],
+    1: ['Development only', 'Non-critical', 'Can be disabled'],
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-center gap-2">
+        {[1, 2, 3, 4, 5].map(star => (
+          <Star
+            key={star}
+            className={`w-8 h-8 ${star <= importance ? 'fill-yellow-500 text-yellow-500' : 'text-slate-600'}`}
+          />
+        ))}
+      </div>
+
+      <div className="text-center">
+        <div className="text-lg font-semibold" style={{ color: importanceColor }}>
+          {importanceLabel}
+        </div>
+        <div className="text-sm text-slate-400">Importance Level {importance}/5</div>
+      </div>
+
+      <div className="bg-slate-700/50 rounded-lg p-3">
+        <div className="text-xs text-slate-500 uppercase tracking-wide mb-2">Why this level?</div>
+        <ul className="space-y-1">
+          {reasons[importance as keyof typeof reasons]?.map((reason, idx) => (
+            <li key={idx} className="text-sm text-slate-300 flex items-center gap-2">
+              <div className="w-1 h-1 bg-slate-500 rounded-full" />
+              {reason}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}