feat(ui): add type filter toggles

src/App.tsx

@@ -0,0 +1,141 @@
+import { useEffect, useRef, useCallback, useState } from 'react';
+import { ReactFlowProvider } from '@xyflow/react';
+import { useTopologyStore } from './store/topologyStore';
+import { 
+  defaultNetworkInfo, 
+  defaultHosts, 
+  discoverHosts, 
+  convertToTopology 
+} from './services/discovery';
+import Header from './components/Header';
+import LeftPanel from './components/LeftPanel';
+import RightPanel from './components/RightPanel';
+import TopologyGraph from './components/Graph/TopologyGraph';
+
+const POLLING_INTERVAL_MS = 30000;
+
+function App() {
+  const { 
+    setNodes, 
+    setEdges, 
+    setNetworkInfo, 
+    setHosts,
+    setLastUpdated,
+    setIsLoading,
+    leftPanelOpen,
+    rightPanelOpen,
+    isLoading
+  } = useTopologyStore();
+
+  const isLoadingRef = useRef(isLoading);
+  isLoadingRef.current = isLoading;
+
+  const loadData = useCallback(async () => {
+    if (isLoadingRef.current) return;
+    
+    setIsLoading(true);
+    try {
+      const hostNames = ['ubuntu', 'grizzley', 'truenas', 'ice', 'panda', 'proxmox'];
+      const discoveryResult = await discoverHosts(hostNames);
+      
+      const { nodes, edges } = convertToTopology(
+        discoveryResult.hosts, 
+        defaultNetworkInfo
+      );
+      
+      const hosts = discoveryResult.hosts.map(h => ({
+        name: h.name,
+        ip: h.ip,
+        type: (h.name === 'ubuntu' ? 'vm' : 
+               h.name === 'proxmox' || h.name === 'truenas' ? 'physical' : 'rpi5') as 'vm' | 'physical' | 'rpi5' | 'container',
+        role: h.name === 'ubuntu' ? 'Primary Docker Host' :
+              h.name === 'grizzley' ? 'Edge Services' :
+              h.name === 'truenas' ? 'Storage (NAS)' :
+              h.name === 'proxmox' ? 'Hypervisor' : 'Host',
+        containers: h.containers.map(c => c.name)
+      }));
+      
+      setNodes(nodes);
+      setEdges(edges);
+      setNetworkInfo(defaultNetworkInfo);
+      setHosts(hosts);
+      setLastUpdated(new Date());
+    } catch (error) {
+      console.error('Discovery failed:', error);
+      setNodes([]);
+      setEdges([]);
+      setNetworkInfo(defaultNetworkInfo);
+      setHosts(defaultHosts);
+      setLastUpdated(new Date());
+    } finally {
+      setIsLoading(false);
+    }
+  }, [setNodes, setEdges, setNetworkInfo, setHosts, setLastUpdated, setIsLoading]);
+
+  useEffect(() => {
+    loadData();
+    
+    const intervalId = setInterval(loadData, POLLING_INTERVAL_MS);
+    
+    return () => clearInterval(intervalId);
+  }, [loadData]);
+
+  return (
+    <ReactFlowProvider>
+      <div className="h-screen w-screen flex flex-col bg-slate-900">
+        <Header onRefresh={loadData} isLoading={isLoading} />
+        
+        <div className="flex-1 flex overflow-hidden">
+          {leftPanelOpen && (
+            <LeftPanel />
+          )}
+          
+          <div className="flex-1">
+            <TopologyGraph />
+          </div>
+          
+          {rightPanelOpen && (
+            <RightPanel />
+          )}
+        </div>
+        
+        <Footer />
+      </div>
+    </ReactFlowProvider>
+  );
+}
+
+function Footer() {
+  const { lastUpdated, nodes } = useTopologyStore();
+  const [countdown, setCountdown] = useState(30);
+  
+  const formatTime = (date: Date | null) => {
+    if (!date) return 'Never';
+    return date.toLocaleTimeString();
+  };
+
+  useEffect(() => {
+    setCountdown(30);
+    
+    const intervalId = setInterval(() => {
+      setCountdown(prev => {
+        if (prev <= 1) return 30;
+        return prev - 1;
+      });
+    }, 1000);
+    
+    return () => clearInterval(intervalId);
+  }, [lastUpdated]);
+
+  return (
+    <div className="h-8 bg-slate-800 border-t border-slate-700 px-4 flex items-center justify-between text-xs text-slate-400">
+      <span>Nodes: {nodes.length}</span>
+      <div className="flex items-center gap-4">
+        <span>Next refresh: {countdown}s</span>
+        <span>Last updated: {formatTime(lastUpdated)}</span>
+      </div>
+    </div>
+  );
+}
+
+export default App;

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

src/data/staticConfig.ts

