fix: network diagram editor UX — straight edges, snap-to-grid, ISP in Cloud, group resize

- Straight edges: replace SmoothStepEdge with BaseEdge + getStraightPath so
  connections draw direct diagonal lines instead of orthogonal bent paths
- Snap-to-grid: add snapToGrid/snapGrid=[20,20] to NetworkCanvas so nodes
  align consistently when dragged
- ISP in Cloud: remove standalone "Internet" sidebar section, inject ISP into
  the Cloud category loop with search support and correct item count
- Group node resize: add NodeResizer to GroupNode (subnet/VLAN/site/DMZ),
  handles visible when selected; dimensions saved/restored correctly on
  reload (also fixes group node load bug where type was always 'device')
- DiagramNode type: add nodeType and style optional fields

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/pages/NetworkDiagrams/DiagramEditor.tsx

@@ -115,16 +115,30 @@ function DiagramEditorInner() {
         setAssetName(diagram.asset_name)
         setDescription(diagram.description)
         setNodes(
-          diagram.nodes.map(n => ({
-            id: n.id,
-            type: 'device',
-            position: n.position,
-            data: {
-              label: n.label,
-              deviceType: n.type,
-              properties: n.properties,
-            } satisfies DeviceNodeData,
-          }))
+          diagram.nodes.map(n => {
+            if (n.nodeType === 'group') {
+              return {
+                id: n.id,
+                type: 'group',
+                position: n.position,
+                style: n.style || { width: 300, height: 200 },
+                data: {
+                  label: n.label,
+                  groupType: n.type,
+                },
+              }
+            }
+            return {
+              id: n.id,
+              type: 'device',
+              position: n.position,
+              data: {
+                label: n.label,
+                deviceType: n.type,
+                properties: n.properties,
+              } satisfies DeviceNodeData,
+            }
+          })
         )
         setEdges(
           diagram.edges.map(e => ({
@@ -155,6 +169,8 @@ function DiagramEditorInner() {
     return getNodes().map(n => {
       if (n.type === 'group') {
         const data = n.data as Record<string, unknown>
+        const width = typeof n.style?.width === 'number' ? n.style.width : (n.measured?.width ?? 300)
+        const height = typeof n.style?.height === 'number' ? n.style.height : (n.measured?.height ?? 200)
         return {
           id: n.id,
           type: (data.groupType as string) || 'subnet',
@@ -162,7 +178,7 @@ function DiagramEditorInner() {
           position: n.position,
           properties: {} as DeviceProperties,
           nodeType: 'group',
-          style: n.style || null,
+          style: { width, height },
         }
       }
       const data = n.data as unknown as DeviceNodeData