Merge pull request #246 from Pouzor/release/2.6.1

Release 2.6.1: Z-Wave manual node type + standalone multi-canvas

.env.example

@@ -14,6 +14,15 @@ AUTH_PASSWORD_HASH='$2b$12$RtMbyw17l4N5UGzeXMNAWuzCaVV.XFBY7ZetWheQhxcBDcxahapkG
 # Scanner — JSON array of CIDR ranges to scan
 SCANNER_RANGES=["192.168.1.0/24"]
 
+# Deep scan (optional) — extra nmap port ranges + HTTP probe for service ID on
+# custom ports. Defaults below are overridable per-scan from the scan dialog.
+# SCANNER_HTTP_RANGES: JSON array of port specs, each a single port "N" or an
+# inclusive range "N-M" (1–65535, N <= M). Not CIDRs, not bare ints.
+# Example: SCANNER_HTTP_RANGES=["8080","9000-9100"]
+SCANNER_HTTP_RANGES=[]
+SCANNER_HTTP_PROBE_ENABLED=false
+SCANNER_HTTP_VERIFY_TLS=false
+
 # Status checker interval in seconds
 STATUS_CHECKER_INTERVAL=60
 
@@ -28,3 +37,9 @@ MCP_SERVICE_KEY=svc_changeme
 # Off by default. Set to a random secret to enable.
 # Generate: python3 -c "import secrets; print(secrets.token_urlsafe(32))"
 # LIVEVIEW_KEY=
+
+# Gethomepage widget — read-only stats at /api/v1/stats/summary
+# Off by default. Set to a random secret to enable; clients must send
+# the same value in the `X-API-Key` header.
+# Generate: python3 -c "import secrets; print(secrets.token_urlsafe(32))"
+# HOMEPAGE_API_KEY=

.github/workflows/docker-ci.yml

@@ -6,6 +6,9 @@ on:
   pull_request:
     branches: [main]
 
+permissions:
+  contents: read
+
 jobs:
   smoke-and-integration:
     runs-on: ubuntu-latest

.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: .
+          context: ${{ matrix.context }}
-          file: ${{ matrix.dockerfile }}
+          file: ${{ matrix.context }}/${{ matrix.dockerfile }}
           platforms: linux/amd64,linux/arm64
           push: true
           tags: ${{ steps.meta.outputs.tags }}

.github/workflows/quality.yml

@@ -6,6 +6,9 @@ on:
   pull_request:
     branches: [main]
 
+permissions:
+  contents: read
+
 jobs:
   lint-scripts:
     runs-on: ubuntu-latest

.github/workflows/security.yml

@@ -8,6 +8,9 @@ on:
   schedule:
     - cron: '0 9 * * 1'  # Weekly on Monday
 
+permissions:
+  contents: read
+
 jobs:
   secrets-scan:
     runs-on: ubuntu-latest

.gitignore

@@ -46,6 +46,7 @@ htmlcov/
 *.db-shm
 *.db-wal
 *.db.back
+*.db.back-*
 
 # Docker
 .docker/

README.md

@@ -1,13 +1,15 @@
 # Homelable
 
-Homelable is a self-hosted infrastructure visualization solution. It provides a network scanning feature to accelerate the identification of machines and services deployed on your local infrastructure.
+Homelable is a self-hosted infrastructure visualization solution. It provides a network/zigbee scanning feature to accelerate the identification of machines, devices and services deployed on your local infrastructure.
 
-Homelable also offers a healthcheck system (WIP) through multiple methods (ping/TCP, /health API, etc.) to get a global overview of online/offline services.
+Homelable also offers a healthcheck system through multiple methods (ping/TCP, /health API, etc.) to get a global overview of online/offline services.
 
 You can also select some pre-built design styles, or personalize each device in your diagram.
 
 If you just like the design, you can only run the frontend and export your design as PNG.
 
+If you are running  <img width="35" height="35" align="middle" alt="New_Home_Assistant_logo" src="https://github.com/user-attachments/assets/3bb17686-c706-40ce-a2d3-57e02378f37c" />  Homeassistant, check the [Homelable HA version](https://github.com/Pouzor/homelable-hacs) (via HACS)
+
 
 ---
 
@@ -16,8 +18,9 @@ If you just like the design, you can only run the frontend and export your desig
 <p align="center">
   <img src="docs/homelable1.png" alt="Homelable canvas overview" width="100%" />
   <img src="docs/homelable2.png" alt="Homelable node detail" width="100%" />
-  <img src="docs/homelable3.png" alt="Homelable sidebar and scan" width="48%" />
   <img src="docs/homelable4.png" alt="Homelable edit pannel" width="48%" />
+  <img width="48%" alt="Homelable Zigbee Network" src="https://github.com/user-attachments/assets/06caab68-6637-4dda-ab16-7e83f63d3972" />
+
 </p>
 
 ---
@@ -37,6 +40,20 @@ The scanner runs `nmap -sV --open` on your configured CIDR ranges and populates
 To save you time when mapping your infrastructure, Homlable can scan your network and report all the services it detects. It can also identify them, saving you even more time.
 Click **Scan Network** in the sidebar. The Scan History tab opens automatically and refreshes every 3 seconds until the scan completes.
 
+### Deep scan (custom ports)
+
+By default the scanner only probes nmap's standard port set. To fingerprint services on non-standard ports, enable the deep scan via `.env` (all options are overridable per-scan from the scan dialog):
+
+```env
+# JSON array of port specs — each entry is a single port "N" or an inclusive
+# range "N-M" (1–65535, N <= M). These are ports, not CIDRs or bare integers.
+SCANNER_HTTP_RANGES=["8080","9000-9100"]
+SCANNER_HTTP_PROBE_ENABLED=true   # send an HTTP probe to those ports for service ID
+SCANNER_HTTP_VERIFY_TLS=false     # verify TLS certs on the HTTP probe
+```
+
+The listed ports are appended to nmap's `-p` spec. Invalid entries (out-of-range, malformed, or reversed ranges) are silently skipped.
+
 ### macOS / root privileges
 
 Some nmap scan types (SYN scan, OS detection) require root. If the scan fails with a permissions error, run it manually with sudo using the included script:
@@ -106,6 +123,37 @@ LQI (Link Quality Indicator) is stored as a node property.
 
 ---
 
+## Z-Wave Import
+
+Homelable can also import your **Z-Wave** network from **Z-Wave JS UI** (formerly `zwavejs2mqtt`) over the same MQTT broker, dropping each node on the canvas as a typed node.
+
+### Prerequisites
+
+- A running **MQTT broker** (e.g. Mosquitto) accessible from the Homelable host
+- **Z-Wave JS UI** connected to the broker with its MQTT gateway enabled and at least one node included
+
+### Usage
+
+1. Click **Z-Wave Import** in the left sidebar (below "Zigbee Import")
+2. Enter your broker host, port (default `1883`), optional credentials, MQTT prefix (default `zwave`), and gateway name (default `zwavejs2mqtt`)
+3. Click **Test Connection** to verify reachability
+4. Choose a target — **Pending section** or **Canvas directly** — then **Import to Pending** / **Fetch Devices**
+5. Select the devices you want from the grouped list (Controller / Router / End Device) and click **Add N to Canvas**
+
+### Node Types
+
+| Type | Z-Wave Role | Icon |
+|------|-------------|------|
+| `zwave_coordinator` | Controller | Network hub |
+| `zwave_router` | Routing (mains-powered) node | Radio |
+| `zwave_enddevice` | End Device (battery) | Antenna |
+
+Hierarchy is set automatically: controller → routers → end devices (`parent_id`), derived from each node's neighbor list. Z-Wave has no LQI, so that property is omitted.
+
+> **Full documentation:** [docs/zwave-import.md](./docs/zwave-import.md)
+
+---
+
 ## Live View (read-only public canvas)
 
 Live View lets you share a read-only snapshot of your canvas with anyone on your network — no login required. It is disabled by default.
@@ -131,6 +179,60 @@ The page shows your canvas in pan/zoom-only mode — no editing, no credentials
 
 ---
 
+## Gethomepage Widget (read-only stats)
+
+Homelable can expose a small JSON stats endpoint that [gethomepage](https://gethomepage.dev) consumes through its built-in `customapi` widget. Disabled by default.
+
+### Activation
+
+Add `HOMEPAGE_API_KEY` to your `.env`:
+
+`HOMEPAGE_API_KEY=your-secret-key`
+
+Restart the backend (`docker compose restart backend`).
+
+### Endpoint
+
+`GET /api/v1/stats/summary` — requires header `X-API-Key: your-secret-key`. Returns:
+
+```json
+{
+  "nodes": 12,
+  "online": 9,
+  "offline": 2,
+  "unknown": 1,
+  "pending_devices": 3,
+  "zigbee_devices": 5,
+  "last_scan_at": "2026-05-14T10:00:00+00:00"
+}
+```
+
+### gethomepage `services.yaml` snippet
+
+```yaml
+- Homelab:
+    - Homelable:
+        icon: mdi-lan
+        href: http://homelable.local:3000
+        widget:
+          type: customapi
+          url: http://homelable.local:8000/api/v1/stats/summary
+          method: GET
+          headers:
+            X-API-Key: your-secret-key
+          mappings:
+            - field: nodes           ; label: Nodes
+            - field: online          ; label: Online
+            - field: offline         ; label: Offline
+            - field: pending_devices ; label: Pending
+            - field: zigbee_devices  ; label: Zigbee
+            - field: last_scan_at    ; label: Last scan
+```
+
+The backend port (`8000`) must be reachable from your gethomepage container.
+
+---
+
 ## MCP Server (AI Integration) (optional)
 
 Homelable can exposes a [Model Context Protocol](https://modelcontextprotocol.io) server so any MCP-compatible AI client (Claude Code, Claude Desktop, Open WebUI…) can read your homelab topology and act on it.
@@ -166,6 +268,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.1
+2.6.1

backend/app/api/routes/canvas.py

@@ -1,13 +1,14 @@
+import uuid
 from datetime import datetime, timezone
 from typing import Any
 
-from fastapi import APIRouter, Depends
+from fastapi import APIRouter, Depends, Query
 from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession
 
 from app.api.deps import get_current_user
 from app.db.database import get_db
-from app.db.models import CanvasState, Edge, Node
+from app.db.models import CanvasState, Design, Edge, Node
 from app.schemas.canvas import CanvasSaveRequest, CanvasStateResponse
 from app.schemas.edges import EdgeResponse
 from app.schemas.nodes import NodeResponse
@@ -16,10 +17,20 @@ router = APIRouter()
 
 
 @router.get("", response_model=CanvasStateResponse)
-async def load_canvas(db: AsyncSession = Depends(get_db), _: str = Depends(get_current_user)) -> CanvasStateResponse:
+async def load_canvas(
-    nodes = (await db.execute(select(Node))).scalars().all()
+    design_id: str | None = Query(None, description="Design ID to load; uses first design if omitted"),
-    edges = (await db.execute(select(Edge))).scalars().all()
+    db: AsyncSession = Depends(get_db),
-    state = await db.get(CanvasState, 1)
+    _: str = Depends(get_current_user),
+) -> CanvasStateResponse:
+    if design_id is None:
+        first = (await db.execute(select(Design).order_by(Design.created_at).limit(1))).scalar()
+        design_id = first.id if first else None
+    if design_id is None:
+        return CanvasStateResponse(nodes=[], edges=[], viewport={"x": 0, "y": 0, "zoom": 1}, custom_style=None)
+
+    nodes = (await db.execute(select(Node).where(Node.design_id == design_id))).scalars().all()
+    edges = (await db.execute(select(Edge).where(Edge.design_id == design_id))).scalars().all()
+    state = await db.get(CanvasState, design_id)
     viewport: dict[str, Any] = state.viewport if state else {"x": 0, "y": 0, "zoom": 1}
     return CanvasStateResponse(
         nodes=[NodeResponse.model_validate(n) for n in nodes],
@@ -32,18 +43,28 @@ async def load_canvas(db: AsyncSession = Depends(get_db), _: str = Depends(get_c
 @router.post("/save")
 async def save_canvas(
     body: CanvasSaveRequest, db: AsyncSession = Depends(get_db), _: str = Depends(get_current_user)
-) -> dict[str, bool]:
+) -> dict[str, bool | str]:
+    design_id = body.design_id
+    if design_id is None:
+        first = (await db.execute(select(Design).order_by(Design.created_at).limit(1))).scalar()
+        design_id = first.id if first else None
+    if design_id is None:
+        new_design = Design(id=str(uuid.uuid4()), name="Network Topology", design_type="network")
+        db.add(new_design)
+        await db.flush()
+        design_id = new_design.id
+
     incoming_node_ids = {n.id for n in body.nodes}
     incoming_edge_ids = {e.id for e in body.edges}
 
-    # Delete nodes removed from canvas
+    # Delete nodes removed from canvas (only within this design)
-    existing_nodes = (await db.execute(select(Node))).scalars().all()
+    existing_nodes = (await db.execute(select(Node).where(Node.design_id == design_id))).scalars().all()
     for node in existing_nodes:
         if node.id not in incoming_node_ids:
             await db.delete(node)
 
-    # Delete edges removed from canvas
+    # Delete edges removed from canvas (only within this design)
-    existing_edges = (await db.execute(select(Edge))).scalars().all()
+    existing_edges = (await db.execute(select(Edge).where(Edge.design_id == design_id))).scalars().all()
     for edge in existing_edges:
         if edge.id not in incoming_edge_ids:
             await db.delete(edge)
@@ -53,29 +74,33 @@ async def save_canvas(
     # Upsert nodes
     for node_data in body.nodes:
         db_node = await db.get(Node, node_data.id)
+        payload = node_data.model_dump()
+        payload["design_id"] = design_id
         if db_node:
-            for field, value in node_data.model_dump().items():
+            for field, value in payload.items():
                 setattr(db_node, field, value)
         else:
-            db.add(Node(**node_data.model_dump()))
+            db.add(Node(**payload))
 
     # Upsert edges
     for edge_data in body.edges:
         db_edge = await db.get(Edge, edge_data.id)
+        payload = edge_data.model_dump()
+        payload["design_id"] = design_id
         if db_edge:
-            for field, value in edge_data.model_dump().items():
+            for field, value in payload.items():
                 setattr(db_edge, field, value)
         else:
-            db.add(Edge(**edge_data.model_dump()))
+            db.add(Edge(**payload))
 
     # Upsert viewport + custom style
-    state = await db.get(CanvasState, 1)
+    state = await db.get(CanvasState, design_id)
     if state:
         state.viewport = body.viewport
         state.custom_style = body.custom_style
         state.saved_at = datetime.now(timezone.utc)
     else:
-        db.add(CanvasState(id=1, viewport=body.viewport, custom_style=body.custom_style))
+        db.add(CanvasState(design_id=design_id, viewport=body.viewport, custom_style=body.custom_style))
 
     await db.commit()
     return {"saved": True}

backend/app/api/routes/designs.py

@@ -0,0 +1,81 @@
+from fastapi import APIRouter, Depends, HTTPException
+from sqlalchemy import select
+from sqlalchemy.ext.asyncio import AsyncSession
+
+from app.api.deps import get_current_user
+from app.db.database import get_db
+from app.db.models import CanvasState, Design, Edge, Node
+from app.schemas.designs import DesignCreate, DesignResponse, DesignUpdate
+
+router = APIRouter()
+
+
+@router.get("", response_model=list[DesignResponse])
+async def list_designs(
+    db: AsyncSession = Depends(get_db),
+    _: str = Depends(get_current_user),
+) -> list[DesignResponse]:
+    designs = (await db.execute(select(Design).order_by(Design.created_at))).scalars().all()
+    return [DesignResponse.model_validate(d) for d in designs]
+
+
+@router.post("", response_model=DesignResponse, status_code=201)
+async def create_design(
+    body: DesignCreate,
+    db: AsyncSession = Depends(get_db),
+    _: str = Depends(get_current_user),
+) -> DesignResponse:
+    design = Design(name=body.name, design_type=body.design_type, icon=body.icon)
+    db.add(design)
+    await db.flush()
+    # Create empty canvas state for the new design
+    db.add(CanvasState(design_id=design.id))
+    await db.commit()
+    await db.refresh(design)
+    return DesignResponse.model_validate(design)
+
+
+@router.put("/{design_id}", response_model=DesignResponse)
+async def update_design(
+    design_id: str,
+    body: DesignUpdate,
+    db: AsyncSession = Depends(get_db),
+    _: str = Depends(get_current_user),
+) -> DesignResponse:
+    design = await db.get(Design, design_id)
+    if not design:
+        raise HTTPException(404, "Design not found")
+    if body.name is not None:
+        design.name = body.name
+    if body.icon is not None:
+        design.icon = body.icon
+    await db.commit()
+    await db.refresh(design)
+    return DesignResponse.model_validate(design)
+
+
+@router.delete("/{design_id}", status_code=204)
+async def delete_design(
+    design_id: str,
+    db: AsyncSession = Depends(get_db),
+    _: str = Depends(get_current_user),
+) -> None:
+    design = await db.get(Design, design_id)
+    if not design:
+        raise HTTPException(404, "Design not found")
+    # Count remaining designs — prevent deleting the last one
+    count = (await db.execute(select(Design))).scalars().all()
+    if len(count) <= 1:
+        raise HTTPException(400, "Cannot delete the only design")
+    # Delete associated canvas state, edges, nodes
+    cs = await db.get(CanvasState, design_id)
+    if cs:
+        await db.delete(cs)
+    edges = (await db.execute(select(Edge).where(Edge.design_id == design_id))).scalars().all()
+    for e in edges:
+        await db.delete(e)
+    nodes = (await db.execute(select(Node).where(Node.design_id == design_id))).scalars().all()
+    for n in nodes:
+        await db.delete(n)
+    await db.delete(design)
+    await db.commit()

backend/app/api/routes/edges.py

@@ -4,7 +4,7 @@ from sqlalchemy.ext.asyncio import AsyncSession
 
 from app.api.deps import get_current_user
 from app.db.database import get_db
-from app.db.models import Edge
+from app.db.models import Design, Edge
 from app.schemas.edges import EdgeCreate, EdgeResponse, EdgeUpdate
 
 router = APIRouter()
@@ -18,7 +18,14 @@ async def list_edges(db: AsyncSession = Depends(get_db), _: str = Depends(get_cu
 
 @router.post("", response_model=EdgeResponse, status_code=status.HTTP_201_CREATED)
 async def create_edge(body: EdgeCreate, db: AsyncSession = Depends(get_db), _: str = Depends(get_current_user)) -> Edge:
-    edge = Edge(**body.model_dump())
+    data = body.model_dump()
+    # Same reconciliation as nodes: clients omitting design_id (MCP write tools)
+    # would create design_id=null edges that never render until a restart.
+    # Fall back to the first design so the edge attaches to a canvas.
+    if data.get("design_id") is None:
+        first_design = (await db.execute(select(Design).order_by(Design.created_at).limit(1))).scalar()
+        data["design_id"] = first_design.id if first_design else None
+    edge = Edge(**data)
     db.add(edge)
     await db.commit()
     await db.refresh(edge)

backend/app/api/routes/liveview.py

@@ -2,12 +2,14 @@ import hmac
 from typing import Any
 
 from fastapi import APIRouter, Depends, HTTPException, Query
+from pydantic import BaseModel
 from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession
 
+from app.api.deps import get_current_user
 from app.core.config import settings
 from app.db.database import get_db
-from app.db.models import CanvasState, Edge, Node
+from app.db.models import CanvasState, Design, Edge, Node
 from app.schemas.canvas import CanvasStateResponse
 from app.schemas.edges import EdgeResponse
 from app.schemas.nodes import NodeResponse
@@ -15,9 +17,30 @@ from app.schemas.nodes import NodeResponse
 router = APIRouter()
 
 
+class LiveViewConfigResponse(BaseModel):
+    """Whether live view is enabled, plus the key (admin-only) to build share links."""
+
+    enabled: bool
+    key: str | None = None
+
+
+@router.get("/config", response_model=LiveViewConfigResponse)
+async def liveview_config(
+    _: str = Depends(get_current_user),
+) -> LiveViewConfigResponse:
+    """Authenticated: expose the configured live view key so the UI can build a
+    ready-to-use share link (e.g. /view?key=...&design=<id>).
+
+    Only reachable by a logged-in user — the key is never exposed publicly.
+    """
+    key = settings.liveview_key or None
+    return LiveViewConfigResponse(enabled=bool(key), key=key)
+
+
 @router.get("", response_model=CanvasStateResponse)
 async def liveview_canvas(
     key: str | None = Query(default=None),
+    design_id: str | None = Query(default=None, description="Design to show; uses first if omitted"),
     db: AsyncSession = Depends(get_db),
 ) -> CanvasStateResponse:
     """Read-only public canvas endpoint.
@@ -30,12 +53,20 @@ async def liveview_canvas(
     if not key or not hmac.compare_digest(key, settings.liveview_key):
         raise HTTPException(status_code=403, detail="Invalid live view key")
 
-    nodes = (await db.execute(select(Node))).scalars().all()
+    if design_id is None:
-    edges = (await db.execute(select(Edge))).scalars().all()
+        first = (await db.execute(select(Design).order_by(Design.created_at).limit(1))).scalar()
-    state = await db.get(CanvasState, 1)
+        design_id = first.id if first else None
+    if design_id is None:
+        return CanvasStateResponse(nodes=[], edges=[], viewport={"x": 0, "y": 0, "zoom": 1}, custom_style=None)
+
+    nodes = (await db.execute(select(Node).where(Node.design_id == design_id))).scalars().all()
+    edges = (await db.execute(select(Edge).where(Edge.design_id == design_id))).scalars().all()
+    state = await db.get(CanvasState, design_id)
     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/app/api/routes/nodes.py

@@ -4,7 +4,7 @@ from sqlalchemy.ext.asyncio import AsyncSession
 
 from app.api.deps import get_current_user
 from app.db.database import get_db
-from app.db.models import Node
+from app.db.models import Design, Node
 from app.schemas.nodes import NodeCreate, NodeResponse, NodeUpdate
 
 router = APIRouter()
@@ -18,7 +18,15 @@ async def list_nodes(db: AsyncSession = Depends(get_db), _: str = Depends(get_cu
 
 @router.post("", response_model=NodeResponse, status_code=status.HTTP_201_CREATED)
 async def create_node(body: NodeCreate, db: AsyncSession = Depends(get_db), _: str = Depends(get_current_user)) -> Node:
-    node = Node(**body.model_dump())
+    data = body.model_dump()
+    # Attach to a design so the node lands on a canvas. Clients that don't send a
+    # design_id (e.g. the MCP write tools) would otherwise create design_id=null
+    # nodes that exist in the DB but never render in the UI until a container
+    # restart reconciles them. Fall back to the first design, matching bulk-approve.
+    if data.get("design_id") is None:
+        first_design = (await db.execute(select(Design).order_by(Design.created_at).limit(1))).scalar()
+        data["design_id"] = first_design.id if first_design else None
+    node = Node(**data)
     db.add(node)
     await db.commit()
     await db.refresh(node)

backend/app/api/routes/scan.py

@@ -1,6 +1,7 @@
 import ipaddress
 import logging
 import uuid
+from datetime import datetime, timezone
 from typing import Any
 
 from fastapi import APIRouter, BackgroundTasks, Depends, HTTPException
@@ -11,18 +12,85 @@ from sqlalchemy.ext.asyncio import AsyncSession
 from app.api.deps import get_current_user
 from app.core.config import settings
 from app.db.database import AsyncSessionLocal, get_db
-from app.db.models import Edge, Node, PendingDevice, PendingDeviceLink, ScanRun
+from app.db.models import Design, Edge, Node, PendingDevice, PendingDeviceLink, ScanRun
 from app.schemas.nodes import NodeCreate
 from app.schemas.scan import PendingDeviceResponse, ScanRunResponse
-from app.services.scanner import request_cancel, run_scan
+from app.services.scanner import DeepScanOptions, _valid_port_range, request_cancel, run_scan
+from app.services.zigbee_service import build_zigbee_properties
+from app.services.zwave_service import build_zwave_properties
+
+_ZIGBEE_TYPES = {"zigbee_coordinator", "zigbee_router", "zigbee_enddevice"}
+_ZWAVE_TYPES = {"zwave_coordinator", "zwave_router", "zwave_enddevice"}
+
+
+def _is_wireless(node_type: str | None) -> bool:
+    """Zigbee + Z-Wave mesh devices share online status / no ICMP check."""
+    return node_type in _ZIGBEE_TYPES or node_type in _ZWAVE_TYPES
+
+
+def _wireless_properties(
+    node_type: str | None,
+    ieee: str | None,
+    vendor: str | None,
+    model: str | None,
+    lqi: int | None,
+) -> list[dict[str, Any]]:
+    """Build the right property rows for a mesh device (Z-Wave has no LQI)."""
+    if node_type in _ZWAVE_TYPES:
+        return build_zwave_properties(ieee, vendor, model)
+    return build_zigbee_properties(ieee, vendor, model, lqi)
+
+
+def build_mac_property(mac: str | None) -> list[dict[str, Any]]:
+    """Build a NodeProperty list carrying a device MAC address.
+
+    Shape matches the frontend ``NodeProperty`` type
+    (``{key, value, icon, visible}``). Hidden by default — the user opts in to
+    showing it on the canvas card from the right panel. Returns an empty list
+    when no MAC is known.
+    """
+    if not mac:
+        return []
+    return [{"key": "MAC", "value": mac, "icon": None, "visible": False}]
+
+
+def merge_mac_property(
+    props: list[dict[str, Any]] | None, mac: str | None
+) -> list[dict[str, Any]]:
+    """Append a MAC NodeProperty to ``props`` unless one is already present.
+
+    Preserves any user-supplied properties (and an existing MAC row's
+    visibility) untouched. Used on approve so the scanned MAC is not lost.
+    """
+    out = [dict(p) for p in (props or [])]
+    if not mac or any(p.get("key") == "MAC" for p in out):
+        return out
+    out.append({"key": "MAC", "value": mac, "icon": None, "visible": False})
+    return out
 
 
 class BulkActionRequest(BaseModel):
     device_ids: list[str]
+    # Target design for approved nodes. Falls back to the first design when
+    # omitted (keeps older clients working), but the UI should send the active
+    # design so approved devices land on the canvas the user is looking at.
+    design_id: str | None = None
+
+
+def _check_port_ranges(v: list[str]) -> list[str]:
+    for r in v:
+        if not _valid_port_range(r.strip()):
+            raise ValueError(f"Invalid port range: {r!r}")
+    return v
 
 
 class ScanConfig(BaseModel):
+    """Persisted scan defaults (Options page). Deep-scan fields are optional."""
+
     ranges: list[str]
+    http_ranges: list[str] = []
+    http_probe_enabled: bool = False
+    verify_tls: bool = False
 
     @field_validator("ranges")
     @classmethod
@@ -34,15 +102,35 @@ class ScanConfig(BaseModel):
                 raise ValueError(f"Invalid CIDR range: {r!r}") from exc
         return v
 
+    @field_validator("http_ranges")
+    @classmethod
+    def validate_http_ranges(cls, v: list[str]) -> list[str]:
+        return _check_port_ranges(v)
+
+
+class TriggerScanRequest(BaseModel):
+    """Per-scan deep-scan overrides (scan dialog). None → use persisted default."""
+
+    http_ranges: list[str] | None = None
+    http_probe_enabled: bool | None = None
+    verify_tls: bool | None = None
+
+    @field_validator("http_ranges")
+    @classmethod
+    def validate_http_ranges(cls, v: list[str] | None) -> list[str] | None:
+        return None if v is None else _check_port_ranges(v)
+
 
 logger = logging.getLogger(__name__)
 router = APIRouter()
 
 
-async def _background_scan(run_id: str, ranges: list[str]) -> None:
+async def _background_scan(
+    run_id: str, ranges: list[str], deep_scan: DeepScanOptions | None = None
+) -> None:
     async with AsyncSessionLocal() as db:
         try:
-            await run_scan(ranges, db, run_id)
+            await run_scan(ranges, db, run_id, deep_scan=deep_scan or DeepScanOptions())
         except Exception:
             logger.exception("Scan run %s failed unexpectedly", run_id)
             await db.rollback()
@@ -52,18 +140,38 @@ async def _background_scan(run_id: str, ranges: list[str]) -> None:
                 await db.commit()
 
 
+def _resolve_deep_scan(payload: TriggerScanRequest | None) -> DeepScanOptions:
+    """Merge per-scan overrides over persisted settings defaults."""
+    p = payload or TriggerScanRequest()
+    return DeepScanOptions(
+        http_ranges=(
+            p.http_ranges if p.http_ranges is not None else settings.scanner_http_ranges
+        ),
+        http_probe_enabled=(
+            p.http_probe_enabled
+            if p.http_probe_enabled is not None
+            else settings.scanner_http_probe_enabled
+        ),
+        verify_tls=(
+            p.verify_tls if p.verify_tls is not None else settings.scanner_http_verify_tls
+        ),
+    )
+
+
 @router.post("/trigger", response_model=ScanRunResponse)
 async def trigger_scan(
     background_tasks: BackgroundTasks,
+    payload: TriggerScanRequest | None = None,
     db: AsyncSession = Depends(get_db),
     _: str = Depends(get_current_user),
 ) -> ScanRun:
     ranges = settings.scanner_ranges
+    deep_scan = _resolve_deep_scan(payload)
     run = ScanRun(status="running", ranges=ranges)
     db.add(run)
     await db.commit()
     await db.refresh(run)
-    background_tasks.add_task(_background_scan, run.id, ranges)
+    background_tasks.add_task(_background_scan, run.id, ranges, deep_scan)
     return run
 
 
@@ -83,13 +191,98 @@ async def stop_scan(
     if run.status != "running":
         raise HTTPException(status_code=409, detail="Scan is not running")
     request_cancel(run_id)
+    # Flip status eagerly so the UI reflects the stop immediately, instead of
+    # waiting for run_scan to reach its next cancellation checkpoint (which may
+    # be blocked inside a long nmap call). run_scan converges to the same state.
+    run.status = "cancelled"
+    run.finished_at = datetime.now(timezone.utc)
+    await db.commit()
     return {"stopping": True}
 
 
+def _agg(values: list[datetime], *, newest: bool) -> datetime | None:
+    """Pick the newest (max) or oldest (min) of a list of timestamps, or None."""
+    present = [v for v in values if v is not None]
+    if not present:
+        return None
+    return max(present) if newest else min(present)
+
+
+async def _canvas_correlation(
+    db: AsyncSession, devices: list[PendingDevice]
+) -> dict[str, dict[str, Any]]:
+    """Correlate each device to existing canvas nodes by ``ieee_address`` or ``ip``.
+
+    Returns, per device id: the number of distinct canvases (designs) it appears
+    on, plus aggregated timestamps from every matching node — created_at (oldest),
+    last_scan / updated_at / last_seen (newest). One node query, grouped in Python
+    (node counts are small for a homelab), so no N+1 per device.
+    """
+    if not devices:
+        return {}
+    rows = (
+        await db.execute(
+            select(
+                Node.ip,
+                Node.ieee_address,
+                Node.design_id,
+                Node.created_at,
+                Node.last_scan,
+                Node.updated_at,
+                Node.last_seen,
+            ).where(Node.design_id.isnot(None))
+        )
+    ).all()
+    # Index matching nodes by ip and by ieee so a device can look up both.
+    by_ip: dict[str, list[Any]] = {}
+    by_ieee: dict[str, list[Any]] = {}
+    for row in rows:
+        if row.ip:
+            by_ip.setdefault(row.ip, []).append(row)
+        if row.ieee_address:
+            by_ieee.setdefault(row.ieee_address, []).append(row)
+
+    info: dict[str, dict[str, Any]] = {}
+    for d in devices:
+        matched = []
+        if d.ieee_address:
+            matched += by_ieee.get(d.ieee_address, [])
+        if d.ip:
+            matched += by_ip.get(d.ip, [])
+        # De-duplicate nodes matched by both ip and ieee.
+        matched = list({id(m): m for m in matched}.values())
+        designs = {m.design_id for m in matched}
+        info[d.id] = {
+            "canvas_count": len(designs),
+            "node_created_at": _agg([m.created_at for m in matched], newest=False),
+            "node_last_scan": _agg([m.last_scan for m in matched], newest=True),
+            "node_last_modified": _agg([m.updated_at for m in matched], newest=True),
+            "node_last_seen": _agg([m.last_seen for m in matched], newest=True),
+        }
+    return info
+
+
+async def _with_canvas_counts(
+    db: AsyncSession, devices: list[PendingDevice]
+) -> list[PendingDevice]:
+    """Attach transient canvas count + linked-node timestamps for the response."""
+    info = await _canvas_correlation(db, devices)
+    for d in devices:
+        meta = info.get(d.id, {})
+        d.canvas_count = meta.get("canvas_count", 0)
+        d.node_created_at = meta.get("node_created_at")
+        d.node_last_scan = meta.get("node_last_scan")
+        d.node_last_modified = meta.get("node_last_modified")
+        d.node_last_seen = meta.get("node_last_seen")
+    return devices
+
+
 @router.get("/pending", response_model=list[PendingDeviceResponse])
 async def list_pending(db: AsyncSession = Depends(get_db), _: str = Depends(get_current_user)) -> list[PendingDevice]:
-    result = await db.execute(select(PendingDevice).where(PendingDevice.status == "pending"))
+    # Inventory: every scanned device except the user-hidden ones. Approved devices
-    return list(result.scalars().all())
+    # stay listed so they keep showing with a canvas-presence badge.
+    result = await db.execute(select(PendingDevice).where(PendingDevice.status != "hidden"))
+    return await _with_canvas_counts(db, list(result.scalars().all()))
 
 
 @router.delete("/pending", response_model=dict)
@@ -106,7 +299,7 @@ async def clear_pending(
 @router.get("/hidden", response_model=list[PendingDeviceResponse])
 async def list_hidden(db: AsyncSession = Depends(get_db), _: str = Depends(get_current_user)) -> list[PendingDevice]:
     result = await db.execute(select(PendingDevice).where(PendingDevice.status == "hidden"))
-    return list(result.scalars().all())
+    return await _with_canvas_counts(db, list(result.scalars().all()))
 
 
 @router.post("/pending/bulk-approve", response_model=dict)
@@ -115,36 +308,80 @@ async def bulk_approve_devices(
     db: AsyncSession = Depends(get_db),
     _: str = Depends(get_current_user),
 ) -> dict[str, Any]:
+    # Target the design the user is on; fall back to the first design.
+    default_design_id = payload.design_id
+    if default_design_id is None:
+        first_design = (await db.execute(select(Design).order_by(Design.created_at).limit(1))).scalar()
+        default_design_id = first_design.id if first_design else None
+
+    # Accept every selected device that isn't user-hidden. We intentionally do NOT
+    # filter on status == "pending": a device's status is global, but canvas
+    # membership is per-design. A device approved onto another canvas (or whose
+    # node was later deleted) must still be placeable on THIS design. Duplicates
+    # are guarded per-design below, not by the global status flag.
     result = await db.execute(
         select(PendingDevice).where(
             PendingDevice.id.in_(payload.device_ids),
-            PendingDevice.status == "pending",
+            PendingDevice.status != "hidden",
         )
     )
     devices = result.scalars().all()
+
+    # What already sits on the target canvas, so we skip devices already placed
+    # here (by ip or ieee_address) instead of creating duplicate nodes.
+    existing = (
+        await db.execute(
+            select(Node.ip, Node.ieee_address).where(Node.design_id == default_design_id)
+        )
+    ).all()
+    placed_ips = {ip for ip, _ in existing if ip}
+    placed_ieee = {ieee for _, ieee in existing if ieee}
+
     created_nodes: list[Node] = []
+    approved_devices: list[PendingDevice] = []
     for device in devices:
+        already_here = (
+            (device.ip is not None and device.ip in placed_ips)
+            or (device.ieee_address is not None and device.ieee_address in placed_ieee)
+        )
+        if already_here:
+            continue
         device.status = "approved"
+        node_type = device.suggested_type or "generic"
+        is_wireless = _is_wireless(node_type)
         node = Node(
             label=device.hostname or device.friendly_name or device.ip or "device",
-            type=device.suggested_type or "generic",
+            type=node_type,
             ip=device.ip,
+            mac=device.mac,
             hostname=device.hostname,
-            status="unknown",
+            status="online" if is_wireless else "unknown",
             services=device.services or [],
             ieee_address=device.ieee_address,
+            properties=_wireless_properties(
+                node_type, device.ieee_address, device.vendor, device.model, device.lqi
+            ) if is_wireless else build_mac_property(device.mac),
             # Default to ping so the status checker actually polls the new node.
             # Without this the scheduler skips it (check_method NULL → no check).
-            check_method="ping" if device.ip else None,
+            check_method="none" if is_wireless else ("ping" if device.ip else None),
+            design_id=default_design_id,
         )
         db.add(node)
         created_nodes.append(node)
+        approved_devices.append(device)
+        # Track within this batch so a duplicate selection (same ip/ieee) is not
+        # placed twice on the same canvas.
+        if device.ip:
+            placed_ips.add(device.ip)
+        if device.ieee_address:
+            placed_ieee.add(device.ieee_address)
     await db.flush()  # populates node.id from Python-side default before reading
+    # node_ids and approved_device_ids stay index-aligned for the client's mapping.
     node_ids = [n.id for n in created_nodes]
-    approved_device_ids = [d.id for d in devices]
+    approved_device_ids = [d.id for d in approved_devices]
 
     all_edges: list[dict[str, str]] = []
-    for device in devices:
+    for device in approved_devices:
         all_edges.extend(await _resolve_pending_links_for_ieee(db, device.ieee_address))
 
     await db.commit()
@@ -219,24 +456,37 @@ async def approve_device(
     db: AsyncSession = Depends(get_db),
     _: str = Depends(get_current_user),
 ) -> dict[str, Any]:
+    # Determine target design
+    node_design_id = node_data.design_id
+    if node_design_id is None:
+        first = (await db.execute(select(Design).order_by(Design.created_at).limit(1))).scalar()
+        node_design_id = first.id if first else None
+
     device = await db.get(PendingDevice, device_id)
     if not device:
         raise HTTPException(status_code=404, detail="Device not found")
     if device.status != "pending":
         raise HTTPException(status_code=409, detail="Device already processed")
     device.status = "approved"
+    wireless = _is_wireless(node_data.type)
+    # Prefer the MAC discovered during the scan (stored on the pending device);
+    # fall back to whatever the approve payload carried.
+    _mac = device.mac or node_data.mac
     node = Node(
         label=node_data.label,
         type=node_data.type,
         ip=node_data.ip,
+        mac=_mac,
         hostname=node_data.hostname,
-        status=node_data.status,
+        status="online" if wireless else node_data.status,
         services=node_data.services or [],
         ieee_address=device.ieee_address,
-        # Honour caller-supplied check_method, else default to ping when an IP exists
+        properties=_wireless_properties(
-        # so the scheduler doesn't silently skip the new node.
+            node_data.type, device.ieee_address, device.vendor, device.model, device.lqi
-        check_method=node_data.check_method or ("ping" if node_data.ip else None),
+        ) if wireless else merge_mac_property(node_data.properties, _mac),
-        check_target=node_data.check_target,
+        check_method="none" if wireless else (node_data.check_method or ("ping" if node_data.ip else None)),
+        check_target=None if wireless else node_data.check_target,
+        design_id=node_design_id,
     )
     db.add(node)
     await db.flush()
@@ -318,12 +568,18 @@ async def _resolve_pending_links_for_ieee(
         if (src_id, tgt_id) in existing_pairs or (tgt_id, src_id) in existing_pairs:
             await db.delete(link)
             continue
+        # Use the source node's design_id for the edge
+        edge_design_id = self_node.design_id if self_node else None
+        if edge_design_id is None:
+            first = (await db.execute(select(Design).order_by(Design.created_at).limit(1))).scalar()
+            edge_design_id = first.id if first else None
         edge = Edge(
             source=src_id,
             target=tgt_id,
             type="iot",
             source_handle="bottom",
             target_handle="top-t",
+            design_id=edge_design_id,
         )
         db.add(edge)
         await db.flush()
@@ -366,17 +622,35 @@ async def list_runs(db: AsyncSession = Depends(get_db), _: str = Depends(get_cur
 
 @router.get("/config", response_model=ScanConfig)
 async def get_scan_config(_: str = Depends(get_current_user)) -> ScanConfig:
-    return ScanConfig(ranges=settings.scanner_ranges)
+    return ScanConfig(
+        ranges=settings.scanner_ranges,
+        http_ranges=settings.scanner_http_ranges,
+        http_probe_enabled=settings.scanner_http_probe_enabled,
+        verify_tls=settings.scanner_http_verify_tls,
+    )
 
 
 @router.post("/config", response_model=ScanConfig)
 async def update_scan_config(payload: ScanConfig, _: str = Depends(get_current_user)) -> ScanConfig:
-    previous = settings.scanner_ranges
+    previous = (
+        settings.scanner_ranges,
+        settings.scanner_http_ranges,
+        settings.scanner_http_probe_enabled,
+        settings.scanner_http_verify_tls,
+    )
     settings.scanner_ranges = payload.ranges
+    settings.scanner_http_ranges = payload.http_ranges
+    settings.scanner_http_probe_enabled = payload.http_probe_enabled
+    settings.scanner_http_verify_tls = payload.verify_tls
     try:
         settings.save_overrides()
         return payload
     except Exception as exc:
-        settings.scanner_ranges = previous
+        (
+            settings.scanner_ranges,
+            settings.scanner_http_ranges,
+            settings.scanner_http_probe_enabled,
+            settings.scanner_http_verify_tls,
+        ) = previous
         logger.error("Failed to save scan config: %s", exc)
         raise HTTPException(status_code=500, detail="Failed to save scan config") from exc

backend/app/api/routes/settings.py

@@ -1,20 +1,27 @@
 """App-level settings (status checker interval, etc.)."""
 from fastapi import APIRouter, Depends, HTTPException
-from pydantic import BaseModel
+from pydantic import BaseModel, Field
 
 from app.api.deps import get_current_user
 from app.core.config import settings
+from app.core.scheduler import reschedule_service_checks, set_service_checks_enabled
 
 router = APIRouter()
 
 
 class AppSettings(BaseModel):
     interval_seconds: int
+    service_check_enabled: bool = False
+    service_check_interval: int = Field(default=300, ge=30)
 
 
 @router.get("", response_model=AppSettings)
 async def get_settings(_: str = Depends(get_current_user)) -> AppSettings:
-    return AppSettings(interval_seconds=settings.status_checker_interval)
+    return AppSettings(
+        interval_seconds=settings.status_checker_interval,
+        service_check_enabled=settings.service_check_enabled,
+        service_check_interval=settings.service_check_interval,
+    )
 
 
 @router.post("", response_model=AppSettings)
@@ -23,7 +30,13 @@ async def update_settings(
 ) -> AppSettings:
     try:
         settings.status_checker_interval = payload.interval_seconds
+        settings.service_check_enabled = payload.service_check_enabled
+        settings.service_check_interval = payload.service_check_interval
         settings.save_overrides()
+        # Apply the service-check schedule live.
+        set_service_checks_enabled(payload.service_check_enabled)
+        if payload.service_check_enabled:
+            reschedule_service_checks(payload.service_check_interval)
         return payload
     except Exception as exc:
         raise HTTPException(status_code=500, detail=str(exc)) from exc

backend/app/api/routes/stats.py

@@ -0,0 +1,64 @@
+import hmac
+
+from fastapi import APIRouter, Depends, Header, HTTPException
+from sqlalchemy import func, select
+from sqlalchemy.ext.asyncio import AsyncSession
+
+from app.core.config import settings
+from app.db.database import get_db
+from app.db.models import Node, PendingDevice, ScanRun
+
+router = APIRouter()
+
+
+def _check_key(x_api_key: str | None) -> None:
+    if not settings.homepage_api_key:
+        raise HTTPException(status_code=403, detail="Stats endpoint is disabled")
+    if not x_api_key or not hmac.compare_digest(x_api_key, settings.homepage_api_key):
+        raise HTTPException(status_code=403, detail="Invalid API key")
+
+
+@router.get("/summary")
+async def summary(
+    x_api_key: str | None = Header(default=None, alias="X-API-Key"),
+    db: AsyncSession = Depends(get_db),
+) -> dict[str, object]:
+    """Read-only stats payload for the gethomepage `customapi` widget.
+
+    Disabled unless HOMEPAGE_API_KEY is set. Caller must send the same
+    value in the `X-API-Key` header.
+    """
+    _check_key(x_api_key)
+
+    status_rows = (
+        await db.execute(select(Node.status, func.count()).group_by(Node.status))
+    ).all()
+    counts = {row[0]: row[1] for row in status_rows}
+
+    pending = (
+        await db.execute(
+            select(func.count())
+            .select_from(PendingDevice)
+            .where(PendingDevice.status == "pending")
+        )
+    ).scalar_one()
+
+    zigbee = (
+        await db.execute(
+            select(func.count()).select_from(Node).where(Node.ieee_address.isnot(None))
+        )
+    ).scalar_one()
+
+    last_scan_at = (
+        await db.execute(select(func.max(ScanRun.finished_at)))
+    ).scalar_one()
+
+    return {
+        "nodes": sum(counts.values()),
+        "online": counts.get("online", 0),
+        "offline": counts.get("offline", 0),
+        "unknown": counts.get("unknown", 0),
+        "pending_devices": pending,
+        "zigbee_devices": zigbee,
+        "last_scan_at": last_scan_at.isoformat() if last_scan_at else None,
+    }

backend/app/api/routes/status.py

@@ -1,3 +1,4 @@
+import contextlib
 import json
 
 from fastapi import APIRouter, WebSocket, WebSocketDisconnect
@@ -10,6 +11,12 @@ router = APIRouter()
 _connections: list[WebSocket] = []
 
 
+def _drop(websocket: WebSocket) -> None:
+    """Remove a connection if still present — idempotent, never raises."""
+    with contextlib.suppress(ValueError):
+        _connections.remove(websocket)
+
+
 @router.websocket("/ws/status")
 async def ws_status(websocket: WebSocket) -> None:
     # Accept first so we can send a close frame with a reason code
@@ -33,7 +40,11 @@ async def ws_status(websocket: WebSocket) -> None:
         while True:
             await websocket.receive_text()
     except WebSocketDisconnect:
-        _connections.remove(websocket)
+        pass
+    finally:
+        # Any error (disconnect or otherwise) must release the slot, else the
+        # dead socket lingers in the broadcast pool.
+        _drop(websocket)
 
 
 async def _broadcast(payload: str) -> None:
@@ -41,7 +52,7 @@ async def _broadcast(payload: str) -> None:
         try:
             await conn.send_text(payload)
         except Exception:
-            _connections.remove(conn)
+            _drop(conn)
 
 
 async def broadcast_status(node_id: str, status: str, checked_at: str, response_time_ms: int | None = None) -> None:
@@ -54,6 +65,15 @@ async def broadcast_status(node_id: str, status: str, checked_at: str, response_
     }))
 
 
+async def broadcast_service_status(node_id: str, services: list[dict[str, object]], checked_at: str) -> None:
+    await _broadcast(json.dumps({
+        "type": "service_status",
+        "node_id": node_id,
+        "services": services,
+        "checked_at": checked_at,
+    }))
+
+
 async def broadcast_scan_update(run_id: str, devices_found: int) -> None:
     await _broadcast(json.dumps({
         "type": "scan_device_found",

backend/app/api/routes/zigbee.py

@@ -11,7 +11,7 @@ from sqlalchemy.ext.asyncio import AsyncSession
 
 from app.api.deps import get_current_user
 from app.db.database import AsyncSessionLocal, get_db
-from app.db.models import Node, PendingDevice, PendingDeviceLink, ScanRun
+from app.db.models import Design, Node, PendingDevice, PendingDeviceLink, ScanRun
 from app.schemas.scan import ScanRunResponse
 from app.schemas.zigbee import (
     ZigbeeCoordinatorOut,
@@ -23,7 +23,12 @@ from app.schemas.zigbee import (
     ZigbeeTestConnectionRequest,
     ZigbeeTestConnectionResponse,
 )
-from app.services.zigbee_service import fetch_networkmap, test_mqtt_connection
+from app.services.zigbee_service import (
+    build_zigbee_properties,
+    fetch_networkmap,
+    merge_zigbee_properties,
+    test_mqtt_connection,
+)
 
 logger = logging.getLogger(__name__)
 router = APIRouter()
@@ -133,6 +138,10 @@ async def _persist_pending_import(
     Coordinator auto-approves to a canvas Node. Other devices upsert by IEEE.
     All zigbee-source links are wiped and re-inserted from the new map.
     """
+    # Determine target design (use first design as fallback)
+    first_design = (await db.execute(select(Design).order_by(Design.created_at).limit(1))).scalar()
+    default_design_id = first_design.id if first_design else None
+
     coordinator_out: ZigbeeCoordinatorOut | None = None
     coordinator_existed = False
     pending_created = 0
@@ -142,10 +151,17 @@ async def _persist_pending_import(
         ieee = n.get("ieee_address")
         if not ieee:
             continue
+        props = build_zigbee_properties(
+            ieee, n.get("vendor"), n.get("model"), n.get("lqi")
+        )
+
         if n.get("device_type") == "Coordinator":
             existing = await db.execute(select(Node).where(Node.ieee_address == ieee))
             existing_node = existing.scalar_one_or_none()
             if existing_node:
+                existing_node.properties = merge_zigbee_properties(
+                    existing_node.properties, props
+                )
                 coordinator_out = ZigbeeCoordinatorOut(
                     id=existing_node.id,
                     label=existing_node.label,
@@ -157,9 +173,12 @@ async def _persist_pending_import(
             node = Node(
                 label=label,
                 type=n.get("type") or "zigbee_coordinator",
-                status="unknown",
+                status="online",
+                check_method="none",
                 ieee_address=ieee,
                 services=[],
+                properties=props,
+                design_id=default_design_id,
             )
             db.add(node)
             await db.flush()
@@ -168,6 +187,19 @@ async def _persist_pending_import(
             )
             continue
 
+        # If the device has already been approved as a canvas Node, refresh
+        # its properties and skip creating a pending row (keeps approved
+        # devices out of pending/hidden modals on re-import).
+        existing_node_q = await db.execute(
+            select(Node).where(Node.ieee_address == ieee)
+        )
+        existing_node = existing_node_q.scalar_one_or_none()
+        if existing_node:
+            existing_node.properties = merge_zigbee_properties(
+                existing_node.properties, props
+            )
+            continue
+
         result = await db.execute(
             select(PendingDevice).where(PendingDevice.ieee_address == ieee)
         )
@@ -196,7 +228,13 @@ async def _persist_pending_import(
             pending.vendor = n.get("vendor") or pending.vendor
             if n.get("lqi") is not None:
                 pending.lqi = n.get("lqi")
-            if pending.status == "hidden":
+            if pending.status == "approved":
+                # The device was approved earlier but its canvas Node no longer
+                # exists (no Node matched the IEEE above) — it was deleted. Revive
+                # the row to "pending" so it reappears in the Pending list on
+                # re-import instead of being silently swallowed. (Issue #167)
+                pending.status = "pending"
+            elif pending.status == "hidden":
                 # Re-imported a hidden device → leave it hidden, just refresh fields.
                 pass
             pending_updated += 1

backend/app/api/routes/zwave.py

@@ -0,0 +1,284 @@
+"""FastAPI router for Z-Wave JS UI (zwavejs2mqtt) import."""
+
+import logging
+from datetime import datetime, timezone
+from typing import Any
+
+from fastapi import APIRouter, BackgroundTasks, Depends, HTTPException
+from sqlalchemy import delete as sa_delete
+from sqlalchemy import select
+from sqlalchemy.ext.asyncio import AsyncSession
+
+from app.api.deps import get_current_user
+from app.db.database import AsyncSessionLocal, get_db
+from app.db.models import Design, Node, PendingDevice, PendingDeviceLink, ScanRun
+from app.schemas.scan import ScanRunResponse
+from app.schemas.zwave import (
+    ZwaveCoordinatorOut,
+    ZwaveEdgeOut,
+    ZwaveImportPendingResponse,
+    ZwaveImportRequest,
+    ZwaveImportResponse,
+    ZwaveNodeOut,
+    ZwaveTestConnectionRequest,
+    ZwaveTestConnectionResponse,
+)
+from app.services.zwave_service import (
+    build_zwave_properties,
+    fetch_zwave_network,
+    merge_zwave_properties,
+    test_zwave_connection,
+)
+
+logger = logging.getLogger(__name__)
+router = APIRouter()
+
+
+@router.post("/import", response_model=ZwaveImportResponse)
+async def import_zwave_network(
+    payload: ZwaveImportRequest,
+    _: str = Depends(get_current_user),
+) -> ZwaveImportResponse:
+    """Fetch the Z-Wave node list and return nodes + edges ready for canvas drop.
+
+    Connects to the broker, publishes a ``getNodes`` request to the Z-Wave JS UI
+    gateway, and waits for the response. Devices are returned as typed homelable
+    nodes with a coordinator → router → end-device hierarchy.
+    """
+    try:
+        nodes_raw, edges_raw = await fetch_zwave_network(
+            mqtt_host=payload.mqtt_host,
+            mqtt_port=payload.mqtt_port,
+            prefix=payload.prefix,
+            gateway_name=payload.gateway_name,
+            username=payload.mqtt_username,
+            password=payload.mqtt_password,
+            tls=payload.mqtt_tls,
+            tls_insecure=payload.mqtt_tls_insecure,
+        )
+    except ImportError as exc:
+        raise HTTPException(status_code=500, detail=str(exc)) from exc
+    except ConnectionError as exc:
+        raise HTTPException(status_code=502, detail=str(exc)) from exc
+    except TimeoutError as exc:
+        raise HTTPException(status_code=504, detail=str(exc)) from exc
+    except ValueError as exc:
+        raise HTTPException(status_code=422, detail=str(exc)) from exc
+    except Exception as exc:
+        logger.exception("Unexpected error during Z-Wave import")
+        raise HTTPException(status_code=500, detail="Unexpected error during Z-Wave import") from exc
+
+    nodes = [ZwaveNodeOut(**n) for n in nodes_raw]
+    edges = [ZwaveEdgeOut(**e) for e in edges_raw]
+    return ZwaveImportResponse(nodes=nodes, edges=edges, device_count=len(nodes))
+
+
+@router.post("/import-pending", response_model=ScanRunResponse)
+async def import_zwave_to_pending(
+    payload: ZwaveImportRequest,
+    background_tasks: BackgroundTasks,
+    db: AsyncSession = Depends(get_db),
+    _: str = Depends(get_current_user),
+) -> ScanRun:
+    """Queue a Z-Wave pending import as a background scan run (kind=zwave)."""
+    run = ScanRun(
+        status="running",
+        kind="zwave",
+        ranges=[f"{payload.mqtt_host}:{payload.mqtt_port}"],
+    )
+    db.add(run)
+    await db.commit()
+    await db.refresh(run)
+    background_tasks.add_task(_background_zwave_import, run.id, payload)
+    return run
+
+
+async def _background_zwave_import(run_id: str, payload: ZwaveImportRequest) -> None:
+    async with AsyncSessionLocal() as db:
+        try:
+            nodes_raw, edges_raw = await fetch_zwave_network(
+                mqtt_host=payload.mqtt_host,
+                mqtt_port=payload.mqtt_port,
+                prefix=payload.prefix,
+                gateway_name=payload.gateway_name,
+                username=payload.mqtt_username,
+                password=payload.mqtt_password,
+                tls=payload.mqtt_tls,
+                tls_insecure=payload.mqtt_tls_insecure,
+            )
+            result = await _persist_pending_import(db, nodes_raw, edges_raw)
+            run = await db.get(ScanRun, run_id)
+            if run:
+                run.status = "done"
+                run.devices_found = result.device_count
+                run.finished_at = datetime.now(timezone.utc)
+                await db.commit()
+        except Exception as exc:
+            logger.exception("Z-Wave import %s failed", run_id)
+            await db.rollback()
+            run = await db.get(ScanRun, run_id)
+            if run:
+                run.status = "error"
+                run.error = str(exc)[:500]
+                run.finished_at = datetime.now(timezone.utc)
+                await db.commit()
+
+
+async def _persist_pending_import(
+    db: AsyncSession,
+    nodes_raw: list[dict[str, Any]],
+    edges_raw: list[dict[str, Any]],
+) -> ZwaveImportPendingResponse:
+    """Upsert nodes/edges into pending_devices + pending_device_links.
+
+    Coordinator auto-approves to a canvas Node. Other devices upsert by Z-Wave
+    identity. All zwave-source links are wiped and re-inserted from the new map.
+    """
+    first_design = (await db.execute(select(Design).order_by(Design.created_at).limit(1))).scalar()
+    default_design_id = first_design.id if first_design else None
+
+    coordinator_out: ZwaveCoordinatorOut | None = None
+    coordinator_existed = False
+    pending_created = 0
+    pending_updated = 0
+
+    for n in nodes_raw:
+        ieee = n.get("ieee_address")
+        if not ieee:
+            continue
+        props = build_zwave_properties(ieee, n.get("vendor"), n.get("model"))
+
+        if n.get("type") == "zwave_coordinator":
+            existing = await db.execute(select(Node).where(Node.ieee_address == ieee))
+            existing_node = existing.scalar_one_or_none()
+            if existing_node:
+                existing_node.properties = merge_zwave_properties(
+                    existing_node.properties, props
+                )
+                coordinator_out = ZwaveCoordinatorOut(
+                    id=existing_node.id,
+                    label=existing_node.label,
+                    ieee_address=ieee,
+                )
+                coordinator_existed = True
+                continue
+            label = n.get("friendly_name") or ieee
+            node = Node(
+                label=label,
+                type=n.get("type") or "zwave_coordinator",
+                status="online",
+                check_method="none",
+                ieee_address=ieee,
+                services=[],
+                properties=props,
+                design_id=default_design_id,
+            )
+            db.add(node)
+            await db.flush()
+            coordinator_out = ZwaveCoordinatorOut(
+                id=node.id, label=label, ieee_address=ieee
+            )
+            continue
+
+        # Already approved as a canvas Node → refresh props, skip pending row.
+        existing_node_q = await db.execute(
+            select(Node).where(Node.ieee_address == ieee)
+        )
+        existing_node = existing_node_q.scalar_one_or_none()
+        if existing_node:
+            existing_node.properties = merge_zwave_properties(
+                existing_node.properties, props
+            )
+            continue
+
+        result = await db.execute(
+            select(PendingDevice).where(PendingDevice.ieee_address == ieee)
+        )
+        pending = result.scalar_one_or_none()
+        if pending is None:
+            db.add(
+                PendingDevice(
+                    ieee_address=ieee,
+                    friendly_name=n.get("friendly_name"),
+                    hostname=n.get("friendly_name"),
+                    suggested_type=n.get("type"),
+                    device_subtype=n.get("device_type"),
+                    model=n.get("model"),
+                    vendor=n.get("vendor"),
+                    lqi=n.get("lqi"),
+                    status="pending",
+                    discovery_source="zwave",
+                )
+            )
+            pending_created += 1
+        else:
+            pending.friendly_name = n.get("friendly_name") or pending.friendly_name
+            pending.suggested_type = n.get("type") or pending.suggested_type
+            pending.device_subtype = n.get("device_type") or pending.device_subtype
+            pending.model = n.get("model") or pending.model
+            pending.vendor = n.get("vendor") or pending.vendor
+            if pending.status == "approved":
+                # Approved earlier but the canvas Node is gone (deleted) — revive
+                # to "pending" so it reappears in the list instead of vanishing.
+                pending.status = "pending"
+            elif pending.status == "hidden":
+                pass
+            pending_updated += 1
+
+    # Replace all zwave-source links with the freshly discovered set.
+    await db.execute(
+        sa_delete(PendingDeviceLink).where(PendingDeviceLink.discovery_source == "zwave")
+    )
+
+    links_recorded = 0
+    seen: set[tuple[str, str]] = set()
+    for e in edges_raw:
+        src = e.get("source")
+        tgt = e.get("target")
+        if not src or not tgt or (src, tgt) in seen:
+            continue
+        seen.add((src, tgt))
+        db.add(
+            PendingDeviceLink(
+                source_ieee=src,
+                target_ieee=tgt,
+                discovery_source="zwave",
+            )
+        )
+        links_recorded += 1
+
+    await db.commit()
+
+    return ZwaveImportPendingResponse(
+        pending_created=pending_created,
+        pending_updated=pending_updated,
+        coordinator=coordinator_out,
+        coordinator_already_existed=coordinator_existed,
+        links_recorded=links_recorded,
+        device_count=len(nodes_raw),
+    )
+
+
+@router.post("/test-connection", response_model=ZwaveTestConnectionResponse)
+async def test_connection_endpoint(
+    payload: ZwaveTestConnectionRequest,
+    _: str = Depends(get_current_user),
+) -> ZwaveTestConnectionResponse:
+    """Quick MQTT ping to validate broker connection before importing."""
+    try:
+        await test_zwave_connection(
+            mqtt_host=payload.mqtt_host,
+            mqtt_port=payload.mqtt_port,
+            username=payload.mqtt_username,
+            password=payload.mqtt_password,
+            tls=payload.mqtt_tls,
+            tls_insecure=payload.mqtt_tls_insecure,
+        )
+        return ZwaveTestConnectionResponse(connected=True, message="Connection successful")
+    except ImportError as exc:
+        raise HTTPException(status_code=500, detail=str(exc)) from exc
+    except (ConnectionError, TimeoutError) as exc:
+        return ZwaveTestConnectionResponse(connected=False, message=str(exc))
+    except Exception:
+        logger.exception("Unexpected error during connection test")
+        return ZwaveTestConnectionResponse(connected=False, message="Unexpected error")

backend/app/core/config.py

@@ -48,9 +48,19 @@ class Settings(BaseSettings):
     # Scanner
     scanner_ranges: list[str] = ["192.168.1.0/24"]
 
+    # Deep scan — persisted defaults (overridable per-scan from the scan dialog).
+    # http_ranges: extra nmap port ranges, opt-in, no default. Probe + TLS off by default.
+    scanner_http_ranges: list[str] = []
+    scanner_http_probe_enabled: bool = False
+    scanner_http_verify_tls: bool = False
+
     # Status checker
     status_checker_interval: int = 60
 
+    # Per-service status checker (independent of node checks). Off by default.
+    service_check_enabled: bool = False
+    service_check_interval: int = 300
+
     # MCP service key — set MCP_SERVICE_KEY in .env
     # Used by the MCP server to authenticate against the backend without a user password.
     # Leave empty to disable MCP service key auth.
@@ -61,6 +71,11 @@ class Settings(BaseSettings):
     # Leave unset (or empty) to keep the feature disabled (default).
     liveview_key: str | None = None
 
+    # Homepage widget — optional read-only stats endpoint for gethomepage.
+    # Set to a random secret to enable /api/v1/stats/summary (X-API-Key header).
+    # Leave empty to keep the feature disabled (default).
+    homepage_api_key: str = ""
+
     def _override_path(self) -> Path:
         return Path(self.sqlite_path).parent / "scan_config.json"
 
@@ -72,6 +87,16 @@ class Settings(BaseSettings):
                 self.scanner_ranges = data["scanner_ranges"]
             if "status_checker_interval" in data:
                 self.status_checker_interval = int(data["status_checker_interval"])
+            if "service_check_enabled" in data:
+                self.service_check_enabled = bool(data["service_check_enabled"])
+            if "service_check_interval" in data:
+                self.service_check_interval = int(data["service_check_interval"])
+            if "scanner_http_ranges" in data:
+                self.scanner_http_ranges = list(data["scanner_http_ranges"])
+            if "scanner_http_probe_enabled" in data:
+                self.scanner_http_probe_enabled = bool(data["scanner_http_probe_enabled"])
+            if "scanner_http_verify_tls" in data:
+                self.scanner_http_verify_tls = bool(data["scanner_http_verify_tls"])
         except Exception:
             pass
 
@@ -81,6 +106,11 @@ class Settings(BaseSettings):
         self._override_path().write_text(json.dumps({
             "scanner_ranges": self.scanner_ranges,
             "status_checker_interval": self.status_checker_interval,
+            "service_check_enabled": self.service_check_enabled,
+            "service_check_interval": self.service_check_interval,
+            "scanner_http_ranges": self.scanner_http_ranges,
+            "scanner_http_probe_enabled": self.scanner_http_probe_enabled,
+            "scanner_http_verify_tls": self.scanner_http_verify_tls,
         }))
 
 

backend/app/core/scheduler.py

@@ -9,7 +9,7 @@ from sqlalchemy import select
 from app.core.config import settings
 from app.db.database import AsyncSessionLocal
 from app.db.models import Node
-from app.services.status_checker import check_node
+from app.services.status_checker import check_node, check_services
 
 logger = logging.getLogger(__name__)
 
@@ -73,6 +73,50 @@ async def _run_status_checks() -> None:
     ])
 
 
+def _node_host(ip: str | None, hostname: str | None) -> str | None:
+    """Pick the address to probe services on: first IP, else hostname."""
+    if ip:
+        first = ip.split(",")[0].strip()
+        if first:
+            return first
+    return hostname or None
+
+
+async def _run_service_checks() -> None:
+    """Check every service of every node and broadcast per-service results."""
+    if not settings.service_check_enabled:
+        return
+    from app.api.routes.status import broadcast_service_status  # avoid circular import
+
+    async with AsyncSessionLocal() as db:
+        result = await db.execute(select(Node))
+        nodes = result.scalars().all()
+        checkable = [
+            (n.id, _node_host(n.ip, n.hostname), list(n.services or []))
+            for n in nodes
+            if n.services
+        ]
+
+    now = datetime.now(timezone.utc).isoformat()
+    for node_id, host, services in checkable:
+        try:
+            statuses = await check_services(host, services)
+            await broadcast_service_status(node_id=node_id, services=statuses, checked_at=now)
+        except Exception as exc:
+            logger.error("Service checks failed for node %s: %s", node_id, exc)
+
+
+def _add_service_check_job() -> None:
+    scheduler.add_job(
+        _run_service_checks,
+        "interval",
+        seconds=settings.service_check_interval,
+        id="service_checks",
+        max_instances=1,
+        coalesce=True,
+    )
+
+
 def start_scheduler() -> None:
     global scheduler
     if scheduler.running:
@@ -89,6 +133,8 @@ def start_scheduler() -> None:
         max_instances=1,
         coalesce=True,
     )
+    if settings.service_check_enabled:
+        _add_service_check_job()
     scheduler.start()
     logger.info("Scheduler started — status checks every %ds", settings.status_checker_interval)
 
@@ -104,6 +150,31 @@ def reschedule_status_checks(interval_seconds: int) -> None:
     logger.info("Status checks rescheduled to every %ds", interval_seconds)
 
 
+def reschedule_service_checks(interval_seconds: int) -> None:
+    """Update the service-check interval on the running scheduler (if enabled)."""
+    if interval_seconds < 30:
+        raise ValueError(f"interval_seconds must be >= 30, got {interval_seconds}")
+    if not scheduler.running:
+        logger.warning("Scheduler not running, skipping reschedule")
+        return
+    if scheduler.get_job("service_checks"):
+        scheduler.reschedule_job("service_checks", trigger="interval", seconds=interval_seconds)
+        logger.info("Service checks rescheduled to every %ds", interval_seconds)
+
+
+def set_service_checks_enabled(enabled: bool) -> None:
+    """Add or remove the service-check job on the running scheduler."""
+    if not scheduler.running:
+        return
+    job = scheduler.get_job("service_checks")
+    if enabled and not job:
+        _add_service_check_job()
+        logger.info("Service checks enabled — every %ds", settings.service_check_interval)
+    elif not enabled and job:
+        scheduler.remove_job("service_checks")
+        logger.info("Service checks disabled")
+
+
 def stop_scheduler() -> None:
     if scheduler.running:
         scheduler.shutdown(wait=False)

backend/app/core/security.py

@@ -1,22 +1,22 @@
 from datetime import datetime, timedelta, timezone
 
+import bcrypt
 from jose import JWTError, jwt
-from passlib.context import CryptContext
 
 from app.core.config import settings
 
-pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")
-
 
 def verify_password(plain: str, hashed: str) -> bool:
+    if not plain or not hashed:
+        return False
     try:
-        return bool(pwd_context.verify(plain, hashed))
+        return bcrypt.checkpw(plain.encode("utf-8"), hashed.encode("utf-8"))
-    except ValueError:
+    except (ValueError, TypeError):
         return False
 
 
 def hash_password(password: str) -> str:
-    return str(pwd_context.hash(password))
+    return bcrypt.hashpw(password.encode("utf-8"), bcrypt.gensalt()).decode("utf-8")
 
 
 def create_access_token(subject: str) -> str:

backend/app/data/oui_database.json

@@ -0,0 +1,221 @@
+[
+  {
+    "vendor": "Proxmox / QEMU / KVM",
+    "type": "vm",
+    "prefixes": ["52:54:00", "bc:24:11"]
+  },
+  {
+    "vendor": "VMware",
+    "type": "vm",
+    "prefixes": ["00:50:56", "00:0c:29", "00:05:69", "00:1c:14"]
+  },
+  {
+    "vendor": "VirtualBox",
+    "type": "vm",
+    "prefixes": ["08:00:27"]
+  },
+  {
+    "vendor": "Microsoft Hyper-V",
+    "type": "vm",
+    "prefixes": ["00:15:5d"]
+  },
+  {
+    "vendor": "Xen",
+    "type": "vm",
+    "prefixes": ["00:16:3e"]
+  },
+
+  {
+    "vendor": "MikroTik",
+    "type": "router",
+    "prefixes": [
+      "00:0c:42",
+      "08:55:31",
+      "18:fd:74",
+      "2c:c8:1b",
+      "48:8f:5a",
+      "4c:5e:0c",
+      "64:d1:54",
+      "6c:3b:6b",
+      "74:4d:28",
+      "b8:69:f4",
+      "c4:ad:34",
+      "cc:2d:e0",
+      "d4:ca:6d",
+      "dc:2c:6e",
+      "e4:8d:8c"
+    ]
+  },
+  {
+    "vendor": "Ubiquiti",
+    "type": "ap",
+    "prefixes": [
+      "00:15:6d",
+      "00:27:22",
+      "04:18:d6",
+      "24:5a:4c",
+      "24:a4:3c",
+      "44:d9:e7",
+      "68:72:51",
+      "68:d7:9a",
+      "74:83:c2",
+      "78:8a:20",
+      "78:45:58",
+      "80:2a:a8",
+      "94:2a:6f",
+      "9c:05:d6",
+      "b4:fb:e4",
+      "dc:9f:db",
+      "e0:63:da",
+      "f0:9f:c2",
+      "fc:ec:da"
+    ]
+  },
+  {
+    "vendor": "Ruckus Wireless",
+    "type": "ap",
+    "prefixes": ["00:13:92", "4c:b1:cd", "8c:7a:15", "f0:b0:52", "c0:8a:de"]
+  },
+  {
+    "vendor": "Aruba Networks (HPE)",
+    "type": "ap",
+    "prefixes": ["00:0b:86", "6c:f3:7f", "94:b4:0f", "9c:1c:12", "ac:a3:1e"]
+  },
+
+  {
+    "vendor": "Cisco Systems",
+    "type": "switch",
+    "prefixes": [
+      "00:00:0c",
+      "00:1b:0d",
+      "00:1c:f6",
+      "00:1e:13",
+      "00:23:04",
+      "00:24:13",
+      "00:25:45",
+      "00:50:0b",
+      "b0:00:b4",
+      "b8:38:61",
+      "f8:c0:01"
+    ]
+  },
+  {
+    "vendor": "Juniper Networks",
+    "type": "switch",
+    "prefixes": ["00:14:f6", "2c:6b:f5", "b0:c6:9a", "f0:1c:2d"]
+  },
+  {
+    "vendor": "Zyxel",
+    "type": "switch",
+    "prefixes": ["00:13:49", "60:31:97", "ec:43:f6"]
+  },
+
+  {
+    "vendor": "Netgear",
+    "type": "router",
+    "prefixes": ["00:09:5b", "28:c6:8e", "c0:ff:d4", "2c:30:33", "a0:40:a0"]
+  },
+  {
+    "vendor": "TP-Link",
+    "type": "router",
+    "prefixes": ["14:eb:b6", "60:e3:27", "b0:4e:26", "c4:e9:0a", "ec:08:6b"]
+  },
+
+  {
+    "vendor": "Synology",
+    "type": "nas",
+    "prefixes": ["00:11:32", "00:f4:6f", "90:09:d0"]
+  },
+  {
+    "vendor": "QNAP Systems",
+    "type": "nas",
+    "prefixes": ["00:08:9b", "00:0e:23", "00:13:42", "04:f0:21", "24:5e:be"]
+  },
+  {
+    "vendor": "Asustor",
+    "type": "nas",
+    "prefixes": ["e8:9c:25"]
+  },
+
+  {
+    "vendor": "Hikvision",
+    "type": "camera",
+    "prefixes": ["28:57:be", "44:19:b6", "b4:a3:82", "bc:ad:28", "c0:51:7e", "c0:56:e3", "c4:2f:90"]
+  },
+  {
+    "vendor": "Dahua / Amcrest",
+    "type": "camera",
+    "prefixes": ["3c:ef:8c", "4c:11:bf", "90:02:a9", "bc:32:5f", "e0:50:8b"]
+  },
+  {
+    "vendor": "Reolink",
+    "type": "camera",
+    "prefixes": ["ec:71:db"]
+  },
+  {
+    "vendor": "Axis Communications",
+    "type": "camera",
+    "prefixes": ["00:40:8c", "ac:cc:8e"]
+  },
+
+  {
+    "vendor": "Raspberry Pi Foundation",
+    "type": "server",
+    "prefixes": ["28:cd:c1", "2c:cf:67", "b8:27:eb", "d8:3a:dd", "dc:a6:32", "e4:5f:01"]
+  },
+  {
+    "vendor": "Dell",
+    "type": "server",
+    "prefixes": ["00:14:22", "90:b1:1c", "b0:83:fe", "b8:ca:3a", "f8:b1:56"]
+  },
+  {
+    "vendor": "Supermicro",
+    "type": "server",
+    "prefixes": ["00:25:90", "0c:c4:7a", "ac:1f:6b"]
+  },
+
+  {
+    "vendor": "Shelly",
+    "type": "iot",
+    "prefixes": ["30:c6:f7", "34:94:54", "84:f3:eb", "ec:fa:bc"]
+  },
+  {
+    "vendor": "Espressif (ESP8266 / ESP32)",
+    "type": "iot",
+    "prefixes": [
+      "24:62:ab",
+      "30:ae:a4",
+      "3c:71:bf",
+      "8c:aa:b5",
+      "a0:20:a6",
+      "ac:67:b2",
+      "b4:e6:2d",
+      "cc:50:e3"
+    ]
+  },
+  {
+    "vendor": "Sonoff / ITEAD",
+    "type": "iot",
+    "prefixes": ["dc:4f:22", "e8:db:84"]
+  },
+  {
+    "vendor": "TP-Link Tapo / Kasa",
+    "type": "iot",
+    "prefixes": ["10:27:f5", "1c:3b:f3", "50:c7:bf", "b0:a7:b9"]
+  },
+  {
+    "vendor": "Philips Hue",
+    "type": "iot",
+    "prefixes": ["00:17:88", "ec:b5:fa"]
+  },
+  {
+    "vendor": "IKEA Tradfri",
+    "type": "iot",
+    "prefixes": ["00:21:2e", "34:13:e8"]
+  },
+  {
+    "vendor": "Tuya / Smart Life",
+    "type": "iot",
+    "prefixes": ["68:57:2d", "d8:f1:5b"]
+  }
+]

backend/app/data/service_signatures.json

@@ -142,5 +142,69 @@
   {"port": 1194,  "protocol": "udp", "banner_regex": null,                              "service_name": "OpenVPN",                 "icon": "shield",      "category": "vpn",           "suggested_node_type": "router"},
   {"port": 500,   "protocol": "udp", "banner_regex": null,                              "service_name": "IPsec IKE",               "icon": "shield",      "category": "vpn",           "suggested_node_type": "router"},
   {"port": 53,    "protocol": "udp", "banner_regex": null,                              "service_name": "DNS",                     "icon": "search",      "category": "network",       "suggested_node_type": "router"},
-  {"port": 67,    "protocol": "udp", "banner_regex": null,                              "service_name": "DHCP",                    "icon": "wifi",        "category": "network",       "suggested_node_type": "router"}
+  {"port": 67,    "protocol": "udp", "banner_regex": null,                              "service_name": "DHCP",                    "icon": "wifi",        "category": "network",       "suggested_node_type": "router"},
+
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Jellyfin",                 "service_name": "Jellyfin",            "icon": "film",        "category": "media",      "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Plex",                     "service_name": "Plex",                "icon": "play-circle", "category": "media",      "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Emby",                     "service_name": "Emby",                "icon": "film",        "category": "media",      "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Overseerr",                "service_name": "Overseerr",           "icon": "tv",          "category": "media",      "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Jellyseerr",               "service_name": "Jellyseerr",          "icon": "tv",          "category": "media",      "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Tautulli",                 "service_name": "Tautulli",            "icon": "bar-chart",   "category": "media",      "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Navidrome",                "service_name": "Navidrome",           "icon": "music",       "category": "media",      "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "[Aa]udiobookshelf",        "service_name": "Audiobookshelf",      "icon": "book-open",   "category": "media",      "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Immich",                   "service_name": "Immich",              "icon": "camera",      "category": "media",      "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "PhotoPrism",               "service_name": "PhotoPrism",          "icon": "camera",      "category": "media",      "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Calibre[- ]Web",           "service_name": "Calibre-Web",         "icon": "book",        "category": "media",      "suggested_node_type": "server"},
+
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Sonarr",                   "service_name": "Sonarr",              "icon": "tv",          "category": "download",   "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Radarr",                   "service_name": "Radarr",              "icon": "film",        "category": "download",   "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Lidarr",                   "service_name": "Lidarr",              "icon": "music",       "category": "download",   "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Readarr",                  "service_name": "Readarr",             "icon": "book",        "category": "download",   "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Prowlarr",                 "service_name": "Prowlarr",            "icon": "search",      "category": "download",   "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Bazarr",                   "service_name": "Bazarr",              "icon": "subtitles",   "category": "download",   "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "qBittorrent",              "service_name": "qBittorrent",         "icon": "download",    "category": "download",   "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "SABnzbd",                  "service_name": "SABnzbd",             "icon": "download",    "category": "download",   "suggested_node_type": "server"},
+
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Homarr",                   "service_name": "Homarr",              "icon": "home",        "category": "web",        "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Heimdall",                 "service_name": "Heimdall",            "icon": "home",        "category": "web",        "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Dashy",                    "service_name": "Dashy",               "icon": "home",        "category": "web",        "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Organizr",                 "service_name": "Organizr",            "icon": "home",        "category": "web",        "suggested_node_type": "server"},
+
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Portainer",                "service_name": "Portainer",           "icon": "box",         "category": "containers", "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Dockge",                   "service_name": "Dockge",              "icon": "box",         "category": "containers", "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Yacht",                    "service_name": "Yacht",               "icon": "box",         "category": "containers", "suggested_node_type": "server"},
+
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Home Assistant",           "service_name": "Home Assistant",      "icon": "home",        "category": "automation", "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Node-RED",                 "service_name": "Node-RED",            "icon": "share-2",     "category": "automation", "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Zigbee2MQTT",              "service_name": "Zigbee2MQTT",         "icon": "radio",       "category": "automation", "suggested_node_type": "iot"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "ESPHome",                  "service_name": "ESPHome",             "icon": "cpu",         "category": "automation", "suggested_node_type": "iot"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "openHAB",                  "service_name": "openHAB",             "icon": "home",        "category": "automation", "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Domoticz",                 "service_name": "Domoticz",            "icon": "home",        "category": "automation", "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Homebridge",               "service_name": "Homebridge",          "icon": "home",        "category": "automation", "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Jeedom",                   "service_name": "Jeedom",              "icon": "home",        "category": "automation", "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Scrypted",                 "service_name": "Scrypted",            "icon": "video",       "category": "automation", "suggested_node_type": "server"},
+
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Grafana",                  "service_name": "Grafana",             "icon": "bar-chart-2", "category": "monitoring", "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Uptime Kuma",              "service_name": "Uptime Kuma",         "icon": "activity",    "category": "monitoring", "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Netdata",                  "service_name": "Netdata",             "icon": "activity",    "category": "monitoring", "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Glances",                  "service_name": "Glances",             "icon": "activity",    "category": "monitoring", "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Dozzle",                   "service_name": "Dozzle",              "icon": "terminal",    "category": "monitoring", "suggested_node_type": "server"},
+
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "AdGuard Home",             "service_name": "AdGuard Home",        "icon": "shield",      "category": "network",    "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Pi-hole",                  "service_name": "Pi-hole",             "icon": "shield",      "category": "network",    "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Nginx Proxy Manager",      "service_name": "Nginx Proxy Manager", "icon": "share-2",     "category": "network",    "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Traefik",                  "service_name": "Traefik",             "icon": "share-2",     "category": "network",    "suggested_node_type": "server"},
+
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Vaultwarden|Bitwarden",    "service_name": "Vaultwarden",         "icon": "lock",        "category": "auth",       "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Authelia",                 "service_name": "Authelia",            "icon": "lock",        "category": "auth",       "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "[Aa]uthentik",             "service_name": "Authentik",           "icon": "lock",        "category": "auth",       "suggested_node_type": "server"},
+
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Nextcloud",                "service_name": "Nextcloud",           "icon": "hard-drive",  "category": "storage",    "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Paperless",                "service_name": "Paperless-ngx",       "icon": "book",        "category": "storage",    "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Syncthing",                "service_name": "Syncthing",           "icon": "refresh-cw",  "category": "storage",    "suggested_node_type": "server"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Gitea",                    "service_name": "Gitea",               "icon": "git-branch",  "category": "dev",        "suggested_node_type": "server"},
+
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "openmediavault",           "service_name": "OpenMediaVault",      "icon": "hard-drive",  "category": "nas",        "suggested_node_type": "nas"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Unraid",                   "service_name": "Unraid",              "icon": "hard-drive",  "category": "nas",        "suggested_node_type": "nas"},
+  {"port": null, "protocol": "tcp", "banner_regex": null, "http_regex": "Cockpit",                  "service_name": "Cockpit",             "icon": "monitor",     "category": "nas",        "suggested_node_type": "server"}
 ]

backend/app/db/database.py

@@ -1,5 +1,7 @@
+import json as _json
 import logging
 import shutil
+import uuid as _uuid_mod
 from collections.abc import AsyncGenerator
 from contextlib import suppress
 from pathlib import Path
@@ -89,6 +91,8 @@ async def init_db() -> None:
             await conn.exec_driver_sql("ALTER TABLE nodes ADD COLUMN disk_gb REAL")
         with suppress(OperationalError):
             await conn.exec_driver_sql("ALTER TABLE nodes ADD COLUMN show_hardware BOOLEAN NOT NULL DEFAULT 0")
+        with suppress(OperationalError):
+            await conn.exec_driver_sql("ALTER TABLE nodes ADD COLUMN show_port_numbers BOOLEAN NOT NULL DEFAULT 0")
         with suppress(OperationalError):
             await conn.exec_driver_sql("ALTER TABLE nodes ADD COLUMN width REAL")
         with suppress(OperationalError):
@@ -168,20 +172,113 @@ async def init_db() -> None:
         except OperationalError as exc:
             logger.warning("pending_devices ip-nullable rebuild failed: %s", exc)
         # --- end Zigbee schema migrations -------------------------------------
+        # --- Electrical designs schema migrations -----------------------------
+        # Create designs table (idempotent)
+        await _try_migrate(
+            conn,
+            "CREATE TABLE IF NOT EXISTS designs ("
+            "id VARCHAR PRIMARY KEY,"
+            "name VARCHAR NOT NULL,"
+            "design_type VARCHAR NOT NULL DEFAULT 'network',"
+            "created_at DATETIME,"
+            "updated_at DATETIME"
+            ")",
+            label="designs.table",
+        )
+        # Add user-chosen icon to designs (idempotent), then backfill existing rows
+        # so legacy designs keep a sensible icon based on their original type.
+        await _try_migrate(
+            conn, "ALTER TABLE designs ADD COLUMN icon VARCHAR", label="designs.icon",
+        )
+        with suppress(OperationalError):
+            await conn.exec_driver_sql(
+                "UPDATE designs SET icon = 'zap' WHERE icon IS NULL AND design_type = 'electrical'"
+            )
+        with suppress(OperationalError):
+            await conn.exec_driver_sql(
+                "UPDATE designs SET icon = 'dashboard' WHERE icon IS NULL"
+            )
+        # Seed default Network Topology design if designs table is empty
+        _default_design_id = str(_uuid_mod.uuid4())
+        row = await conn.exec_driver_sql("SELECT COUNT(*) FROM designs")
+        count_row = row.fetchone()
+        count = count_row[0] if count_row else 0
+        if count == 0:
+            await conn.exec_driver_sql(
+                "INSERT INTO designs (id, name, design_type, icon, created_at, updated_at) "
+                "VALUES (?, 'Network Topology', 'network', 'dashboard', datetime('now'), datetime('now'))",
+                (_default_design_id,),
+            )
+        else:
+            row2 = await conn.exec_driver_sql("SELECT id FROM designs WHERE design_type = 'network' LIMIT 1")
+            default = row2.fetchone()
+            _default_design_id = default[0] if default else _default_design_id
+
+        # Add design_id to nodes
+        await _try_migrate(
+            conn, "ALTER TABLE nodes ADD COLUMN design_id VARCHAR REFERENCES designs(id)",
+            label="nodes.design_id",
+        )
+        # Assign existing nodes to default design
+        await conn.exec_driver_sql(
+            "UPDATE nodes SET design_id = ? WHERE design_id IS NULL", (_default_design_id,),
+        )
+
+        # Add design_id to edges
+        await _try_migrate(
+            conn, "ALTER TABLE edges ADD COLUMN design_id VARCHAR REFERENCES designs(id)",
+            label="edges.design_id",
+        )
+        # Assign existing edges to default design
+        await conn.exec_driver_sql(
+            "UPDATE edges SET design_id = ? WHERE design_id IS NULL", (_default_design_id,),
+        )
+
+        # Migrate canvas_state from id=1 to design_id PK (SQLite rebuild)
+        try:
+            info = await conn.exec_driver_sql("PRAGMA table_info(canvas_state)")
+            cols = info.fetchall()
+            has_design_id = any(c[1] == "design_id" for c in cols)
+            if not has_design_id:
+                logger.info("Migrating canvas_state: switching to design_id primary key")
+                await conn.exec_driver_sql("PRAGMA foreign_keys = OFF")
+                await conn.exec_driver_sql(
+                    "CREATE TABLE canvas_state_new ("
+                    "design_id VARCHAR PRIMARY KEY REFERENCES designs(id) ON DELETE CASCADE,"
+                    "viewport JSON,"
+                    "custom_style JSON,"
+                    "saved_at DATETIME"
+                    ")"
+                )
+                # Copy existing row(s), mapping id=1 to default design_id
+                old_rows = await conn.exec_driver_sql("SELECT id, viewport, custom_style, saved_at FROM canvas_state")
+                for old in old_rows.fetchall():
+                    cs_id, viewport, custom_style, saved_at = old
+                    target_design = _default_design_id
+                    await conn.exec_driver_sql(
+                        "INSERT INTO canvas_state_new (design_id, viewport, custom_style, saved_at) "
+                        "VALUES (?, ?, ?, ?)",
+                        (target_design, viewport, custom_style, saved_at),
+                    )
+                await conn.exec_driver_sql("DROP TABLE canvas_state")
+                await conn.exec_driver_sql("ALTER TABLE canvas_state_new RENAME TO canvas_state")
+                await conn.exec_driver_sql("PRAGMA foreign_keys = ON")
+        except OperationalError as exc:
+            logger.warning("canvas_state migration failed: %s", exc)
+        # --- end Electrical designs schema migrations --------------------------
+
         with suppress(OperationalError):
             await conn.exec_driver_sql("ALTER TABLE edges ADD COLUMN waypoints JSON")
         with suppress(OperationalError):
             await conn.exec_driver_sql("ALTER TABLE nodes ADD COLUMN properties JSON")
-        with suppress(OperationalError):
-            await conn.exec_driver_sql("ALTER TABLE canvas_state ADD COLUMN custom_style JSON")
         # Migrate hardware columns → properties JSON (idempotent: only runs on nodes where properties IS NULL)
         with suppress(OperationalError):
             rows = await conn.exec_driver_sql(
                 "SELECT id, cpu_model, cpu_count, ram_gb, disk_gb, show_hardware "
                 "FROM nodes WHERE properties IS NULL"
             )
-            for row in rows.fetchall():
+            for r in rows.fetchall():
-                node_id, cpu_model, cpu_count, ram_gb, disk_gb, show_hardware = row
+                node_id, cpu_model, cpu_count, ram_gb, disk_gb, show_hardware = r
                 props = []
                 visible = bool(show_hardware)
                 if cpu_model:
@@ -192,11 +289,13 @@ async def init_db() -> None:
                     props.append({"key": "RAM", "value": f"{ram_gb} GB", "icon": "MemoryStick", "visible": visible})
                 if disk_gb is not None:
                     props.append({"key": "Disk", "value": f"{disk_gb} GB", "icon": "HardDrive", "visible": visible})
-                import json as _json
                 await conn.exec_driver_sql(
                     "UPDATE nodes SET properties = ? WHERE id = ?",
                     (_json.dumps(props), node_id),
                 )
+        # Inventory timestamp: last time a scan observed this node (idempotent)
+        with suppress(OperationalError):
+            await conn.exec_driver_sql("ALTER TABLE nodes ADD COLUMN last_scan DATETIME")
         # Migrate animated column from boolean (0/1) to string ('none'/'snake')
         with suppress(OperationalError):
             await conn.exec_driver_sql("UPDATE edges SET animated = 'snake' WHERE animated = '1' OR animated = 1")

backend/app/db/models.py

@@ -16,12 +16,24 @@ def _uuid() -> str:
     return str(uuid.uuid4())
 
 
+class Design(Base):
+    __tablename__ = "designs"
+
+    id: Mapped[str] = mapped_column(String, primary_key=True, default=_uuid)
+    name: Mapped[str] = mapped_column(String, nullable=False)
+    design_type: Mapped[str] = mapped_column(String, nullable=False, default="network")
+    icon: Mapped[str | None] = mapped_column(String, nullable=True, default="dashboard")
+    created_at: Mapped[datetime] = mapped_column(DateTime(timezone=True), default=_now)
+    updated_at: Mapped[datetime] = mapped_column(DateTime(timezone=True), default=_now, onupdate=_now)
+
+
 class Node(Base):
     __tablename__ = "nodes"
 
     id: Mapped[str] = mapped_column(String, primary_key=True, default=_uuid)
     type: Mapped[str] = mapped_column(String, nullable=False)
     label: Mapped[str] = mapped_column(String, nullable=False)
+    design_id: Mapped[str | None] = mapped_column(String, ForeignKey("designs.id", ondelete="SET NULL"), nullable=True)
     hostname: Mapped[str | None] = mapped_column(String)
     ip: Mapped[str | None] = mapped_column(String)
     mac: Mapped[str | None] = mapped_column(String)
@@ -42,12 +54,14 @@ class Node(Base):
     ram_gb: Mapped[float | None] = mapped_column(Float, nullable=True)
     disk_gb: Mapped[float | None] = mapped_column(Float, nullable=True)
     show_hardware: Mapped[bool] = mapped_column(Boolean, default=False)
+    show_port_numbers: Mapped[bool] = mapped_column(Boolean, default=False)
     properties: Mapped[list[Any]] = mapped_column(JSON, default=list)
     width: Mapped[float | None] = mapped_column(Float, nullable=True)
     height: Mapped[float | None] = mapped_column(Float, nullable=True)
     bottom_handles: Mapped[int] = mapped_column(Integer, default=1)
     ieee_address: Mapped[str | None] = mapped_column(String, index=True, nullable=True)
     last_seen: Mapped[datetime | None] = mapped_column(DateTime(timezone=True))
+    last_scan: Mapped[datetime | None] = mapped_column(DateTime(timezone=True))
     response_time_ms: Mapped[int | None] = mapped_column(Integer)
     created_at: Mapped[datetime] = mapped_column(DateTime(timezone=True), default=_now)
     updated_at: Mapped[datetime] = mapped_column(DateTime(timezone=True), default=_now, onupdate=_now)
@@ -61,6 +75,7 @@ class Edge(Base):
     id: Mapped[str] = mapped_column(String, primary_key=True, default=_uuid)
     source: Mapped[str] = mapped_column(String, ForeignKey("nodes.id", ondelete="CASCADE"))
     target: Mapped[str] = mapped_column(String, ForeignKey("nodes.id", ondelete="CASCADE"))
+    design_id: Mapped[str | None] = mapped_column(String, ForeignKey("designs.id", ondelete="SET NULL"), nullable=True)
     type: Mapped[str] = mapped_column(String, default="ethernet")
     label: Mapped[str | None] = mapped_column(String)
     vlan_id: Mapped[int | None] = mapped_column(Integer)
@@ -77,7 +92,7 @@ class Edge(Base):
 class CanvasState(Base):
     __tablename__ = "canvas_state"
 
-    id: Mapped[int] = mapped_column(Integer, primary_key=True, default=1)
+    design_id: Mapped[str] = mapped_column(String, ForeignKey("designs.id", ondelete="CASCADE"), primary_key=True)
     viewport: Mapped[dict[str, Any]] = mapped_column(JSON, default=dict)
     custom_style: Mapped[dict[str, Any] | None] = mapped_column(JSON, nullable=True)
     saved_at: Mapped[datetime] = mapped_column(DateTime(timezone=True), default=_now)
@@ -85,6 +100,9 @@ class CanvasState(Base):
 
 class PendingDevice(Base):
     __tablename__ = "pending_devices"
+    # Permit the plain (non-Mapped[]) annotations on the transient request-only
+    # attributes below; without this SQLAlchemy 2.0 tries to map them as columns.
+    __allow_unmapped__ = True
 
     id: Mapped[str] = mapped_column(String, primary_key=True, default=_uuid)
     ip: Mapped[str | None] = mapped_column(String, nullable=True)
@@ -103,6 +121,16 @@ class PendingDevice(Base):
     lqi: Mapped[int | None] = mapped_column(Integer, nullable=True)
     discovered_at: Mapped[datetime] = mapped_column(DateTime(timezone=True), default=_now)
 
+    # Transient (not persisted): populated per-request by the scan routes to report
+    # how many canvases this device already appears on. Not a mapped column.
+    canvas_count: int = 0
+    # Transient (not persisted): timestamps from the linked canvas node(s),
+    # correlated by ip / ieee_address. None when the device is not on any canvas.
+    node_created_at: datetime | None = None
+    node_last_scan: datetime | None = None
+    node_last_modified: datetime | None = None
+    node_last_seen: datetime | None = None
+
 
 class PendingDeviceLink(Base):
     """Link between two Zigbee endpoints discovered during import.

backend/app/main.py

@@ -7,7 +7,7 @@ from typing import Any
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
 
-from app.api.routes import auth, canvas, edges, liveview, nodes, scan, status, zigbee
+from app.api.routes import auth, canvas, designs, edges, liveview, nodes, scan, stats, status, zigbee, zwave
 from app.api.routes import settings as settings_routes
 from app.core.config import settings
 from app.core.scheduler import start_scheduler, stop_scheduler
@@ -51,11 +51,14 @@ app.include_router(auth.router, prefix="/api/v1/auth", tags=["auth"])
 app.include_router(nodes.router, prefix="/api/v1/nodes", tags=["nodes"])
 app.include_router(edges.router, prefix="/api/v1/edges", tags=["edges"])
 app.include_router(canvas.router, prefix="/api/v1/canvas", tags=["canvas"])
+app.include_router(designs.router, prefix="/api/v1/designs", tags=["designs"])
 app.include_router(scan.router, prefix="/api/v1/scan", tags=["scan"])
 app.include_router(status.router, prefix="/api/v1/status", tags=["status"])
 app.include_router(settings_routes.router, prefix="/api/v1/settings", tags=["settings"])
 app.include_router(liveview.router, prefix="/api/v1/liveview", tags=["liveview"])
 app.include_router(zigbee.router, prefix="/api/v1/zigbee", tags=["zigbee"])
+app.include_router(zwave.router, prefix="/api/v1/zwave", tags=["zwave"])
+app.include_router(stats.router, prefix="/api/v1/stats", tags=["stats"])
 
 
 @app.get("/api/v1/health")

backend/app/schemas/canvas.py

@@ -29,6 +29,7 @@ class NodeSave(BaseModel):
     ram_gb: float | None = None
     disk_gb: float | None = None
     show_hardware: bool = False
+    show_port_numbers: bool = False
     properties: list[Any] = []
     width: float | None = None
     height: float | None = None
@@ -63,6 +64,7 @@ class CanvasSaveRequest(BaseModel):
     edges: list[EdgeSave] = []
     viewport: dict[str, Any] = {}
     custom_style: dict[str, Any] | None = None
+    design_id: str | None = None
 
 
 class CanvasStateResponse(BaseModel):

backend/app/schemas/designs.py

@@ -0,0 +1,27 @@
+from datetime import datetime
+
+from pydantic import BaseModel
+
+
+class DesignCreate(BaseModel):
+    name: str
+    icon: str = "dashboard"
+    # Vestigial: kept for backward compatibility. The UI no longer branches on it;
+    # the chosen icon now drives presentation. Defaults to a generic canvas.
+    design_type: str = "network"
+
+
+class DesignUpdate(BaseModel):
+    name: str | None = None
+    icon: str | None = None
+
+
+class DesignResponse(BaseModel):
+    id: str
+    name: str
+    design_type: str
+    icon: str | None = None
+    created_at: datetime
+    updated_at: datetime
+
+    model_config = {"from_attributes": True}

backend/app/schemas/edges.py

@@ -26,7 +26,7 @@ class EdgeBase(BaseModel):
 
 
 class EdgeCreate(EdgeBase):
-    pass
+    design_id: str | None = None
 
 
 class EdgeUpdate(BaseModel):
@@ -51,6 +51,7 @@ class EdgeUpdate(BaseModel):
 
 class EdgeResponse(EdgeBase):
     id: str
+    design_id: str | None = None
     created_at: datetime
 
     model_config = {"from_attributes": True}

backend/app/schemas/nodes.py

@@ -27,6 +27,7 @@ class NodeBase(BaseModel):
     ram_gb: float | None = None
     disk_gb: float | None = None
     show_hardware: bool = False
+    show_port_numbers: bool = False
     properties: list[dict[str, Any]] = []
     width: float | None = None
     height: float | None = None
@@ -34,7 +35,7 @@ class NodeBase(BaseModel):
 
 
 class NodeCreate(NodeBase):
-    pass
+    design_id: str | None = None
 
 
 class NodeUpdate(BaseModel):
@@ -60,6 +61,7 @@ class NodeUpdate(BaseModel):
     ram_gb: float | None = None
     disk_gb: float | None = None
     show_hardware: bool | None = None
+    show_port_numbers: bool | None = None
     properties: list[dict[str, Any]] | None = None
     width: float | None = None
     height: float | None = None
@@ -68,7 +70,10 @@ class NodeUpdate(BaseModel):
 
 class NodeResponse(NodeBase):
     id: str
+    design_id: str | None = None
+    ieee_address: str | None = None
     last_seen: datetime | None = None
+    last_scan: datetime | None = None
     response_time_ms: int | None = None
     created_at: datetime
     updated_at: datetime

backend/app/schemas/scan.py

@@ -21,6 +21,16 @@ class PendingDeviceResponse(BaseModel):
     vendor: str | None = None
     lqi: int | None = None
     discovered_at: datetime
+    # Number of distinct canvases (designs) this device already appears on,
+    # correlated by ip / ieee_address against existing nodes. Computed per-request.
+    canvas_count: int = 0
+    # Timestamps from the linked canvas node(s), correlated by ip / ieee_address.
+    # Null when the device is not on any canvas yet. Aggregated across matches:
+    # created_at = oldest; last_scan / last_modified / last_seen = newest.
+    node_created_at: datetime | None = None
+    node_last_scan: datetime | None = None
+    node_last_modified: datetime | None = None
+    node_last_seen: datetime | None = None
 
     model_config = {"from_attributes": True}
 

backend/app/schemas/zwave.py

@@ -0,0 +1,85 @@
+"""Pydantic v2 schemas for Z-Wave JS UI (zwavejs2mqtt) import."""
+
+from pydantic import BaseModel, Field, model_validator
+
+
+class ZwaveImportRequest(BaseModel):
+    mqtt_host: str = Field(..., description="MQTT broker hostname or IP address")
+    mqtt_port: int = Field(1883, ge=1, le=65535, description="MQTT broker port")
+    mqtt_username: str | None = Field(None, description="MQTT username (optional)")
+    mqtt_password: str | None = Field(None, description="MQTT password (optional)")
+    prefix: str = Field("zwave", description="Z-Wave JS UI MQTT prefix")
+    gateway_name: str = Field("zwavejs2mqtt", description="Z-Wave JS UI gateway name")
+    mqtt_tls: bool = Field(False, description="Enable TLS (typically port 8883)")
+    mqtt_tls_insecure: bool = Field(
+        False, description="Skip TLS certificate verification (self-signed only)"
+    )
+
+    @model_validator(mode="after")
+    def _insecure_requires_tls(self) -> "ZwaveImportRequest":
+        if self.mqtt_tls_insecure and not self.mqtt_tls:
+            raise ValueError("mqtt_tls_insecure requires mqtt_tls=true")
+        return self
+
+
+class ZwaveTestConnectionRequest(BaseModel):
+    mqtt_host: str
+    mqtt_port: int = Field(1883, ge=1, le=65535)
+    mqtt_username: str | None = None
+    mqtt_password: str | None = None
+    mqtt_tls: bool = False
+    mqtt_tls_insecure: bool = False
+
+    @model_validator(mode="after")
+    def _insecure_requires_tls(self) -> "ZwaveTestConnectionRequest":
+        if self.mqtt_tls_insecure and not self.mqtt_tls:
+            raise ValueError("mqtt_tls_insecure requires mqtt_tls=true")
+        return self
+
+
+class ZwaveNodeOut(BaseModel):
+    """A homelable-ready node representation of a Z-Wave device."""
+
+    id: str
+    label: str
+    type: str  # zwave_coordinator | zwave_router | zwave_enddevice
+    ieee_address: str
+    friendly_name: str
+    device_type: str
+    model: str | None = None
+    vendor: str | None = None
+    lqi: int | None = None
+    parent_id: str | None = None
+
+
+class ZwaveEdgeOut(BaseModel):
+    source: str
+    target: str
+
+
+class ZwaveImportResponse(BaseModel):
+    nodes: list[ZwaveNodeOut]
+    edges: list[ZwaveEdgeOut]
+    device_count: int
+
+
+class ZwaveTestConnectionResponse(BaseModel):
+    connected: bool
+    message: str
+
+
+class ZwaveCoordinatorOut(BaseModel):
+    id: str
+    label: str
+    ieee_address: str
+
+
+class ZwaveImportPendingResponse(BaseModel):
+    """Result of importing a Z-Wave network into the pending section."""
+
+    pending_created: int
+    pending_updated: int
+    coordinator: ZwaveCoordinatorOut | None = None
+    coordinator_already_existed: bool = False
+    links_recorded: int
+    device_count: int

backend/app/services/fingerprint.py

@@ -6,6 +6,7 @@ from pathlib import Path
 from typing import Any
 
 _SIGNATURES: list[dict[str, Any]] | None = None
+_OUI_MAP: dict[str, str] | None = None
 _LOCK = threading.Lock()
 
 
@@ -26,25 +27,124 @@ def _load() -> list[dict[str, Any]]:
     return _SIGNATURES
 
 
-def match_port(port: int, protocol: str, banner: str | None = None) -> dict[str, Any] | None:
+def _load_oui() -> dict[str, str]:
-    """Return the first signature matching port+protocol, optionally banner."""
+    """Load OUI database and flatten to {prefix: node_type}."""
-    for sig in _load():
+    global _OUI_MAP
-        if sig["port"] != port or sig["protocol"] != protocol:
+    if _OUI_MAP is None:
-            continue
+        with _LOCK:
-        if sig.get("banner_regex") and (not banner or not re.search(sig["banner_regex"], banner, re.IGNORECASE)):
+            if _OUI_MAP is None:
-            continue
+                path = Path(__file__).parent.parent / "data" / "oui_database.json"
-        return sig
+                try:
-    return None
+                    with open(path) as f:
+                        entries = json.load(f)
+                except FileNotFoundError as err:
+                    raise FileNotFoundError(
+                        f"oui_database.json not found at {path}. "
+                        "This file should be bundled with the application."
+                    ) from err
+                _OUI_MAP = {
+                    prefix.lower(): entry["type"]
+                    for entry in entries
+                    for prefix in entry["prefixes"]
+                }
+    return _OUI_MAP
 
 
-def fingerprint_ports(open_ports: list[dict[str, Any]]) -> list[dict[str, Any]]:
+def _http_regex_hit(sig: dict[str, Any], http_signals: dict[str, Any] | None) -> bool:
+    """True when the signature's http_regex matches the probe's title/headers."""
+    rx = sig.get("http_regex")
+    if not rx or not http_signals:
+        return False
+    headers = http_signals.get("headers") or {}
+    haystack = " ".join(
+        s for s in (
+            http_signals.get("title"),
+            headers.get("Server"),
+            headers.get("X-Powered-By"),
+        ) if s
+    )
+    return bool(haystack and re.search(rx, haystack, re.IGNORECASE))
+
+
+def _service_tier(
+    sig: dict[str, Any],
+    port: int,
+    protocol: str,
+    banner: str | None,
+    http_signals: dict[str, Any] | None,
+) -> int | None:
     """
-    Given a list of {port, protocol, banner?} dicts, return matched services.
+    Rank how well a signature matches (lower = stronger). None = not a match.
-    Unknown ports are included as unknown_service.
+
+    Tier 1: port match + http_regex confirmed
+    Tier 2: port match + banner_regex confirmed
+    Tier 3: port-agnostic (port: null) + http_regex confirmed
+    Tier 4: port match only (no regex, or http_regex with probe disabled)
+
+    When http_signals is None (probe not run) an http_regex entry degrades to
+    a port-only match — identical to pre-probe behaviour, no regression.
+    When http_signals is provided, http_regex is strict: a miss disqualifies.
+    """
+    probe_ran = http_signals is not None
+    has_http = bool(sig.get("http_regex"))
+
+    # Port-agnostic entries (port: null) match purely on HTTP signals.
+    if sig.get("port") is None:
+        if has_http and _http_regex_hit(sig, http_signals):
+            return 3
+        return None
+
+    if sig["port"] != port or sig["protocol"] != protocol:
+        return None
+
+    # http_regex is authoritative once a probe has run.
+    if has_http and probe_ran:
+        return 1 if _http_regex_hit(sig, http_signals) else None
+
+    if sig.get("banner_regex"):
+        if banner and re.search(sig["banner_regex"], banner, re.IGNORECASE):
+            return 2
+        return None
+
+    # No regex constraint (or http_regex but probe disabled) → port-only guess.
+    return 4
+
+
+def match_service(
+    port: int,
+    protocol: str,
+    banner: str | None = None,
+    http_signals: dict[str, Any] | None = None,
+) -> dict[str, Any] | None:
+    """Return the best signature for a port, walking tiers most-specific first."""
+    best: dict[str, Any] | None = None
+    best_tier = 99
+    for sig in _load():
+        tier = _service_tier(sig, port, protocol, banner, http_signals)
+        if tier is not None and tier < best_tier:
+            best, best_tier = sig, tier
+            if best_tier == 1:
+                break  # strongest possible — stop early
+    return best
+
+
+def match_port(port: int, protocol: str, banner: str | None = None) -> dict[str, Any] | None:
+    """Back-compat alias: match without HTTP-probe signals."""
+    return match_service(port, protocol, banner)
+
+
+def fingerprint_ports(
+    open_ports: list[dict[str, Any]],
+) -> list[dict[str, Any]]:
+    """
+    Given a list of {port, protocol, banner?, http_signals?} dicts, return
+    matched services. Unknown ports are included as unknown_service.
     """
     results = []
     for p in open_ports:
-        sig = match_port(p["port"], p.get("protocol", "tcp"), p.get("banner"))
+        sig = match_service(
+            p["port"], p.get("protocol", "tcp"), p.get("banner"), p.get("http_signals")
+        )
         if sig:
             results.append({
                 "port": p["port"],
@@ -65,55 +165,12 @@ def fingerprint_ports(open_ports: list[dict[str, Any]]) -> list[dict[str, Any]]:
     return results
 
 
-# Known OUI prefixes — lowercase, colon-separated, first 3 octets
-_MAC_OUI_TYPES: dict[str, str] = {
-    # Hypervisors / VMs
-    "52:54:00": "vm",    # QEMU/KVM (Proxmox VMs)
-    "bc:24:11": "vm",    # Proxmox official OUI (VMs and LXC, 7.3+)
-    "00:50:56": "vm",    # VMware
-    "00:0c:29": "vm",    # VMware Workstation / Fusion
-    "08:00:27": "vm",    # VirtualBox
-    "00:15:5d": "vm",    # Hyper-V
-    # Shelly
-    "34:94:54": "iot",
-    "84:f3:eb": "iot",
-    "ec:fa:bc": "iot",
-    "30:c6:f7": "iot",
-    # Espressif (ESP8266 / ESP32 — used by Sonoff, many DIY IoT)
-    "a0:20:a6": "iot",
-    "24:62:ab": "iot",
-    "30:ae:a4": "iot",
-    "cc:50:e3": "iot",
-    "ac:67:b2": "iot",
-    "b4:e6:2d": "iot",
-    "3c:71:bf": "iot",
-    "8c:aa:b5": "iot",
-    # Sonoff / ITEAD
-    "dc:4f:22": "iot",
-    "e8:db:84": "iot",
-    # Tapo / TP-Link smart home
-    "b0:a7:b9": "iot",
-    "50:c7:bf": "iot",
-    "1c:3b:f3": "iot",
-    "10:27:f5": "iot",
-    # Philips Hue
-    "00:17:88": "iot",
-    "ec:b5:fa": "iot",
-    # IKEA Tradfri
-    "34:13:e8": "iot",
-    "00:21:2e": "iot",
-    # Tuya / Smart Life (widely used chip in many brands)
-    "d8:f1:5b": "iot",
-    "68:57:2d": "iot",
-}
-
-
 def suggest_type_from_mac(mac: str | None) -> str | None:
     """Return a suggested node type from MAC OUI, or None if unknown."""
     if not mac:
         return None
     prefix = mac.lower()[:8]
-    return _MAC_OUI_TYPES.get(prefix)
+    return _load_oui().get(prefix)
 
 
 _PORT_TYPE_HINTS: dict[int, str] = {

backend/app/services/http_probe.py

@@ -0,0 +1,85 @@
+"""HTTP probe: GET a discovered port and extract identifying signals.
+
+Used by the optional deep-scan mode to confirm what service sits behind an
+open port, regardless of port number. Returns the page <title> plus a small
+set of identifying response headers, which fingerprint.match_service() then
+matches against signature http_regex fields.
+"""
+import asyncio
+import logging
+import re
+from typing import Any
+
+import httpx
+
+logger = logging.getLogger(__name__)
+
+# Headers that commonly carry the application name.
+_SIGNAL_HEADERS = ("Server", "X-Powered-By")
+# Cap how much body we read when hunting for <title> — avoids large downloads.
+_MAX_BODY_BYTES = 64 * 1024
+_TITLE_RE = re.compile(r"<title[^>]*>(.*?)</title>", re.IGNORECASE | re.DOTALL)
+_PROBE_TIMEOUT = 3.0
+# Ports we never bother probing over HTTP (not web services).
+_NON_HTTP_PORTS = frozenset({22, 21, 23, 25, 53, 110, 143, 161, 162, 179, 445, 3306, 5432, 6379})
+
+
+def _extract_title(body: str) -> str | None:
+    m = _TITLE_RE.search(body)
+    if not m:
+        return None
+    title = re.sub(r"\s+", " ", m.group(1)).strip()
+    return title or None
+
+
+async def _probe_scheme(client: httpx.AsyncClient, url: str) -> dict[str, Any] | None:
+    try:
+        resp = await client.get(url, follow_redirects=True)
+    except (httpx.HTTPError, OSError):
+        return None
+    headers = {h: resp.headers[h] for h in _SIGNAL_HEADERS if h in resp.headers}
+    body = resp.text[:_MAX_BODY_BYTES] if resp.text else ""
+    title = _extract_title(body)
+    if not title and not headers:
+        return None
+    return {"title": title, "headers": headers}
+
+
+async def probe_port(
+    ip: str, port: int, verify_tls: bool = False
+) -> dict[str, Any] | None:
+    """
+    GET https:// then http:// for a port and return {title, headers} or None.
+
+    None means the port did not answer HTTP or yielded no usable signal.
+    """
+    if port in _NON_HTTP_PORTS:
+        return None
+    async with httpx.AsyncClient(verify=verify_tls, timeout=_PROBE_TIMEOUT) as client:
+        for scheme in ("https", "http"):
+            result = await _probe_scheme(client, f"{scheme}://{ip}:{port}/")
+            if result is not None:
+                return result
+    return None
+
+
+async def probe_open_ports(
+    ip: str,
+    open_ports: list[dict[str, Any]],
+    verify_tls: bool = False,
+    concurrency: int = 50,
+) -> list[dict[str, Any]]:
+    """
+    Probe every open port for HTTP signals (option 2: probe all, match after).
+
+    Returns the same port dicts, each enriched with an http_signals key
+    (None when the port gave no HTTP signal).
+    """
+    sem = asyncio.Semaphore(concurrency)
+
+    async def _one(p: dict[str, Any]) -> dict[str, Any]:
+        async with sem:
+            signals = await probe_port(ip, p["port"], verify_tls)
+        return {**p, "http_signals": signals}
+
+    return await asyncio.gather(*(_one(p) for p in open_ports))

backend/app/services/mqtt_common.py

@@ -0,0 +1,168 @@
+"""Shared MQTT helpers for the Zigbee and Z-Wave import services.
+
+Holds the credential-safe error sanitizer, the TLS context builder, and a
+generic request/response round-trip over MQTT used by gateway-style APIs
+(publish a request topic, wait for a single response topic message).
+"""
+
+from __future__ import annotations
+
+import asyncio
+import json
+import logging
+import ssl
+from typing import Any
+
+logger = logging.getLogger(__name__)
+
+try:
+    import aiomqtt
+except ImportError:  # pragma: no cover
+    aiomqtt = None  # type: ignore[assignment]
+
+_CONNECTION_TIMEOUT = 5.0   # seconds to verify broker reachability
+_RESPONSE_TIMEOUT = 300.0   # seconds to wait for a gateway response (large meshes are slow)
+
+
+def _sanitize_mqtt_error(exc: BaseException) -> str:
+    """Return a generic, credential-free message for an MQTT error.
+
+    The raw aiomqtt/paho error string can include the broker URI with
+    embedded credentials (e.g. ``mqtt://user:pass@host``) or auth-related
+    detail that should not leak to API clients. Map known patterns to
+    coarse categories; default to a generic failure message. The original
+    exception is logged at WARNING level for operator debugging.
+    """
+    logger.warning("MQTT error (sanitized for client): %r", exc)
+    raw = str(exc).lower()
+    if "not authoriz" in raw or "bad user" in raw or "bad username" in raw:
+        return "Authentication failed"
+    if "refused" in raw:
+        return "Connection refused by broker"
+    if "name or service not known" in raw or "getaddrinfo" in raw or "nodename nor servname" in raw:
+        return "Broker hostname could not be resolved"
+    if "ssl" in raw or "tls" in raw or "certificate" in raw:
+        return "TLS handshake failed"
+    if "timed out" in raw or "timeout" in raw:
+        return "Connection to broker timed out"
+    return "MQTT connection failed"
+
+
+def _build_tls_context(insecure: bool) -> ssl.SSLContext:
+    """Build an SSL context for MQTT TLS. If insecure, skip verification."""
+    ctx = ssl.create_default_context()
+    if insecure:
+        logger.warning(
+            "MQTT TLS certificate verification is DISABLED — "
+            "use only with self-signed brokers on trusted networks."
+        )
+        ctx.check_hostname = False
+        ctx.verify_mode = ssl.CERT_NONE
+    return ctx
+
+
+async def request_response(
+    mqtt_host: str,
+    mqtt_port: int,
+    request_topic: str,
+    response_topic: str,
+    request_payload: dict[str, Any],
+    username: str | None = None,
+    password: str | None = None,
+    tls: bool = False,
+    tls_insecure: bool = False,
+    response_timeout: float = _RESPONSE_TIMEOUT,
+) -> dict[str, Any]:
+    """Publish ``request_payload`` to ``request_topic`` and return the first
+    JSON message received on ``response_topic`` as a dict.
+
+    Raises:
+        ImportError: if aiomqtt is not installed.
+        TimeoutError: if no response arrives in time.
+        ConnectionError: if the broker cannot be reached.
+        ValueError: if the response payload is not valid JSON / is empty.
+    """
+    if aiomqtt is None:  # pragma: no cover
+        raise ImportError(
+            "aiomqtt is required for MQTT import. "
+            "Install it with: pip install aiomqtt"
+        )
+
+    response_payload: dict[str, Any] = {}
+    tls_context = _build_tls_context(tls_insecure) if tls else None
+
+    try:
+        async with aiomqtt.Client(
+            hostname=mqtt_host,
+            port=mqtt_port,
+            username=username,
+            password=password,
+            timeout=_CONNECTION_TIMEOUT,
+            tls_context=tls_context,
+        ) as client:
+            await client.subscribe(response_topic)
+            # Give the broker a brief window to register the subscription
+            # before we publish the request. Without this, brokers that
+            # race SUBACK with our PUBLISH may deliver the response before
+            # the subscription is active and we'd hang until timeout.
+            await asyncio.sleep(0.1)
+            await client.publish(request_topic, json.dumps(request_payload))
+
+            async def _wait_for_response() -> None:
+                async for message in client.messages:
+                    if str(message.topic) != response_topic:
+                        continue
+                    raw = message.payload
+                    try:
+                        payload_str = (
+                            raw.decode() if isinstance(raw, bytes | bytearray) else str(raw)
+                        )
+                        response_payload.update(json.loads(payload_str))
+                    except (json.JSONDecodeError, TypeError) as exc:
+                        raise ValueError(f"Malformed MQTT response: {exc}") from exc
+                    return
+
+            await asyncio.wait_for(_wait_for_response(), timeout=response_timeout)
+
+    except aiomqtt.MqttError as exc:
+        raise ConnectionError(_sanitize_mqtt_error(exc)) from exc
+    except asyncio.TimeoutError as exc:
+        raise TimeoutError("Timed out waiting for MQTT response") from exc
+
+    if not response_payload:
+        raise ValueError("Empty MQTT response received")
+
+    return response_payload
+
+
+async def test_connection(
+    mqtt_host: str,
+    mqtt_port: int,
+    username: str | None = None,
+    password: str | None = None,
+    tls: bool = False,
+    tls_insecure: bool = False,
+) -> bool:
+    """Attempt a quick MQTT connection to verify broker reachability.
+
+    Returns True on success, raises ConnectionError/TimeoutError on failure.
+    """
+    if aiomqtt is None:  # pragma: no cover
+        raise ImportError("aiomqtt is required")
+
+    tls_context = _build_tls_context(tls_insecure) if tls else None
+
+    try:
+        async with aiomqtt.Client(
+            hostname=mqtt_host,
+            port=mqtt_port,
+            username=username,
+            password=password,
+            timeout=_CONNECTION_TIMEOUT,
+            tls_context=tls_context,
+        ):
+            return True
+    except aiomqtt.MqttError as exc:
+        raise ConnectionError(_sanitize_mqtt_error(exc)) from exc
+    except asyncio.TimeoutError as exc:
+        raise TimeoutError("Connection to broker timed out") from exc

backend/app/services/scanner.py

@@ -7,14 +7,16 @@ import re
 import socket
 import subprocess
 import threading
+from dataclasses import dataclass, field
 from datetime import datetime, timezone
 from typing import Any
 
-from sqlalchemy import select
+from sqlalchemy import or_, select
 from sqlalchemy.ext.asyncio import AsyncSession
 
 from app.db.models import Node, PendingDevice, ScanRun
 from app.services.fingerprint import fingerprint_ports, suggest_node_type
+from app.services.http_probe import probe_open_ports
 
 logger = logging.getLogger(__name__)
 
@@ -34,6 +36,37 @@ _EXTRA_PORTS = (
     "16686,34567,37777,51413,64738"
 )
 
+# nmap -p accepts "N" or "N-M"; user ranges are validated against this.
+_PORT_RANGE_RE = re.compile(r"^\d{1,5}(-\d{1,5})?$")
+
+
+@dataclass
+class DeepScanOptions:
+    """Per-scan deep-scan settings (None/empty → standard scan, today's behaviour)."""
+
+    http_ranges: list[str] = field(default_factory=list)
+    http_probe_enabled: bool = False
+    verify_tls: bool = False
+
+
+def _valid_port_range(spec: str) -> bool:
+    if not _PORT_RANGE_RE.match(spec):
+        return False
+    parts = [int(p) for p in spec.split("-")]
+    if any(p < 1 or p > 65535 for p in parts):
+        return False
+    return len(parts) == 1 or parts[0] <= parts[1]
+
+
+def _build_port_spec(http_ranges: list[str] | None) -> str:
+    """Combine the default port list with validated user ranges for nmap -p."""
+    if not http_ranges:
+        return _EXTRA_PORTS
+    extra = [r.strip() for r in http_ranges if _valid_port_range(r.strip())]
+    if not extra:
+        return _EXTRA_PORTS
+    return _EXTRA_PORTS + "," + ",".join(extra)
+
 _MDNS_SERVICE_TYPES = [
     "_http._tcp.local.",
     "_shelly._tcp.local.",
@@ -142,7 +175,7 @@ def _arp_table_hosts(network: str) -> dict[str, dict[str, Any]]:
         return {}
 
 
-async def _ping_sweep(target: str) -> dict[str, dict[str, Any]]:
+async def _ping_sweep(target: str, run_id: str | None = None) -> dict[str, dict[str, Any]]:
     """
     Phase 1: Concurrent ICMP ping sweep + ARP cache.
     Pings all IPs in the CIDR in parallel (up to 50 at once, 1s timeout each).
@@ -172,6 +205,12 @@ async def _ping_sweep(target: str) -> dict[str, dict[str, Any]]:
     alive_ips: set[str] = {ip for ip in ping_results if ip is not None}
     logger.info("[Phase 1] %d/%d hosts responded to ping", len(alive_ips), len(all_ips))
 
+    # Cancelled during the sweep — bail before the (potentially long) Phase 2
+    # port scan. Returning empty makes _nmap_scan skip nmap entirely.
+    if run_id is not None and _is_cancelled(run_id):
+        logger.info("[Phase 1] %s — scan cancelled, skipping hostname/ARP enrichment", target)
+        return {}
+
     # ARP cache: catch devices that block ICMP but were recently active,
     # and enrich ping-alive hosts with their MAC addresses.
     arp_cache = await asyncio.to_thread(_arp_table_hosts, target)
@@ -195,7 +234,7 @@ async def _ping_sweep(target: str) -> dict[str, dict[str, Any]]:
     return alive
 
 
-def _nmap_scan_single(host_dict: dict[str, Any]) -> dict[str, Any]:
+def _nmap_scan_single(host_dict: dict[str, Any], port_spec: str = _EXTRA_PORTS) -> dict[str, Any]:
     """
     Phase 2 — single-IP port scan with service detection.
     Runs in a thread (blocking). Returns the host dict enriched with open_ports.
@@ -210,11 +249,11 @@ def _nmap_scan_single(host_dict: dict[str, Any]) -> dict[str, Any]:
     is_root = os.geteuid() == 0
     if is_root:
         # SYN scan + version detection (fastest, most accurate)
-        scan_args = f"-sS -sV --open -T4 -Pn --host-timeout 60s -p {_EXTRA_PORTS}"
+        scan_args = f"-sS -sV --open -T4 -Pn --host-timeout 60s -p {port_spec}"
     else:
         # TCP connect scan (-sT) — no raw sockets needed, works without root.
         # nmap auto-selects -sT without root but being explicit avoids edge cases.
-        scan_args = f"-sT -sV --open -T4 -Pn --host-timeout 60s -p {_EXTRA_PORTS}"
+        scan_args = f"-sT -sV --open -T4 -Pn --host-timeout 60s -p {port_spec}"
 
     logger.debug("[Phase 2] %s args: %s", ip, scan_args)
     nm = nmap.PortScanner()
@@ -252,7 +291,10 @@ def _nmap_scan_single(host_dict: dict[str, Any]) -> dict[str, Any]:
     return host_dict
 
 
-async def _nmap_port_scan(alive: dict[str, dict[str, Any]]) -> list[dict[str, Any]]:
+async def _nmap_port_scan(
+    alive: dict[str, dict[str, Any]], port_spec: str = _EXTRA_PORTS,
+    run_id: str | None = None,
+) -> list[dict[str, Any]]:
     """
     Phase 2: Per-IP service detection with bounded concurrency.
     Each host is scanned independently in a thread — no inter-host timeout interference.
@@ -266,7 +308,12 @@ async def _nmap_port_scan(alive: dict[str, dict[str, Any]]) -> list[dict[str, An
 
     async def _scan_with_sem(host_dict: dict[str, Any]) -> dict[str, Any]:
         async with semaphore:
-            return await asyncio.to_thread(_nmap_scan_single, host_dict)
+            # Once cancelled, skip the expensive nmap call for every host still
+            # queued behind the semaphore — return it unscanned so the gather
+            # unwinds fast instead of blocking the stop for minutes.
+            if run_id is not None and _is_cancelled(run_id):
+                return host_dict
+            return await asyncio.to_thread(_nmap_scan_single, host_dict, port_spec)
 
     raw = await asyncio.gather(*[_scan_with_sem(h) for h in alive.values()], return_exceptions=True)
     results = []
@@ -279,24 +326,32 @@ async def _nmap_port_scan(alive: dict[str, dict[str, Any]]) -> list[dict[str, An
     return results
 
 
-async def _nmap_scan(target: str) -> list[dict[str, Any]]:
+async def _nmap_scan(
+    target: str, port_spec: str = _EXTRA_PORTS, run_id: str | None = None
+) -> list[dict[str, Any]]:
     """
     Two-phase scan for a CIDR range.
     Phase 1: Concurrent ping sweep to find alive hosts (fast, no false positives).
     Phase 2: Per-IP nmap port scan with service detection (bounded concurrency, 10 at a time).
+
+    ``run_id`` lets each phase poll for cancellation so a stop request takes
+    effect mid-range instead of only at CIDR/host boundaries in run_scan.
     """
     logger.info("[Scan] Starting scan for %s — nmap available: %s", target, _NMAP_AVAILABLE)
+    if run_id is not None and _is_cancelled(run_id):
+        logger.info("[Scan] %s — cancelled before start, skipping", target)
+        return []
     if not _NMAP_AVAILABLE:
         logger.warning("[Scan] nmap not available — returning mock data")
         return _mock_scan(target)
     try:
-        alive = await _ping_sweep(target)
+        alive = await _ping_sweep(target, run_id=run_id)
         logger.info("[Phase 1] Found %d alive host(s) in %s: %s",
                     len(alive), target, ", ".join(sorted(alive.keys())))
     except Exception as exc:
         logger.error("Phase 1 ping sweep failed: %s", exc)
         raise RuntimeError(str(exc)) from exc
-    return await _nmap_port_scan(alive)
+    return await _nmap_port_scan(alive, port_spec, run_id=run_id)
 
 
 async def _mdns_discover(timeout: float = 4.0) -> list[dict[str, Any]]:
@@ -375,10 +430,50 @@ def _mock_scan(target: str) -> list[dict[str, Any]]:
     ]
 
 
-async def run_scan(ranges: list[str], db: AsyncSession, run_id: str) -> None:
+async def _dedupe_pending_by_ip(db: AsyncSession) -> int:
+    """Collapse duplicate non-hidden inventory rows that share an IP into one.
+
+    Keeps an ``approved`` row when present (it carries canvas-link semantics),
+    otherwise the oldest row, and deletes the rest. Returns the number deleted.
+    """
+    rows = (await db.execute(
+        select(PendingDevice)
+        .where(PendingDevice.status != "hidden", PendingDevice.ip.isnot(None))
+        .order_by(PendingDevice.discovered_at)
+    )).scalars().all()
+
+    by_ip: dict[str, list[PendingDevice]] = {}
+    for row in rows:
+        if row.ip is None:  # guarded by the query, but keeps the type checker happy
+            continue
+        by_ip.setdefault(row.ip, []).append(row)
+
+    deleted = 0
+    for group in by_ip.values():
+        if len(group) < 2:
+            continue
+        keep = next((r for r in group if r.status == "approved"), group[0])
+        for dup in group:
+            if dup is not keep:
+                await db.delete(dup)
+                deleted += 1
+    if deleted:
+        await db.commit()
+    return deleted
+
+
+async def run_scan(
+    ranges: list[str],
+    db: AsyncSession,
+    run_id: str,
+    deep_scan: DeepScanOptions | None = None,
+) -> None:
     """Execute scan for given CIDR ranges and populate pending_devices."""
     from app.api.routes.status import broadcast_scan_update
 
+    deep_scan = deep_scan or DeepScanOptions()
+    port_spec = _build_port_spec(deep_scan.http_ranges)
+
     devices_found = 0
     mdns_task: asyncio.Task[list[dict[str, Any]]] | None = None
     try:
@@ -389,25 +484,18 @@ async def run_scan(ranges: list[str], db: AsyncSession, run_id: str) -> None:
             except ValueError:
                 raise ValueError(f"Invalid CIDR range: {r!r}") from None
 
-        # Pre-fetch canvas IPs and hidden IPs once — avoids N+1 queries per host
+        # Pre-fetch hidden IPs once — avoids N+1 queries per host.
-        canvas_ips_result = await db.execute(select(Node.ip).where(Node.ip.isnot(None)))
+        # Devices already on a canvas are intentionally NOT suppressed: they stay
-        canvas_ips: set[str] = {row[0] for row in canvas_ips_result.fetchall()}
+        # in the inventory and are badged "In N canvas" via per-request correlation.
-
         hidden_ips_result = await db.execute(
             select(PendingDevice.ip).where(PendingDevice.status == "hidden")
         )
         hidden_ips: set[str] = {row[0] for row in hidden_ips_result.fetchall()}
 
-        # Clean up stale pending devices whose IPs are already in the canvas
+        # Collapse any pre-existing duplicate inventory rows (same IP, non-hidden)
-        if canvas_ips:
+        # left over from older scans, so the device shows up exactly once even if
-            from sqlalchemy import delete as sa_delete
+        # it isn't re-discovered this run (e.g. now offline).
-            await db.execute(
+        await _dedupe_pending_by_ip(db)
-                sa_delete(PendingDevice).where(
-                    PendingDevice.status == "pending",
-                    PendingDevice.ip.in_(canvas_ips),
-                )
-            )
-            await db.commit()
 
         # Start mDNS discovery in the background while nmap scans run
         mdns_task = asyncio.create_task(_mdns_discover())
@@ -419,30 +507,48 @@ async def run_scan(ranges: list[str], db: AsyncSession, run_id: str) -> None:
             nonlocal devices_found
             ip = host["ip"]
 
-            # Skip canvas nodes and user-hidden devices (sets pre-fetched before loop)
+            # Skip only user-hidden devices. On-canvas devices are kept so they
-            if ip in canvas_ips:
+            # surface in the inventory with a canvas-presence badge.
-                logger.debug("Skipping %s — already in canvas", ip)
-                return
             if ip in hidden_ips:
                 logger.debug("Skipping %s — hidden by user", ip)
                 return
 
-            services = fingerprint_ports(host["open_ports"])
+            open_ports = host["open_ports"]
-            suggested_type = suggest_node_type(host["open_ports"], host.get("mac"))
+            # Deep-scan HTTP probe: enrich open ports with title/header signals so
-
+            # fingerprint can confirm services on custom ports. No-op when disabled
-            existing_result = await db.execute(
+            # or when the host has no open ports (e.g. mDNS-only discovery).
-                select(PendingDevice).where(
+            if deep_scan.http_probe_enabled and open_ports:
-                    PendingDevice.ip == ip,
+                open_ports = await probe_open_ports(
-                    PendingDevice.status == "pending",
+                    ip, open_ports, verify_tls=deep_scan.verify_tls
                 )
-            )
+
-            existing = existing_result.scalar_one_or_none()
+            services = fingerprint_ports(open_ports)
-            if existing:
+            suggested_type = suggest_node_type(open_ports, host.get("mac"))
-                existing.mac = host.get("mac") or existing.mac
+
-                existing.hostname = host.get("hostname") or existing.hostname
+            # One inventory row per device (by IP). Match across pending AND
-                existing.os = host.get("os") or existing.os
+            # approved so a re-scan of an already-approved device refreshes its
-                existing.services = services
+            # row instead of spawning a fresh "pending" duplicate. Hidden rows
-                existing.suggested_type = suggested_type
+            # are already skipped above.
+            existing_rows = (await db.execute(
+                select(PendingDevice)
+                .where(PendingDevice.ip == ip, PendingDevice.status != "hidden")
+                .order_by(PendingDevice.discovered_at)
+            )).scalars().all()
+
+            if existing_rows:
+                # Prefer an approved row (it owns the canvas link semantics),
+                # otherwise the oldest. Collapse any leftover duplicates created
+                # by earlier scans.
+                keep = next((r for r in existing_rows if r.status == "approved"), existing_rows[0])
+                for dup in existing_rows:
+                    if dup is not keep:
+                        await db.delete(dup)
+                keep.mac = host.get("mac") or keep.mac
+                keep.hostname = host.get("hostname") or keep.hostname
+                keep.os = host.get("os") or keep.os
+                keep.services = services
+                keep.suggested_type = suggested_type
+                # status preserved — an approved device stays approved.
             else:
                 db.add(PendingDevice(
                     ip=ip,
@@ -456,6 +562,20 @@ async def run_scan(ranges: list[str], db: AsyncSession, run_id: str) -> None:
                 ))
                 devices_found += 1
 
+            # Stamp last_scan on any canvas node that matches this device by IP
+            # (or MAC, when known) so the inventory shows when the scanner last
+            # observed it. Matches across designs.
+            host_mac = host.get("mac")
+            node_match = [Node.ip == ip]
+            if host_mac:
+                node_match.append(Node.mac == host_mac)
+            matching_nodes = (await db.execute(
+                select(Node).where(or_(*node_match))
+            )).scalars().all()
+            scanned_at = datetime.now(timezone.utc)
+            for node in matching_nodes:
+                node.last_scan = scanned_at
+
             await db.commit()
             await broadcast_scan_update(run_id=run_id, devices_found=devices_found)
 
@@ -463,7 +583,7 @@ async def run_scan(ranges: list[str], db: AsyncSession, run_id: str) -> None:
         for cidr in ranges:
             if _is_cancelled(run_id):
                 break
-            hosts = await _nmap_scan(cidr)
+            hosts = await _nmap_scan(cidr, port_spec, run_id=run_id)
             for host in hosts:
                 if _is_cancelled(run_id):
                     break

backend/app/services/status_checker.py

@@ -24,6 +24,11 @@ async def check_node(check_method: str, target: str | None, ip: str | None) -> d
     host = target or raw_ip
     if not host:
         return {"status": "unknown", "response_time_ms": None}
+    # Reject hostnames that look like CLI flags — defends ping/tcp invocations
+    # against arg-injection if a malicious admin sets target like "-O".
+    if host.startswith("-"):
+        logger.warning("Rejecting check target that starts with '-': %r", host)
+        return {"status": "unknown", "response_time_ms": None}
 
     start = time.monotonic()
     try:
@@ -59,17 +64,35 @@ async def check_node(check_method: str, target: str | None, ip: str | None) -> d
         return {"status": "offline", "response_time_ms": None}
 
 
+def _is_ipv6(host: str) -> bool:
+    """True if host is a literal IPv6 address (bracketed or bare)."""
+    try:
+        socket.inet_pton(socket.AF_INET6, host.strip("[]"))
+        return True
+    except OSError:
+        return False
+
+
 async def _ping(host: str) -> bool:
-    # ping(8) -W flag units differ by OS:
+    # Send 2 probes with a ~2s timeout so a single dropped packet or a slow
-    #   Linux:   seconds        (-W 1   = 1s)
+    # device (ESPHome, IoT) doesn't flap a node offline. Success = any reply.
-    #   macOS:   milliseconds   (-W 1   = 1ms — fails for any RTT >1ms)
+    #
-    #   Windows: -w in ms       (-w 1000 = 1s)
+    # -W flag units differ by OS:
+    #   Linux:   seconds        (-W 2   = 2s)
+    #   macOS:   milliseconds   (-W 2000 = 2s)
+    #   Windows: -w in ms       (-w 2000 = 2s)
+    #
+    # IPv6-only hosts (e.g. Alexa) never answer IPv4 ping, so target the right
+    # stack: macOS ships a separate ping6; Linux/Windows take a -6 flag.
+    ipv6 = _is_ipv6(host)
     if sys.platform == "win32":
-        args = ["ping", "-n", "1", "-w", "1000", host]
+        family = ["-6"] if ipv6 else ["-4"]
+        args = ["ping", *family, "-n", "2", "-w", "2000", host]
     elif sys.platform == "darwin":
-        args = ["ping", "-c", "1", "-W", "1000", host]
+        args = ["ping6", "-c", "2", host] if ipv6 else ["ping", "-c", "2", "-W", "2000", host]
     else:
-        args = ["ping", "-c", "1", "-W", "1", host]
+        family = ["-6"] if ipv6 else []
+        args = ["ping", *family, "-c", "2", "-W", "2", host]
     proc = await asyncio.create_subprocess_exec(
         *args,
         stdout=asyncio.subprocess.DEVNULL,
@@ -95,3 +118,75 @@ async def _tcp_connect(host: str, port: int) -> bool:
         return True
     except (TimeoutError, OSError, socket.gaierror):
         return False
+
+
+# --- Per-service status checks ---
+
+# Ports that are not HTTP/web. These get NO status check — a service here stays
+# grey (unknown) rather than going red. An open TCP socket doesn't prove the
+# service is healthy, and a closed one flaps red misleadingly (e.g. SSH on a
+# box that simply firewalls 22). Only HTTP(S)-reachable services are checked.
+_NON_HTTP_PORTS = frozenset({
+    22, 21, 23, 25, 465, 587, 53, 110, 143, 993, 995, 389, 636, 445, 514,
+    1433, 3306, 5432, 5672, 6379, 9092, 11211, 27017, 27018,
+})
+_HTTPS_PORTS = frozenset({443, 8443})
+
+
+def _service_host(svc: dict[str, Any], host: str) -> str:
+    """Bracket bare IPv6 literals for use in a URL."""
+    return f"[{host}]" if _is_ipv6(host) else host
+
+
+async def check_service(svc: dict[str, Any], host: str | None) -> str:
+    """Check a single service. Returns 'online' | 'offline' | 'unknown'.
+
+    Only HTTP(S)-reachable services get a real check (an HTTP GET). Everything
+    else — SSH, databases, mail, DNS, raw TCP, UDP, port-less — stays 'unknown'
+    so it keeps its category colour instead of flashing red. An open TCP socket
+    doesn't prove a non-web service is healthy, so we don't pretend it does.
+    """
+    if not host or host.startswith("-"):
+        return "unknown"
+    if str(svc.get("protocol", "")).lower() == "udp":
+        return "unknown"
+
+    port = svc.get("port")
+    port = int(port) if isinstance(port, int) or (isinstance(port, str) and port.isdigit()) else None
+
+    # Non-HTTP ports (SSH 22, DB, mail, …) are never checked — keep them grey.
+    if port is not None and port in _NON_HTTP_PORTS:
+        return "unknown"
+
+    name = str(svc.get("service_name", "")).lower()
+    is_web = port is not None or "http" in name
+    if not is_web:
+        return "unknown"
+
+    try:
+        scheme = "https" if (
+            port in _HTTPS_PORTS or "https" in name or "ssl" in name or "tls" in name
+        ) else "http"
+        url_host = _service_host(svc, host)
+        url = f"{scheme}://{url_host}" + (f":{port}" if port is not None else "")
+        return "online" if await _http_get(url, verify=False) else "offline"
+    except Exception as exc:
+        logger.debug("Service check failed for %s:%s (%s)", host, port, exc)
+        return "offline"
+
+
+async def check_services(
+    host: str | None, services: list[dict[str, Any]], concurrency: int = 10
+) -> list[dict[str, Any]]:
+    """Check every service against host concurrently (bounded).
+
+    Returns a list of {port, protocol, status} dicts, one per input service.
+    """
+    sem = asyncio.Semaphore(concurrency)
+
+    async def _one(svc: dict[str, Any]) -> dict[str, Any]:
+        async with sem:
+            status = await check_service(svc, host)
+        return {"port": svc.get("port"), "protocol": svc.get("protocol"), "status": status}
+
+    return await asyncio.gather(*[_one(s) for s in services]) if services else []

backend/app/services/zigbee_service.py

@@ -5,9 +5,10 @@ from __future__ import annotations
 import asyncio
 import json
 import logging
-import ssl
 from typing import Any
 
+from app.services.mqtt_common import _build_tls_context, _sanitize_mqtt_error
+
 logger = logging.getLogger(__name__)
 
 try:
@@ -20,42 +21,56 @@ _NETWORKMAP_RESPONSE_TOPIC = "{base_topic}/bridge/response/networkmap"
 _CONNECTION_TIMEOUT = 5.0   # seconds to verify broker reachability
 _NETWORKMAP_TIMEOUT = 300.0  # seconds to wait for the networkmap response (large meshes can be slow)
 
+# Re-exported for backwards compatibility — these now live in mqtt_common.
+__all__ = ["_build_tls_context", "_sanitize_mqtt_error"]
 
-def _sanitize_mqtt_error(exc: BaseException) -> str:
-    """Return a generic, credential-free message for an MQTT error.
 
-    The raw aiomqtt/paho error string can include the broker URI with
+def build_zigbee_properties(
-    embedded credentials (e.g. ``mqtt://user:pass@host``) or auth-related
+    ieee: str | None,
-    detail that should not leak to API clients. Map known patterns to
+    vendor: str | None,
-    coarse categories; default to a generic failure message. The original
+    model: str | None,
-    exception is logged at WARNING level for operator debugging.
+    lqi: int | None,
+) -> list[dict[str, Any]]:
+    """Build a NodeProperty list for a Zigbee device (IEEE, Vendor, Model, LQI).
+
+    Only includes a row when the value is non-empty. Shape matches the
+    frontend ``NodeProperty`` type: ``{key, value, icon, visible}``.
+
+    New props default to ``visible=False`` — users opt in to showing them on
+    the canvas card from the right panel.
     """
-    logger.warning("MQTT error (sanitized for client): %r", exc)
+    props: list[dict[str, Any]] = []
-    raw = str(exc).lower()
+    if ieee:
-    if "not authoriz" in raw or "bad user" in raw or "bad username" in raw:
+        props.append({"key": "IEEE", "value": ieee, "icon": None, "visible": False})
-        return "Authentication failed"
+    if vendor:
-    if "refused" in raw:
+        props.append({"key": "Vendor", "value": vendor, "icon": None, "visible": False})
-        return "Connection refused by broker"
+    if model:
-    if "name or service not known" in raw or "getaddrinfo" in raw or "nodename nor servname" in raw:
+        props.append({"key": "Model", "value": model, "icon": None, "visible": False})
-        return "Broker hostname could not be resolved"
+    if lqi is not None:
-    if "ssl" in raw or "tls" in raw or "certificate" in raw:
+        props.append({"key": "LQI", "value": str(lqi), "icon": None, "visible": False})
-        return "TLS handshake failed"
+    return props
-    if "timed out" in raw or "timeout" in raw:
-        return "Connection to broker timed out"
-    return "MQTT connection failed"
 
 
-def _build_tls_context(insecure: bool) -> ssl.SSLContext:
+def merge_zigbee_properties(
-    """Build an SSL context for MQTT TLS. If insecure, skip verification."""
+    existing: list[dict[str, Any]] | None,
-    ctx = ssl.create_default_context()
+    new_props: list[dict[str, Any]],
-    if insecure:
+) -> list[dict[str, Any]]:
-        logger.warning(
+    """Merge fresh zigbee props into an existing property list.
-            "MQTT TLS certificate verification is DISABLED — "
+
-            "use only with self-signed brokers on trusted networks."
+    For keys already present: update ``value`` but preserve the user's
-        )
+    ``visible`` choice. New keys are appended with whatever visibility the
-        ctx.check_hostname = False
+    caller gave them (hidden by default per ``build_zigbee_properties``).
-        ctx.verify_mode = ssl.CERT_NONE
+    Non-zigbee custom properties are preserved untouched.
-    return ctx
+    """
+    out = [dict(p) for p in (existing or [])]
+    by_key = {p.get("key"): p for p in out}
+    for np in new_props:
+        key = np.get("key")
+        if key in by_key:
+            by_key[key]["value"] = np.get("value")
+        else:
+            out.append(dict(np))
+    return out
 
 
 def _z2m_type_to_homelable(device_type: str) -> str:

backend/app/services/zwave_service.py

@@ -0,0 +1,235 @@
+"""Z-Wave JS UI (zwavejs2mqtt) service: fetch the node list via the MQTT gateway API.
+
+Mirrors the Zigbee pipeline. Z-Wave JS UI exposes a request/response gateway over
+MQTT: publish to ``<prefix>/_CLIENTS/ZWAVE_GATEWAY-<gateway>/api/getNodes/set`` and
+read the answer from ``<prefix>/_CLIENTS/ZWAVE_GATEWAY-<gateway>/api/getNodes``.
+"""
+
+from __future__ import annotations
+
+import logging
+from typing import Any
+
+from app.services.mqtt_common import request_response, test_connection
+from app.services.zigbee_service import _find_parent_router, merge_zigbee_properties
+
+logger = logging.getLogger(__name__)
+
+# Reuse the zigbee merge logic verbatim — same NodeProperty shape + visibility rules.
+merge_zwave_properties = merge_zigbee_properties
+
+_REQUEST_TOPIC = "{prefix}/_CLIENTS/ZWAVE_GATEWAY-{gateway}/api/getNodes/set"
+_RESPONSE_TOPIC = "{prefix}/_CLIENTS/ZWAVE_GATEWAY-{gateway}/api/getNodes"
+
+
+def _zwave_type_to_homelable(raw: dict[str, Any]) -> str:
+    """Map a Z-Wave node's role flags to a homelable node type.
+
+    Controller → coordinator. Mains-powered / routing nodes → router.
+    Everything else (battery sensors, etc.) → end device.
+    """
+    if raw.get("isControllerNode"):
+        return "zwave_coordinator"
+    if raw.get("isRouting"):
+        return "zwave_router"
+    return "zwave_enddevice"
+
+
+def _role_label(node_type: str) -> str:
+    """Human role string stored as ``device_subtype`` / ``device_type``."""
+    return {
+        "zwave_coordinator": "Controller",
+        "zwave_router": "Router",
+        "zwave_enddevice": "EndDevice",
+    }.get(node_type, "EndDevice")
+
+
+def _node_from_zwave(raw: dict[str, Any], home_id: str) -> dict[str, Any] | None:
+    """Build a homelable node dict from a Z-Wave JS UI ``getNodes`` entry."""
+    node_id = raw.get("id")
+    if node_id is None:
+        return None
+    ieee = f"zwave-{home_id}-{node_id}"
+    node_type = _zwave_type_to_homelable(raw)
+    name = raw.get("name") or raw.get("loc") or f"Node {node_id}"
+    model = raw.get("productLabel") or raw.get("productDescription") or None
+    vendor = raw.get("manufacturer") or None
+    return {
+        "id": ieee,
+        "label": name,
+        "type": node_type,
+        "ieee_address": ieee,
+        "friendly_name": name,
+        "device_type": _role_label(node_type),
+        "node_id": node_id,
+        "model": model,
+        "vendor": vendor,
+        "lqi": None,  # Z-Wave has no LQI; RSSI may be added later.
+        "parent_id": None,
+        "neighbors": raw.get("neighbors") or [],
+    }
+
+
+def _resolve_home_id(raw_nodes: list[dict[str, Any]]) -> str:
+    """Pick a home id for the network: prefer the controller's, else any node's."""
+    controller_home = None
+    for entry in raw_nodes:
+        if not isinstance(entry, dict):
+            continue
+        home = entry.get("homeId")
+        if home is None:
+            continue
+        if entry.get("isControllerNode"):
+            return str(home)
+        if controller_home is None:
+            controller_home = str(home)
+    return controller_home or "0"
+
+
+def parse_zwave_nodes(
+    payload: dict[str, Any],
+) -> tuple[list[dict[str, Any]], list[dict[str, Any]]]:
+    """Parse a Z-Wave JS UI ``getNodes`` response into (nodes, edges).
+
+    Expected shape::
+
+        {"success": true, "result": [ {<node>}, ... ]}
+
+    Edges are a strict coordinator → router → end-device tree, derived from
+    each node's ``neighbors`` list (same approach as the Zigbee parser).
+    """
+    if payload.get("success") is False:
+        raise ValueError("Z-Wave gateway reported failure")
+
+    result = payload.get("result")
+    if result is None:
+        result = []
+    if not isinstance(result, list):
+        raise ValueError("Malformed getNodes response: 'result' is not a list")
+
+    home_id = _resolve_home_id(result)
+
+    nodes_list: list[dict[str, Any]] = []
+    seen_ids: set[str] = set()
+    coordinator_id: str | None = None
+    # Map nodeId (int) → identity string, to translate neighbors → edges.
+    id_by_node_id: dict[Any, str] = {}
+
+    for entry in result:
+        if not isinstance(entry, dict):
+            continue
+        node = _node_from_zwave(entry, home_id)
+        if node is None or node["id"] in seen_ids:
+            continue
+        seen_ids.add(node["id"])
+        id_by_node_id[node["node_id"]] = node["id"]
+        nodes_list.append(node)
+        if node["type"] == "zwave_coordinator":
+            coordinator_id = node["id"]
+
+    # Translate neighbor lists into candidate edges (only between known nodes).
+    raw_edges: list[dict[str, Any]] = []
+    for node in nodes_list:
+        src = node["id"]
+        for neighbor in node.get("neighbors") or []:
+            tgt = id_by_node_id.get(neighbor)
+            if tgt and tgt != src:
+                raw_edges.append({"source": src, "target": tgt})
+
+    # Build parent_id hierarchy: coordinator → routers → end devices.
+    if coordinator_id:
+        router_ids = {n["id"] for n in nodes_list if n["type"] == "zwave_router"}
+        for node in nodes_list:
+            if node["type"] == "zwave_router":
+                node["parent_id"] = coordinator_id
+            elif node["type"] == "zwave_enddevice":
+                parent = _find_parent_router(node["id"], router_ids, raw_edges)
+                node["parent_id"] = parent or coordinator_id
+
+    # Final edges = strict parent → child tree (one edge per non-coordinator).
+    edges_list: list[dict[str, Any]] = [
+        {"source": node["parent_id"], "target": node["id"]}
+        for node in nodes_list
+        if node.get("parent_id")
+    ]
+
+    # Drop transient helper keys before returning.
+    for node in nodes_list:
+        node.pop("neighbors", None)
+        node.pop("node_id", None)
+
+    return nodes_list, edges_list
+
+
+def build_zwave_properties(
+    ieee: str | None,
+    vendor: str | None,
+    model: str | None,
+) -> list[dict[str, Any]]:
+    """Build a NodeProperty list for a Z-Wave device (Identity, Vendor, Model).
+
+    Z-Wave has no LQI, so that row is omitted. New props default to
+    ``visible=False`` — users opt in from the right panel.
+    """
+    props: list[dict[str, Any]] = []
+    if ieee:
+        props.append({"key": "Z-Wave ID", "value": ieee, "icon": None, "visible": False})
+    if vendor:
+        props.append({"key": "Vendor", "value": vendor, "icon": None, "visible": False})
+    if model:
+        props.append({"key": "Model", "value": model, "icon": None, "visible": False})
+    return props
+
+
+async def fetch_zwave_network(
+    mqtt_host: str,
+    mqtt_port: int,
+    prefix: str = "zwave",
+    gateway_name: str = "zwavejs2mqtt",
+    username: str | None = None,
+    password: str | None = None,
+    tls: bool = False,
+    tls_insecure: bool = False,
+) -> tuple[list[dict[str, Any]], list[dict[str, Any]]]:
+    """Connect to the broker, request the Z-Wave node list, return (nodes, edges).
+
+    Raises:
+        TimeoutError: if the gateway does not respond in time.
+        ConnectionError: if the broker cannot be reached.
+        ValueError: if the response payload is malformed.
+    """
+    request_topic = _REQUEST_TOPIC.format(prefix=prefix, gateway=gateway_name)
+    response_topic = _RESPONSE_TOPIC.format(prefix=prefix, gateway=gateway_name)
+
+    payload = await request_response(
+        mqtt_host=mqtt_host,
+        mqtt_port=mqtt_port,
+        request_topic=request_topic,
+        response_topic=response_topic,
+        request_payload={"args": []},
+        username=username,
+        password=password,
+        tls=tls,
+        tls_insecure=tls_insecure,
+    )
+
+    return parse_zwave_nodes(payload)
+
+
+async def test_zwave_connection(
+    mqtt_host: str,
+    mqtt_port: int,
+    username: str | None = None,
+    password: str | None = None,
+    tls: bool = False,
+    tls_insecure: bool = False,
+) -> bool:
+    """Quick MQTT reachability check for the Z-Wave broker."""
+    return await test_connection(
+        mqtt_host=mqtt_host,
+        mqtt_port=mqtt_port,
+        username=username,
+        password=password,
+        tls=tls,
+        tls_insecure=tls_insecure,
+    )

backend/requirements.txt

@@ -7,16 +7,15 @@ alembic==1.13.3
 pydantic==2.9.2
 pydantic-settings==2.5.2
 python-jose[cryptography]==3.5.0
-passlib[bcrypt]==1.7.4
+bcrypt==4.2.1
-bcrypt==4.0.1
+python-multipart==0.0.31
-python-multipart==0.0.27
 apscheduler==3.10.4
 python-nmap==0.7.1
 pyyaml==6.0.2
 types-PyYAML==6.0.12.20240917
 websockets==13.1
 httpx==0.27.2
-zeroconf==0.131.0
+zeroconf==0.149.16
 aiomqtt==2.3.0
 
 # Dev

backend/scripts/hash_password.py

@@ -1,13 +1,11 @@
-"""Generate a bcrypt password hash for config.yml."""
+"""Generate a bcrypt password hash for the AUTH_PASSWORD_HASH env var."""
 import sys
 
-from passlib.context import CryptContext
+import bcrypt
-
-pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")
 
 if len(sys.argv) < 2:
     print("Usage: python scripts/hash_password.py <password>")
     sys.exit(1)
 
 password = sys.argv[1]
-print(pwd_context.hash(password))
+print(bcrypt.hashpw(password.encode("utf-8"), bcrypt.gensalt()).decode("utf-8"))

backend/tests/conftest.py

@@ -5,23 +5,21 @@ os.environ.setdefault("SECRET_KEY", "test-only-secret-key-not-for-production")
 
 import pytest
 from httpx import ASGITransport, AsyncClient
-from passlib.context import CryptContext
 from sqlalchemy.ext.asyncio import AsyncSession, async_sessionmaker, create_async_engine
 
+from app.core.security import hash_password
 from app.db.database import Base, get_db
 from app.main import app
 
 TEST_DB_URL = "sqlite+aiosqlite:///:memory:"
 
-_pwd_ctx = CryptContext(schemes=["bcrypt"], deprecated="auto")
-
 
 @pytest.fixture(autouse=True, scope="session")
 def test_credentials():
     """Configure test auth credentials directly on settings."""
     from app.core.config import settings
     settings.auth_username = "admin"
-    settings.auth_password_hash = _pwd_ctx.hash("admin")
+    settings.auth_password_hash = hash_password("admin")
 
 
 @pytest.fixture

backend/tests/test_auth.py

@@ -68,3 +68,71 @@ async def test_login_with_malformed_hash_returns_401_not_500(client: AsyncClient
         assert res.status_code == 401
     finally:
         settings.auth_password_hash = original
+
+
+# --- JWT-level cases ---
+
+async def test_expired_token_rejected(client: AsyncClient):
+    """A JWT whose `exp` is in the past must be refused."""
+    from datetime import datetime, timedelta, timezone
+
+    from jose import jwt
+
+    from app.core.config import settings
+    payload = {
+        "sub": "admin",
+        "exp": datetime.now(timezone.utc) - timedelta(minutes=1),
+    }
+    token = jwt.encode(payload, settings.secret_key, algorithm=settings.algorithm)
+    res = await client.get("/api/v1/nodes", headers={"Authorization": f"Bearer {token}"})
+    assert res.status_code == 401
+
+
+async def test_malformed_token_rejected(client: AsyncClient):
+    res = await client.get("/api/v1/nodes", headers={"Authorization": "Bearer not-a-jwt"})
+    assert res.status_code == 401
+
+
+async def test_token_signed_with_wrong_secret_rejected(client: AsyncClient):
+    """A token signed with a different key must not be accepted."""
+    from datetime import datetime, timedelta, timezone
+
+    from jose import jwt
+
+    from app.core.config import settings
+    payload = {
+        "sub": "admin",
+        "exp": datetime.now(timezone.utc) + timedelta(minutes=5),
+    }
+    forged = jwt.encode(payload, "different-secret", algorithm=settings.algorithm)
+    res = await client.get("/api/v1/nodes", headers={"Authorization": f"Bearer {forged}"})
+    assert res.status_code == 401
+
+
+async def test_missing_authorization_header_rejected(client: AsyncClient):
+    res = await client.get("/api/v1/nodes")
+    assert res.status_code == 401
+
+
+async def test_empty_password_does_not_pass_when_hash_empty(client: AsyncClient):
+    """No credentials configured server-side must not authenticate an empty password."""
+    from app.core.config import settings
+    original_hash = settings.auth_password_hash
+    settings.auth_password_hash = ""
+    try:
+        res = await client.post("/api/v1/auth/login", json={"username": "admin", "password": ""})
+        assert res.status_code == 401
+    finally:
+        settings.auth_password_hash = original_hash
+
+
+# --- Password helper ---
+
+def test_verify_password_handles_empty_inputs():
+    """verify_password must be safe against empty plain / empty hash without raising."""
+    from app.core.security import hash_password, verify_password
+    h = hash_password("hunter2")
+    assert verify_password("hunter2", h) is True
+    assert verify_password("", h) is False
+    assert verify_password("hunter2", "") is False
+    assert verify_password("", "") is False

backend/tests/test_canvas.py

@@ -51,6 +51,18 @@ async def test_save_canvas_creates_nodes_and_edges(client: AsyncClient, headers:
     assert canvas["viewport"] == {"x": 1, "y": 2, "zoom": 1.5}
 
 
+async def test_load_canvas_exposes_inventory_timestamps(client: AsyncClient, headers: dict):
+    n1 = node_payload(label="Router", type="router")
+    await client.post("/api/v1/canvas/save", json={"nodes": [n1], "edges": [], "viewport": {}}, headers=headers)
+
+    node = (await client.get("/api/v1/canvas", headers=headers)).json()["nodes"][0]
+    # created_at / updated_at always set; last_seen / last_scan null until observed.
+    assert node["created_at"] is not None
+    assert node["updated_at"] is not None
+    assert "last_seen" in node
+    assert node["last_scan"] is None
+
+
 async def test_save_canvas_updates_existing_node(client: AsyncClient, headers: dict):
     n1 = node_payload(label="Old Label")
     await client.post("/api/v1/canvas/save", json={"nodes": [n1], "edges": [], "viewport": {}}, headers=headers)
@@ -199,6 +211,24 @@ async def test_save_canvas_show_hardware_defaults_false(client: AsyncClient, hea
     assert canvas["nodes"][0]["show_hardware"] is False
 
 
+# Regression (#184): show_port_numbers was dropped by the save schema, so the
+# toggle reset on every reload.
+async def test_save_canvas_persists_show_port_numbers(client: AsyncClient, headers: dict):
+    n1 = node_payload(show_port_numbers=True)
+    await client.post("/api/v1/canvas/save", json={"nodes": [n1], "edges": [], "viewport": {}}, headers=headers)
+
+    canvas = (await client.get("/api/v1/canvas", headers=headers)).json()
+    assert canvas["nodes"][0]["show_port_numbers"] is True
+
+
+async def test_save_canvas_show_port_numbers_defaults_false(client: AsyncClient, headers: dict):
+    n1 = node_payload()
+    await client.post("/api/v1/canvas/save", json={"nodes": [n1], "edges": [], "viewport": {}}, headers=headers)
+
+    canvas = (await client.get("/api/v1/canvas", headers=headers)).json()
+    assert canvas["nodes"][0]["show_port_numbers"] is False
+
+
 async def test_save_canvas_hardware_fields_cleared_on_update(client: AsyncClient, headers: dict):
     n1 = node_payload(cpu_count=8, ram_gb=32.0)
     await client.post("/api/v1/canvas/save", json={"nodes": [n1], "edges": [], "viewport": {}}, headers=headers)

backend/tests/test_designs.py

@@ -0,0 +1,165 @@
+import uuid
+
+import pytest
+from httpx import AsyncClient
+
+
+@pytest.fixture
+async def headers(client: AsyncClient):
+    res = await client.post("/api/v1/auth/login", json={"username": "admin", "password": "admin"})
+    return {"Authorization": f"Bearer {res.json()['access_token']}"}
+
+
+def node_payload(**kwargs):
+    return {"id": str(uuid.uuid4()), "type": "server", "label": "N", "status": "unknown", "pos_x": 0, "pos_y": 0, **kwargs}
+
+
+def edge_payload(src, tgt, **kwargs):
+    return {"id": str(uuid.uuid4()), "source": src, "target": tgt, "type": "ethernet", **kwargs}
+
+
+async def _create(client: AsyncClient, headers: dict, **body) -> dict:
+    res = await client.post("/api/v1/designs", json={"name": "D", **body}, headers=headers)
+    assert res.status_code == 201, res.text
+    return res.json()
+
+
+# ── auth ──────────────────────────────────────────────────────────────────────
+
+async def test_list_designs_requires_auth(client: AsyncClient):
+    res = await client.get("/api/v1/designs")
+    assert res.status_code == 401
+
+
+async def test_create_design_requires_auth(client: AsyncClient):
+    res = await client.post("/api/v1/designs", json={"name": "X"})
+    assert res.status_code == 401
+
+
+# ── list / create ─────────────────────────────────────────────────────────────
+
+async def test_list_designs_empty(client: AsyncClient, headers: dict):
+    res = await client.get("/api/v1/designs", headers=headers)
+    assert res.status_code == 200
+    assert res.json() == []
+
+
+async def test_create_design_defaults(client: AsyncClient, headers: dict):
+    design = await _create(client, headers, name="Workshop")
+    assert design["name"] == "Workshop"
+    assert design["design_type"] == "network"
+    assert design["icon"] == "dashboard"
+    assert "id" in design and design["id"]
+
+
+async def test_create_design_explicit_type(client: AsyncClient, headers: dict):
+    design = await _create(client, headers, name="Net", design_type="network")
+    assert design["design_type"] == "network"
+
+
+async def test_create_design_with_custom_icon(client: AsyncClient, headers: dict):
+    design = await _create(client, headers, name="Power", icon="zap")
+    assert design["icon"] == "zap"
+
+
+async def test_update_design_changes_icon(client: AsyncClient, headers: dict):
+    design = await _create(client, headers, name="D", icon="dashboard")
+    res = await client.put(f"/api/v1/designs/{design['id']}", json={"icon": "server"}, headers=headers)
+    assert res.status_code == 200
+    assert res.json()["icon"] == "server"
+    # Name left untouched when only icon is sent.
+    assert res.json()["name"] == "D"
+
+
+async def test_update_design_name_and_icon_together(client: AsyncClient, headers: dict):
+    design = await _create(client, headers, name="Old", icon="dashboard")
+    res = await client.put(
+        f"/api/v1/designs/{design['id']}", json={"name": "New", "icon": "network"}, headers=headers,
+    )
+    assert res.status_code == 200
+    body = res.json()
+    assert body["name"] == "New"
+    assert body["icon"] == "network"
+
+
+async def test_create_design_creates_empty_canvas_state(client: AsyncClient, headers: dict):
+    design = await _create(client, headers, name="Has Canvas")
+    # Loading the new design returns an (empty) canvas without falling back to another design.
+    res = await client.get("/api/v1/canvas", params={"design_id": design["id"]}, headers=headers)
+    assert res.status_code == 200
+    body = res.json()
+    assert body["nodes"] == []
+    assert body["edges"] == []
+
+
+async def test_list_returns_created_designs_ordered(client: AsyncClient, headers: dict):
+    a = await _create(client, headers, name="First")
+    b = await _create(client, headers, name="Second")
+    listed = (await client.get("/api/v1/designs", headers=headers)).json()
+    ids = [d["id"] for d in listed]
+    assert ids == [a["id"], b["id"]]
+
+
+# ── update ────────────────────────────────────────────────────────────────────
+
+async def test_update_design_renames(client: AsyncClient, headers: dict):
+    design = await _create(client, headers, name="Old Name")
+    res = await client.put(f"/api/v1/designs/{design['id']}", json={"name": "New Name"}, headers=headers)
+    assert res.status_code == 200
+    assert res.json()["name"] == "New Name"
+
+
+async def test_update_design_missing_returns_404(client: AsyncClient, headers: dict):
+    res = await client.put(f"/api/v1/designs/{uuid.uuid4()}", json={"name": "X"}, headers=headers)
+    assert res.status_code == 404
+
+
+# ── delete ────────────────────────────────────────────────────────────────────
+
+async def test_delete_last_design_blocked(client: AsyncClient, headers: dict):
+    design = await _create(client, headers, name="Only One")
+    res = await client.delete(f"/api/v1/designs/{design['id']}", headers=headers)
+    assert res.status_code == 400
+
+
+async def test_delete_design_missing_returns_404(client: AsyncClient, headers: dict):
+    # Need >1 design so we get past nothing; 404 path is checked before the count guard.
+    await _create(client, headers, name="Keep")
+    res = await client.delete(f"/api/v1/designs/{uuid.uuid4()}", headers=headers)
+    assert res.status_code == 404
+
+
+async def test_delete_design_removes_its_nodes_edges_and_canvas(client: AsyncClient, headers: dict):
+    keep = await _create(client, headers, name="Keep")
+    victim = await _create(client, headers, name="Victim")
+
+    # Populate the victim design with nodes + an edge via canvas save.
+    n1 = node_payload(label="A")
+    n2 = node_payload(label="B")
+    e1 = edge_payload(n1["id"], n2["id"])
+    save = await client.post(
+        "/api/v1/canvas/save",
+        json={"nodes": [n1, n2], "edges": [e1], "viewport": {}, "design_id": victim["id"]},
+        headers=headers,
+    )
+    assert save.status_code == 200
+
+    # Populate the kept design too, to prove scoping.
+    k1 = node_payload(label="K")
+    await client.post(
+        "/api/v1/canvas/save",
+        json={"nodes": [k1], "edges": [], "viewport": {}, "design_id": keep["id"]},
+        headers=headers,
+    )
+
+    res = await client.delete(f"/api/v1/designs/{victim['id']}", headers=headers)
+    assert res.status_code == 204
+
+    # Victim gone from list.
+    listed = (await client.get("/api/v1/designs", headers=headers)).json()
+    assert [d["id"] for d in listed] == [keep["id"]]
+
+    # Kept design's node survives untouched.
+    kept_canvas = (await client.get("/api/v1/canvas", params={"design_id": keep["id"]}, headers=headers)).json()
+    assert len(kept_canvas["nodes"]) == 1
+    assert kept_canvas["nodes"][0]["label"] == "K"

backend/tests/test_edges.py

@@ -97,6 +97,37 @@ async def test_create_edge_requires_auth(client: AsyncClient, two_nodes):
     assert res.status_code == 401
 
 
+async def test_create_edge_without_design_id_falls_back_to_first_design(client: AsyncClient, headers: dict, two_nodes):
+    # Regression for #225: MCP create_edge sent no design_id, so edges were
+    # persisted with design_id=null and never rendered until a restart.
+    src, tgt = two_nodes
+    design = await client.post("/api/v1/designs", json={"name": "Primary"}, headers=headers)
+    design_id = design.json()["id"]
+
+    res = await client.post(
+        "/api/v1/edges",
+        json={"source": src, "target": tgt, "type": "ethernet"},
+        headers=headers,
+    )
+    assert res.status_code == 201
+    assert res.json()["design_id"] == design_id
+
+
+async def test_create_edge_respects_explicit_design_id(client: AsyncClient, headers: dict, two_nodes):
+    src, tgt = two_nodes
+    await client.post("/api/v1/designs", json={"name": "First"}, headers=headers)
+    second = await client.post("/api/v1/designs", json={"name": "Second"}, headers=headers)
+    second_id = second.json()["id"]
+
+    res = await client.post(
+        "/api/v1/edges",
+        json={"source": src, "target": tgt, "type": "ethernet", "design_id": second_id},
+        headers=headers,
+    )
+    assert res.status_code == 201
+    assert res.json()["design_id"] == second_id
+
+
 async def test_create_cluster_edge_with_handles(client: AsyncClient, headers: dict, two_nodes):
     src, tgt = two_nodes
     res = await client.post(

backend/tests/test_fingerprint.py

@@ -2,7 +2,13 @@ from unittest.mock import patch
 
 import pytest
 
-from app.services.fingerprint import fingerprint_ports, match_port, suggest_node_type
+from app.services.fingerprint import (
+    fingerprint_ports,
+    match_port,
+    match_service,
+    suggest_node_type,
+    suggest_type_from_mac,
+)
 
 MOCK_SIGNATURES = [
     {"port": 80, "protocol": "tcp", "banner_regex": None, "service_name": "HTTP", "icon": "🌐", "category": "web", "suggested_node_type": "server"},
@@ -173,3 +179,157 @@ def test_suggest_node_type_iot_wins_over_server_when_mqtt_present():
         {"port": 1883, "protocol": "tcp"},
     ])
     assert result == "iot"
+
+
+# ── OUI vendor detection ──────────────────────────────────────────────────────
+
+def test_suggest_type_from_mac_mikrotik_returns_router():
+    # The motivating case: MikroTik MAC should be recognized as a router
+    assert suggest_type_from_mac("4c:5e:0c:11:22:33") == "router"
+    assert suggest_type_from_mac("b8:69:f4:aa:bb:cc") == "router"
+
+
+def test_suggest_type_from_mac_ubiquiti_returns_ap():
+    # Ubiquiti makes routers, switches, APs, cameras — most homelab gear is UniFi APs,
+    # so OUI defaults to "ap". Port hints can still upgrade to "router" if BGP/VPN open.
+    assert suggest_type_from_mac("24:a4:3c:11:22:33") == "ap"
+    assert suggest_type_from_mac("fc:ec:da:aa:bb:cc") == "ap"
+
+
+def test_suggest_type_from_mac_synology_returns_nas():
+    assert suggest_type_from_mac("00:11:32:11:22:33") == "nas"
+
+
+def test_suggest_type_from_mac_qnap_returns_nas():
+    assert suggest_type_from_mac("24:5e:be:aa:bb:cc") == "nas"
+
+
+def test_suggest_type_from_mac_hikvision_returns_camera():
+    assert suggest_type_from_mac("28:57:be:11:22:33") == "camera"
+
+
+def test_suggest_type_from_mac_dahua_returns_camera():
+    assert suggest_type_from_mac("3c:ef:8c:aa:bb:cc") == "camera"
+
+
+def test_suggest_type_from_mac_cisco_returns_switch():
+    assert suggest_type_from_mac("b8:38:61:11:22:33") == "switch"
+
+
+def test_suggest_type_from_mac_raspberry_pi_returns_server():
+    assert suggest_type_from_mac("b8:27:eb:11:22:33") == "server"
+
+
+def test_suggest_type_from_mac_handles_uppercase():
+    # MACs may arrive in any case; lookup must be case-insensitive
+    assert suggest_type_from_mac("4C:5E:0C:11:22:33") == "router"
+
+
+def test_suggest_type_from_mac_unknown_oui_returns_none():
+    assert suggest_type_from_mac("00:00:01:11:22:33") is None
+
+
+def test_suggest_node_type_mikrotik_mac_returns_router_no_ports():
+    # MikroTik device with no scanned ports should still be classified as router via MAC
+    assert suggest_node_type([], mac="4c:5e:0c:11:22:33") == "router"
+
+
+def test_suggest_node_type_synology_mac_with_http_returns_nas():
+    # NAS priority beats server, so a Synology MAC + open HTTP → nas
+    result = suggest_node_type(
+        [{"port": 80, "protocol": "tcp"}],
+        mac="00:11:32:11:22:33",
+    )
+    assert result == "nas"
+
+
+def test_suggest_node_type_ubiquiti_mac_with_bgp_upgrades_to_router():
+    # Ubiquiti OUI suggests "ap", but BGP port hint upgrades to "router" (higher priority)
+    result = suggest_node_type(
+        [{"port": 179, "protocol": "tcp"}],
+        mac="24:a4:3c:11:22:33",
+    )
+    assert result == "router"
+
+
+# ── match_service: HTTP probe + port-agnostic ──────────────────────────────────
+
+HTTP_SIGNATURES = [
+    # Generic web fallback on 8096 (port-only guess)
+    {"port": 8096, "protocol": "tcp", "banner_regex": None, "http_regex": None,
+     "service_name": "HTTP", "icon": "🌐", "category": "web", "suggested_node_type": "server"},
+    # Same port, but confirmed by HTML title → should win when probe confirms
+    {"port": 8096, "protocol": "tcp", "banner_regex": None, "http_regex": "Jellyfin",
+     "service_name": "Jellyfin", "icon": "🎬", "category": "media", "suggested_node_type": "server"},
+    # Port-agnostic: matches on HTTP content regardless of port
+    {"port": None, "protocol": "tcp", "banner_regex": None, "http_regex": "Portainer",
+     "service_name": "Portainer", "icon": "🐳", "category": "container", "suggested_node_type": "server"},
+    # Banner-based entry, no http
+    {"port": 9090, "protocol": "tcp", "banner_regex": "prometheus", "http_regex": None,
+     "service_name": "Prometheus", "icon": "🔥", "category": "monitoring", "suggested_node_type": "server"},
+]
+
+
+@pytest.fixture
+def http_signatures():
+    with patch("app.services.fingerprint._load", return_value=HTTP_SIGNATURES):
+        yield
+
+
+def test_http_regex_confirmed_beats_port_only(http_signatures):
+    # Probe ran and title matches → Jellyfin (tier 1) beats generic HTTP (tier 4)
+    sig = match_service(8096, "tcp", banner=None,
+                        http_signals={"title": "Jellyfin", "headers": {}})
+    assert sig["service_name"] == "Jellyfin"
+
+
+def test_http_regex_matches_on_header(http_signatures):
+    sig = match_service(8096, "tcp", banner=None,
+                        http_signals={"title": None, "headers": {"Server": "Jellyfin"}})
+    assert sig["service_name"] == "Jellyfin"
+
+
+def test_http_regex_miss_falls_back_to_port_only(http_signatures):
+    # Probe ran but nothing matched the http_regex → generic port-only entry wins
+    sig = match_service(8096, "tcp", banner=None,
+                        http_signals={"title": "Some Other App", "headers": {}})
+    assert sig["service_name"] == "HTTP"
+
+
+def test_probe_disabled_ignores_http_regex(http_signatures):
+    # http_signals=None (deep scan off) → http_regex entry degrades to port-only,
+    # generic entry (listed first) wins — identical to pre-probe behaviour.
+    sig = match_service(8096, "tcp", banner=None, http_signals=None)
+    assert sig["service_name"] == "HTTP"
+
+
+def test_port_agnostic_match_on_custom_port(http_signatures):
+    # Portainer found on a non-standard port, recognised purely by HTTP content
+    sig = match_service(54321, "tcp", banner=None,
+                        http_signals={"title": "Portainer", "headers": {}})
+    assert sig["service_name"] == "Portainer"
+
+
+def test_port_agnostic_requires_probe(http_signatures):
+    # Same custom port, probe off → no signal → no match
+    assert match_service(54321, "tcp", banner=None, http_signals=None) is None
+
+
+def test_banner_match_still_works_with_probe(http_signatures):
+    sig = match_service(9090, "tcp", banner="prometheus 2.x",
+                        http_signals={"title": "x", "headers": {}})
+    assert sig["service_name"] == "Prometheus"
+
+
+def test_match_port_alias_has_no_http(http_signatures):
+    # match_port() is the probe-less alias → http_regex entry degrades to port-only
+    sig = match_port(8096, "tcp")
+    assert sig["service_name"] == "HTTP"
+
+
+def test_fingerprint_ports_uses_http_signals(http_signatures):
+    results = fingerprint_ports([
+        {"port": 8096, "protocol": "tcp", "banner": None,
+         "http_signals": {"title": "Jellyfin", "headers": {}}},
+    ])
+    assert results[0]["service_name"] == "Jellyfin"

backend/tests/test_http_probe.py

@@ -0,0 +1,118 @@
+"""Tests for the HTTP probe used by deep-scan service identification."""
+from unittest.mock import AsyncMock, patch
+
+import httpx
+import pytest
+
+from app.services.http_probe import (
+    _extract_title,
+    probe_open_ports,
+    probe_port,
+)
+
+
+def _response(text: str = "", headers: dict | None = None, status: int = 200) -> httpx.Response:
+    return httpx.Response(status_code=status, text=text, headers=headers or {})
+
+
+# ── _extract_title ──────────────────────────────────────────────────────────
+
+def test_extract_title_basic():
+    assert _extract_title("<html><title>Jellyfin</title></html>") == "Jellyfin"
+
+
+def test_extract_title_collapses_whitespace():
+    assert _extract_title("<title>\n  My  App\n</title>") == "My App"
+
+
+def test_extract_title_missing():
+    assert _extract_title("<html><body>no title</body></html>") is None
+
+
+def test_extract_title_case_insensitive():
+    assert _extract_title("<TITLE>Portainer</TITLE>") == "Portainer"
+
+
+# ── probe_port ──────────────────────────────────────────────────────────────
+
+@pytest.mark.asyncio
+async def test_probe_port_reads_title():
+    with patch("httpx.AsyncClient.get", new=AsyncMock(return_value=_response("<title>Jellyfin</title>"))):
+        result = await probe_port("10.0.0.5", 8096)
+    assert result == {"title": "Jellyfin", "headers": {}}
+
+
+@pytest.mark.asyncio
+async def test_probe_port_reads_headers():
+    resp = _response("", headers={"Server": "nginx", "X-Powered-By": "Express"})
+    with patch("httpx.AsyncClient.get", new=AsyncMock(return_value=resp)):
+        result = await probe_port("10.0.0.5", 3000)
+    assert result["headers"] == {"Server": "nginx", "X-Powered-By": "Express"}
+
+
+@pytest.mark.asyncio
+async def test_probe_port_falls_back_to_http():
+    # https raises, http succeeds
+    calls = {"n": 0}
+
+    async def fake_get(self, url, **kw):
+        calls["n"] += 1
+        if url.startswith("https"):
+            raise httpx.ConnectError("tls fail")
+        return _response("<title>HTTP App</title>")
+
+    with patch("httpx.AsyncClient.get", new=fake_get):
+        result = await probe_port("10.0.0.5", 8080)
+    assert result["title"] == "HTTP App"
+    assert calls["n"] == 2  # tried https then http
+
+
+@pytest.mark.asyncio
+async def test_probe_port_no_signal_returns_none():
+    with patch("httpx.AsyncClient.get", new=AsyncMock(return_value=_response(""))):
+        result = await probe_port("10.0.0.5", 8080)
+    assert result is None
+
+
+@pytest.mark.asyncio
+async def test_probe_port_timeout_returns_none():
+    with patch("httpx.AsyncClient.get", new=AsyncMock(side_effect=httpx.TimeoutException("slow"))):
+        result = await probe_port("10.0.0.5", 8080)
+    assert result is None
+
+
+@pytest.mark.asyncio
+async def test_probe_port_skips_non_http_ports():
+    # SSH should never trigger an HTTP request
+    get = AsyncMock()
+    with patch("httpx.AsyncClient.get", new=get):
+        result = await probe_port("10.0.0.5", 22)
+    assert result is None
+    get.assert_not_called()
+
+
+@pytest.mark.asyncio
+async def test_probe_port_verify_tls_flag_passed():
+    with patch("app.services.http_probe.httpx.AsyncClient") as client_cls:
+        instance = client_cls.return_value.__aenter__.return_value
+        instance.get = AsyncMock(return_value=_response("<title>X</title>"))
+        await probe_port("10.0.0.5", 8443, verify_tls=True)
+    assert client_cls.call_args.kwargs["verify"] is True
+
+
+# ── probe_open_ports ─────────────────────────────────────────────────────────
+
+@pytest.mark.asyncio
+async def test_probe_open_ports_enriches_each_port():
+    async def fake_get(self, url, **kw):
+        if ":8096" in url:
+            return _response("<title>Jellyfin</title>")
+        return _response("")
+
+    ports = [{"port": 8096, "protocol": "tcp"}, {"port": 9999, "protocol": "tcp"}]
+    with patch("httpx.AsyncClient.get", new=fake_get):
+        result = await probe_open_ports("10.0.0.5", ports)
+
+    by_port = {p["port"]: p for p in result}
+    assert by_port[8096]["http_signals"]["title"] == "Jellyfin"
+    assert by_port[9999]["http_signals"] is None

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
@@ -124,3 +146,84 @@ async def test_liveview_disabled_after_key_cleared(client: AsyncClient):
     res = await client.get("/api/v1/liveview?key=was-enabled")
     assert res.status_code == 403
     assert res.json()["detail"] == "Live view is disabled"
+
+
+# ── /config (authenticated) — key used to build share links ──────────────────
+
+@pytest.mark.asyncio
+async def test_liveview_config_requires_auth(client: AsyncClient):
+    """The config endpoint exposes the key, so it must reject unauthenticated calls."""
+    settings.liveview_key = "secret"
+    res = await client.get("/api/v1/liveview/config")
+    assert res.status_code == 401
+
+
+@pytest.mark.asyncio
+async def test_liveview_config_returns_key_when_enabled(client: AsyncClient, auth_headers):
+    settings.liveview_key = "share-me"
+    headers = await auth_headers()
+    res = await client.get("/api/v1/liveview/config", headers=headers)
+    assert res.status_code == 200
+    body = res.json()
+    assert body == {"enabled": True, "key": "share-me"}
+
+
+@pytest.mark.asyncio
+async def test_liveview_config_disabled_hides_key(client: AsyncClient, auth_headers):
+    settings.liveview_key = None
+    headers = await auth_headers()
+    res = await client.get("/api/v1/liveview/config", headers=headers)
+    assert res.status_code == 200
+    assert res.json() == {"enabled": False, "key": None}
+
+
+@pytest.mark.asyncio
+async def test_liveview_config_empty_key_disabled(client: AsyncClient, auth_headers):
+    settings.liveview_key = ""
+    headers = await auth_headers()
+    res = await client.get("/api/v1/liveview/config", headers=headers)
+    assert res.status_code == 200
+    assert res.json() == {"enabled": False, "key": None}
+
+
+# ── design_id selects which canvas is rendered ───────────────────────────────
+
+@pytest.mark.asyncio
+async def test_liveview_design_id_selects_canvas(client: AsyncClient, auth_headers):
+    """?design_id=<id> renders that design's canvas, not the first one."""
+    settings.liveview_key = "test-key"
+    headers = await auth_headers()
+
+    # Create two designs
+    d1 = (await client.post("/api/v1/designs", json={"name": "Network"}, headers=headers)).json()
+    d2 = (await client.post("/api/v1/designs", json={"name": "Electrical"}, headers=headers)).json()
+
+    # Save a distinct node into each design
+    for design, node_id, label in ((d1, "n-net", "Net Node"), (d2, "n-elec", "Elec Node")):
+        payload = {
+            "nodes": [{
+                "id": node_id,
+                "type": "server",
+                "label": label,
+                "status": "online",
+                "services": [],
+                "pos_x": 0,
+                "pos_y": 0,
+            }],
+            "edges": [],
+            "viewport": {"x": 0, "y": 0, "zoom": 1},
+            "design_id": design["id"],
+        }
+        await client.post("/api/v1/canvas/save", json=payload, headers=headers)
+
+    # Requesting d2 returns only the electrical node
+    res = await client.get(f"/api/v1/liveview?key=test-key&design_id={d2['id']}")
+    assert res.status_code == 200
+    nodes = res.json()["nodes"]
+    assert [n["id"] for n in nodes] == ["n-elec"]
+
+    # Requesting d1 returns only the network node
+    res = await client.get(f"/api/v1/liveview?key=test-key&design_id={d1['id']}")
+    assert res.status_code == 200
+    nodes = res.json()["nodes"]
+    assert [n["id"] for n in nodes] == ["n-net"]

backend/tests/test_migrations.py

@@ -0,0 +1,156 @@
+"""Backward-compatibility tests for the legacy → multi-design migration.
+
+Simulates a database created by a pre-"designs" version of the app and asserts
+that running init_db() adopts all existing nodes/edges/canvas into a single
+default "Network Topology" design with no data loss. The rest of the test suite
+builds the *current* schema via create_all and never exercises this upgrade
+path, so this file guards real users upgrading in place.
+"""
+import os
+
+os.environ.setdefault("SECRET_KEY", "test-only-secret-key-not-for-production")
+
+import pytest
+from sqlalchemy.ext.asyncio import create_async_engine
+
+import app.db.database as database
+
+
+@pytest.fixture
+def legacy_engine(tmp_path, monkeypatch):
+    """Point the module-global engine + sqlite_path at a throwaway legacy DB."""
+    db_path = tmp_path / "legacy.db"
+    monkeypatch.setattr(database.settings, "sqlite_path", str(db_path))
+    engine = create_async_engine(f"sqlite+aiosqlite:///{db_path}")
+    monkeypatch.setattr(database, "engine", engine)
+    return db_path, engine
+
+
+async def _build_legacy_schema(engine) -> None:
+    """Create the pre-designs schema (no design_id, integer canvas_state PK)."""
+    async with engine.begin() as conn:
+        await conn.exec_driver_sql(
+            "CREATE TABLE nodes (id VARCHAR PRIMARY KEY, type VARCHAR, label VARCHAR, "
+            "status VARCHAR, services JSON, pos_x FLOAT, pos_y FLOAT)"
+        )
+        await conn.exec_driver_sql(
+            "CREATE TABLE edges (id VARCHAR PRIMARY KEY, source VARCHAR, target VARCHAR, type VARCHAR)"
+        )
+        await conn.exec_driver_sql(
+            "CREATE TABLE canvas_state (id INTEGER PRIMARY KEY, viewport JSON, "
+            "custom_style JSON, saved_at DATETIME)"
+        )
+        await conn.exec_driver_sql(
+            "INSERT INTO nodes (id, type, label, status, services, pos_x, pos_y) "
+            "VALUES ('n1','server','Old Server','online','[]',10,20)"
+        )
+        await conn.exec_driver_sql(
+            "INSERT INTO nodes (id, type, label, status, services, pos_x, pos_y) "
+            "VALUES ('n2','router','Old Router','offline','[]',30,40)"
+        )
+        await conn.exec_driver_sql(
+            "INSERT INTO edges (id, source, target, type) VALUES ('e1','n1','n2','ethernet')"
+        )
+        await conn.exec_driver_sql(
+            "INSERT INTO canvas_state (id, viewport, custom_style, saved_at) "
+            "VALUES (1, '{\"x\":5,\"y\":6,\"zoom\":2}', NULL, '2024-01-01 00:00:00')"
+        )
+
+
+async def test_legacy_canvas_migrates_into_default_design(legacy_engine):
+    db_path, engine = legacy_engine
+    await _build_legacy_schema(engine)
+
+    await database.init_db()
+
+    check = create_async_engine(f"sqlite+aiosqlite:///{db_path}")
+    try:
+        async with check.begin() as conn:
+            # Exactly one seeded default design.
+            designs = (await conn.exec_driver_sql(
+                "SELECT id, name, design_type, icon FROM designs"
+            )).fetchall()
+            assert len(designs) == 1
+            did, name, dtype, icon = designs[0]
+            assert name == "Network Topology"
+            assert dtype == "network"
+            assert icon == "dashboard"
+
+            # Every legacy node adopted into the default design, data preserved.
+            nodes = (await conn.exec_driver_sql(
+                "SELECT id, label, status, design_id FROM nodes ORDER BY id"
+            )).fetchall()
+            assert [(n[0], n[1], n[2]) for n in nodes] == [
+                ("n1", "Old Server", "online"),
+                ("n2", "Old Router", "offline"),
+            ]
+            assert all(n[3] == did for n in nodes)
+
+            # Legacy edge adopted too.
+            edge = (await conn.exec_driver_sql(
+                "SELECT design_id FROM edges WHERE id='e1'"
+            )).fetchone()
+            assert edge[0] == did
+
+            # canvas_state rebuilt with design_id PK; the old id=1 row maps to the
+            # default design and the viewport survives.
+            cs = (await conn.exec_driver_sql(
+                "SELECT design_id, viewport FROM canvas_state"
+            )).fetchall()
+            assert len(cs) == 1
+            assert cs[0][0] == did
+            assert "zoom" in (cs[0][1] or "")
+    finally:
+        await check.dispose()
+        await engine.dispose()
+
+
+async def test_legacy_nodes_gain_last_scan_column(legacy_engine):
+    """A legacy nodes table (no last_scan) gains the column after init_db."""
+    db_path, engine = legacy_engine
+    await _build_legacy_schema(engine)
+
+    await database.init_db()
+
+    check = create_async_engine(f"sqlite+aiosqlite:///{db_path}")
+    try:
+        async with check.begin() as conn:
+            cols = (await conn.exec_driver_sql("PRAGMA table_info(nodes)")).fetchall()
+            assert "last_scan" in {c[1] for c in cols}
+            # Existing rows backfill to NULL (never scanned yet).
+            last_scan = (await conn.exec_driver_sql(
+                "SELECT last_scan FROM nodes WHERE id='n1'"
+            )).fetchone()
+            assert last_scan[0] is None
+    finally:
+        await check.dispose()
+        await engine.dispose()
+
+
+async def test_migration_is_idempotent(legacy_engine):
+    """Running init_db twice must not duplicate the design or drop any data."""
+    db_path, engine = legacy_engine
+    await _build_legacy_schema(engine)
+
+    await database.init_db()
+    await database.init_db()  # second boot — should be a no-op
+
+    check = create_async_engine(f"sqlite+aiosqlite:///{db_path}")
+    try:
+        async with check.begin() as conn:
+            designs = (await conn.exec_driver_sql("SELECT id FROM designs")).fetchall()
+            assert len(designs) == 1
+            did = designs[0][0]
+
+            nodes = (await conn.exec_driver_sql(
+                "SELECT design_id FROM nodes"
+            )).fetchall()
+            assert len(nodes) == 2
+            assert all(n[0] == did for n in nodes)
+
+            cs = (await conn.exec_driver_sql("SELECT design_id FROM canvas_state")).fetchall()
+            assert len(cs) == 1
+            assert cs[0][0] == did
+    finally:
+        await check.dispose()
+        await engine.dispose()

backend/tests/test_mqtt_common.py

@@ -0,0 +1,183 @@
+"""Unit tests for the shared MQTT helpers in mqtt_common."""
+
+from __future__ import annotations
+
+import json
+import ssl
+from unittest.mock import patch
+
+import pytest
+
+from app.services.mqtt_common import (
+    _build_tls_context,
+    _sanitize_mqtt_error,
+    request_response,
+)
+from app.services.mqtt_common import test_connection as _test_connection
+
+# ---------------------------------------------------------------------------
+# _sanitize_mqtt_error — never leak credentials
+# ---------------------------------------------------------------------------
+
+
+def test_sanitize_auth_error() -> None:
+    msg = _sanitize_mqtt_error(Exception("Not authorized: bad username for user=admin pwd=secret"))
+    assert msg == "Authentication failed"
+    assert "secret" not in msg
+
+
+def test_sanitize_refused() -> None:
+    assert _sanitize_mqtt_error(Exception("Connection refused")) == "Connection refused by broker"
+
+
+def test_sanitize_dns() -> None:
+    msg = _sanitize_mqtt_error(Exception("nodename nor servname provided: broker.lan"))
+    assert msg == "Broker hostname could not be resolved"
+    assert "broker.lan" not in msg
+
+
+def test_sanitize_tls() -> None:
+    assert _sanitize_mqtt_error(
+        Exception("[SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed")
+    ) == "TLS handshake failed"
+
+
+def test_sanitize_timeout() -> None:
+    assert _sanitize_mqtt_error(Exception("operation timed out")) == "Connection to broker timed out"
+
+
+def test_sanitize_unknown_falls_back() -> None:
+    msg = _sanitize_mqtt_error(Exception("mqtt://admin:hunter2@broker weird"))
+    assert msg == "MQTT connection failed"
+    assert "hunter2" not in msg
+
+
+# ---------------------------------------------------------------------------
+# _build_tls_context
+# ---------------------------------------------------------------------------
+
+
+def test_tls_secure_verifies() -> None:
+    ctx = _build_tls_context(insecure=False)
+    assert ctx.check_hostname is True
+    assert ctx.verify_mode == ssl.CERT_REQUIRED
+
+
+def test_tls_insecure_disables_verification() -> None:
+    ctx = _build_tls_context(insecure=True)
+    assert ctx.check_hostname is False
+    assert ctx.verify_mode == ssl.CERT_NONE
+
+
+# ---------------------------------------------------------------------------
+# request_response (mocked aiomqtt)
+# ---------------------------------------------------------------------------
+
+_SAMPLE = {"success": True, "result": []}
+
+
+def _fake_client_factory(topic: str, payload: dict):
+    class _FakeMessage:
+        _yielded = False
+
+        def __init__(self) -> None:
+            self.topic = topic
+            self.payload = json.dumps(payload).encode()
+
+        def __aiter__(self):
+            return self
+
+        async def __anext__(self):
+            if self._yielded:
+                raise StopAsyncIteration
+            self._yielded = True
+            return self
+
+    class _FakeClient:
+        async def __aenter__(self):
+            return self
+
+        async def __aexit__(self, *_):
+            pass
+
+        async def subscribe(self, _topic: str) -> None:
+            pass
+
+        async def publish(self, _topic: str, _payload: str) -> None:
+            pass
+
+        @property
+        def messages(self):
+            return _FakeMessage()
+
+    return _FakeClient
+
+
+@pytest.mark.asyncio
+async def test_request_response_success() -> None:
+    topic = "zwave/_CLIENTS/ZWAVE_GATEWAY-zwavejs2mqtt/api/getNodes"
+    with patch("app.services.mqtt_common.aiomqtt") as mock_aiomqtt:
+        mock_aiomqtt.Client.return_value = _fake_client_factory(topic, _SAMPLE)()
+        mock_aiomqtt.MqttError = Exception
+        out = await request_response(
+            "localhost", 1883, "req/topic", topic, {"args": []}
+        )
+    assert out == _SAMPLE
+
+
+@pytest.mark.asyncio
+async def test_request_response_connection_error() -> None:
+    class _FakeClient:
+        async def __aenter__(self):
+            raise Exception("Connection refused")
+
+        async def __aexit__(self, *_):
+            pass
+
+    with patch("app.services.mqtt_common.aiomqtt") as mock_aiomqtt:
+        mock_aiomqtt.Client.return_value = _FakeClient()
+        mock_aiomqtt.MqttError = Exception
+        with pytest.raises(ConnectionError):
+            await request_response("bad", 1883, "req", "resp", {})
+
+
+@pytest.mark.asyncio
+async def test_request_response_passes_tls_context() -> None:
+    topic = "resp"
+    with patch("app.services.mqtt_common.aiomqtt") as mock_aiomqtt:
+        mock_aiomqtt.Client.return_value = _fake_client_factory(topic, _SAMPLE)()
+        mock_aiomqtt.MqttError = Exception
+        await request_response("h", 8883, "req", topic, {}, tls=True, tls_insecure=True)
+        ctx = mock_aiomqtt.Client.call_args.kwargs["tls_context"]
+        assert ctx.verify_mode == ssl.CERT_NONE
+
+
+@pytest.mark.asyncio
+async def test_test_connection_success() -> None:
+    class _FakeClient:
+        async def __aenter__(self):
+            return self
+
+        async def __aexit__(self, *_):
+            pass
+
+    with patch("app.services.mqtt_common.aiomqtt") as mock_aiomqtt:
+        mock_aiomqtt.Client.return_value = _FakeClient()
+        mock_aiomqtt.MqttError = Exception
+        assert await _test_connection("localhost", 1883) is True
+
+
+@pytest.mark.asyncio
+async def test_test_connection_failure() -> None:
+    class _FakeClient:
+        async def __aenter__(self):
+            raise Exception("refused")
+
+        async def __aexit__(self, *_):
+            pass
+
+    with patch("app.services.mqtt_common.aiomqtt") as mock_aiomqtt:
+        mock_aiomqtt.Client.return_value = _FakeClient()
+        mock_aiomqtt.MqttError = Exception
+        with pytest.raises(ConnectionError):
+            await _test_connection("bad", 1883)

backend/tests/test_nodes.py

@@ -67,6 +67,50 @@ async def test_update_node_not_found(client: AsyncClient, headers: dict):
     assert res.status_code == 404
 
 
+async def test_create_node_without_design_id_falls_back_to_first_design(client: AsyncClient, headers: dict):
+    # Regression for #225: MCP create_node sent no design_id, so nodes were
+    # persisted with design_id=null and never rendered on the canvas until a
+    # container restart reconciled them. They must attach to a design on create.
+    design = await client.post("/api/v1/designs", json={"name": "Primary"}, headers=headers)
+    design_id = design.json()["id"]
+
+    res = await client.post(
+        "/api/v1/nodes",
+        json={"type": "generic", "label": "mcp-node", "ip": "192.168.18.99"},
+        headers=headers,
+    )
+    assert res.status_code == 201
+    assert res.json()["design_id"] == design_id
+
+
+async def test_create_node_respects_explicit_design_id(client: AsyncClient, headers: dict):
+    # When a design_id is supplied it must win over the first-design fallback.
+    first = await client.post("/api/v1/designs", json={"name": "First"}, headers=headers)
+    second = await client.post("/api/v1/designs", json={"name": "Second"}, headers=headers)
+    second_id = second.json()["id"]
+    assert first.json()["id"] != second_id
+
+    res = await client.post(
+        "/api/v1/nodes",
+        json={"type": "generic", "label": "n", "design_id": second_id},
+        headers=headers,
+    )
+    assert res.status_code == 201
+    assert res.json()["design_id"] == second_id
+
+
+async def test_create_node_without_any_design_stays_null(client: AsyncClient, headers: dict):
+    # No designs exist yet: fallback can't invent one, so design_id stays null
+    # rather than erroring.
+    res = await client.post(
+        "/api/v1/nodes",
+        json={"type": "generic", "label": "orphan"},
+        headers=headers,
+    )
+    assert res.status_code == 201
+    assert res.json()["design_id"] is None
+
+
 async def test_delete_node_not_found(client: AsyncClient, headers: dict):
     res = await client.delete("/api/v1/nodes/nonexistent", headers=headers)
     assert res.status_code == 404

backend/tests/test_scan.py

@@ -1,5 +1,6 @@
 """Tests for scan routes: trigger, pending devices, approve/hide/ignore, stop."""
 import uuid
+from datetime import datetime, timezone
 from unittest.mock import AsyncMock, patch
 
 import pytest
@@ -7,7 +8,7 @@ from httpx import AsyncClient
 from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession
 
-from app.db.models import Node, PendingDevice, ScanRun
+from app.db.models import Design, Node, PendingDevice, ScanRun
 from app.services.scanner import _cancelled_runs, request_cancel, run_scan
 
 
@@ -37,6 +38,96 @@ async def pending_device(db_session):
     return device
 
 
+# --- _background_scan error handling ---
+
+@pytest.fixture
+async def mem_db():
+    from sqlalchemy.ext.asyncio import async_sessionmaker, create_async_engine
+
+    from app.db.database import Base
+    engine = create_async_engine("sqlite+aiosqlite:///:memory:")
+    async with engine.begin() as conn:
+        await conn.run_sync(Base.metadata.create_all)
+    factory = async_sessionmaker(engine, expire_on_commit=False)
+    yield factory
+    await engine.dispose()
+
+
+@pytest.mark.asyncio
+async def test_background_scan_marks_run_failed_on_exception(mem_db):
+    """If run_scan() raises, the ScanRun must transition running → failed and the
+    session rollback path must execute without a follow-on exception."""
+    from app.api.routes.scan import _background_scan
+
+    async with mem_db() as session:
+        run = ScanRun(status="running", ranges=["10.0.0.0/24"])
+        session.add(run)
+        await session.commit()
+        run_id = run.id
+
+    with (
+        patch("app.api.routes.scan.AsyncSessionLocal", mem_db),
+        patch(
+            "app.api.routes.scan.run_scan",
+            new_callable=AsyncMock,
+            side_effect=RuntimeError("boom"),
+        ),
+    ):
+        await _background_scan(run_id, ["10.0.0.0/24"])
+
+    async with mem_db() as session:
+        refreshed = await session.get(ScanRun, run_id)
+        assert refreshed is not None
+        assert refreshed.status == "failed"
+
+
+@pytest.mark.asyncio
+async def test_background_scan_leaves_non_running_status_alone(mem_db):
+    """If the run was already stopped/cancelled before run_scan failed, _background_scan
+    must NOT overwrite that terminal status with 'failed'."""
+    from app.api.routes.scan import _background_scan
+
+    async with mem_db() as session:
+        run = ScanRun(status="cancelled", ranges=["10.0.0.0/24"])
+        session.add(run)
+        await session.commit()
+        run_id = run.id
+
+    with (
+        patch("app.api.routes.scan.AsyncSessionLocal", mem_db),
+        patch(
+            "app.api.routes.scan.run_scan",
+            new_callable=AsyncMock,
+            side_effect=RuntimeError("boom"),
+        ),
+    ):
+        await _background_scan(run_id, ["10.0.0.0/24"])
+
+    async with mem_db() as session:
+        refreshed = await session.get(ScanRun, run_id)
+        assert refreshed is not None
+        assert refreshed.status == "cancelled"
+
+
+@pytest.mark.asyncio
+async def test_background_scan_success_path_invokes_run_scan(mem_db):
+    from app.api.routes.scan import _background_scan
+
+    async with mem_db() as session:
+        run = ScanRun(status="running", ranges=["10.0.0.0/24"])
+        session.add(run)
+        await session.commit()
+        run_id = run.id
+
+    with (
+        patch("app.api.routes.scan.AsyncSessionLocal", mem_db),
+        patch("app.api.routes.scan.run_scan", new_callable=AsyncMock) as mock_run_scan,
+    ):
+        from app.services.scanner import DeepScanOptions
+        await _background_scan(run_id, ["10.0.0.0/24"], DeepScanOptions())
+        mock_run_scan.assert_awaited_once()
+
+
 # --- Trigger scan ---
 
 @pytest.mark.asyncio
@@ -77,6 +168,116 @@ async def test_list_pending_returns_device(client: AsyncClient, headers, pending
     assert len(data) == 1
     assert data[0]["ip"] == "192.168.1.100"
     assert data[0]["hostname"] == "my-server"
+    # No matching node → not on any canvas.
+    assert data[0]["canvas_count"] == 0
+
+
+# --- Canvas-presence correlation (canvas_count) ---
+
+async def _add_design(db_session, name: str) -> str:
+    design = Design(id=str(uuid.uuid4()), name=name)
+    db_session.add(design)
+    await db_session.commit()
+    return design.id
+
+
+def _node(design_id: str, *, ip=None, ieee=None) -> Node:
+    return Node(
+        id=str(uuid.uuid4()), label="n", type="server", status="online",
+        ip=ip, ieee_address=ieee, services=[], pos_x=0.0, pos_y=0.0,
+        design_id=design_id,
+    )
+
+
+@pytest.mark.asyncio
+async def test_canvas_count_counts_distinct_designs_by_ip(client, headers, db_session, pending_device):
+    # Same IP placed on two different canvases → canvas_count == 2.
+    d1 = await _add_design(db_session, "Home")
+    d2 = await _add_design(db_session, "Lab")
+    db_session.add(_node(d1, ip="192.168.1.100"))
+    db_session.add(_node(d2, ip="192.168.1.100"))
+    await db_session.commit()
+
+    res = await client.get("/api/v1/scan/pending", headers=headers)
+    data = res.json()
+    assert len(data) == 1
+    assert data[0]["canvas_count"] == 2
+
+
+@pytest.mark.asyncio
+async def test_canvas_count_correlates_by_ieee(client, headers, db_session):
+    device = PendingDevice(
+        id=str(uuid.uuid4()), ieee_address="0x00124b001", discovery_source="zigbee",
+        suggested_type="zigbee_enddevice", services=[], status="pending",
+    )
+    db_session.add(device)
+    d1 = await _add_design(db_session, "Zigbee")
+    db_session.add(_node(d1, ieee="0x00124b001"))
+    await db_session.commit()
+
+    res = await client.get("/api/v1/scan/pending", headers=headers)
+    by_id = {d["id"]: d for d in res.json()}
+    assert by_id[device.id]["canvas_count"] == 1
+
+
+@pytest.mark.asyncio
+async def test_canvas_count_ignores_nodes_without_design(client, headers, db_session, pending_device):
+    # A node with no design_id is not "on a canvas".
+    db_session.add(_node(None, ip="192.168.1.100"))
+    await db_session.commit()
+
+    res = await client.get("/api/v1/scan/pending", headers=headers)
+    assert res.json()[0]["canvas_count"] == 0
+
+
+# --- Linked-node timestamps on the inventory response ---
+
+@pytest.mark.asyncio
+async def test_pending_device_without_node_has_null_node_timestamps(client, headers, pending_device):
+    # No matching canvas node → node_* timestamps are all null; the device still
+    # carries its own discovered_at for the "Discovered" fallback on the tile.
+    data = (await client.get("/api/v1/scan/pending", headers=headers)).json()[0]
+    assert data["discovered_at"] is not None
+    assert data["node_created_at"] is None
+    assert data["node_last_scan"] is None
+    assert data["node_last_modified"] is None
+    assert data["node_last_seen"] is None
+
+
+@pytest.mark.asyncio
+async def test_pending_device_exposes_linked_node_timestamps(client, headers, db_session, pending_device):
+    d1 = await _add_design(db_session, "Home")
+    node = _node(d1, ip="192.168.1.100")
+    node.last_scan = datetime(2026, 6, 1, 8, 30, tzinfo=timezone.utc)
+    node.last_seen = datetime(2026, 6, 25, 9, 15, tzinfo=timezone.utc)
+    db_session.add(node)
+    await db_session.commit()
+
+    data = (await client.get("/api/v1/scan/pending", headers=headers)).json()[0]
+    assert data["node_created_at"] is not None      # defaulted on insert
+    assert data["node_last_modified"] is not None    # updated_at defaulted on insert
+    assert data["node_last_scan"].startswith("2026-06-01")
+    assert data["node_last_seen"].startswith("2026-06-25")
+
+
+@pytest.mark.asyncio
+async def test_node_timestamps_aggregate_across_matches(client, headers, db_session, pending_device):
+    # Two canvas nodes share the device IP: created_at takes the OLDEST,
+    # last_scan takes the NEWEST.
+    d1 = await _add_design(db_session, "Home")
+    d2 = await _add_design(db_session, "Lab")
+    older = _node(d1, ip="192.168.1.100")
+    older.created_at = datetime(2026, 1, 1, 0, 0, tzinfo=timezone.utc)
+    older.last_scan = datetime(2026, 3, 1, 0, 0, tzinfo=timezone.utc)
+    newer = _node(d2, ip="192.168.1.100")
+    newer.created_at = datetime(2026, 5, 1, 0, 0, tzinfo=timezone.utc)
+    newer.last_scan = datetime(2026, 6, 1, 0, 0, tzinfo=timezone.utc)
+    db_session.add_all([older, newer])
+    await db_session.commit()
+
+    data = (await client.get("/api/v1/scan/pending", headers=headers)).json()[0]
+    assert data["node_created_at"].startswith("2026-01-01")  # oldest
+    assert data["node_last_scan"].startswith("2026-06-01")   # newest
 
 
 # --- Approve device ---
@@ -101,9 +302,13 @@ async def test_approve_device(client: AsyncClient, headers, pending_device):
     assert data["approved"] is True
     assert "node_id" in data
 
-    # Device should no longer appear in pending list
+    # Approved devices stay in the inventory (status != "hidden") so they keep
+    # showing with an "In N canvas" badge — they are no longer dropped.
     pending_res = await client.get("/api/v1/scan/pending", headers=headers)
-    assert pending_res.json() == []
+    inventory = pending_res.json()
+    assert len(inventory) == 1
+    assert inventory[0]["id"] == pending_device.id
+    assert inventory[0]["status"] == "approved"
 
 
 @pytest.mark.asyncio
@@ -242,8 +447,9 @@ async def test_run_scan_creates_new_pending_device(db_session: AsyncSession):
 
 
 @pytest.mark.asyncio
-async def test_run_scan_purges_stale_pending_for_canvas_nodes(db_session: AsyncSession):
+async def test_run_scan_keeps_stale_pending_for_canvas_nodes(db_session: AsyncSession):
-    """Pending devices that were already in canvas before scan starts must be removed."""
+    """Pending devices whose IP is already on a canvas are NOT purged — they stay
+    in the inventory and are surfaced with an "In N canvas" badge."""
     node = Node(
         id=str(uuid.uuid4()),
         label="Existing Server",
@@ -282,12 +488,13 @@ async def test_run_scan_purges_stale_pending_for_canvas_nodes(db_session: AsyncS
     result = await db_session.execute(
         select(PendingDevice).where(PendingDevice.ip == "192.168.1.50")
     )
-    assert result.scalar_one_or_none() is None
+    assert result.scalar_one_or_none() is not None
 
 
 @pytest.mark.asyncio
-async def test_run_scan_skips_ip_already_in_canvas(db_session: AsyncSession):
+async def test_run_scan_records_ip_already_in_canvas(db_session: AsyncSession):
-    """Devices whose IP already exists as a canvas Node must not appear in pending."""
+    """A scanned IP that already exists as a canvas Node still produces a pending
+    device (no longer suppressed)."""
     node = Node(
         id=str(uuid.uuid4()),
         label="Existing Server",
@@ -315,7 +522,62 @@ async def test_run_scan_skips_ip_already_in_canvas(db_session: AsyncSession):
     result = await db_session.execute(
         select(PendingDevice).where(PendingDevice.ip == "192.168.1.50")
     )
-    assert result.scalar_one_or_none() is None
+    device = result.scalar_one_or_none()
+    assert device is not None
+    assert device.status == "pending"
+
+
+@pytest.mark.asyncio
+async def test_run_scan_refreshes_approved_device_without_duplicating(db_session: AsyncSession):
+    """Re-scanning an already-approved device updates its row in place instead of
+    spawning a fresh pending duplicate, and keeps it approved."""
+    approved = PendingDevice(
+        id=str(uuid.uuid4()), ip="192.168.1.50", mac=None, hostname="old",
+        os=None, services=[], suggested_type="server", status="approved",
+    )
+    db_session.add(approved)
+    run_id = str(uuid.uuid4())
+    db_session.add(ScanRun(id=run_id, status="running", ranges=["192.168.1.0/24"]))
+    await db_session.commit()
+
+    with (
+        patch("app.services.scanner._nmap_scan", return_value=[MOCK_HOST]),
+        patch("app.api.routes.status.broadcast_scan_update", new_callable=AsyncMock),
+    ):
+        await run_scan(["192.168.1.0/24"], db_session, run_id)
+
+    rows = (await db_session.execute(
+        select(PendingDevice).where(PendingDevice.ip == "192.168.1.50")
+    )).scalars().all()
+    assert len(rows) == 1
+    assert rows[0].status == "approved"
+    assert rows[0].hostname == "myhost.lan"  # refreshed from the scan
+
+
+@pytest.mark.asyncio
+async def test_run_scan_collapses_existing_duplicate_rows(db_session: AsyncSession):
+    """Pre-existing duplicate inventory rows for one IP are collapsed to a single
+    row at scan start, even if the device is not re-discovered."""
+    for status in ("approved", "pending", "pending"):
+        db_session.add(PendingDevice(
+            id=str(uuid.uuid4()), ip="192.168.1.77", mac=None, hostname=None,
+            os=None, services=[], suggested_type="server", status=status,
+        ))
+    run_id = str(uuid.uuid4())
+    db_session.add(ScanRun(id=run_id, status="running", ranges=["192.168.1.0/24"]))
+    await db_session.commit()
+
+    with (
+        patch("app.services.scanner._nmap_scan", return_value=[]),
+        patch("app.api.routes.status.broadcast_scan_update", new_callable=AsyncMock),
+    ):
+        await run_scan(["192.168.1.0/24"], db_session, run_id)
+
+    rows = (await db_session.execute(
+        select(PendingDevice).where(PendingDevice.ip == "192.168.1.77")
+    )).scalars().all()
+    assert len(rows) == 1
+    assert rows[0].status == "approved"  # approved row is the one kept
 
 
 @pytest.mark.asyncio
@@ -390,6 +652,10 @@ async def test_stop_scan_success(client: AsyncClient, headers, db_session: Async
     assert res.json() == {"stopping": True}
     # run_id added to cancel set
     assert run.id in _cancelled_runs
+    # status flipped eagerly so the UI reacts without waiting for a checkpoint
+    await db_session.refresh(run)
+    assert run.status == "cancelled"
+    assert run.finished_at is not None
     # cleanup for other tests
     _cancelled_runs.discard(run.id)
 
@@ -429,7 +695,7 @@ async def test_run_scan_cancelled_mid_scan_skips_remaining_cidrs(db_session: Asy
 
     call_count = 0
 
-    def nmap_side_effect(target: str):
+    def nmap_side_effect(target: str, port_spec: str | None = None, run_id: str | None = None):
         nonlocal call_count
         call_count += 1
         # Signal cancellation after the first CIDR scan completes
@@ -523,9 +789,299 @@ async def test_bulk_approve_approves_devices(client: AsyncClient, headers, two_p
     assert all(nid is not None for nid in data["node_ids"]), "node_ids must be non-null UUIDs"
     assert len(data["device_ids"]) == 2
     assert data["skipped"] == 0
-    # Pending list should now be empty
+    # Approved devices stay in the inventory, now marked "approved".
     pending_res = await client.get("/api/v1/scan/pending", headers=headers)
-    assert pending_res.json() == []
+    inventory = pending_res.json()
+    assert len(inventory) == 2
+    assert all(d["status"] == "approved" for d in inventory)
+
+
+@pytest.mark.asyncio
+async def test_bulk_approve_places_already_approved_device_on_another_design(
+    client: AsyncClient, headers, db_session, two_pending_devices
+):
+    """Regression: a device already approved (status='approved', e.g. placed on
+    another canvas) must still get a node on the design being approved onto.
+
+    Previously bulk-approve filtered status=='pending', so selecting an
+    already-approved device created no node — the user saw fewer nodes than
+    they selected."""
+    ids = [d.id for d in two_pending_devices]
+    design_a = await _add_design(db_session, "Canvas A")
+    design_b = await _add_design(db_session, "Canvas B")
+
+    # Approve both onto design A.
+    res_a = await client.post(
+        "/api/v1/scan/pending/bulk-approve",
+        json={"device_ids": ids, "design_id": design_a},
+        headers=headers,
+    )
+    assert res_a.json()["approved"] == 2
+
+    # Re-approve the same (now status='approved') devices onto design B.
+    res_b = await client.post(
+        "/api/v1/scan/pending/bulk-approve",
+        json={"device_ids": ids, "design_id": design_b},
+        headers=headers,
+    )
+    data_b = res_b.json()
+    assert data_b["approved"] == 2, "already-approved devices must place onto the new canvas"
+    assert data_b["skipped"] == 0
+
+    # Two nodes now exist on each design.
+    from app.db.models import Node as NodeModel
+    nodes_b = (
+        await db_session.execute(select(NodeModel).where(NodeModel.design_id == design_b))
+    ).scalars().all()
+    assert len(nodes_b) == 2
+
+
+@pytest.mark.asyncio
+async def test_bulk_approve_skips_device_already_on_target_design(
+    client: AsyncClient, headers, db_session, two_pending_devices
+):
+    """A device already on the target canvas (same ip) is not placed twice."""
+    ids = [d.id for d in two_pending_devices]
+    design = await _add_design(db_session, "Canvas")
+    # First device already sits on the canvas (matched by ip).
+    db_session.add(_node(design, ip="192.168.1.10"))
+    await db_session.commit()
+
+    res = await client.post(
+        "/api/v1/scan/pending/bulk-approve",
+        json={"device_ids": ids, "design_id": design},
+        headers=headers,
+    )
+    data = res.json()
+    assert data["approved"] == 1   # only the second device (192.168.1.11)
+    assert data["skipped"] == 1
+
+    from app.db.models import Node as NodeModel
+    nodes = (
+        await db_session.execute(select(NodeModel).where(NodeModel.design_id == design))
+    ).scalars().all()
+    # The pre-existing node plus the one newly approved — no duplicate for .10.
+    assert len(nodes) == 2
+    assert sorted(n.ip for n in nodes) == ["192.168.1.10", "192.168.1.11"]
+
+
+@pytest.fixture
+async def zigbee_pending_device(db_session):
+    device = PendingDevice(
+        id=str(uuid.uuid4()),
+        ip=None,
+        mac=None,
+        hostname=None,
+        friendly_name="bulb_1",
+        services=[],
+        suggested_type="zigbee_enddevice",
+        device_subtype="EndDevice",
+        ieee_address="0xABCDEF",
+        vendor="IKEA",
+        model="TRADFRI",
+        lqi=180,
+        status="pending",
+        discovery_source="zigbee",
+    )
+    db_session.add(device)
+    await db_session.commit()
+    await db_session.refresh(device)
+    return device
+
+
+@pytest.mark.asyncio
+async def test_approve_zigbee_device_populates_properties(
+    client: AsyncClient, headers, zigbee_pending_device, db_session
+):
+    """Approving a zigbee device must populate IEEE/Vendor/Model/LQI in properties."""
+    from sqlalchemy import select
+
+    from app.db.models import Node as NodeModel
+    payload = {
+        "label": "bulb_1",
+        "type": "zigbee_enddevice",
+        "status": "online",
+        "services": [],
+        "check_method": "none",
+    }
+    res = await client.post(
+        f"/api/v1/scan/pending/{zigbee_pending_device.id}/approve",
+        json=payload,
+        headers=headers,
+    )
+    assert res.status_code == 200
+    node = (
+        await db_session.execute(select(NodeModel).where(NodeModel.ieee_address == "0xABCDEF"))
+    ).scalar_one()
+    keys = {p["key"]: p["value"] for p in node.properties}
+    assert keys == {
+        "IEEE": "0xABCDEF",
+        "Vendor": "IKEA",
+        "Model": "TRADFRI",
+        "LQI": "180",
+    }
+
+
+@pytest.mark.asyncio
+async def test_bulk_approve_zigbee_populates_properties(
+    client: AsyncClient, headers, zigbee_pending_device, db_session
+):
+    from sqlalchemy import select
+
+    from app.db.models import Node as NodeModel
+    res = await client.post(
+        "/api/v1/scan/pending/bulk-approve",
+        json={"device_ids": [zigbee_pending_device.id]},
+        headers=headers,
+    )
+    assert res.status_code == 200
+    node = (
+        await db_session.execute(select(NodeModel).where(NodeModel.ieee_address == "0xABCDEF"))
+    ).scalar_one()
+    keys = {p["key"]: p["value"] for p in node.properties}
+    assert keys["IEEE"] == "0xABCDEF"
+    assert keys["Vendor"] == "IKEA"
+    assert keys["Model"] == "TRADFRI"
+    assert keys["LQI"] == "180"
+    assert node.check_method == "none"
+
+
+# --- MAC address propagation on approve (issue #168) ---
+
+def test_build_mac_property_returns_hidden_row():
+    from app.api.routes.scan import build_mac_property
+
+    assert build_mac_property("aa:bb:cc:dd:ee:ff") == [
+        {"key": "MAC", "value": "aa:bb:cc:dd:ee:ff", "icon": None, "visible": False}
+    ]
+
+
+def test_build_mac_property_empty_when_no_mac():
+    from app.api.routes.scan import build_mac_property
+
+    assert build_mac_property(None) == []
+    assert build_mac_property("") == []
+
+
+def test_merge_mac_property_appends_when_absent():
+    from app.api.routes.scan import merge_mac_property
+
+    existing = [{"key": "Custom", "value": "x", "icon": None, "visible": True}]
+    merged = merge_mac_property(existing, "aa:bb:cc:dd:ee:ff")
+    assert {"key": "MAC", "value": "aa:bb:cc:dd:ee:ff", "icon": None, "visible": False} in merged
+    # Existing prop preserved untouched.
+    assert existing[0] in merged
+
+
+def test_merge_mac_property_idempotent_and_preserves_visibility():
+    from app.api.routes.scan import merge_mac_property
+
+    existing = [{"key": "MAC", "value": "aa:bb:cc:dd:ee:ff", "icon": None, "visible": True}]
+    merged = merge_mac_property(existing, "aa:bb:cc:dd:ee:ff")
+    # No duplicate MAC row; user's visible=True choice kept.
+    macs = [p for p in merged if p["key"] == "MAC"]
+    assert len(macs) == 1
+    assert macs[0]["visible"] is True
+
+
+def test_merge_mac_property_noop_without_mac():
+    from app.api.routes.scan import merge_mac_property
+
+    existing = [{"key": "Custom", "value": "x", "icon": None, "visible": True}]
+    assert merge_mac_property(existing, None) == existing
+
+
+@pytest.mark.asyncio
+async def test_approve_device_copies_mac_to_node_and_properties(
+    client: AsyncClient, headers, pending_device, db_session
+):
+    """Approving a scanned device must carry its MAC onto the node + properties."""
+    from sqlalchemy import select
+
+    from app.db.models import Node as NodeModel
+    # Payload intentionally omits mac — it must come from the pending device.
+    res = await client.post(
+        f"/api/v1/scan/pending/{pending_device.id}/approve",
+        json={"label": "My Server", "type": "server", "ip": "192.168.1.100", "status": "unknown", "services": []},
+        headers=headers,
+    )
+    assert res.status_code == 200
+    node = (
+        await db_session.execute(select(NodeModel).where(NodeModel.ip == "192.168.1.100"))
+    ).scalar_one()
+    assert node.mac == "aa:bb:cc:dd:ee:ff"
+    mac_props = [p for p in node.properties if p["key"] == "MAC"]
+    assert mac_props == [
+        {"key": "MAC", "value": "aa:bb:cc:dd:ee:ff", "icon": None, "visible": False}
+    ]
+
+
+@pytest.mark.asyncio
+async def test_approve_device_does_not_duplicate_mac_property(
+    client: AsyncClient, headers, pending_device, db_session
+):
+    """If the approve payload already carries a MAC prop, don't add a second one."""
+    from sqlalchemy import select
+
+    from app.db.models import Node as NodeModel
+    res = await client.post(
+        f"/api/v1/scan/pending/{pending_device.id}/approve",
+        json={
+            "label": "My Server",
+            "type": "server",
+            "ip": "192.168.1.100",
+            "status": "unknown",
+            "services": [],
+            "properties": [
+                {"key": "MAC", "value": "aa:bb:cc:dd:ee:ff", "icon": None, "visible": True}
+            ],
+        },
+        headers=headers,
+    )
+    assert res.status_code == 200
+    node = (
+        await db_session.execute(select(NodeModel).where(NodeModel.ip == "192.168.1.100"))
+    ).scalar_one()
+    mac_props = [p for p in node.properties if p["key"] == "MAC"]
+    assert len(mac_props) == 1
+    # User's visibility choice is preserved.
+    assert mac_props[0]["visible"] is True
+
+
+@pytest.mark.asyncio
+async def test_bulk_approve_copies_mac_to_node_and_properties(
+    client: AsyncClient, headers, db_session
+):
+    """Bulk approve must also propagate the scanned MAC to node + properties."""
+    from sqlalchemy import select
+
+    from app.db.models import Node as NodeModel
+    device = PendingDevice(
+        id=str(uuid.uuid4()),
+        ip="192.168.1.55",
+        mac="11:22:33:44:55:66",
+        hostname="host-mac",
+        services=[],
+        suggested_type="generic",
+        status="pending",
+    )
+    db_session.add(device)
+    await db_session.commit()
+
+    res = await client.post(
+        "/api/v1/scan/pending/bulk-approve",
+        json={"device_ids": [device.id]},
+        headers=headers,
+    )
+    assert res.status_code == 200
+    node = (
+        await db_session.execute(select(NodeModel).where(NodeModel.ip == "192.168.1.55"))
+    ).scalar_one()
+    assert node.mac == "11:22:33:44:55:66"
+    mac_props = [p for p in node.properties if p["key"] == "MAC"]
+    assert mac_props == [
+        {"key": "MAC", "value": "11:22:33:44:55:66", "icon": None, "visible": False}
+    ]
 
 
 @pytest.mark.asyncio
@@ -814,3 +1370,187 @@ async def test_approve_zigbee_resolves_link_after_second_approval(
     assert len(edges) == 1
     links = (await db_session.execute(select(PendingDeviceLink))).scalars().all()
     assert links == []  # consumed
+
+
+# --- Deep scan: trigger overrides + config persistence ---
+
+@pytest.mark.asyncio
+async def test_resolve_deep_scan_falls_back_to_settings():
+    from app.api.routes.scan import TriggerScanRequest, _resolve_deep_scan
+
+    with patch("app.api.routes.scan.settings") as mock_settings:
+        mock_settings.scanner_http_ranges = ["7000-7100"]
+        mock_settings.scanner_http_probe_enabled = True
+        mock_settings.scanner_http_verify_tls = False
+        # Empty payload → all values come from settings defaults
+        ds = _resolve_deep_scan(TriggerScanRequest())
+    assert ds.http_ranges == ["7000-7100"]
+    assert ds.http_probe_enabled is True
+    assert ds.verify_tls is False
+
+
+@pytest.mark.asyncio
+async def test_resolve_deep_scan_override_wins():
+    from app.api.routes.scan import TriggerScanRequest, _resolve_deep_scan
+
+    with patch("app.api.routes.scan.settings") as mock_settings:
+        mock_settings.scanner_http_ranges = []
+        mock_settings.scanner_http_probe_enabled = False
+        mock_settings.scanner_http_verify_tls = False
+        ds = _resolve_deep_scan(
+            TriggerScanRequest(http_ranges=["9000"], http_probe_enabled=True, verify_tls=True)
+        )
+    assert ds.http_ranges == ["9000"]
+    assert ds.http_probe_enabled is True
+    assert ds.verify_tls is True
+
+
+@pytest.mark.asyncio
+async def test_trigger_scan_passes_deep_scan_options(client: AsyncClient, headers):
+    captured = {}
+
+    async def fake_bg(run_id, ranges, deep_scan):
+        captured["deep_scan"] = deep_scan
+
+    with (
+        patch("app.api.routes.scan._background_scan", new=fake_bg),
+        patch("app.api.routes.scan.settings") as mock_settings,
+    ):
+        mock_settings.scanner_ranges = ["192.168.1.0/24"]
+        mock_settings.scanner_http_ranges = []
+        mock_settings.scanner_http_probe_enabled = False
+        mock_settings.scanner_http_verify_tls = False
+        res = await client.post(
+            "/api/v1/scan/trigger",
+            json={"http_probe_enabled": True, "http_ranges": ["8000-8100"]},
+            headers=headers,
+        )
+    assert res.status_code == 200
+    assert captured["deep_scan"].http_probe_enabled is True
+    assert captured["deep_scan"].http_ranges == ["8000-8100"]
+
+
+@pytest.mark.asyncio
+async def test_trigger_scan_rejects_invalid_port_range(client: AsyncClient, headers):
+    with patch("app.api.routes.scan.settings") as mock_settings:
+        mock_settings.scanner_ranges = ["192.168.1.0/24"]
+        res = await client.post(
+            "/api/v1/scan/trigger",
+            json={"http_ranges": ["70000-80000"]},
+            headers=headers,
+        )
+    assert res.status_code == 422
+
+
+@pytest.mark.asyncio
+async def test_get_scan_config_includes_deep_scan(client: AsyncClient, headers):
+    with patch("app.api.routes.scan.settings") as mock_settings:
+        mock_settings.scanner_ranges = ["192.168.1.0/24"]
+        mock_settings.scanner_http_ranges = ["8000-8100"]
+        mock_settings.scanner_http_probe_enabled = True
+        mock_settings.scanner_http_verify_tls = False
+        res = await client.get("/api/v1/scan/config", headers=headers)
+    assert res.status_code == 200
+    data = res.json()
+    assert data["http_ranges"] == ["8000-8100"]
+    assert data["http_probe_enabled"] is True
+
+
+@pytest.mark.asyncio
+async def test_update_scan_config_persists_deep_scan(client: AsyncClient, headers):
+    saved = {}
+
+    with patch("app.api.routes.scan.settings") as mock_settings:
+        mock_settings.scanner_ranges = ["192.168.1.0/24"]
+        mock_settings.scanner_http_ranges = []
+        mock_settings.scanner_http_probe_enabled = False
+        mock_settings.scanner_http_verify_tls = False
+        mock_settings.save_overrides = lambda: saved.update(
+            http_ranges=mock_settings.scanner_http_ranges,
+            probe=mock_settings.scanner_http_probe_enabled,
+        )
+        res = await client.post(
+            "/api/v1/scan/config",
+            json={
+                "ranges": ["192.168.1.0/24"],
+                "http_ranges": ["9000-9100"],
+                "http_probe_enabled": True,
+                "verify_tls": True,
+            },
+            headers=headers,
+        )
+    assert res.status_code == 200
+    assert saved == {"http_ranges": ["9000-9100"], "probe": True}
+
+
+# --- Z-Wave approve: active design targeting + wireless props (regression) ---
+
+@pytest.mark.asyncio
+async def test_bulk_approve_targets_requested_design(client, headers, db_session):
+    """bulk-approve must place nodes on the design_id sent by the UI, not the
+    first design — otherwise approved devices land on the wrong canvas."""
+    first = await _add_design(db_session, "Default")  # first design (fallback)
+    active = await _add_design(db_session, "zwave")    # the design the user is on
+    dev = PendingDevice(
+        id=str(uuid.uuid4()),
+        ieee_address="zwave-H-2",
+        friendly_name="Living Room Plug",
+        suggested_type="zwave_router",
+        device_subtype="Router",
+        vendor="Aeotec",
+        model="ZW096",
+        status="pending",
+        discovery_source="zwave",
+    )
+    db_session.add(dev)
+    await db_session.commit()
+
+    res = await client.post(
+        "/api/v1/scan/pending/bulk-approve",
+        json={"device_ids": [dev.id], "design_id": active},
+        headers=headers,
+    )
+    assert res.status_code == 200
+    assert res.json()["approved"] == 1
+
+    node = (
+        await db_session.execute(select(Node).where(Node.ieee_address == "zwave-H-2"))
+    ).scalar_one()
+    assert node.design_id == active
+    assert node.design_id != first
+    # Z-Wave device → online + Z-Wave property rows, no ICMP check.
+    assert node.status == "online"
+    assert node.check_method == "none"
+    assert {p["key"] for p in node.properties} == {"Z-Wave ID", "Vendor", "Model"}
+
+
+@pytest.mark.asyncio
+async def test_single_approve_zwave_sets_wireless_fields(client, headers, db_session):
+    active = await _add_design(db_session, "zwave")
+    dev = PendingDevice(
+        id=str(uuid.uuid4()),
+        ieee_address="zwave-H-9",
+        friendly_name="Door Sensor",
+        suggested_type="zwave_enddevice",
+        vendor="Aeotec",
+        model="ZW120",
+        status="pending",
+        discovery_source="zwave",
+    )
+    db_session.add(dev)
+    await db_session.commit()
+
+    res = await client.post(
+        f"/api/v1/scan/pending/{dev.id}/approve",
+        json={"label": "Door Sensor", "type": "zwave_enddevice", "design_id": active},
+        headers=headers,
+    )
+    assert res.status_code == 200
+
+    node = (
+        await db_session.execute(select(Node).where(Node.ieee_address == "zwave-H-9"))
+    ).scalar_one()
+    assert node.design_id == active
+    assert node.status == "online"
+    assert node.check_method == "none"
+    assert any(p["key"] == "Z-Wave ID" for p in node.properties)

backend/tests/test_scanner.py

@@ -277,6 +277,74 @@ async def test_nmap_scan_raises_on_sweep_error():
         await _nmap_scan("192.168.1.0/24")
 
 
+# ---------------------------------------------------------------------------
+# Cancellation responsiveness (issue #218)
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_nmap_scan_cancelled_before_start_skips_phases():
+    """A run already cancelled returns immediately without touching the network."""
+    from app.services.scanner import _cancelled_runs, _nmap_scan, request_cancel
+
+    run_id = "cancel-before-start"
+    request_cancel(run_id)
+    try:
+        with patch("app.services.scanner._ping_sweep", new_callable=AsyncMock) as mock_sweep, \
+             patch("app.services.scanner._nmap_port_scan", new_callable=AsyncMock) as mock_port:
+            result = await _nmap_scan("192.168.1.0/24", run_id=run_id)
+        assert result == []
+        mock_sweep.assert_not_called()
+        mock_port.assert_not_called()
+    finally:
+        _cancelled_runs.discard(run_id)
+
+
+@pytest.mark.asyncio
+async def test_ping_sweep_cancelled_mid_sweep_returns_empty():
+    """Cancelling during Phase 1 bails before Phase 2 — no alive hosts returned."""
+    from app.services.scanner import _cancelled_runs, _ping_sweep, request_cancel
+
+    run_id = "cancel-during-sweep"
+
+    async def _fake_subprocess(*args, **kwargs):
+        proc = AsyncMock()
+        proc.wait = AsyncMock(return_value=1)
+        proc.returncode = 1
+        return proc
+
+    request_cancel(run_id)
+    try:
+        with patch("app.services.scanner.asyncio.create_subprocess_exec", new=_fake_subprocess), \
+             patch("app.services.scanner._arp_table_hosts", return_value={}):
+            result = await _ping_sweep("192.168.1.0/30", run_id=run_id)
+        assert result == {}
+    finally:
+        _cancelled_runs.discard(run_id)
+
+
+@pytest.mark.asyncio
+async def test_nmap_port_scan_skips_queued_hosts_when_cancelled():
+    """Once cancelled, queued hosts return unscanned instead of invoking nmap."""
+    from app.services.scanner import _cancelled_runs, _nmap_port_scan, request_cancel
+
+    run_id = "cancel-port-scan"
+    alive = {
+        "192.168.1.10": {
+            "ip": "192.168.1.10", "mac": None, "hostname": None,
+            "os": None, "open_ports": [],
+        },
+    }
+    request_cancel(run_id)
+    try:
+        with patch("app.services.scanner._nmap_scan_single") as mock_single:
+            result = await _nmap_port_scan(alive, run_id=run_id)
+        mock_single.assert_not_called()
+        assert result[0]["ip"] == "192.168.1.10"
+        assert result[0]["open_ports"] == []
+    finally:
+        _cancelled_runs.discard(run_id)
+
+
 # ---------------------------------------------------------------------------
 # _mdns_discover
 # ---------------------------------------------------------------------------
@@ -359,7 +427,7 @@ async def test_nmap_port_scan_tolerates_single_host_exception():
 
     call_count = 0
 
-    def _flaky_scan(host_dict):
+    def _flaky_scan(host_dict, port_spec=None):
         nonlocal call_count
         call_count += 1
         if host_dict["ip"] == "192.168.1.1":
@@ -404,6 +472,84 @@ async def test_run_scan_adds_nmap_devices_as_pending(mem_db):
     assert any(d.ip == "192.168.1.5" for d in devices)
 
 
+@pytest.mark.asyncio
+async def test_run_scan_stamps_last_scan_on_matching_node_by_ip(mem_db):
+    """A scan that sees a device matching a canvas node (by IP) stamps last_scan."""
+    from app.services.scanner import run_scan
+
+    run_id = _make_run_id()
+    async with mem_db() as session:
+        session.add(_make_scan_run(run_id))
+        session.add(Node(id="n1", type="server", label="NAS", ip="192.168.1.5"))
+        await session.commit()
+
+    nmap_hosts = [{"ip": "192.168.1.5", "hostname": "nas.lan", "mac": None, "os": None, "open_ports": []}]
+
+    async with mem_db() as session:
+        with patch("app.services.scanner._nmap_scan", return_value=nmap_hosts), \
+             patch("app.services.scanner._mdns_discover", new_callable=AsyncMock, return_value=[]), \
+             patch("app.api.routes.status.broadcast_scan_update", new_callable=AsyncMock):
+            await run_scan(["192.168.1.0/24"], session, run_id)
+
+    async with mem_db() as session:
+        node = await session.get(Node, "n1")
+
+    assert node is not None
+    assert node.last_scan is not None
+
+
+@pytest.mark.asyncio
+async def test_run_scan_stamps_last_scan_on_matching_node_by_mac(mem_db):
+    """A node with no IP but a matching MAC still gets last_scan stamped."""
+    from app.services.scanner import run_scan
+
+    run_id = _make_run_id()
+    async with mem_db() as session:
+        session.add(_make_scan_run(run_id))
+        session.add(Node(id="n2", type="iot", label="Sensor", mac="AA:BB:CC:DD:EE:FF"))
+        await session.commit()
+
+    nmap_hosts = [{"ip": "192.168.1.9", "hostname": None, "mac": "AA:BB:CC:DD:EE:FF", "os": None, "open_ports": []}]
+
+    async with mem_db() as session:
+        with patch("app.services.scanner._nmap_scan", return_value=nmap_hosts), \
+             patch("app.services.scanner._mdns_discover", new_callable=AsyncMock, return_value=[]), \
+             patch("app.api.routes.status.broadcast_scan_update", new_callable=AsyncMock):
+            await run_scan(["192.168.1.0/24"], session, run_id)
+
+    async with mem_db() as session:
+        node = await session.get(Node, "n2")
+
+    assert node is not None
+    assert node.last_scan is not None
+
+
+@pytest.mark.asyncio
+async def test_run_scan_leaves_last_scan_untouched_on_unmatched_node(mem_db):
+    """A node whose IP/MAC is not seen by the scan keeps last_scan = None."""
+    from app.services.scanner import run_scan
+
+    run_id = _make_run_id()
+    async with mem_db() as session:
+        session.add(_make_scan_run(run_id))
+        session.add(Node(id="n3", type="server", label="Other", ip="10.0.0.99"))
+        await session.commit()
+
+    nmap_hosts = [{"ip": "192.168.1.5", "hostname": None, "mac": None, "os": None, "open_ports": []}]
+
+    async with mem_db() as session:
+        with patch("app.services.scanner._nmap_scan", return_value=nmap_hosts), \
+             patch("app.services.scanner._mdns_discover", new_callable=AsyncMock, return_value=[]), \
+             patch("app.api.routes.status.broadcast_scan_update", new_callable=AsyncMock):
+            await run_scan(["192.168.1.0/24"], session, run_id)
+
+    async with mem_db() as session:
+        node = await session.get(Node, "n3")
+
+    assert node is not None
+    assert node.last_scan is None
+
+
 @pytest.mark.asyncio
 async def test_run_scan_mdns_only_device_added(mem_db):
     """Devices found only by mDNS (not nmap) should appear in pending_devices."""
@@ -457,8 +603,9 @@ async def test_run_scan_mdns_skipped_if_already_in_nmap(mem_db):
 
 
 @pytest.mark.asyncio
-async def test_run_scan_skips_canvas_nodes(mem_db):
+async def test_run_scan_keeps_canvas_nodes(mem_db):
-    """Hosts already approved onto the canvas must be skipped."""
+    """Hosts already on a canvas are NOT suppressed — they stay in the inventory
+    (badged "In N canvas" via correlation), so a re-scan still records them."""
     from app.services.scanner import run_scan
 
     run_id = _make_run_id()
@@ -481,7 +628,9 @@ async def test_run_scan_skips_canvas_nodes(mem_db):
 
     async with mem_db() as session:
         result = await session.execute(sa_select(PendingDevice).where(PendingDevice.ip == "192.168.1.100"))
-        assert result.scalar_one_or_none() is None
+        device = result.scalar_one_or_none()
+        assert device is not None
+        assert device.status == "pending"
 
 
 @pytest.mark.asyncio
@@ -533,3 +682,135 @@ async def test_run_scan_cancelled_marks_status_cancelled(mem_db):
         run = await session.get(ScanRun, run_id)
         assert run is not None
         assert run.status == "cancelled"
+
+
+# ---------------------------------------------------------------------------
+# Deep scan: port-range plumbing + HTTP probe
+# ---------------------------------------------------------------------------
+
+def test_valid_port_range():
+    from app.services.scanner import _valid_port_range
+
+    assert _valid_port_range("8080")
+    assert _valid_port_range("8000-8100")
+    assert not _valid_port_range("8100-8000")   # reversed
+    assert not _valid_port_range("0")           # below 1
+    assert not _valid_port_range("70000")       # above 65535
+    assert not _valid_port_range("abc")
+    assert not _valid_port_range("80,443")      # not a single range
+
+
+def test_build_port_spec_default_when_empty():
+    from app.services.scanner import _EXTRA_PORTS, _build_port_spec
+
+    assert _build_port_spec([]) == _EXTRA_PORTS
+    assert _build_port_spec(None) == _EXTRA_PORTS
+
+
+def test_build_port_spec_appends_valid_ranges():
+    from app.services.scanner import _EXTRA_PORTS, _build_port_spec
+
+    spec = _build_port_spec(["8000-8100", "9000"])
+    assert spec == _EXTRA_PORTS + ",8000-8100,9000"
+
+
+def test_build_port_spec_drops_invalid_ranges():
+    from app.services.scanner import _EXTRA_PORTS, _build_port_spec
+
+    # invalid entries silently dropped; only valid kept
+    assert _build_port_spec(["bad", "70000"]) == _EXTRA_PORTS
+    assert _build_port_spec(["bad", "9000"]) == _EXTRA_PORTS + ",9000"
+
+
+@pytest.mark.asyncio
+async def test_run_scan_deep_scan_passes_port_spec_to_nmap(mem_db):
+    from app.services.scanner import DeepScanOptions, run_scan
+
+    run_id = _make_run_id()
+    async with mem_db() as session:
+        session.add(_make_scan_run(run_id))
+        await session.commit()
+
+    captured = {}
+
+    async def fake_nmap(target, port_spec, run_id=None):
+        captured["port_spec"] = port_spec
+        return []
+
+    async with mem_db() as session:
+        with patch("app.services.scanner._nmap_scan", new=fake_nmap), \
+             patch("app.services.scanner._mdns_discover", new_callable=AsyncMock, return_value=[]), \
+             patch("app.api.routes.status.broadcast_scan_update", new_callable=AsyncMock):
+            await run_scan(
+                ["192.168.1.0/24"], session, run_id,
+                deep_scan=DeepScanOptions(http_ranges=["8000-8100"]),
+            )
+
+    assert "8000-8100" in captured["port_spec"]
+
+
+@pytest.mark.asyncio
+async def test_run_scan_probe_enriches_services(mem_db):
+    """With probe enabled, a custom-port service is identified via HTTP signals."""
+    from app.services.scanner import DeepScanOptions, run_scan
+
+    run_id = _make_run_id()
+    async with mem_db() as session:
+        session.add(_make_scan_run(run_id))
+        await session.commit()
+
+    nmap_hosts = [{
+        "ip": "192.168.1.50", "hostname": None, "mac": None, "os": None,
+        "open_ports": [{"port": 8096, "protocol": "tcp", "banner": ""}],
+    }]
+    jellyfin_sig = [{
+        "port": 8096, "protocol": "tcp", "banner_regex": None, "http_regex": "Jellyfin",
+        "service_name": "Jellyfin", "icon": "🎬", "category": "media", "suggested_node_type": "server",
+    }]
+
+    async def fake_probe(ip, ports, verify_tls=False, concurrency=50):
+        return [{**p, "http_signals": {"title": "Jellyfin", "headers": {}}} for p in ports]
+
+    async with mem_db() as session:
+        with patch("app.services.scanner._nmap_scan", new=AsyncMock(return_value=nmap_hosts)), \
+             patch("app.services.scanner._mdns_discover", new_callable=AsyncMock, return_value=[]), \
+             patch("app.services.scanner.probe_open_ports", new=fake_probe), \
+             patch("app.services.fingerprint._load", return_value=jellyfin_sig), \
+             patch("app.api.routes.status.broadcast_scan_update", new_callable=AsyncMock):
+            await run_scan(
+                ["192.168.1.0/24"], session, run_id,
+                deep_scan=DeepScanOptions(http_probe_enabled=True),
+            )
+
+    async with mem_db() as session:
+        result = await session.execute(sa_select(PendingDevice).where(PendingDevice.ip == "192.168.1.50"))
+        device = result.scalar_one_or_none()
+
+    assert device is not None
+    assert any(s["service_name"] == "Jellyfin" for s in device.services)
+
+
+@pytest.mark.asyncio
+async def test_run_scan_no_probe_when_disabled(mem_db):
+    """Probe must not be called on a standard (non-deep) scan."""
+    from app.services.scanner import run_scan
+
+    run_id = _make_run_id()
+    async with mem_db() as session:
+        session.add(_make_scan_run(run_id))
+        await session.commit()
+
+    nmap_hosts = [{
+        "ip": "192.168.1.51", "hostname": None, "mac": None, "os": None,
+        "open_ports": [{"port": 8096, "protocol": "tcp", "banner": ""}],
+    }]
+    probe = AsyncMock()
+
+    async with mem_db() as session:
+        with patch("app.services.scanner._nmap_scan", new=AsyncMock(return_value=nmap_hosts)), \
+             patch("app.services.scanner._mdns_discover", new_callable=AsyncMock, return_value=[]), \
+             patch("app.services.scanner.probe_open_ports", new=probe), \
+             patch("app.api.routes.status.broadcast_scan_update", new_callable=AsyncMock):
+            await run_scan(["192.168.1.0/24"], session, run_id)
+
+    probe.assert_not_called()

backend/tests/test_scheduler.py

@@ -5,7 +5,13 @@ from unittest.mock import AsyncMock, MagicMock, patch
 import pytest
 from sqlalchemy.ext.asyncio import AsyncSession, async_sessionmaker, create_async_engine
 
-from app.core.scheduler import _run_status_checks, start_scheduler, stop_scheduler
+from app.core.scheduler import (
+    _run_service_checks,
+    _run_status_checks,
+    set_service_checks_enabled,
+    start_scheduler,
+    stop_scheduler,
+)
 from app.db.database import Base
 from app.db.models import Node
 
@@ -141,6 +147,7 @@ def test_scheduler_uses_settings_interval():
     with patch("app.core.scheduler.settings") as mock_settings, \
          patch("app.core.scheduler.AsyncIOScheduler", return_value=mock_sched):
         mock_settings.status_checker_interval = 45
+        mock_settings.service_check_enabled = False
         start_scheduler()
         _, kwargs = mock_sched.add_job.call_args
         assert kwargs["seconds"] == 45
@@ -155,3 +162,90 @@ def test_start_and_stop_scheduler():
         mock_sched.add_job.assert_called_once()
         mock_sched.start.assert_called_once()
         mock_sched.shutdown.assert_called_once()
+
+
+# ---------------------------------------------------------------------------
+# Service checks
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_run_service_checks_disabled_does_nothing(mem_db):
+    async with mem_db() as session:
+        session.add(_make_node(services=[{"port": 80, "protocol": "tcp", "service_name": "http"}]))
+        await session.commit()
+
+    with patch("app.core.scheduler.settings") as mock_settings, \
+         patch("app.core.scheduler.AsyncSessionLocal", mem_db), \
+         patch("app.services.status_checker.check_services", new_callable=AsyncMock) as mock_cs:
+        mock_settings.service_check_enabled = False
+        await _run_service_checks()
+    mock_cs.assert_not_called()
+
+
+@pytest.mark.asyncio
+async def test_run_service_checks_broadcasts_per_node(mem_db):
+    async with mem_db() as session:
+        node = _make_node(
+            ip="10.0.0.5",
+            services=[{"port": 80, "protocol": "tcp", "service_name": "http"}],
+        )
+        session.add(node)
+        await session.commit()
+        node_id = node.id
+
+    statuses = [{"port": 80, "protocol": "tcp", "status": "offline"}]
+
+    with patch("app.core.scheduler.settings") as mock_settings, \
+         patch("app.core.scheduler.AsyncSessionLocal", mem_db), \
+         patch("app.core.scheduler.check_services", new_callable=AsyncMock, return_value=statuses), \
+         patch("app.api.routes.status.broadcast_service_status", new_callable=AsyncMock) as mock_bcast:
+        mock_settings.service_check_enabled = True
+        await _run_service_checks()
+
+    mock_bcast.assert_awaited_once()
+    _, kwargs = mock_bcast.call_args
+    assert kwargs["node_id"] == node_id
+    assert kwargs["services"] == statuses
+
+
+@pytest.mark.asyncio
+async def test_run_service_checks_skips_nodes_without_services(mem_db):
+    async with mem_db() as session:
+        session.add(_make_node(ip="10.0.0.6", services=[]))
+        await session.commit()
+
+    with patch("app.core.scheduler.settings") as mock_settings, \
+         patch("app.core.scheduler.AsyncSessionLocal", mem_db), \
+         patch("app.core.scheduler.check_services", new_callable=AsyncMock) as mock_cs:
+        mock_settings.service_check_enabled = True
+        await _run_service_checks()
+    mock_cs.assert_not_called()
+
+
+def test_set_service_checks_enabled_adds_and_removes_job():
+    mock_sched = MagicMock()
+    mock_sched.running = True
+    with patch("app.core.scheduler.scheduler", mock_sched), \
+         patch("app.core.scheduler.settings") as mock_settings:
+        mock_settings.service_check_interval = 300
+        # Enable: no existing job -> add
+        mock_sched.get_job.return_value = None
+        set_service_checks_enabled(True)
+        mock_sched.add_job.assert_called_once()
+        # Disable: existing job -> remove
+        mock_sched.get_job.return_value = MagicMock()
+        set_service_checks_enabled(False)
+        mock_sched.remove_job.assert_called_once_with("service_checks")
+
+
+def test_start_scheduler_adds_service_job_when_enabled():
+    mock_sched = MagicMock()
+    with patch("app.core.scheduler.settings") as mock_settings, \
+         patch("app.core.scheduler.AsyncIOScheduler", return_value=mock_sched):
+        mock_settings.status_checker_interval = 60
+        mock_settings.service_check_enabled = True
+        mock_settings.service_check_interval = 300
+        start_scheduler()
+    job_ids = [kw.get("id") for _, kw in mock_sched.add_job.call_args_list]
+    assert "status_checks" in job_ids
+    assert "service_checks" in job_ids

backend/tests/test_settings.py

@@ -45,3 +45,42 @@ async def test_update_settings_saves_interval(client: AsyncClient, headers):
 async def test_update_settings_requires_auth(client: AsyncClient):
     res = await client.post("/api/v1/settings", json={"interval_seconds": 30})
     assert res.status_code == 401
+
+
+@pytest.mark.asyncio
+async def test_get_settings_returns_service_check_fields(client: AsyncClient, headers):
+    res = await client.get("/api/v1/settings", headers=headers)
+    data = res.json()
+    assert "service_check_enabled" in data
+    assert "service_check_interval" in data
+    assert isinstance(data["service_check_enabled"], bool)
+    assert isinstance(data["service_check_interval"], int)
+
+
+@pytest.mark.asyncio
+async def test_update_settings_saves_service_check_fields(client: AsyncClient, headers):
+    with patch("app.api.routes.settings.settings") as mock_settings:
+        mock_settings.save_overrides = lambda: None
+        res = await client.post(
+            "/api/v1/settings",
+            json={
+                "interval_seconds": 60,
+                "service_check_enabled": True,
+                "service_check_interval": 600,
+            },
+            headers=headers,
+        )
+    assert res.status_code == 200
+    body = res.json()
+    assert body["service_check_enabled"] is True
+    assert body["service_check_interval"] == 600
+
+
+@pytest.mark.asyncio
+async def test_update_settings_rejects_too_short_service_interval(client: AsyncClient, headers):
+    res = await client.post(
+        "/api/v1/settings",
+        json={"interval_seconds": 60, "service_check_enabled": True, "service_check_interval": 5},
+        headers=headers,
+    )
+    assert res.status_code == 422

backend/tests/test_signatures_data.py

@@ -0,0 +1,63 @@
+"""Integrity + matching tests against the real service_signatures.json."""
+import re
+
+import pytest
+
+from app.services.fingerprint import _load, match_service
+
+_NODE_TYPES = {
+    "isp", "router", "switch", "server", "proxmox", "vm", "lxc",
+    "nas", "iot", "ap", "camera", "generic",
+}
+
+
+@pytest.fixture
+def signatures():
+    return _load()
+
+
+def test_all_entries_well_formed(signatures):
+    for sig in signatures:
+        # port is an int or explicitly null (port-agnostic)
+        assert sig.get("port") is None or isinstance(sig["port"], int)
+        assert isinstance(sig["service_name"], str) and sig["service_name"]
+        assert sig["suggested_node_type"] in _NODE_TYPES
+        if sig.get("banner_regex"):
+            re.compile(sig["banner_regex"])
+        if sig.get("http_regex"):
+            re.compile(sig["http_regex"])
+
+
+def test_port_agnostic_entries_require_http_regex(signatures):
+    for sig in signatures:
+        if sig.get("port") is None:
+            assert sig.get("http_regex"), f"port:null entry needs http_regex: {sig}"
+
+
+def test_popular_apps_have_port_agnostic_signatures(signatures):
+    names = {s["service_name"] for s in signatures if s.get("port") is None}
+    for expected in {
+        "Jellyfin", "Plex", "Home Assistant", "Portainer", "Pi-hole",
+        "AdGuard Home", "Grafana", "Nextcloud", "Vaultwarden", "Sonarr",
+    }:
+        assert expected in names, f"missing port-agnostic signature for {expected}"
+
+
+@pytest.mark.parametrize(("title", "expected"), [
+    ("Jellyfin", "Jellyfin"),
+    ("Home Assistant", "Home Assistant"),
+    ("Portainer", "Portainer"),
+    ("Vaultwarden Web Vault", "Vaultwarden"),
+    ("Pi-hole - Dashboard", "Pi-hole"),
+    ("Audiobookshelf", "Audiobookshelf"),
+])
+def test_custom_port_identified_via_http_title(title, expected):
+    # A service on a non-standard port, recognised purely by its HTML title.
+    sig = match_service(58000, "tcp", banner=None, http_signals={"title": title, "headers": {}})
+    assert sig is not None
+    assert sig["service_name"] == expected
+
+
+def test_custom_port_without_probe_is_unknown():
+    # Same custom port, deep scan off → no signal → no port-agnostic match.
+    assert match_service(58000, "tcp", banner=None, http_signals=None) is None

backend/tests/test_stats.py

@@ -0,0 +1,100 @@
+"""API tests for /api/v1/stats/* (gethomepage widget)."""
+
+from __future__ import annotations
+
+from datetime import datetime, timezone
+
+import pytest
+from httpx import AsyncClient
+from sqlalchemy.ext.asyncio import AsyncSession
+
+from app.core.config import settings
+from app.db.models import Node, PendingDevice, ScanRun
+
+
+@pytest.fixture(autouse=True)
+def _reset_homepage_key():
+    original = settings.homepage_api_key
+    settings.homepage_api_key = ""
+    yield
+    settings.homepage_api_key = original
+
+
+@pytest.mark.asyncio
+async def test_summary_disabled_when_key_unset(client: AsyncClient) -> None:
+    res = await client.get("/api/v1/stats/summary")
+    assert res.status_code == 403
+    assert "disabled" in res.json()["detail"].lower()
+
+
+@pytest.mark.asyncio
+async def test_summary_rejects_missing_header(client: AsyncClient) -> None:
+    settings.homepage_api_key = "topsecret"
+    res = await client.get("/api/v1/stats/summary")
+    assert res.status_code == 403
+
+
+@pytest.mark.asyncio
+async def test_summary_rejects_wrong_key(client: AsyncClient) -> None:
+    settings.homepage_api_key = "topsecret"
+    res = await client.get(
+        "/api/v1/stats/summary", headers={"X-API-Key": "wrong"}
+    )
+    assert res.status_code == 403
+
+
+@pytest.mark.asyncio
+async def test_summary_empty_db(client: AsyncClient) -> None:
+    settings.homepage_api_key = "topsecret"
+    res = await client.get(
+        "/api/v1/stats/summary", headers={"X-API-Key": "topsecret"}
+    )
+    assert res.status_code == 200
+    body = res.json()
+    assert body == {
+        "nodes": 0,
+        "online": 0,
+        "offline": 0,
+        "unknown": 0,
+        "pending_devices": 0,
+        "zigbee_devices": 0,
+        "last_scan_at": None,
+    }
+
+
+@pytest.mark.asyncio
+async def test_summary_aggregates_counts(
+    client: AsyncClient, db_session: AsyncSession
+) -> None:
+    settings.homepage_api_key = "topsecret"
+    finished = datetime(2026, 5, 14, 10, 0, tzinfo=timezone.utc)
+    db_session.add_all([
+        Node(type="server", label="A", status="online"),
+        Node(type="server", label="B", status="online"),
+        Node(type="server", label="C", status="offline"),
+        Node(type="server", label="D", status="unknown"),
+        Node(type="iot",    label="Z1", status="online", ieee_address="0x1"),
+        Node(type="iot",    label="Z2", status="online", ieee_address="0x2"),
+        PendingDevice(ip="10.0.0.1", status="pending"),
+        PendingDevice(ip="10.0.0.2", status="pending"),
+        PendingDevice(ip="10.0.0.3", status="hidden"),  # excluded
+        ScanRun(status="success", finished_at=finished),
+        ScanRun(status="success",
+                finished_at=datetime(2026, 5, 13, 10, 0, tzinfo=timezone.utc)),
+    ])
+    await db_session.commit()
+
+    res = await client.get(
+        "/api/v1/stats/summary", headers={"X-API-Key": "topsecret"}
+    )
+    assert res.status_code == 200
+    body = res.json()
+    assert body["nodes"] == 6
+    assert body["online"] == 4
+    assert body["offline"] == 1
+    assert body["unknown"] == 1
+    assert body["pending_devices"] == 2
+    assert body["zigbee_devices"] == 2
+    # SQLite returns naive datetimes; compare prefix only.
+    assert body["last_scan_at"] is not None
+    assert body["last_scan_at"].startswith("2026-05-14T10:00:00")

backend/tests/test_status.py

@@ -5,7 +5,13 @@ import pytest
 from fastapi.testclient import TestClient
 from starlette.websockets import WebSocketDisconnect
 
-from app.api.routes.status import _connections, broadcast_scan_update, broadcast_status
+from app.api.routes.status import (
+    _connections,
+    _drop,
+    broadcast_scan_update,
+    broadcast_service_status,
+    broadcast_status,
+)
 from app.main import app
 
 # ---------------------------------------------------------------------------
@@ -155,3 +161,63 @@ async def test_broadcast_no_connections():
     assert len(_connections) == 0
     await broadcast_status(node_id="n", status="online", checked_at="t")
     await broadcast_scan_update(run_id="r", devices_found=0)
+
+
+# ---------------------------------------------------------------------------
+# broadcast_service_status
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_broadcast_service_status_payload():
+    received: list[str] = []
+
+    class FakeWS:
+        async def send_text(self, text: str) -> None:
+            received.append(text)
+
+    fake = FakeWS()
+    _connections.append(fake)
+    try:
+        await broadcast_service_status(
+            node_id="node-7",
+            services=[{"port": 80, "protocol": "tcp", "status": "offline"}],
+            checked_at="2024-01-01T00:00:00",
+        )
+    finally:
+        _drop(fake)
+
+    msg = json.loads(received[0])
+    assert msg["type"] == "service_status"
+    assert msg["node_id"] == "node-7"
+    assert msg["services"] == [{"port": 80, "protocol": "tcp", "status": "offline"}]
+
+
+# ---------------------------------------------------------------------------
+# _drop — idempotent connection removal (regression for double-remove crash)
+# ---------------------------------------------------------------------------
+
+def test_drop_is_idempotent():
+    """Dropping a connection twice must not raise (was a ValueError crash)."""
+    class FakeWS:
+        pass
+
+    fake = FakeWS()
+    _connections.append(fake)
+    _drop(fake)
+    _drop(fake)  # second drop must be a no-op
+    assert fake not in _connections
+
+
+@pytest.mark.asyncio
+async def test_broadcast_dead_connection_dropped_once_safely():
+    """A send failure removes the dead socket without a double-remove crash."""
+    class DeadWS:
+        async def send_text(self, _: str) -> None:
+            raise RuntimeError("disconnected")
+
+    dead = DeadWS()
+    _connections.append(dead)
+    await broadcast_status(node_id="n", status="online", checked_at="t")
+    # A second broadcast must not raise even though dead is already gone.
+    await broadcast_status(node_id="n", status="online", checked_at="t")
+    assert dead not in _connections

backend/tests/test_status_checker.py

@@ -3,7 +3,13 @@ from unittest.mock import AsyncMock, MagicMock, patch
 
 import pytest
 
-from app.services.status_checker import _ping, _tcp_connect, check_node
+from app.services.status_checker import (
+    _ping,
+    _tcp_connect,
+    check_node,
+    check_service,
+    check_services,
+)
 
 # --- check_node dispatcher ---
 
@@ -169,9 +175,14 @@ async def test_ping_uses_unix_args_on_non_windows():
     assert "-c" in captured["args"]
     assert "-W" in captured["args"]
     assert "-n" not in captured["args"]
-    # Linux: -W is in seconds; 1s is the intended timeout
+    # 2 probes so a single dropped packet doesn't flap the node offline
+    c_idx = captured["args"].index("-c")
+    assert captured["args"][c_idx + 1] == "2"
+    # Linux: -W is in seconds; 2s is the intended timeout
     w_idx = captured["args"].index("-W")
-    assert captured["args"][w_idx + 1] == "1"
+    assert captured["args"][w_idx + 1] == "2"
+    # IPv4 target → no -6 flag
+    assert "-6" not in captured["args"]
 
 
 @pytest.mark.asyncio
@@ -193,7 +204,7 @@ async def test_ping_uses_macos_millisecond_timeout():
     assert "-c" in captured["args"]
     assert "-W" in captured["args"]
     w_idx = captured["args"].index("-W")
-    assert captured["args"][w_idx + 1] == "1000"
+    assert captured["args"][w_idx + 1] == "2000"
 
 
 @pytest.mark.asyncio
@@ -216,6 +227,100 @@ async def test_ping_uses_windows_args_on_win32():
     assert "-c" not in captured["args"]
 
 
+# --- _ping IPv6 support ---
+
+@pytest.mark.asyncio
+async def test_ping_ipv6_linux_uses_dash6():
+    """IPv6-only devices (e.g. Alexa) need ping -6 on Linux."""
+    captured = {}
+
+    async def fake_exec(*args, **kwargs):
+        captured["args"] = args
+        proc = MagicMock()
+        proc.returncode = 0
+        proc.wait = AsyncMock()
+        return proc
+
+    with patch("app.services.status_checker.sys.platform", "linux"), \
+         patch("asyncio.create_subprocess_exec", side_effect=fake_exec):
+        await _ping("fe80::1")
+
+    assert "-6" in captured["args"]
+    assert captured["args"][-1] == "fe80::1"
+
+
+@pytest.mark.asyncio
+async def test_ping_ipv6_macos_uses_ping6():
+    """macOS ships a separate ping6 binary for IPv6 targets."""
+    captured = {}
+
+    async def fake_exec(*args, **kwargs):
+        captured["args"] = args
+        proc = MagicMock()
+        proc.returncode = 0
+        proc.wait = AsyncMock()
+        return proc
+
+    with patch("app.services.status_checker.sys.platform", "darwin"), \
+         patch("asyncio.create_subprocess_exec", side_effect=fake_exec):
+        await _ping("2001:db8::1")
+
+    assert captured["args"][0] == "ping6"
+
+
+@pytest.mark.asyncio
+async def test_ping_ipv6_windows_uses_dash6():
+    captured = {}
+
+    async def fake_exec(*args, **kwargs):
+        captured["args"] = args
+        proc = MagicMock()
+        proc.returncode = 0
+        proc.wait = AsyncMock()
+        return proc
+
+    with patch("app.services.status_checker.sys.platform", "win32"), \
+         patch("asyncio.create_subprocess_exec", side_effect=fake_exec):
+        await _ping("2001:db8::1")
+
+    assert "-6" in captured["args"]
+
+
+def test_is_ipv6_detection():
+    from app.services.status_checker import _is_ipv6
+
+    assert _is_ipv6("fe80::1") is True
+    assert _is_ipv6("2001:db8::1") is True
+    assert _is_ipv6("[2001:db8::1]") is True
+    assert _is_ipv6("192.168.1.1") is False
+    assert _is_ipv6("example.local") is False
+
+
+# --- check_node target validation ---
+
+@pytest.mark.asyncio
+async def test_check_node_rejects_flag_like_target():
+    """A target starting with '-' must never reach subprocess invocation."""
+    from app.services.status_checker import check_node
+
+    with patch("asyncio.create_subprocess_exec") as mock_exec:
+        result = await check_node("ping", "-O", None)
+
+    mock_exec.assert_not_called()
+    assert result["status"] == "unknown"
+
+
+@pytest.mark.asyncio
+async def test_check_node_rejects_flag_like_ip():
+    from app.services.status_checker import check_node
+
+    with patch("asyncio.create_subprocess_exec") as mock_exec:
+        result = await check_node("ping", None, "-O")
+
+    mock_exec.assert_not_called()
+    assert result["status"] == "unknown"
+
+
 # --- _tcp_connect ---
 
 @pytest.mark.asyncio
@@ -243,3 +348,117 @@ async def test_tcp_connect_os_error():
     with patch("asyncio.open_connection", new_callable=AsyncMock, side_effect=OSError("refused")):
         result = await _tcp_connect("192.168.1.1", 9999)
     assert result is False
+
+
+# --- check_service ---
+
+@pytest.mark.asyncio
+async def test_check_service_no_host_is_unknown():
+    assert await check_service({"port": 80, "protocol": "tcp", "service_name": "http"}, None) == "unknown"
+
+
+@pytest.mark.asyncio
+async def test_check_service_flag_host_is_unknown():
+    assert await check_service({"port": 80, "protocol": "tcp", "service_name": "http"}, "-O") == "unknown"
+
+
+@pytest.mark.asyncio
+async def test_check_service_udp_is_unknown():
+    assert await check_service({"port": 53, "protocol": "udp", "service_name": "dns"}, "10.0.0.1") == "unknown"
+
+
+@pytest.mark.asyncio
+async def test_check_service_portless_non_web_is_unknown():
+    svc = {"protocol": "tcp", "service_name": "thing"}
+    assert await check_service(svc, "10.0.0.1") == "unknown"
+
+
+@pytest.mark.asyncio
+async def test_check_service_web_uses_http_get():
+    captured = {}
+
+    async def fake_http_get(url, verify=False):
+        captured["url"] = url
+        return True
+
+    svc = {"port": 8080, "protocol": "tcp", "service_name": "http"}
+    with patch("app.services.status_checker._http_get", side_effect=fake_http_get):
+        result = await check_service(svc, "10.0.0.1")
+    assert result == "online"
+    assert captured["url"] == "http://10.0.0.1:8080"
+
+
+@pytest.mark.asyncio
+async def test_check_service_https_port_uses_https_scheme():
+    captured = {}
+
+    async def fake_http_get(url, verify=False):
+        captured["url"] = url
+        return True
+
+    svc = {"port": 443, "protocol": "tcp", "service_name": "web"}
+    with patch("app.services.status_checker._http_get", side_effect=fake_http_get):
+        await check_service(svc, "10.0.0.1")
+    assert captured["url"].startswith("https://")
+
+
+@pytest.mark.asyncio
+async def test_check_service_web_offline_when_http_fails():
+    svc = {"port": 80, "protocol": "tcp", "service_name": "http"}
+    with patch("app.services.status_checker._http_get", new_callable=AsyncMock, return_value=False):
+        assert await check_service(svc, "10.0.0.1") == "offline"
+
+
+@pytest.mark.asyncio
+async def test_check_service_non_http_port_is_unknown():
+    """Non-HTTP ports (DB, mail, …) stay grey — no TCP check, no red flap."""
+    svc = {"port": 5432, "protocol": "tcp", "service_name": "postgres"}
+    with patch("app.services.status_checker._tcp_connect", new_callable=AsyncMock) as mock_tcp, \
+         patch("app.services.status_checker._http_get", new_callable=AsyncMock) as mock_http:
+        result = await check_service(svc, "10.0.0.1")
+    assert result == "unknown"
+    mock_tcp.assert_not_called()
+    mock_http.assert_not_called()
+
+
+@pytest.mark.asyncio
+async def test_check_service_ssh_port_22_is_unknown():
+    """SSH (port 22) is never checked — keep it grey, not red/green."""
+    svc = {"port": 22, "protocol": "tcp", "service_name": "ssh"}
+    with patch("app.services.status_checker._tcp_connect", new_callable=AsyncMock) as mock_tcp:
+        result = await check_service(svc, "10.0.0.1")
+    assert result == "unknown"
+    mock_tcp.assert_not_called()
+
+
+@pytest.mark.asyncio
+async def test_check_service_ipv6_brackets_url_host():
+    captured = {}
+
+    async def fake_http_get(url, verify=False):
+        captured["url"] = url
+        return True
+
+    svc = {"port": 80, "protocol": "tcp", "service_name": "http"}
+    with patch("app.services.status_checker._http_get", side_effect=fake_http_get):
+        await check_service(svc, "2001:db8::1")
+    assert captured["url"] == "http://[2001:db8::1]:80"
+
+
+@pytest.mark.asyncio
+async def test_check_services_returns_status_per_service():
+    services = [
+        {"port": 80, "protocol": "tcp", "service_name": "http"},
+        {"port": 5432, "protocol": "tcp", "service_name": "postgres"},
+    ]
+    with patch("app.services.status_checker._http_get", new_callable=AsyncMock, return_value=True):
+        results = await check_services("10.0.0.1", services)
+    assert results == [
+        {"port": 80, "protocol": "tcp", "status": "online"},
+        {"port": 5432, "protocol": "tcp", "status": "unknown"},
+    ]
+
+
+@pytest.mark.asyncio
+async def test_check_services_empty_list():
+    assert await check_services("10.0.0.1", []) == []

backend/tests/test_zigbee_router.py

@@ -388,6 +388,236 @@ async def test_persist_pending_import_replaces_links(db_session) -> None:
     assert (rows[0].source_ieee, rows[0].target_ieee) == ("0xCOORD", "0xR1")
 
 
+@pytest.mark.asyncio
+async def test_persist_pending_import_sets_coordinator_properties(db_session) -> None:
+    """Coordinator Node is created with IEEE/Vendor/Model/LQI in properties."""
+    from sqlalchemy import select
+
+    from app.api.routes.zigbee import _persist_pending_import
+    from app.db.models import Node
+
+    nodes_with_meta = [dict(n) for n in _PENDING_NODES]
+    nodes_with_meta[0]["vendor"] = "TI"
+    nodes_with_meta[0]["model"] = "CC2652"
+
+    await _persist_pending_import(db_session, nodes_with_meta, _PENDING_EDGES)
+
+    coord = (
+        await db_session.execute(select(Node).where(Node.ieee_address == "0xCOORD"))
+    ).scalar_one()
+    keys = {p["key"]: p["value"] for p in coord.properties}
+    assert keys == {"IEEE": "0xCOORD", "Vendor": "TI", "Model": "CC2652"}
+    # New zigbee props default to hidden — user opts in from the right panel.
+    assert all(p["visible"] is False for p in coord.properties)
+
+
+@pytest.mark.asyncio
+async def test_persist_pending_import_skips_pending_for_approved_node(
+    db_session,
+) -> None:
+    """A device already approved as a canvas Node must not reappear in pending.
+
+    Its properties must still be refreshed with the latest Vendor/Model/LQI.
+    """
+    from sqlalchemy import select
+
+    from app.api.routes.zigbee import _persist_pending_import
+    from app.db.models import Node, PendingDevice
+
+    # Simulate: router was approved earlier → exists as a canvas Node.
+    approved = Node(
+        label="router_1",
+        type="zigbee_router",
+        status="online",
+        check_method="none",
+        ieee_address="0xR1",
+        services=[],
+        properties=[],
+    )
+    db_session.add(approved)
+    await db_session.commit()
+
+    bumped = [dict(n) for n in _PENDING_NODES]
+    bumped[1]["lqi"] = 250  # new LQI from re-import
+    await _persist_pending_import(db_session, bumped, _PENDING_EDGES)
+
+    # No PendingDevice row was created for the approved router.
+    pendings = (
+        await db_session.execute(
+            select(PendingDevice).where(PendingDevice.ieee_address == "0xR1")
+        )
+    ).scalars().all()
+    assert pendings == []
+
+    # Node properties got refreshed.
+    refreshed = (
+        await db_session.execute(select(Node).where(Node.ieee_address == "0xR1"))
+    ).scalar_one()
+    keys = {p["key"]: p["value"] for p in refreshed.properties}
+    assert keys == {"IEEE": "0xR1", "Vendor": "TI", "Model": "CC2530", "LQI": "250"}
+    # Brand-new props on an existing Node start hidden.
+    assert all(p["visible"] is False for p in refreshed.properties)
+
+
+@pytest.mark.asyncio
+async def test_persist_pending_import_revives_orphaned_approved_device(
+    db_session,
+) -> None:
+    """Regression for #167: approve → delete node → re-import must re-list device.
+
+    When a device was approved (PendingDevice.status="approved") and its canvas
+    Node was later deleted, the orphaned "approved" row must be reset to
+    "pending" on re-import so it shows up in the Pending list again — instead of
+    being silently swallowed (re-import reports "found" but Pending stays empty).
+    """
+    from sqlalchemy import select
+
+    from app.api.routes.zigbee import _persist_pending_import
+    from app.db.models import PendingDevice
+
+    # Simulate prior approve: a PendingDevice marked approved, but NO matching
+    # Node exists (the user deleted the canvas node afterwards).
+    orphan = PendingDevice(
+        ieee_address="0xR1",
+        friendly_name="router_1",
+        hostname="router_1",
+        suggested_type="zigbee_router",
+        device_subtype="Router",
+        model="CC2530",
+        vendor="TI",
+        lqi=220,
+        status="approved",
+        discovery_source="zigbee",
+    )
+    db_session.add(orphan)
+    await db_session.commit()
+
+    result = await _persist_pending_import(db_session, _PENDING_NODES, _PENDING_EDGES)
+
+    # No new row created for 0xR1 — the existing one was updated/revived.
+    revived = (
+        await db_session.execute(
+            select(PendingDevice).where(PendingDevice.ieee_address == "0xR1")
+        )
+    ).scalar_one()
+    assert revived.status == "pending"
+    # End device 0xE1 is brand new → created as pending; router was updated.
+    assert result.pending_created == 1
+    assert result.pending_updated == 1
+
+    # It is now visible to the Pending list (status filter == "pending").
+    listed = (
+        await db_session.execute(
+            select(PendingDevice).where(PendingDevice.status == "pending")
+        )
+    ).scalars().all()
+    assert {p.ieee_address for p in listed} == {"0xR1", "0xE1"}
+
+
+@pytest.mark.asyncio
+async def test_persist_pending_import_keeps_hidden_hidden_on_reimport(
+    db_session,
+) -> None:
+    """A user-hidden device must stay hidden on re-import (not revived like #167)."""
+    from sqlalchemy import select
+
+    from app.api.routes.zigbee import _persist_pending_import
+    from app.db.models import PendingDevice
+
+    hidden = PendingDevice(
+        ieee_address="0xR1",
+        friendly_name="router_1",
+        suggested_type="zigbee_router",
+        device_subtype="Router",
+        status="hidden",
+        discovery_source="zigbee",
+    )
+    db_session.add(hidden)
+    await db_session.commit()
+
+    await _persist_pending_import(db_session, _PENDING_NODES, _PENDING_EDGES)
+
+    still_hidden = (
+        await db_session.execute(
+            select(PendingDevice).where(PendingDevice.ieee_address == "0xR1")
+        )
+    ).scalar_one()
+    assert still_hidden.status == "hidden"
+
+
+@pytest.mark.asyncio
+async def test_persist_pending_import_preserves_user_visibility(db_session) -> None:
+    """If user has already made props visible, re-import must not flip them back."""
+    from sqlalchemy import select
+
+    from app.api.routes.zigbee import _persist_pending_import
+    from app.db.models import Node
+
+    approved = Node(
+        label="router_1",
+        type="zigbee_router",
+        status="online",
+        check_method="none",
+        ieee_address="0xR1",
+        services=[],
+        properties=[
+            {"key": "IEEE", "value": "0xR1", "icon": None, "visible": True},
+            {"key": "Vendor", "value": "TI", "icon": None, "visible": True},
+            {"key": "Custom", "value": "kept", "icon": None, "visible": True},
+        ],
+    )
+    db_session.add(approved)
+    await db_session.commit()
+
+    bumped = [dict(n) for n in _PENDING_NODES]
+    bumped[1]["lqi"] = 99
+    bumped[1]["model"] = "CC2530"
+    await _persist_pending_import(db_session, bumped, _PENDING_EDGES)
+
+    refreshed = (
+        await db_session.execute(select(Node).where(Node.ieee_address == "0xR1"))
+    ).scalar_one()
+    by_key = {p["key"]: p for p in refreshed.properties}
+    # Existing keys keep their visibility (True).
+    assert by_key["IEEE"]["visible"] is True
+    assert by_key["Vendor"]["visible"] is True
+    # New key arrives hidden.
+    assert by_key["Model"]["visible"] is False
+    assert by_key["LQI"]["visible"] is False
+    assert by_key["LQI"]["value"] == "99"
+    # Non-zigbee user-added prop is preserved untouched.
+    assert by_key["Custom"]["value"] == "kept"
+    assert by_key["Custom"]["visible"] is True
+
+
+@pytest.mark.asyncio
+async def test_persist_pending_import_refreshes_existing_coordinator_properties(
+    db_session,
+) -> None:
+    from sqlalchemy import select
+
+    from app.api.routes.zigbee import _persist_pending_import
+    from app.db.models import Node
+
+    await _persist_pending_import(db_session, _PENDING_NODES, _PENDING_EDGES)
+
+    bumped = [dict(n) for n in _PENDING_NODES]
+    bumped[0]["vendor"] = "TI"
+    bumped[0]["model"] = "CC2652"
+    await _persist_pending_import(db_session, bumped, _PENDING_EDGES)
+
+    coord = (
+        await db_session.execute(select(Node).where(Node.ieee_address == "0xCOORD"))
+    ).scalar_one()
+    keys = {p["key"]: p["value"] for p in coord.properties}
+    assert keys["Vendor"] == "TI"
+    assert keys["Model"] == "CC2652"
+    # Newly added keys on re-import default to hidden.
+    by_key = {p["key"]: p for p in coord.properties}
+    assert by_key["Vendor"]["visible"] is False
+    assert by_key["Model"]["visible"] is False
+
+
 @pytest.mark.asyncio
 async def test_import_pending_requires_auth(client: AsyncClient) -> None:
     res = await client.post(

backend/tests/test_zwave_router.py

@@ -0,0 +1,447 @@
+"""API endpoint tests for /api/v1/zwave/*."""
+
+from __future__ import annotations
+
+from unittest.mock import patch
+
+import pytest
+from httpx import AsyncClient
+
+
+@pytest.fixture
+async def headers(client: AsyncClient):
+    res = await client.post("/api/v1/auth/login", json={"username": "admin", "password": "admin"})
+    token = res.json()["access_token"]
+    return {"Authorization": f"Bearer {token}"}
+
+
+# ---------------------------------------------------------------------------
+# /api/v1/zwave/test-connection
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_test_connection_success(client: AsyncClient, headers: dict) -> None:
+    with patch("app.api.routes.zwave.test_zwave_connection") as mock_conn:
+        mock_conn.return_value = True
+        res = await client.post(
+            "/api/v1/zwave/test-connection",
+            json={"mqtt_host": "localhost", "mqtt_port": 1883},
+            headers=headers,
+        )
+    assert res.status_code == 200
+    data = res.json()
+    assert data["connected"] is True
+    assert "success" in data["message"].lower()
+
+
+@pytest.mark.asyncio
+async def test_test_connection_failure(client: AsyncClient, headers: dict) -> None:
+    with patch("app.api.routes.zwave.test_zwave_connection") as mock_conn:
+        mock_conn.side_effect = ConnectionError("Connection refused")
+        res = await client.post(
+            "/api/v1/zwave/test-connection",
+            json={"mqtt_host": "bad-host", "mqtt_port": 1883},
+            headers=headers,
+        )
+    assert res.status_code == 200
+    data = res.json()
+    assert data["connected"] is False
+    assert "refused" in data["message"].lower()
+
+
+@pytest.mark.asyncio
+async def test_test_connection_requires_auth(client: AsyncClient) -> None:
+    res = await client.post(
+        "/api/v1/zwave/test-connection",
+        json={"mqtt_host": "localhost", "mqtt_port": 1883},
+    )
+    assert res.status_code == 401
+
+
+@pytest.mark.asyncio
+async def test_test_connection_invalid_port(client: AsyncClient, headers: dict) -> None:
+    res = await client.post(
+        "/api/v1/zwave/test-connection",
+        json={"mqtt_host": "localhost", "mqtt_port": 99999},
+        headers=headers,
+    )
+    assert res.status_code == 422
+
+
+# ---------------------------------------------------------------------------
+# /api/v1/zwave/import
+# ---------------------------------------------------------------------------
+
+_SAMPLE_NODES = [
+    {
+        "id": "zwave-0xh-1",
+        "label": "Controller",
+        "type": "zwave_coordinator",
+        "ieee_address": "zwave-0xh-1",
+        "friendly_name": "Controller",
+        "device_type": "Controller",
+        "model": None,
+        "vendor": None,
+        "lqi": None,
+        "parent_id": None,
+    },
+    {
+        "id": "zwave-0xh-2",
+        "label": "Wall Plug",
+        "type": "zwave_router",
+        "ieee_address": "zwave-0xh-2",
+        "friendly_name": "Wall Plug",
+        "device_type": "Router",
+        "model": "ZW100",
+        "vendor": "Aeotec",
+        "lqi": None,
+        "parent_id": "zwave-0xh-1",
+    },
+]
+
+_SAMPLE_EDGES = [{"source": "zwave-0xh-1", "target": "zwave-0xh-2"}]
+
+
+@pytest.mark.asyncio
+async def test_import_success(client: AsyncClient, headers: dict) -> None:
+    with patch("app.api.routes.zwave.fetch_zwave_network") as mock_fetch:
+        mock_fetch.return_value = (_SAMPLE_NODES, _SAMPLE_EDGES)
+        res = await client.post(
+            "/api/v1/zwave/import",
+            json={"mqtt_host": "localhost", "mqtt_port": 1883},
+            headers=headers,
+        )
+    assert res.status_code == 200
+    data = res.json()
+    assert data["device_count"] == 2
+    assert len(data["edges"]) == 1
+    coordinator = next(n for n in data["nodes"] if n["type"] == "zwave_coordinator")
+    assert coordinator["ieee_address"] == "zwave-0xh-1"
+
+
+@pytest.mark.asyncio
+async def test_import_passes_gateway_and_prefix(client: AsyncClient, headers: dict) -> None:
+    with patch("app.api.routes.zwave.fetch_zwave_network") as mock_fetch:
+        mock_fetch.return_value = ([], [])
+        res = await client.post(
+            "/api/v1/zwave/import",
+            json={
+                "mqtt_host": "localhost",
+                "mqtt_port": 1883,
+                "prefix": "myzwave",
+                "gateway_name": "gw1",
+                "mqtt_username": "admin",
+                "mqtt_password": "secret",
+            },
+            headers=headers,
+        )
+    assert res.status_code == 200
+    mock_fetch.assert_called_once_with(
+        mqtt_host="localhost",
+        mqtt_port=1883,
+        prefix="myzwave",
+        gateway_name="gw1",
+        username="admin",
+        password="secret",
+        tls=False,
+        tls_insecure=False,
+    )
+
+
+@pytest.mark.asyncio
+async def test_import_connection_error_returns_502(client: AsyncClient, headers: dict) -> None:
+    with patch("app.api.routes.zwave.fetch_zwave_network") as mock_fetch:
+        mock_fetch.side_effect = ConnectionError("broker unreachable")
+        res = await client.post(
+            "/api/v1/zwave/import",
+            json={"mqtt_host": "bad-host", "mqtt_port": 1883},
+            headers=headers,
+        )
+    assert res.status_code == 502
+    assert "broker unreachable" in res.json()["detail"]
+
+
+@pytest.mark.asyncio
+async def test_import_timeout_returns_504(client: AsyncClient, headers: dict) -> None:
+    with patch("app.api.routes.zwave.fetch_zwave_network") as mock_fetch:
+        mock_fetch.side_effect = TimeoutError("timed out")
+        res = await client.post(
+            "/api/v1/zwave/import",
+            json={"mqtt_host": "localhost", "mqtt_port": 1883},
+            headers=headers,
+        )
+    assert res.status_code == 504
+
+
+@pytest.mark.asyncio
+async def test_import_malformed_payload_returns_422(client: AsyncClient, headers: dict) -> None:
+    with patch("app.api.routes.zwave.fetch_zwave_network") as mock_fetch:
+        mock_fetch.side_effect = ValueError("malformed response")
+        res = await client.post(
+            "/api/v1/zwave/import",
+            json={"mqtt_host": "localhost", "mqtt_port": 1883},
+            headers=headers,
+        )
+    assert res.status_code == 422
+
+
+@pytest.mark.asyncio
+async def test_import_unexpected_returns_500(client: AsyncClient, headers: dict) -> None:
+    with patch("app.api.routes.zwave.fetch_zwave_network") as mock_fetch:
+        mock_fetch.side_effect = RuntimeError("boom")
+        res = await client.post(
+            "/api/v1/zwave/import",
+            json={"mqtt_host": "localhost", "mqtt_port": 1883},
+            headers=headers,
+        )
+    assert res.status_code == 500
+
+
+@pytest.mark.asyncio
+async def test_import_requires_auth(client: AsyncClient) -> None:
+    res = await client.post(
+        "/api/v1/zwave/import",
+        json={"mqtt_host": "localhost", "mqtt_port": 1883},
+    )
+    assert res.status_code == 401
+
+
+@pytest.mark.asyncio
+async def test_import_tls_insecure_requires_tls(client: AsyncClient, headers: dict) -> None:
+    res = await client.post(
+        "/api/v1/zwave/import",
+        json={
+            "mqtt_host": "broker.example.com",
+            "mqtt_port": 1883,
+            "mqtt_tls": False,
+            "mqtt_tls_insecure": True,
+        },
+        headers=headers,
+    )
+    assert res.status_code == 422
+
+
+# ---------------------------------------------------------------------------
+# /api/v1/zwave/import-pending
+# ---------------------------------------------------------------------------
+
+_PENDING_NODES = [
+    {
+        "id": "zwave-0xh-1",
+        "label": "Controller",
+        "type": "zwave_coordinator",
+        "ieee_address": "zwave-0xh-1",
+        "friendly_name": "Controller",
+        "device_type": "Controller",
+        "model": None,
+        "vendor": None,
+        "lqi": None,
+        "parent_id": None,
+    },
+    {
+        "id": "zwave-0xh-2",
+        "label": "Wall Plug",
+        "type": "zwave_router",
+        "ieee_address": "zwave-0xh-2",
+        "friendly_name": "Wall Plug",
+        "device_type": "Router",
+        "model": "ZW100",
+        "vendor": "Aeotec",
+        "lqi": None,
+        "parent_id": "zwave-0xh-1",
+    },
+    {
+        "id": "zwave-0xh-3",
+        "label": "Door Sensor",
+        "type": "zwave_enddevice",
+        "ieee_address": "zwave-0xh-3",
+        "friendly_name": "Door Sensor",
+        "device_type": "EndDevice",
+        "model": "ZW120",
+        "vendor": "Aeotec",
+        "lqi": None,
+        "parent_id": "zwave-0xh-2",
+    },
+]
+
+_PENDING_EDGES = [
+    {"source": "zwave-0xh-1", "target": "zwave-0xh-2"},
+    {"source": "zwave-0xh-2", "target": "zwave-0xh-3"},
+]
+
+
+@pytest.mark.asyncio
+async def test_import_pending_creates_zwave_scan_run(client: AsyncClient, headers: dict) -> None:
+    from unittest.mock import AsyncMock
+
+    with patch("app.api.routes.zwave._background_zwave_import", new_callable=AsyncMock):
+        res = await client.post(
+            "/api/v1/zwave/import-pending",
+            json={"mqtt_host": "localhost", "mqtt_port": 1883},
+            headers=headers,
+        )
+    assert res.status_code == 200
+    run = res.json()
+    assert run["kind"] == "zwave"
+    assert run["status"] == "running"
+    assert run["ranges"] == ["localhost:1883"]
+
+
+@pytest.mark.asyncio
+async def test_import_pending_requires_auth(client: AsyncClient) -> None:
+    res = await client.post(
+        "/api/v1/zwave/import-pending",
+        json={"mqtt_host": "localhost", "mqtt_port": 1883},
+    )
+    assert res.status_code == 401
+
+
+@pytest.mark.asyncio
+async def test_persist_creates_coordinator_and_pending(db_session) -> None:
+    from app.api.routes.zwave import _persist_pending_import
+
+    result = await _persist_pending_import(db_session, _PENDING_NODES, _PENDING_EDGES)
+    assert result.device_count == 3
+    assert result.pending_created == 2
+    assert result.pending_updated == 0
+    assert result.coordinator is not None
+    assert result.coordinator.ieee_address == "zwave-0xh-1"
+    assert result.coordinator_already_existed is False
+    assert result.links_recorded == 2
+
+
+@pytest.mark.asyncio
+async def test_persist_idempotent_updates_existing(db_session) -> None:
+    from app.api.routes.zwave import _persist_pending_import
+
+    await _persist_pending_import(db_session, _PENDING_NODES, _PENDING_EDGES)
+    bumped = [dict(n) for n in _PENDING_NODES]
+    bumped[1]["model"] = "ZW111"
+    result = await _persist_pending_import(db_session, bumped, _PENDING_EDGES)
+    assert result.pending_created == 0
+    assert result.pending_updated == 2
+    assert result.coordinator_already_existed is True
+
+
+@pytest.mark.asyncio
+async def test_persist_replaces_links(db_session) -> None:
+    from sqlalchemy import select
+
+    from app.api.routes.zwave import _persist_pending_import
+    from app.db.models import PendingDeviceLink
+
+    await _persist_pending_import(db_session, _PENDING_NODES, _PENDING_EDGES)
+    new_edges = [{"source": "zwave-0xh-1", "target": "zwave-0xh-2"}]
+    await _persist_pending_import(db_session, _PENDING_NODES[:2], new_edges)
+    rows = (await db_session.execute(select(PendingDeviceLink))).scalars().all()
+    assert len(rows) == 1
+    assert (rows[0].source_ieee, rows[0].target_ieee) == ("zwave-0xh-1", "zwave-0xh-2")
+
+
+@pytest.mark.asyncio
+async def test_persist_sets_coordinator_properties(db_session) -> None:
+    from sqlalchemy import select
+
+    from app.api.routes.zwave import _persist_pending_import
+    from app.db.models import Node
+
+    nodes = [dict(n) for n in _PENDING_NODES]
+    nodes[0]["vendor"] = "Aeotec"
+    nodes[0]["model"] = "ZW090"
+    await _persist_pending_import(db_session, nodes, _PENDING_EDGES)
+    coord = (
+        await db_session.execute(select(Node).where(Node.ieee_address == "zwave-0xh-1"))
+    ).scalar_one()
+    keys = {p["key"]: p["value"] for p in coord.properties}
+    assert keys == {"Z-Wave ID": "zwave-0xh-1", "Vendor": "Aeotec", "Model": "ZW090"}
+    assert all(p["visible"] is False for p in coord.properties)
+
+
+@pytest.mark.asyncio
+async def test_persist_skips_pending_for_approved_node(db_session) -> None:
+    from sqlalchemy import select
+
+    from app.api.routes.zwave import _persist_pending_import
+    from app.db.models import Node, PendingDevice
+
+    approved = Node(
+        label="Wall Plug",
+        type="zwave_router",
+        status="online",
+        check_method="none",
+        ieee_address="zwave-0xh-2",
+        services=[],
+        properties=[],
+    )
+    db_session.add(approved)
+    await db_session.commit()
+
+    await _persist_pending_import(db_session, _PENDING_NODES, _PENDING_EDGES)
+
+    pendings = (
+        await db_session.execute(
+            select(PendingDevice).where(PendingDevice.ieee_address == "zwave-0xh-2")
+        )
+    ).scalars().all()
+    assert pendings == []
+    refreshed = (
+        await db_session.execute(select(Node).where(Node.ieee_address == "zwave-0xh-2"))
+    ).scalar_one()
+    keys = {p["key"]: p["value"] for p in refreshed.properties}
+    assert keys == {"Z-Wave ID": "zwave-0xh-2", "Vendor": "Aeotec", "Model": "ZW100"}
+
+
+@pytest.mark.asyncio
+async def test_persist_revives_orphaned_approved_device(db_session) -> None:
+    from sqlalchemy import select
+
+    from app.api.routes.zwave import _persist_pending_import
+    from app.db.models import PendingDevice
+
+    orphan = PendingDevice(
+        ieee_address="zwave-0xh-2",
+        friendly_name="Wall Plug",
+        suggested_type="zwave_router",
+        device_subtype="Router",
+        status="approved",
+        discovery_source="zwave",
+    )
+    db_session.add(orphan)
+    await db_session.commit()
+
+    result = await _persist_pending_import(db_session, _PENDING_NODES, _PENDING_EDGES)
+    revived = (
+        await db_session.execute(
+            select(PendingDevice).where(PendingDevice.ieee_address == "zwave-0xh-2")
+        )
+    ).scalar_one()
+    assert revived.status == "pending"
+    assert result.pending_created == 1
+    assert result.pending_updated == 1
+
+
+@pytest.mark.asyncio
+async def test_persist_keeps_hidden_hidden(db_session) -> None:
+    from sqlalchemy import select
+
+    from app.api.routes.zwave import _persist_pending_import
+    from app.db.models import PendingDevice
+
+    hidden = PendingDevice(
+        ieee_address="zwave-0xh-2",
+        friendly_name="Wall Plug",
+        suggested_type="zwave_router",
+        device_subtype="Router",
+        status="hidden",
+        discovery_source="zwave",
+    )
+    db_session.add(hidden)
+    await db_session.commit()
+
+    await _persist_pending_import(db_session, _PENDING_NODES, _PENDING_EDGES)
+    still_hidden = (
+        await db_session.execute(
+            select(PendingDevice).where(PendingDevice.ieee_address == "zwave-0xh-2")
+        )
+    ).scalar_one()
+    assert still_hidden.status == "hidden"

backend/tests/test_zwave_service.py

@@ -0,0 +1,269 @@
+"""Unit tests for zwave_service: parser, role mapping, hierarchy builder."""
+
+from __future__ import annotations
+
+import json
+from typing import Any
+from unittest.mock import patch
+
+import pytest
+
+from app.services.zwave_service import (
+    build_zwave_properties,
+    fetch_zwave_network,
+    parse_zwave_nodes,
+)
+
+# ---------------------------------------------------------------------------
+# Helpers — real zwavejs2mqtt getNodes shape
+# ---------------------------------------------------------------------------
+
+def _node(
+    node_id: int,
+    *,
+    controller: bool = False,
+    routing: bool = False,
+    name: str | None = None,
+    neighbors: list[int] | None = None,
+    manufacturer: str | None = None,
+    product_label: str | None = None,
+    home_id: str = "0xabcd1234",
+) -> dict[str, Any]:
+    return {
+        "id": node_id,
+        "homeId": home_id,
+        "isControllerNode": controller,
+        "isRouting": routing,
+        "name": name,
+        "neighbors": neighbors or [],
+        "manufacturer": manufacturer,
+        "productLabel": product_label,
+    }
+
+
+def _wrap(nodes: list[dict[str, Any]], success: bool = True) -> dict[str, Any]:
+    return {"success": success, "result": nodes}
+
+
+HOME = "0xabcd1234"
+
+
+def _ieee(node_id: int) -> str:
+    return f"zwave-{HOME}-{node_id}"
+
+
+# ---------------------------------------------------------------------------
+# Role mapping
+# ---------------------------------------------------------------------------
+
+class TestRoleMapping:
+    def test_controller_is_coordinator(self) -> None:
+        nodes, _ = parse_zwave_nodes(_wrap([_node(1, controller=True)]))
+        assert nodes[0]["type"] == "zwave_coordinator"
+        assert nodes[0]["device_type"] == "Controller"
+
+    def test_routing_is_router(self) -> None:
+        nodes, _ = parse_zwave_nodes(_wrap([_node(2, routing=True)]))
+        assert nodes[0]["type"] == "zwave_router"
+        assert nodes[0]["device_type"] == "Router"
+
+    def test_default_is_enddevice(self) -> None:
+        nodes, _ = parse_zwave_nodes(_wrap([_node(3)]))
+        assert nodes[0]["type"] == "zwave_enddevice"
+        assert nodes[0]["device_type"] == "EndDevice"
+
+    def test_controller_wins_over_routing(self) -> None:
+        nodes, _ = parse_zwave_nodes(_wrap([_node(1, controller=True, routing=True)]))
+        assert nodes[0]["type"] == "zwave_coordinator"
+
+
+# ---------------------------------------------------------------------------
+# parse_zwave_nodes
+# ---------------------------------------------------------------------------
+
+class TestParse:
+    def test_empty_payload(self) -> None:
+        nodes, edges = parse_zwave_nodes({})
+        assert nodes == []
+        assert edges == []
+
+    def test_empty_result(self) -> None:
+        nodes, edges = parse_zwave_nodes(_wrap([]))
+        assert nodes == []
+        assert edges == []
+
+    def test_success_false_raises(self) -> None:
+        with pytest.raises(ValueError, match="failure"):
+            parse_zwave_nodes(_wrap([], success=False))
+
+    def test_result_not_list_raises(self) -> None:
+        with pytest.raises(ValueError, match="not a list"):
+            parse_zwave_nodes({"success": True, "result": "oops"})
+
+    def test_missing_id_skipped(self) -> None:
+        nodes, _ = parse_zwave_nodes(_wrap([{"homeId": HOME, "isControllerNode": False}]))
+        assert nodes == []
+
+    def test_ieee_identity_format(self) -> None:
+        nodes, _ = parse_zwave_nodes(_wrap([_node(5, controller=True)]))
+        assert nodes[0]["ieee_address"] == _ieee(5)
+
+    def test_name_fallback(self) -> None:
+        nodes, _ = parse_zwave_nodes(_wrap([_node(7, name="Living Room")]))
+        assert nodes[0]["label"] == "Living Room"
+        assert nodes[0]["friendly_name"] == "Living Room"
+
+    def test_model_and_vendor(self) -> None:
+        nodes, _ = parse_zwave_nodes(
+            _wrap([_node(8, manufacturer="Aeotec", product_label="ZW100")])
+        )
+        assert nodes[0]["vendor"] == "Aeotec"
+        assert nodes[0]["model"] == "ZW100"
+
+    def test_lqi_is_none(self) -> None:
+        nodes, _ = parse_zwave_nodes(_wrap([_node(9)]))
+        assert nodes[0]["lqi"] is None
+
+    def test_no_duplicate_nodes(self) -> None:
+        nodes, _ = parse_zwave_nodes(_wrap([_node(1, routing=True), _node(1, routing=True)]))
+        assert len(nodes) == 1
+
+    def test_helper_keys_stripped(self) -> None:
+        nodes, _ = parse_zwave_nodes(_wrap([_node(1, neighbors=[2])]))
+        assert "neighbors" not in nodes[0]
+        assert "node_id" not in nodes[0]
+
+
+class TestHierarchy:
+    def test_coordinator_router_enddevice_tree(self) -> None:
+        payload = _wrap([
+            _node(1, controller=True, neighbors=[2]),
+            _node(2, routing=True, neighbors=[1, 3]),
+            _node(3, neighbors=[2]),
+        ])
+        nodes, edges = parse_zwave_nodes(payload)
+        by_id = {n["id"]: n for n in nodes}
+        assert by_id[_ieee(2)]["parent_id"] == _ieee(1)
+        assert by_id[_ieee(3)]["parent_id"] == _ieee(2)
+        pairs = {(e["source"], e["target"]) for e in edges}
+        assert pairs == {(_ieee(1), _ieee(2)), (_ieee(2), _ieee(3))}
+
+    def test_enddevice_without_router_falls_back_to_coordinator(self) -> None:
+        payload = _wrap([_node(1, controller=True), _node(3, neighbors=[])])
+        nodes, _ = parse_zwave_nodes(payload)
+        end = next(n for n in nodes if n["id"] == _ieee(3))
+        assert end["parent_id"] == _ieee(1)
+
+    def test_coordinator_has_no_incoming_edge(self) -> None:
+        payload = _wrap([
+            _node(1, controller=True, neighbors=[3]),
+            _node(3, neighbors=[1]),
+        ])
+        _, edges = parse_zwave_nodes(payload)
+        assert all(e["target"] != _ieee(1) for e in edges)
+
+    def test_neighbor_to_unknown_node_dropped(self) -> None:
+        payload = _wrap([_node(1, controller=True, neighbors=[99])])
+        _, edges = parse_zwave_nodes(payload)
+        assert edges == []
+
+    def test_no_coordinator_means_no_edges(self) -> None:
+        payload = _wrap([_node(2, routing=True, neighbors=[3]), _node(3, neighbors=[2])])
+        _, edges = parse_zwave_nodes(payload)
+        assert edges == []
+
+
+# ---------------------------------------------------------------------------
+# build_zwave_properties
+# ---------------------------------------------------------------------------
+
+class TestBuildProperties:
+    def test_all_fields(self) -> None:
+        props = build_zwave_properties("zwave-x-1", "Aeotec", "ZW100")
+        keys = {p["key"]: p["value"] for p in props}
+        assert keys == {"Z-Wave ID": "zwave-x-1", "Vendor": "Aeotec", "Model": "ZW100"}
+
+    def test_omits_empty(self) -> None:
+        props = build_zwave_properties("zwave-x-1", None, None)
+        assert [p["key"] for p in props] == ["Z-Wave ID"]
+
+    def test_defaults_hidden(self) -> None:
+        props = build_zwave_properties("zwave-x-1", "V", "M")
+        assert all(p["visible"] is False for p in props)
+
+    def test_no_lqi_row(self) -> None:
+        props = build_zwave_properties("zwave-x-1", "V", "M")
+        assert all(p["key"] != "LQI" for p in props)
+
+
+# ---------------------------------------------------------------------------
+# fetch_zwave_network (mocked MQTT round-trip via mqtt_common)
+# ---------------------------------------------------------------------------
+
+_RESPONSE_TOPIC = "zwave/_CLIENTS/ZWAVE_GATEWAY-zwavejs2mqtt/api/getNodes"
+
+_SAMPLE_PAYLOAD = {
+    "success": True,
+    "result": [
+        {"id": 1, "homeId": HOME, "isControllerNode": True, "name": "Controller"},
+        {"id": 2, "homeId": HOME, "isRouting": True, "name": "Wall Plug", "neighbors": [1]},
+    ],
+}
+
+
+@pytest.mark.asyncio
+async def test_fetch_zwave_network_success() -> None:
+    class _FakeMessage:
+        topic = _RESPONSE_TOPIC
+        payload = json.dumps(_SAMPLE_PAYLOAD).encode()
+        _yielded = False
+
+        def __aiter__(self):
+            return self
+
+        async def __anext__(self):
+            if self._yielded:
+                raise StopAsyncIteration
+            self._yielded = True
+            return self
+
+    class _FakeClient:
+        async def __aenter__(self):
+            return self
+
+        async def __aexit__(self, *_):
+            pass
+
+        async def subscribe(self, _t: str) -> None:
+            pass
+
+        async def publish(self, _t: str, _p: str) -> None:
+            pass
+
+        @property
+        def messages(self):
+            return _FakeMessage()
+
+    with patch("app.services.mqtt_common.aiomqtt") as mock_aiomqtt:
+        mock_aiomqtt.Client.return_value = _FakeClient()
+        mock_aiomqtt.MqttError = Exception
+        nodes, edges = await fetch_zwave_network(mqtt_host="localhost", mqtt_port=1883)
+
+    assert any(n["type"] == "zwave_coordinator" for n in nodes)
+    assert any(n["type"] == "zwave_router" for n in nodes)
+
+
+@pytest.mark.asyncio
+async def test_fetch_zwave_network_connection_error() -> None:
+    class _FakeClient:
+        async def __aenter__(self):
+            raise Exception("Connection refused")
+
+        async def __aexit__(self, *_):
+            pass
+
+    with patch("app.services.mqtt_common.aiomqtt") as mock_aiomqtt:
+        mock_aiomqtt.Client.return_value = _FakeClient()
+        mock_aiomqtt.MqttError = Exception
+        with pytest.raises(ConnectionError):
+            await fetch_zwave_network(mqtt_host="bad", mqtt_port=1883)

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:
 

docs/zwave-import.md

@@ -0,0 +1,161 @@
+# Z-Wave (Z-Wave JS UI) Network Map Importer
+
+This feature lets you connect Homelable to your MQTT broker, fetch the Z-Wave node list from **Z-Wave JS UI** (formerly `zwavejs2mqtt`), and drop all Z-Wave devices onto the canvas as typed nodes with proper hierarchy.
+
+It mirrors the [Zigbee2MQTT importer](./zigbee-import.md): same MQTT request/response pattern, same node-type model, same canvas behaviour.
+
+---
+
+## Feature Overview
+
+- **Automatic device discovery** — Requests the node list from the Z-Wave JS UI MQTT gateway API and parses the full device list
+- **Typed nodes** — Devices are mapped to three homelable node types:
+  - `zwave_coordinator` — The Z-Wave controller (hub)
+  - `zwave_router` — Mains-powered / routing nodes
+  - `zwave_enddevice` — Battery-powered end devices (sensors, locks, etc.)
+- **Hierarchy** — `parent_id` is set automatically: controller → routers → end devices, derived from each node's neighbor list
+- **IoT edges** — Links between devices are added as `IoT / Zigbee` edge type
+- **Import targets** — Send discovered devices to the **Pending** section (review before adding) or drop them on the **Canvas** directly
+
+> **Note:** Z-Wave does not expose an LQI value the way Zigbee does, so the LQI property is omitted. (RSSI may be surfaced in a future release.)
+
+---
+
+## Prerequisites
+
+1. A running **MQTT broker** (e.g. Mosquitto) accessible from your Homelable host
+2. **Z-Wave JS UI** connected to the broker with the **MQTT gateway** enabled
+3. The gateway must respond to `getNodes` requests on:
+   - **Request topic:** `<prefix>/_CLIENTS/ZWAVE_GATEWAY-<gateway>/api/getNodes/set`
+   - **Response topic:** `<prefix>/_CLIENTS/ZWAVE_GATEWAY-<gateway>/api/getNodes`
+   - The default prefix is `zwave` and the default gateway name is `zwavejs2mqtt`
+
+---
+
+## Step-by-step Usage
+
+### 1. Open the Z-Wave Import dialog
+
+Click **Z-Wave Import** in the left sidebar (below "Zigbee Import").
+
+### 2. Configure the MQTT connection
+
+| Field | Default | Description |
+|---|---|---|
+| Broker Host | — | IP or hostname of your MQTT broker |
+| Port | 1883 | MQTT broker port (auto-switches to 8883 when TLS is enabled) |
+| MQTT Prefix | `zwave` | Z-Wave JS UI MQTT prefix (Settings → MQTT → "Prefix") |
+| Gateway Name | `zwavejs2mqtt` | Z-Wave JS UI gateway name (Settings → MQTT → "Name") |
+| Username | _(optional)_ | MQTT username if authentication is enabled |
+| Password | _(optional)_ | MQTT password |
+| Use TLS | off | Connect over TLS (typically port 8883) |
+| Skip cert verify | off | Accept self-signed certificates (TLS only) |
+
+> The **Prefix** and **Gateway Name** together form the MQTT topic the importer talks to. They must match your Z-Wave JS UI **Settings → MQTT** configuration exactly, or the request will time out.
+
+### 3. Test the connection (optional)
+
+Click **Test Connection** to verify broker reachability before fetching devices.
+A green indicator confirms success; red shows the error message from the broker.
+
+### 4. Choose an import target
+
+Pick where discovered devices should go:
+
+- **Pending section** — Devices are queued for review in the Pending list (and tracked as a scan run in Scan History). The controller is auto-approved as a canvas node; the rest wait for you to approve, hide, or delete them.
+- **Canvas directly** — Devices are fetched and shown grouped in the dialog so you can pick which ones to add immediately.
+
+### 5. Fetch devices
+
+Click **Import to Pending** (or **Fetch Devices** in canvas mode). Homelable will:
+1. Connect to the broker
+2. Subscribe to the response topic
+3. Publish a `getNodes` request to the gateway request topic
+4. Wait for the node-list response
+5. Parse and group devices by type
+
+### 6. Select and add to canvas
+
+(Canvas mode) Devices are grouped by type (Controller / Router / End Device).
+Use the checkboxes to select which devices to add, then click **Add N to Canvas**.
+
+> **Tip:** All devices are selected by default. Uncheck any you don't want.
+
+### 7. Arrange on the canvas
+
+Devices are placed in a grid at the top-right of the canvas.
+Use **Auto Layout** (toolbar) to re-arrange the full canvas, or drag nodes manually.
+
+---
+
+## Node Type Mapping
+
+The importer reads each Z-Wave node's role flags from the gateway and maps them as follows:
+
+| Z-Wave JS UI flag | homelable type | Role label |
+|---|---|---|
+| `isControllerNode` | `zwave_coordinator` | Controller |
+| `isRouting` | `zwave_router` | Router |
+| _(everything else)_ | `zwave_enddevice` | EndDevice |
+
+Each node keeps its name (`name` → `loc` → `Node <id>` fallback), vendor (`manufacturer`), and model (`productLabel` / `productDescription`) where available.
+
+---
+
+## MQTT Configuration Tips
+
+### Mosquitto without authentication
+
+```
+listener 1883
+allow_anonymous true
+```
+
+### Mosquitto with password file
+
+```
+listener 1883
+password_file /etc/mosquitto/passwd
+```
+
+Create a user:
+```bash
+mosquitto_passwd -c /etc/mosquitto/passwd <username>
+```
+
+### Z-Wave JS UI MQTT settings
+
+In **Settings → MQTT**, make sure the gateway is enabled and note these two values — they must match the importer fields:
+
+| Z-Wave JS UI setting | Importer field | Default |
+|---|---|---|
+| Name | Gateway Name | `zwavejs2mqtt` |
+| Prefix | MQTT Prefix | `zwave` |
+| Host / Port | Broker Host / Port | `localhost` / `1883` |
+
+The gateway must be in **"Named topics"** mode (the default) so the `getNodes` API topic is exposed.
+
+---
+
+## Supported Versions
+
+The `getNodes` MQTT gateway API is provided by **Z-Wave JS UI** (and its predecessor `zwavejs2mqtt`). Any recent release with the MQTT gateway enabled is supported.
+
+---
+
+## Troubleshooting
+
+| Symptom | Cause | Fix |
+|---|---|---|
+| "Connection refused" | Broker unreachable | Check host/port, firewall rules |
+| "Timed out waiting for response" | Gateway not running, or wrong prefix/gateway name | Verify Z-Wave JS UI is connected to MQTT; match **Prefix** and **Gateway Name** to Settings → MQTT |
+| 0 devices returned | No nodes included in the Z-Wave network | Include at least one device first |
+| "Z-Wave gateway reported failure" | Gateway returned `success: false` | Check the Z-Wave JS UI logs |
+| "Malformed getNodes response" | Gateway returned an unexpected format | Check the Z-Wave JS UI version; open an issue |
+| TLS errors with a self-signed cert | Certificate not trusted | Enable **Use TLS** + **Skip cert verify** |
+
+---
+
+## Screenshots
+
+_(Screenshots will be added in a future release)_

frontend/package.json

@@ -1,13 +1,13 @@
 {
   "name": "frontend",
   "private": true,
-  "version": "2.0.1",
+  "version": "2.6.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc -b",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
@@ -37,6 +37,11 @@
     "tw-animate-css": "^1.4.0",
     "zustand": "^5.0.11"
   },
+  "overrides": {
+    "hono": "^4.12.21",
+    "esbuild": "^0.28.1",
+    "form-data": "^4.0.6"
+  },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
     "@tailwindcss/vite": "^4.2.1",
@@ -58,7 +63,7 @@
     "tailwindcss": "^4.2.1",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.48.0",
-    "vite": "^7.3.1",
+    "vite": "^7.3.5",
     "vitest": "^4.0.18"
   }
 }

frontend/src/App.tsx

@@ -4,7 +4,10 @@ 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 { getCenteredPosition } from '@/utils/viewportCenter'
+import { resolveVirtualEdgeParent } from '@/utils/virtualEdgeParent'
 import { generateMarkdownTable } from '@/utils/exportMarkdown'
+import { copyToClipboard } from '@/utils/clipboard'
 import { ExportModal } from '@/components/modals/ExportModal'
 import { exportCanvasToYaml, downloadYaml } from '@/utils/exportYaml'
 import { parseYamlToCanvas } from '@/utils/importYaml'
@@ -19,37 +22,43 @@ import { LoginPage } from '@/components/LoginPage'
 import { NodeModal } from '@/components/modals/NodeModal'
 import { EdgeModal } from '@/components/modals/EdgeModal'
 import { ScanConfigModal } from '@/components/modals/ScanConfigModal'
+import { SettingsModal } from '@/components/modals/SettingsModal'
 import { ZigbeeImportModal } from '@/components/zigbee/ZigbeeImportModal'
+import { ZwaveImportModal } from '@/components/zwave/ZwaveImportModal'
 import { GroupRectModal, type GroupRectFormData } from '@/components/modals/GroupRectModal'
 import { TextModal, type TextFormData } from '@/components/modals/TextModal'
 import { ThemeModal } from '@/components/modals/ThemeModal'
 import { SearchModal } from '@/components/modals/SearchModal'
 import { PendingDevicesModal } from '@/components/modals/PendingDevicesModal'
+import { ScanHistoryModal } from '@/components/modals/ScanHistoryModal'
 import { ShortcutsModal } from '@/components/modals/ShortcutsModal'
+import { ConfirmAddToGroupModal } from '@/components/modals/ConfirmAddToGroupModal'
 import { useCanvasStore } from '@/stores/canvasStore'
+import { useDesignStore } from '@/stores/designStore'
 import { useAuthStore } from '@/stores/authStore'
 import { useThemeStore } from '@/stores/themeStore'
-import { canvasApi } from '@/api/client'
+import { canvasApi, designsApi, liveviewApi } from '@/api/client'
+import * as standaloneStorage from '@/utils/standaloneStorage'
 import { demoNodes, demoEdges } from '@/utils/demoData'
 import { useStatusPolling } from '@/hooks/useStatusPolling'
 import type { NodeData, EdgeData, CustomStyleDef } from '@/types'
 import type { ZigbeeNode, ZigbeeEdge } from '@/components/zigbee/types'
+import type { ZwaveNode, ZwaveEdge } from '@/components/zwave/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()
+  const { loadCanvas, markSaved, markUnsaved, selectedNodeId, selectedNodeIds, addNode, updateNode, deleteNode, onConnect, updateEdge, deleteEdge, setProxmoxContainerMode, setNodeZIndex, editingGroupRectId, setEditingGroupRectId, editingTextId, setEditingTextId, nodes, edges, snapshotHistory, undo, redo, addToGroup, addToContainer } = useCanvasStore()
   const canvasRef = useRef<HTMLDivElement>(null)
   const { isAuthenticated } = useAuthStore()
   const { activeTheme, setTheme, customStyle, setCustomStyle } = useThemeStore()
+  const { activeDesignId, setDesigns, setActiveDesign } = useDesignStore()
 
   useStatusPolling()
 
   const [themeModalOpen, setThemeModalOpen] = useState(false)
   const [searchOpen, setSearchOpen] = useState(false)
-  const [sidebarForceView, setSidebarForceView] = useState<'history' | undefined>(undefined)
+  const [scanHistoryOpen, setScanHistoryOpen] = useState(false)
   const [pendingModalOpen, setPendingModalOpen] = useState(false)
   const [pendingModalStatus, setPendingModalStatus] = useState<'pending' | 'hidden'>('pending')
   const [pendingHighlightId, setPendingHighlightId] = useState<string | undefined>(undefined)
@@ -65,85 +74,176 @@ export default function App() {
   const [addTextOpen, setAddTextOpen] = useState(false)
   const [editNodeId, setEditNodeId] = useState<string | null>(null)
   const [pendingConnection, setPendingConnection] = useState<Connection | null>(null)
+  const [pendingGroupAdd, setPendingGroupAdd] = useState<{ nodeId: string; groupId: string } | null>(null)
+  const [pendingContainerAdd, setPendingContainerAdd] = useState<{ nodeId: string; containerId: string } | null>(null)
   const [editEdgeId, setEditEdgeId] = useState<string | null>(null)
   const [scanConfigOpen, setScanConfigOpen] = useState(false)
+  const [settingsOpen, setSettingsOpen] = useState(false)
   const [exportModalOpen, setExportModalOpen] = useState(false)
   const [zigbeeImportOpen, setZigbeeImportOpen] = useState(false)
+  const [zwaveImportOpen, setZwaveImportOpen] = useState(false)
 
-  // Declare handleSave before the Ctrl+S effect so it is in scope
+  // Declare handleSave before the Ctrl+S effect so it is in scope.
-  const handleSave = useCallback(async () => {
+  // Returns true on success, false on failure — the design-switch effect relies
+  // on this to avoid loading (and clobbering) the canvas when a save fails.
+  const handleSave = useCallback(async (designIdOverride?: string): Promise<boolean> => {
     try {
+      const saveDesignId = designIdOverride ?? activeDesignId
       if (STANDALONE) {
-        localStorage.setItem(STANDALONE_STORAGE_KEY, JSON.stringify({ nodes, edges, theme_id: activeTheme, custom_style: customStyle }))
+        if (!saveDesignId) return false
+        standaloneStorage.saveCanvas(saveDesignId, { nodes, edges, theme_id: activeTheme, custom_style: customStyle })
         markSaved()
         toast.success('Canvas saved')
-        return
+        return true
       }
       const nodesToSave = nodes.map(serializeNode)
       const edgesToSave = edges.map(serializeEdge)
-      await canvasApi.save({ nodes: nodesToSave, edges: edgesToSave, viewport: { theme_id: activeTheme }, custom_style: customStyle })
+      await canvasApi.save({ nodes: nodesToSave, edges: edgesToSave, viewport: { theme_id: activeTheme }, custom_style: customStyle, design_id: saveDesignId })
       markSaved()
       toast.success('Canvas saved')
+      return true
     } catch {
       toast.error('Save failed')
+      return false
     }
-  }, [nodes, edges, markSaved, activeTheme, customStyle])
+  }, [nodes, edges, markSaved, activeTheme, customStyle, activeDesignId])
 
   // Keep a ref so the keydown handler always calls the latest version
   const handleSaveRef = useRef(handleSave)
   useEffect(() => { handleSaveRef.current = handleSave }, [handleSave])
 
-  // Load canvas on auth (or immediately in standalone mode)
+  const loadCanvasFromApi = useCallback(async (designId?: string) => {
-  useEffect(() => {
+    try {
-    if (STANDALONE) {
+      const res = await canvasApi.load(designId)
-      try {
+      const { nodes: apiNodes, edges: apiEdges } = res.data
-        const saved = localStorage.getItem(STANDALONE_STORAGE_KEY)
+      if (apiNodes.length > 0) {
-        if (saved) {
+        const proxmoxContainerMap = new Map<string, boolean>(
-          const { nodes: savedNodes, edges: savedEdges, theme_id, custom_style } = JSON.parse(saved)
+          (apiNodes as ApiNode[])
-          if (theme_id) setTheme(theme_id)
+            .filter((n) => n.type === 'group' || n.container_mode === true)
-          if (custom_style) setCustomStyle(custom_style)
+            .map((n) => [n.id, true])
-          loadCanvas(savedNodes, savedEdges)
+        )
-        } else {
+        const rfNodes = (apiNodes as ApiNode[]).map((n) => deserializeApiNode(n, proxmoxContainerMap))
-          loadCanvas(demoNodes, demoEdges)
+        const rfEdges = (apiEdges as ApiEdge[]).map(deserializeApiEdge)
-        }
+        const savedTheme = res.data.viewport?.theme_id
-      } catch {
+        if (savedTheme) setTheme(savedTheme)
+        if (res.data.custom_style) setCustomStyle(res.data.custom_style as CustomStyleDef)
+        loadCanvas(rfNodes, rfEdges)
+      } else {
         loadCanvas(demoNodes, demoEdges)
       }
+    } catch {
+      loadCanvas(demoNodes, demoEdges)
+    }
+  }, [loadCanvas, setTheme, setCustomStyle])
+
+  // Standalone counterpart of loadCanvasFromApi — reads a design's canvas from
+  // localStorage, falling back to the demo canvas when it has never been saved.
+  const loadStandaloneCanvas = useCallback((designId: string) => {
+    const saved = standaloneStorage.loadCanvas(designId)
+    if (saved && saved.nodes.length > 0) {
+      if (saved.theme_id) setTheme(saved.theme_id)
+      if (saved.custom_style) setCustomStyle(saved.custom_style)
+      loadCanvas(saved.nodes, saved.edges)
+    } else {
+      loadCanvas(demoNodes, demoEdges)
+    }
+  }, [loadCanvas, setTheme, setCustomStyle])
+
+  const loadDesignsAndCanvas = useCallback(async () => {
+    if (STANDALONE) {
+      const designs = standaloneStorage.ensureSeed()
+      setDesigns(designs)
+      const targetId = activeDesignId ?? designs[0]?.id
+      if (targetId) {
+        setActiveDesign(targetId)
+        loadStandaloneCanvas(targetId)
+      }
+      return
+    }
+    try {
+      const res = await designsApi.list()
+      const loadedDesigns = res.data
+      setDesigns(loadedDesigns)
+      const targetId = activeDesignId ?? loadedDesigns[0]?.id
+      if (targetId) {
+        setActiveDesign(targetId)
+        await loadCanvasFromApi(targetId)
+      }
+    } catch {
+      // If API fails (e.g. fresh DB with no designs), fall back to demo data
+      loadCanvas(demoNodes, demoEdges)
+    }
+  }, [setDesigns, setActiveDesign, loadCanvasFromApi, loadStandaloneCanvas, activeDesignId, loadCanvas])
+
+  // Keep a ref so the auth effect can call the latest loader without listing it
+  // as a dependency (which would re-fire on every design switch).
+  const loadDesignsAndCanvasRef = useRef(loadDesignsAndCanvas)
+  useEffect(() => { loadDesignsAndCanvasRef.current = loadDesignsAndCanvas }, [loadDesignsAndCanvas])
+
+  // Load designs + canvas on auth (or immediately in standalone mode, which has
+  // no auth gate).
+  useEffect(() => {
+    if (STANDALONE) {
+      loadDesignsAndCanvasRef.current()
       return
     }
     if (!isAuthenticated) return
-    canvasApi.load()
+    loadDesignsAndCanvasRef.current()
-      .then((res) => {
+  }, [isAuthenticated]) // only on auth change, not design change
-        const { nodes: apiNodes, edges: apiEdges } = res.data
+
-        if (apiNodes.length > 0) {
+  // Reload canvas when active design changes (after initial load)
-          // Build a map of container mode nodes to know if children should be nested
+  const initialLoadDone = useRef(false)
-          const proxmoxContainerMap = new Map<string, boolean>(
+  const prevDesignRef = useRef<string | null>(null)
-            (apiNodes as ApiNode[])
+  // Set while we programmatically revert activeDesignId after a failed save, so
-              .filter((n) => n.type === 'group' || n.container_mode === true)
+  // the re-entrant effect run skips save/load and just re-syncs the refs.
-              .map((n) => [n.id, true])
+  const revertingRef = useRef(false)
-          )
+  useEffect(() => {
-          const rfNodes = (apiNodes as ApiNode[]).map((n) => deserializeApiNode(n, proxmoxContainerMap))
+    if (revertingRef.current) {
-          const rfEdges = (apiEdges as ApiEdge[]).map(deserializeApiEdge)
+      revertingRef.current = false
-          const savedTheme = res.data.viewport?.theme_id
+      prevDesignRef.current = activeDesignId
-          if (savedTheme) setTheme(savedTheme)
+      return
-          if (res.data.custom_style) setCustomStyle(res.data.custom_style as CustomStyleDef)
+    }
-          loadCanvas(rfNodes, rfEdges)
+    // Standalone has no auth gate; backed mode requires authentication.
-        } else {
+    const ready = STANDALONE || isAuthenticated
-          loadCanvas(demoNodes, demoEdges)
+    const loadForDesign = STANDALONE ? loadStandaloneCanvas : loadCanvasFromApi
-        }
+    if (ready && activeDesignId && initialLoadDone.current) {
-      })
+      const oldId = prevDesignRef.current
-      .catch(() => loadCanvas(demoNodes, demoEdges))
+      // If the previous design was deleted (no longer in the list), don't try to
-  }, [isAuthenticated, loadCanvas, setTheme, setCustomStyle])
+      // save into it — just load the newly-selected design.
+      const oldStillExists = oldId ? useDesignStore.getState().designs.some((d) => d.id === oldId) : false
+      if (oldId && oldId !== activeDesignId && oldStillExists) {
+        // Save current (old) canvas data under the old design ID before switching.
+        // We call handleSave directly (not via ref) so it runs in this effect's
+        // closure where activeDesignId is already the NEW value — the override
+        // ensures data is stored under the correct design_id.
+        const targetId = activeDesignId
+        handleSave(oldId).then((ok) => {
+          if (ok) {
+            loadForDesign(targetId)
+          } else {
+            // Save failed: don't load the new design — that would overwrite the
+            // unsaved in-memory canvas. Revert the selection back to the old
+            // design so the UI matches the data still on screen.
+            toast.error('Switch cancelled — unsaved changes kept')
+            revertingRef.current = true
+            setActiveDesign(oldId)
+          }
+        })
+      } else {
+        loadForDesign(activeDesignId)
+      }
+    }
+    if (activeDesignId) {
+      prevDesignRef.current = activeDesignId
+      initialLoadDone.current = true
+    }
+  }, [activeDesignId])
 
   // Keep refs for store actions so keydown handler is always up-to-date without re-registering
   const undoRef = useRef(undo)
   const redoRef = useRef(redo)
-  const copyRef = useRef(copySelectedNodes)
-  const pasteRef = useRef(pasteNodes)
   useEffect(() => { undoRef.current = undo }, [undo])
   useEffect(() => { redoRef.current = redo }, [redo])
-  useEffect(() => { copyRef.current = copySelectedNodes }, [copySelectedNodes])
-  useEffect(() => { pasteRef.current = pasteNodes }, [pasteNodes])
 
   // Global keyboard shortcuts
   useEffect(() => {
@@ -157,8 +257,8 @@ export default function App() {
       if (ctrl && e.key === 'z') { e.preventDefault(); undoRef.current(); return }
       if (ctrl && (e.key === 'y' || (e.shiftKey && e.key === 'z'))) { e.preventDefault(); redoRef.current(); return }
       if (ctrl && e.key === 'k') { e.preventDefault(); setSearchOpen(true); return }
-      if (ctrl && e.key === 'c' && !isInput) { copyRef.current(); return }
+      // Copy/paste (Ctrl/Cmd+C/V) handled in CanvasContainer so paste can place
-      if (ctrl && e.key === 'v' && !isInput) { pasteRef.current(); return }
+      // nodes under the cursor / viewport center.
       if (e.key === '?' && !isInput) { setShortcutsOpen(true); return }
     }
     window.addEventListener('keydown', handler)
@@ -170,17 +270,23 @@ export default function App() {
     const id = generateUUID()
     const isContainerNode = data.container_mode === true
     const parentNode = data.parent_id ? nodes.find((n) => n.id === data.parent_id) : null
-    // Children position is relative to parent; place near top-left with padding
+    // Only nest when the parent is an actual container. For a non-container
-    const position = parentNode
+    // parent the LXC/VM stays a free node (linked by a virtual edge) — setting
-      ? { x: 20, y: 50 }
+    // extent:'parent' on a non-container would trap it inside the parent's tiny
-      : { x: 300, y: 300 }
+    // bounding box with no way to drag it out (issue #205 follow-up).
+    const nestInParent = !!parentNode?.data.container_mode
+    // Seed an ABSOLUTE position near the container's top-left; addNode converts
+    // it to container-relative. addNode is the single authority for parentId /
+    // extent, so we don't set them here.
+    const position = nestInParent && parentNode
+      ? { x: parentNode.position.x + 20, y: parentNode.position.y + 50 }
+      : getCenteredPosition(isContainerNode ? 300 : 0, isContainerNode ? 200 : 0)
 
     const newNode: Node<NodeData> = {
       id,
       type: data.type ?? 'generic',
       position,
       data: { status: 'unknown', services: [], ...data } as NodeData,
-      ...(data.parent_id ? { parentId: data.parent_id, extent: 'parent' as const } : {}),
       ...(isContainerNode ? { width: 300, height: 200 } : {}),
     }
     addNode(newNode)
@@ -193,7 +299,7 @@ export default function App() {
     const newNode: Node<NodeData> = {
       id,
       type: 'groupRect',
-      position: { x: 200, y: 200 },
+      position: getCenteredPosition(360, 240),
       data: {
         label: data.label,
         type: 'groupRect',
@@ -252,7 +358,7 @@ export default function App() {
       // node fields; text_content is not in the schema and was lost on reload.
       // TextNode and the edit modal both already fall back to label.
       type: 'text',
-      position: { x: 250, y: 250 },
+      position: getCenteredPosition(200, 60),
       data: {
         label: data.text,
         type: 'text',
@@ -361,8 +467,11 @@ export default function App() {
   const handleExportMd = useCallback(async () => {
     const md = generateMarkdownTable(nodes)
     if (!md) { toast.error('No nodes to export'); return }
-    await navigator.clipboard.writeText(md)
+    if (await copyToClipboard(md)) {
-    toast.success('Markdown table copied to clipboard')
+      toast.success('Markdown table copied to clipboard')
+    } else {
+      toast.error('Markdown copy failed')
+    }
   }, [nodes])
 
   const handleExportYaml = useCallback(() => {
@@ -384,6 +493,31 @@ export default function App() {
     }
   }, [nodes, edges, snapshotHistory, loadCanvas, markUnsaved])
 
+  // Open the read-only live view of the currently active design in a new tab.
+  // Standalone has no backend/key — it reads localStorage, so just open /view.
+  // Otherwise fetch the configured live view key and build /view?key=...&design=<id>.
+  const handleViewOnly = useCallback(async () => {
+    if (STANDALONE) {
+      // Standalone reads canvas from localStorage; pass the active design id so
+      // the read-only tab renders the same canvas the user is viewing.
+      const url = activeDesignId ? `/view?design=${encodeURIComponent(activeDesignId)}` : '/view'
+      window.open(url, '_blank', 'noopener,noreferrer')
+      return
+    }
+    try {
+      const res = await liveviewApi.getConfig()
+      if (!res.data.enabled || !res.data.key) {
+        toast.error('Live view is disabled — set LIVEVIEW_KEY in the backend .env')
+        return
+      }
+      const params = new URLSearchParams({ key: res.data.key })
+      if (activeDesignId) params.set('design', activeDesignId)
+      window.open(`/view?${params.toString()}`, '_blank', 'noopener,noreferrer')
+    } catch {
+      toast.error('Failed to open live view')
+    }
+  }, [activeDesignId])
+
   const handleExport = useCallback(() => {
     const el = canvasRef.current?.querySelector<HTMLElement>('.react-flow')
     if (!el) { toast.error('Canvas not ready'); return }
@@ -392,15 +526,18 @@ export default function App() {
 
   const handleZigbeeAddToCanvas = useCallback((zigbeeNodes: ZigbeeNode[], zigbeeEdges: ZigbeeEdge[]) => {
     snapshotHistory()
-    // Place nodes in a grid starting at x=500, y=100
+    // Place nodes in a grid centred on the visible canvas.
     const COLS = 4
     const SPACING_X = 170
     const SPACING_Y = 100
+    const cols = Math.min(COLS, zigbeeNodes.length)
+    const rows = Math.ceil(zigbeeNodes.length / COLS)
+    const origin = getCenteredPosition(cols * SPACING_X, rows * SPACING_Y)
     zigbeeNodes.forEach((zn, i) => {
       const id = zn.id
       const col = i % COLS
       const row = Math.floor(i / COLS)
-      const position = { x: 500 + col * SPACING_X, y: 100 + row * SPACING_Y }
+      const position = { x: origin.x + col * SPACING_X, y: origin.y + row * SPACING_Y }
       const newNode: import('@xyflow/react').Node<NodeData> = {
         id,
         type: zn.type,
@@ -438,6 +575,53 @@ export default function App() {
     markUnsaved()
   }, [addNode, onConnect, snapshotHistory, markUnsaved])
 
+  const handleZwaveAddToCanvas = useCallback((zwaveNodes: ZwaveNode[], zwaveEdges: ZwaveEdge[]) => {
+    snapshotHistory()
+    const COLS = 4
+    const SPACING_X = 170
+    const SPACING_Y = 100
+    const cols = Math.min(COLS, zwaveNodes.length)
+    const rows = Math.ceil(zwaveNodes.length / COLS)
+    const origin = getCenteredPosition(cols * SPACING_X, rows * SPACING_Y)
+    zwaveNodes.forEach((zn, i) => {
+      const id = zn.id
+      const col = i % COLS
+      const row = Math.floor(i / COLS)
+      const position = { x: origin.x + col * SPACING_X, y: origin.y + row * SPACING_Y }
+      const newNode: import('@xyflow/react').Node<NodeData> = {
+        id,
+        type: zn.type,
+        position,
+        data: {
+          label: zn.friendly_name,
+          type: zn.type as NodeData['type'],
+          status: 'unknown' as const,
+          services: [],
+          ...(zn.model ? { os: zn.model } : {}),
+          ...(zn.parent_id ? { parent_id: zn.parent_id } : {}),
+        },
+      }
+      addNode(newNode)
+    })
+    // Add IoT edges between Z-Wave devices: parent bottom -> child top
+    zwaveEdges.forEach((ze) => {
+      onConnect({
+        source: ze.source,
+        sourceHandle: 'bottom',
+        target: ze.target,
+        targetHandle: 'top-t',
+        type: 'iot',
+      } as unknown as import('@xyflow/react').Connection)
+    })
+    const importedIds = new Set(zwaveNodes.map((zn) => zn.id))
+    useCanvasStore.setState((state) => ({
+      nodes: state.nodes.map((n) => ({ ...n, selected: importedIds.has(n.id) })),
+      selectedNodeIds: Array.from(importedIds),
+      selectedNodeId: importedIds.size === 1 ? Array.from(importedIds)[0] : null,
+    }))
+    markUnsaved()
+  }, [addNode, onConnect, snapshotHistory, markUnsaved])
+
   const handleEdgeConnect = useCallback((connection: Connection) => {
     setPendingConnection(connection)
   }, [])
@@ -450,16 +634,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']
+      if (src && tgt) {
-      const tgtType = tgt?.data.type as NodeData['type']
+        const assignment = resolveVirtualEdgeParent(
-      if ((srcType === 'lxc' || srcType === 'vm') && CONTAINER_MODE_TYPES.has(tgtType)) {
+          { id: src.id, type: src.data.type as NodeData['type'] },
-        updateNode(pendingConnection.source, { parent_id: pendingConnection.target })
+          { id: tgt.id, type: tgt.data.type as NodeData['type'] },
-      } else if (CONTAINER_MODE_TYPES.has(srcType) && (tgtType === 'lxc' || tgtType === 'vm')) {
+        )
-        updateNode(pendingConnection.target, { parent_id: pendingConnection.source })
+        if (assignment) {
-      } else if (srcType === 'docker_container' && tgtType === 'docker_host') {
+          updateNode(assignment.childId, { parent_id: assignment.parentId })
-        updateNode(pendingConnection.source, { parent_id: pendingConnection.target })
+        }
-      } else if (tgtType === 'docker_container' && srcType === 'docker_host') {
-        updateNode(pendingConnection.target, { parent_id: pendingConnection.source })
       }
     }
     setPendingConnection(null)
@@ -514,8 +696,10 @@ export default function App() {
             onAddText={() => setAddTextOpen(true)}
             onScan={() => setScanConfigOpen(true)}
             onZigbeeImport={() => setZigbeeImportOpen(true)}
+            onZwaveImport={() => setZwaveImportOpen(true)}
             onSave={handleSave}
-            forceView={sidebarForceView}
+            onOpenSettings={() => setSettingsOpen(true)}
+            onOpenHistory={() => setScanHistoryOpen(true)}
             onOpenPending={openPendingModal}
           />
           <div className="flex flex-col flex-1 min-w-0">
@@ -530,6 +714,7 @@ export default function App() {
               onExportMd={handleExportMd}
               onExportYaml={handleExportYaml}
               onImportYaml={handleImportYaml}
+              onViewOnly={handleViewOnly}
             />
             <div className="flex flex-1 min-h-0">
               <div ref={canvasRef} className="flex-1 min-w-0 h-full">
@@ -538,6 +723,8 @@ export default function App() {
                   onEdgeDoubleClick={handleEdgeDoubleClick}
                   onNodeDoubleClick={handleNodeDoubleClick}
                   onNodeDragStart={snapshotHistory}
+                  onRequestAddToGroup={setPendingGroupAdd}
+                  onRequestAddToContainer={setPendingContainerAdd}
                   onOpenPending={(deviceId) => openPendingModal(deviceId)}
                 />
               </div>
@@ -552,9 +739,7 @@ export default function App() {
           onClose={() => setAddNodeOpen(false)}
           onSubmit={handleAddNode}
           title="Add Node"
-          parentContainerNodes={nodes
+          parentCandidates={nodes.map((n) => ({ id: n.id, label: n.data.label ?? n.id, type: n.data.type, container_mode: n.data.container_mode }))}
-            .filter((n) => CONTAINER_MODE_TYPES.has(n.data.type) && n.data.container_mode)
-            .map((n) => ({ id: n.id, label: n.data.label, nodeType: n.data.type }))}
         />
 
         {/* key forces re-mount when editing a different node, resetting form state */}
@@ -565,9 +750,25 @@ export default function App() {
           onSubmit={handleUpdateNode}
           initial={editNode?.data}
           title="Edit Node"
-          parentContainerNodes={nodes
+          parentCandidates={(() => {
-            .filter((n) => n.id !== editNodeId && CONTAINER_MODE_TYPES.has(n.data.type) && n.data.container_mode)
+            const descendants = new Set<string>()
-            .map((n) => ({ id: n.id, label: n.data.label, nodeType: n.data.type }))}
+            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, container_mode: n.data.container_mode }))
+          })()}
+          currentNodeId={editNodeId ?? undefined}
         />
 
         <EdgeModal
@@ -599,8 +800,6 @@ export default function App() {
             onClose={() => setScanConfigOpen(false)}
             onScanNow={() => {
               toast.success('Network scan started — check Scan History for results')
-              setSidebarForceView(undefined)
-              setTimeout(() => setSidebarForceView('history'), 0)
             }}
           />
         )}
@@ -611,12 +810,29 @@ export default function App() {
             onClose={() => setZigbeeImportOpen(false)}
             onAddToCanvas={handleZigbeeAddToCanvas}
             onPendingImported={() => {
-              setSidebarForceView(undefined)
+              toast.success('Zigbee import started — check Scan History for results')
-              setTimeout(() => setSidebarForceView('history'), 0)
             }}
           />
         )}
 
+        {!STANDALONE && (
+          <ZwaveImportModal
+            open={zwaveImportOpen}
+            onClose={() => setZwaveImportOpen(false)}
+            onAddToCanvas={handleZwaveAddToCanvas}
+            onPendingImported={() => {
+              toast.success('Z-Wave import started — check Scan History for results')
+            }}
+          />
+        )}
+
+        {!STANDALONE && (
+          <ScanHistoryModal
+            open={scanHistoryOpen}
+            onClose={() => setScanHistoryOpen(false)}
+          />
+        )}
+
         <GroupRectModal
           open={addGroupRectOpen}
           onClose={() => setAddGroupRectOpen(false)}
@@ -697,6 +913,33 @@ export default function App() {
         />
         <ShortcutsModal open={shortcutsOpen} onClose={() => setShortcutsOpen(false)} />
 
+        <ConfirmAddToGroupModal
+          open={!!pendingGroupAdd}
+          nodeLabel={pendingGroupAdd ? (nodes.find((n) => n.id === pendingGroupAdd.nodeId)?.data.label ?? '') : ''}
+          targetLabel={pendingGroupAdd ? (nodes.find((n) => n.id === pendingGroupAdd.groupId)?.data.label ?? '') : ''}
+          onConfirm={() => {
+            if (pendingGroupAdd) addToGroup(pendingGroupAdd.groupId, pendingGroupAdd.nodeId)
+            setPendingGroupAdd(null)
+          }}
+          onCancel={() => setPendingGroupAdd(null)}
+        />
+
+        <ConfirmAddToGroupModal
+          open={!!pendingContainerAdd}
+          variant="container"
+          nodeLabel={pendingContainerAdd ? (nodes.find((n) => n.id === pendingContainerAdd.nodeId)?.data.label ?? '') : ''}
+          targetLabel={pendingContainerAdd ? (nodes.find((n) => n.id === pendingContainerAdd.containerId)?.data.label ?? '') : ''}
+          onConfirm={() => {
+            if (pendingContainerAdd) addToContainer(pendingContainerAdd.containerId, pendingContainerAdd.nodeId)
+            setPendingContainerAdd(null)
+          }}
+          onCancel={() => setPendingContainerAdd(null)}
+        />
+
+        {/* Mounted in standalone too: status-check settings are hidden inside,
+            but canvas prefs (snap, hide-IP) still apply. */}
+        <SettingsModal open={settingsOpen} onClose={() => setSettingsOpen(false)} />
+
         <PendingDevicesModal
           open={pendingModalOpen}
           onClose={() => setPendingModalOpen(false)}

frontend/src/api/__tests__/client.test.ts

@@ -0,0 +1,232 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+type Interceptor<T> = {
+  fulfilled?: (v: T) => T | Promise<T>
+  rejected?: (e: unknown) => unknown
+}
+
+interface MockInstance {
+  defaults: { baseURL?: string }
+  interceptors: {
+    request: { use: (f: Interceptor<unknown>['fulfilled'], r?: Interceptor<unknown>['rejected']) => void }
+    response: { use: (f: Interceptor<unknown>['fulfilled'], r?: Interceptor<unknown>['rejected']) => void }
+  }
+  get: ReturnType<typeof vi.fn>
+  post: ReturnType<typeof vi.fn>
+  patch: ReturnType<typeof vi.fn>
+  delete: ReturnType<typeof vi.fn>
+  __req: Interceptor<{ headers: Record<string, string> }>
+  __res: Interceptor<unknown>
+}
+
+const hoisted = vi.hoisted(() => ({ instances: [] as unknown[] }))
+const instances = hoisted.instances as MockInstance[]
+
+vi.mock('axios', () => {
+  return {
+    default: {
+      create: (cfg: { baseURL?: string }) => {
+        const inst: MockInstance = {
+          defaults: { baseURL: cfg?.baseURL },
+          interceptors: {
+            request: { use: (f: unknown, r?: unknown) => { inst.__req = { fulfilled: f as never, rejected: r as never } } },
+            response: { use: (f: unknown, r?: unknown) => { inst.__res = { fulfilled: f as never, rejected: r as never } } },
+          },
+          get: vi.fn(() => Promise.resolve({ data: {} })),
+          post: vi.fn(() => Promise.resolve({ data: {} })),
+          patch: vi.fn(() => Promise.resolve({ data: {} })),
+          delete: vi.fn(() => Promise.resolve({ data: {} })),
+          __req: {},
+          __res: {},
+        }
+        hoisted.instances.push(inst)
+        return inst
+      },
+    },
+  }
+})
+
+import { useAuthStore } from '@/stores/authStore'
+import * as clientModule from '../client'
+
+describe('api/client', () => {
+  const mod = clientModule
+  const [api, publicApi] = instances
+
+  beforeEach(() => {
+    useAuthStore.setState({ token: null, isAuthenticated: false })
+    api.get.mockClear()
+    api.post.mockClear()
+    api.patch.mockClear()
+    api.delete.mockClear()
+    publicApi.get.mockClear()
+    publicApi.post.mockClear()
+  })
+
+  it('creates two axios instances with /api/v1 baseURL', () => {
+    expect(instances).toHaveLength(2)
+    expect(api.defaults.baseURL).toBe('/api/v1')
+    expect(publicApi.defaults.baseURL).toBe('/api/v1')
+  })
+
+  it('exports `api` matching the first created instance', () => {
+    expect(mod.api).toBe(api)
+  })
+
+  it('request interceptor adds Authorization header when token present', () => {
+    useAuthStore.setState({ token: 'tok-123', isAuthenticated: true })
+    const cfg = { headers: {} as Record<string, string> }
+    const out = api.__req.fulfilled!(cfg)
+    expect((out as typeof cfg).headers.Authorization).toBe('Bearer tok-123')
+  })
+
+  it('request interceptor leaves headers untouched when no token', () => {
+    const cfg = { headers: {} as Record<string, string> }
+    const out = api.__req.fulfilled!(cfg)
+    expect((out as typeof cfg).headers.Authorization).toBeUndefined()
+  })
+
+  it('response interceptor passes through 2xx responses', () => {
+    const r = { status: 200, data: { ok: true } }
+    expect(api.__res.fulfilled!(r)).toBe(r)
+  })
+
+  it('response interceptor calls logout on 401', async () => {
+    const logout = vi.spyOn(useAuthStore.getState(), 'logout')
+    useAuthStore.setState({ token: 't', isAuthenticated: true, logout })
+    const err = { response: { status: 401 } }
+    await expect(api.__res.rejected!(err)).rejects.toBe(err)
+    expect(logout).toHaveBeenCalled()
+  })
+
+  it('response interceptor does not call logout on non-401', async () => {
+    const logout = vi.fn()
+    useAuthStore.setState({ token: 't', isAuthenticated: true, logout })
+    const err = { response: { status: 500 } }
+    await expect(api.__res.rejected!(err)).rejects.toBe(err)
+    expect(logout).not.toHaveBeenCalled()
+  })
+
+  it('response interceptor handles error with no response object', async () => {
+    const logout = vi.fn()
+    useAuthStore.setState({ logout })
+    const err = { message: 'network down' }
+    await expect(api.__res.rejected!(err)).rejects.toBe(err)
+    expect(logout).not.toHaveBeenCalled()
+  })
+
+  it('publicApi has no request/response interceptors registered', () => {
+    expect(publicApi.__req.fulfilled).toBeUndefined()
+    expect(publicApi.__res.fulfilled).toBeUndefined()
+  })
+
+  it('authApi.login posts to /auth/login', () => {
+    mod.authApi.login('u', 'p')
+    expect(api.post).toHaveBeenCalledWith('/auth/login', { username: 'u', password: 'p' })
+  })
+
+  it('canvasApi.load GETs /canvas', () => {
+    mod.canvasApi.load()
+    expect(api.get).toHaveBeenCalledWith('/canvas', expect.objectContaining({}))
+  })
+
+  it('canvasApi.save POSTs to /canvas/save with payload', () => {
+    const payload = { nodes: [], edges: [], viewport: {} }
+    mod.canvasApi.save(payload)
+    expect(api.post).toHaveBeenCalledWith('/canvas/save', payload)
+  })
+
+  it('nodesApi CRUD calls correct endpoints', () => {
+    mod.nodesApi.create({ a: 1 })
+    expect(api.post).toHaveBeenCalledWith('/nodes', { a: 1 })
+    mod.nodesApi.update('n1', { b: 2 })
+    expect(api.patch).toHaveBeenCalledWith('/nodes/n1', { b: 2 })
+    mod.nodesApi.delete('n1')
+    expect(api.delete).toHaveBeenCalledWith('/nodes/n1')
+  })
+
+  it('edgesApi CRUD calls correct endpoints', () => {
+    mod.edgesApi.create({ s: 'a', t: 'b' })
+    expect(api.post).toHaveBeenCalledWith('/edges', { s: 'a', t: 'b' })
+    mod.edgesApi.delete('e1')
+    expect(api.delete).toHaveBeenCalledWith('/edges/e1')
+  })
+
+  it('liveviewApi.load uses publicApi with key param', () => {
+    mod.liveviewApi.load('k-1')
+    expect(publicApi.get).toHaveBeenCalledWith('/liveview', { params: { key: 'k-1' } })
+    expect(api.get).not.toHaveBeenCalled()
+  })
+
+  it('liveviewApi.load forwards design as design_id when provided', () => {
+    mod.liveviewApi.load('k-1', 'design-9')
+    expect(publicApi.get).toHaveBeenCalledWith('/liveview', { params: { key: 'k-1', design_id: 'design-9' } })
+  })
+
+  it('liveviewApi.getConfig hits the authenticated config endpoint', () => {
+    mod.liveviewApi.getConfig()
+    expect(api.get).toHaveBeenCalledWith('/liveview/config')
+  })
+
+  it('scanApi endpoints route correctly', () => {
+    mod.scanApi.trigger()
+    expect(api.post).toHaveBeenCalledWith('/scan/trigger', {})
+    mod.scanApi.pending()
+    expect(api.get).toHaveBeenCalledWith('/scan/pending')
+    mod.scanApi.hidden()
+    expect(api.get).toHaveBeenCalledWith('/scan/hidden')
+    mod.scanApi.runs()
+    expect(api.get).toHaveBeenCalledWith('/scan/runs')
+    mod.scanApi.clearPending()
+    expect(api.delete).toHaveBeenCalledWith('/scan/pending')
+    mod.scanApi.approve('d1', { foo: 'bar' })
+    expect(api.post).toHaveBeenCalledWith('/scan/pending/d1/approve', { foo: 'bar' })
+    mod.scanApi.hide('d1')
+    expect(api.post).toHaveBeenCalledWith('/scan/pending/d1/hide')
+    mod.scanApi.ignore('d1')
+    expect(api.post).toHaveBeenCalledWith('/scan/pending/d1/ignore')
+    mod.scanApi.bulkApprove(['a', 'b'])
+    expect(api.post).toHaveBeenCalledWith('/scan/pending/bulk-approve', { device_ids: ['a', 'b'], design_id: undefined })
+    mod.scanApi.bulkApprove(['a'], 'design-9')
+    expect(api.post).toHaveBeenCalledWith('/scan/pending/bulk-approve', { device_ids: ['a'], design_id: 'design-9' })
+    mod.scanApi.bulkHide(['a'])
+    expect(api.post).toHaveBeenCalledWith('/scan/pending/bulk-hide', { device_ids: ['a'] })
+    mod.scanApi.restore('d1')
+    expect(api.post).toHaveBeenCalledWith('/scan/pending/d1/restore')
+    mod.scanApi.bulkRestore(['a'])
+    expect(api.post).toHaveBeenCalledWith('/scan/pending/bulk-restore', { device_ids: ['a'] })
+    mod.scanApi.stop('run-1')
+    expect(api.post).toHaveBeenCalledWith('/scan/run-1/stop')
+    mod.scanApi.getConfig()
+    expect(api.get).toHaveBeenCalledWith('/scan/config')
+    mod.scanApi.saveConfig({ ranges: ['1.0/24'] })
+    expect(api.post).toHaveBeenCalledWith('/scan/config', { ranges: ['1.0/24'] })
+  })
+
+  it('settingsApi get/save', () => {
+    mod.settingsApi.get()
+    expect(api.get).toHaveBeenCalledWith('/settings')
+    mod.settingsApi.save({ interval_seconds: 30, service_check_enabled: true, service_check_interval: 600 })
+    expect(api.post).toHaveBeenCalledWith('/settings', { interval_seconds: 30, service_check_enabled: true, service_check_interval: 600 })
+  })
+
+  it('zigbeeApi.testConnection/importNetwork/importToPending', () => {
+    const cfg = { mqtt_host: 'h', mqtt_port: 1883 }
+    mod.zigbeeApi.testConnection(cfg)
+    expect(api.post).toHaveBeenCalledWith('/zigbee/test-connection', cfg)
+    mod.zigbeeApi.importNetwork(cfg)
+    expect(api.post).toHaveBeenCalledWith('/zigbee/import', cfg)
+    mod.zigbeeApi.importToPending(cfg)
+    expect(api.post).toHaveBeenCalledWith('/zigbee/import-pending', cfg)
+  })
+
+  it('zwaveApi.testConnection/importNetwork/importToPending', () => {
+    const cfg = { mqtt_host: 'h', mqtt_port: 1883, prefix: 'zwave', gateway_name: 'zwavejs2mqtt' }
+    mod.zwaveApi.testConnection(cfg)
+    expect(api.post).toHaveBeenCalledWith('/zwave/test-connection', cfg)
+    mod.zwaveApi.importNetwork(cfg)
+    expect(api.post).toHaveBeenCalledWith('/zwave/import', cfg)
+    mod.zwaveApi.importToPending(cfg)
+    expect(api.post).toHaveBeenCalledWith('/zwave/import-pending', cfg)
+  })
+})

frontend/src/api/client.ts

@@ -28,12 +28,16 @@ export const authApi = {
 }
 
 export const canvasApi = {
-  load: () => api.get('/canvas'),
+  load: (design_id?: string) => {
+    const params = design_id ? { design_id } : {}
+    return api.get('/canvas', { params })
+  },
   save: (payload: {
     nodes: object[]
     edges: object[]
     viewport: object
     custom_style?: object | null
+    design_id?: string | null
   }) => api.post('/canvas/save', payload),
 }
 
@@ -49,11 +53,21 @@ export const edgesApi = {
 }
 
 export const liveviewApi = {
-  load: (key: string) => publicApi.get('/liveview', { params: { key } }),
+  load: (key: string, design?: string) =>
+    publicApi.get('/liveview', { params: { key, ...(design ? { design_id: design } : {}) } }),
+  getConfig: () => api.get<{ enabled: boolean; key: string | null }>('/liveview/config'),
 }
 
+export interface DeepScanConfig {
+  http_ranges: string[]
+  http_probe_enabled: boolean
+  verify_tls: boolean
+}
+
+export type ScanConfigData = { ranges: string[] } & DeepScanConfig
+
 export const scanApi = {
-  trigger: () => api.post('/scan/trigger'),
+  trigger: (deepScan?: Partial<DeepScanConfig>) => api.post('/scan/trigger', deepScan ?? {}),
   pending: () => api.get('/scan/pending'),
   hidden: () => api.get('/scan/hidden'),
   runs: () => api.get('/scan/runs'),
@@ -67,7 +81,7 @@ export const scanApi = {
     }>(`/scan/pending/${id}/approve`, nodeData),
   hide: (id: string) => api.post(`/scan/pending/${id}/hide`),
   ignore: (id: string) => api.post(`/scan/pending/${id}/ignore`),
-  bulkApprove: (ids: string[]) =>
+  bulkApprove: (ids: string[], designId?: string | null) =>
     api.post<{
       approved: number
       node_ids: string[]
@@ -75,18 +89,33 @@ export const scanApi = {
       edges_created: number
       edges: { id: string; source: string; target: string }[]
       skipped: number
-    }>('/scan/pending/bulk-approve', { device_ids: ids }),
+    }>('/scan/pending/bulk-approve', { device_ids: ids, design_id: designId ?? undefined }),
   bulkHide: (ids: string[]) => api.post<{ hidden: number; skipped: number }>('/scan/pending/bulk-hide', { device_ids: ids }),
   restore: (id: string) => api.post<{ restored: boolean; device_id: string }>(`/scan/pending/${id}/restore`),
   bulkRestore: (ids: string[]) => api.post<{ restored: number; skipped: number }>('/scan/pending/bulk-restore', { device_ids: ids }),
   stop: (runId: string) => api.post(`/scan/${runId}/stop`),
-  getConfig: () => api.get<{ ranges: string[] }>('/scan/config'),
+  getConfig: () => api.get<ScanConfigData>('/scan/config'),
-  saveConfig: (data: { ranges: string[] }) => api.post('/scan/config', data),
+  saveConfig: (data: ScanConfigData) => api.post('/scan/config', data),
+}
+
+export interface AppSettings {
+  interval_seconds: number
+  service_check_enabled: boolean
+  service_check_interval: number
 }
 
 export const settingsApi = {
-  get: () => api.get<{ interval_seconds: number }>('/settings'),
+  get: () => api.get<AppSettings>('/settings'),
-  save: (data: { interval_seconds: number }) => api.post<{ interval_seconds: number }>('/settings', data),
+  save: (data: AppSettings) => api.post<AppSettings>('/settings', data),
+}
+
+export const designsApi = {
+  list: () => api.get<import('@/types').Design[]>('/designs'),
+  create: (data: { name: string; icon?: string; design_type?: string }) =>
+    api.post<import('@/types').Design>('/designs', data),
+  update: (id: string, data: { name?: string; icon?: string }) =>
+    api.put<import('@/types').Design>(`/designs/${id}`, data),
+  delete: (id: string) => api.delete(`/designs/${id}`),
 }
 
 export const zigbeeApi = {
@@ -135,3 +164,52 @@ export const zigbeeApi = {
       error: string | null
     }>('/zigbee/import-pending', data),
 }
+
+export const zwaveApi = {
+  testConnection: (data: {
+    mqtt_host: string
+    mqtt_port: number
+    mqtt_username?: string
+    mqtt_password?: string
+    mqtt_tls?: boolean
+    mqtt_tls_insecure?: boolean
+  }) =>
+    api.post<{ connected: boolean; message: string }>('/zwave/test-connection', data),
+
+  importNetwork: (data: {
+    mqtt_host: string
+    mqtt_port: number
+    mqtt_username?: string
+    mqtt_password?: string
+    prefix?: string
+    gateway_name?: string
+    mqtt_tls?: boolean
+    mqtt_tls_insecure?: boolean
+  }) =>
+    api.post<{
+      nodes: import('@/components/zwave/types').ZwaveNode[]
+      edges: import('@/components/zwave/types').ZwaveEdge[]
+      device_count: number
+    }>('/zwave/import', data),
+
+  importToPending: (data: {
+    mqtt_host: string
+    mqtt_port: number
+    mqtt_username?: string
+    mqtt_password?: string
+    prefix?: string
+    gateway_name?: string
+    mqtt_tls?: boolean
+    mqtt_tls_insecure?: boolean
+  }) =>
+    api.post<{
+      id: string
+      status: string
+      kind: string
+      ranges: string[]
+      devices_found: number
+      started_at: string
+      finished_at: string | null
+      error: string | null
+    }>('/zwave/import-pending', data),
+}

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,11 +28,12 @@ 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 * as standaloneStorage from '@/utils/standaloneStorage'
+import type { NodeData, CustomStyleDef } from '@/types'
 
 const STANDALONE = import.meta.env.VITE_STANDALONE === 'true'
-const STORAGE_KEY = 'homelable_canvas'
 
 type ViewState = 'loading' | 'disabled' | 'invalid-key' | 'no-key' | 'network-error' | 'ready'
 
@@ -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)
@@ -52,30 +55,39 @@ function LiveViewCanvas() {
 
   useEffect(() => {
     if (STANDALONE) {
-      try {
+      // ?design=<id> selects which canvas to render; fall back to the first
-        const saved = localStorage.getItem(STORAGE_KEY)
+      // design when omitted. Standalone stores full React Flow nodes/edges, so
-        if (saved) {
+      // no API deserialization is needed.
-          const { nodes: savedNodes, edges: savedEdges } = JSON.parse(saved)
+      const designId = new URLSearchParams(window.location.search).get('design')
-          loadCanvas(savedNodes, savedEdges)
+        ?? standaloneStorage.listDesigns()[0]?.id
-        }
+      const saved = designId ? standaloneStorage.loadCanvas(designId) : null
-      } catch {
+      if (saved) {
-        // empty canvas on parse error — show empty canvas
+        if (saved.theme_id) setTheme(saved.theme_id)
+        if (saved.custom_style) setCustomStyle(saved.custom_style)
+        loadCanvas(saved.nodes, saved.edges)
       }
       return
     }
 
     // Already handled synchronously in useState initializer
-    const key = new URLSearchParams(window.location.search).get('key')
+    const search = new URLSearchParams(window.location.search)
+    const key = search.get('key')
     if (!key) return
+    // Optional ?design=<id> selects which canvas to render; backend falls back
+    // to the first design when omitted.
+    const design = search.get('design') ?? undefined
 
-    liveviewApi.load(key)
+    liveviewApi.load(key, design)
       .then((res) => {
         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')
+            .filter((n: ApiNode) => n.type === 'group' || n.container_mode === true)
-            .map((n: ApiNode) => [n.id, n.type === 'group' ? true : n.container_mode !== false])
+            .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 +99,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 +115,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 +155,8 @@ function LiveViewCanvas() {
   return (
     <div className="w-full h-screen" style={{ background: theme.colors.canvasBackground }}>
       <ReactFlow
-        nodes={nodes}
+        nodes={visibleNodes}
-        edges={edges}
+        edges={visibleEdges}
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
         nodesDraggable={false}
@@ -140,6 +164,8 @@ function LiveViewCanvas() {
         elementsSelectable={false}
         panOnDrag
         zoomOnScroll
+        minZoom={0.25}
+        maxZoom={2.5}
         colorMode={theme.colors.reactFlowColorMode}
         connectionMode={ConnectionMode.Loose}
         onNodeClick={onNodeClick}

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,12 +1,20 @@
 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'
+import * as standaloneStorage from '@/utils/standaloneStorage'
 
 // ── Mock heavy dependencies ────────────────────────────────────────────────
 
+// Capture props passed to ReactFlow so we can assert zoom bounds etc.
+let rfProps: Record<string, unknown> = {}
+
 vi.mock('@xyflow/react', () => ({
   ReactFlowProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-  ReactFlow: () => <div data-testid="react-flow" />,
+  ReactFlow: (props: Record<string, unknown>) => {
+    rfProps = props
+    return <div data-testid="react-flow" />
+  },
   Background: () => null,
   Controls: () => null,
   BackgroundVariant: { Dots: 'dots' },
@@ -48,6 +56,7 @@ const canvasPayload = {
 
 describe('LiveView (non-standalone)', () => {
   beforeEach(() => {
+    rfProps = {}
     vi.mocked(liveviewApi.load).mockReset()
     useCanvasStore.setState({ nodes: [], edges: [] })
   })
@@ -110,7 +119,26 @@ describe('LiveView (non-standalone)', () => {
     await waitFor(() => {
       expect(screen.getByTestId('react-flow')).toBeDefined()
     })
-    expect(liveviewApi.load).toHaveBeenCalledWith('correct-key')
+    expect(liveviewApi.load).toHaveBeenCalledWith('correct-key', undefined)
+  })
+
+  it('forwards ?design=<id> to the API so a specific canvas is loaded', async () => {
+    setSearch('?key=correct-key&design=elec-123')
+    vi.mocked(liveviewApi.load).mockResolvedValue(canvasPayload as never)
+    render(<LiveView />)
+    await waitFor(() => expect(screen.getByTestId('react-flow')).toBeDefined())
+    expect(liveviewApi.load).toHaveBeenCalledWith('correct-key', 'elec-123')
+  })
+
+  it('allows zooming out to 0.25 so large infra fits (matches the editor)', async () => {
+    setSearch('?key=correct-key')
+    vi.mocked(liveviewApi.load).mockResolvedValue(canvasPayload as never)
+    render(<LiveView />)
+    await waitFor(() => expect(screen.getByTestId('react-flow')).toBeDefined())
+    // Without an explicit minZoom, React Flow defaults to 0.5 and big canvases
+    // can't zoom out far enough to fit.
+    expect(rfProps.minZoom).toBe(0.25)
+    expect(rfProps.maxZoom).toBe(2.5)
   })
 
   it('loads nodes into the canvas store on success', async () => {
@@ -124,6 +152,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 () => {
@@ -137,9 +214,13 @@ describe('LiveView (non-standalone)', () => {
 
 // ── Standalone mode ────────────────────────────────────────────────────────
 
+// Captures props from the re-imported (resetModules) ReactFlow so standalone
+// tests can assert which nodes were rendered without reaching into the fresh
+// canvas-store module instance.
+let standaloneRfProps: Record<string, unknown> = {}
 const XYFLOW_MOCK = {
   ReactFlowProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-  ReactFlow: () => <div data-testid="react-flow" />,
+  ReactFlow: (props: Record<string, unknown>) => { standaloneRfProps = props; return <div data-testid="react-flow" /> },
   Background: () => null,
   Controls: () => null,
   BackgroundVariant: { Dots: 'dots' },
@@ -159,16 +240,45 @@ describe('LiveView (standalone — localStorage)', () => {
     vi.unstubAllEnvs()
   })
 
-  it('loads canvas from localStorage without calling the API', async () => {
+  it('loads the active design canvas from localStorage without calling the API', async () => {
-    const stored = {
+    const design = standaloneStorage.createDesign('Main')
+    standaloneStorage.saveCanvas(design.id, {
       nodes: [{
         id: 'ls-node', type: 'router',
         position: { x: 10, y: 20 },
         data: { label: 'Router', type: 'router', status: 'unknown', services: [] },
       }],
       edges: [],
-    }
+    })
-    localStorage.setItem('homelable_canvas', JSON.stringify(stored))
+
+    vi.stubEnv('VITE_STANDALONE', 'true')
+    vi.resetModules()
+    const mockLoad = vi.fn()
+    vi.doMock('@xyflow/react', () => XYFLOW_MOCK)
+    vi.doMock('@xyflow/react/dist/style.css', () => ({}))
+    vi.doMock('@/api/client', () => ({ liveviewApi: { load: mockLoad } }))
+    const { default: LiveViewStandalone } = await import('../LiveView')
+
+    setSearch(`?design=${design.id}`)
+    render(<LiveViewStandalone />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('react-flow')).toBeDefined()
+    })
+    expect((standaloneRfProps.nodes as { id: string }[]).map((n) => n.id)).toContain('ls-node')
+    expect(mockLoad).not.toHaveBeenCalled()
+  })
+
+  it('falls back to the first design when no ?design= param is given', async () => {
+    const design = standaloneStorage.createDesign('Only')
+    standaloneStorage.saveCanvas(design.id, {
+      nodes: [{
+        id: 'fb-node', type: 'server',
+        position: { x: 0, y: 0 },
+        data: { label: 'Srv', type: 'server', status: 'unknown', services: [] },
+      }],
+      edges: [],
+    })
 
     vi.stubEnv('VITE_STANDALONE', 'true')
     vi.resetModules()
@@ -184,6 +294,7 @@ describe('LiveView (standalone — localStorage)', () => {
     await waitFor(() => {
       expect(screen.getByTestId('react-flow')).toBeDefined()
     })
+    expect((standaloneRfProps.nodes as { id: string }[]).map((n) => n.id)).toContain('fb-node')
     expect(mockLoad).not.toHaveBeenCalled()
   })
 

frontend/src/components/canvas/CanvasContainer.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
   ReactFlow,
   Background,
@@ -17,11 +17,13 @@ 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'
 import { AlignmentGuides } from './AlignmentGuides'
 import { useAlignmentGuides } from '@/hooks/useAlignmentGuides'
+import { setViewportCenterProjector } from '@/utils/viewportCenter'
 import type { NodeData, EdgeData } from '@/types'
 
 interface CanvasContainerProps {
@@ -29,18 +31,60 @@ interface CanvasContainerProps {
   onEdgeDoubleClick?: (edge: Edge<EdgeData>) => void
   onNodeDoubleClick?: (node: Node<NodeData>) => void
   onNodeDragStart?: () => void
+  onRequestAddToGroup?: (payload: { nodeId: string; groupId: string }) => void
+  onRequestAddToContainer?: (payload: { nodeId: string; containerId: string }) => void
   onOpenPending?: (deviceId: string) => void
 }
 
-export function CanvasContainer({ onConnect: onConnectProp, onEdgeDoubleClick, onNodeDoubleClick, onNodeDragStart, onOpenPending }: CanvasContainerProps) {
+export function CanvasContainer({ onConnect: onConnectProp, onEdgeDoubleClick, onNodeDoubleClick, onNodeDragStart, onRequestAddToGroup, onRequestAddToContainer, onOpenPending }: CanvasContainerProps) {
   const [lassoMode, setLassoMode] = useState(true)
   const {
     nodes, edges,
     onNodesChange, onEdgesChange,
     setSelectedNode, snapshotHistory,
     fitViewPending, clearFitViewPending,
+    copySelectedNodes, pasteNodes,
   } = useCanvasStore()
-  const { fitView } = useReactFlow()
+  const { fitView, screenToFlowPosition, getIntersectingNodes } = useReactFlow<Node<NodeData>>()
+
+  // Track the last cursor position over the canvas so paste lands under it.
+  const cursorRef = useRef<{ x: number; y: number } | null>(null)
+  const onMouseMove = useCallback((e: React.MouseEvent) => {
+    cursorRef.current = { x: e.clientX, y: e.clientY }
+  }, [])
+
+  // Expose the visible-canvas centre (in flow coords) to add-node handlers that
+  // live outside ReactFlowProvider, so new nodes land where the user is looking.
+  const wrapperRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    setViewportCenterProjector(() => {
+      const rect = wrapperRef.current?.getBoundingClientRect()
+      const screen = rect
+        ? { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }
+        : { x: window.innerWidth / 2, y: window.innerHeight / 2 }
+      return screenToFlowPosition(screen)
+    })
+    return () => setViewportCenterProjector(null)
+  }, [screenToFlowPosition])
+
+  // Copy / paste shortcuts. Registered here (inside ReactFlowProvider) so paste
+  // can project the cursor / viewport center into flow coordinates.
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (!(e.ctrlKey || e.metaKey)) return
+      const el = e.target as HTMLElement
+      const isInput = el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.isContentEditable
+      if (isInput) return
+      if (e.key === 'c') {
+        copySelectedNodes()
+      } else if (e.key === 'v') {
+        const screen = cursorRef.current ?? { x: window.innerWidth / 2, y: window.innerHeight / 2 }
+        pasteNodes(screenToFlowPosition(screen))
+      }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [copySelectedNodes, pasteNodes, screenToFlowPosition])
 
   // Fit view after canvas loads (fitViewPending is set by loadCanvas)
   useEffect(() => {
@@ -55,6 +99,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)
@@ -87,11 +142,29 @@ export function CanvasContainer({ onConnect: onConnectProp, onEdgeDoubleClick, o
 
   const { guides, onNodeDrag, onNodeDragStop } = useAlignmentGuides()
 
+  // Drop a top-level node onto a group → ask App to confirm adding it. Runs
+  // before the alignment snap so detection uses the dropped position.
+  const handleNodeDragStop = useCallback<NonNullable<typeof onNodeDragStop>>((event, dragNode, dragNodes) => {
+    if (dragNode && !dragNode.parentId &&
+        dragNode.data.type !== 'group' && dragNode.data.type !== 'groupRect') {
+      const intersecting = getIntersectingNodes(dragNode)
+      const group = intersecting.find((n) => n.data.type === 'group')
+      if (group) {
+        onRequestAddToGroup?.({ nodeId: dragNode.id, groupId: group.id })
+      } else {
+        // Any node in container_mode (proxmox, docker_host, …) accepts children.
+        const container = intersecting.find((n) => n.id !== dragNode.id && n.data.container_mode === true)
+        if (container) onRequestAddToContainer?.({ nodeId: dragNode.id, containerId: container.id })
+      }
+    }
+    onNodeDragStop(event, dragNode, dragNodes)
+  }, [onRequestAddToGroup, onRequestAddToContainer, getIntersectingNodes, onNodeDragStop])
+
   return (
-    <div className="w-full h-full" style={{ background: theme.colors.canvasBackground }}>
+    <div ref={wrapperRef} className="w-full h-full" style={{ background: theme.colors.canvasBackground }} onMouseMove={onMouseMove}>
       <ReactFlow
-        nodes={nodes}
+        nodes={visibleNodes}
-        edges={edges}
+        edges={visibleEdges}
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onConnect={onConnectProp}
@@ -101,7 +174,7 @@ export function CanvasContainer({ onConnect: onConnectProp, onEdgeDoubleClick, o
         onNodeDoubleClick={handleNodeDoubleClick}
         onNodeDragStart={onNodeDragStart}
         onNodeDrag={onNodeDrag}
-        onNodeDragStop={onNodeDragStop}
+        onNodeDragStop={handleNodeDragStop}
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
         deleteKeyCode={['Backspace', 'Delete']}

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

@@ -20,7 +20,9 @@ vi.mock('@/stores/themeStore', () => ({
 }))
 
 vi.mock('@/stores/canvasStore', () => ({
-  useCanvasStore: (sel: (s: { hideIp: boolean }) => unknown) => sel({ hideIp: false }),
+  useCanvasStore: (sel: (s: { hideIp: boolean; serviceStatuses: Record<string, string> }) => unknown) =>
+    sel({ hideIp: false, serviceStatuses: {} }),
+  serviceStatusKey: (nodeId: string, port?: number, protocol?: string) => `${nodeId}:${port ?? ''}/${protocol ?? ''}`,
 }))
 
 vi.mock('@/utils/themes', () => ({
@@ -59,7 +61,10 @@ vi.mock('@/utils/propertyIcons', () => ({
 
 vi.mock('@/utils/handleUtils', () => ({
   bottomHandleId: (idx: number) => idx === 0 ? 'bottom' : `bottom-${idx + 1}`,
-  bottomHandlePositions: () => [50],
+  bottomHandlePositions: (count: number) => {
+    const c = typeof count === 'number' && count > 0 ? Math.floor(count) : 1
+    return Array.from({ length: c }, (_, i) => ((i + 1) * 100) / (c + 1))
+  },
   clampBottomHandles: (n: unknown) => typeof n === 'number' ? n : 1,
 }))
 
@@ -171,6 +176,29 @@ describe('BaseNode — properties rendering', () => {
   })
 })
 
+describe('BaseNode — port numbers (issue #20)', () => {
+  it('renders a number above each bottom handle when show_port_numbers is on', () => {
+    renderBaseNode({ bottom_handles: 4, show_port_numbers: true })
+    expect(screen.getByText('1')).toBeDefined()
+    expect(screen.getByText('2')).toBeDefined()
+    expect(screen.getByText('3')).toBeDefined()
+    expect(screen.getByText('4')).toBeDefined()
+  })
+
+  it('does not render port numbers when show_port_numbers is off', () => {
+    renderBaseNode({ bottom_handles: 4 })
+    expect(screen.queryByText('1')).toBeNull()
+    expect(screen.queryByText('4')).toBeNull()
+  })
+
+  it('numbers match the handle count', () => {
+    renderBaseNode({ bottom_handles: 2, show_port_numbers: true })
+    expect(screen.getByText('1')).toBeDefined()
+    expect(screen.getByText('2')).toBeDefined()
+    expect(screen.queryByText('3')).toBeNull()
+  })
+})
+
 describe('BaseNode — services visibility toggle', () => {
   it('does not render service toggle button on the node', () => {
     renderBaseNode({ services: [{ service_name: 'nginx', port: 80, protocol: 'tcp' }] })

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

@@ -9,6 +9,9 @@ import type { NodeData, EdgeData } from '@/types'
 // Capture props passed to ReactFlow so we can test the callbacks
 let rfProps: Record<string, unknown> = {}
 
+// Hoisted holder so the mock factory can read the configurable intersection set.
+const rf = vi.hoisted(() => ({ intersecting: [] as unknown[] }))
+
 vi.mock('@xyflow/react', () => ({
   ReactFlow: (props: Record<string, unknown>) => {
     rfProps = props
@@ -21,7 +24,13 @@ vi.mock('@xyflow/react', () => ({
   ConnectionMode: { Loose: 'loose' },
   SelectionMode: { Partial: 'partial' },
   Position: { Top: 'top', Right: 'right', Bottom: 'bottom', Left: 'left' },
-  useReactFlow: () => ({ fitView: vi.fn() }),
+  useReactFlow: () => ({
+    fitView: vi.fn(),
+    screenToFlowPosition: vi.fn(),
+    getIntersectingNodes: () => rf.intersecting,
+    setNodes: vi.fn(),
+    getNodes: () => [],
+  }),
 }))
 
 vi.mock('@xyflow/react/dist/style.css', () => ({}))
@@ -42,6 +51,7 @@ function makeEdge(id: string): Edge<EdgeData> {
 describe('CanvasContainer', () => {
   beforeEach(() => {
     rfProps = {}
+    rf.intersecting = []
     useCanvasStore.setState({ nodes: [], edges: [], selectedNodeId: null })
     useThemeStore.setState({ activeTheme: 'default' })
   })
@@ -154,6 +164,93 @@ describe('CanvasContainer', () => {
     expect(rfProps.onNodeDragStart).toBe(onNodeDragStart)
   })
 
+  // ── Drag onto group → onRequestAddToGroup ─────────────────────────────────
+
+  function groupNode(id: string): Node<NodeData> {
+    return { id, type: 'group', position: { x: 0, y: 0 }, data: { label: id, type: 'group', status: 'unknown', services: [] } }
+  }
+
+  it('fires onRequestAddToGroup when a node is dropped over a group', () => {
+    const onRequestAddToGroup = vi.fn()
+    const node = makeNode('n1')
+    const group = groupNode('g1')
+    rf.intersecting = [group]
+    render(<CanvasContainer onRequestAddToGroup={onRequestAddToGroup} />)
+    ;(rfProps.onNodeDragStop as (...args: unknown[]) => unknown)({} as MouseEvent, node, [node])
+    expect(onRequestAddToGroup).toHaveBeenCalledWith({ nodeId: 'n1', groupId: 'g1' })
+  })
+
+  it('does not fire onRequestAddToGroup when no group is under the node', () => {
+    const onRequestAddToGroup = vi.fn()
+    const node = makeNode('n1')
+    rf.intersecting = [makeNode('n2')]
+    render(<CanvasContainer onRequestAddToGroup={onRequestAddToGroup} />)
+    ;(rfProps.onNodeDragStop as (...args: unknown[]) => unknown)({} as MouseEvent, node, [node])
+    expect(onRequestAddToGroup).not.toHaveBeenCalled()
+  })
+
+  it('does not fire onRequestAddToGroup for an already-parented node', () => {
+    const onRequestAddToGroup = vi.fn()
+    const node = { ...makeNode('n1'), parentId: 'gOther' }
+    rf.intersecting = [groupNode('g1')]
+    render(<CanvasContainer onRequestAddToGroup={onRequestAddToGroup} />)
+    ;(rfProps.onNodeDragStop as (...args: unknown[]) => unknown)({} as MouseEvent, node, [node])
+    expect(onRequestAddToGroup).not.toHaveBeenCalled()
+  })
+
+  it('does not fire onRequestAddToGroup when the dragged node is itself a group', () => {
+    const onRequestAddToGroup = vi.fn()
+    const node = groupNode('g2')
+    rf.intersecting = [groupNode('g1')]
+    render(<CanvasContainer onRequestAddToGroup={onRequestAddToGroup} />)
+    ;(rfProps.onNodeDragStop as (...args: unknown[]) => unknown)({} as MouseEvent, node, [node])
+    expect(onRequestAddToGroup).not.toHaveBeenCalled()
+  })
+
+  // ── Drag onto container node → onRequestAddToContainer ────────────────────
+
+  function containerNode(id: string, type: NodeData['type'] = 'proxmox'): Node<NodeData> {
+    return { id, type, position: { x: 0, y: 0 }, data: { label: id, type, status: 'unknown', services: [], container_mode: true } }
+  }
+
+  it('fires onRequestAddToContainer when a node is dropped over a container_mode node', () => {
+    const onRequestAddToContainer = vi.fn()
+    const node = makeNode('n1')
+    rf.intersecting = [containerNode('px1')]
+    render(<CanvasContainer onRequestAddToContainer={onRequestAddToContainer} />)
+    ;(rfProps.onNodeDragStop as (...args: unknown[]) => unknown)({} as MouseEvent, node, [node])
+    expect(onRequestAddToContainer).toHaveBeenCalledWith({ nodeId: 'n1', containerId: 'px1' })
+  })
+
+  it('prefers a group over a container when both intersect', () => {
+    const onRequestAddToGroup = vi.fn()
+    const onRequestAddToContainer = vi.fn()
+    const node = makeNode('n1')
+    rf.intersecting = [containerNode('px1'), groupNode('g1')]
+    render(<CanvasContainer onRequestAddToGroup={onRequestAddToGroup} onRequestAddToContainer={onRequestAddToContainer} />)
+    ;(rfProps.onNodeDragStop as (...args: unknown[]) => unknown)({} as MouseEvent, node, [node])
+    expect(onRequestAddToGroup).toHaveBeenCalledWith({ nodeId: 'n1', groupId: 'g1' })
+    expect(onRequestAddToContainer).not.toHaveBeenCalled()
+  })
+
+  it('does not fire onRequestAddToContainer for an already-parented node', () => {
+    const onRequestAddToContainer = vi.fn()
+    const node = { ...makeNode('n1'), parentId: 'pxOther' }
+    rf.intersecting = [containerNode('px1')]
+    render(<CanvasContainer onRequestAddToContainer={onRequestAddToContainer} />)
+    ;(rfProps.onNodeDragStop as (...args: unknown[]) => unknown)({} as MouseEvent, node, [node])
+    expect(onRequestAddToContainer).not.toHaveBeenCalled()
+  })
+
+  it('does not fire onRequestAddToContainer when the target node is not in container_mode', () => {
+    const onRequestAddToContainer = vi.fn()
+    const node = makeNode('n1')
+    rf.intersecting = [makeNode('n2')]
+    render(<CanvasContainer onRequestAddToContainer={onRequestAddToContainer} />)
+    ;(rfProps.onNodeDragStop as (...args: unknown[]) => unknown)({} as MouseEvent, node, [node])
+    expect(onRequestAddToContainer).not.toHaveBeenCalled()
+  })
+
   // ── Canvas settings ───────────────────────────────────────────────────────
 
   it('enables snapToGrid', () => {

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/__tests__/HomelableEdge.animation.test.tsx

@@ -0,0 +1,77 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/react'
+import { ReactFlowProvider } from '@xyflow/react'
+import type { EdgeProps, Edge } from '@xyflow/react'
+import { HomelableEdge } from '../index'
+import type { EdgeData } from '@/types'
+
+/**
+ * Regression: edge flow animations must use CSS, never SVG SMIL <animate>.
+ *
+ * SMIL <animate> keeps running while the tab is hidden and leaks memory in
+ * Chrome over time (RAM climbed only when the canvas tab was backgrounded).
+ * CSS animations pause when the tab is hidden and don't leak — so the rendered
+ * output must contain a CSS `animation` on the path and zero <animate> nodes.
+ */
+function renderEdge(data: Partial<EdgeData> = {}) {
+  const props = {
+    id: 'e1',
+    source: 'a',
+    target: 'b',
+    sourceX: 0,
+    sourceY: 0,
+    targetX: 100,
+    targetY: 100,
+    sourcePosition: 'bottom',
+    targetPosition: 'top',
+    data: { type: 'ethernet', ...data } as EdgeData,
+    selected: false,
+  } as unknown as EdgeProps<Edge<EdgeData>>
+
+  return render(
+    <ReactFlowProvider>
+      <svg>
+        <HomelableEdge {...props} />
+      </svg>
+    </ReactFlowProvider>,
+  )
+}
+
+describe('HomelableEdge animation', () => {
+  it('renders snake animation as CSS, not SMIL <animate>', () => {
+    const { container } = renderEdge({ animated: 'snake' })
+    expect(container.querySelector('animate')).toBeNull()
+    const animated = Array.from(container.querySelectorAll('path')).find((p) =>
+      (p.getAttribute('style') ?? '').includes('homelable-snake'),
+    )
+    expect(animated).toBeTruthy()
+  })
+
+  it('renders flow animation as CSS, not SMIL <animate>', () => {
+    const { container } = renderEdge({ animated: 'flow' })
+    expect(container.querySelector('animate')).toBeNull()
+    const animated = Array.from(container.querySelectorAll('path')).find((p) =>
+      (p.getAttribute('style') ?? '').includes('homelable-flow'),
+    )
+    expect(animated).toBeTruthy()
+  })
+
+  it('legacy animated:true maps to snake CSS animation', () => {
+    const { container } = renderEdge({ animated: true })
+    expect(container.querySelector('animate')).toBeNull()
+    const animated = Array.from(container.querySelectorAll('path')).find((p) =>
+      (p.getAttribute('style') ?? '').includes('homelable-snake'),
+    )
+    expect(animated).toBeTruthy()
+  })
+
+  it('non-animated edge has no flow animation and no <animate>', () => {
+    const { container } = renderEdge({ animated: false })
+    expect(container.querySelector('animate')).toBeNull()
+    const animated = Array.from(container.querySelectorAll('path')).find((p) => {
+      const s = p.getAttribute('style') ?? ''
+      return s.includes('homelable-snake') || s.includes('homelable-flow')
+    })
+    expect(animated).toBeUndefined()
+  })
+})

frontend/src/components/canvas/edges/__tests__/HomelableEdge.label.test.tsx

@@ -0,0 +1,70 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render } from '@testing-library/react'
+import { ReactFlowProvider } from '@xyflow/react'
+import type { EdgeProps, Edge } from '@xyflow/react'
+import type { EdgeData } from '@/types'
+
+/**
+ * Issue #183 — connection labels must support multiple lines.
+ *
+ * The label is a free-text string; newlines entered in the EdgeModal textarea
+ * are stored verbatim. The rendered label div must preserve those newlines
+ * (`whitespace-pre-line`) instead of collapsing them into a single line.
+ *
+ * <EdgeLabelRenderer> normally portals into a node that only exists inside a
+ * full <ReactFlow> host, so we stub it to a passthrough to render the label
+ * markup directly.
+ */
+vi.mock('@xyflow/react', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@xyflow/react')>()
+  return {
+    ...actual,
+    EdgeLabelRenderer: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  }
+})
+
+const { HomelableEdge } = await import('../index')
+
+function renderEdge(data: Partial<EdgeData> = {}) {
+  const props = {
+    id: 'e1',
+    source: 'a',
+    target: 'b',
+    sourceX: 0,
+    sourceY: 0,
+    targetX: 100,
+    targetY: 100,
+    sourcePosition: 'bottom',
+    targetPosition: 'top',
+    data: { type: 'ethernet', ...data } as EdgeData,
+    selected: false,
+  } as unknown as EdgeProps<Edge<EdgeData>>
+
+  return render(
+    <ReactFlowProvider>
+      <svg>
+        <HomelableEdge {...props} />
+      </svg>
+    </ReactFlowProvider>,
+  )
+}
+
+describe('HomelableEdge label', () => {
+  it('renders the label text', () => {
+    const { getByText } = renderEdge({ label: 'uplink' })
+    expect(getByText('uplink')).toBeTruthy()
+  })
+
+  it('preserves newlines in the rendered label (issue #183)', () => {
+    const { container } = renderEdge({ label: 'line one\nline two' })
+    const label = Array.from(container.querySelectorAll('div.whitespace-pre-line')).find((d) =>
+      d.textContent === 'line one\nline two',
+    )
+    expect(label).toBeTruthy()
+  })
+
+  it('renders no label div when label is empty', () => {
+    const { container } = renderEdge({ label: undefined })
+    expect(container.querySelector('div.whitespace-pre-line')).toBeNull()
+  })
+})

frontend/src/components/canvas/edges/__tests__/edgeTypes.test.ts

@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest'
+import { edgeTypes } from '../edgeTypes'
+import { EDGE_TYPE_LABELS, type EdgeType } from '@/types'
+
+describe('edgeTypes registry', () => {
+  // Regression (issue #21): an EdgeType missing here makes React Flow fall back
+  // to its built-in default edge — grey, unstyled, ignoring custom_color.
+  it('registers a component for every EdgeType', () => {
+    for (const type of Object.keys(EDGE_TYPE_LABELS) as EdgeType[]) {
+      expect(edgeTypes[type as keyof typeof edgeTypes]).toBeDefined()
+    }
+  })
+
+  it('registers fibre', () => {
+    expect(edgeTypes.fibre).toBeDefined()
+  })
+})

frontend/src/components/canvas/edges/edgeTypes.ts

@@ -7,4 +7,6 @@ export const edgeTypes = {
   vlan: HomelableEdge,
   virtual: HomelableEdge,
   cluster: HomelableEdge,
+  fibre: HomelableEdge,
+  electrical: HomelableEdge,
 }

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)
@@ -219,6 +323,8 @@ export function HomelableEdge({ id, source, target, sourceX, sourceY, targetX, t
     vlan:     { strokeWidth: 2.5 },
     virtual:  { stroke: edgeColors.virtual,  strokeWidth: 1,   strokeDasharray: '4 4' },
     cluster:  { stroke: edgeColors.cluster,  strokeWidth: 2.5, strokeDasharray: '8 3' },
+    fibre:    { stroke: edgeColors.fibre,    strokeWidth: 2.5, filter: `drop-shadow(0 0 3px ${edgeColors.fibre}aa)` },
+    electrical: { stroke: edgeColors.electrical, strokeWidth: 2 },
   }
 
   const customColor = data?.custom_color as string | undefined
@@ -272,14 +378,14 @@ export function HomelableEdge({ id, source, target, sourceX, sourceY, targetX, t
           strokeWidth={((style.strokeWidth as number ?? 2) + 1.5) * 2}
           strokeDasharray="20 10000"
           strokeLinecap="round"
-          style={{ pointerEvents: 'none' }}
+          style={{
-        >
+            pointerEvents: 'none',
-          {isBidirectional ? (
+            // CSS (not SMIL) so it pauses when the tab is hidden — see index.css.
-            <animate attributeName="stroke-dashoffset" values="-10000;0;-10000" keyTimes="0;0.5;1" dur="20s" repeatCount="indefinite" />
+            // Bidirectional yo-yos via `alternate` (10s each way = 20s round trip,
-          ) : (
+            // matching the old SMIL keyTimes); unidirectional loops in one direction.
-            <animate attributeName="stroke-dashoffset" from="-10000" to="0" dur="10s" repeatCount="indefinite" />
+            animation: `homelable-snake 10s linear infinite${isBidirectional ? ' alternate' : ''}`,
-          )}
+          }}
-        </path>
+        />
       )}
       {animMode === 'flow' && (
         <path
@@ -290,16 +396,17 @@ export function HomelableEdge({ id, source, target, sourceX, sourceY, targetX, t
           strokeDasharray="6 12"
           strokeLinecap="round"
           strokeOpacity={0.85}
-          style={{ pointerEvents: 'none' }}
+          style={{
-        >
+            pointerEvents: 'none',
-          <animate attributeName="stroke-dashoffset" from="0" to="18" dur="1.2s" repeatCount="indefinite" />
+            animation: 'homelable-flow 1.2s linear infinite',
-        </path>
+          }}
+        />
       )}
 
       <EdgeLabelRenderer>
         {data?.label && (
           <div
-            className="absolute pointer-events-none font-mono text-[10px] px-1.5 py-0.5 rounded"
+            className="absolute pointer-events-none font-mono text-[10px] px-1.5 py-0.5 rounded whitespace-pre-line text-center"
             style={{
               transform: `translate(-50%, -50%) translate(${labelPosition.x}px, ${labelPosition.y}px)`,
               background: theme.colors.edgeLabelBackground,
@@ -311,6 +418,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/BaseNode.tsx

@@ -8,7 +8,7 @@ import { NodeIcon } from '@/components/ui/NodeIcon'
 import { resolvePropertyIcon } from '@/utils/propertyIcons'
 import { useThemeStore } from '@/stores/themeStore'
 import { THEMES } from '@/utils/themes'
-import { useCanvasStore } from '@/stores/canvasStore'
+import { useCanvasStore, serviceStatusKey } from '@/stores/canvasStore'
 import { maskIp, primaryIp, splitIps } from '@/utils/maskIp'
 import { bottomHandleId, bottomHandlePositions, clampBottomHandles } from '@/utils/handleUtils'
 import { getServiceUrl } from '@/utils/serviceUrl'
@@ -31,6 +31,7 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
 
   const activeTheme = useThemeStore((s) => s.activeTheme)
   const hideIp = useCanvasStore((s) => s.hideIp)
+  const serviceStatuses = useCanvasStore((s) => s.serviceStatuses)
   const theme = THEMES[activeTheme]
 
   const resolvedIcon = resolveNodeIcon(typeIcon, data.custom_icon)
@@ -151,6 +152,7 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
           <div className="flex flex-col gap-1 px-2.5 py-1.5 overflow-hidden">
             {services.map((svc, idx) => {
               const url = getServiceUrl(svc, serviceHost)
+              const svcOffline = serviceStatuses[serviceStatusKey(id, svc.port, svc.protocol)] === 'offline'
               const row = (
                 <div
                   className="nodrag flex items-center justify-between gap-2 px-1.5 py-1 rounded text-[10px] min-w-0 overflow-hidden"
@@ -164,7 +166,7 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
                     {/* LEFT: service name */}
                     <span
                       className="font-medium truncate"
-                      style={{ minWidth: 0 }}
+                      style={{ minWidth: 0, color: svcOffline ? '#f85149' : undefined }}
                       title={svc.service_name}
                     >
                       {svc.service_name}
@@ -254,6 +256,20 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
         const targetId = `${sourceId}-t`
         return (
           <span key={sourceId}>
+            {data.show_port_numbers && (
+              <span
+                className="absolute font-mono leading-none pointer-events-none select-none"
+                style={{
+                  left: `${leftPct}%`,
+                  bottom: 3,
+                  transform: 'translateX(-50%)',
+                  fontSize: 7,
+                  color: theme.colors.nodeSubtextColor,
+                }}
+              >
+                {idx + 1}
+              </span>
+            )}
             <Handle
               type="source"
               position={Position.Bottom}

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 { type NodeProps, type Node, NodeResizer, Handle, Position } from '@xyflow/react'
-import { Layers, Pencil, Check, X } from 'lucide-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 { createElement, useEffect } from 'react'
-import { Handle, Position, NodeResizer, type NodeProps, type Node } from '@xyflow/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
+      {bottomHandlePositions(data.bottom_handles ?? 1).map((leftPct, idx) => {
-        type="source"
+        const sourceId = bottomHandleId(idx)
-        position={Position.Bottom}
+        const targetId = `${sourceId}-t`
-        id="bottom"
+        return (
-        style={{ background: theme.colors.handleBackground, borderColor: theme.colors.handleBorder }}
+          <span key={sourceId}>
-      />
+            <Handle
-      <Handle type="target" position={Position.Bottom} id="bottom-t" style={{ opacity: 0, width: 12, height: 12 }} />
+              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

@@ -0,0 +1,123 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { render } from '@testing-library/react'
+import { ReactFlowProvider } from '@xyflow/react'
+import { ProxmoxGroupNode } from '../ProxmoxGroupNode'
+import { useCanvasStore } from '@/stores/canvasStore'
+import { useThemeStore } from '@/stores/themeStore'
+import type { NodeData, NodeProperty } from '@/types'
+import type { NodeProps, Node } from '@xyflow/react'
+
+function renderNode(data: Partial<NodeData> = {}, selected = false) {
+  const fullData: NodeData = {
+    label: 'pve-01',
+    type: 'proxmox',
+    status: 'online',
+    services: [],
+    ...data,
+  }
+  const props = {
+    id: 'p1',
+    data: fullData,
+    selected,
+    type: 'proxmox',
+    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>
+      <ProxmoxGroupNode {...props} />
+    </ReactFlowProvider>
+  )
+}
+
+describe('ProxmoxGroupNode', () => {
+  beforeEach(() => {
+    useCanvasStore.setState({ hideIp: false })
+    useThemeStore.setState({ activeTheme: 'default' })
+  })
+
+  it('renders the node label', () => {
+    const { getByText } = renderNode({ label: 'My Proxmox' })
+    expect(getByText('My Proxmox')).toBeDefined()
+  })
+
+  it('renders ip when provided', () => {
+    const { getByText } = renderNode({ ip: '192.168.1.10' })
+    expect(getByText('192.168.1.10')).toBeDefined()
+  })
+
+  it('renders multiple ips when comma separated', () => {
+    const { getByText } = renderNode({ ip: '10.0.0.1, 10.0.0.2' })
+    expect(getByText('10.0.0.1')).toBeDefined()
+    expect(getByText('10.0.0.2')).toBeDefined()
+  })
+
+  it('masks ip when hideIp is enabled in store', () => {
+    useCanvasStore.setState({ hideIp: true })
+    const { queryByText } = renderNode({ ip: '192.168.1.10' })
+    expect(queryByText('192.168.1.10')).toBeNull()
+  })
+
+  it('renders visible properties only', () => {
+    const properties: NodeProperty[] = [
+      { key: 'CPU', value: '16 cores', icon: null, visible: true },
+      { key: 'Hidden', value: 'should-not-show', icon: null, visible: false },
+    ]
+    const { getByText, queryByText } = renderNode({ properties })
+    expect(getByText('CPU')).toBeDefined()
+    expect(getByText(/16 cores/)).toBeDefined()
+    expect(queryByText('Hidden')).toBeNull()
+    expect(queryByText(/should-not-show/)).toBeNull()
+  })
+
+  it('renders status dot with title matching status', () => {
+    const { container } = renderNode({ status: 'offline' })
+    const dot = container.querySelector('[title="offline"]')
+    expect(dot).not.toBeNull()
+  })
+
+  it('container_mode === false renders as BaseNode (no resizer group border)', () => {
+    const { container } = renderNode({ container_mode: false })
+    // NodeResizer should not be present when not group-rendered
+    expect(container.querySelector('.react-flow__resize-control')).toBeNull()
+  })
+
+  it('container_mode default renders the group border container', () => {
+    const { container } = renderNode({})
+    // Group border div has rounded-xl border-2 classes
+    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)
+    const { container: nodeC } = renderNode({ container_mode: false })
+    expect(nodeC.querySelectorAll('[title="Same cluster"]').length).toBeGreaterThanOrEqual(2)
+  })
+})

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

@@ -0,0 +1,15 @@
+import { describe, it, expect } from 'vitest'
+import { nodeTypes } from '../nodeTypes'
+
+describe('nodeTypes registry', () => {
+  it('registers a component for every wireless mesh node type', () => {
+    // Regression: zwave_* types were missing, so React Flow fell back to the
+    // default (unstyled) node — no icon, no accent. (Zigbee covered too.)
+    for (const t of [
+      'zigbee_coordinator', 'zigbee_router', 'zigbee_enddevice',
+      'zwave_coordinator', 'zwave_router', 'zwave_enddevice',
+    ]) {
+      expect(nodeTypes[t as keyof typeof nodeTypes], `missing nodeType: ${t}`).toBeDefined()
+    }
+  })
+})

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

@@ -1,7 +1,8 @@
 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, RadioTower, Share2,
+  Grid3x3, Battery, Fuel, Sun, Repeat2, Split, ToggleLeft, Lightbulb, Gauge, Combine, Cable, Zap,
 } from 'lucide-react'
 import { BaseNode } from './BaseNode'
 import type { NodeData } from '@/types'
@@ -22,6 +23,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} />
@@ -30,3 +33,24 @@ export const GenericNode  = (props: N) => <BaseNode {...props} icon={Circle} />
 export const ZigbeeCoordinatorNode = (props: N) => <BaseNode {...props} icon={Network} />
 export const ZigbeeRouterNode      = (props: N) => <BaseNode {...props} icon={Radio} />
 export const ZigbeeEndDeviceNode   = (props: N) => <BaseNode {...props} icon={Antenna} />
+
+// Z-Wave node types
+export const ZwaveCoordinatorNode = (props: N) => <BaseNode {...props} icon={RadioTower} />
+export const ZwaveRouterNode      = (props: N) => <BaseNode {...props} icon={Share2} />
+export const ZwaveEndDeviceNode   = (props: N) => <BaseNode {...props} icon={Antenna} />
+
+// Electrical node types
+export const GridNode          = (props: N) => <BaseNode {...props} icon={Grid3x3} />
+export const UpsNode           = (props: N) => <BaseNode {...props} icon={Battery} />
+export const BatteryNode        = (props: N) => <BaseNode {...props} icon={Battery} />
+export const GeneratorNode     = (props: N) => <BaseNode {...props} icon={Fuel} />
+export const SolarPanelNode    = (props: N) => <BaseNode {...props} icon={Sun} />
+export const InverterNode      = (props: N) => <BaseNode {...props} icon={Repeat2} />
+export const CircuitBreakerNode = (props: N) => <BaseNode {...props} icon={Split} />
+export const ContactorNode     = (props: N) => <BaseNode {...props} icon={ToggleLeft} />
+export const ElectricalSwitchNode = (props: N) => <BaseNode {...props} icon={ToggleLeft} />
+export const SocketNode        = (props: N) => <BaseNode {...props} icon={Cable} />
+export const LightNode         = (props: N) => <BaseNode {...props} icon={Lightbulb} />
+export const MeterNode         = (props: N) => <BaseNode {...props} icon={Gauge} />
+export const TransformerNode   = (props: N) => <BaseNode {...props} icon={Combine} />
+export const LoadNode          = (props: N) => <BaseNode {...props} icon={Zap} />

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

@@ -1,4 +1,13 @@
-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,
+  ZwaveCoordinatorNode, ZwaveRouterNode, ZwaveEndDeviceNode,
+  GridNode, UpsNode, BatteryNode, GeneratorNode, SolarPanelNode, InverterNode,
+  CircuitBreakerNode, ContactorNode, ElectricalSwitchNode, SocketNode,
+  LightNode, MeterNode, TransformerNode, LoadNode,
+} from './index'
 import { ProxmoxGroupNode } from './ProxmoxGroupNode'
 import { GroupRectNode } from './GroupRectNode'
 import { GroupNode } from './GroupNode'
@@ -19,6 +28,8 @@ export const nodeTypes = {
   camera: CameraNode,
   printer: PrinterNode,
   computer: ComputerNode,
+  laptop: LaptopNode,
+  mobile: MobileNode,
   cpl: CplNode,
   docker_host: DockerHostNode,
   docker_container: DockerContainerNode,
@@ -29,4 +40,21 @@ export const nodeTypes = {
   zigbee_coordinator: ZigbeeCoordinatorNode,
   zigbee_router: ZigbeeRouterNode,
   zigbee_enddevice: ZigbeeEndDeviceNode,
+  zwave_coordinator: ZwaveCoordinatorNode,
+  zwave_router: ZwaveRouterNode,
+  zwave_enddevice: ZwaveEndDeviceNode,
+  grid: GridNode,
+  ups: UpsNode,
+  battery: BatteryNode,
+  generator: GeneratorNode,
+  solar_panel: SolarPanelNode,
+  inverter: InverterNode,
+  circuit_breaker: CircuitBreakerNode,
+  contactor: ContactorNode,
+  electrical_switch: ElectricalSwitchNode,
+  socket: SocketNode,
+  light: LightNode,
+  meter: MeterNode,
+  transformer: TransformerNode,
+  load: LoadNode,
 }

frontend/src/components/modals/ConfirmAddToGroupModal.tsx

@@ -0,0 +1,59 @@
+import { Layers } from 'lucide-react'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+
+interface ConfirmAddToGroupModalProps {
+  open: boolean
+  nodeLabel: string
+  /** Label of the destination group/container. */
+  targetLabel: string
+  /** Destination kind — drives the wording. Defaults to 'group'. */
+  variant?: 'group' | 'container'
+  onConfirm: () => void
+  onCancel: () => void
+}
+
+export function ConfirmAddToGroupModal({
+  open,
+  nodeLabel,
+  targetLabel,
+  variant = 'group',
+  onConfirm,
+  onCancel,
+}: ConfirmAddToGroupModalProps) {
+  const action = variant === 'container' ? 'Add to container' : 'Add to group'
+  const noun = variant === 'container' ? 'container' : 'group'
+  return (
+    <Dialog open={open} onOpenChange={(o) => { if (!o) onCancel() }}>
+      <DialogContent className="max-w-sm">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Layers size={16} className="text-[#00d4ff]" />
+            {action}
+          </DialogTitle>
+          <DialogDescription>
+            Add <span className="font-medium text-foreground">{nodeLabel}</span> to the {noun}{' '}
+            <span className="font-medium text-foreground">{targetLabel}</span>?
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="ghost" size="sm" onClick={onCancel}>Cancel</Button>
+          <Button
+            size="sm"
+            className="bg-[#00d4ff] text-[#0d1117] hover:bg-[#00d4ff]/90"
+            onClick={onConfirm}
+          >
+            {action}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

frontend/src/components/modals/CustomStyleModal.tsx

@@ -1,9 +1,9 @@
-import { useState, useCallback } from 'react'
+import { Fragment, useState, useEffect, 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,
+  Radio, Zap, Lightbulb, RadioTower, Share2,
   type LucideIcon,
 } from 'lucide-react'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
@@ -17,23 +17,27 @@ import type {
 } from '@/types'
 import { NODE_TYPE_LABELS, EDGE_TYPE_LABELS } from '@/types'
 
-// ── Node types exposed for custom style (skip groupRect/group) ───────────────
+// ── Node types exposed for custom style, grouped by category (skip groupRect/group) ──
 
-const EDITABLE_NODE_TYPES: NodeType[] = [
+const NODE_TYPE_GROUPS: { label: string; types: NodeType[] }[] = [
-  'isp', 'router', 'firewall', 'switch', 'server', 'proxmox', 'vm', 'lxc', 'nas',
+  { label: 'Hardware',       types: ['isp', 'router', 'firewall', 'switch', 'server', 'nas', 'ap', 'printer'] },
-  'iot', 'ap', 'camera', 'printer', 'computer', 'cpl', 'docker_host',
+  { label: 'Virtualization', types: ['proxmox', 'vm', 'lxc', 'docker_host', 'docker_container'] },
-  'docker_container', 'zigbee_coordinator', 'zigbee_router', 'zigbee_enddevice',
+  { label: 'IoT',            types: ['iot', 'camera', 'cpl'] },
-  'generic',
+  { label: 'Zigbee',         types: ['zigbee_coordinator', 'zigbee_router', 'zigbee_enddevice'] },
+  { label: 'Z-Wave',         types: ['zwave_coordinator', 'zwave_router', 'zwave_enddevice'] },
+  { label: 'Personal',       types: ['computer', 'laptop', 'mobile'] },
+  { label: 'Generic',        types: ['generic'] },
 ]
 
-const EDITABLE_EDGE_TYPES: EdgeType[] = ['ethernet', 'wifi', 'iot', 'vlan', 'virtual', 'cluster']
+const EDITABLE_EDGE_TYPES: EdgeType[] = ['ethernet', 'wifi', 'iot', 'vlan', 'virtual', 'cluster', 'fibre', 'electrical']
 
 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,
+  zwave_coordinator: RadioTower, zwave_router: Share2, zwave_enddevice: Lightbulb,
   generic: Circle,
 }
 
@@ -156,7 +160,7 @@ function NodeEditor({ nodeType, style, onChange, onApplyToExisting }: NodeEditor
               min={0}
               step={10}
               value={style.width}
-              onChange={(e) => set('width', parseInt(e.target.value) || 0)}
+              onChange={(e) => set('width', parseInt(e.target.value, 10) || 0)}
               className="w-20 h-7 text-xs bg-[#0d1117] border border-[#30363d] rounded px-2 text-[#e6edf3]"
             />
           </div>
@@ -167,7 +171,7 @@ function NodeEditor({ nodeType, style, onChange, onApplyToExisting }: NodeEditor
               min={0}
               step={10}
               value={style.height}
-              onChange={(e) => set('height', parseInt(e.target.value) || 0)}
+              onChange={(e) => set('height', parseInt(e.target.value, 10) || 0)}
               className="w-20 h-7 text-xs bg-[#0d1117] border border-[#30363d] rounded px-2 text-[#e6edf3]"
             />
           </div>
@@ -281,14 +285,22 @@ export function CustomStyleModal({ open, onClose }: CustomStyleModalProps) {
     edges: { ...customStyle.edges },
   }))
 
-  const handleOpen = (isOpen: boolean) => {
+  // Reset the draft to the saved customStyle whenever the modal is (re)opened.
-    if (isOpen) {
+  // The parent keeps this component mounted and only toggles `open`, so Radix's
-      // Reset draft to current saved customStyle on open
+  // onOpenChange never fires for a parent-driven open — we key off the prop edge
+  // instead. Without this, abandoned edits (Cancel) would leak into the next open.
+  useEffect(() => {
+    if (open) {
       setDraft({ nodes: { ...customStyle.nodes }, edges: { ...customStyle.edges } })
       setSelection(null)
-    } else {
-      onClose()
     }
+    // Intentional snapshot-on-open: we don't want live customStyle changes to
+    // clobber an in-progress edit, only a fresh open should reset.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open])
+
+  const handleOpen = (isOpen: boolean) => {
+    if (!isOpen) onClose()
   }
 
   const getNodeStyle = (t: NodeType): NodeTypeStyle =>
@@ -363,34 +375,41 @@ export function CustomStyleModal({ open, onClose }: CustomStyleModalProps) {
 
             {/* Type list */}
             <div className="flex-1 overflow-y-auto py-1">
-              {tab === 'nodes' && EDITABLE_NODE_TYPES.map((t) => {
+              {tab === 'nodes' && NODE_TYPE_GROUPS.map((group) => (
-                const Icon = NODE_ICONS[t] ?? Circle
+                <Fragment key={group.label}>
-                const style = draft.nodes[t]
+                  <div className="px-3 pt-2 pb-1 text-[10px] font-semibold uppercase tracking-wider text-[#8b949e]/60">
-                const isSelected = selection?.kind === 'node' && selection.type === t
+                    {group.label}
-                const swatchColor = style
+                  </div>
-                  ? applyOpacity(style.borderColor, style.borderOpacity)
+                  {group.types.map((t) => {
-                  : THEMES.default.colors.nodeAccents[t]?.border ?? '#8b949e'
+                    const Icon = NODE_ICONS[t] ?? Circle
+                    const style = draft.nodes[t]
+                    const isSelected = selection?.kind === 'node' && selection.type === t
+                    const swatchColor = style
+                      ? applyOpacity(style.borderColor, style.borderOpacity)
+                      : THEMES.default.colors.nodeAccents[t]?.border ?? '#8b949e'
 
-                return (
+                    return (
-                  <button
+                      <button
-                    key={t}
+                        key={t}
-                    type="button"
+                        type="button"
-                    onClick={() => setSelection({ kind: 'node', type: t })}
+                        onClick={() => setSelection({ kind: 'node', type: t })}
-                    className="w-full flex items-center gap-2 px-3 py-2 text-xs transition-colors text-left"
+                        className="w-full flex items-center gap-2 px-3 py-2 text-xs transition-colors text-left"
-                    style={{
+                        style={{
-                      background: isSelected ? '#21262d' : 'transparent',
+                          background: isSelected ? '#21262d' : 'transparent',
-                      color: isSelected ? '#e6edf3' : '#8b949e',
+                          color: isSelected ? '#e6edf3' : '#8b949e',
-                    }}
+                        }}
-                  >
+                      >
-                    <Icon size={13} />
+                        <Icon size={13} />
-                    <span className="flex-1 truncate">{NODE_TYPE_LABELS[t]}</span>
+                        <span className="flex-1 truncate">{NODE_TYPE_LABELS[t]}</span>
-                    <span
+                        <span
-                      className="w-2.5 h-2.5 rounded-full shrink-0"
+                          className="w-2.5 h-2.5 rounded-full shrink-0"
-                      style={{ background: swatchColor }}
+                          style={{ background: swatchColor }}
-                    />
+                        />
-                  </button>
+                      </button>
-                )
+                    )
-              })}
+                  })}
+                </Fragment>
+              ))}
 
               {tab === 'edges' && EDITABLE_EDGE_TYPES.map((t) => {
                 const style = draft.edges[t]

frontend/src/components/modals/DesignModal.tsx

@@ -0,0 +1,87 @@
+import { useState } from 'react'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Label } from '@/components/ui/label'
+import { Input } from '@/components/ui/input'
+import { DESIGN_ICONS, DEFAULT_DESIGN_ICON } from '@/utils/designIcons'
+
+export interface DesignFormData {
+  name: string
+  icon: string
+}
+
+interface DesignModalProps {
+  open: boolean
+  onClose: () => void
+  onSubmit: (data: DesignFormData) => void
+  initial?: DesignFormData
+  title?: string
+  submitLabel?: string
+}
+
+export function DesignModal({ open, onClose, onSubmit, initial, title = 'New Canvas', submitLabel = 'Create' }: DesignModalProps) {
+  const [name, setName] = useState(initial?.name ?? '')
+  const [icon, setIcon] = useState(initial?.icon ?? DEFAULT_DESIGN_ICON)
+
+  const handleSubmit = () => {
+    const trimmed = name.trim()
+    if (!trimmed) return
+    onSubmit({ name: trimmed, icon })
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4 py-2">
+          <div className="space-y-1.5">
+            <Label htmlFor="design-name">Name</Label>
+            <Input
+              id="design-name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              onKeyDown={(e) => { if (e.key === 'Enter') handleSubmit() }}
+              placeholder="e.g. Home Network, Rack Power"
+              autoFocus
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <Label>Icon</Label>
+            <div className="grid grid-cols-8 gap-1.5">
+              {DESIGN_ICONS.map((entry) => {
+                const Icon = entry.icon
+                const selected = entry.key === icon
+                return (
+                  <button
+                    key={entry.key}
+                    type="button"
+                    aria-label={entry.label}
+                    aria-pressed={selected}
+                    title={entry.label}
+                    onClick={() => setIcon(entry.key)}
+                    className={`flex items-center justify-center aspect-square rounded-md border transition-colors cursor-pointer ${
+                      selected
+                        ? 'border-[#00d4ff] bg-[#00d4ff]/10 text-[#00d4ff]'
+                        : 'border-border text-muted-foreground hover:text-foreground hover:border-[#30363d]'
+                    }`}
+                  >
+                    <Icon size={16} />
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="ghost" onClick={onClose}>Cancel</Button>
+          <Button onClick={handleSubmit} disabled={!name.trim()}>{submitLabel}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

frontend/src/components/modals/EdgeModal.tsx

@@ -4,6 +4,7 @@ import { RotateCcw } from 'lucide-react'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
 import { Label } from '@/components/ui/label'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { EDGE_TYPE_LABELS, type EdgeData, type EdgePathStyle, type EdgeType } from '@/types'
@@ -44,7 +45,7 @@ export function EdgeModal({ open, onClose, onSubmit, onDelete, onClearWaypoints,
     e.preventDefault()
     onSubmit({
       type,
-      label: label || undefined,
+      label: label.trim() || undefined,
       vlan_id: type === 'vlan' && vlanId ? parseInt(vlanId) : undefined,
       custom_color: customColor,
       path_style: pathStyle,
@@ -96,12 +97,13 @@ export function EdgeModal({ open, onClose, onSubmit, onDelete, onClearWaypoints,
           )}
 
           <div className="flex flex-col gap-1.5">
-            <Label className="text-xs text-muted-foreground">Label <span className="text-muted-foreground/50">(optional)</span></Label>
+            <Label className="text-xs text-muted-foreground">Label <span className="text-muted-foreground/50">(optional, multi-line)</span></Label>
-            <Input
+            <Textarea
               value={label}
               onChange={(e) => setLabel(e.target.value)}
-              placeholder="e.g. 1G, trunk..."
+              placeholder={'e.g. 1G, trunk...\nsecond line'}
-              className={`bg-[#21262d] border-[#30363d] text-sm h-8 ${modalStyles['modal-radius']}`}
+              rows={2}
+              className={`bg-[#21262d] border-[#30363d] text-sm min-h-16 resize-none ${modalStyles['modal-radius']}`}
             />
           </div>
 

frontend/src/components/modals/ExportModal.tsx

@@ -2,7 +2,15 @@ import { useState } from 'react'
 import { Download, Loader2 } from 'lucide-react'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
-import { exportToPng, EXPORT_QUALITY_OPTIONS, type ExportQuality } from '@/utils/export'
+import {
+  exportToPng,
+  exportToSvg,
+  EXPORT_QUALITY_OPTIONS,
+  EXPORT_BACKGROUND_OPTIONS,
+  type ExportQuality,
+  type ExportFormat,
+  type ExportBackground,
+} from '@/utils/export'
 
 interface ExportModalProps {
   open: boolean
@@ -12,6 +20,8 @@ interface ExportModalProps {
 
 export function ExportModal({ open, onClose, getElement }: ExportModalProps) {
   const [quality, setQuality] = useState<ExportQuality>('high')
+  const [format, setFormat] = useState<ExportFormat>('png')
+  const [background, setBackground] = useState<ExportBackground>('dark')
   const [exporting, setExporting] = useState(false)
 
   const handleExport = async () => {
@@ -19,7 +29,11 @@ export function ExportModal({ open, onClose, getElement }: ExportModalProps) {
     if (!el) return
     setExporting(true)
     try {
-      await exportToPng(el, quality)
+      if (format === 'svg') {
+        await exportToSvg(el, background)
+      } else {
+        await exportToPng(el, quality, background)
+      }
       onClose()
     } finally {
       setExporting(false)
@@ -30,7 +44,7 @@ export function ExportModal({ open, onClose, getElement }: ExportModalProps) {
     <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
       <DialogContent className="bg-[#161b22] border-border max-w-sm">
         <DialogHeader>
-          <DialogTitle className="text-foreground">Export as PNG</DialogTitle>
+          <DialogTitle className="text-foreground">Export Canvas</DialogTitle>
         </DialogHeader>
 
         <div className="space-y-2 py-2">
@@ -38,10 +52,10 @@ export function ExportModal({ open, onClose, getElement }: ExportModalProps) {
             <button
               key={opt.value}
               type="button"
-              onClick={() => setQuality(opt.value)}
+              onClick={() => { setFormat('png'); setQuality(opt.value) }}
               className={[
                 'w-full flex items-center justify-between px-3 py-2.5 rounded-md border text-sm transition-colors',
-                quality === opt.value
+                format === 'png' && quality === opt.value
                   ? 'border-[#00d4ff] bg-[#00d4ff10] text-foreground'
                   : 'border-border bg-[#0d1117] text-muted-foreground hover:border-muted-foreground',
               ].join(' ')}
@@ -50,6 +64,45 @@ export function ExportModal({ open, onClose, getElement }: ExportModalProps) {
               <span className="text-xs opacity-70">{opt.hint}</span>
             </button>
           ))}
+          <button
+            type="button"
+            onClick={() => setFormat('svg')}
+            className={[
+              'w-full flex items-center justify-between px-3 py-2.5 rounded-md border text-sm transition-colors',
+              format === 'svg'
+                ? 'border-[#00d4ff] bg-[#00d4ff10] text-foreground'
+                : 'border-border bg-[#0d1117] text-muted-foreground hover:border-muted-foreground',
+            ].join(' ')}
+          >
+            <span className="font-medium">SVG</span>
+            <span className="text-xs opacity-70">vector — scalable, small file</span>
+          </button>
+        </div>
+
+        <div className="space-y-1.5 pb-2">
+          <p className="text-xs font-medium text-muted-foreground">Background</p>
+          <div className="flex gap-2">
+            {EXPORT_BACKGROUND_OPTIONS.map((opt) => (
+              <button
+                key={opt.value}
+                type="button"
+                onClick={() => setBackground(opt.value)}
+                className={[
+                  'flex-1 flex items-center gap-2 px-3 py-2 rounded-md border text-sm transition-colors',
+                  background === opt.value
+                    ? 'border-[#00d4ff] bg-[#00d4ff10] text-foreground'
+                    : 'border-border bg-[#0d1117] text-muted-foreground hover:border-muted-foreground',
+                ].join(' ')}
+              >
+                <span
+                  className="h-3.5 w-3.5 rounded-sm border border-border"
+                  style={{ background: opt.color }}
+                />
+                <span className="font-medium">{opt.label}</span>
+                <span className="text-xs opacity-70">{opt.hint}</span>
+              </button>
+            ))}
+          </div>
         </div>
 
         <DialogFooter className="gap-2">

frontend/src/components/modals/GroupRectModal.module.css

@@ -0,0 +1,41 @@
+/* Slider container: strip native chrome so custom track/thumb align cleanly */
+.slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  height: 13px; /* match thumb height so vertical centering is the input's box center */
+}
+.slider-thumb:focus {
+  outline: none;
+}
+
+/* Track */
+.slider-accent::-webkit-slider-runnable-track {
+  height: 4px;
+  background: #00d4ff;
+  border-radius: 2px;
+}
+.slider-accent::-moz-range-track {
+  height: 4px;
+  background: #00d4ff;
+  border-radius: 2px;
+}
+
+/* Thumb — must offset on webkit so it centers on the 4px track */
+.slider-thumb::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: #00d4ff;
+  border: 2px solid #21262d;
+  margin-top: -4.5px; /* (13 - 4) / 2 */
+}
+.slider-thumb::-moz-range-thumb {
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: #00d4ff;
+  border: 2px solid #21262d;
+}

frontend/src/components/modals/GroupRectModal.tsx

@@ -7,6 +7,7 @@ import { Label } from '@/components/ui/label'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import type { TextPosition } from '@/types'
 import { hexToRgba, rgbaToHex8 } from '@/utils/colorUtils'
+import styles from './GroupRectModal.module.css'
 
 export type BorderStyle = 'solid' | 'dashed' | 'dotted' | 'double' | 'none'
 
@@ -88,6 +89,8 @@ const TEXT_POSITIONS: { value: TextPosition; label: string }[] = [
   { value: 'bottom-right',  label: '↘' },
 ]
 
+const getFontLabel = (value: string) => FONTS.find((f) => f.value === value)?.label ?? value
+
 interface GroupRectModalProps {
   open: boolean
   onClose: () => void
@@ -138,8 +141,10 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
           <div className="flex flex-col gap-1.5">
             <Label className="text-xs text-muted-foreground">Font</Label>
             <Select value={form.font} onValueChange={(v: string | null) => set('font', v ?? 'inter')}>
-              <SelectTrigger className={`bg-[#21262d] border-[#30363d] text-sm h-8 cursor-pointer ${modalStyles['modal-interactive']} ${modalStyles['modal-radius']}`}> 
+              <SelectTrigger className={`bg-[#21262d] border-[#30363d] text-sm h-8 cursor-pointer ${modalStyles['modal-interactive']} ${modalStyles['modal-radius']}`} aria-label="Font selector">
-                <SelectValue />
+                <SelectValue>
+                  {getFontLabel(form.font)}
+                </SelectValue>
               </SelectTrigger>
               <SelectContent className="bg-[#21262d] border-[#30363d]">
                 {FONTS.map((f) => (
@@ -164,6 +169,7 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
                     title={value}
                     onClick={() => set('text_position', value)}
                     className={`h-8 rounded text-base transition-colors cursor-pointer ${modalStyles['modal-interactive']}`}
+                    aria-label={`Text position ${label}`}
                     style={{
                       background: isSelected ? '#00d4ff22' : '#21262d',
                       border: `1px solid ${isSelected ? '#00d4ff88' : '#30363d'}`,
@@ -189,6 +195,7 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
                     type="button"
                     onClick={() => set('label_position', value)}
                     className={`flex items-center justify-center h-8 rounded text-xs transition-colors cursor-pointer ${modalStyles['modal-interactive']}`}
+                    aria-label={`Label position ${label}`}
                     style={{
                       background: isSelected ? '#00d4ff22' : '#21262d',
                       border: `1px solid ${isSelected ? '#00d4ff88' : '#30363d'}`,
@@ -228,7 +235,7 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
                       max={100}
                       value={alpha}
                       onChange={(e) => set(key, rgbaToHex8(hex6, Number(e.target.value)))}
-                      className="w-full h-1 accent-[#00d4ff] cursor-pointer"
+                      className={`w-full cursor-pointer mt-2 ${styles['slider-thumb']} ${styles['slider-accent']}`}
                       title={`Opacity: ${alpha}%`}
                     />
                     <span className="text-[9px] text-muted-foreground/60">{label} {alpha}%</span>
@@ -250,6 +257,7 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
                     type="button"
                     onClick={() => set('text_size', value)}
                     className={`flex items-center justify-center h-8 rounded transition-colors cursor-pointer ${modalStyles['modal-interactive']}`}
+                    aria-label={`Text size ${label}`}
                     style={{
                       background: isSelected ? '#00d4ff22' : '#21262d',
                       border: `1px solid ${isSelected ? '#00d4ff88' : '#30363d'}`,
@@ -277,6 +285,7 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
                     title={label}
                     onClick={() => set('border_style', value)}
                     className={`flex flex-col items-center justify-center h-10 rounded text-xs gap-0.5 transition-colors cursor-pointer ${modalStyles['modal-interactive']}`}
+                    aria-label={`Border style ${label}`}
                     style={{
                       background: isSelected ? '#00d4ff22' : '#21262d',
                       border: `1px solid ${isSelected ? '#00d4ff88' : '#30363d'}`,
@@ -303,6 +312,7 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
                     type="button"
                     onClick={() => set('border_width', value)}
                     className={`flex items-center justify-center h-8 rounded text-xs transition-colors cursor-pointer ${modalStyles['modal-interactive']}`}
+                    aria-label={`Border width ${label}`}
                     style={{
                       background: isSelected ? '#00d4ff22' : '#21262d',
                       border: `1px solid ${isSelected ? '#00d4ff88' : '#30363d'}`,
@@ -320,7 +330,7 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
           <div className="flex flex-col gap-1.5">
             <Label className="text-xs text-muted-foreground">Z-Order (1 = furthest back)</Label>
             <Select value={String(form.z_order)} onValueChange={(v: string | null) => set('z_order', v !== null ? Number(v) : 1)}>
-              <SelectTrigger className={`bg-[#21262d] border-[#30363d] text-sm h-8 cursor-pointer ${modalStyles['modal-interactive']}`}> 
+              <SelectTrigger className={`bg-[#21262d] border-[#30363d] text-sm h-8 cursor-pointer ${modalStyles['modal-interactive']}`} aria-label="Z-order selector">
                 <SelectValue />
               </SelectTrigger>
               <SelectContent className="bg-[#21262d] border-[#30363d]">