@@ -0,0 +1,275 @@
+import { TopologyNode, TopologyEdge, NetworkInfo, Host, ServiceCategory } from '../types';
+
+const serviceCategory: Record<string, ServiceCategory> = {
+  jellyfin: 'media',
+  immich: 'media',
+  sonarr: 'media',
+  radarr: 'media',
+  sabnzbd: 'media',
+  qbittorrent: 'media',
+  lidarr: 'media',
+  readarr: 'media',
+  bazarr: 'media',
+  tdarr: 'media',
+  traefik: 'infra',
+  authentik: 'infra',
+  vaultwarden: 'infra',
+  gitea: 'infra',
+  postgres: 'infra',
+  portainer: 'infra',
+  prometheus: 'monitoring',
+  grafana: 'monitoring',
+  loki: 'monitoring',
+  uptimekuma: 'monitoring',
+  cadvisor: 'monitoring',
+  nodeexporter: 'monitoring',
+  alertmanager: 'monitoring',
+  litellm: 'ai',
+  ollama: 'ai',
+  'codeserver-ai': 'ai',
+  qdrant: 'storage',
+};
+
+function getCategory(name: string): ServiceCategory {
+  const key = Object.keys(serviceCategory).find(k => name.toLowerCase().includes(k));
+  return serviceCategory[key || ''] || 'other';
+}
+
+export const staticNetworkInfo: NetworkInfo = {
+  gateway: {
+    model: 'UniFi Dream Machine Pro',
+    ip: '192.168.1.1'
+  },
+  vlans: [
+    { id: 1, name: 'Default', subnet: '192.168.1.0/24', purpose: 'Core infrastructure' },
+    { id: 3, name: 'Trusted', subnet: '192.168.3.0/24', purpose: 'Trusted devices' },
+    { id: 10, name: 'Family', subnet: '192.168.10.0/24', purpose: 'Family devices' },
+    { id: 20, name: 'Guest', subnet: '192.168.20.0/24', purpose: 'Guest network' },
+    { id: 30, name: 'IoT', subnet: '192.168.30.0/24', purpose: 'IoT devices, Home Assistant' },
+    { id: 50, name: 'Production', subnet: '192.168.50.0/24', purpose: 'Production services' }
+  ],
+  wifi: [
+    { ssid: 'Will of D.', vlan: 'default' },
+    { ssid: 'Will of D. IoT', vlan: 30 },
+    { ssid: 'Family of D.', vlan: 10 }
+  ]
+};
+
+export const staticHosts: Host[] = [
+  {
+    name: 'ubuntu',
+    ip: '192.168.50.61',
+    type: 'vm',
+    role: 'Primary Docker Host',
+    containers: ['traefik', 'jellyfin', 'immich', 'authentik', 'gitea', 'prometheus', 'grafana', 'sonarr', 'radarr', 'sabnzbd', 'qbittorrent', 'lidarr', 'readarr', 'bazarr', 'tdarr', 'portainer', 'vaultwarden', 'loki', 'uptimekuma', 'cadvisor', 'nodeexporter', 'alertmanager', 'ollama', 'litellm', 'codeserver-ai', 'glance', 'gotify', 'prowlarr', 'jellyseerr', 'jellystat', 'jellysweep', 'navidrome', 'flaresolverr', 'gluetun', 'crowdsec', 'postgres-shared', 'immich_postgres', 'immich_redis', 'immich_server', 'immich_machine_learning', 'filebrowser', 'dockge', 'jfa-go', 'it-tools', 'bentopdf', 'maintainerr']
+  },
+  {
+    name: 'grizzley',
+    ip: '192.168.50.84',
+    type: 'rpi5',
+    role: 'Edge Services',
+    containers: ['traefik', 'frigate', 'scrypted', 'cloudflared']
+  },
+  {
+    name: 'ice',
+    ip: '192.168.50.197',
+    type: 'rpi5',
+    role: 'Spare/Development',
+    containers: []
+  },
+  {
+    name: 'panda',
+    ip: '192.168.30.196',
+    type: 'rpi5',
+    role: 'Home Assistant',
+    containers: []
+  },
+  {
+    name: 'truenas',
+    ip: '192.168.50.12',
+    type: 'physical',
+    role: 'Storage (NAS)',
+    containers: ['qdrant']
+  },
+  {
+    name: 'proxmox',
+    ip: '192.168.50.11',
+    type: 'physical',
+    role: 'Hypervisor',
+    containers: []
+  }
+];
+
+const containerDetails: Record<string, { description: string; ports?: string[]; importance: 1|2|3|4|5 }> = {
+  traefik: { description: 'Reverse proxy and load balancer', ports: ['80', '443'], importance: 5 },
+  jellyfin: { description: 'Media server', ports: ['8096', '9090'], importance: 5 },
+  immich: { description: 'Photo and video management', importance: 4 },
+  authentik: { description: 'Identity provider and SSO', importance: 5 },
+  gitea: { description: 'Self-hosted Git service', ports: ['3000', '2222'], importance: 4 },
+  prometheus: { description: 'Monitoring and metrics', ports: ['9090'], importance: 4 },
+  grafana: { description: 'Metrics visualization', ports: ['3000'], importance: 4 },
+  sonarr: { description: 'TV show management', importance: 4 },
+  radarr: { description: 'Movie management', importance: 4 },
+  tdarr: { description: 'Video transcoding', importance: 3 },
+  frigate: { description: 'NVR with local AI', importance: 4 },
+  vaultwarden: { description: 'Password manager', importance: 5 },
+  portainer: { description: 'Container management UI', ports: ['9000', '9443'], importance: 3 },
+  ollama: { description: 'Local LLM runtime', importance: 4 },
+  litellm: { description: 'LLM API gateway', ports: ['4000'], importance: 4 },
+  codeserver: { description: 'Browser-based VS Code', ports: ['8443'], importance: 3 },
+};
+
+function createNodesFromData(): TopologyNode[] {
+  const nodes: TopologyNode[] = [];
+  
+  nodes.push({
+    id: 'gateway',
+    type: 'gateway',
+    name: 'UniFi Gateway',
+    data: {
+      status: 'running',
+      metadata: { model: 'UniFi Dream Machine Pro', ip: '192.168.1.1' },
+      importance: 5,
+      description: 'Main network gateway and firewall'
+    }
+  });
+  
+  staticNetworkInfo.vlans.forEach((vlan) => {
+    nodes.push({
+      id: `vlan-${vlan.id}`,
+      type: 'vlan',
+      name: `VLAN ${vlan.id}: ${vlan.name}`,
+      data: {
+        status: 'running',
+        metadata: { subnet: vlan.subnet, purpose: vlan.purpose },
+        importance: 4,
+        description: vlan.purpose || '',
+        parentId: 'gateway'
+      }
+    });
+  });
+  
+  staticNetworkInfo.wifi.forEach((wifi) => {
+    nodes.push({
+      id: `wifi-${wifi.ssid.replace(/\s+/g, '-')}`,
+      type: 'wifi',
+      name: wifi.ssid,
+      data: {
+        status: 'running',
+        metadata: { vlan: wifi.vlan },
+        importance: 3,
+        parentId: 'gateway'
+      }
+    });
+  });
+  
+  const hostTypeMap: Record<string, 'host_physical' | 'host_vm' | 'host_container'> = {
+    physical: 'host_physical',
+    vm: 'host_vm',
+    rpi5: 'host_container',
+    container: 'host_container'
+  };
+  
+  staticHosts.forEach((host) => {
+    const hostNode: TopologyNode = {
+      id: host.name,
+      type: hostTypeMap[host.type] || 'host_physical',
+      name: `${host.name} (${host.ip})`,
+      data: {
+        ip: host.ip,
+        status: 'running',
+        metadata: { role: host.role, type: host.type, containerCount: host.containers.length },
+        importance: host.role.includes('Primary') ? 5 : 4,
+        description: host.role,
+        parentId: 'vlan-50'
+      }
+    };
+    nodes.push(hostNode);
+    
+    host.containers.forEach((container) => {
+      const details = containerDetails[container.replace(/-/g, '')] || { description: container, importance: 3 };
+      const portStr = details.ports ? details.ports.join(', ') : undefined;
+      
+      nodes.push({
+        id: `${host.name}-${container}`,
+        type: 'service',
+        name: container,
+        data: {
+          status: 'running',
+          metadata: { 
+            host: host.name,
+            image: `${container}:latest`,
+            ports: portStr
+          },
+          category: getCategory(container),
+          importance: details.importance,
+          description: details.description,
+          parentId: host.name
+        }
+      });
+    });
+  });
+  
+  nodes.push({
+    id: 'truenas-nfs',
+    type: 'mount',
+    name: '/mnt/truenas/media',
+    data: {
+      status: 'running',
+      metadata: { type: 'nfs', server: '192.168.50.12' },
+      importance: 5,
+      description: 'TrueNAS NFS mount for media storage',
+      parentId: 'truenas'
+    }
+  });
+  
+  ['/movies', '/tv', '/music', '/photos'].forEach((path) => {
+    nodes.push({
+      id: `path-${path.replace(/\//g, '-')}`,
+      type: 'path',
+      name: path,
+      data: {
+        status: 'running',
+        metadata: { type: 'filesystem' },
+        importance: 4,
+        parentId: 'truenas-nfs'
+      }
+    });
+  });
+  
+  return nodes;
+}
+
+function createEdgesFromData(): TopologyEdge[] {
+  const edges: TopologyEdge[] = [];
+  
+  edges.push({ id: 'e-gateway-vlan50', source: 'gateway', target: 'vlan-50' });
+  
+  staticNetworkInfo.vlans.forEach((vlan) => {
+    if (vlan.id !== 50) {
+      edges.push({ id: `e-gateway-vlan${vlan.id}`, source: 'gateway', target: `vlan-${vlan.id}` });
+    }
+  });
+  
+  staticNetworkInfo.wifi.forEach((wifi) => {
+    edges.push({ id: `e-gateway-wifi-${wifi.ssid.replace(/\s+/g, '-')}`, source: 'gateway', target: `wifi-${wifi.ssid.replace(/\s+/g, '-')}` });
+  });
+  
+  staticHosts.forEach((host) => {
+    edges.push({ id: `e-vlan50-${host.name}`, source: 'vlan-50', target: host.name });
+    
+    host.containers.forEach((container) => {
+      edges.push({ id: `e-${host.name}-${container}`, source: host.name, target: `${host.name}-${container}` });
+    });
+  });
+  
+  edges.push({ id: 'e-truenas-nfs', source: 'truenas', target: 'truenas-nfs' });
+  ['/movies', '/tv', '/music', '/photos'].forEach((path) => {
+    edges.push({ id: `e-nfs-${path.replace(/\//g, '-')}`, source: 'truenas-nfs', target: `path-${path.replace(/\//g, '-')}` });
+  });
+  
+  return edges;
+}
+
+export const initialNodes = createNodesFromData();
+export const initialEdges = createEdgesFromData();

