feat(rack-planner): implement port-to-port connections (patch cables) with dynamic SVG visualization layer

client/src/components/rack/RackPlanner.tsx

@@ -16,6 +16,7 @@ import { apiClient } from '../../api/client';
 import { RackToolbar } from './RackToolbar';
 import { RackColumn } from './RackColumn';
 import { DevicePalette } from './DevicePalette';
+import { ConnectionLayer } from './ConnectionLayer';
 import { AddModuleModal } from '../modals/AddModuleModal';
 import { RackSkeleton } from '../ui/Skeleton';
 import type { ModuleType } from '../../types';
@@ -237,7 +238,7 @@ export function RackPlanner() {
         <div className="flex flex-1 overflow-hidden">
           <DevicePalette />
 
-          <div className="flex-1 overflow-auto">
+          <div className="flex-1 overflow-auto relative rack-planner-canvas">
             {loading ? (
               <RackSkeleton />
             ) : racks.length === 0 ? (
@@ -270,6 +271,7 @@ export function RackPlanner() {
                       hoverSlot={hoverSlot}
                     />
                   ))}
+                  <ConnectionLayer />
                 </div>
               </SortableContext>
             )}