chore(release): bump version to 2.2.0

Add laptop and mobile node types

.github/workflows/docker-publish.yml

@@ -16,14 +16,21 @@ jobs:
       matrix:
         include:
           - image: ghcr.io/pouzor/homelable-backend
+            context: .
             dockerfile: Dockerfile.backend
             build_args: ""
           - image: ghcr.io/pouzor/homelable-frontend
+            context: .
             dockerfile: Dockerfile.frontend
             build_args: ""
           - image: ghcr.io/pouzor/homelable-frontend-standalone
+            context: .
             dockerfile: Dockerfile.frontend
             build_args: "VITE_STANDALONE=true"
+          - image: ghcr.io/pouzor/homelable-mcp
+            context: ./mcp
+            dockerfile: Dockerfile.mcp
+            build_args: ""
 
     steps:
       - uses: actions/checkout@v4
@@ -55,8 +62,8 @@ jobs:
       - name: Build and push
         uses: docker/build-push-action@v6
         with:
-          context: .
-          file: ${{ matrix.dockerfile }}
+          context: ${{ matrix.context }}
+          file: ${{ matrix.context }}/${{ matrix.dockerfile }}
           platforms: linux/amd64,linux/arm64
           push: true
           tags: ${{ steps.meta.outputs.tags }}

README.md

@@ -223,6 +223,12 @@ docker compose up -d mcp
 # MCP server is now listening on http://<your-homelab-ip>:8001
 ```
 
+> **Proxmox LXC / bare-metal (no Docker):** create the LXC via
+> [community-scripts/ProxmoxVE](https://github.com/community-scripts/ProxmoxVE) (or any
+> Debian/Ubuntu LXC), then inside it run `sudo bash scripts/lxc-mcp-install.sh`.
+> Installs a `homelable-mcp` systemd service, prompts for `MCP_API_KEY` / `MCP_SERVICE_KEY`
+> (auto-generated if you press Enter), and skips prompts if `mcp/.env` already exists.
+
 **3. Configure your AI client:**
 
 **Claude Code** — run this command in your terminal:

VERSION

@@ -1 +1 @@
-2.0.3
+2.2.0

backend/app/api/routes/liveview.py

@@ -34,8 +34,10 @@ async def liveview_canvas(
     edges = (await db.execute(select(Edge))).scalars().all()
     state = await db.get(CanvasState, 1)
     viewport: dict[str, Any] = state.viewport if state else {"x": 0, "y": 0, "zoom": 1}
+    custom_style: dict[str, Any] | None = state.custom_style if state else None
     return CanvasStateResponse(
         nodes=[NodeResponse.model_validate(n) for n in nodes],
         edges=[EdgeResponse.model_validate(e) for e in edges],
         viewport=viewport,
+        custom_style=custom_style,
     )

backend/tests/test_liveview.py

@@ -112,6 +112,28 @@ async def test_liveview_returns_saved_canvas(client: AsyncClient, auth_headers):
     assert nodes[0]["label"] == "Live Node"
 
 
+# ── custom_style + theme propagation ─────────────────────────────────────────
+
+@pytest.mark.asyncio
+async def test_liveview_returns_custom_style_and_theme(client: AsyncClient, auth_headers):
+    """custom_style and viewport.theme_id from a saved canvas surface in liveview."""
+    settings.liveview_key = "test-key"
+    headers = await auth_headers()
+    payload = {
+        "nodes": [],
+        "edges": [],
+        "viewport": {"x": 0, "y": 0, "zoom": 1, "theme_id": "matrix"},
+        "custom_style": {"fontFamily": "Inter", "nodeRadius": 12},
+    }
+    await client.post("/api/v1/canvas/save", json=payload, headers=headers)
+
+    res = await client.get("/api/v1/liveview?key=test-key")
+    assert res.status_code == 200
+    body = res.json()
+    assert body["viewport"].get("theme_id") == "matrix"
+    assert body["custom_style"] == {"fontFamily": "Inter", "nodeRadius": 12}
+
+
 # ── Re-disable after enabling ─────────────────────────────────────────────────
 
 @pytest.mark.asyncio

docker-compose.prebuilt.yml

@@ -24,6 +24,20 @@ services:
     networks:
       - homelable
 
+  mcp:
+    image: ghcr.io/pouzor/homelable-mcp:latest
+    restart: unless-stopped
+    ports:
+      - "8001:8001"
+    env_file:
+      - .env
+    environment:
+      BACKEND_URL: "http://backend:8000"
+    depends_on:
+      - backend
+    networks:
+      - homelable
+
 volumes:
   backend_data:
 

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "frontend",
-  "version": "2.0.3",
+  "version": "2.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "frontend",
-      "version": "2.0.3",
+      "version": "2.2.0",
       "dependencies": {
         "@base-ui/react": "^1.2.0",
         "@dagrejs/dagre": "^2.0.4",
@@ -2520,6 +2520,9 @@
         "arm"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2534,6 +2537,9 @@
         "arm"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2548,6 +2554,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2562,6 +2571,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2576,6 +2588,9 @@
         "loong64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2590,6 +2605,9 @@
         "loong64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2604,6 +2622,9 @@
         "ppc64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2618,6 +2639,9 @@
         "ppc64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2632,6 +2656,9 @@
         "riscv64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2646,6 +2673,9 @@
         "riscv64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2660,6 +2690,9 @@
         "s390x"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2674,6 +2707,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2688,6 +2724,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2936,6 +2975,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2953,6 +2995,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2970,6 +3015,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2987,6 +3035,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -6884,6 +6935,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -6905,6 +6959,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -6926,6 +6983,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -6947,6 +7007,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "frontend",
   "private": true,
-  "version": "2.0.3",
+  "version": "2.2.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/App.tsx

@@ -4,6 +4,7 @@ import { type Node } from '@xyflow/react'
 import { applyDagreLayout } from '@/utils/layout'
 import { serializeNode, serializeEdge, deserializeApiNode, deserializeApiEdge, type ApiNode, type ApiEdge } from '@/utils/canvasSerializer'
 import { generateUUID } from '@/utils/uuid'
+import { resolveVirtualEdgeParent } from '@/utils/virtualEdgeParent'
 import { generateMarkdownTable } from '@/utils/exportMarkdown'
 import { ExportModal } from '@/components/modals/ExportModal'
 import { exportCanvasToYaml, downloadYaml } from '@/utils/exportYaml'
@@ -37,7 +38,6 @@ import type { ZigbeeNode, ZigbeeEdge } from '@/components/zigbee/types'
 
 const STANDALONE = import.meta.env.VITE_STANDALONE === 'true'
 const STANDALONE_STORAGE_KEY = 'homelable_canvas'
-const CONTAINER_MODE_TYPES = new Set<NodeData['type']>(['proxmox', 'vm', 'lxc', 'docker_host'])
 
 export default function App() {
   const { loadCanvas, markSaved, markUnsaved, selectedNodeId, selectedNodeIds, addNode, updateNode, deleteNode, onConnect, updateEdge, deleteEdge, setProxmoxContainerMode, setNodeZIndex, editingGroupRectId, setEditingGroupRectId, editingTextId, setEditingTextId, nodes, edges, snapshotHistory, undo, redo, copySelectedNodes, pasteNodes } = useCanvasStore()
@@ -450,16 +450,14 @@ export default function App() {
     if (edgeData.type === 'virtual') {
       const src = nodes.find((n) => n.id === pendingConnection.source)
       const tgt = nodes.find((n) => n.id === pendingConnection.target)
-      const srcType = src?.data.type as NodeData['type']
-      const tgtType = tgt?.data.type as NodeData['type']
-      if ((srcType === 'lxc' || srcType === 'vm') && CONTAINER_MODE_TYPES.has(tgtType)) {
-        updateNode(pendingConnection.source, { parent_id: pendingConnection.target })
-      } else if (CONTAINER_MODE_TYPES.has(srcType) && (tgtType === 'lxc' || tgtType === 'vm')) {
-        updateNode(pendingConnection.target, { parent_id: pendingConnection.source })
-      } else if (srcType === 'docker_container' && tgtType === 'docker_host') {
-        updateNode(pendingConnection.source, { parent_id: pendingConnection.target })
-      } else if (tgtType === 'docker_container' && srcType === 'docker_host') {
-        updateNode(pendingConnection.target, { parent_id: pendingConnection.source })
+      if (src && tgt) {
+        const assignment = resolveVirtualEdgeParent(
+          { id: src.id, type: src.data.type as NodeData['type'] },
+          { id: tgt.id, type: tgt.data.type as NodeData['type'] },
+        )
+        if (assignment) {
+          updateNode(assignment.childId, { parent_id: assignment.parentId })
+        }
       }
     }
     setPendingConnection(null)
@@ -552,6 +550,7 @@ export default function App() {
           onClose={() => setAddNodeOpen(false)}
           onSubmit={handleAddNode}
           title="Add Node"
+          parentCandidates={nodes.map((n) => ({ id: n.id, label: n.data.label ?? n.id, type: n.data.type }))}
         />
 
         {/* key forces re-mount when editing a different node, resetting form state */}
@@ -562,6 +561,25 @@ export default function App() {
           onSubmit={handleUpdateNode}
           initial={editNode?.data}
           title="Edit Node"
+          parentCandidates={(() => {
+            const descendants = new Set<string>()
+            if (editNodeId) {
+              const queue = [editNodeId]
+              while (queue.length) {
+                const id = queue.shift()!
+                for (const n of nodes) {
+                  if (n.data.parent_id === id && !descendants.has(n.id)) {
+                    descendants.add(n.id)
+                    queue.push(n.id)
+                  }
+                }
+              }
+            }
+            return nodes
+              .filter((n) => !descendants.has(n.id))
+              .map((n) => ({ id: n.id, label: n.data.label ?? n.id, type: n.data.type }))
+          })()}
+          currentNodeId={editNodeId ?? undefined}
         />
 
         <EdgeModal

frontend/src/components/LiveView.tsx

@@ -10,7 +10,7 @@
  * Clicking a node with an IP opens http://<ip> in a new tab.
  */
 
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import {
   ReactFlowProvider,
   ReactFlow,
@@ -28,8 +28,9 @@ import { THEMES } from '@/utils/themes'
 import { nodeTypes } from '@/components/canvas/nodes/nodeTypes'
 import { edgeTypes } from '@/components/canvas/edges/edgeTypes'
 import { deserializeApiNode, deserializeApiEdge, type ApiNode, type ApiEdge } from '@/utils/canvasSerializer'
+import { computeCollapseInfo, rewireEdgesForCollapse } from '@/utils/collapseFilter'
 import { liveviewApi } from '@/api/client'
-import type { NodeData } from '@/types'
+import type { NodeData, CustomStyleDef } from '@/types'
 
 const STANDALONE = import.meta.env.VITE_STANDALONE === 'true'
 const STORAGE_KEY = 'homelable_canvas'
@@ -40,6 +41,8 @@ function LiveViewCanvas() {
   const { nodes, edges, loadCanvas, fitViewPending, clearFitViewPending } = useCanvasStore()
   const { fitView } = useReactFlow()
   const activeTheme = useThemeStore((s) => s.activeTheme)
+  const setTheme = useThemeStore((s) => s.setTheme)
+  const setCustomStyle = useThemeStore((s) => s.setCustomStyle)
   const theme = THEMES[activeTheme]
   // Derive initial view state synchronously (avoids calling setState inside an effect):
   // - standalone → always ready (localStorage, no key required)
@@ -73,9 +76,12 @@ function LiveViewCanvas() {
         const { nodes: apiNodes, edges: apiEdges } = res.data
         const proxmoxMap = new Map<string, boolean>(
           (apiNodes as ApiNode[])
-            .filter((n: ApiNode) => n.type === 'proxmox' || n.type === 'group')
-            .map((n: ApiNode) => [n.id, n.type === 'group' ? true : n.container_mode !== false])
+            .filter((n: ApiNode) => n.type === 'group' || n.container_mode === true)
+            .map((n: ApiNode) => [n.id, true])
         )
+        const savedTheme = res.data.viewport?.theme_id
+        if (savedTheme) setTheme(savedTheme)
+        if (res.data.custom_style) setCustomStyle(res.data.custom_style as CustomStyleDef)
         loadCanvas(
           (apiNodes as ApiNode[]).map((n) => deserializeApiNode(n, proxmoxMap)),
           (apiEdges as ApiEdge[]).map(deserializeApiEdge),
@@ -87,7 +93,7 @@ function LiveViewCanvas() {
         const detail: string = err.response.data?.detail ?? ''
         setViewState(detail === 'Live view is disabled' ? 'disabled' : 'invalid-key')
       })
-  }, [loadCanvas])
+  }, [loadCanvas, setTheme, setCustomStyle])
 
   useEffect(() => {
     if (!fitViewPending || nodes.length === 0) return
@@ -103,6 +109,18 @@ function LiveViewCanvas() {
     if (ip) window.open(`http://${ip}`, '_blank', 'noopener,noreferrer')
   }, [])
 