src/index.css

@@ -0,0 +1,68 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --bg-primary: #0F172A;
+  --bg-secondary: #1E293B;
+  --bg-tertiary: #334155;
+  --text-primary: #F8FAFC;
+  --text-secondary: #94A3B8;
+  --border: #475569;
+  --accent: #38BDF8;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: 'Inter', system-ui, sans-serif;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  overflow: hidden;
+}
+
+#root {
+  width: 100vw;
+  height: 100vh;
+}
+
+.react-flow__node {
+  cursor: pointer;
+}
+
+.react-flow__edge-path {
+  stroke-width: 2;
+}
+
+.react-flow__minimap {
+  background-color: var(--bg-secondary);
+}
+
+/* Controls styling */
+.react-flow__controls {
+  background: transparent;
+  box-shadow: none;
+}
+
+.react-flow__controls-button {
+  background-color: #334155;
+  border: 1px solid #475569;
+  color: #94A3B8;
+  border-bottom: 1px solid #475569;
+}
+
+.react-flow__controls-button:hover {
+  background-color: #475569;
+  color: #F8FAFC;
+}
+
+.react-flow__controls-button:active {
+  background-color: #1E293B;
+}
+
+.react-flow__controls-button svg {
+  fill: currentColor;
+}

src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

src/services/discovery.ts

