feat: drop node onto container node to nest it

Dropping a top-level node over any container_mode node (proxmox,
docker_host, ...) now pops a confirm modal that nests it as a child
(sets parentId), mirroring the existing drop-onto-group flow.

- store: addToContainer(containerId, childId)
- CanvasContainer: detect container_mode intersection on drag stop
  (group still wins if both intersect)
- generalize ConfirmAddToGroupModal with a container variant

ha-relevant: yes

frontend/src/stores/__tests__/canvasStore.test.ts

@@ -578,6 +578,79 @@ describe('canvasStore', () => {
     expect(useCanvasStore.getState().hasUnsavedChanges).toBe(true)
   })
 
+  // ── addToContainer ──────────────────────────────────────────────────────────
+
+  it('addToContainer nests a top-level node under a container_mode node', () => {
+    const container = { ...makeNode('px1', { type: 'proxmox', container_mode: true, label: 'PX' }), position: { x: 76, y: 52 }, width: 448, height: 252 }
+    const child = { ...makeNode('n1'), position: { x: 300, y: 200 } }
+    useCanvasStore.setState({ nodes: [container, child] })
+
+    useCanvasStore.getState().addToContainer('px1', 'n1')
+
+    const moved = useCanvasStore.getState().nodes.find((n) => n.id === 'n1')
+    expect(moved?.parentId).toBe('px1')
+    expect(moved?.extent).toBe('parent')
+    expect(moved?.data.parent_id).toBe('px1')
+    // 300-76=224, 200-52=148
+    expect(moved?.position).toEqual({ x: 224, y: 148 })
+  })
+
+  it('addToContainer works for any container_mode type (docker_host)', () => {
+    const host = { ...makeNode('dh1', { type: 'docker_host', container_mode: true }), position: { x: 0, y: 0 } }
+    const child = { ...makeNode('n1'), position: { x: 50, y: 50 } }
+    useCanvasStore.setState({ nodes: [host, child] })
+
+    useCanvasStore.getState().addToContainer('dh1', 'n1')
+
+    expect(useCanvasStore.getState().nodes.find((n) => n.id === 'n1')?.parentId).toBe('dh1')
+  })
+
+  it('addToContainer places the container before the child in the array', () => {
+    const child = { ...makeNode('n1'), position: { x: 300, y: 200 } }
+    const container = { ...makeNode('px1', { type: 'proxmox', container_mode: true }), position: { x: 0, y: 0 } }
+    useCanvasStore.setState({ nodes: [child, container] })
+
+    useCanvasStore.getState().addToContainer('px1', 'n1')
+
+    const { nodes } = useCanvasStore.getState()
+    expect(nodes.findIndex((n) => n.id === 'px1')).toBeLessThan(nodes.findIndex((n) => n.id === 'n1'))
+  })
+
+  it('addToContainer is a no-op when target is not in container_mode', () => {
+    const notContainer = { ...makeNode('px1', { type: 'proxmox', container_mode: false }), position: { x: 0, y: 0 } }
+    const child = { ...makeNode('n1'), position: { x: 50, y: 50 } }
+    useCanvasStore.setState({ nodes: [notContainer, child] })
+    useCanvasStore.getState().markSaved()
+
+    useCanvasStore.getState().addToContainer('px1', 'n1')
+
+    expect(useCanvasStore.getState().nodes.find((n) => n.id === 'n1')?.parentId).toBeUndefined()
+    expect(useCanvasStore.getState().hasUnsavedChanges).toBe(false)
+  })
+
+  it('addToContainer is a no-op when child already belongs to the container', () => {
+    const container = { ...makeNode('px1', { type: 'proxmox', container_mode: true }), position: { x: 0, y: 0 } }
+    const child = { ...makeNode('n1'), position: { x: 50, y: 50 }, parentId: 'px1', extent: 'parent' as const }
+    useCanvasStore.setState({ nodes: [container, child] })
+    useCanvasStore.getState().markSaved()
+
+    useCanvasStore.getState().addToContainer('px1', 'n1')
+
+    expect(useCanvasStore.getState().hasUnsavedChanges).toBe(false)
+  })
+
+  it('addToContainer snapshots history and marks unsaved', () => {
+    const container = { ...makeNode('px1', { type: 'proxmox', container_mode: true }), position: { x: 0, y: 0 } }
+    const child = { ...makeNode('n1'), position: { x: 50, y: 50 } }
+    useCanvasStore.setState({ nodes: [container, child] })
+    useCanvasStore.getState().markSaved()
+
+    useCanvasStore.getState().addToContainer('px1', 'n1')
+
+    expect(useCanvasStore.getState().past).toHaveLength(1)
+    expect(useCanvasStore.getState().hasUnsavedChanges).toBe(true)
+  })
+
   // ── removeFromGroup ─────────────────────────────────────────────────────────
 
   it('removeFromGroup releases the child to absolute coords and keeps the group', () => {

frontend/src/stores/canvasStore.ts

@@ -69,6 +69,7 @@ interface CanvasState {
   createGroup: (nodeIds: string[], name: string) => void
   ungroup: (groupId: string) => void
   addToGroup: (groupId: string, childId: string) => void
+  addToContainer: (containerId: string, childId: string) => void
   removeFromGroup: (groupId: string, childId: string) => void
   markSaved: () => void
   markUnsaved: () => void
@@ -627,6 +628,50 @@ export const useCanvasStore = create<CanvasState>((set) => ({
       }
     }),
 
+  // Nest an existing top-level node inside a container node (proxmox /
+  // docker_host / … in container_mode). Mirrors addToGroup but the target is
+  // any node with data.container_mode === true rather than a group.
+  addToContainer: (containerId, childId) =>
+    set((state) => {
+      const container = state.nodes.find((n) => n.id === containerId)
+      const child = state.nodes.find((n) => n.id === childId)
+      if (!container || !child || container.data.container_mode !== true) return state
+      if (child.id === containerId || child.parentId === containerId) return state
+
+      const updatedNodes = state.nodes.map((n) => {
+        if (n.id !== childId) return n
+        return {
+          ...n,
+          parentId: containerId,
+          extent: 'parent' as const,
+          // Absolute → container-relative. Clamp so the node stays inside.
+          position: {
+            x: Math.max(8, n.position.x - container.position.x),
+            y: Math.max(8, n.position.y - container.position.y),
+          },
+          selected: false,
+          data: { ...n.data, parent_id: containerId },
+        }
+      })
+
+      // React Flow requires the parent to precede its children in the array.
+      const others = updatedNodes.filter((n) => n.id !== childId)
+      const movedChild = updatedNodes.find((n) => n.id === childId)!
+      const containerIdx = others.findIndex((n) => n.id === containerId)
+      const nodes = [
+        ...others.slice(0, containerIdx + 1),
+        movedChild,
+        ...others.slice(containerIdx + 1),
+      ]
+
+      return {
+        nodes,
+        hasUnsavedChanges: true,
+        past: [...state.past.slice(-49), { nodes: state.nodes, edges: state.edges }],
+        future: [],
+      }
+    }),
+
   // Release a single child from a group back to the canvas. Group stays.
   removeFromGroup: (groupId, childId) =>
     set((state) => {