+  // Apply collapse-state filtering — same pipeline the editor canvas uses,
+  // so a collapsed group/zone hides its contents in live view too.
+  const collapseInfo = useMemo(() => computeCollapseInfo(nodes), [nodes])
+  const visibleNodes = useMemo(
+    () => nodes.filter((n) => collapseInfo.visibleIds.has(n.id)),
+    [nodes, collapseInfo],
+  )
+  const visibleEdges = useMemo(
+    () => rewireEdgesForCollapse(edges, nodes, collapseInfo.visibleIds, collapseInfo.hiddenBy),
+    [edges, nodes, collapseInfo],
+  )
+
   if (viewState === 'loading') {
     return (
       <div className="flex h-screen w-screen items-center justify-center bg-[#0d1117] text-[#8b949e]">
@@ -131,8 +149,8 @@ function LiveViewCanvas() {
   return (
     <div className="w-full h-screen" style={{ background: theme.colors.canvasBackground }}>
       <ReactFlow
-        nodes={nodes}
-        edges={edges}
+        nodes={visibleNodes}
+        edges={visibleEdges}
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
         nodesDraggable={false}

frontend/src/components/__tests__/LiveView.collapse.test.tsx

@@ -0,0 +1,104 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, waitFor } from '@testing-library/react'
+import type { Node, Edge } from '@xyflow/react'
+import type { NodeData, EdgeData } from '@/types'
+
+// ── Capture the props ReactFlow is rendered with ──────────────────────────
+const rfPropsSpy = vi.fn()
+vi.mock('@xyflow/react', () => ({
+  ReactFlowProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  ReactFlow: (props: unknown) => {
+    rfPropsSpy(props)
+    return <div data-testid="react-flow" />
+  },
+  Background: () => null,
+  Controls: () => null,
+  BackgroundVariant: { Dots: 'dots' },
+  ConnectionMode: { Loose: 'loose' },
+  Position: { Top: 'top', Right: 'right', Bottom: 'bottom', Left: 'left' },
+  useReactFlow: () => ({ fitView: vi.fn() }),
+}))
+vi.mock('@xyflow/react/dist/style.css', () => ({}))
+vi.mock('@/api/client', () => ({ liveviewApi: { load: vi.fn() } }))
+
+import { liveviewApi } from '@/api/client'
+import LiveView from '../LiveView'
+
+function setSearch(params: string) {
+  Object.defineProperty(window, 'location', {
+    writable: true,
+    value: { ...window.location, search: params, pathname: '/view' },
+  })
+}
+
+/** Build a /liveview API response with the given nodes/edges. */
+const apiResponse = (nodes: unknown[], edges: unknown[] = []) => ({
+  data: { nodes, edges, viewport: { x: 0, y: 0, zoom: 1 } },
+})
+
+const apiNode = (
+  id: string,
+  parent_id?: string,
+  collapsed?: boolean,
+  type = 'server',
+) => ({
+  id,
+  type,
+  label: id,
+  status: 'online',
+  services: [],
+  pos_x: 0,
+  pos_y: 0,
+  parent_id: parent_id ?? null,
+  container_mode: type === 'group',
+  custom_colors: collapsed !== undefined ? { collapsed } : null,
+  created_at: '2024-01-01T00:00:00Z',
+  updated_at: '2024-01-01T00:00:00Z',
+})
+
+describe('LiveView — applies collapse filter to the rendered canvas', () => {
+  beforeEach(() => {
+    rfPropsSpy.mockClear()
+    setSearch('?key=valid')
+    vi.mocked(liveviewApi.load).mockReset()
+  })
+
+  it('hides children of a collapsed group container in view-only mode', async () => {
+    vi.mocked(liveviewApi.load).mockResolvedValue(
+      apiResponse([apiNode('g1', undefined, true, 'group'), apiNode('c1', 'g1')]),
+    )
+    render(<LiveView />)
+    await waitFor(() => {
+      const last = rfPropsSpy.mock.calls[rfPropsSpy.mock.calls.length - 1]?.[0] as
+        | { nodes: Node<NodeData>[] }
+        | undefined
+      expect(last?.nodes.length).toBeGreaterThan(0)
+    })
+    const last = rfPropsSpy.mock.calls[rfPropsSpy.mock.calls.length - 1][0] as {
+      nodes: Node<NodeData>[]
+      edges: Edge<EdgeData>[]
+    }
+    const ids = last.nodes.map((n) => n.id)
+    expect(ids).toContain('g1')
+    expect(ids).not.toContain('c1')
+  })
+
+  it('shows children when the group is expanded', async () => {
+    vi.mocked(liveviewApi.load).mockResolvedValue(
+      apiResponse([apiNode('g1', undefined, false, 'group'), apiNode('c1', 'g1')]),
+    )
+    render(<LiveView />)
+    await waitFor(() => {
+      const last = rfPropsSpy.mock.calls[rfPropsSpy.mock.calls.length - 1]?.[0] as
+        | { nodes: Node<NodeData>[] }
+        | undefined
+      expect(last?.nodes.length).toBeGreaterThan(1)
+    })
+    const last = rfPropsSpy.mock.calls[rfPropsSpy.mock.calls.length - 1][0] as {
+      nodes: Node<NodeData>[]
+    }
+    const ids = last.nodes.map((n) => n.id)
+    expect(ids).toContain('g1')
+    expect(ids).toContain('c1')
+  })
+})

frontend/src/components/__tests__/LiveView.test.tsx

@@ -1,6 +1,7 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { render, screen, waitFor } from '@testing-library/react'
 import { useCanvasStore } from '@/stores/canvasStore'
+import { useThemeStore } from '@/stores/themeStore'
 
 // ── Mock heavy dependencies ────────────────────────────────────────────────
 
@@ -124,6 +125,55 @@ describe('LiveView (non-standalone)', () => {
     expect(nodes.find((n) => n.id === 'n1')).toBeDefined()
   })
 
+  // ── Nested children (docker_container inside docker_host) ────────────────
+
+  it('nests docker_container under docker_host parent (container_mode=true)', async () => {
+    setSearch('?key=valid')
+    const nestedPayload = {
+      data: {
+        nodes: [
+          {
+            id: 'host', type: 'docker', label: 'Docker Host', status: 'online',
+            services: [], pos_x: 0, pos_y: 0, container_mode: true,
+            created_at: '2024-01-01T00:00:00Z', updated_at: '2024-01-01T00:00:00Z',
+          },
+          {
+            id: 'ctr', type: 'docker_container', label: 'nginx', status: 'online',
+            services: [], pos_x: 20, pos_y: 30, parent_id: 'host',
+            created_at: '2024-01-01T00:00:00Z', updated_at: '2024-01-01T00:00:00Z',
+          },
+        ],
+        edges: [],
+        viewport: { x: 0, y: 0, zoom: 1 },
+      },
+    }
+    vi.mocked(liveviewApi.load).mockResolvedValue(nestedPayload as never)
+    render(<LiveView />)
+    await waitFor(() => expect(screen.getByTestId('react-flow')).toBeDefined())
+    const ctr = useCanvasStore.getState().nodes.find((n) => n.id === 'ctr')
+    expect(ctr?.parentId).toBe('host')
+    expect(ctr?.extent).toBe('parent')
+  })
+
+  // ── Theme + custom_style applied from payload ────────────────────────────
+
+  it('applies viewport.theme_id and custom_style from the payload', async () => {
+    setSearch('?key=valid')
+    const styledPayload = {
+      data: {
+        nodes: [],
+        edges: [],
+        viewport: { x: 0, y: 0, zoom: 1, theme_id: 'matrix' },
+        custom_style: { fontFamily: 'Inter', nodeRadius: 12 },
+      },
+    }
+    vi.mocked(liveviewApi.load).mockResolvedValue(styledPayload as never)
+    render(<LiveView />)
+    await waitFor(() => expect(screen.getByTestId('react-flow')).toBeDefined())
+    expect(useThemeStore.getState().activeTheme).toBe('matrix')
+    expect(useThemeStore.getState().customStyle).toEqual({ fontFamily: 'Inter', nodeRadius: 12 })
+  })
+
   // ── No editing props passed ───────────────────────────────────────────────
 
   it('does not show any Access Denied when key is valid', async () => {

frontend/src/components/canvas/CanvasContainer.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import {
   ReactFlow,
   Background,
@@ -17,6 +17,7 @@ import '@xyflow/react/dist/style.css'
 import { useCanvasStore } from '@/stores/canvasStore'
 import { useThemeStore } from '@/stores/themeStore'
 import { THEMES } from '@/utils/themes'
+import { computeCollapseInfo, rewireEdgesForCollapse } from '@/utils/collapseFilter'
 import { nodeTypes } from './nodes/nodeTypes'
 import { edgeTypes } from './edges/edgeTypes'
 import { SearchBar } from './SearchBar'
@@ -55,6 +56,17 @@ export function CanvasContainer({ onConnect: onConnectProp, onEdgeDoubleClick, o
   const activeTheme = useThemeStore((s) => s.activeTheme)
   const theme = THEMES[activeTheme]
 
+  // Filter nodes and edges based on collapsed state (memoized — O(n)).
+  const collapseInfo = useMemo(() => computeCollapseInfo(nodes), [nodes])
+  const visibleNodes = useMemo(
+    () => nodes.filter((n) => collapseInfo.visibleIds.has(n.id)),
+    [nodes, collapseInfo],
+  )
+  const visibleEdges = useMemo(
+    () => rewireEdgesForCollapse(edges, nodes, collapseInfo.visibleIds, collapseInfo.hiddenBy),
+    [edges, nodes, collapseInfo],
+  )
+
   const onNodeClick = useCallback((e: React.MouseEvent, node: Node<NodeData>) => {
     if (e.ctrlKey || e.metaKey) {
       setSelectedNode(null)
@@ -90,8 +102,8 @@ export function CanvasContainer({ onConnect: onConnectProp, onEdgeDoubleClick, o
   return (
     <div className="w-full h-full" style={{ background: theme.colors.canvasBackground }}>
       <ReactFlow
-        nodes={nodes}
-        edges={edges}
+        nodes={visibleNodes}
+        edges={visibleEdges}
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onConnect={onConnectProp}

frontend/src/components/canvas/__tests__/GroupNode.test.tsx

@@ -11,6 +11,8 @@ vi.mock('@xyflow/react', () => ({
   NodeResizer: ({ isVisible }: { isVisible: boolean }) => (
     <div data-testid="node-resizer" data-visible={isVisible} />
   ),
+  Handle: () => null,
+  Position: { Top: 'top', Right: 'right', Bottom: 'bottom', Left: 'left' },
   useReactFlow: () => ({}),
 }))
 
@@ -40,6 +42,7 @@ function renderGroupNode(props: Partial<Parameters<typeof GroupNode>[0]> = {}, s
     nodes: storeNodes,
     updateNode: vi.fn(),
     snapshotHistory: vi.fn(),
+    toggleNodeCollapsed: vi.fn(),
   } as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
 
   return render(
@@ -132,4 +135,51 @@ describe('GroupNode', () => {
     renderGroupNode()
     expect(screen.queryByText(/●/)).toBeNull()
   })
+
+  it('renders a collapse toggle when the group has parentId children', () => {
+    const storeNodes = [
+      { id: 'c1', parentId: 'g1', data: { status: 'online' } },
+      { id: 'c2', parentId: 'g1', data: { status: 'online' } },
+    ]
+    renderGroupNode({}, storeNodes)
+    expect(screen.getByTitle('Hide 2 items')).toBeDefined()
+  })
+
+  it('flips the toggle title when collapsed', () => {
+    const storeNodes = [
+      { id: 'c1', parentId: 'g1', data: { status: 'online' } },
+    ]
+    renderGroupNode({ data: makeGroupNode({ collapsed: true }).data }, storeNodes)
+    expect(screen.getByTitle('Show 1 hidden items')).toBeDefined()
+  })
+
+  it('calls toggleNodeCollapsed when the toggle is clicked', () => {
+    const toggleNodeCollapsed = vi.fn()
+    const storeNodes = [{ id: 'c1', parentId: 'g1', data: { status: 'online' } }]
+    vi.mocked(canvasStore.useCanvasStore).mockReturnValue({
+      nodes: storeNodes,
+      updateNode: vi.fn(),
+      snapshotHistory: vi.fn(),
+      toggleNodeCollapsed,
+    } as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
+    render(
+      <GroupNode
+        id="g1"
+        data={makeGroupNode().data}
+        selected={false}
+        dragging={false}
+        zIndex={1}
+        isConnectable={true}
+        positionAbsoluteX={0}
+        positionAbsoluteY={0}
+      />,
+    )
+    fireEvent.click(screen.getByTitle('Hide 1 items'))
+    expect(toggleNodeCollapsed).toHaveBeenCalledWith('g1')
+  })
+
+  it('does not render the toggle when the group has no children', () => {
+    renderGroupNode()
+    expect(screen.queryByTitle(/Hide.*items|Show.*hidden/)).toBeNull()
+  })
 })

frontend/src/components/canvas/edges/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { useCallback, useState } from 'react'
 import {
   BaseEdge,
   EdgeLabelRenderer,
@@ -179,9 +179,113 @@ function segmentMidpoints(
   })
 }
 
+// ── Endpoint dot (interactive reconnection handle pinned to handle) ──────────
+
+interface EndpointDotProps {
+  edgeId: string
+  role: 'source' | 'target'
+  x: number
+  y: number
+  position?: string
+  color: string
+  source: string
+  target: string
+  sourceHandle: string | null | undefined
+  targetHandle: string | null | undefined
+  onDrag: (pos: { x: number; y: number } | null) => void
+}
+
+/**
+ * Interactive endpoint marker rendered above the node layer (via
+ * EdgeLabelRenderer). On pointerup it inspects the element under the cursor
+ * for a React Flow handle (`[data-handleid]`) and calls `reconnectEdge` with
+ * the new endpoint. Drop on empty space leaves the edge unchanged.
+ *
+ * Handles are nudged 3px inward (toward the node) because React Flow's edge
+ * endpoint coords sit at the outer edge of the handle box, not its center.
+ */
+function EndpointDot({ edgeId, role, x, y, position, color, source, target, sourceHandle, targetHandle, onDrag }: EndpointDotProps) {
+  const reconnectEdge = useCanvasStore((s) => s.reconnectEdge)
+  const { screenToFlowPosition } = useReactFlow()
+
+  const offset = 3
+  let dx = 0, dy = 0
+  if (position === 'bottom') dy = -offset
+  else if (position === 'top') dy = offset
+  else if (position === 'left') dx = offset
+  else if (position === 'right') dx = -offset
+
+  const onPointerDown = useCallback((e: React.PointerEvent) => {
+    e.stopPropagation()
+    e.currentTarget.setPointerCapture(e.pointerId)
+  }, [])
+
+  const onPointerMove = useCallback((e: React.PointerEvent) => {
+    if (e.buttons !== 1) return
+    onDrag(screenToFlowPosition({ x: e.clientX, y: e.clientY }))
+  }, [onDrag, screenToFlowPosition])
+
+  const onPointerUp = useCallback((e: React.PointerEvent) => {
+    e.currentTarget.releasePointerCapture(e.pointerId)
+    // Find the topmost handle under cursor, skipping the dragged dot itself.
+    const stack = document.elementsFromPoint(e.clientX, e.clientY)
+    let handleEl: HTMLElement | null = null
+    for (const node of stack) {
+      const h = (node as HTMLElement).closest?.('[data-handleid]') as HTMLElement | null
+      if (h) { handleEl = h; break }
+    }
+    onDrag(null)
+    if (!handleEl) return  // dropped on empty space → keep edge unchanged
+    const newHandleId = handleEl.getAttribute('data-handleid')
+    const newNodeId = handleEl.getAttribute('data-nodeid')
+    if (!newHandleId || !newNodeId) return
+    if (role === 'source') {
+      reconnectEdge(edgeId, { source: newNodeId, target, sourceHandle: newHandleId, targetHandle: targetHandle ?? null })
+    } else {
+      reconnectEdge(edgeId, { source, target: newNodeId, sourceHandle: sourceHandle ?? null, targetHandle: newHandleId })
+    }
+  }, [edgeId, role, source, target, sourceHandle, targetHandle, reconnectEdge, onDrag])
+
+  return (
+    <div
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
+      style={{
+        position: 'absolute',
+        transform: `translate(-50%, -50%) translate(${x + dx}px, ${y + dy}px)`,
+        width: 15,
+        height: 15,
+        borderRadius: '50%',
+        background: color,
+        border: '2px solid #0d1117',
+        cursor: 'grab',
+        pointerEvents: 'all',
+        zIndex: 1000,
+        touchAction: 'none',
+      }}
+      title="Drag to reconnect"
+    />
+  )
+}
+
 // ── Main edge component ──────────────────────────────────────────────────────
 
-export function HomelableEdge({ id, source, target, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, selected }: EdgeProps<Edge<EdgeData>>) {
+export function HomelableEdge({ id, source, target, sourceHandleId, targetHandleId, sourceX: rawSourceX, sourceY: rawSourceY, targetX: rawTargetX, targetY: rawTargetY, sourcePosition, targetPosition, data, selected }: EdgeProps<Edge<EdgeData>>) {
+  const [drag, setDrag] = useState<{ role: 'source' | 'target'; x: number; y: number } | null>(null)
+
+  const sourceX = drag?.role === 'source' ? drag.x : rawSourceX
+  const sourceY = drag?.role === 'source' ? drag.y : rawSourceY
+  const targetX = drag?.role === 'target' ? drag.x : rawTargetX
+  const targetY = drag?.role === 'target' ? drag.y : rawTargetY
+
+  const onSourceDrag = useCallback((pos: { x: number; y: number } | null) => {
+    setDrag(pos ? { role: 'source', x: pos.x, y: pos.y } : null)
+  }, [])
+  const onTargetDrag = useCallback((pos: { x: number; y: number } | null) => {
+    setDrag(pos ? { role: 'target', x: pos.x, y: pos.y } : null)
+  }, [])
+
   const activeTheme = useThemeStore((s) => s.activeTheme)
   const theme = THEMES[activeTheme]
   const sourceType = useStore((s) => s.nodeLookup.get(source)?.type)
@@ -311,6 +415,38 @@ export function HomelableEdge({ id, source, target, sourceX, sourceY, targetX, t
           </div>
         )}
 
+        {/* Endpoint dots — visual indicators for reconnection targets */}
+        {selected && (
+          <>
+            <EndpointDot
+              edgeId={id}
+              role="source"
+              x={sourceX}
+              y={sourceY}
+              position={sourcePosition}
+              color={strokeColor}
+              source={source}
+              target={target}
+              sourceHandle={sourceHandleId}
+              targetHandle={targetHandleId}
+              onDrag={onSourceDrag}
+            />
+            <EndpointDot
+              edgeId={id}
+              role="target"
+              x={targetX}
+              y={targetY}
+              position={targetPosition}
+              color={strokeColor}
+              source={source}
+              target={target}
+              sourceHandle={sourceHandleId}
+              targetHandle={targetHandleId}
+              onDrag={onTargetDrag}
+            />
+          </>
+        )}
+
         {/* Existing waypoint drag handles */}
         {selected && waypoints.map((wp, idx) => {
           const prevPoint = idx === 0 ? { x: sourceX, y: sourceY } : waypoints[idx - 1]

frontend/src/components/canvas/nodes/GroupNode.tsx

@@ -1,11 +1,16 @@
 import { useState } from 'react'
-import { type NodeProps, type Node, NodeResizer } from '@xyflow/react'
-import { Layers, Pencil, Check, X } from 'lucide-react'
+import { type NodeProps, type Node, NodeResizer, Handle, Position } from '@xyflow/react'
+import { Layers, Pencil, Check, X, ChevronDown } from 'lucide-react'
 import { useCanvasStore } from '@/stores/canvasStore'
+import { useThemeStore } from '@/stores/themeStore'
+import { THEMES } from '@/utils/themes'
 import { STATUS_COLORS, type NodeData } from '@/types'
 
 export function GroupNode({ id, data, selected }: NodeProps<Node<NodeData>>) {
-  const { nodes, updateNode, snapshotHistory } = useCanvasStore()
+  const { nodes, updateNode, snapshotHistory, toggleNodeCollapsed } = useCanvasStore()
+  const isCollapsed = data.collapsed ?? false
+  const activeTheme = useThemeStore((s) => s.activeTheme)
+  const theme = THEMES[activeTheme]
   const showBorder = data.custom_colors?.show_border !== false
   const isVisible = showBorder || selected
 
@@ -49,6 +54,29 @@ export function GroupNode({ id, data, selected }: NodeProps<Node<NodeData>>) {
         handleStyle={{ fill: '#00d4ff', stroke: '#0d1117', width: 8, height: 8, borderRadius: 2 }}
       />
 
+      {/* 4 snap-point handles — one per side. Source + invisible target overlay for each. */}
+      {([
+        ['group-top', Position.Top],
+        ['group-right', Position.Right],
+        ['group-bottom', Position.Bottom],
+        ['group-left', Position.Left],
+      ] as const).map(([hid, pos]) => (
+        <span key={hid}>
+          <Handle
+            type="source"
+            position={pos}
+            id={hid}
+            style={{ background: theme.colors.handleBackground, borderColor: theme.colors.handleBorder }}
+          />
+          <Handle
+            type="target"
+            position={pos}
+            id={`${hid}-t`}
+            style={{ opacity: 0, width: 12, height: 12 }}
+          />
+        </span>
+      ))}
+
       {/* Header */}
       {isVisible && (
         <div
@@ -111,6 +139,28 @@ export function GroupNode({ id, data, selected }: NodeProps<Node<NodeData>>) {
             </button>
           )}
 
+          {/* Collapse / expand toggle */}
+          {children.length > 0 && (
+            <button
+              className="nodrag"
+              onClick={(e) => { e.stopPropagation(); toggleNodeCollapsed(id) }}
+              title={isCollapsed ? `Show ${children.length} hidden items` : `Hide ${children.length} items`}
+              style={{
+                color: '#00d4ff',
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                padding: 1,
+                display: 'flex',
+                alignItems: 'center',
+                transition: 'transform 0.2s ease-out',
+                transform: isCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)',
+              }}
+            >
+              <ChevronDown size={11} />
+            </button>
+          )}
+
           {/* Status summary */}
           {children.length > 0 && (
             <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 10, flexShrink: 0, marginLeft: 4 }}>

frontend/src/components/canvas/nodes/GroupRectNode.tsx

@@ -1,6 +1,8 @@
 import { useState } from 'react'
 import { Handle, Position, NodeResizer, type NodeProps, type Node } from '@xyflow/react'
+import { ChevronDown } from 'lucide-react'
 import { useCanvasStore } from '@/stores/canvasStore'
+import { getZoneSpatialChildren } from '@/utils/collapseFilter'
 import type { NodeData, TextPosition } from '@/types'
 
 const FONT_FAMILIES: Record<string, string> = {
@@ -36,9 +38,12 @@ const HANDLE_SIDES = [
 
 export function GroupRectNode({ id, data, selected }: NodeProps<Node<NodeData>>) {
   const setEditingGroupRectId = useCanvasStore((s) => s.setEditingGroupRectId)
+  const toggleNodeCollapsed = useCanvasStore((s) => s.toggleNodeCollapsed)
+  const nodes = useCanvasStore((s) => s.nodes)
   const [hovered, setHovered] = useState(false)
 
   const rc = data.custom_colors ?? {}
+  const isCollapsed = data.collapsed ?? false
   const borderColor = rc.border ?? '#00d4ff'
   const borderStyle = rc.border_style ?? 'solid'
   const borderWidth = rc.border_width ?? 2
@@ -50,6 +55,13 @@ export function GroupRectNode({ id, data, selected }: NodeProps<Node<NodeData>>)
   const textPos = (rc.text_position ?? 'top-left') as TextPosition
   const posStyle = POSITION_STYLES[textPos]
 
+  // Count children for collapse badge — groupRect zones don't parent their
+  // contents via React Flow parentId, so we hit-test by spatial containment.
+  const selfNode = (nodes ?? []).find((n) => n.id === id)
+  const childrenCount = selfNode
+    ? getZoneSpatialChildren(selfNode, nodes ?? []).length
+    : 0
+
   const outsideJustify = textPos.includes('right') ? 'flex-end'
     : (textPos.includes('center') || textPos === 'center') ? 'center'
     : 'flex-start'
@@ -118,6 +130,8 @@ export function GroupRectNode({ id, data, selected }: NodeProps<Node<NodeData>>)
           borderRadius: 10,
           boxSizing: 'border-box',
           cursor: 'default',
+          transition: 'opacity 0.2s ease-out, filter 0.2s ease-out',
+          opacity: isCollapsed ? 0.6 : 1,
         }}
         onMouseEnter={() => setHovered(true)}
         onMouseLeave={() => setHovered(false)}
@@ -126,6 +140,51 @@ export function GroupRectNode({ id, data, selected }: NodeProps<Node<NodeData>>)
           setEditingGroupRectId(id)
         }}
       >
+        {childrenCount > 0 && (
+          <button
+            className="nodrag"
+            onClick={(e) => {
+              e.stopPropagation()
+              toggleNodeCollapsed(id)
+            }}
+            style={{
+              position: 'absolute',
+              top: 6,
+              right: 6,
+              width: 20,
+              height: 20,
+              padding: 0,
+              background: 'rgba(0, 212, 255, 0.1)',
+              border: '1px solid rgba(0, 212, 255, 0.3)',
+              borderRadius: 4,
+              color: borderColor,
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              transition: 'all 0.2s ease-out, transform 0.2s ease-out',
+              transform: isCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)',
+            }}
+            title={isCollapsed ? `Show ${childrenCount} hidden items` : `Hide ${childrenCount} items`}
+          >
+            <ChevronDown size={14} />
+          </button>
+        )}
+        {isCollapsed && childrenCount > 0 && (
+          <span
+            style={{
+              position: 'absolute',
+              bottom: 6,
+              right: 6,
+              fontSize: 10,
+              color: borderColor,
+              opacity: 0.7,
+              userSelect: 'none',
+            }}
+          >
+            +{childrenCount}
+          </span>
+        )}
         {labelPosition === 'outside' && data.label && (
           <span
             style={{

frontend/src/components/canvas/nodes/ProxmoxGroupNode.tsx

@@ -1,5 +1,5 @@
-import { createElement } from 'react'
-import { Handle, Position, NodeResizer, type NodeProps, type Node } from '@xyflow/react'
+import { createElement, useEffect } from 'react'
+import { Handle, Position, NodeResizer, useUpdateNodeInternals, type NodeProps, type Node } from '@xyflow/react'
 import { Layers } from 'lucide-react'
 import type { NodeData } from '@/types'
 import { resolveNodeColors } from '@/utils/nodeColors'
@@ -10,10 +10,13 @@ import { useCanvasStore } from '@/stores/canvasStore'
 import { maskIp, splitIps } from '@/utils/maskIp'
 import { useThemeStore } from '@/stores/themeStore'
 import { THEMES } from '@/utils/themes'
+import { bottomHandleId, bottomHandlePositions } from '@/utils/handleUtils'
 import { BaseNode } from './BaseNode'
 
 export function ProxmoxGroupNode(props: NodeProps<Node<NodeData>>) {
-  const { data, selected } = props
+  const { id, data, selected } = props
+  const updateNodeInternals = useUpdateNodeInternals()
+  useEffect(() => { updateNodeInternals(id) }, [data.bottom_handles, id, updateNodeInternals])
 
   const activeTheme = useThemeStore((s) => s.activeTheme)
   const hideIp = useCanvasStore((s) => s.hideIp)
@@ -149,13 +152,26 @@ export function ProxmoxGroupNode(props: NodeProps<Node<NodeData>>) {
         style={{ background: theme.colors.handleBackground, borderColor: theme.colors.handleBorder }}
       />
       <Handle type="target" position={Position.Top} id="top-t" style={{ opacity: 0, width: 12, height: 12 }} />
-      <Handle
-        type="source"
-        position={Position.Bottom}
-        id="bottom"
-        style={{ background: theme.colors.handleBackground, borderColor: theme.colors.handleBorder }}
-      />
-      <Handle type="target" position={Position.Bottom} id="bottom-t" style={{ opacity: 0, width: 12, height: 12 }} />
+      {bottomHandlePositions(data.bottom_handles ?? 1).map((leftPct, idx) => {
+        const sourceId = bottomHandleId(idx)
+        const targetId = `${sourceId}-t`
+        return (
+          <span key={sourceId}>
+            <Handle
+              type="source"
+              position={Position.Bottom}
+              id={sourceId}
+              style={{ left: `${leftPct}%`, background: theme.colors.handleBackground, borderColor: theme.colors.handleBorder }}
+            />
+            <Handle
+              type="target"
+              position={Position.Bottom}
+              id={targetId}
+              style={{ left: `${leftPct}%`, opacity: 0, width: 12, height: 12 }}
+            />
+          </span>
+        )
+      })}
 
       {/* Cluster handles */}
       <Handle

frontend/src/components/canvas/nodes/__tests__/GroupNode.test.tsx

@@ -0,0 +1,81 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { render } from '@testing-library/react'
+import { ReactFlowProvider } from '@xyflow/react'
+import { GroupNode } from '../GroupNode'
+import { useCanvasStore } from '@/stores/canvasStore'
+import { useThemeStore } from '@/stores/themeStore'
+import type { NodeData } from '@/types'
+import type { NodeProps, Node } from '@xyflow/react'
+
+function renderNode(data: Partial<NodeData> = {}, selected = false) {
+  const fullData: NodeData = {
+    label: 'Group A',
+    type: 'group',
+    status: 'unknown',
+    services: [],
+    ...data,
+  }
+  const props = {
+    id: 'g1',
+    data: fullData,
+    selected,
+    type: 'group',
+    zIndex: 0,
+    isConnectable: true,
+    xPos: 0,
+    yPos: 0,
+    dragging: false,
+    deletable: true,
+    draggable: true,
+    selectable: true,
+    positionAbsoluteX: 0,
+    positionAbsoluteY: 0,
+    width: 300,
+    height: 200,
+    dragHandle: undefined,
+    parentId: undefined,
+    sourcePosition: undefined,
+    targetPosition: undefined,
+  } as unknown as NodeProps<Node<NodeData>>
+  return render(
+    <ReactFlowProvider>
+      <GroupNode {...props} />
+    </ReactFlowProvider>
+  )
+}
+
+describe('GroupNode', () => {
+  beforeEach(() => {
+    useCanvasStore.setState({ nodes: [], hideIp: false })
+    useThemeStore.setState({ activeTheme: 'default' })
+  })
+
+  it('renders label', () => {
+    const { getByText } = renderNode({ label: 'My Group' })
+    expect(getByText('My Group')).toBeDefined()
+  })
+
+  it('renders 4 source handles (one per side)', () => {
+    const { container } = renderNode()
+    expect(container.querySelector('.react-flow__handle-top.source')).not.toBeNull()
+    expect(container.querySelector('.react-flow__handle-right.source')).not.toBeNull()
+    expect(container.querySelector('.react-flow__handle-bottom.source')).not.toBeNull()
+    expect(container.querySelector('.react-flow__handle-left.source')).not.toBeNull()
+  })
+
+  it('renders 4 target handles (one per side)', () => {
+    const { container } = renderNode()
+    expect(container.querySelector('.react-flow__handle-top.target')).not.toBeNull()
+    expect(container.querySelector('.react-flow__handle-right.target')).not.toBeNull()
+    expect(container.querySelector('.react-flow__handle-bottom.target')).not.toBeNull()
+    expect(container.querySelector('.react-flow__handle-left.target')).not.toBeNull()
+  })
+
+  it('source handles carry side-specific ids', () => {
+    const { container } = renderNode()
+    expect(container.querySelector('[data-handleid="group-top"]')).not.toBeNull()
+    expect(container.querySelector('[data-handleid="group-right"]')).not.toBeNull()
+    expect(container.querySelector('[data-handleid="group-bottom"]')).not.toBeNull()
+    expect(container.querySelector('[data-handleid="group-left"]')).not.toBeNull()
+  })
+})

frontend/src/components/canvas/nodes/__tests__/GroupRectNode.collapse.test.tsx

@@ -0,0 +1,32 @@
+import { describe, it, expect } from 'vitest'
+import type { NodeData } from '@/types'
+
+/**
+ * Type-level assertions for the collapse feature. Behavioral coverage lives
+ * in:
+ *   - src/stores/__tests__/canvasStore.collapse.test.ts (store action)
+ *   - src/utils/__tests__/collapseFilter.test.ts        (BFS + edge rewire)
+ *   - src/utils/__tests__/canvasSerializer.collapse.test.ts (round-trip)
+ */
+describe('NodeData.collapsed', () => {
+  it('accepts a boolean collapsed flag as a first-class field', () => {
+    const nodeData: NodeData = {
+      label: 'Test Zone',
+      type: 'groupRect',
+      status: 'online',
+      services: [],
+      collapsed: true,
+    }
+    expect(nodeData.collapsed).toBe(true)
+  })
+
+  it('treats a missing flag as expanded', () => {
+    const nodeData: NodeData = {
+      label: 'Test Zone',
+      type: 'groupRect',
+      status: 'online',
+      services: [],
+    }
+    expect(nodeData.collapsed).toBeUndefined()
+  })
+})

frontend/src/components/canvas/nodes/__tests__/ProxmoxGroupNode.test.tsx

@@ -102,6 +102,18 @@ describe('ProxmoxGroupNode', () => {
     expect(container.querySelector('.rounded-xl.border-2')).not.toBeNull()
   })
 
+  it('container mode renders bottom_handles snap points', () => {
+    const { container } = renderNode({ bottom_handles: 4 })
+    const sourceHandles = container.querySelectorAll('.react-flow__handle-bottom.source')
+    expect(sourceHandles.length).toBe(4)
+  })
+
+  it('container mode default has single bottom handle', () => {
+    const { container } = renderNode({})
+    const sourceHandles = container.querySelectorAll('.react-flow__handle-bottom.source')
+    expect(sourceHandles.length).toBe(1)
+  })
+
   it('renders cluster handles in both modes', () => {
     const { container: groupC } = renderNode({})
     expect(groupC.querySelectorAll('[title="Same cluster"]').length).toBeGreaterThanOrEqual(2)

frontend/src/components/canvas/nodes/index.tsx

@@ -1,7 +1,7 @@
 import { type NodeProps, type Node } from '@xyflow/react'
 import {
   Globe, Router, Network, Server, Layers, Box, Container,
-  HardDrive, Cpu, Wifi, Circle, Cctv, Printer, Monitor, PlugZap, Anchor, Package, Flame, Radio, Antenna,
+  HardDrive, Cpu, Wifi, Circle, Cctv, Printer, Monitor, Laptop, Smartphone, PlugZap, Anchor, Package, Flame, Radio, Antenna,
 } from 'lucide-react'
 import { BaseNode } from './BaseNode'
 import type { NodeData } from '@/types'
@@ -22,6 +22,8 @@ export const ApNode      = (props: N) => <BaseNode {...props} icon={Wifi} />
 export const CameraNode   = (props: N) => <BaseNode {...props} icon={Cctv} />
 export const PrinterNode  = (props: N) => <BaseNode {...props} icon={Printer} />
 export const ComputerNode = (props: N) => <BaseNode {...props} icon={Monitor} />
+export const LaptopNode   = (props: N) => <BaseNode {...props} icon={Laptop} />
+export const MobileNode   = (props: N) => <BaseNode {...props} icon={Smartphone} />
 export const CplNode      = (props: N) => <BaseNode {...props} icon={PlugZap} />
 export const DockerHostNode      = (props: N) => <BaseNode {...props} icon={Anchor} />
 export const DockerContainerNode = (props: N) => <BaseNode {...props} icon={Package} />

frontend/src/components/canvas/nodes/nodeTypes.ts

@@ -1,4 +1,4 @@
-import { IspNode, RouterNode, FirewallNode, SwitchNode, ServerNode, VmNode, LxcNode, NasNode, IotNode, ApNode, CameraNode, PrinterNode, ComputerNode, CplNode, DockerHostNode, DockerContainerNode, GenericNode, ZigbeeCoordinatorNode, ZigbeeRouterNode, ZigbeeEndDeviceNode } from './index'
+import { IspNode, RouterNode, FirewallNode, SwitchNode, ServerNode, VmNode, LxcNode, NasNode, IotNode, ApNode, CameraNode, PrinterNode, ComputerNode, LaptopNode, MobileNode, CplNode, DockerHostNode, DockerContainerNode, GenericNode, ZigbeeCoordinatorNode, ZigbeeRouterNode, ZigbeeEndDeviceNode } from './index'
 import { ProxmoxGroupNode } from './ProxmoxGroupNode'
 import { GroupRectNode } from './GroupRectNode'
 import { GroupNode } from './GroupNode'
@@ -19,6 +19,8 @@ export const nodeTypes = {
   camera: CameraNode,
   printer: PrinterNode,
   computer: ComputerNode,
+  laptop: LaptopNode,
+  mobile: MobileNode,
   cpl: CplNode,
   docker_host: DockerHostNode,
   docker_container: DockerContainerNode,

frontend/src/components/modals/CustomStyleModal.tsx

@@ -2,7 +2,7 @@ import { useState, useCallback } from 'react'
 import { toast } from 'sonner'
 import {
   Globe, Router, Network, Server, Layers, Box, Container, HardDrive,
-  Cpu, Wifi, Camera, Printer, Monitor, PlugZap, Anchor, Package, Circle, Flame,
+  Cpu, Wifi, Camera, Printer, Monitor, Laptop, Smartphone, PlugZap, Anchor, Package, Circle, Flame,
   Radio, Zap, Lightbulb,
   type LucideIcon,
 } from 'lucide-react'
@@ -21,7 +21,7 @@ import { NODE_TYPE_LABELS, EDGE_TYPE_LABELS } from '@/types'
 
 const EDITABLE_NODE_TYPES: NodeType[] = [
   'isp', 'router', 'firewall', 'switch', 'server', 'proxmox', 'vm', 'lxc', 'nas',
-  'iot', 'ap', 'camera', 'printer', 'computer', 'cpl', 'docker_host',
+  'iot', 'ap', 'camera', 'printer', 'computer', 'laptop', 'mobile', 'cpl', 'docker_host',
   'docker_container', 'zigbee_coordinator', 'zigbee_router', 'zigbee_enddevice',
   'generic',
 ]
@@ -31,7 +31,7 @@ const EDITABLE_EDGE_TYPES: EdgeType[] = ['ethernet', 'wifi', 'iot', 'vlan', 'vir
 const NODE_ICONS: Record<string, LucideIcon> = {
   isp: Globe, router: Router, firewall: Flame, switch: Network, server: Server, proxmox: Layers,
   vm: Box, lxc: Container, nas: HardDrive, iot: Cpu, ap: Wifi,
-  camera: Camera, printer: Printer, computer: Monitor, cpl: PlugZap,
+  camera: Camera, printer: Printer, computer: Monitor, laptop: Laptop, mobile: Smartphone, cpl: PlugZap,
   docker_host: Anchor, docker_container: Package,
   zigbee_coordinator: Radio, zigbee_router: Zap, zigbee_enddevice: Lightbulb,
   generic: Circle,

frontend/src/components/modals/NodeModal.tsx

@@ -11,13 +11,15 @@ import { resolveNodeColors } from '@/utils/nodeColors'
 import { ICON_REGISTRY, ICON_CATEGORIES, NODE_TYPE_DEFAULT_ICONS, isBrandIconKey, brandIconSlug, brandIconUrl } from '@/utils/nodeIcons'
 import { BrandIconPicker } from './BrandIconPicker'
 import { MIN_BOTTOM_HANDLES, MAX_BOTTOM_HANDLES, clampBottomHandles } from '@/utils/handleUtils'
+import { getValidParentTypes } from '@/utils/virtualEdgeParent'
 
 const NODE_TYPE_GROUPS: { label: string; types: NodeType[] }[] = [
   { label: 'Hardware',       types: ['isp', 'router', 'firewall', 'switch', 'server', 'nas', 'ap', 'printer'] },
   { label: 'Virtualization', types: ['proxmox', 'vm', 'lxc', 'docker_host', 'docker_container'] },
   { label: 'IoT',            types: ['iot', 'camera', 'cpl'] },
   { label: 'Zigbee',         types: ['zigbee_coordinator', 'zigbee_router', 'zigbee_enddevice'] },
-  { label: 'Generic',        types: ['computer', 'generic', 'groupRect'] },
+  { label: 'Personal',       types: ['computer', 'laptop', 'mobile'] },
+  { label: 'Generic',        types: ['generic', 'groupRect'] },
 ]
 
 const CHECK_METHODS: CheckMethod[] = ['none', 'ping', 'http', 'https', 'tcp', 'ssh', 'prometheus', 'health']
@@ -48,17 +50,25 @@ const DEFAULT_DATA: Partial<NodeData> = {
   custom_icon: undefined,
 }
 
+interface ParentCandidate {
+  id: string
+  label: string
+  type: NodeType
+}
+
 interface NodeModalProps {
   open: boolean
   onClose: () => void
   onSubmit: (data: Partial<NodeData>) => void
   initial?: Partial<NodeData>
   title?: string
+  parentCandidates?: ParentCandidate[]
+  currentNodeId?: string
 }
 
 // NodeModal is always mounted with a key that changes on open/edit, so useState
 // initial value is enough - no need for a reset effect.
-export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node' }: NodeModalProps) {
+export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node', parentCandidates = [], currentNodeId }: NodeModalProps) {
   const merged = { ...DEFAULT_DATA, ...initial }
   if (ZIGBEE_TYPES.includes((merged.type ?? '') as NodeType)) merged.check_method = 'none'
   const [form, setForm] = useState<Partial<NodeData>>(merged)
@@ -86,8 +96,17 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
     setLabelError(false)
     const selectedType = (form.type ?? 'generic') as NodeType
     const canUseContainerMode = CONTAINER_MODE_TYPES.includes(selectedType)
+    const validParentTypes = getValidParentTypes(selectedType)
+    let safeParentId = form.parent_id
+    if (validParentTypes.length === 0) {
+      safeParentId = undefined
+    } else if (safeParentId) {
+      const parent = parentCandidates.find((n) => n.id === safeParentId)
+      if (!parent || !validParentTypes.includes(parent.type)) safeParentId = undefined
+    }
     onSubmit({
       ...form,
+      parent_id: safeParentId,
       container_mode: canUseContainerMode ? !!form.container_mode : false,
     })
     onClose()
@@ -107,7 +126,12 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
               <Label className="text-xs text-muted-foreground">Type</Label>
               <Select value={form.type} onValueChange={(v) => {
                 const t = v as NodeType
-                setForm((f) => ({ ...f, type: t, ...(ZIGBEE_TYPES.includes(t) ? { check_method: 'none' as CheckMethod } : {}) }))
+                setForm((f) => {
+                  const next: Partial<NodeData> = { ...f, type: t }
+                  if (ZIGBEE_TYPES.includes(t)) next.check_method = 'none' as CheckMethod
+                  if (getValidParentTypes(t).length === 0) next.parent_id = undefined
+                  return next
+                })
               }}>
                 <SelectTrigger className={`bg-[#21262d] border-[#30363d] text-sm h-8 w-full cursor-pointer ${modalStyles['modal-interactive']} ${modalStyles['modal-radius']}`} aria-label="Node type selector">
                   <SelectValue>{NODE_TYPE_LABELS[(form.type ?? 'server') as NodeType]}</SelectValue>
@@ -320,6 +344,40 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
               </div>
             )}
 
+            {/* Parent Container */}
+            {(() => {
+              const childType = (form.type ?? 'generic') as NodeType
+              const validParentTypes = getValidParentTypes(childType)
+              if (validParentTypes.length === 0) return null
+              const validParents = parentCandidates.filter(
+                (n) => n.id !== currentNodeId && validParentTypes.includes(n.type),
+              )
+              if (validParents.length === 0) return null
+              return (
+                <div className="flex flex-col gap-1.5 col-span-2">
+                  <Label className="text-xs text-muted-foreground">Parent Container</Label>
+                  <Select
+                    value={form.parent_id ?? 'none'}
+                    onValueChange={(v) => set('parent_id', v === 'none' ? undefined : v)}
+                  >
+                    <SelectTrigger className={`bg-[#21262d] border-[#30363d] text-sm h-8 cursor-pointer ${modalStyles['modal-interactive']} ${modalStyles['modal-radius']}`} aria-label="Parent container selector">
+                      <SelectValue>
+                        {form.parent_id
+                          ? (validParents.find((n) => n.id === form.parent_id)?.label ?? 'None')
+                          : 'None'}
+                      </SelectValue>
+                    </SelectTrigger>
+                    <SelectContent className="bg-[#21262d] border-[#30363d]">
+                      <SelectItem value="none" className="text-sm">None</SelectItem>
+                      {validParents.map((n) => (
+                        <SelectItem key={n.id} value={n.id} className="text-sm">{n.label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              )
+            })()}
+
             {/* Container mode */}
             {CONTAINER_MODE_TYPES.includes((form.type ?? 'generic') as NodeType) && (
               <div className="flex items-center justify-between col-span-2 py-1">

frontend/src/components/modals/__tests__/NodeModal.test.tsx

@@ -311,18 +311,48 @@ describe('NodeModal', () => {
     expect(screen.queryByText('Reset to defaults')).toBeNull()
   })
 
-  // ── Parent Container selector removed ────────────────────────────────
+  // ── Parent Container selector ─────────────────────────────────────────
 
-  it('does not render the Parent Container selector', () => {
-    renderModal({ initial: BASE })
+  it('does not render Parent Container for non-child types', () => {
+    renderModal({
+      initial: BASE,
+      parentCandidates: [{ id: 'p1', label: 'Proxmox', type: 'proxmox' }],
+    })
     expect(screen.queryByText('Parent Container')).toBeNull()
   })
 
-  it('does not render Parent Container for docker_container either', () => {
-    renderModal({ initial: { ...BASE, type: 'docker_container' } })
+  it('does not render Parent Container when no valid candidates exist', () => {
+    renderModal({
+      initial: { ...BASE, type: 'docker_container' },
+      parentCandidates: [],
+    })
     expect(screen.queryByText('Parent Container')).toBeNull()
   })
 
+  it('renders Parent Container for docker_container when docker_host candidate exists', () => {
+    renderModal({
+      initial: { ...BASE, type: 'docker_container' },
+      parentCandidates: [{ id: 'dh1', label: 'Docker Host', type: 'docker_host' }],
+    })
+    expect(screen.getByText('Parent Container')).toBeDefined()
+  })
+
+  it('renders Parent Container for docker_container when only an LXC candidate exists', () => {
+    renderModal({
+      initial: { ...BASE, type: 'docker_container' },
+      parentCandidates: [{ id: 'lxc1', label: 'My LXC', type: 'lxc' }],
+    })
+    expect(screen.getByText('Parent Container')).toBeDefined()
+  })
+
+  it('renders Parent Container for lxc when proxmox candidate exists', () => {
+    renderModal({
+      initial: { ...BASE, type: 'lxc' },
+      parentCandidates: [{ id: 'px1', label: 'PVE', type: 'proxmox' }],
+    })
+    expect(screen.getByText('Parent Container')).toBeDefined()
+  })
+
   // ── Appearance ────────────────────────────────────────────────────────
 
   it('renders 3 color swatch labels (border, background, icon)', () => {

frontend/src/components/panels/DetailPanel.tsx

@@ -6,7 +6,7 @@ import { Input } from '@/components/ui/input'
 import { useCanvasStore } from '@/stores/canvasStore'
 import { NODE_TYPE_LABELS, STATUS_COLORS, type ServiceInfo, type NodeData, type NodeProperty } from '@/types'
 import { getServiceUrl } from '@/utils/serviceUrl'
-import { primaryIp } from '@/utils/maskIp'
+import { splitIps } from '@/utils/maskIp'
 import { PROPERTY_ICONS, PROPERTY_ICON_NAMES, resolvePropertyIcon } from '@/utils/propertyIcons'
 import type { Node } from '@xyflow/react'
 
@@ -85,7 +85,8 @@ export function DetailPanel({ onEdit }: DetailPanelProps) {
   const { data } = node
   const services = data.services ?? []
   const statusColor = STATUS_COLORS[data.status]
-  const host = data.ip ?? data.hostname
+  const ipAddresses = data.ip ? splitIps(data.ip) : []
+  const host = ipAddresses[0] ?? data.hostname
 
   const handleDelete = () => {
     if (confirm(`Delete "${data.label}"?`)) {
@@ -223,12 +224,25 @@ export function DetailPanel({ onEdit }: DetailPanelProps) {
             </a>
           </div>
         )}
-        {data.ip && (
-          <div className="flex justify-between gap-2 items-baseline">
-            <span className="text-muted-foreground text-xs shrink-0">IP Address</span>
-            <a href={`http://${primaryIp(data.ip)}`} target="_blank" rel="noopener noreferrer" className="text-xs font-mono text-[#00d4ff] hover:underline truncate flex items-center gap-1" title={data.ip}>
-              {data.ip}<ExternalLink size={10} className="shrink-0" />
-            </a>
+        {ipAddresses.length > 0 && (
+          <div className="flex justify-between gap-2 items-start">
+            <span className="text-muted-foreground text-xs shrink-0">{ipAddresses.length > 1 ? 'IP Addresses' : 'IP Address'}</span>
+            <div className="flex flex-wrap justify-end items-center gap-x-2 gap-y-1 max-w-[65%]">
+              {ipAddresses.map((ip, index) => (
+                <span key={`${ip}-${index}`} className="inline-flex items-center shrink-0 whitespace-nowrap">
+                  <a
+                    href={`http://${ip}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-xs font-mono text-[#00d4ff] hover:underline inline-flex items-center gap-1"
+                    title={ip}
+                  >
+                    {ip}
+                    <ExternalLink size={10} className="shrink-0" />
+                  </a>
+                </span>
+              ))}
+            </div>
           </div>
         )}
         {data.mac && <DetailRow label="MAC" value={data.mac} mono />}

frontend/src/components/panels/__tests__/DetailPanel.test.tsx

@@ -442,7 +442,23 @@ describe('DetailPanel', () => {
     it('displays full comma-separated IP string as link text', () => {
       setupStore({ ip: '192.168.1.10, 192.168.1.11' })
       render(<DetailPanel onEdit={vi.fn()} />)
-      expect(screen.getByText(/192\.168\.1\.10, 192\.168\.1\.11/)).toBeDefined()
+      expect(screen.getByRole('link', { name: /192\.168\.1\.10/ })).toBeDefined()
+      expect(screen.getByRole('link', { name: /192\.168\.1\.11/ })).toBeDefined()
+      expect(screen.queryByText(',')).toBeNull()
+    })
+
+    it('renders separate links for semicolon-separated IPs', () => {
+      setupStore({ ip: '192.168.1.10; 192.168.1.11' })
+      render(<DetailPanel onEdit={vi.fn()} />)
+      expect(screen.getByRole('link', { name: /192\.168\.1\.10/ }).getAttribute('href')).toBe('http://192.168.1.10')
+      expect(screen.getByRole('link', { name: /192\.168\.1\.11/ }).getAttribute('href')).toBe('http://192.168.1.11')
+    })
+
+    it('renders separate links for newline-separated IPs', () => {
+      setupStore({ ip: '192.168.1.10\n192.168.1.11' })
+      render(<DetailPanel onEdit={vi.fn()} />)
+      expect(screen.getByRole('link', { name: /192\.168\.1\.10/ }).getAttribute('href')).toBe('http://192.168.1.10')
+      expect(screen.getByRole('link', { name: /192\.168\.1\.11/ }).getAttribute('href')).toBe('http://192.168.1.11')
     })
   })
 

frontend/src/index.css

@@ -11,6 +11,13 @@
   to   { stroke-dashoffset: 0; }
 }
 
+/* Disable React Flow's built-in edgeupdater entirely — HomelableEdge renders
+   its own interactive endpoint dots in EdgeLabelRenderer (above the node
+   layer) so the node Handle DOM cannot steal the reconnection drag. */
+.react-flow__edgeupdater {
+  display: none;
+}
+
 /* Homelable dark theme — always dark */
 :root {
     --background: #0d1117;

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

@@ -0,0 +1,61 @@
+import { describe, it, expect } from 'vitest'
+import { renderHook, act } from '@testing-library/react'
+import { useCanvasStore } from '../canvasStore'
+import type { Node } from '@xyflow/react'
+import type { NodeData } from '@/types'
+
+describe('canvasStore - toggleNodeCollapsed', () => {
+  it('toggles collapsed state on a zone node', () => {
+    const { result } = renderHook(() => useCanvasStore())
+
+    const node: Node<NodeData> = {
+      id: 'zone-1',
+      data: { label: 'Test Zone', type: 'groupRect', status: 'online', services: [] },
+      position: { x: 0, y: 0 },
+    }
+
+    act(() => {
+      result.current.addNode(node)
+    })
+
+    let zone = result.current.nodes.find((n) => n.id === 'zone-1')
+    expect(zone?.data.collapsed).toBeUndefined()
+
+    act(() => {
+      result.current.toggleNodeCollapsed('zone-1')
+    })
+
+    zone = result.current.nodes.find((n) => n.id === 'zone-1')
+    expect(zone?.data.collapsed).toBe(true)
+
+    act(() => {
+      result.current.toggleNodeCollapsed('zone-1')
+    })
+
+    zone = result.current.nodes.find((n) => n.id === 'zone-1')
+    expect(zone?.data.collapsed).toBe(false)
+  })
+
+  it('marks canvas as unsaved when toggling collapse', () => {
+    const { result } = renderHook(() => useCanvasStore())
+
+    const node: Node<NodeData> = {
+      id: 'zone-1',
+      data: { label: 'Test Zone', type: 'groupRect', status: 'online', services: [] },
+      position: { x: 0, y: 0 },
+    }
+
+    act(() => {
+      result.current.addNode(node)
+      result.current.markSaved()
+    })
+
+    expect(result.current.hasUnsavedChanges).toBe(false)
+
+    act(() => {
+      result.current.toggleNodeCollapsed('zone-1')
+    })
+
+    expect(result.current.hasUnsavedChanges).toBe(true)
+  })
+})

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

@@ -497,6 +497,31 @@ describe('canvasStore', () => {
     expect(useCanvasStore.getState().hasUnsavedChanges).toBe(true)
   })
 
+  it('reconnectEdge swaps source/target and normalizes handles', () => {
+    useCanvasStore.setState((s) => ({
+      edges: [...s.edges, { ...makeEdge('e1', 'n1', 'n2'), sourceHandle: 'bottom', targetHandle: 'top' }],
+    }))
+    useCanvasStore.getState().markSaved()
+    useCanvasStore.getState().reconnectEdge('e1', {
+      source: 'n1',
+      target: 'n3',
+      sourceHandle: 'bottom-2-t',
+      targetHandle: 'top-t',
+    })
+    const edge = useCanvasStore.getState().edges.find((e) => e.id === 'e1')
+    expect(edge?.target).toBe('n3')
+    expect(edge?.source).toBe('n1')
+    expect(edge?.sourceHandle).toBe('bottom-2')
+    expect(edge?.targetHandle).toBe('top')
+    expect(useCanvasStore.getState().hasUnsavedChanges).toBe(true)
+  })
+
+  it('reconnectEdge snapshots history for undo', () => {
+    useCanvasStore.setState((s) => ({ edges: [...s.edges, makeEdge('e1', 'n1', 'n2')], past: [] }))
+    useCanvasStore.getState().reconnectEdge('e1', { source: 'n1', target: 'n3', sourceHandle: null, targetHandle: null })
+    expect(useCanvasStore.getState().past.length).toBe(1)
+  })
+
   it('deleteEdge removes the edge and marks unsaved', () => {
     useCanvasStore.setState((s) => ({ edges: [...s.edges, makeEdge('e1', 'n1', 'n2'), makeEdge('e2', 'n2', 'n3')] }))
     useCanvasStore.getState().markSaved()

frontend/src/stores/canvasStore.ts

@@ -44,6 +44,7 @@ interface CanvasState {
   updateNode: (id: string, data: Partial<NodeData>) => void
   deleteNode: (id: string) => void
   updateEdge: (id: string, data: Partial<EdgeData>) => void
+  reconnectEdge: (id: string, connection: Connection) => void
   deleteEdge: (id: string) => void
   setProxmoxContainerMode: (proxmoxId: string, enabled: boolean) => void
   setNodeZIndex: (id: string, zIndex: number) => void
@@ -51,6 +52,7 @@ interface CanvasState {
   setEditingGroupRectId: (id: string | null) => void
   editingTextId: string | null
   setEditingTextId: (id: string | null) => void
+  toggleNodeCollapsed: (id: string) => void
   createGroup: (nodeIds: string[], name: string) => void
   ungroup: (groupId: string) => void
   markSaved: () => void
@@ -292,6 +294,24 @@ export const useCanvasStore = create<CanvasState>((set) => ({
       hasUnsavedChanges: true,
     })),
 
+  reconnectEdge: (id, connection) =>
+    set((state) => ({
+      edges: state.edges.map((e) =>
+        e.id === id
+          ? {
+              ...e,
+              source: connection.source ?? e.source,
+              target: connection.target ?? e.target,
+              sourceHandle: normalizeHandle(connection.sourceHandle),
+              targetHandle: normalizeHandle(connection.targetHandle),
+            }
+          : e
+      ),
+      past: [...state.past.slice(-49), { nodes: state.nodes, edges: state.edges }],
+      future: [],
+      hasUnsavedChanges: true,
+    })),
+
   deleteEdge: (id) =>
     set((state) => ({
       edges: state.edges.filter((e) => e.id !== id),
@@ -355,6 +375,16 @@ export const useCanvasStore = create<CanvasState>((set) => ({
 
   setEditingTextId: (id) => set({ editingTextId: id }),
 
+  toggleNodeCollapsed: (id) =>
+    set((state) => ({
+      nodes: state.nodes.map((n) =>
+        n.id === id
+          ? { ...n, data: { ...n.data, collapsed: !n.data.collapsed } }
+          : n
+      ),
+      hasUnsavedChanges: true,
+    })),
+
   createGroup: (nodeIds, name) =>
     set((state) => {
       const PADDING_H = 24

frontend/src/types/__tests__/types.test.ts

@@ -4,7 +4,7 @@ import type { CheckMethod } from '@/types'
 
 describe('NODE_TYPE_LABELS', () => {
   it('has an entry for every node type', () => {
-    const expectedTypes = ['isp', 'router', 'firewall', 'switch', 'server', 'proxmox', 'vm', 'lxc', 'nas', 'iot', 'ap', 'camera', 'generic']
+    const expectedTypes = ['isp', 'router', 'firewall', 'switch', 'server', 'proxmox', 'vm', 'lxc', 'nas', 'iot', 'ap', 'camera', 'laptop', 'mobile', 'generic']
     expectedTypes.forEach((t) => {
       expect(NODE_TYPE_LABELS).toHaveProperty(t)
       expect(typeof NODE_TYPE_LABELS[t as keyof typeof NODE_TYPE_LABELS]).toBe('string')

frontend/src/types/index.ts

@@ -13,6 +13,8 @@ export type NodeType =
   | 'camera'
   | 'printer'
   | 'computer'
+  | 'laptop'
+  | 'mobile'
   | 'cpl'
   | 'docker_host'
   | 'docker_container'
@@ -97,6 +99,12 @@ export interface NodeData extends Record<string, unknown> {
     width?: number
     height?: number
   }
+  /**
+   * Collapsible zone state (type === 'groupRect'). When true, the zone hides
+   * its descendants on the canvas. Persisted via `custom_colors.collapsed`
+   * round-trip for back-compat with older saves.
+   */
+  collapsed?: boolean
   custom_icon?: string
   /** Number of bottom connection points, 1..48. Default 1 (centered). */
   bottom_handles?: number
@@ -137,6 +145,8 @@ export const NODE_TYPE_LABELS: Record<NodeType, string> = {
   camera: 'Camera',
   printer: 'Printer',
   computer: 'Computer',
+  laptop: 'Laptop',
+  mobile: 'Phone / Mobile',
   cpl: 'CPL / Powerline',
   docker_host: 'Docker Host',
   docker_container: 'Docker Container',

frontend/src/utils/__tests__/canvasSerializer.collapse.test.ts

@@ -0,0 +1,151 @@
+import { describe, it, expect } from 'vitest'
+import type { Node } from '@xyflow/react'
+import type { NodeData } from '@/types'
+import { serializeNode, deserializeApiNode, type ApiNode } from '@/utils/canvasSerializer'
+
+/**
+ * Persistence contract for the collapse flag on groupRect nodes:
+ *
+ *   1. Serialize stashes `data.collapsed` into `custom_colors.collapsed`
+ *      so the existing API blob shape can carry it without a schema change.
+ *   2. Deserialize hoists it back to the first-class `data.collapsed` field.
+ *   3. Legacy saves that already had `custom_colors.collapsed` (the original
+ *      shape from PR #158 before the field was promoted) still load
+ *      correctly.
+ */
+
+function makeGroupRectRfNode(collapsed?: boolean): Node<NodeData> {
+  return {
+    id: 'zone-1',
+    type: 'groupRect',
+    position: { x: 0, y: 0 },
+    data: {
+      label: 'Zigbee Mesh',
+      type: 'groupRect',
+      status: 'unknown',
+      services: [],
+      ...(collapsed !== undefined ? { collapsed } : {}),
+    },
+  }
+}
+
+describe('canvasSerializer — groupRect collapse', () => {
+  it('stashes data.collapsed=true into custom_colors on serialize', () => {
+    const rf = makeGroupRectRfNode(true)
+    const api = serializeNode(rf) as Record<string, unknown>
+    const cc = api.custom_colors as Record<string, unknown>
+    expect(cc.collapsed).toBe(true)
+  })
+
+  it('writes collapsed=false when the flag is missing (explicit default)', () => {
+    const rf = makeGroupRectRfNode(undefined)
+    const api = serializeNode(rf) as Record<string, unknown>
+    const cc = api.custom_colors as Record<string, unknown>
+    expect(cc.collapsed).toBe(false)
+  })
+
+  it('hoists custom_colors.collapsed back to data.collapsed on deserialize', () => {
+    const apiNode: ApiNode = {
+      id: 'zone-1',
+      type: 'groupRect',
+      label: 'Zone',
+      pos_x: 0,
+      pos_y: 0,
+      status: 'unknown',
+      services: [],
+      custom_colors: { collapsed: true, width: 360, height: 240 },
+    }
+    const rf = deserializeApiNode(apiNode, new Map())
+    expect(rf.data.collapsed).toBe(true)
+  })
+
+  it('treats missing custom_colors.collapsed as false on deserialize', () => {
+    const apiNode: ApiNode = {
+      id: 'zone-1',
+      type: 'groupRect',
+      label: 'Zone',
+      pos_x: 0,
+      pos_y: 0,
+      status: 'unknown',
+      services: [],
+      custom_colors: { width: 360, height: 240 },
+    }
+    const rf = deserializeApiNode(apiNode, new Map())
+    expect(rf.data.collapsed).toBe(false)
+  })
+
+  it('round-trips the collapse flag through serialize → deserialize', () => {
+    const rf = makeGroupRectRfNode(true)
+    const api = serializeNode(rf) as unknown as ApiNode
+    const back = deserializeApiNode(api, new Map())
+    expect(back.data.collapsed).toBe(true)
+  })
+})
+
+describe('canvasSerializer — collapse on non-groupRect node types', () => {
+  it('stashes data.collapsed into custom_colors for a group container', () => {
+    const rf: Node<NodeData> = {
+      id: 'g1',
+      type: 'group',
+      position: { x: 0, y: 0 },
+      data: {
+        label: 'Container',
+        type: 'group',
+        status: 'unknown',
+        services: [],
+        custom_colors: { show_border: true },
+        collapsed: true,
+      },
+    }
+    const api = serializeNode(rf) as Record<string, unknown>
+    const cc = api.custom_colors as Record<string, unknown>
+    expect(cc.collapsed).toBe(true)
+    // Existing custom_colors keys are preserved alongside the stash.
+    expect(cc.show_border).toBe(true)
+  })
+
+  it('leaves custom_colors null when neither flag nor colors are set', () => {
+    const rf: Node<NodeData> = {
+      id: 's1',
+      type: 'server',
+      position: { x: 0, y: 0 },
+      data: { label: 'Server', type: 'server', status: 'online', services: [] },
+    }
+    const api = serializeNode(rf) as Record<string, unknown>
+    expect(api.custom_colors).toBeNull()
+  })
+
+  it('hoists custom_colors.collapsed to data.collapsed for a group container', () => {
+    const apiNode: ApiNode = {
+      id: 'g1',
+      type: 'group',
+      label: 'Container',
+      pos_x: 0,
+      pos_y: 0,
+      status: 'unknown',
+      services: [],
+      custom_colors: { show_border: true, collapsed: true },
+    }
+    const rf = deserializeApiNode(apiNode, new Map())
+    expect(rf.data.collapsed).toBe(true)
+  })
+
+  it('round-trips collapse on a group container', () => {
+    const rf: Node<NodeData> = {
+      id: 'g1',
+      type: 'group',
+      position: { x: 0, y: 0 },
+      data: {
+        label: 'Container',
+        type: 'group',
+        status: 'unknown',
+        services: [],
+        custom_colors: { show_border: true },
+        collapsed: true,
+      },
+    }
+    const api = serializeNode(rf) as unknown as ApiNode
+    const back = deserializeApiNode(api, new Map())
+    expect(back.data.collapsed).toBe(true)
+  })
+})

frontend/src/utils/__tests__/collapseFilter.test.ts

@@ -0,0 +1,262 @@
+import { describe, it, expect } from 'vitest'
+import type { Edge, Node } from '@xyflow/react'
+import {
+  getVisibleNodeIds,
+  rewireEdgesForCollapse,
+  getZoneSpatialChildren,
+  computeCollapseInfo,
+} from '../collapseFilter'
+import type { EdgeData, NodeData } from '@/types'
+
+interface MkOpts {
+  parentId?: string
+  collapsed?: boolean
+  position?: { x: number; y: number }
+  width?: number
+  height?: number
+  type?: NodeData['type']
+}
+
+// Outside the default 360x240 zone bbox at origin — used by tests that need
+// a node that must NOT be spatially captured by a collapsed zone.
+const FAR = { x: 10000, y: 0 }
+
+const mkNode = (id: string, opts: MkOpts = {}): Node<NodeData> => ({
+  id,
+  position: opts.position ?? { x: 0, y: 0 },
+  ...(opts.width !== undefined ? { width: opts.width } : {}),
+  ...(opts.height !== undefined ? { height: opts.height } : {}),
+  ...(opts.parentId ? { parentId: opts.parentId } : {}),
+  data: {
+    label: id,
+    type: opts.type ?? (opts.parentId ? 'server' : 'groupRect'),
+    status: 'online',
+    services: [],
+    ...(opts.collapsed !== undefined ? { collapsed: opts.collapsed } : {}),
+  },
+})
+
+const mkEdge = (id: string, source: string, target: string): Edge<EdgeData> => ({
+  id,
+  source,
+  target,
+})
+
+describe('getVisibleNodeIds — parentId cascade', () => {
+  it('returns all nodes when nothing is collapsed', () => {
+    const nodes = [
+      mkNode('zone'),
+      mkNode('child-a', { parentId: 'zone' }),
+      mkNode('child-b', { parentId: 'zone' }),
+    ]
+    expect(getVisibleNodeIds(nodes)).toEqual(new Set(['zone', 'child-a', 'child-b']))
+  })
+
+  it('hides direct children of a collapsed parent but keeps the parent itself', () => {
+    const nodes = [
+      mkNode('zone', { collapsed: true }),
+      mkNode('child-a', { parentId: 'zone' }),
+      mkNode('child-b', { parentId: 'zone' }),
+      mkNode('outside', { position: FAR }),
+    ]
+    expect(getVisibleNodeIds(nodes)).toEqual(new Set(['zone', 'outside']))
+  })
+
+  it('hides the entire subtree when an ancestor is collapsed (multi-level)', () => {
+    const nodes = [
+      mkNode('root', { collapsed: true }),
+      mkNode('mid', { parentId: 'root', collapsed: false }),
+      mkNode('leaf', { parentId: 'mid' }),
+    ]
+    const v = getVisibleNodeIds(nodes)
+    expect(v.has('root')).toBe(true)
+    expect(v.has('mid')).toBe(false)
+    expect(v.has('leaf')).toBe(false)
+  })
+
+  it('hides only the nested subtree when an inner zone is collapsed', () => {
+    const nodes = [
+      mkNode('root', { collapsed: false }),
+      mkNode('inner', { parentId: 'root', collapsed: true }),
+      mkNode('leaf', { parentId: 'inner' }),
+      mkNode('sibling', { parentId: 'root' }),
+    ]
+    expect(getVisibleNodeIds(nodes)).toEqual(new Set(['root', 'inner', 'sibling']))
+  })
+
+  it('handles a zone with no children', () => {
+    expect(getVisibleNodeIds([mkNode('empty-zone', { collapsed: true })]))
+      .toEqual(new Set(['empty-zone']))
+  })
+
+  it('returns an empty set for empty input', () => {
+    expect(getVisibleNodeIds([])).toEqual(new Set())
+  })
+
+  it('treats nodes with no collapsed flag as expanded', () => {
+    const nodes = [mkNode('zone'), mkNode('child', { parentId: 'zone' })]
+    expect(getVisibleNodeIds(nodes)).toEqual(new Set(['zone', 'child']))
+  })
+
+  it('is independent of insertion order (children declared before parent)', () => {
+    const nodes = [
+      mkNode('child', { parentId: 'zone' }),
+      mkNode('zone', { collapsed: true }),
+    ]
+    expect(getVisibleNodeIds(nodes)).toEqual(new Set(['zone']))
+  })
+})
+
+describe('getZoneSpatialChildren', () => {
+  it('picks up top-level nodes whose centre lies inside the zone bbox', () => {
+    const zone = mkNode('zone', { position: { x: 0, y: 0 }, width: 400, height: 300 })
+    const inside = mkNode('inside', { position: { x: 100, y: 50 }, type: 'server' })
+    const outside = mkNode('outside', { position: { x: 500, y: 0 }, type: 'server' })
+    expect(getZoneSpatialChildren(zone, [zone, inside, outside])).toEqual(['inside'])
+  })
+
+  it('ignores the zone itself', () => {
+    const zone = mkNode('zone', { width: 400, height: 300 })
+    expect(getZoneSpatialChildren(zone, [zone])).toEqual([])
+  })
+
+  it('ignores nodes with a parentId (handled via parentId cascade)', () => {
+    const zone = mkNode('zone', { width: 400, height: 300 })
+    const child = mkNode('child', { parentId: 'other', type: 'server' })
+    expect(getZoneSpatialChildren(zone, [zone, child])).toEqual([])
+  })
+
+  it('uses fallback dimensions for nodes with no width/height set', () => {
+    const zone = mkNode('zone', { width: 400, height: 300 })
+    // No width/height → defaults (200, 80). Centre at (100, 40), inside.
+    const n = mkNode('n', { type: 'server' })
+    expect(getZoneSpatialChildren(zone, [zone, n])).toEqual(['n'])
+  })
+})
+
+describe('computeCollapseInfo — spatial collapse via groupRect zones', () => {
+  it('hides nodes spatially inside a collapsed zone and records hiddenBy', () => {
+    const zone = mkNode('zone', { collapsed: true, width: 400, height: 300 })
+    const inside = mkNode('inside', { position: { x: 50, y: 50 }, type: 'server' })
+    const outside = mkNode('outside', { position: FAR, type: 'server' })
+    const info = computeCollapseInfo([zone, inside, outside])
+    expect(info.visibleIds).toEqual(new Set(['zone', 'outside']))
+    expect(info.hiddenBy.get('inside')).toBe('zone')
+  })
+
+  it('cascades parentId descendants of spatially-hidden nodes', () => {
+    // Proxmox host sitting inside a collapsed zone — its VMs (parentId)
+    // must also be hidden even though they live at relative coords.
+    const zone = mkNode('zone', { collapsed: true, width: 400, height: 300 })
+    const px = mkNode('px', { position: { x: 50, y: 50 }, type: 'proxmox' })
+    const vm = mkNode('vm', { parentId: 'px', type: 'vm' })
+    const info = computeCollapseInfo([zone, px, vm])
+    expect(info.visibleIds).toEqual(new Set(['zone']))
+    expect(info.hiddenBy.get('vm')).toBe('zone')
+  })
+
+  it('a nested groupRect inside a collapsed outer zone is also hidden', () => {
+    const outer = mkNode('outer', { collapsed: true, width: 600, height: 400 })
+    const inner = mkNode('inner', { position: { x: 100, y: 100 }, width: 200, height: 150 })
+    const leaf = mkNode('leaf', { position: { x: 150, y: 150 }, type: 'server' })
+    const info = computeCollapseInfo([outer, inner, leaf])
+    expect(info.visibleIds).toEqual(new Set(['outer']))
+  })
+
+  it('does not affect nodes outside every collapsed zone', () => {
+    const a = mkNode('a', { collapsed: true, width: 300, height: 200 })
+    const b = mkNode('b', { position: { x: 1000, y: 1000 }, width: 300, height: 200 })
+    const free = mkNode('free', { position: { x: 2000, y: 2000 }, type: 'server' })
+    const info = computeCollapseInfo([a, b, free])
+    expect(info.visibleIds.has('free')).toBe(true)
+  })
+})
+
+describe('rewireEdgesForCollapse', () => {
+  it('keeps edges between two visible nodes unchanged (same reference)', () => {
+    const nodes = [mkNode('a'), mkNode('b', { position: FAR })]
+    const edges = [mkEdge('e1', 'a', 'b')]
+    const info = computeCollapseInfo(nodes)
+    const out = rewireEdgesForCollapse(edges, nodes, info.visibleIds, info.hiddenBy)
+    expect(out).toHaveLength(1)
+    expect(out[0]).toBe(edges[0])
+  })
+
+  it('reroutes a cross-boundary edge to the collapsed parentId ancestor', () => {
+    const nodes = [
+      mkNode('zone', { collapsed: true }),
+      mkNode('leaf', { parentId: 'zone' }),
+      mkNode('outside', { position: FAR }),
+    ]
+    const info = computeCollapseInfo(nodes)
+    const edges = [mkEdge('e1', 'outside', 'leaf')]
+    const out = rewireEdgesForCollapse(edges, nodes, info.visibleIds, info.hiddenBy)
+    expect(out[0].source).toBe('outside')
+    expect(out[0].target).toBe('zone')
+    expect(out[0].sourceHandle).toBeNull()
+    expect(out[0].targetHandle).toBeNull()
+  })
+
+  it('reroutes a cross-boundary edge to a collapsed groupRect zone (spatial)', () => {
+    const zone = mkNode('zone', { collapsed: true, width: 400, height: 300 })
+    const inside = mkNode('inside', { position: { x: 50, y: 50 }, type: 'server' })
+    const outside = mkNode('outside', { position: FAR, type: 'server' })
+    const nodes = [zone, inside, outside]
+    const info = computeCollapseInfo(nodes)
+    const edges = [mkEdge('e1', 'outside', 'inside')]
+    const out = rewireEdgesForCollapse(edges, nodes, info.visibleIds, info.hiddenBy)
+    expect(out[0].source).toBe('outside')
+    expect(out[0].target).toBe('zone')
+  })
+
+  it('drops an edge between two siblings inside the same collapsed zone (self-loop)', () => {
+    const nodes = [
+      mkNode('zone', { collapsed: true }),
+      mkNode('a', { parentId: 'zone' }),
+      mkNode('b', { parentId: 'zone' }),
+    ]
+    const info = computeCollapseInfo(nodes)
+    expect(rewireEdgesForCollapse([mkEdge('e1', 'a', 'b')], nodes, info.visibleIds, info.hiddenBy))
+      .toEqual([])
+  })
+
+  it('de-dupes parallel cross-boundary edges that rewire to the same pair', () => {
+    const nodes = [
+      mkNode('zone', { collapsed: true }),
+      mkNode('coord', { position: FAR }),
+      ...Array.from({ length: 5 }, (_, i) => mkNode(`leaf-${i}`, { parentId: 'zone' })),
+    ]
+    const info = computeCollapseInfo(nodes)
+    const edges = Array.from({ length: 5 }, (_, i) => mkEdge(`e-${i}`, 'coord', `leaf-${i}`))
+    const out = rewireEdgesForCollapse(edges, nodes, info.visibleIds, info.hiddenBy)
+    expect(out).toHaveLength(1)
+    expect(out[0].source).toBe('coord')
+    expect(out[0].target).toBe('zone')
+  })
+
+  it('walks the chain to the nearest visible ancestor (nested collapse)', () => {
+    const nodes = [
+      mkNode('root', { collapsed: true }),
+      mkNode('mid', { parentId: 'root' }),
+      mkNode('leaf', { parentId: 'mid' }),
+      mkNode('outside', { position: FAR }),
+    ]
+    const info = computeCollapseInfo(nodes)
+    const out = rewireEdgesForCollapse(
+      [mkEdge('e1', 'outside', 'leaf')],
+      nodes,
+      info.visibleIds,
+      info.hiddenBy,
+    )
+    expect(out[0].target).toBe('root')
+  })
+
+  it('drops an edge whose endpoint has no visible ancestor', () => {
+    const edges = [mkEdge('e1', 'ghost', 'also-ghost')]
+    expect(rewireEdgesForCollapse(edges, [], new Set(), new Map())).toEqual([])
+  })
+
+  it('returns an empty array for empty input', () => {
+    expect(rewireEdgesForCollapse([], [], new Set(), new Map())).toEqual([])
+  })
+})

frontend/src/utils/__tests__/group.collapse.integration.test.ts

@@ -0,0 +1,43 @@
+import { describe, it, expect } from 'vitest'
+import { renderHook, act } from '@testing-library/react'
+import { useCanvasStore } from '../../stores/canvasStore'
+import { computeCollapseInfo } from '../collapseFilter'
+import type { Node } from '@xyflow/react'
+import type { NodeData } from '@/types'
+
+const mk = (id: string, type: NodeData['type'] = 'server'): Node<NodeData> => ({
+  id,
+  type,
+  position: { x: 100, y: 100 },
+  data: { label: id, type, status: 'online', services: [] },
+})
+
+describe('integration — createGroup + toggleNodeCollapsed hides children', () => {
+  it('hides parentId children of a collapsed group container', () => {
+    const { result } = renderHook(() => useCanvasStore())
+    act(() => {
+      result.current.addNode(mk('c1'))
+      result.current.addNode(mk('c2'))
+      result.current.createGroup(['c1', 'c2'], 'My Group')
+    })
+    // Find the auto-generated group id.
+    const grp = result.current.nodes.find((n) => n.type === 'group')!
+    expect(grp).toBeDefined()
+    expect(result.current.nodes.find((n) => n.id === 'c1')!.parentId).toBe(grp.id)
+
+    // Pre-collapse: all visible.
+    let info = computeCollapseInfo(result.current.nodes)
+    expect(info.visibleIds.has('c1')).toBe(true)
+    expect(info.visibleIds.has('c2')).toBe(true)
+
+    // Collapse the group via the store action.
+    act(() => result.current.toggleNodeCollapsed(grp.id))
+    expect(result.current.nodes.find((n) => n.id === grp.id)!.data.collapsed).toBe(true)
+
+    info = computeCollapseInfo(result.current.nodes)
+    expect(info.visibleIds.has(grp.id)).toBe(true)
+    expect(info.visibleIds.has('c1')).toBe(false)
+    expect(info.visibleIds.has('c2')).toBe(false)
+    expect(info.hiddenBy.get('c1')).toBe(grp.id)
+  })
+})

frontend/src/utils/__tests__/maskIp.test.ts

@@ -55,6 +55,27 @@ describe('splitIps', () => {
     expect(splitIps('')).toEqual([])
     expect(splitIps('   ')).toEqual([])
   })
+
+  it('splits on semicolons', () => {
+    expect(splitIps('10.0.0.1; 10.0.0.2')).toEqual(['10.0.0.1', '10.0.0.2'])
+  })
+
+  it('splits on newlines', () => {
+    expect(splitIps('10.0.0.1\n10.0.0.2')).toEqual(['10.0.0.1', '10.0.0.2'])
+  })
+
+  it('splits on mixed delimiters', () => {
+    expect(splitIps('10.0.0.1,10.0.0.2; 10.0.0.3\n10.0.0.4')).toEqual([
+      '10.0.0.1',
+      '10.0.0.2',
+      '10.0.0.3',
+      '10.0.0.4',
+    ])
+  })
+
+  it('deduplicates repeated IPs', () => {
+    expect(splitIps('10.0.0.1, 10.0.0.1; 10.0.0.2')).toEqual(['10.0.0.1', '10.0.0.2'])
+  })
 })
 
 describe('primaryIp', () => {

frontend/src/utils/__tests__/themes.test.ts

@@ -4,7 +4,7 @@ import type { NodeType, EdgeType, NodeStatus } from '@/types'
 
 const NODE_TYPES: NodeType[] = [
   'isp', 'router', 'firewall', 'switch', 'server', 'proxmox', 'vm', 'lxc',
-  'nas', 'iot', 'ap', 'camera', 'printer', 'computer', 'cpl', 'docker_host', 'docker_container', 'generic', 'groupRect',
+  'nas', 'iot', 'ap', 'camera', 'printer', 'computer', 'laptop', 'mobile', 'cpl', 'docker_host', 'docker_container', 'generic', 'groupRect',
 ]
 const EDGE_TYPES: EdgeType[] = ['ethernet', 'wifi', 'iot', 'vlan', 'virtual', 'cluster']
 const STATUS_TYPES: NodeStatus[] = ['online', 'offline', 'pending', 'unknown']

frontend/src/utils/__tests__/virtualEdgeParent.test.ts

@@ -0,0 +1,97 @@
+import { describe, it, expect } from 'vitest'
+import { resolveVirtualEdgeParent, getValidParentTypes } from '../virtualEdgeParent'
+
+describe('getValidParentTypes', () => {
+  it('returns container-mode types for lxc', () => {
+    expect(getValidParentTypes('lxc')).toEqual(['proxmox', 'vm', 'lxc', 'docker_host'])
+  })
+
+  it('returns container-mode types for vm', () => {
+    expect(getValidParentTypes('vm')).toEqual(['proxmox', 'vm', 'lxc', 'docker_host'])
+  })
+
+  it('returns docker_host/lxc/vm/proxmox for docker_container', () => {
+    expect(getValidParentTypes('docker_container')).toEqual(['docker_host', 'lxc', 'vm', 'proxmox'])
+  })
+
+  it('returns empty list for types that cannot have a parent', () => {
+    expect(getValidParentTypes('server')).toEqual([])
+    expect(getValidParentTypes('router')).toEqual([])
+    expect(getValidParentTypes('proxmox')).toEqual([])
+    expect(getValidParentTypes('docker_host')).toEqual([])
+  })
+})
+
+describe('resolveVirtualEdgeParent', () => {
+  it('nests lxc under proxmox (container-mode parent)', () => {
+    const res = resolveVirtualEdgeParent(
+      { id: 'lxc1', type: 'lxc' },
+      { id: 'px1', type: 'proxmox' },
+    )
+    expect(res).toEqual({ childId: 'lxc1', parentId: 'px1' })
+  })
+
+  it('nests vm under proxmox regardless of edge direction', () => {
+    const res = resolveVirtualEdgeParent(
+      { id: 'px1', type: 'proxmox' },
+      { id: 'vm1', type: 'vm' },
+    )
+    expect(res).toEqual({ childId: 'vm1', parentId: 'px1' })
+  })
+
+  it('nests docker_container under docker_host', () => {
+    const res = resolveVirtualEdgeParent(
+      { id: 'dc1', type: 'docker_container' },
+      { id: 'dh1', type: 'docker_host' },
+    )
+    expect(res).toEqual({ childId: 'dc1', parentId: 'dh1' })
+  })
+
+  it('nests docker_container under lxc (reverse direction)', () => {
+    const res = resolveVirtualEdgeParent(
+      { id: 'lxc1', type: 'lxc' },
+      { id: 'dc1', type: 'docker_container' },
+    )
+    expect(res).toEqual({ childId: 'dc1', parentId: 'lxc1' })
+  })
+
+  it('nests docker_container under lxc (forward direction)', () => {
+    const res = resolveVirtualEdgeParent(
+      { id: 'dc1', type: 'docker_container' },
+      { id: 'lxc1', type: 'lxc' },
+    )
+    expect(res).toEqual({ childId: 'dc1', parentId: 'lxc1' })
+  })
+
+  it('nests docker_container under vm', () => {
+    const res = resolveVirtualEdgeParent(
+      { id: 'dc1', type: 'docker_container' },
+      { id: 'vm1', type: 'vm' },
+    )
+    expect(res).toEqual({ childId: 'dc1', parentId: 'vm1' })
+  })
+
+  it('nests docker_container under proxmox (reverse direction)', () => {
+    const res = resolveVirtualEdgeParent(
+      { id: 'px1', type: 'proxmox' },
+      { id: 'dc1', type: 'docker_container' },
+    )
+    expect(res).toEqual({ childId: 'dc1', parentId: 'px1' })
+  })
+
+  it('returns null when docker_container links to unsupported parent type', () => {
+    const res = resolveVirtualEdgeParent(
+      { id: 'dc1', type: 'docker_container' },
+      { id: 'srv1', type: 'server' },
+    )
+    expect(res).toBeNull()
+  })
+
+  it('returns null for unrelated type pairs', () => {
+    const res = resolveVirtualEdgeParent(
+      { id: 'srv1', type: 'server' },
+      { id: 'rt1', type: 'router' },
+    )
+    expect(res).toBeNull()
+  })
+})

frontend/src/utils/canvasSerializer.ts

@@ -76,6 +76,9 @@ export function serializeNode(n: Node<NodeData>): Record<string, unknown> {
         ...n.data.custom_colors,
         width: n.measured?.width ?? n.width ?? 360,
         height: n.measured?.height ?? n.height ?? 240,
+        // Stash collapse state inside custom_colors so the API/YAML blob does
+        // not need a new column. Hoisted back to `data.collapsed` on load.
+        collapsed: n.data.collapsed ?? false,
       },
     }
   }
@@ -94,7 +97,13 @@ export function serializeNode(n: Node<NodeData>): Record<string, unknown> {
     notes: n.data.notes ?? null,
     parent_id: n.data.parent_id ?? null,
     container_mode: n.data.container_mode ?? false,
-    custom_colors: n.data.custom_colors ?? null,
+    // Stash collapse state inside the custom_colors blob so the backend's
+    // dict[str, Any] column carries it without a schema change. Hoisted
+    // back to `data.collapsed` on load. Applies to every node type — group
+    // containers, Proxmox hosts, etc. — not just groupRect zones.
+    custom_colors: n.data.collapsed !== undefined
+      ? { ...(n.data.custom_colors ?? {}), collapsed: n.data.collapsed }
+      : (n.data.custom_colors ?? null),
     custom_icon: n.data.custom_icon ?? null,
     cpu_count: n.data.cpu_count ?? null,
     cpu_model: n.data.cpu_model ?? null,
@@ -139,11 +148,15 @@ export function deserializeApiNode(
     const w = (n.custom_colors?.width as number | undefined) ?? 360
     const h = (n.custom_colors?.height as number | undefined) ?? 240
     const z = (n.custom_colors?.z_order as number | undefined) ?? 1
+    // Hoist persisted collapse flag from the custom_colors stash to a
+    // first-class field on NodeData. Tolerates legacy saves that already had
+    // it there from before the type was promoted.
+    const collapsed = Boolean(n.custom_colors?.collapsed)
     return {
       id: n.id,
       type: 'groupRect',
       position: { x: n.pos_x, y: n.pos_y },
-      data: n as unknown as NodeData,
+      data: { ...(n as unknown as NodeData), collapsed },
       width: w,
       height: h,
       zIndex: z - 10,
@@ -155,7 +168,14 @@ export function deserializeApiNode(
     id: n.id,
     type: normalizedType,
     position: { x: n.pos_x, y: n.pos_y },
-    data: { ...n, type: normalizedType, bottom_handles: clampBottomHandles(n.bottom_handles ?? 1) } as unknown as NodeData,
+    // Hoist persisted collapse flag from the custom_colors stash (matches
+    // the symmetric serialize step). Applies to every node type.
+    data: {
+      ...n,
+      type: normalizedType,
+      bottom_handles: clampBottomHandles(n.bottom_handles ?? 1),
+      collapsed: Boolean(n.custom_colors?.collapsed),
+    } as unknown as NodeData,
     ...(n.parent_id && parentIsContainer ? { parentId: n.parent_id, extent: 'parent' as const } : {}),
     ...(['proxmox', 'vm', 'lxc', 'docker_host'].includes(normalizedType) && n.container_mode !== false
       ? { width: n.width ?? 300, height: n.height ?? 200 }

frontend/src/utils/collapseFilter.ts

@@ -0,0 +1,196 @@
+import type { Edge, Node } from '@xyflow/react'
+import type { EdgeData, NodeData } from '@/types'
+
+/**
+ * Collapse model
+ * ──────────────
+ * Two ways a node can collapse and hide what it "contains":
+ *
+ *   1. parentId hierarchy  — `type: 'group'` containers (createGroup) and
+ *      Proxmox container_mode children. Setting `data.collapsed = true` on
+ *      such a node hides every node in its parentId subtree.
+ *
+ *   2. Spatial containment — `type: 'groupRect'` decorative zones drawn
+ *      around nodes. Zones do not parent their contents in React Flow, so
+ *      we hit-test every top-level node's centre against the zone bbox to
+ *      decide what is "inside". Collapsing a zone hides every node whose
+ *      centre lies inside the zone (plus the parentId subtrees of those
+ *      nodes, so e.g. a Proxmox host inside a collapsed zone also takes its
+ *      VMs/LXCs with it).
+ *
+ * `hiddenBy` records which collapsed ancestor hid each node — used by edge
+ * rewiring to redirect a vanished endpoint to the visible zone the user is
+ * actually looking at.
+ */
+
+interface BBox { x: number; y: number; w: number; h: number }
+
+const DEFAULT_NODE_W = 200
+const DEFAULT_NODE_H = 80
+const DEFAULT_ZONE_W = 360
+const DEFAULT_ZONE_H = 240
+
+function bboxOf(n: Node<NodeData>, fallbackW: number, fallbackH: number): BBox {
+  return {
+    x: n.position.x,
+    y: n.position.y,
+    w: n.width ?? fallbackW,
+    h: n.height ?? fallbackH,
+  }
+}
+
+function centerInside(n: Node<NodeData>, b: BBox): boolean {
+  const w = n.width ?? DEFAULT_NODE_W
+  const h = n.height ?? DEFAULT_NODE_H
+  const cx = n.position.x + w / 2
+  const cy = n.position.y + h / 2
+  return cx >= b.x && cx <= b.x + b.w && cy >= b.y && cy <= b.y + b.h
+}
+
+/**
+ * Node ids whose centre lies inside the given zone, excluding the zone
+ * itself and any node that is a React Flow child (parentId set — those are
+ * positioned relative to their parent, not in absolute canvas coordinates).
+ */
+export function getZoneSpatialChildren(
+  zone: Node<NodeData>,
+  nodes: Node<NodeData>[],
+): string[] {
+  const zb = bboxOf(zone, DEFAULT_ZONE_W, DEFAULT_ZONE_H)
+  const out: string[] = []
+  for (const n of nodes) {
+    if (n.id === zone.id) continue
+    if (n.parentId) continue
+    if (centerInside(n, zb)) out.push(n.id)
+  }
+  return out
+}
+
+function buildChildrenByParent(nodes: Node<NodeData>[]): Map<string, string[]> {
+  const m = new Map<string, string[]>()
+  for (const n of nodes) {
+    if (!n.parentId) continue
+    const arr = m.get(n.parentId)
+    if (arr) arr.push(n.id)
+    else m.set(n.parentId, [n.id])
+  }
+  return m
+}
+
+export interface CollapseInfo {
+  /** Ids the canvas should render. */
+  visibleIds: Set<string>
+  /** For each hidden id, the id of the collapsed ancestor that hid it. */
+  hiddenBy: Map<string, string>
+}
+
+/**
+ * Single source of truth for visibility under collapse. O(n) over nodes
+ * (the spatial pass is O(z·n) where z is the number of collapsed zones).
+ */
+export function computeCollapseInfo(nodes: Node<NodeData>[]): CollapseInfo {
+  const childrenByParent = buildChildrenByParent(nodes)
+  const hidden = new Set<string>()
+  const hiddenBy = new Map<string, string>()
+
+  const hideSubtree = (rootId: string, hider: string) => {
+    const queue = [...(childrenByParent.get(rootId) ?? [])]
+    while (queue.length > 0) {
+      const id = queue.shift()!
+      if (hidden.has(id)) continue
+      hidden.add(id)
+      if (!hiddenBy.has(id)) hiddenBy.set(id, hider)
+      const sub = childrenByParent.get(id)
+      if (sub) queue.push(...sub)
+    }
+  }
+
+  // Pass 1 — parentId-based collapse (real containers).
+  for (const n of nodes) {
+    if (n.data.collapsed) hideSubtree(n.id, n.id)
+  }
+
+  // Pass 2 — spatial collapse (groupRect zones).
+  for (const n of nodes) {
+    if (n.data.type !== 'groupRect') continue
+    if (!n.data.collapsed) continue
+    const contained = getZoneSpatialChildren(n, nodes)
+    for (const id of contained) {
+      if (!hidden.has(id)) {
+        hidden.add(id)
+        if (!hiddenBy.has(id)) hiddenBy.set(id, n.id)
+      }
+      hideSubtree(id, n.id)
+    }
+  }
+
+  const visibleIds = new Set<string>()
+  for (const n of nodes) {
+    if (!hidden.has(n.id)) visibleIds.add(n.id)
+  }
+  return { visibleIds, hiddenBy }
+}
+
+/**
+ * Convenience wrapper kept for call sites that only need the visible set.
+ */
+export function getVisibleNodeIds(nodes: Node<NodeData>[]): Set<string> {
+  return computeCollapseInfo(nodes).visibleIds
+}
+
+/**
+ * Rewire edges so that any endpoint inside a collapsed subtree (parentId or
+ * spatial) is replaced with the nearest visible ancestor. See module
+ * docstring for the full rationale.
+ *
+ *  - Both endpoints visible            → edge kept as-is.
+ *  - One endpoint hidden                → endpoint replaced by its nearest
+ *                                         visible ancestor; edge surfaces
+ *                                         as a stub on the collapsed zone.
+ *  - Both endpoints hidden under the
+ *    same visible ancestor              → dropped (would be a self-loop).
+ *  - Parallel rewires to the same pair  → de-duplicated; one stub kept.
+ *    (Prevents a 20-device mesh from rendering 20 stacked stubs.)
+ *  - Endpoint with no visible ancestor  → dropped.
+ */
+export function rewireEdgesForCollapse(
+  edges: Edge<EdgeData>[],
+  nodes: Node<NodeData>[],
+  visibleIds: Set<string>,
+  hiddenBy?: Map<string, string>,
+): Edge<EdgeData>[] {
+  // If the caller already computed hiddenBy (CanvasContainer path), reuse
+  // it. Otherwise recompute — keeps the helper callable from tests without
+  // forcing them to thread the second map through.
+  const hb = hiddenBy ?? computeCollapseInfo(nodes).hiddenBy
+
+  const nearestVisible = (id: string): string | null => {
+    let cur: string | undefined = id
+    const guard = new Set<string>()
+    while (cur !== undefined) {
+      if (visibleIds.has(cur)) return cur
+      if (guard.has(cur)) return null
+      guard.add(cur)
+      cur = hb.get(cur)
+    }
+    return null
+  }
+
+  const seen = new Set<string>()
+  const out: Edge<EdgeData>[] = []
+  for (const e of edges) {
+    const src = nearestVisible(e.source)
+    const tgt = nearestVisible(e.target)
+    if (src === null || tgt === null) continue
+    if (src === tgt) continue
+    const key = `${src}->${tgt}`
+    if (seen.has(key)) continue
+    seen.add(key)
+    if (src === e.source && tgt === e.target) {
+      out.push(e)
+    } else {
+      out.push({ ...e, source: src, target: tgt, sourceHandle: null, targetHandle: null })
+    }
+  }
+  return out
+}

frontend/src/utils/maskIp.ts

@@ -25,16 +25,17 @@ function maskSingle(ip: string): string {
  */
 export function maskIp(ip: string): string {
   if (!ip) return ip
-  return ip.split(',').map(maskSingle).join(', ')
+  return splitIps(ip).map(maskSingle).join(', ')
 }
 
 /**
- * Split a comma-separated IP string into an array of trimmed values.
- * Empty string returns [].
+ * Split an IP string into trimmed values. Accepts comma, semicolon, or newline
+ * delimiters (or any combination). Duplicates removed, empty entries dropped.
  */
 export function splitIps(ip: string): string[] {
   if (!ip?.trim()) return []
-  return ip.split(',').map((s) => s.trim()).filter(Boolean)
+  const parts = ip.split(/[\n,;]+/).map((s) => s.trim()).filter(Boolean)
+  return parts.filter((v, i) => parts.indexOf(v) === i)
 }
 
 /**

frontend/src/utils/nodeIcons.ts

@@ -24,7 +24,7 @@ import {
   // Communications
   Mail, MessageSquare, Phone,
   // Misc devices
-  Printer, Smartphone, Search, Filter, BookOpen, PlugZap, Type,
+  Printer, Smartphone, Laptop, Search, Filter, BookOpen, PlugZap, Type,
 } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
 
@@ -50,6 +50,7 @@ export const ICON_REGISTRY: IconEntry[] = [
   { key: 'wifi',       label: 'Access Point',         category: 'Infrastructure', icon: Wifi },
   { key: 'circle',     label: 'Generic',              category: 'Infrastructure', icon: Circle },
   { key: 'monitor',    label: 'Workstation',          category: 'Infrastructure', icon: Monitor },
+  { key: 'laptop',     label: 'Laptop',               category: 'Infrastructure', icon: Laptop },
   { key: 'smartphone', label: 'Phone / Mobile',       category: 'Infrastructure', icon: Smartphone },
   { key: 'printer',    label: 'Printer',              category: 'Infrastructure', icon: Printer },
   { key: 'plugzap',    label: 'CPL / Powerline',      category: 'Infrastructure', icon: PlugZap },
@@ -167,6 +168,8 @@ export const NODE_TYPE_DEFAULT_ICONS: Record<NodeType, LucideIcon> = {
   camera:       Cctv,
   printer:      Printer,
   computer:     Monitor,
+  laptop:       Laptop,
+  mobile:       Smartphone,
   cpl:          PlugZap,
   docker_host:       Anchor,
   docker_container:  Package,

frontend/src/utils/themes.ts

@@ -56,6 +56,8 @@ export const THEMES: Record<ThemeId, ThemePreset> = {
         camera:       { border: '#8b949e', icon: '#8b949e' },
         printer:      { border: '#8b949e', icon: '#8b949e' },
         computer:     { border: '#a855f7', icon: '#a855f7' },
+        laptop:       { border: '#a855f7', icon: '#a855f7' },
+        mobile:       { border: '#ec4899', icon: '#ec4899' },
         cpl:          { border: '#e3b341', icon: '#e3b341' },
         docker_host:       { border: '#2496ED', icon: '#2496ED' },
         docker_container:  { border: '#0ea5e9', icon: '#0ea5e9' },
@@ -117,6 +119,8 @@ export const THEMES: Record<ThemeId, ThemePreset> = {
         camera:        { border: '#94a3b8', icon: '#94a3b8' },
         printer:       { border: '#94a3b8', icon: '#94a3b8' },
         computer:      { border: '#c084fc', icon: '#c084fc' },
+        laptop:        { border: '#c084fc', icon: '#c084fc' },
+        mobile:        { border: '#ec4899', icon: '#ec4899' },
         cpl:           { border: '#fbbf24', icon: '#fbbf24' },
         docker_host:       { border: '#2496ED', icon: '#2496ED' },
         docker_container:  { border: '#38bdf8', icon: '#38bdf8' },
@@ -178,6 +182,8 @@ export const THEMES: Record<ThemeId, ThemePreset> = {
         camera:        { border: '#6b7280', icon: '#6b7280' },
         printer:       { border: '#6b7280', icon: '#6b7280' },
         computer:      { border: '#7c3aed', icon: '#7c3aed' },
+        laptop:        { border: '#7c3aed', icon: '#7c3aed' },
+        mobile:        { border: '#db2777', icon: '#db2777' },
         cpl:           { border: '#b45309', icon: '#b45309' },
         docker_host:       { border: '#2496ED', icon: '#2496ED' },
         docker_container:  { border: '#0369a1', icon: '#0369a1' },
@@ -239,6 +245,8 @@ export const THEMES: Record<ThemeId, ThemePreset> = {
         camera:       { border: '#8888ff', icon: '#8888ff' },
         printer:      { border: '#8888ff', icon: '#8888ff' },
         computer:     { border: '#ff00ff', icon: '#ff00ff' },
+        laptop:       { border: '#ff00ff', icon: '#ff00ff' },
+        mobile:       { border: '#ff3399', icon: '#ff3399' },
         cpl:          { border: '#ffff00', icon: '#ffff00' },
         docker_host:       { border: '#00aaff', icon: '#00aaff' },
         docker_container:  { border: '#00ddff', icon: '#00ddff' },
@@ -300,6 +308,8 @@ export const THEMES: Record<ThemeId, ThemePreset> = {
         camera:       { border: '#005500', icon: '#005500' },
         printer:      { border: '#005500', icon: '#005500' },
         computer:     { border: '#008822', icon: '#008822' },
+        laptop:       { border: '#008822', icon: '#008822' },
+        mobile:       { border: '#00cc66', icon: '#00cc66' },
         cpl:          { border: '#66ff33', icon: '#66ff33' },
         docker_host:       { border: '#00cc88', icon: '#00cc88' },
         docker_container:  { border: '#00aacc', icon: '#00aacc' },
@@ -361,6 +371,8 @@ export const THEMES: Record<ThemeId, ThemePreset> = {
         camera:           { border: '#8b949e', icon: '#8b949e' },
         printer:          { border: '#8b949e', icon: '#8b949e' },
         computer:         { border: '#a855f7', icon: '#a855f7' },
+        laptop:           { border: '#a855f7', icon: '#a855f7' },
+        mobile:           { border: '#ec4899', icon: '#ec4899' },
         cpl:              { border: '#e3b341', icon: '#e3b341' },
         docker_host:      { border: '#2496ED', icon: '#2496ED' },
         docker_container: { border: '#0ea5e9', icon: '#0ea5e9' },

frontend/src/utils/virtualEdgeParent.ts

@@ -0,0 +1,48 @@
+import type { NodeData } from '@/types'
+
+export type NodeType = NodeData['type']
+
+const CONTAINER_MODE_TYPES = new Set<NodeType>(['proxmox', 'vm', 'lxc', 'docker_host'])
+const DOCKER_CONTAINER_PARENT_TYPES = new Set<NodeType>(['docker_host', 'lxc', 'vm', 'proxmox'])
+
+export interface VirtualEdgeEndpoint {
+  id: string
+  type: NodeType
+}
+
+export interface ParentAssignment {
+  childId: string
+  parentId: string
+}
+
+export function getValidParentTypes(childType: NodeType): NodeType[] {
+  if (childType === 'lxc' || childType === 'vm') {
+    return ['proxmox', 'vm', 'lxc', 'docker_host']
+  }
+  if (childType === 'docker_container') {
+    return ['docker_host', 'lxc', 'vm', 'proxmox']
+  }
+  return []
+}
+
+export function resolveVirtualEdgeParent(
+  source: VirtualEdgeEndpoint,
+  target: VirtualEdgeEndpoint,
+): ParentAssignment | null {
+  const { type: srcType, id: srcId } = source
+  const { type: tgtType, id: tgtId } = target
+
+  if ((srcType === 'lxc' || srcType === 'vm') && CONTAINER_MODE_TYPES.has(tgtType)) {
+    return { childId: srcId, parentId: tgtId }
+  }
+  if (CONTAINER_MODE_TYPES.has(srcType) && (tgtType === 'lxc' || tgtType === 'vm')) {
+    return { childId: tgtId, parentId: srcId }
+  }
+  if (srcType === 'docker_container' && DOCKER_CONTAINER_PARENT_TYPES.has(tgtType)) {
+    return { childId: srcId, parentId: tgtId }
+  }
+  if (tgtType === 'docker_container' && DOCKER_CONTAINER_PARENT_TYPES.has(srcType)) {
+    return { childId: tgtId, parentId: srcId }
+  }
+  return null
+}

scripts/lxc-mcp-install.sh

@@ -0,0 +1,164 @@
+#!/bin/bash
+# Install / enable the Homelable MCP server as a systemd service.
+#
+# Run interactively as root, inside an LXC or any Debian/Ubuntu host.
+# Typical Proxmox VE flow: create the LXC via the community-scripts/ProxmoxVE
+# helper, then run this script inside that LXC.
+#
+# Idempotent: re-running is safe. If mcp/.env already exists, the script
+# keeps it untouched and only refreshes the venv + systemd unit.
+#
+# Optional env vars (override defaults / skip the matching prompt):
+#   INSTALL_DIR     repo root (default: /opt/homelable)
+#   REPO_URL        clone URL if $INSTALL_DIR is empty (default: https://github.com/Pouzor/homelable.git)
+#   REPO_REF        branch/tag/commit when cloning (default: main)
+#   SERVICE_USER    systemd User= (default: homelable)
+#   MCP_PORT        listen port (default: 8001)
+#   MCP_API_KEY     client → MCP key (default: prompt, auto-gen on empty)
+#   MCP_SERVICE_KEY MCP → backend key (default: prompt, auto-gen on empty; must match backend .env)
+#   BACKEND_URL     backend base URL (default: http://127.0.0.1:8000)
+set -euo pipefail
+
+INSTALL_DIR="${INSTALL_DIR:-/opt/homelable}"
+REPO_URL="${REPO_URL:-https://github.com/Pouzor/homelable.git}"
+REPO_REF="${REPO_REF:-main}"
+SERVICE_USER="${SERVICE_USER:-homelable}"
+SERVICE_NAME="homelable-mcp"
+MCP_PORT="${MCP_PORT:-8001}"
+DEFAULT_BACKEND_URL="http://127.0.0.1:8000"
+
+log()  { printf '\033[1;36m==>\033[0m %s\n' "$*"; }
+warn() { printf '\033[1;33m!!\033[0m %s\n' "$*" >&2; }
+fail() { printf '\033[1;31mxx\033[0m %s\n' "$*" >&2; exit 1; }
+
+[[ $EUID -eq 0 ]] || fail "Run as root (sudo bash $0)."
+
+log "Installing OS dependencies (git, python3-venv, curl)"
+apt-get update -qq
+DEBIAN_FRONTEND=noninteractive apt-get install -y -qq \
+  git python3 python3-venv python3-pip curl iproute2 >/dev/null
+
+MCP_DIR="$INSTALL_DIR/mcp"
+if [[ ! -d "$MCP_DIR" ]]; then
+  log "Cloning $REPO_URL ($REPO_REF) → $INSTALL_DIR"
+  mkdir -p "$(dirname "$INSTALL_DIR")"
+  git clone --depth 1 --branch "$REPO_REF" "$REPO_URL" "$INSTALL_DIR"
+fi
+[[ -f "$MCP_DIR/requirements.txt" ]] || fail "Missing $MCP_DIR/requirements.txt — repo layout unexpected."
+
+if ss -ltn 2>/dev/null | awk '{print $4}' | grep -qE "[:.]${MCP_PORT}$"; then
+  warn "Port $MCP_PORT already in use. If it's a previous $SERVICE_NAME instance this is fine; otherwise abort and free the port."
+fi
+
+if ! id -u "$SERVICE_USER" >/dev/null 2>&1; then
+  log "Creating service user '$SERVICE_USER'"
+  useradd --system --home "$INSTALL_DIR" --shell /usr/sbin/nologin "$SERVICE_USER"
+fi
+
+ENV_FILE="$MCP_DIR/.env"
+gen_key() { python3 -c "import secrets;print('$1' + secrets.token_hex(24))"; }
+
+if [[ -f "$ENV_FILE" ]]; then
+  log ".env already present at $ENV_FILE — keeping existing values"
+else
+  [[ -f "$MCP_DIR/.env.example" ]] || fail "Missing $MCP_DIR/.env.example"
+  log "No .env found — generating one (press Enter to accept defaults)"
+
+  api_key="${MCP_API_KEY:-}"
+  svc_key="${MCP_SERVICE_KEY:-}"
+  backend_url="${BACKEND_URL:-}"
+
+  if [[ -z "$api_key" ]]; then
+    default_api_key="$(gen_key mcp_sk_)"
+    read -rp "MCP_API_KEY (client → MCP) [default: auto-generate]: " api_key
+    api_key="${api_key:-$default_api_key}"
+  fi
+  if [[ -z "$svc_key" ]]; then
+    default_svc_key="$(gen_key svc_)"
+    read -rp "MCP_SERVICE_KEY (MCP → backend, must match backend .env) [default: auto-generate]: " svc_key
+    svc_key="${svc_key:-$default_svc_key}"
+  fi
+  if [[ -z "$backend_url" ]]; then
+    read -rp "BACKEND_URL [$DEFAULT_BACKEND_URL]: " backend_url
+    backend_url="${backend_url:-$DEFAULT_BACKEND_URL}"
+  fi
+
+  umask 077
+  cat >"$ENV_FILE" <<EOF
+MCP_API_KEY=$api_key
+MCP_SERVICE_KEY=$svc_key
+BACKEND_URL=$backend_url
+EOF
+  log "Wrote $ENV_FILE (mode 600)"
+  warn "If the backend runs elsewhere, set the SAME MCP_SERVICE_KEY in its .env."
+fi
+
+VENV="$MCP_DIR/.venv"
+if [[ ! -d "$VENV" ]]; then
+  log "Creating venv at $VENV"
+  python3 -m venv "$VENV"
+fi
+log "Installing Python deps"
+"$VENV/bin/pip" install --quiet --upgrade pip
+"$VENV/bin/pip" install --quiet -r "$MCP_DIR/requirements.txt"
+
+chown -R "$SERVICE_USER":"$SERVICE_USER" "$MCP_DIR"
+chmod 600 "$ENV_FILE"
+
+UNIT="/etc/systemd/system/${SERVICE_NAME}.service"
+log "Writing $UNIT"
+cat >"$UNIT" <<EOF
+[Unit]
+Description=Homelable MCP server
+After=network-online.target
+Wants=network-online.target
+
+[Service]
+Type=simple
+User=$SERVICE_USER
+WorkingDirectory=$MCP_DIR
+EnvironmentFile=$ENV_FILE
+ExecStart=$VENV/bin/uvicorn app.main:app --host 0.0.0.0 --port $MCP_PORT
+Restart=on-failure
+RestartSec=5
+
+[Install]
+WantedBy=multi-user.target
+EOF
+
+systemctl daemon-reload
+systemctl enable --now "$SERVICE_NAME"
+systemctl restart "$SERVICE_NAME"
+
+log "Waiting for MCP to come up on :$MCP_PORT"
+ok=0
+for _ in 1 2 3 4 5 6 7 8 9 10; do
+  if curl -fsS "http://127.0.0.1:${MCP_PORT}/health" >/dev/null 2>&1; then
+    ok=1; break
+  fi
+  sleep 1
+done
+if [[ "$ok" -ne 1 ]]; then
+  warn "MCP did not respond on /health within 10s. Check: journalctl -u $SERVICE_NAME -n 50"
+else
+  log "MCP server is up."
+fi
+
+LXC_IP="$(hostname -I 2>/dev/null | awk '{print $1}')"
+API_KEY_VALUE="$(grep -E '^MCP_API_KEY=' "$ENV_FILE" | cut -d= -f2-)"
+
+cat <<EOF
+
+----------------------------------------------------------------
+MCP server installed.
+
+  Service:     $SERVICE_NAME  (systemctl status $SERVICE_NAME)
+  Listen:      http://${LXC_IP:-<lxc-ip>}:${MCP_PORT}/mcp
+  Env file:    $ENV_FILE
+  Logs:        journalctl -u $SERVICE_NAME -f
+
+Claude Code client setup:
+  claude mcp add --transport sse homelable http://${LXC_IP:-<lxc-ip>}:${MCP_PORT}/mcp \\
+    --header "X-API-Key: $API_KEY_VALUE"
+----------------------------------------------------------------
+EOF