@@ -0,0 +1,340 @@
+import { TopologyNode, TopologyEdge, Host, NetworkInfo, ServiceCategory, Status } from '../types';
+
+const serviceCategory: Record<string, ServiceCategory> = {
+  jellyfin: 'media',
+  immich: 'media',
+  sonarr: 'media',
+  radarr: 'media',
+  sabnzbd: 'media',
+  qbittorrent: 'media',
+  lidarr: 'media',
+  readarr: 'media',
+  bazarr: 'media',
+  tdarr: 'media',
+  traefik: 'infra',
+  authentik: 'infra',
+  vaultwarden: 'infra',
+  gitea: 'infra',
+  postgres: 'infra',
+  portainer: 'infra',
+  prometheus: 'monitoring',
+  grafana: 'monitoring',
+  loki: 'monitoring',
+  uptimekuma: 'monitoring',
+  cadvisor: 'monitoring',
+  nodeexporter: 'monitoring',
+  litellm: 'ai',
+  ollama: 'ai',
+  'code-server': 'ai',
+  qdrant: 'storage',
+};
+
+function getCategory(name: string): ServiceCategory {
+  const key = Object.keys(serviceCategory).find(k => 
+    name.toLowerCase().includes(k.toLowerCase())
+  );
+  return serviceCategory[key || ''] || 'other';
+}
+
+export interface DiscoveredContainer {
+  name: string;
+  image: string;
+  status: string;
+  ports: string[];
+  created: string;
+}
+
+export interface DiscoveredHost {
+  name: string;
+  ip: string;
+  online: boolean;
+  containers: DiscoveredContainer[];
+  cpuUsage?: number;
+  memoryUsage?: number;
+  uptime?: string;
+}
+
+export interface DiscoveryResult {
+  hosts: DiscoveredHost[];
+  timestamp: Date;
+  errors: string[];
+}
+
+export const defaultNetworkInfo: NetworkInfo = {
+  gateway: {
+    model: 'UniFi Dream Machine Pro',
+    ip: '192.168.1.1'
+  },
+  vlans: [
+    { id: 1, name: 'Default', subnet: '192.168.1.0/24', purpose: 'Core infrastructure' },
+    { id: 3, name: 'Trusted', subnet: '192.168.3.0/24', purpose: 'Trusted devices' },
+    { id: 10, name: 'Family', subnet: '192.168.10.0/24', purpose: 'Family devices' },
+    { id: 20, name: 'Guest', subnet: '192.168.20.0/24', purpose: 'Guest network' },
+    { id: 30, name: 'IoT', subnet: '192.168.30.0/24', purpose: 'IoT devices, Home Assistant' },
+    { id: 50, name: 'Production', subnet: '192.168.50.0/24', purpose: 'Production services' }
+  ],
+  wifi: [
+    { ssid: 'Will of D.', vlan: 'default' },
+    { ssid: 'Will of D. IoT', vlan: 30 },
+    { ssid: 'Family of D.', vlan: 10 }
+  ]
+};
+
+export const defaultHosts: Host[] = [
+  { name: 'ubuntu', ip: '192.168.50.61', type: 'vm', role: 'Primary Docker Host', containers: [] },
+  { name: 'grizzley', ip: '192.168.50.84', type: 'rpi5', role: 'Edge Services', containers: [] },
+  { name: 'ice', ip: '192.168.50.197', type: 'rpi5', role: 'Spare/Development', containers: [] },
+  { name: 'panda', ip: '192.168.30.196', type: 'rpi5', role: 'Home Assistant', containers: [] },
+  { name: 'truenas', ip: '192.168.50.12', type: 'physical', role: 'Storage (NAS)', containers: [] },
+  { name: 'proxmox', ip: '192.168.50.11', type: 'physical', role: 'Hypervisor', containers: [] }
+];
+
+const containerDescriptions: Record<string, { description: string; importance: 1|2|3|4|5 }> = {
+  traefik: { description: 'Reverse proxy and load balancer', importance: 5 },
+  jellyfin: { description: 'Media server', importance: 5 },
+  immich: { description: 'Photo and video management', importance: 4 },
+  authentik: { description: 'Identity provider and SSO', importance: 5 },
+  gitea: { description: 'Self-hosted Git service', importance: 4 },
+  prometheus: { description: 'Monitoring and metrics', importance: 4 },
+  grafana: { description: 'Metrics visualization', importance: 4 },
+  sonarr: { description: 'TV show management', importance: 4 },
+  radarr: { description: 'Movie management', importance: 4 },
+  tdarr: { description: 'Video transcoding', importance: 3 },
+  frigate: { description: 'NVR with local AI', importance: 4 },
+  vaultwarden: { description: 'Password manager', importance: 5 },
+  portainer: { description: 'Container management UI', importance: 3 },
+  ollama: { description: 'Local LLM runtime', importance: 4 },
+  litellm: { description: 'LLM API gateway', importance: 4 },
+};
+
+function parseContainerStatus(status: string): Status {
+  const s = status.toLowerCase();
+  if (s.includes('up') || s.includes('running')) return 'running';
+  if (s.includes('exited') || s.includes('stopped') || s.includes('dead')) return 'stopped';
+  return 'unknown';
+}
+
+export function convertToTopology(
+  hosts: DiscoveredHost[],
+  networkInfo: NetworkInfo
+): { nodes: TopologyNode[]; edges: TopologyEdge[] } {
+  const nodes: TopologyNode[] = [];
+  const edges: TopologyEdge[] = [];
+
+  nodes.push({
+    id: 'gateway',
+    type: 'gateway',
+    name: `UniFi Gateway`,
+    data: {
+      status: 'running',
+      metadata: { model: networkInfo.gateway.model, ip: networkInfo.gateway.ip },
+      importance: 5,
+      description: 'Main network gateway and firewall'
+    }
+  });
+
+  networkInfo.vlans.forEach((vlan) => {
+    nodes.push({
+      id: `vlan-${vlan.id}`,
+      type: 'vlan',
+      name: `VLAN ${vlan.id}: ${vlan.name}`,
+      data: {
+        status: 'running',
+        metadata: { subnet: vlan.subnet, purpose: vlan.purpose },
+        importance: 4,
+        description: vlan.purpose || '',
+        parentId: 'gateway'
+      }
+    });
+    edges.push({ id: `e-gateway-vlan${vlan.id}`, source: 'gateway', target: `vlan-${vlan.id}` });
+  });
+
+  networkInfo.wifi.forEach((wifi) => {
+    const wifiId = `wifi-${wifi.ssid.replace(/\s+/g, '-')}`;
+    nodes.push({
+      id: wifiId,
+      type: 'wifi',
+      name: wifi.ssid,
+      data: {
+        status: 'running',
+        metadata: { vlan: wifi.vlan },
+        importance: 3,
+        parentId: 'gateway'
+      }
+    });
+    edges.push({ id: `e-gateway-${wifiId}`, source: 'gateway', target: wifiId });
+  });
+
+  hosts.forEach((host) => {
+    const parentVlan = host.ip.startsWith('192.168.50') ? 'vlan-50' : 
+                       host.ip.startsWith('192.168.30') ? 'vlan-30' :
+                       host.ip.startsWith('192.168.10') ? 'vlan-10' : 'vlan-1';
+
+    const hostType = host.name === 'proxmox' || host.name === 'truenas' ? 'host_physical' : 
+                     host.name === 'ubuntu' ? 'host_vm' : 'host_container';
+
+    const hostNode: TopologyNode = {
+      id: host.name,
+      type: hostType,
+      name: `${host.name} (${host.ip})`,
+      data: {
+        ip: host.ip,
+        status: host.online ? 'running' : 'stopped',
+        metadata: { 
+          role: host.name === 'ubuntu' ? 'Primary Docker Host' : 
+                 host.name === 'grizzley' ? 'Edge Services' :
+                 host.name === 'truenas' ? 'Storage (NAS)' :
+                 host.name === 'proxmox' ? 'Hypervisor' : 'Host',
+          type: hostType,
+          containerCount: host.containers.length,
+          cpuUsage: host.cpuUsage,
+          memoryUsage: host.memoryUsage,
+          uptime: host.uptime
+        },
+        importance: host.name === 'ubuntu' ? 5 : 4,
+        description: host.name === 'ubuntu' ? 'Primary Docker Host with GPU' :
+                     host.name === 'grizzley' ? 'Edge Traefik & Camera Services' :
+                     host.name === 'truenas' ? 'TrueNAS Storage' : 'Host',
+        parentId: parentVlan
+      }
+    };
+    nodes.push(hostNode);
+    edges.push({ id: `e-${parentVlan}-${host.name}`, source: parentVlan, target: host.name });
+
+    host.containers.forEach((container) => {
+      const details = containerDescriptions[container.name.replace(/-/g, '')] || { description: container.name, importance: 3 };
+      const portStr = container.ports.length > 0 ? container.ports.join(', ') : undefined;
+      
+      nodes.push({
+        id: `${host.name}-${container.name}`,
+        type: 'service',
+        name: container.name,
+        data: {
+          status: parseContainerStatus(container.status),
+          metadata: { 
+            host: host.name,
+            image: container.image,
+            ports: portStr,
+            created: container.created
+          },
+          category: getCategory(container.name),
+          importance: details.importance,
+          description: details.description,
+          parentId: host.name
+        }
+      });
+      edges.push({ id: `e-${host.name}-${container.name}`, source: host.name, target: `${host.name}-${container.name}` });
+    });
+  });
+
+  const truenasNode: TopologyNode = {
+    id: 'truenas-nfs',
+    type: 'mount',
+    name: '/mnt/truenas/media',
+    data: {
+      status: 'running',
+      metadata: { type: 'nfs', server: '192.168.50.12' },
+      importance: 5,
+      description: 'TrueNAS NFS mount for media storage',
+      parentId: 'truenas'
+    }
+  };
+  nodes.push(truenasNode);
+  edges.push({ id: 'e-truenas-nfs', source: 'truenas', target: 'truenas-nfs' });
+
+  ['/movies', '/tv', '/music', '/photos'].forEach((path) => {
+    const pathId = `path-${path.replace(/\//g, '-')}`;
+    nodes.push({
+      id: pathId,
+      type: 'path',
+      name: path,
+      data: {
+        status: 'running',
+        metadata: { type: 'filesystem' },
+        importance: 4,
+        parentId: 'truenas-nfs'
+      }
+    });
+    edges.push({ id: `e-nfs-${pathId}`, source: 'truenas-nfs', target: pathId });
+  });
+
+  return { nodes, edges };
+}
+
+export async function discoverHosts(
+  hosts: string[],
+  _sshConfig?: string
+): Promise<DiscoveryResult> {
+  const results: DiscoveredHost[] = [];
+  const errors: string[] = [];
+
+  const rand = (min: number, max: number) => Math.random() * (max - min) + min;
+
+  const simulatedHosts: Record<string, () => DiscoveredHost> = {
+    'ubuntu': () => ({
+      name: 'ubuntu',
+      ip: '192.168.50.61',
+      online: true,
+      cpuUsage: Math.round(rand(5, 35) * 10) / 10,
+      memoryUsage: Math.round(rand(35, 65) * 10) / 10,
+      uptime: '45 days',
+      containers: [
+        { name: 'traefik', image: 'traefik:v3.6.7', status: 'running', ports: ['80', '443'], created: '2024-01-15' },
+        { name: 'jellyfin', image: 'jellyfin/jellyfin:10.11.5', status: 'running', ports: ['8096', '9090'], created: '2024-01-15' },
+        { name: 'immich', image: 'ghcr.io/immich-app/immich-server:release', status: 'running', ports: [], created: '2024-06-20' },
+        { name: 'authentik', image: 'ghcr.io/goauthentik/server:2025.2', status: 'running', ports: [], created: '2024-02-10' },
+        { name: 'gitea', image: 'gitea/gitea:latest', status: 'running', ports: ['3000', '2222'], created: '2024-01-20' },
+        { name: 'prometheus', image: 'prom/prometheus:latest', status: 'running', ports: ['9090'], created: '2024-01-15' },
+        { name: 'grafana', image: 'grafana/grafana:11.4.0', status: 'running', ports: ['3000'], created: '2024-01-15' },
+        { name: 'sonarr', image: 'lscr.io/linuxserver/sonarr:latest', status: 'running', ports: [], created: '2024-01-15' },
+        { name: 'radarr', image: 'lscr.io/linuxserver/radarr:latest', status: 'running', ports: [], created: '2024-01-15' },
+        { name: 'tdarr', image: 'ghcr.io/haveagitgat/tdarr:latest', status: 'running', ports: ['8265', '8266', '8267'], created: '2024-01-15' },
+      ]
+    }),
+    'grizzley': () => ({
+      name: 'grizzley',
+      ip: '192.168.50.84',
+      online: true,
+      cpuUsage: Math.round(rand(3, 25) * 10) / 10,
+      memoryUsage: Math.round(rand(45, 80) * 10) / 10,
+      uptime: '30 days',
+      containers: [
+        { name: 'traefik', image: 'traefik:v3.6.7', status: 'running', ports: ['80', '443'], created: '2024-01-10' },
+        { name: 'frigate', image: 'ghcr.io/blakeblackscreen/frigate:0.14', status: 'running', ports: ['5000', '8554'], created: '2024-03-01' },
+        { name: 'scrypted', image: 'koush/scrypted', status: 'running', ports: ['10443'], created: '2024-04-15' },
+      ]
+    }),
+    'truenas': () => ({
+      name: 'truenas',
+      ip: '192.168.50.12',
+      online: true,
+      cpuUsage: Math.round(rand(1, 15) * 10) / 10,
+      memoryUsage: Math.round(rand(20, 50) * 10) / 10,
+      uptime: '90 days',
+      containers: [
+        { name: 'qdrant', image: 'qdrant/qdrant:v1.12.0', status: 'running', ports: ['6333', '6334'], created: '2024-02-01' }
+      ]
+    })
+  };
+
+  for (const hostName of hosts) {
+    const hostFactory = simulatedHosts[hostName];
+    if (hostFactory) {
+      results.push(hostFactory());
+    } else {
+      results.push({
+        name: hostName,
+        ip: '',
+        online: false,
+        containers: []
+      });
+      errors.push(`Host ${hostName}: No data available (use SSH to discover)`);
+    }
+  }
+
+  return {
+    hosts: results,
+    timestamp: new Date(),
+    errors
+  };
+}

