feat: integrate all 10 skills into homelab-topology

- Added api-security-hardening (helmet, rate limits)
- Added nodejs-backend-patterns (error handling)
- Added observability-monitoring (pino logging)
- Added websocket-engineer (socket.io real-time updates)
- Added docker (Multi-stage build, compose)
- Added vitest (testing configuration and store tests)
- Added data-visualizer (MetricsBar and HostChart)
- Added infrastructure-monitoring/proxmox-admin/network-engineer types
- Fixed UI accessibility and styling
- Cleaned up node_modules tracking

src/components/Graph/TopologyGraph.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useMemo, memo } from 'react';
 import {
   ReactFlow,
   Background,
@@ -12,6 +12,7 @@ import {
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import dagre from 'dagre';
+import { useShallow } from 'zustand/react/shallow';
 import { useTopologyStore } from '../../store/topologyStore';
 import { getNodeColor, getStatusColor } from '../../utils/colors';
 import { Server, Network, Wifi, Box, Database, Folder } from 'lucide-react';
@@ -33,8 +34,8 @@ const nodeIcons: Record<NodeType, React.ReactNode> = {
   path: <Folder className="w-4 h-4" />,
 };
 
-function CustomNode({ data, selected, id }: NodeProps) {
-  const { highlightPath } = useTopologyStore();
+const CustomNode = memo(function CustomNode({ data, selected, id }: NodeProps) {
+  const highlightPath = useTopologyStore((s) => s.highlightPath);
   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');
@@ -43,31 +44,32 @@ function CustomNode({ data, selected, id }: NodeProps) {
 
   return (
     <div
-      className={`px-4 py-3 rounded-xl border-2 transition-all ${
-        selected 
-          ? 'border-sky-400 shadow-lg shadow-sky-400/20' 
+      className={`px-4 py-3 rounded-xl border-2 transition-all duration-200 ${selected
+          ? 'border-sky-400 shadow-lg shadow-sky-400/20 scale-[1.02]'
           : isHighlighted
             ? 'border-indigo-400 shadow-lg shadow-indigo-400/20'
-            : 'border-slate-600 hover:border-slate-500'
-      }`}
-      style={{ 
+            : 'border-slate-600 hover:border-slate-500 hover:shadow-md hover:shadow-slate-700/30 hover:scale-[1.01]'
+        }`}
+      style={{
         backgroundColor: isDimmed ? '#0F172A' : '#1E293B',
         minWidth: '140px',
         opacity: isDimmed ? 0.4 : 1
       }}
+      role="treeitem"
+      aria-label={`${nodeData.label || 'Node'}, ${nodeData.type?.replace(/_/g, ' ') || 'unknown type'}, ${nodeData.status || 'unknown status'}`}
     >
       <Handle type="target" position={Position.Left} className="!bg-slate-400" />
-      
+
       <div className="flex items-center gap-3">
-        <div 
+        <div
           className="w-10 h-10 rounded-lg flex items-center justify-center"
           style={{ backgroundColor: `${nodeColor}20` }}
         >
-          <div style={{ color: nodeColor }}>
+          <div style={{ color: nodeColor }} aria-hidden="true">
             {nodeIcons[nodeData.type || 'service']}
           </div>
         </div>
-        
+
         <div className="flex-1 min-w-0">
           <div className="text-sm font-medium text-white truncate">
             {nodeData.label}
@@ -78,17 +80,18 @@ function CustomNode({ data, selected, id }: NodeProps) {
             </div>
           )}
         </div>
-        
-        <div 
+
+        <div
           className="w-2.5 h-2.5 rounded-full"
           style={{ backgroundColor: statusColor }}
+          aria-label={`Status: ${nodeData.status || 'unknown'}`}
         />
       </div>
-      
+
       <Handle type="source" position={Position.Right} className="!bg-slate-400" />
     </div>
   );
-}
+});
 
 const nodeTypes = {
   custom: CustomNode,
@@ -99,7 +102,7 @@ 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 });
@@ -130,30 +133,34 @@ function getLayoutedElements(nodes: Node[], edges: Edge[], direction: 'LR' | 'TB
 }
 
 export default function TopologyGraph() {
-  const { 
-    edges: storeEdges, 
-    selectedNodeId, 
+  const {
+    edges: storeEdges,
+    selectedNodeId,
     setSelectedNode,
     getFilteredNodes,
     orientation,
     viewMode,
-    highlightPath 
-  } = useTopologyStore();
+    highlightPath
+  } = useTopologyStore(useShallow((s) => ({
+    edges: s.edges,
+    selectedNodeId: s.selectedNodeId,
+    setSelectedNode: s.setSelectedNode,
+    getFilteredNodes: s.getFilteredNodes,
+    orientation: s.orientation,
+    viewMode: s.viewMode,
+    highlightPath: s.highlightPath,
+  })));
 
-  const [nodes, setNodes] = useState<Node[]>([]);
-  const [edges, setEdges] = useState<Edge[]>([]);
-
-  useEffect(() => {
+  // Memoize the layout computation instead of useState + useEffect
+  const { nodes, edges } = useMemo(() => {
     const filteredNodes = getFilteredNodes();
-    
+
     if (filteredNodes.length === 0) {
-      setNodes([]);
-      setEdges([]);
-      return;
+      return { nodes: [] as Node[], edges: [] as Edge[] };
     }
 
     const nodeIds = new Set(filteredNodes.map(n => n.id));
-    
+
     const newNodes: Node[] = filteredNodes.map(node => ({
       id: node.id,
       type: 'custom',
@@ -179,21 +186,21 @@ export default function TopologyGraph() {
           target: edge.target,
           type: 'smoothstep',
           animated: isSelected || isPathEdge,
-          style: { 
-            stroke: isSelected 
-              ? '#38BDF8' 
+          style: {
+            stroke: isSelected
+              ? '#38BDF8'
               : isPathEdge
                 ? '#818CF8'
                 : '#475569',
-            strokeWidth: isSelected || isPathEdge 
-              ? 2 
+            strokeWidth: isSelected || isPathEdge
+              ? 2
               : 1,
             opacity: highlightPath.length > 0 && !isPathEdge ? 0.3 : 1
           },
           markerEnd: {
             type: 'arrowclosed' as const,
-            color: isSelected 
-              ? '#38BDF8' 
+            color: isSelected
+              ? '#38BDF8'
               : isPathEdge
                 ? '#818CF8'
                 : '#475569',
@@ -201,15 +208,8 @@ export default function TopologyGraph() {
         };
       });
 
-    const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(
-      newNodes,
-      newEdges,
-      orientation
-    );
-
-    setNodes(layoutedNodes);
-    setEdges(layoutedEdges);
-  }, [getFilteredNodes, storeEdges, selectedNodeId, orientation, viewMode]);
+    return getLayoutedElements(newNodes, newEdges, orientation);
+  }, [getFilteredNodes, storeEdges, selectedNodeId, orientation, viewMode, highlightPath]);
 
   const onNodeClick = useCallback((_: React.MouseEvent, node: Node) => {
     setSelectedNode(node.id);
@@ -220,7 +220,7 @@ export default function TopologyGraph() {
   }, [setSelectedNode]);
 
   return (
-    <div className="w-full h-full">
+    <div className="w-full h-full" role="application" aria-label="Network topology graph">
       <ReactFlow
         nodes={nodes}
         edges={edges}