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/Dashboard/HostChart.tsx

@@ -0,0 +1,103 @@
+import { useMemo } from 'react';
+import { useTopologyStore } from '../../store/topologyStore';
+import { useShallow } from 'zustand/react/shallow';
+
+/**
+ * HostChart — Visual bar chart showing container/service counts per host
+ * (data-visualizer skill — accessible color palette, responsive design)
+ * 
+ * Renders a pure-CSS horizontal bar chart — no external charting library needed.
+ * Falls back gracefully when no hosts have containers.
+ */
+
+// Colorblind-safe palette from data-visualizer skill
+const HOST_COLORS = [
+    '#0066CC', // Blue
+    '#CC6600', // Orange
+    '#7A00CC', // Purple
+    '#00CC66', // Green
+    '#CC0066', // Magenta
+    '#009E73', // Teal
+    '#56B4E9', // Sky Blue
+    '#E69F00', // Amber
+];
+
+export default function HostChart() {
+    const { nodes } = useTopologyStore(
+        useShallow((s) => ({ nodes: s.nodes }))
+    );
+
+    const hostData = useMemo(() => {
+        // Find host-type nodes
+        const hosts = nodes.filter(
+            (n) =>
+                n.type === 'host_physical' ||
+                n.type === 'host_vm' ||
+                n.type === 'host_container'
+        );
+
+        // Count children (services/containers) per host
+        return hosts
+            .map((host) => {
+                const children = nodes.filter((n) => n.data.parentId === host.id);
+                const running = children.filter((n) => n.data.status === 'running').length;
+                const stopped = children.filter((n) => n.data.status === 'stopped').length;
+                return {
+                    name: host.name,
+                    total: children.length,
+                    running,
+                    stopped,
+                    status: host.data.status,
+                };
+            })
+            .sort((a, b) => b.total - a.total);
+    }, [nodes]);
+
+    const maxCount = Math.max(...hostData.map((h) => h.total), 1);
+
+    if (hostData.length === 0) {
+        return (
+            <div className="p-4 text-slate-500 text-sm text-center">
+                No host data available
+            </div>
+        );
+    }
+
+    return (
+        <div className="p-3 space-y-2">
+            <h3 className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">
+                Services per Host
+            </h3>
+            {hostData.map((host, idx) => (
+                <div key={host.name} className="space-y-1">
+                    <div className="flex items-center justify-between text-xs">
+                        <span className="text-slate-300 font-medium truncate max-w-[120px]">
+                            {host.name}
+                        </span>
+                        <span className="text-slate-500">
+                            <span className="text-green-400">{host.running}</span>
+                            {host.stopped > 0 && (
+                                <span className="text-red-400 ml-1">+{host.stopped}</span>
+                            )}
+                        </span>
+                    </div>
+                    <div className="h-2 bg-slate-700/50 rounded-full overflow-hidden">
+                        {/* Running portion */}
+                        <div
+                            className="h-full rounded-full transition-all duration-500"
+                            style={{
+                                width: `${(host.total / maxCount) * 100}%`,
+                                background: `linear-gradient(90deg, ${HOST_COLORS[idx % HOST_COLORS.length]}CC, ${HOST_COLORS[idx % HOST_COLORS.length]}88)`,
+                            }}
+                            role="progressbar"
+                            aria-valuenow={host.total}
+                            aria-valuemin={0}
+                            aria-valuemax={maxCount}
+                            aria-label={`${host.name}: ${host.running} running, ${host.stopped} stopped`}
+                        />
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+}

src/components/Dashboard/MetricsBar.tsx

@@ -0,0 +1,118 @@
+import { useMemo } from 'react';
+import { useTopologyStore } from '../../store/topologyStore';
+import { useShallow } from 'zustand/react/shallow';
+import {
+    Activity,
+    Server,
+    Container,
+    Wifi,
+    Clock,
+} from 'lucide-react';
+
+/**
+ * MetricsBar — KPI-style metrics bar (data-visualizer + infrastructure-monitoring skills)
+ * Shows key topology stats: total hosts, running containers, online %, last discovery time.
+ */
+export default function MetricsBar() {
+    const { nodes, lastUpdated, connectionStatus } = useTopologyStore(
+        useShallow((s) => ({
+            nodes: s.nodes,
+            lastUpdated: s.lastUpdated,
+            connectionStatus: s.connectionStatus,
+        }))
+    );
+
+    const metrics = useMemo(() => {
+        const hosts = nodes.filter(
+            (n) =>
+                n.type === 'host_physical' ||
+                n.type === 'host_vm' ||
+                n.type === 'host_container'
+        );
+        const containers = nodes.filter(
+            (n) =>
+                n.type === 'service' ||
+                n.type === 'vm_lxc' ||
+                n.type === 'vm_qemu'
+        );
+        const running = containers.filter((n) => n.data.status === 'running');
+        const onlineHosts = hosts.filter((n) => n.data.status === 'running');
+
+        return {
+            totalHosts: hosts.length,
+            onlineHosts: onlineHosts.length,
+            totalContainers: containers.length,
+            runningContainers: running.length,
+            uptimePercent:
+                hosts.length > 0
+                    ? Math.round((onlineHosts.length / hosts.length) * 100)
+                    : 0,
+        };
+    }, [nodes]);
+
+    const connectionColor =
+        connectionStatus === 'ws'
+            ? 'text-green-400'
+            : connectionStatus === 'polling'
+                ? 'text-yellow-400'
+                : 'text-red-400';
+
+    const connectionLabel =
+        connectionStatus === 'ws'
+            ? 'WebSocket'
+            : connectionStatus === 'polling'
+                ? 'Polling'
+                : 'Disconnected';
+
+    return (
+        <div className="h-10 bg-slate-800/80 border-b border-slate-700/50 px-4 flex items-center gap-6 text-xs">
+            {/* Hosts */}
+            <div className="flex items-center gap-1.5" title="Hosts Online">
+                <Server size={13} className="text-emerald-400" />
+                <span className="text-slate-300 font-medium">
+                    {metrics.onlineHosts}/{metrics.totalHosts}
+                </span>
+                <span className="text-slate-500">hosts</span>
+            </div>
+
+            {/* Containers */}
+            <div className="flex items-center gap-1.5" title="Running Containers">
+                <Container size={13} className="text-cyan-400" />
+                <span className="text-slate-300 font-medium">
+                    {metrics.runningContainers}/{metrics.totalContainers}
+                </span>
+                <span className="text-slate-500">containers</span>
+            </div>
+
+            {/* Uptime */}
+            <div className="flex items-center gap-1.5" title="Host Uptime">
+                <Activity size={13} className="text-amber-400" />
+                <span className="text-slate-300 font-medium">
+                    {metrics.uptimePercent}%
+                </span>
+                <span className="text-slate-500">uptime</span>
+            </div>
+
+            {/* Spacer */}
+            <div className="flex-1" />
+
+            {/* Connection status */}
+            <div className="flex items-center gap-1.5" title={`Connection: ${connectionLabel}`}>
+                <Wifi size={13} className={connectionColor} />
+                <span className={`font-medium ${connectionColor}`}>
+                    {connectionLabel}
+                </span>
+            </div>
+
+            {/* Last updated */}
+            {lastUpdated && (
+                <div className="flex items-center gap-1.5" title="Last Discovery">
+                    <Clock size={13} className="text-slate-500" />
+                    <span className="text-slate-500">
+                        {lastUpdated.toLocaleTimeString()}
+                    </span>
+                </div>
+            )}
+        </div>
+    );
+}

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}

src/components/Header.tsx

@@ -1,4 +1,6 @@
-import { Search, Loader2, Network, HardDrive, Box, Database, Link, ArrowLeftRight, ArrowUpDown, Router, Wifi, Monitor, Container, FolderTree, Folder } from 'lucide-react';
+import { useCallback } from 'react';
+import { Search, Loader2, Network, HardDrive, Box, Database, Link, ArrowLeftRight, ArrowUpDown, Router, Wifi, Monitor, Container, FolderTree, Folder, Settings } from 'lucide-react';
+import { useShallow } from 'zustand/react/shallow';
 import { useTopologyStore, Orientation, StatusFilter } from '../store/topologyStore';
 import { ViewMode, NodeType } from '../types';
 import { getNodeColor } from '../utils/colors';
@@ -35,12 +37,12 @@ const nodeTypeFilters: { type: NodeType; icon: React.ReactNode }[] = [
 ];
 
 export default function Header({ onRefresh, isLoading: externalLoading }: HeaderProps) {
-  const { 
-    viewMode, 
-    setViewMode, 
+  const {
+    viewMode,
+    setViewMode,
     orientation,
     setOrientation,
-    searchQuery, 
+    searchQuery,
     setSearchQuery,
     typeFilters,
     toggleTypeFilter,
@@ -50,19 +52,39 @@ export default function Header({ onRefresh, isLoading: externalLoading }: Header
     toggleRightPanel,
     leftPanelOpen,
     rightPanelOpen,
-    isLoading: storeLoading
-  } = useTopologyStore();
+    isLoading: storeLoading,
+    pollInterval,
+    setPollInterval
+  } = useTopologyStore(useShallow((s) => ({
+    viewMode: s.viewMode,
+    setViewMode: s.setViewMode,
+    orientation: s.orientation,
+    setOrientation: s.setOrientation,
+    searchQuery: s.searchQuery,
+    setSearchQuery: s.setSearchQuery,
+    typeFilters: s.typeFilters,
+    toggleTypeFilter: s.toggleTypeFilter,
+    statusFilter: s.statusFilter,
+    setStatusFilter: s.setStatusFilter,
+    toggleLeftPanel: s.toggleLeftPanel,
+    toggleRightPanel: s.toggleRightPanel,
+    leftPanelOpen: s.leftPanelOpen,
+    rightPanelOpen: s.rightPanelOpen,
+    isLoading: s.isLoading,
+    pollInterval: s.pollInterval,
+    setPollInterval: s.setPollInterval,
+  })));
 
   const loading = externalLoading ?? storeLoading;
 
-  const handleRefresh = async () => {
+  const handleRefresh = useCallback(async () => {
     if (onRefresh) {
       await onRefresh();
     }
-  };
+  }, [onRefresh]);
 
   return (
-    <div className="h-14 bg-slate-800 border-b border-slate-700 px-4 flex items-center justify-between">
+    <header 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">
@@ -70,19 +92,19 @@ export default function Header({ onRefresh, isLoading: externalLoading }: Header
           </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">
+
+        <div className="flex items-center gap-1" role="toolbar" aria-label="View mode">
           {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' 
+              aria-pressed={viewMode === 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}
@@ -93,7 +115,9 @@ export default function Header({ onRefresh, isLoading: externalLoading }: Header
         <div className="h-6 w-px bg-slate-600" />
 
         <div className="flex items-center gap-2">
+          <label htmlFor="orientation-select" className="visually-hidden">Graph orientation</label>
           <select
+            id="orientation-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"
@@ -108,7 +132,7 @@ export default function Header({ onRefresh, isLoading: externalLoading }: Header
 
         <div className="h-6 w-px bg-slate-600" />
 
-        <div className="flex items-center gap-1">
+        <div className="flex items-center gap-1" role="toolbar" aria-label="Node type filters">
           {nodeTypeFilters.map(({ type, icon }) => {
             const isActive = typeFilters.includes(type);
             const color = getNodeColor(type);
@@ -116,17 +140,17 @@ export default function Header({ onRefresh, isLoading: externalLoading }: Header
               <button
                 key={type}
                 onClick={() => toggleTypeFilter(type)}
-                className={`p-2 rounded-md transition-colors ${
-                  isActive 
-                    ? 'border' 
+                aria-pressed={isActive}
+                aria-label={`Filter ${type.replace(/_/g, ' ')}`}
+                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`, 
+                  }`}
+                style={isActive ? {
+                  backgroundColor: `${color}20`,
                   borderColor: `${color}50`,
                   color: color
                 } : undefined}
-                title={type}
               >
                 {icon}
               </button>
@@ -137,7 +161,9 @@ export default function Header({ onRefresh, isLoading: externalLoading }: Header
         <div className="h-6 w-px bg-slate-600" />
 
         <div className="flex items-center gap-2">
+          <label htmlFor="status-filter" className="visually-hidden">Status filter</label>
           <select
+            id="status-filter"
             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"
@@ -147,12 +173,32 @@ export default function Header({ onRefresh, isLoading: externalLoading }: Header
             <option value="stopped">Stopped</option>
           </select>
         </div>
+
+        <div className="h-6 w-px bg-slate-600" />
+
+        <div className="flex items-center gap-2">
+          <Settings className="w-4 h-4 text-slate-400" aria-hidden="true" />
+          <label htmlFor="poll-interval" className="visually-hidden">Poll interval</label>
+          <select
+            id="poll-interval"
+            value={pollInterval}
+            onChange={(e) => setPollInterval(parseInt(e.target.value, 10))}
+            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={10000}>10 seconds</option>
+            <option value={30000}>30 seconds</option>
+            <option value={60000}>1 minute</option>
+            <option value={300000}>5 minutes</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" />
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" aria-hidden="true" />
+          <label htmlFor="node-search" className="visually-hidden">Search nodes</label>
           <input
+            id="node-search"
             type="text"
             placeholder="Search nodes..."
             value={searchQuery}
@@ -164,9 +210,10 @@ export default function Header({ onRefresh, isLoading: externalLoading }: Header
         <button
           onClick={handleRefresh}
           disabled={loading}
+          aria-label={loading ? 'Loading data' : 'Refresh data'}
           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' : ''}`} />
+          <Loader2 className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} aria-hidden="true" />
           {loading ? 'Loading...' : 'Refresh'}
         </button>
 
@@ -174,24 +221,24 @@ export default function Header({ onRefresh, isLoading: externalLoading }: Header
 
         <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"
+          aria-label={leftPanelOpen ? 'Hide child nodes panel' : 'Show child nodes panel'}
+          aria-pressed={leftPanelOpen}
+          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'
+            }`}
         >
-          <Box className="w-5 h-5" />
+          <Box className="w-5 h-5" aria-hidden="true" />
         </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"
+          aria-label={rightPanelOpen ? 'Hide details panel' : 'Show details panel'}
+          aria-pressed={rightPanelOpen}
+          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'
+            }`}
         >
-          <Database className="w-5 h-5" />
+          <Database className="w-5 h-5" aria-hidden="true" />
         </button>
       </div>
-    </div>
+    </header>
   );
 }

src/components/LeftPanel.tsx

@@ -1,7 +1,10 @@
+import { useMemo } from 'react';
 import { ChevronRight, Server, Network, Wifi, Box, Database, Folder } from 'lucide-react';
+import { useShallow } from 'zustand/react/shallow';
 import { useTopologyStore } from '../store/topologyStore';
 import { getNodeColor } from '../utils/colors';
 import { TopologyNode, NodeType } from '../types';
+import HostChart from './Dashboard/HostChart';
 
 const typeIcons: Record<NodeType, React.ReactNode> = {
   gateway: <Network className="w-4 h-4" />,
@@ -36,19 +39,27 @@ const typeLabels: Record<NodeType, string> = {
 };
 
 export default function LeftPanel() {
-  const { nodes, selectedNodeId, setSelectedNode } = useTopologyStore();
-  
+  const { nodes, selectedNodeId, setSelectedNode } = useTopologyStore(
+    useShallow((s) => ({
+      nodes: s.nodes,
+      selectedNodeId: s.selectedNodeId,
+      setSelectedNode: s.setSelectedNode,
+    }))
+  );
+
   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[]>);
+  const groupedChildren = useMemo(() => {
+    return childNodes.reduce((acc, node) => {
+      if (!acc[node.type]) acc[node.type] = [];
+      acc[node.type].push(node);
+      return acc;
+    }, {} as Record<NodeType, TopologyNode[]>);
+  }, [childNodes]);
 
   return (
-    <div className="w-72 bg-slate-800 border-r border-slate-700 flex flex-col">
+    <aside className="w-72 bg-slate-800 border-r border-slate-700 flex flex-col" aria-label="Child nodes panel">
       <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'}
@@ -70,7 +81,7 @@ export default function LeftPanel() {
             No child nodes
           </div>
         ) : (
-          <div className="p-2">
+          <nav className="p-2" aria-label="Child node list">
             {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">
@@ -80,13 +91,12 @@ export default function LeftPanel() {
                   <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'
-                    }`}
+                    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 
+                    <div
                       className="w-8 h-8 rounded-lg flex items-center justify-center"
                       style={{ backgroundColor: `${getNodeColor(node.type, node.data.category)}20` }}
                     >
@@ -100,14 +110,18 @@ export default function LeftPanel() {
                         <div className="text-xs text-slate-500">{node.data.ip}</div>
                       )}
                     </div>
-                    <ChevronRight className="w-4 h-4 text-slate-500" />
+                    <ChevronRight className="w-4 h-4 text-slate-500" aria-hidden="true" />
                   </button>
                 ))}
               </div>
             ))}
-          </div>
+          </nav>
         )}
       </div>
-    </div>
+      {/* Host metrics chart (data-visualizer skill) */}
+      <div className="border-t border-slate-700/50">
+        <HostChart />
+      </div>
+    </aside>
   );
 }

src/components/RightPanel.tsx

@@ -1,7 +1,9 @@
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
 import { Info, FileCode, FolderOpen, BarChart3, Star, X, Terminal, Folder } from 'lucide-react';
+import { useShallow } from 'zustand/react/shallow';
 import { useTopologyStore } from '../store/topologyStore';
 import { getNodeColor, getStatusColor, getImportanceLabel, getImportanceColor } from '../utils/colors';
+import { TopologyNode } from '../types';
 import FileBrowser from './FileBrowser';
 
 type TabId = 'details' | 'config' | 'files' | 'usage' | 'importance';
@@ -15,19 +17,49 @@ const tabs: { id: TabId; label: string; icon: React.ReactNode }[] = [
 ];
 
 export default function RightPanel() {
-  const { nodes, selectedNodeId, setSelectedNode, openTerminal } = useTopologyStore();
+  const { nodes, selectedNodeId, setSelectedNode, openTerminal } = useTopologyStore(
+    useShallow((s) => ({
+      nodes: s.nodes,
+      selectedNodeId: s.selectedNodeId,
+      setSelectedNode: s.setSelectedNode,
+      openTerminal: s.openTerminal,
+    }))
+  );
   const [activeTab, setActiveTab] = useState<TabId>('details');
   const [fileBrowserOpen, setFileBrowserOpen] = useState(false);
-  
+
   const selectedNode = nodes.find(n => n.id === selectedNodeId);
 
+  const handleTabKeyDown = useCallback((e: React.KeyboardEvent, currentIndex: number) => {
+    let newIndex = currentIndex;
+    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+      e.preventDefault();
+      newIndex = (currentIndex + 1) % tabs.length;
+    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+      e.preventDefault();
+      newIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      newIndex = 0;
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      newIndex = tabs.length - 1;
+    } else {
+      return;
+    }
+    setActiveTab(tabs[newIndex].id);
+    // Focus the new tab button
+    const tabEl = document.getElementById(`tab-${tabs[newIndex].id}`);
+    tabEl?.focus();
+  }, []);
+
   if (!selectedNode) {
     return (
-      <div className="w-80 bg-slate-800 border-l border-slate-700 flex flex-col items-center justify-center p-4">
+      <aside className="w-80 bg-slate-800 border-l border-slate-700 flex flex-col items-center justify-center p-4" aria-label="Node details panel">
         <div className="text-slate-500 text-sm text-center">
           Select a node to view its details
         </div>
-      </div>
+      </aside>
     );
   }
 
@@ -36,7 +68,7 @@ export default function RightPanel() {
   const isHost = selectedNode.type.startsWith('host_') || selectedNode.type.startsWith('vm_');
 
   return (
-    <div className="w-80 bg-slate-800 border-l border-slate-700 flex flex-col">
+    <aside className="w-80 bg-slate-800 border-l border-slate-700 flex flex-col" aria-label="Node details panel">
       <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>
         <div className="flex items-center gap-1">
@@ -45,45 +77,57 @@ export default function RightPanel() {
               <button
                 onClick={() => setFileBrowserOpen(true)}
                 className="p-1 hover:bg-slate-700 rounded transition-colors"
-                title="Browse Files"
+                aria-label="Browse files"
               >
-                <Folder className="w-4 h-4 text-slate-400" />
+                <Folder className="w-4 h-4 text-slate-400" aria-hidden="true" />
               </button>
               <button
                 onClick={() => openTerminal(selectedNodeId)}
                 className="p-1 hover:bg-slate-700 rounded transition-colors"
-                title="Open Terminal"
+                aria-label="Open terminal"
               >
-                <Terminal className="w-4 h-4 text-slate-400" />
+                <Terminal className="w-4 h-4 text-slate-400" aria-hidden="true" />
               </button>
             </>
           )}
           <button
             onClick={() => setSelectedNode(null)}
             className="p-1 hover:bg-slate-700 rounded transition-colors"
+            aria-label="Close details panel"
           >
-            <X className="w-4 h-4 text-slate-400" />
+            <X className="w-4 h-4 text-slate-400" aria-hidden="true" />
           </button>
         </div>
       </div>
 
-      <div className="flex border-b border-slate-700">
-        {tabs.map(tab => (
+      <div className="flex border-b border-slate-700" role="tablist" aria-label="Node information tabs">
+        {tabs.map((tab, index) => (
           <button
             key={tab.id}
+            id={`tab-${tab.id}`}
+            role="tab"
+            aria-selected={activeTab === tab.id}
+            aria-controls={`tabpanel-${tab.id}`}
+            tabIndex={activeTab === tab.id ? 0 : -1}
             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' 
+            onKeyDown={(e) => handleTabKeyDown(e, index)}
+            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}
+            <span aria-hidden="true">{tab.icon}</span>
+            <span className="visually-hidden">{tab.label}</span>
           </button>
         ))}
       </div>
 
-      <div className="flex-1 overflow-y-auto p-4">
+      <div
+        className="flex-1 overflow-y-auto p-4"
+        role="tabpanel"
+        id={`tabpanel-${activeTab}`}
+        aria-labelledby={`tab-${activeTab}`}
+      >
         {activeTab === 'details' && <DetailsTab node={selectedNode} nodeColor={nodeColor} statusColor={statusColor} />}
         {activeTab === 'config' && <ConfigTab node={selectedNode} />}
         {activeTab === 'files' && <FilesTab node={selectedNode} />}
@@ -92,20 +136,20 @@ export default function RightPanel() {
       </div>
 
       {fileBrowserOpen && selectedNodeId && (
-        <FileBrowser 
-          host={selectedNodeId} 
-          onClose={() => setFileBrowserOpen(false)} 
+        <FileBrowser
+          host={selectedNodeId}
+          onClose={() => setFileBrowserOpen(false)}
         />
       )}
-    </div>
+    </aside>
   );
 }
 
-function DetailsTab({ node, nodeColor, statusColor }: { node: any; nodeColor: string; statusColor: string }) {
+function DetailsTab({ node, nodeColor, statusColor }: { node: TopologyNode; nodeColor: string; statusColor: string }) {
   return (
     <div className="space-y-4">
       <div className="flex items-center gap-3">
-        <div 
+        <div
           className="w-12 h-12 rounded-xl flex items-center justify-center"
           style={{ backgroundColor: `${nodeColor}20` }}
         >
@@ -116,7 +160,7 @@ function DetailsTab({ node, nodeColor, statusColor }: { node: any; nodeColor: st
         <div>
           <div className="text-white font-medium">{node.type.replace(/_/g, ' ')}</div>
           <div className="flex items-center gap-2 text-sm">
-            <div 
+            <div
               className="w-2 h-2 rounded-full"
               style={{ backgroundColor: statusColor }}
             />
@@ -130,7 +174,7 @@ function DetailsTab({ node, nodeColor, statusColor }: { node: any; nodeColor: st
           <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>
@@ -149,13 +193,13 @@ function DetailsTab({ node, nodeColor, statusColor }: { node: any; nodeColor: st
   );
 }
 
-function ConfigTab({ node }: { node: any }) {
+function ConfigTab({ node }: { node: TopologyNode }) {
   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" />
+        <FileCode className="w-8 h-8 mx-auto mb-2 opacity-50" aria-hidden="true" />
         <div className="text-sm">No configuration available</div>
       </div>
     );
@@ -170,7 +214,7 @@ function ConfigTab({ node }: { node: any }) {
   );
 }
 
-function FilesTab({ node }: { node: any }) {
+function FilesTab({ node }: { node: TopologyNode }) {
   const files = node.data.files || [
     '/etc/docker-compose.yml',
     '/etc/traefik/dynamic.yml',
@@ -184,7 +228,7 @@ function FilesTab({ node }: { node: any }) {
           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" />
+          <FolderOpen className="w-4 h-4 text-slate-400" aria-hidden="true" />
           <span className="font-mono text-xs text-slate-300 truncate">{file}</span>
         </button>
       ))}
@@ -192,13 +236,13 @@ function FilesTab({ node }: { node: any }) {
   );
 }
 
-function UsageTab({ node }: { node: any }) {
+function UsageTab({ node }: { node: TopologyNode }) {
   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" />
+        <BarChart3 className="w-8 h-8 mx-auto mb-2 opacity-50" aria-hidden="true" />
         <div className="text-sm">Usage data available for services only</div>
       </div>
     );
@@ -211,7 +255,7 @@ function UsageTab({ node }: { node: any }) {
           <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-2 bg-slate-700 rounded-full overflow-hidden" role="progressbar" aria-valuenow={12.4} aria-valuemin={0} aria-valuemax={100} aria-label="CPU usage">
           <div className="h-full w-[12.4%] bg-indigo-500 rounded-full" />
         </div>
       </div>
@@ -221,7 +265,7 @@ function UsageTab({ node }: { node: any }) {
           <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-2 bg-slate-700 rounded-full overflow-hidden" role="progressbar" aria-valuenow={25.6} aria-valuemin={0} aria-valuemax={100} aria-label="Memory usage">
           <div className="h-full w-[25.6%] bg-purple-500 rounded-full" />
         </div>
       </div>
@@ -231,7 +275,7 @@ function UsageTab({ node }: { node: any }) {
           <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-2 bg-slate-700 rounded-full overflow-hidden" role="progressbar" aria-valuenow={40} aria-valuemin={0} aria-valuemax={100} aria-label="Network I/O">
           <div className="h-full w-[40%] bg-cyan-500 rounded-full" />
         </div>
       </div>
@@ -239,12 +283,12 @@ function UsageTab({ node }: { node: any }) {
   );
 }
 
-function ImportanceTab({ node }: { node: any }) {
+function ImportanceTab({ node }: { node: TopologyNode }) {
   const importance = node.data.importance || 3;
   const importanceLabel = getImportanceLabel(importance);
   const importanceColor = getImportanceColor(importance);
 
-  const reasons = {
+  const reasons: Record<number, string[]> = {
     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'],
@@ -259,9 +303,11 @@ function ImportanceTab({ node }: { node: any }) {
           <Star
             key={star}
             className={`w-8 h-8 ${star <= importance ? 'fill-yellow-500 text-yellow-500' : 'text-slate-600'}`}
+            aria-hidden="true"
           />
         ))}
       </div>
+      <div className="visually-hidden">Importance: {importance} out of 5 stars</div>
 
       <div className="text-center">
         <div className="text-lg font-semibold" style={{ color: importanceColor }}>
@@ -273,9 +319,9 @@ function ImportanceTab({ node }: { node: any }) {
       <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) => (
+          {reasons[importance]?.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" />
+              <div className="w-1 h-1 bg-slate-500 rounded-full" aria-hidden="true" />
               {reason}
             </li>
           ))}

src/components/StaleWarning.tsx

@@ -0,0 +1,41 @@
+import { AlertTriangle, X } from 'lucide-react';
+import { useTopologyStore } from '../store/topologyStore';
+
+export default function StaleWarning() {
+  const { 
+    consecutiveFailures, 
+    lastSuccessfulDiscovery, 
+    staleWarningDismissed,
+    dismissStaleWarning 
+  } = useTopologyStore();
+
+  if (consecutiveFailures < 3 || staleWarningDismissed) {
+    return null;
+  }
+
+  const formatTime = (date: Date | null) => {
+    if (!date) return 'Never';
+    return date.toLocaleString();
+  };
+
+  return (
+    <div className="bg-amber-900/30 border-b border-amber-700/50 px-4 py-2 flex items-center justify-between">
+      <div className="flex items-center gap-3">
+        <AlertTriangle className="w-4 h-4 text-amber-400 flex-shrink-0" />
+        <span className="text-amber-200 text-sm">
+          Data may be stale - Last successful discovery: {formatTime(lastSuccessfulDiscovery)}
+        </span>
+        <span className="text-amber-400/70 text-xs">
+          ({consecutiveFailures} consecutive failures)
+        </span>
+      </div>
+      <button
+        onClick={dismissStaleWarning}
+        className="p-1 hover:bg-amber-800/50 rounded transition-colors"
+        title="Dismiss warning"
+      >
+        <X className="w-4 h-4 text-amber-400" />
+      </button>
+    </div>
+  );
+}