src/services/sshDiscovery.ts

@@ -0,0 +1,133 @@
+import { Client } from 'ssh2';
+
+export interface SSHConnectionConfig {
+  host: string;
+  port?: number;
+  username: string;
+  privateKey?: string;
+  password?: string;
+}
+
+export interface DockerContainer {
+  name: string;
+  image: string;
+  status: string;
+  ports: string[];
+  created: string;
+}
+
+export interface HostInfo {
+  name: string;
+  ip: string;
+  online: boolean;
+  containers: DockerContainer[];
+  cpuUsage?: number;
+  memoryUsage?: number;
+  uptime?: string;
+  error?: string;
+}
+
+async function connectSSH(config: SSHConnectionConfig): Promise<Client> {
+  return new Promise((resolve, reject) => {
+    const conn = new Client();
+    conn.on('ready', () => resolve(conn));
+    conn.on('error', (err) => reject(err));
+    conn.connect({
+      host: config.host,
+      port: config.port || 22,
+      username: config.username,
+      privateKey: config.privateKey,
+      password: config.password,
+      readyTimeout: 10000,
+    });
+  });
+}
+
+async function execSSH(conn: Client, command: string): Promise<string> {
+  return new Promise((resolve, reject) => {
+    conn.exec(command, (err, stream) => {
+      if (err) {
+        reject(err);
+        return;
+      }
+      let output = '';
+      stream.on('close', () => resolve(output));
+      stream.on('data', (data: Buffer) => { output += data.toString(); });
+      stream.stderr.on('data', (data: Buffer) => { output += data.toString(); });
+    });
+  });
+}
+
+export async function discoverHostViaSSH(
+  hostName: string,
+  ip: string,
+  sshConfig?: SSHConnectionConfig
+): Promise<HostInfo> {
+  const defaultConfig: SSHConnectionConfig = {
+    host: ip,
+    username: 'bear',
+    privateKey: require('fs').readFileSync(require('os').homedir() + '/.ssh/id_ed25519'),
+  };
+
+  const config = sshConfig || defaultConfig;
+
+  try {
+    const conn = await connectSSH(config);
+
+    const dockerPsCmd = `docker ps --format '{{.Names}}|{{.Image}}|{{.Status}}|{{.Ports}}|{{.CreatedAt}}'`;
+    const dockerPsOutput = await execSSH(conn, dockerPsCmd);
+
+    const containers: DockerContainer[] = dockerPsOutput
+      .trim()
+      .split('\n')
+      .filter(line => line.trim())
+      .map(line => {
+        const [name, image, status, ports, created] = line.split('|');
+        return {
+          name: name.trim(),
+          image: image.trim(),
+          status: status.trim(),
+          ports: ports.trim() ? ports.trim().split(', ') : [],
+          created: created.trim(),
+        };
+      });
+
+    conn.end();
+
+    return {
+      name: hostName,
+      ip: ip,
+      online: true,
+      containers,
+    };
+  } catch (error: any) {
+    return {
+      name: hostName,
+      ip: ip,
+      online: false,
+      containers: [],
+      error: error.message || 'Connection failed',
+    };
+  }
+}
+
+export async function discoverAllHostsSSH(
+  hosts: { name: string; ip: string }[]
+): Promise<HostInfo[]> {
+  const results = await Promise.all(
+    hosts.map(host => discoverHostViaSSH(host.name, host.ip))
+  );
+  return results;
+}
+
+if (require.main === module) {
+  const hosts = [
+    { name: 'ubuntu', ip: '192.168.50.61' },
+    { name: 'grizzley', ip: '192.168.50.84' },
+    { name: 'truenas', ip: '192.168.50.12' },
+  ];
+
+  discoverAllHostsSSH(hosts).then(results => {
+    console.log(JSON.stringify(results, null, 2));
+  }).catch(console.error);
+}

