feat: expand discovery with systemd services, LXC/VMs, SSH terminal, and filebrowser

- Add systemd service discovery to backend
- Add Proxmox LXC/VM detection
- Add hostType field to config for better host categorization
- Fix SSH trust between hosts (ubuntu/grizzley -> truenas/proxmox)
- Add SSH terminal support via xterm.js
- Add filebrowser for browsing host filesystems
- Update frontend types and components for new node types

src/components/Graph/TopologyGraph.tsx

@@ -24,27 +24,36 @@ const nodeIcons: Record<NodeType, React.ReactNode> = {
   host_physical: <Server className="w-5 h-5" />,
   host_vm: <Server className="w-5 h-5" />,
   host_container: <Server className="w-5 h-5" />,
+  vm_lxc: <Box className="w-4 h-4" />,
+  vm_qemu: <Server className="w-5 h-5" />,
+  systemd_service: <Box 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" />,
 };
 
-function CustomNode({ data, selected }: NodeProps) {
+function CustomNode({ data, selected, id }: NodeProps) {
+  const { highlightPath } = useTopologyStore();
   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');
+  const isHighlighted = highlightPath.includes(id);
+  const isDimmed = highlightPath.length > 0 && !isHighlighted;
 
   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'
+          : isHighlighted
+            ? 'border-indigo-400 shadow-lg shadow-indigo-400/20'
+            : 'border-slate-600 hover:border-slate-500'
       }`}
       style={{ 
-        backgroundColor: '#1E293B',
-        minWidth: '140px'
+        backgroundColor: isDimmed ? '#0F172A' : '#1E293B',
+        minWidth: '140px',
+        opacity: isDimmed ? 0.4 : 1
       }}
     >
       <Handle type="target" position={Position.Left} className="!bg-slate-400" />
@@ -127,7 +136,8 @@ export default function TopologyGraph() {
     setSelectedNode,
     getFilteredNodes,
     orientation,
-    viewMode 
+    viewMode,
+    highlightPath 
   } = useTopologyStore();
 
   const [nodes, setNodes] = useState<Node[]>([]);
@@ -160,27 +170,36 @@ export default function TopologyGraph() {
 
     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',
-        },
-      }));
+      .map(edge => {
+        const isPathEdge = highlightPath.includes(edge.source) && highlightPath.includes(edge.target);
+        const isSelected = edge.source === selectedNodeId || edge.target === selectedNodeId;
+        return {
+          id: edge.id,
+          source: edge.source,
+          target: edge.target,
+          type: 'smoothstep',
+          animated: isSelected || isPathEdge,
+          style: { 
+            stroke: isSelected 
+              ? '#38BDF8' 
+              : isPathEdge
+                ? '#818CF8'
+                : '#475569',
+            strokeWidth: isSelected || isPathEdge 
+              ? 2 
+              : 1,
+            opacity: highlightPath.length > 0 && !isPathEdge ? 0.3 : 1
+          },
+          markerEnd: {
+            type: 'arrowclosed' as const,
+            color: isSelected 
+              ? '#38BDF8' 
+              : isPathEdge
+                ? '#818CF8'
+                : '#475569',
+          },
+        };
+      });
 
     const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(
       newNodes,