feat(calm-hub-ui): Add dynamic group resizing and floating hover panels

- Add dynamic group node resizing that recalculates bounds when children
  are dragged back inside (groups now shrink to fit)
- Make node hover expansion use absolute positioning so it floats over
  other elements without expanding the parent system box
- Keep base node at fixed 220px width for consistent ReactFlow layout

Signed-off-by: Paul Merrison <paul.merrison@gmail.com>

Author: pmerrison

calm-hub-ui/src/visualizer/components/reactflow/ArchitectureGraph.tsx

@@ -7,13 +7,15 @@ import ReactFlow, {
     MiniMap,
     useNodesState,
     useEdgesState,
+    NodeChange,
 } from 'reactflow';
 import 'reactflow/dist/style.css';
 import { FloatingEdge } from './FloatingEdge';
 import { CustomNode } from './CustomNode';
 import { SystemGroupNode } from './SystemGroupNode';
 import { THEME } from './theme';
 import { parseCALMData } from './utils/calmTransformer';
+import { GRAPH_LAYOUT } from './utils/constants';
 import {
     CalmArchitectureSchema,
     CalmNodeSchema,
@@ -26,8 +28,41 @@ interface ArchitectureGraphProps {
     onEdgeClick?: (edge: CalmRelationshipSchema) => void;
 }
 
+/**
+ * Calculate the minimum bounds for a group node based on its children
+ */
+function calculateGroupBounds(
+    groupId: string,
+    allNodes: Node[]
+): { width: number; height: number } | null {
+    const children = allNodes.filter((n) => n.parentId === groupId);
+    if (children.length === 0) {
+        return null;
+    }
+
+    const padding = GRAPH_LAYOUT.SYSTEM_NODE_PADDING;
+    const nodeWidth = GRAPH_LAYOUT.NODE_WIDTH;
+    const nodeHeight = GRAPH_LAYOUT.NODE_HEIGHT;
+
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+
+    children.forEach((child) => {
+        const childRight = child.position.x + nodeWidth;
+        const childBottom = child.position.y + nodeHeight;
+        maxX = Math.max(maxX, childRight);
+        maxY = Math.max(maxY, childBottom);
+    });
+
+    // Add padding on the right and bottom
+    return {
+        width: maxX + padding,
+        height: maxY + padding,
+    };
+}
+
 export const ArchitectureGraph = ({ jsonData, onNodeClick, onEdgeClick }: ArchitectureGraphProps) => {
-    const [nodes, setNodes, onNodesChange] = useNodesState([]);
+    const [nodes, setNodes, onNodesChangeBase] = useNodesState([]);
     const [edges, setEdges, onEdgesChange] = useEdgesState([]);
 
     const edgeTypes = useMemo(() => ({ custom: FloatingEdge }), []);
@@ -39,6 +74,55 @@ export const ArchitectureGraph = ({ jsonData, onNodeClick, onEdgeClick }: Archit
         setEdges(parsedEdges);
     }, [jsonData, setNodes, setEdges, onNodeClick]);
 
+    // Custom onNodesChange that recalculates group bounds after node movements
+    const onNodesChange = useCallback(
+        (changes: NodeChange[]) => {
+            // Apply the base changes first
+            onNodesChangeBase(changes);
+
+            // Check if any position changes occurred (from dragging)
+            const hasPositionChanges = changes.some(
+                (change) => change.type === 'position' && change.dragging === false
+            );
+
+            if (hasPositionChanges) {
+                // Recalculate group bounds after drag completes
+                setNodes((currentNodes) => {
+                    let updated = false;
+
+                    const newNodes = currentNodes.map((node) => {
+                        if (node.type !== 'group') return node;
+
+                        const bounds = calculateGroupBounds(node.id, currentNodes);
+                        if (!bounds) return node;
+
+                        const currentWidth = (node.style?.width as number) || node.width || 0;
+                        const currentHeight = (node.style?.height as number) || node.height || 0;
+
+                        // Only update if bounds have changed
+                        if (bounds.width !== currentWidth || bounds.height !== currentHeight) {
+                            updated = true;
+                            return {
+                                ...node,
+                                width: bounds.width,
+                                height: bounds.height,
+                                style: {
+                                    ...node.style,
+                                    width: bounds.width,
+                                    height: bounds.height,
+                                },
+                            };
+                        }
+                        return node;
+                    });
+
+                    return updated ? newNodes : currentNodes;
+                });
+            }
+        },
+        [onNodesChangeBase, setNodes]
+    );
+
     const handleNodeClick = useCallback(
         (_event: React.MouseEvent, node: Node) => {
             if (onNodeClick) {

calm-hub-ui/src/visualizer/components/reactflow/CustomNode.tsx

@@ -113,18 +113,26 @@ export const CustomNode = ({ data }: NodeProps) => {
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
       style={{
-        background: THEME.colors.card,
-        border: `2px solid ${borderColor}`,
-        borderRadius: '12px',
-        padding: '16px',
-        minWidth: isHovered ? '300px' : '220px',
-        color: THEME.colors.foreground,
-        fontSize: '14px',
-        fontWeight: 500,
-        boxShadow: isHovered ? THEME.shadows.lg : THEME.shadows.sm,
-        transition: 'all 0.3s ease-in-out',
+        // Fixed width so hover expansion doesn't affect ReactFlow layout/parent bounds
+        width: '220px',
+        position: 'relative',
       }}
     >
+      {/* Base node - always visible, fixed size */}
+      <div
+        style={{
+          background: THEME.colors.card,
+          border: `2px solid ${borderColor}`,
+          borderRadius: '12px',
+          padding: '16px',
+          width: '100%',
+          color: THEME.colors.foreground,
+          fontSize: '14px',
+          fontWeight: 500,
+          boxShadow: isHovered ? THEME.shadows.lg : THEME.shadows.sm,
+          transition: 'box-shadow 0.3s ease-in-out',
+        }}
+      >
       {/* Hidden handles to satisfy React Flow; floating edge computes actual attachment */}
       <Handle type="source" position={Position.Right} id="source" style={{ opacity: 0 }} />
       <Handle type="target" position={Position.Left} id="target" style={{ opacity: 0 }} />
@@ -198,9 +206,25 @@ export const CustomNode = ({ data }: NodeProps) => {
           </div>
         )}
       </div>
+      </div>
 
+      {/* Hover details panel - absolutely positioned to float over other elements */}
       {isHovered && (
-        <div style={{ marginTop: '8px' }}>
+        <div
+          style={{
+            position: 'absolute',
+            top: '100%',
+            left: 0,
+            marginTop: '4px',
+            minWidth: '300px',
+            background: THEME.colors.card,
+            border: `2px solid ${borderColor}`,
+            borderRadius: '12px',
+            padding: '16px',
+            boxShadow: THEME.shadows.lg,
+            zIndex: 1000,
+          }}
+        >
           <div style={{ borderTop: `1px solid ${THEME.colors.border}`, paddingTop: '8px' }}>
             <div style={{ fontSize: '12px', color: THEME.colors.muted, marginBottom: '4px' }}>Type:</div>
             <div style={{ fontSize: '12px', fontWeight: 500, color: THEME.colors.accent }}>{nodeType}</div>