src/store/topologyStore.ts

@@ -0,0 +1,173 @@
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { ViewMode, TopologyNode, TopologyEdge, NetworkInfo, Host, NodeType } from '../types';
+
+export type Orientation = 'LR' | 'TB';
+export type StatusFilter = 'all' | 'running' | 'stopped';
+
+// All node types for default filter
+const ALL_NODE_TYPES: NodeType[] = [
+  'gateway', 'vlan', 'wifi', 'host_physical', 'host_vm', 'host_container',
+  'service', 'volume', 'mount', 'path'
+];
+
+interface TopologyState {
+  nodes: TopologyNode[];
+  edges: TopologyEdge[];
+  selectedNodeId: string | null;
+  viewMode: ViewMode;
+  orientation: Orientation;
+  searchQuery: string;
+  typeFilters: NodeType[];
+  statusFilter: StatusFilter;
+  leftPanelOpen: boolean;
+  rightPanelOpen: boolean;
+  lastUpdated: Date | null;
+  isLoading: boolean;
+  
+  networkInfo: NetworkInfo | null;
+  hosts: Host[];
+  
+  setNodes: (nodes: TopologyNode[]) => void;
+  setEdges: (edges: TopologyEdge[]) => void;
+  setSelectedNode: (nodeId: string | null) => void;
+  setViewMode: (mode: ViewMode) => void;
+  setOrientation: (orientation: Orientation) => void;
+  setSearchQuery: (query: string) => void;
+  toggleTypeFilter: (type: NodeType) => void;
+  setStatusFilter: (filter: StatusFilter) => void;
+  toggleLeftPanel: () => void;
+  toggleRightPanel: () => void;
+  setLastUpdated: (date: Date) => void;
+  setIsLoading: (loading: boolean) => void;
+  setNetworkInfo: (info: NetworkInfo) => void;
+  setHosts: (hosts: Host[]) => void;
+  
+  getSelectedNode: () => TopologyNode | null;
+  getChildNodes: () => TopologyNode[];
+  getFilteredNodes: () => TopologyNode[];
+}
+
+export const useTopologyStore = create<TopologyState>()(
+  persist(
+    (set, get) => ({
+  nodes: [],
+  edges: [],
+  selectedNodeId: null,
+  viewMode: 'full',
+  orientation: 'LR',
+  searchQuery: '',
+  typeFilters: ALL_NODE_TYPES,
+  statusFilter: 'all',
+  leftPanelOpen: true,
+  rightPanelOpen: true,
+  lastUpdated: null,
+  isLoading: false,
+  networkInfo: null,
+  hosts: [],
+  
+  setNodes: (nodes) => set({ nodes }),
+  setEdges: (edges) => set({ edges }),
+  setSelectedNode: (nodeId) => set({ selectedNodeId: nodeId }),
+  setViewMode: (mode) => set({ viewMode: mode }),
+  setOrientation: (orientation) => set({ orientation }),
+  setSearchQuery: (query) => set({ searchQuery: query }),
+  toggleTypeFilter: (type) => set((state) => {
+    const exists = state.typeFilters.includes(type);
+    return { 
+      typeFilters: exists 
+        ? state.typeFilters.filter(t => t !== type)
+        : [...state.typeFilters, type]
+    };
+  }),
+  setStatusFilter: (filter) => set({ statusFilter: filter }),
+  toggleLeftPanel: () => set((state) => ({ leftPanelOpen: !state.leftPanelOpen })),
+  toggleRightPanel: () => set((state) => ({ rightPanelOpen: !state.rightPanelOpen })),
+  setLastUpdated: (date) => set({ lastUpdated: date }),
+  setIsLoading: (loading) => set({ isLoading: loading }),
+  setNetworkInfo: (info) => set({ networkInfo: info }),
+  setHosts: (hosts) => set({ hosts }),
+  
+  getSelectedNode: () => {
+    const { nodes, selectedNodeId } = get();
+    return nodes.find(n => n.id === selectedNodeId) || null;
+  },
+  
+  getChildNodes: () => {
+    const { nodes, selectedNodeId } = get();
+    if (!selectedNodeId) return [];
+    const selectedNode = nodes.find(n => n.id === selectedNodeId);
+    if (!selectedNode) return [];
+    return nodes.filter(n => n.data.parentId === selectedNodeId);
+  },
+  
+  getFilteredNodes: () => {
+    const { nodes, viewMode, searchQuery, typeFilters, statusFilter } = get();
+    
+    let filtered = nodes;
+    
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter(n => 
+        n.name.toLowerCase().includes(query) ||
+        n.data.ip?.toLowerCase().includes(query)
+      );
+    }
+    
+    if (statusFilter !== 'all') {
+      filtered = filtered.filter(n => n.data.status === statusFilter);
+    }
+    
+    if (typeFilters.length > 0 && typeFilters.length < ALL_NODE_TYPES.length) {
+      filtered = filtered.filter(n => typeFilters.includes(n.type));
+    }
+    
+    let allowedTypes: NodeType[] = [];
+    if (viewMode === 'network') {
+      allowedTypes = ['gateway', 'vlan', 'wifi', 'host_physical', 'host_vm', 'host_container'];
+    } else if (viewMode === 'host') {
+      allowedTypes = ['gateway', 'vlan', 'wifi', 'host_physical', 'host_vm', 'host_container'];
+    } else if (viewMode === 'service') {
+      allowedTypes = ['host_physical', 'host_vm', 'host_container', 'service', 'volume'];
+    } else if (viewMode === 'filesystem') {
+      allowedTypes = ['volume', 'mount', 'path'];
+    }
+    
+    if (allowedTypes.length > 0) {
+      const nodeMap = new Map(nodes.map(n => [n.id, n]));
+      const includeSet = new Set<string>();
+      
+      nodes.forEach(node => {
+        if (allowedTypes.includes(node.type)) {
+          includeSet.add(node.id);
+          
+          let current: TopologyNode | undefined = node;
+          while (current?.data?.parentId) {
+            const parentId = current.data.parentId;
+            includeSet.add(parentId);
+            current = nodeMap.get(parentId);
+            if (!current) break;
+          }
+        }
+      });
+      
+      filtered = filtered.filter(n => includeSet.has(n.id));
+    }
+    
+    return filtered;
+  }
+}),
+{
+  name: 'homelab-topology-settings',
+  version: 1,
+  storage: createJSONStorage(() => localStorage),
+  partialize: (state: TopologyState) => ({
+    viewMode: state.viewMode,
+    orientation: state.orientation,
+    searchQuery: state.searchQuery,
+    typeFilters: state.typeFilters,
+    statusFilter: state.statusFilter,
+    leftPanelOpen: state.leftPanelOpen,
+    rightPanelOpen: state.rightPanelOpen
+  })
+}));

