feat(FN-1228): enhance MeshTopology with peer awareness and status legend

- Export MeshTopologyProps interface for external use
- Add peer awareness lines between remote nodes for mesh visualization
- Implement dynamic SVG sizing based on number of remote nodes
- Add status color legend showing online/offline/connecting/error states
- Improve CSS variable handling with fallback values
- Use transform-based positioning for cleaner SVG structure

packages/dashboard/app/components/NodesView.tsx

@@ -4,6 +4,7 @@ import { useNodes } from "../hooks/useNodes";
 import { useProjects } from "../hooks/useProjects";
 import type { NodeInfo, NodeUpdateInput } from "../api";
 import { NodeCard } from "./NodeCard";
+import { MeshTopology } from "./MeshTopology";
 import { AddNodeModal, type AddNodeInput } from "./AddNodeModal";
 import { NodeDetailModal } from "./NodeDetailModal";
 import type { ToastType } from "../hooks/useToast";
@@ -115,6 +116,14 @@ export function NodesView({ addToast }: NodesViewProps) {
 
       {error && <div className="nodes-view-error">{error}</div>}
 
+      {/* Mesh Topology Visualization */}
+      {!loading && nodes.length > 0 && (
+        <section className="nodes-view-topology" aria-label="Mesh Topology">
+          <h3 className="nodes-view-section-title">Mesh Topology</h3>
+          <MeshTopology nodes={nodes} />
+        </section>
+      )}
+
       {loading ? (
         <div className="nodes-view-grid">
           {Array.from({ length: 4 }).map((_, index) => (