src/types/index.ts

@@ -0,0 +1,82 @@
+export type NodeType = 
+  | 'gateway' 
+  | 'vlan' 
+  | 'wifi' 
+  | 'host_physical'
+  | 'host_vm' 
+  | 'host_container'
+  | 'service'
+  | 'volume'
+  | 'mount'
+  | 'path';
+
+export type ServiceCategory = 'media' | 'infra' | 'monitoring' | 'ai' | 'storage' | 'other';
+
+export type Status = 'running' | 'stopped' | 'unknown';
+
+export type ViewMode = 'network' | 'host' | 'service' | 'filesystem' | 'full';
+
+export interface NodeData {
+  ip?: string;
+  mac?: string;
+  status: Status;
+  metadata: Record<string, unknown>;
+  config?: string;
+  files?: string[];
+  importance: 1 | 2 | 3 | 4 | 5;
+  category?: ServiceCategory;
+  description?: string;
+  parentId?: string;
+  children?: string[];
+}
+
+export interface TopologyNode {
+  id: string;
+  type: NodeType;
+  name: string;
+  data: NodeData;
+}
+
+export interface TopologyEdge {
+  id: string;
+  source: string;
+  target: string;
+  label?: string;
+}
+
+export interface Host {
+  name: string;
+  ip: string;
+  type: 'physical' | 'vm' | 'container' | 'rpi5';
+  role: string;
+  containers: string[];
+}
+
+export interface VLAN {
+  id: number;
+  name: string;
+  subnet: string;
+  purpose?: string;
+}
+
+export interface WifiNetwork {
+  ssid: string;
+  vlan: string | number;
+}
+
+export interface NetworkInfo {
+  gateway: {
+    model: string;
+    ip: string;
+  };
+  vlans: VLAN[];
+  wifi: WifiNetwork[];
+}
+
+export interface ServiceConfig {
+  name: string;
+  image: string;
+  ports?: string[];
+  volumes?: string[];
+  environment?: Record<string, string>;
+}

src/utils/colors.ts

@@ -0,0 +1,62 @@
+import { NodeType, ServiceCategory, Status } from '../types';
+
+export function getNodeColor(type: NodeType, category?: ServiceCategory): string {
+  const colors: Record<NodeType, string> = {
+    gateway: '#6366F1',
+    vlan: '#8B5CF6',
+    wifi: '#EC4899',
+    host_physical: '#10B981',
+    host_vm: '#14B8A6',
+    host_container: '#F59E0B',
+    service: getServiceColor(category),
+    volume: '#A855F7',
+    mount: '#84CC16',
+    path: '#EAB308',
+  };
+  
+  return colors[type] || '#6B7280';
+}
+
+function getServiceColor(category?: ServiceCategory): string {
+  const categoryColors: Record<ServiceCategory, string> = {
+    media: '#EF4444',
+    infra: '#3B82F6',
+    monitoring: '#22C55E',
+    ai: '#F97316',
+    storage: '#06B6D4',
+    other: '#6B7280',
+  };
+  
+  return categoryColors[category || 'other'];
+}
+
+export function getStatusColor(status: Status): string {
+  const colors: Record<Status, string> = {
+    running: '#22C55E',
+    stopped: '#EF4444',
+    unknown: '#6B7280',
+  };
+  return colors[status];
+}
+
+export function getImportanceLabel(importance: number): string {
+  const labels: Record<number, string> = {
+    1: 'Minimal',
+    2: 'Low',
+    3: 'Medium',
+    4: 'High',
+    5: 'Critical',
+  };
+  return labels[importance] || 'Unknown';
+}
+
+export function getImportanceColor(importance: number): string {
+  const colors: Record<number, string> = {
+    1: '#6B7280',
+    2: '#9CA3AF',
+    3: '#F59E0B',
+    4: '#F97316',
+    5: '#EF4444',
+  };
+  return colors[importance] || '#6B7280';
+}

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />